/*
Theme Name: Nomad Security
Theme URI: https://nomadsec.io/blog
Author: Nomad Security
Author URI: https://nomadsec.io
Description: Editorial theme for The Horizon Dispatch (nomadsec.io/blog), Nomad Security's publication. Magazine-style homepage with featured-post hero, topic pills, and 2-column section-badged post grid; single-column reading layout for individual posts. Sectional top nav (Engagements / Briefings / Threat Watch). Inherits the parent brand's cyan/dark/white palette and Raleway/Roboto/Poppins type system.
Version: 0.3.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nomadsec
Tags: blog, one-column, block-styles, full-site-editing, custom-colors, custom-logo, custom-menu, editor-style, threaded-comments, translation-ready
*/

/*
 * 95% of the design lives in theme.json. This file holds:
 *   1. Layout escape-hatches (grid, flex behaviors, aspect ratios) that
 *      block-editor JSON cannot express cleanly.
 *   2. Mobile / responsive breakpoints (also outside theme.json's reach).
 *   3. Hover / focus interactions (e.g., card lift on hover).
 *   4. Fallback colored panels for posts that don't have a featured image,
 *      so the grid never has dead empty boxes.
 */

/* -------------------------------------------------------------------------
 * Headers and dark sections
 * Force-white text inside our dark chrome so any block defaults that try to
 * inherit a foreground color get overridden. This is the fix for the
 * "dark gray on black" rendering we saw with wp:navigation defaults.
 * ------------------------------------------------------------------------- */
.site-header-dark,
.site-header-dark a,
.site-header-dark p,
.site-header-dark h1,
.site-header-dark h2,
.site-header-dark h3,
.site-header-dark h4 {
  color: #ffffff;
}
.site-header-dark a:hover {
  color: var(--wp--preset--color--accent);
}
.site-header-dark .nav-cta a:hover {
  background: var(--wp--preset--color--accent-darker) !important;
}

.site-footer-dark {
  border-top: 4px solid var(--wp--preset--color--accent);
}
.site-footer-dark a:hover {
  color: var(--wp--preset--color--accent);
}

.subhero-dark .subhero-side {
  border-left: 1px solid #252525;
  padding-left: 1.5rem;
}

/* -------------------------------------------------------------------------
 * Topic pills (homepage browse strip)
 * ------------------------------------------------------------------------- */
.topic-strip .topic-pill a {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.topic-strip .topic-pill a:hover {
  background: #00DEDE !important;
  border-color: #00DEDE !important;
  color: #060606 !important;
}

/* -------------------------------------------------------------------------
 * Featured-post card (hero on homepage)
 * Grid: image 5/12 cols on desktop, full width on mobile.
 * ------------------------------------------------------------------------- */
.featured-card {
  display: grid !important;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.5rem;
  align-items: center;
}

.featured-card .featured-card-image,
.featured-card .featured-card-image img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}
.featured-card .featured-card-image .wp-block-post-featured-image {
  height: 100%;
  margin: 0;
}

.featured-strip .read-link a {
  transition: color 0.15s ease;
}
.featured-strip .read-link a:hover {
  color: #00DEDE !important;
}

/* -------------------------------------------------------------------------
 * Post-grid cards (homepage and "more posts" strip on single)
 * Hover lift + image aspect-ratio enforcement.
 * ------------------------------------------------------------------------- */
.post-grid .post-card {
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex !important;
  flex-direction: column;
}
.post-grid .post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
  border-color: #d1d5db !important;
}
.post-grid .post-card .post-card-image,
.post-grid .post-card .post-card-image img,
.post-grid .post-card figure.wp-block-post-featured-image,
.post-grid .post-card figure.wp-block-post-featured-image img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0;
}
.post-grid .post-card figure.wp-block-post-featured-image {
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}
.post-grid .post-card .post-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.post-grid .post-card .post-card-body > .wp-block-post-title {
  flex: 1;
}

/* Cards WITHOUT a featured image: replace the empty figure with a branded
 * cyan-on-dark gradient block so the grid stays visually rhythmic.
 * The :not([style]) targets the case where wp:post-featured-image renders
 * an empty wrapper because the post has no thumbnail set. */
.post-grid .post-card figure.wp-block-post-featured-image:empty,
.post-grid .post-card .wp-block-post-featured-image:empty,
.post-grid .post-card .wp-block-post-featured-image a:empty {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, #060606 0%, #1a1a1a 60%, #007080 100%);
  border-radius: 8px 8px 0 0;
  position: relative;
}
.post-grid .post-card figure.wp-block-post-featured-image:empty::after,
.post-grid .post-card .wp-block-post-featured-image:empty::after {
  content: "Nomad Security";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00DEDE;
  font-family: "Raleway", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  pointer-events: none;
}

/* Featured card (hero) gets the same fallback. */
.featured-card .featured-card-image figure.wp-block-post-featured-image:empty,
.featured-card .featured-card-image .wp-block-post-featured-image:empty {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #060606 0%, #1a1a1a 60%, #007080 100%);
  border-radius: 6px;
  position: relative;
}
.featured-card .featured-card-image figure.wp-block-post-featured-image:empty::after,
.featured-card .featured-card-image .wp-block-post-featured-image:empty::after {
  content: "Nomad Security";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00DEDE;
  font-family: "Raleway", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
 * Single-post body (entry-content) — improve in-article rhythm.
 * ------------------------------------------------------------------------- */
.entry-content {
  font-size: 1.125rem;
  line-height: 1.7;
}
.entry-content > p {
  margin-bottom: 1.5em;
}
.entry-content h2,
.entry-content h3 {
  scroll-margin-top: 2rem;
}
.entry-content h2::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--wp--preset--color--accent);
  margin-bottom: 1.25rem;
  border-radius: 2px;
}

/* Inline code */
.entry-content :not(pre) > code {
  background: #f3f4f6;
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-size: 0.9em;
  font-family: var(--wp--preset--font-family--mono);
}

/* Pull-quote / blockquote */
.entry-content .wp-block-pullquote,
.entry-content .wp-block-quote {
  border-left: 3px solid var(--wp--preset--color--accent);
  padding-left: 1.5em;
  margin-left: 0;
  font-style: italic;
  color: var(--wp--preset--color--heading);
}

/* Anchor links inside post content */
.entry-content a:not(.wp-block-button__link):not(.wp-element-button) {
  color: #007080;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.15s ease;
}
.entry-content a:not(.wp-block-button__link):not(.wp-element-button):hover {
  color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
 * Featured image on single post: pull up to overlap the dark hero band.
 * ------------------------------------------------------------------------- */
.post-featured-band figure.wp-block-post-featured-image {
  margin-top: -3rem;
  margin-bottom: 3rem;
}
.post-featured-band figure.wp-block-post-featured-image:empty {
  /* If no featured image, the negative margin would create a 3rem gap into
   * the dark band. Suppress that and keep the body flowing normally. */
  display: none;
}

/* -------------------------------------------------------------------------
 * Code blocks inside articles: dark surface like a terminal.
 * ------------------------------------------------------------------------- */
.entry-content pre.wp-block-code,
.entry-content pre.wp-block-preformatted {
  background: var(--wp--preset--color--dark);
  color: var(--wp--preset--color--background);
  padding: 1.25em;
  border-radius: 6px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.9em;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.entry-content pre.wp-block-code code {
  background: transparent;
  color: inherit;
  padding: 0;
}

/* -------------------------------------------------------------------------
 * Mobile breakpoints
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Featured card stacks vertically on tablet/mobile. */
  .featured-card {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }
  .featured-card .featured-card-image img,
  .featured-card .featured-card-image figure.wp-block-post-featured-image:empty {
    aspect-ratio: 16 / 9;
  }

  /* Sub-hero side column drops below main heading. */
  .subhero-dark .subhero-side {
    border-left: none;
    border-top: 1px solid #252525;
    padding-left: 0;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
  }
}

@media (max-width: 700px) {
  /* Top nav: hide the secondary categories on small screens; keep
   * Latest, Contact, and the cyan CTA button visible. */
  .site-nav .has-nav-font-family:nth-child(2),
  .site-nav .has-nav-font-family:nth-child(3),
  .site-nav .has-nav-font-family:nth-child(4) {
    display: none;
  }
  .site-nav {
    gap: 1rem !important;
  }

  /* Post grid stacks to single column on phones. */
  .post-grid {
    grid-template-columns: 1fr !important;
  }

  /* CTA strip: stack the headline above the buttons. */
  .cta-strip > .wp-block-group {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 500px) {
  /* On the smallest screens, hide categories AND contact; just keep
   * Latest + the cyan CTA button. */
  .site-nav .has-nav-font-family:nth-child(5) {
    display: none;
  }
}

/* -------------------------------------------------------------------------
 * "Latest pillar" eyebrow on the sub-hero side column: wraps if narrow.
 * ------------------------------------------------------------------------- */
.subhero-side {
  min-width: 0;
}

/* -------------------------------------------------------------------------
 * Pagination polish (centered, with gap between numbers)
 * ------------------------------------------------------------------------- */
.wp-block-query-pagination {
  align-items: center;
}
.wp-block-query-pagination-numbers {
  display: flex;
  gap: 0.5rem;
}
.wp-block-query-pagination-numbers .page-numbers {
  padding: 0.5em 0.85em;
  border-radius: 3px;
  text-decoration: none;
  color: var(--wp--preset--color--heading);
  border: 1px solid var(--wp--preset--color--rule);
}
.wp-block-query-pagination-numbers .page-numbers:hover {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--dark);
  border-color: var(--wp--preset--color--accent);
}
.wp-block-query-pagination-numbers .page-numbers.current {
  background: var(--wp--preset--color--dark);
  color: var(--wp--preset--color--background);
  border-color: var(--wp--preset--color--dark);
}