/**
 * Smith Publicity — Desktop design system (Figma templates @1440)
 * Applies ONLY at min-width: 1200px. Mobile/tablet untouched.
 *
 * Templates covered:
 *   About Us, Services, Focus / Focus-Business / Focus-Lifestyle,
 *   Contact, FAQ, Insights, Lead Magnet (+ shared chrome for all pages)
 *
 * Tokens (measured from the template PNGs @1440):
 *   section padding .... 112px / 64px
 *   container .......... 1280px
 *   page H1 ............ 64px
 *   page subheading .... 32px
 *   section H2 ......... 52px
 *   intro lead ......... 36px
 *   body ............... 24px
 *   nav ................ 24px
 *   site header ........ 80px
 *   page-header band ... 560px
 */

/* ========== PARAGRAPH SCALE (P1 / P2 / P3) ========== */
:root {
  --p1-size: 1.25rem;   /* 20px */
  --p1-lh: 1.5;
  --p2-size: 1rem;      /* 16px */
  --p2-lh: 1.5;
  --p3-size: 0.875rem;  /* 14px */
  --p3-lh: 1.5;
}

.p1,
.p2,
.p3 {
  font-family: var(--font-sans, "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-weight: 400 !important;
  color: var(--color-text, #0e1b44);
}

.p1 {
  font-size: var(--p1-size) !important;
  line-height: var(--p1-lh) !important;
}

.p2 {
  font-size: var(--p2-size) !important;
  line-height: var(--p2-lh) !important;
}

.p3 {
  font-size: var(--p3-size) !important;
  line-height: var(--p3-lh) !important;
}

/* Ensure P-scale wins against legacy !important component overrides */
.featured-work__media.p1 {
  font-size: var(--p1-size) !important;
  line-height: var(--p1-lh) !important;
}

.featured-work__media.p2 {
  font-size: var(--p2-size) !important;
  line-height: var(--p2-lh) !important;
}

.featured-work__media.p3 {
  font-size: var(--p3-size) !important;
  line-height: var(--p3-lh) !important;
}

@media (min-width: 992px) {
  /* ========== SITE HEADER ==========
     Sizing lives in the canonical header block (figma-mobile-v4.css). */

  /* Active item: navy text + soft teal underline (template style) */
  .nav-menu > .menu-item.current-menu-item > a,
  .nav-menu > .menu-item.current-menu-ancestor > a {
    color: var(--color-blue-zodiac, #0e1b44);
    box-shadow: 0 3px 0 0 #7ccac2;
  }

  /* ========== PAGE HEADER (inner pages) ========== */
  .page-header {
    padding: 112px 64px;
  }

  .page-header__inner {
    max-width: 1280px;
  }

  .page-header--has-image {
    /* Tall inner-page photo heroes: let the image band continue well below
       the heading/subheading instead of clipping to the old 560px crop. */
    padding-top: 150px;
    padding-bottom: 150px;
    min-height: 66vh;
    max-height: none;
    box-sizing: border-box;
  }

  .page-header--valign-bottom .page-header__inner {
    min-height: 260px;
  }

  .page-header__heading {
    font-size: 64px; /* template H1 */
    line-height: 1.2;
    letter-spacing: -0.64px;
  }

  .page-header__subheading {
    font-size: 32px; /* template subheading */
    line-height: 1.3;
    letter-spacing: -0.32px;
  }

  .page-header__content {
    gap: 24px;
    /* No width cap: template headings/subheadings wrap at container width
       (e.g. the long Focus titles wrap into 2 wide lines, not 4 narrow ones) */
    max-width: none;
  }

  .page-header--align-right .page-header__content {
    margin-right: 0;
  }

  /* ========== INTRO (two-column) ========== */
  .home-intro {
    padding: 112px 64px;
  }

  .home-intro .container {
    max-width: 1280px;
  }

  .home-intro__grid {
    gap: 80px;
  }

  .home-intro__col--heading p,
  .home-intro__col--heading h2,
  .home-intro__col--heading h3 {
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -0.36px;
  }

  .home-intro__col--body {
    gap: 40px;
  }

  .home-intro__col--body p {
    font-size: 24px;
    line-height: 1.5;
  }

  /* ========== CONTENT LIST ========== */
  .content-list.section,
  .content-list {
    padding-top: 112px;
    padding-bottom: 112px;
    padding-left: 64px;
    padding-right: 64px;
  }

  /* Tighten the gap between the homepage "Great book launches" chapter section
     and the following "Positioned with purpose" focus-area section. */
  .content-list--chapter.content-list--heading-top + .content-list--lg-items {
      padding-top: 48px;
  }

  .content-list__container {
    max-width: 1280px;
  }

  .content-list__grid {
    gap: 80px;
  }

  .content-list__heading {
    font-size: 52px;
    line-height: 1.2;
    letter-spacing: -0.52px;
  }

  .content-list--heading-top .content-list__header {
    margin-bottom: 60px;
  }

  .content-list__intro,
  .content-list__intro p {
    font-size: 24px;
    line-height: 1.5;
  }

  .content-list__media {
    flex-basis: 400px;
  }

  /* Approach section: heading sits above paragraph in right column,
     image on left stretches to match combined heading+paragraph height. */
  .content-list--image-left.content-list--chapter .content-list__grid {
    align-items: stretch;
  }
  .content-list--image-left.content-list--chapter .content-list__media {
    display: flex;
    align-self: stretch;
    height: auto;
  }
  .content-list--image-left.content-list--chapter .content-list__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .content-list--image-left.content-list--chapter .content-list__content > .content-list__heading {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* ---- Checklist bands (cream/navy content-list variants) ----
     Template: the coloured band is CONTAINED to the 1280px container
     (white page margins outside it), with ~56px internal padding and
     ~114px white gaps between consecutive bands — not full-bleed. */
  .content-list--bg-cream.content-list,
  .content-list--bg-navy.content-list,
  .content-list--bg-cream.section,
  .content-list--bg-navy.section {
    background: transparent;
    padding: 57px 64px;
  }

  .content-list--bg-cream .content-list__container,
  .content-list--bg-navy .content-list__container {
    max-width: 1280px;
    padding: 56px 60px;
    box-sizing: border-box;
  }

  .content-list--bg-cream .content-list__container {
    background-color: var(--color-pampas, #f9f8f5);
  }

  .content-list--bg-navy .content-list__container {
    background-color: var(--color-blue-zodiac, #0e1b44);
  }

  /* Carded content spans the whole band (no inner white box) */
  .content-list--carded .content-list__content {
    max-width: none;
    background: transparent;
    padding: 0;
  }

  /* Yellow horizontal line bullet marker (matches homepage accent lines) */
  .content-list--carded .content-list__item::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    border-radius: 0;
    background-color: var(--color-selective-yellow, #f0b200);
    left: 0;
    top: 0.65em;
  }

  .content-list__item {
    font-size: 20px; /* template checklist body */
    line-height: 1.5;
  }

  /* ---- Chapter rows under a big centered heading (Services template) ----
     Row headings are the smaller 36px serif (not 52px); bold lead-in and
     list items are 24px with ~40px between items. */
  .content-list--flush-top .content-list__heading {
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -0.36px;
  }

  .content-list--flush-top .content-list__conclusion {
    font-size: 24px;
    line-height: 1.5;
  }

  /* Bold lead-in above the list ("The goal is not just awareness…") */
  .content-list--flush-top .content-list__subline {
    font-size: 24px;
    line-height: 1.5;
    font-weight: 700;
    font-style: normal;
  }

  .content-list--flush-top .content-list__item {
    font-size: 24px;
  }

  /* Superseded - the live copy of this step is in
     blocks/content-list/content-list.css, after the `--tight` bullet gap it
     has to outrank. This file loads first, so the value here cannot win. */
  .content-list--flush-top .content-list__list {
    gap: 0.25rem; /* tightened bullet spacing */
  }

  /* Focus-area rows (Services template): 40px serif row headings */
  .content-list--imgfit-contain .content-list__heading:not(.content-list__heading--large) {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -0.4px;
  }

  /* ========== CONTENT FEATURES ========== */
  .content-features.section,
  .content-features {
    padding: 112px 64px;
  }

  .content-features__inner {
    max-width: 1280px;
  }

  .content-features__heading {
    font-size: 52px;
    line-height: 1.2;
    letter-spacing: -0.52px;
  }

  .content-features__text,
  .content-features__text p {
    font-size: 24px;
    line-height: 1.5;
  }

  /* DEAD RULE - kept only as a pointer. This file is enqueued by
     smith_retrofit_assets() BEFORE the block stylesheets, so this
     selector loses on source order to the identical-specificity rule in
     blocks/content-features/content-features.css and has never rendered.
     The live 980px desktop cap now lives in that block file, next to the
     820px base it overrides. Do not "fix" this by bumping the value here. */
  .content-features--stacked .content-features__head {
    margin-bottom: 48px;
    max-width: 980px;
  }

  .content-features__grid {
    gap: 80px;
  }

  /* ---- Core Values (bar style) — About template ----
     Thick 10px colour bars, 36px serif item headings, 24px body,
     ~48px between items; the list bottom-aligns with the photo column. */
  .content-features--cards-bar .content-features__grid {
    align-items: flex-end;
  }

  .content-features--cards-bar .content-features__list {
    gap: 48px;
  }

  .content-features--cards-bar .content-features__item {
    border-left-width: 10px;
    padding: 0.25rem 0 0.25rem 2rem;
    gap: 0.75rem;
  }

  .content-features--cards-bar .content-features__item-heading {
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -0.36px;
  }

  .content-features--cards-bar .content-features__item-text {
    font-size: 24px;
    line-height: 1.5;
  }

  /* ========== FEATURED WORK / CASE STUDIES / TEAM ========== */
  .featured-work.section,
  .featured-work {
    padding: 112px 0 0;
  }

  .featured-work__heading {
    font-size: 52px;
    line-height: 1.2;
    letter-spacing: -0.52px;
  }

  .featured-work__header {
    margin-bottom: 40px;
  }

  .featured-work__list {
    gap: 64px;
  }

  .featured-work__item {
    gap: 60px;
  }

  .case-studies.section,
  .case-studies {
    padding: 112px 64px;
  }

  .block-team.section,
  .block-team {
    padding: 112px 64px;
  }

  /* ---- Team grid (About template) ----
     Template stacks the member rows tightly; consecutive team sections
     must not re-add the full 112px section padding. Keep the gap between
     sections identical to the grid row gap so row spacing feels uniform. */
  .block-team.section:has(+ .block-team) {
    padding-bottom: 1.75rem;
  }

  .block-team.section + .block-team.section {
    padding-top: 0;
  }

  /* Template cards: arrow sits inline next to the name; LinkedIn circle
     is centered at the bottom of the card where the old arrow button was. */
  .block-team__member {
    position: relative;
  }

  .block-team__more {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
  }

  .block-team__more svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* BugZap #85: the LinkedIn circle used to be absolutely pinned to the bottom
     of the card, with .block-team__joined reserving 3.25rem of empty space for
     it. The Agentis design export's own later layer supersedes that with plain flow
     (position: static, margin: 1rem auto 0) plus 1.25rem of card padding, and
     that is what actually renders there. blocks/team/team.css now owns the
     whole treatment, so the pinned version is removed rather than left here to
     fight it - the enqueue order between this layer and the block style is not
     guaranteed, and two layers disagreeing is exactly how the export ended up
     needing !important on everything. */

  /* ========== FAQ / CONTACT / NEWSLETTER ========== */
  .smith-faq.section,
  .smith-faq {
    padding: 112px 64px;
  }

  /* Contact / Insights FAQ band (no group label): cream page band + white
     accordion card, matching the Contact template. */
  .smith-faq:not(:has(.smith-faq__group--two-col)) {
    background-color: var(--color-pampas, #f9f8f5);
  }

  .smith-faq:not(:has(.smith-faq__group--two-col)) .smith-faq__heading {
    max-width: 800px;
    margin: 0 auto 3rem;
    text-align: left;
  }

  /* H2 Deck (italic sub-line) for desktop */
  .h2-deck,
  .content-list__deck {
    font-family: var(--font-family-base, "Barlow", sans-serif);
    font-weight: 300;
    font-style: italic;
    font-size: 2rem;
    line-height: 1.3;
    letter-spacing: -0.015em;
  }

  .smith-faq__heading.h2-deck {
    margin-top: -2rem;
  }

  .smith-faq:not(:has(.smith-faq__group--two-col)) .smith-faq__group {
    max-width: 800px;
    margin-inline: auto;
    background: #fff;
    padding: 8px 28px 28px;
    box-sizing: border-box;
  }

  .smith-faq:not(:has(.smith-faq__group--two-col)) .smith-faq__list {
    border-top: 0;
  }

  .smith-faq:not(:has(.smith-faq__group--two-col)) .smith-faq__item:first-child {
    border-top: 0;
  }


  .smith-contact-form.section,
  .smith-contact-form {
    padding: 112px 64px;
  }

  .smith-newsletter.section,
  .smith-newsletter {
    padding: 112px 64px;
  }

  .latest-posts.section,
  .latest-posts {
    padding-top: 64px;
    padding-bottom: 112px;
    padding-inline: 64px;
  }

  /* ========== CTA ========== */
  .site-cta {
    padding: 112px 64px;
  }

  .site-cta__heading {
    font-size: 52px;
    line-height: 1.2;
  }

  /* ---- Full-width bento quote card (focus templates) ----
     Large book/portrait composite on the left, centered quote and
     attribution on the right. */
  .testimonial-bento__card--quote.testimonial-bento__card--span-full {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 56px;
    padding: 56px 64px;
  }

  .testimonial-bento__card--span-full .testimonial-bento__full-media {
    flex: 0 0 300px;
  }

  .testimonial-bento__card--span-full .testimonial-bento__full-media .testimonial-bento__avatar-img {
    display: block;
    width: 300px;
    height: auto;
  }

  .testimonial-bento__card--span-full .testimonial-bento__full-media img {
    width: 100%;
    height: auto;
    border-radius: 0;
  }

  .testimonial-bento__card--span-full .testimonial-bento__full-body {
    flex: 1;
    text-align: center;
  }

  .testimonial-bento__card--span-full .testimonial-bento__full-body .testimonial-bento__quote p {
    font-family: Barlow, sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5;
  }

  .testimonial-bento__card--span-full .testimonial-bento__full-body .testimonial-bento__quote p:last-child {
    font-family: var(--font-family-heading, Georgia, serif);
    font-weight: 700;
    font-size: 22px;
  }

  .testimonial-bento__card--span-full .testimonial-bento__full-body .testimonial-bento__avatar {
    display: block;
    margin-top: 1.5rem;
  }

  .testimonial-bento__card--span-full .testimonial-bento__full-body .testimonial-bento__avatar-content {
    text-align: center;
  }

  /* ---- Case-studies feature card (gold band, focus templates) ----
     Author, book byline, and outlet list sit centered under the photo in the
     left column (the markup was moved into __media to match). */
  .case-studies__card--feature .case-studies__media {
    text-align: center;
  }

  .case-studies__card--feature .case-studies__media .case-studies__author {
    margin: 1.25rem 0 0;
    font-weight: 700;
    font-size: 20px;
  }

  .case-studies__card--feature .case-studies__media .case-studies__book {
    margin: 0.5rem 0 0;
    font-size: 14px;
    font-style: italic;
  }

  .case-studies__card--feature .case-studies__media .case-studies__media-list {
    margin: 1.5rem 0 0;
    font-size: 13px;
    /* BugZap #127: the outlet list is regular weight; only the editor-typed
       <b>Featured in:</b> lead is bold (case-studies.css handles that). This
       desktop rule was overriding the block's 400 at (0,3,0). */
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
  }

  /* Inline-styled bands: at desktop the 1280px container is already centered
     with 80px side margins, so the extra 64px inline padding must go. */
  .figma-flush {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ========== GENERIC CONTAINER ========== */
  /* Sections already carry the 64px inline padding; the container must not
     add more, or content lands at 144px instead of the template's 80px. */
  .container {
    max-width: 1280px;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ------- Tablet band (992–1199): hamburger-only header ------------------
   Drop the desktop primary nav entirely below 1200px; keep logo + CTA +
   hamburger, shrink header to 64px so it matches the tablet regime. */
/* Tablet band (992–1199): keep the FULL desktop header; just tighten
   gutters, nav gap and link size so logo + 4 links + CTA fit. */
@media (min-width: 992px) and (max-width: 1199px) {
  .site-header .main-nav { display: block !important; }
  .site-header .menu-toggle { display: none !important; }
  .site-header .header-cta { display: block !important; }
}

/* Dropdown: teal dot marks the current page */
.nav-menu .sub-menu a {
  position: relative;
  margin-left: 0;
  padding-left: 2.25rem;
}
.nav-menu .sub-menu .current-menu-item > a,
.nav-menu .sub-menu .current_page_item > a {
  color: #0f7e7c;
}
.nav-menu .sub-menu .current-menu-item > a::before,
.nav-menu .sub-menu .current_page_item > a::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #0f7e7c;
}

/* Teal (unscrolled) header: active-page dot + label go gold for contrast */
.site-header:not(.is-scrolled) .nav-menu .sub-menu .current-menu-item > a,
.site-header:not(.is-scrolled) .nav-menu .sub-menu .current_page_item > a {
  color: #f0b200 !important;
}
.site-header:not(.is-scrolled) .nav-menu .sub-menu .current-menu-item > a::before,
.site-header:not(.is-scrolled) .nav-menu .sub-menu .current_page_item > a::before {
  background-color: #f0b200 !important;
}


/* === History: navy feature section ================================== */
.content-list.content-list--navy{background:#0e1b44;color:#fff;}
.content-list.content-list--navy .content-list__heading,
.content-list.content-list--navy h2,
.content-list.content-list--navy h3,
.content-list.content-list--navy .content-list__eyebrow{color:#fff !important;}
.content-list.content-list--navy .content-list__intro,
.content-list.content-list--navy .content-list__intro p,
.content-list.content-list--navy p{color:rgba(255,255,255,.82) !important;}