/* Arik Housley — arik-build.css
   Build-side rules for states the v1.0 handoff leaves to production. Loaded after
   arik-tokens.css. Token values only: anything that could live in tokens.css belongs
   there first (change it in design/design-handoff/tokens.css, bump, copy).

   1. The open mobile menu (manifest "requires": mobile-nav). The header's GenerateBlocks
      navigation switches to a full-screen slate overlay at 1000px and below (the 6-item menu,
      Speaking first, needs ~993px; it was 1100, 1010 and 900px as the menu changed on 2026-10-11,
      DESIGN.md open item 14). Re-measure when an item is added or renamed; its links keep the
      tokens' .ah-nav__link look, one size up so they're easy to tap. */

.ah-nav .gb-menu-container--mobile .ah-nav__link {
  font-size: var(--ah-fs-base);
  padding-block: var(--ah-s-2);
}

/* The Audiences dropdown (Rob, 2026-10-11: Corporate, Faith & Community, Education). Desktop: it
   drops straight under "Audiences" (GenerateBlocks right-aligns sub-menus), on the header's slate
   with a gold top edge, the links padded. In the phone overlay it stays in the column. */
/* GenerateBlocks' arrow is a block-level flex span inside the link, so it sat under "Audiences". */
.ah-nav .gb-submenu-toggle { display: inline-flex; vertical-align: middle; margin-inline-start: 0.35em; }
@media (min-width: 1001px) {
  /* the arrow close to the word (Rob): GenerateBlocks gives it a 25px-wide box; the phone menu keeps it as a tap target */
  .ah-nav .gb-submenu-toggle { width: auto; margin-inline-start: 0.25em; }
  .ah-nav .gb-sub-menu { left: 0; right: auto; width: max-content; min-width: 200px; padding-block: var(--ah-s-1); border-top: 2px solid var(--ah-gold); }
  .ah-nav .gb-sub-menu .ah-nav__link { display: block; padding: 10px var(--ah-s-3); }
}
@media (max-width: 1000px) {
  /* Phone overlay: centred like the other items. */
  .ah-nav .gb-menu-container--mobile .menu-item-has-children { text-align: center; }
  .ah-nav .gb-menu-container--mobile .gb-sub-menu { width: auto; }
}

/* 2. Hero media (manifest "requires": hero-media). Rob chose video on 2026-10-10: the live
      site's Vimeo sizzle reel (1131894519), in the mock's 16:9 media frame. Vimeo's own
      controls stay on, so visitors can pause it (WCAG 2.2.2); assets/js/arik-video.js
      turns autoplay off for visitors who ask for reduced motion. */
.hero__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--ah-radius-card);
  background: var(--ah-slate);
}

/* 3. GeneratePress host collision: its main.css styles every blockquote
      (border-left 5px, padding 20px, font-size 1.2em, italic). The testimonials are core
      Quote blocks carrying .ah-quote, which owns its own look; undo only what GP adds.
      .ah-quote already resets the margin. */
.ah-quote {
  border-left: 0;
  padding: 0;
  font-size: inherit;
  font-style: normal;
}
/* GP also gives blockquote empty ::before/::after boxes (content: ""). .ah-quote is a flex column,
   so each became an item and added a stray gap above the mark and below the name (found
   2026-10-11 matching the editor to the site). */
.ah-quote::before,
.ah-quote::after { content: none; }

/* 4. Gravity Forms (manifest "requires": gravity-forms). The form keeps GF's Orbital theme
      (its error, focus and confirmation states stay GF's own), retuned to the tokens'
      .ah-field look through Orbital's variables. Literal sizes mirror .ah-field__label and
      .ah-field__input in tokens.css, which carry them as literals too. The block's own
      colour settings (border, focus, button) are set to the same token hexes in the editor. */
.gform-theme--orbital {
  --gf-ctrl-label-font-family-primary: var(--ah-font-text);
  --gf-ctrl-label-font-size-primary: 1rem;
  --gf-ctrl-label-font-weight-primary: var(--ah-fw-strong);
  --gf-ctrl-label-color-primary: var(--ah-fg);
  --gf-ctrl-label-font-family-req: var(--ah-font-text);
  --gf-ctrl-label-font-size-req: 1rem;
  --gf-ctrl-label-font-weight-req: var(--ah-fw-text);
  --gf-ctrl-label-color-req: var(--ah-fg-muted);
  --gf-ctrl-font-family: var(--ah-font-text);
  --gf-ctrl-font-size: 1rem;
  --gf-ctrl-padding-x: 14px;
  --gf-ctrl-size-md: calc(1rem * var(--ah-lh-body) + 26px); /* 12px padding x2 + 1px border x2 + one line, as .ah-field__input */
  --gf-ctrl-radius: var(--ah-radius);
  --gf-ctrl-btn-radius: var(--ah-radius);
  --gf-ctrl-btn-font-family: var(--ah-font-text);
  --gf-ctrl-btn-font-size-md: 1rem;                 /* the button reads the -md variants, as .ah-btn */
  --gf-ctrl-btn-font-weight: var(--ah-fw-button);
  --gf-ctrl-btn-padding-x-md: 26px;
  --gf-ctrl-btn-bg-color-hover-primary: var(--ah-teal-deep);
  --gf-form-gap-x: var(--ah-s-3);                   /* the mock's .contact__form gap */
  --gf-form-gap-y: var(--ah-s-3);
  /* The live form has placeholders the mock doesn't. GF's default grey is 4.22:1 on white
     (site-color-audit.js, 2026-10-10); text-muted is 7.49:1. */
  --gf-ctrl-placeholder-color: var(--ah-text-muted);
  --gf-ctrl-placeholder-opacity: 1;
}
/* Comment / Questions: five rows, as the mock's textarea (rows="5"). GF's foundation sheet
   gives a "large" textarea min-block-size: 18rem, so the minimum has to be reset too. */
.gform-theme--orbital .gfield textarea.textarea {
  block-size: calc(5 * 1rem * var(--ah-lh-body) + 26px);
  min-block-size: calc(5 * 1rem * var(--ah-lh-body) + 26px);
  resize: vertical;
}
/* The privacy note after the last field (Gravity Forms HTML field, class ah-form-note; Rob, 2026-10-12):
   one quiet line in the caption size, the link in the site's underline. */
.gform-theme--orbital .gfield.ah-form-note p { margin: 0; font-size: var(--ah-fs-meta); color: var(--ah-fg-muted); }
.gform-theme--orbital .gfield.ah-form-note a {
  color: var(--ah-link);
  text-decoration-line: underline;
  text-decoration-color: var(--ah-ul-color);
  text-decoration-thickness: var(--ah-ul-rest);
  text-underline-offset: var(--ah-ul-offset);
}
.gform-theme--orbital .gfield.ah-form-note a:hover,
.gform-theme--orbital .gfield.ah-form-note a:focus-visible { color: var(--ah-link-hover); text-decoration-thickness: var(--ah-ul-hover); }

/* 5. The footer's copyright line is a block wrapper here, a <p> in the mock: give it the
      paragraph's bottom margin from the tokens' p rule so the footer keeps the mock's height. */
.ah-footer__bottom { margin-bottom: var(--ah-s-3); }

/* 6. "Listen on" buttons (homepage #podcast, Rob 2026-10-10, after the Substack podcast card).
      A light button holding the platform's own logo in its brand colour and a dark label.
      The logos are Font Awesome brand / solid icons embedded as inline SVG (GenerateBlocks
      shape blocks), so they render without the kit and can take a brand colour. Brand hexes
      are the platforms' own; everything else is a token. The logos are decorative
      (aria-hidden): the label names the platform. */
.ah-listen-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 12px 22px;
  background: var(--ah-mist);
  border: 1px solid var(--ah-line);
  border-radius: var(--ah-radius-card);
  color: var(--ah-ink);
  font-family: var(--ah-font-text);
  font-size: 1rem;
  font-weight: var(--ah-fw-button);
  line-height: 1.2;
  text-decoration: none;
  transition: border-color var(--ah-speed) var(--ah-ease), background-color var(--ah-speed) var(--ah-ease);
}
.ah-listen-btn:hover,
.ah-listen-btn:focus-visible { background: var(--ah-white); border-color: var(--ah-line-strong); }
.ah-listen-btn .gb-shape { display: inline-flex; }
.ah-listen-btn .gb-shape svg { width: 1.35em; height: 1.35em; fill: currentColor; }
.ah-listen-btn--substack .gb-shape { color: #FF6719; }  /* Substack orange */
.ah-listen-btn--spotify .gb-shape  { color: #1DB954; }  /* Spotify green */
.ah-listen-btn--apple .gb-shape    { color: #9933CC; }  /* Apple Podcasts purple */
.ah-listen-btn--rss .gb-shape      { color: #EE802F; }  /* RSS orange */

/* 7. Smooth scrolling for jump links (Rob, 2026-10-10): the header menu's /#topics,
      /#podcast, /#testimonials, /#contact glide to their section on every page. Same-page jumps
      use the browser's smooth scrolling; arriving from another page, arik-nav.js holds the
      browser's instant jump and scrolls smoothly once the page is laid out. Reduced motion
      keeps instant jumps. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* 8. Homepage, top to bottom (Rob, 2026-10-10 and 2026-10-11). The parts restored from the
      live site keep its measurements at 1440px (book card 630px tall, 12px corners, 1px white
      frame, 64px padding, 400px copy column, 49px buttons); colours and type
      are tokens. Order, as Rob set it in the editor on 2026-10-11 (grounds: Rob asked for every
      testimonial in teal, so the content bands between them are white or mist):
        teal   #top          video + title
        teal / white #story  Living With Tragedy: heading + first paragraph on teal, the second
                             paragraph + buttons on white, the photo across the edge
        white                the Always November card
        teal   #testimonials testimonial (Jon Gordon)
        mist                 "Experience speaking…" (heading, text, two buttons) with Arik's photo
        teal                 testimonial (Maria Cisneros)
        white  #topics       the grief intro with the family photo, then the three topic cards
        teal                 testimonial (Rebecca Kotch)
        white  #podcast      the podcast, then the latest three episodes
        mist   #latest-posts the latest three blog posts, with the blog's intro line
        teal                 testimonial (Mark Shapiro, MD)
        white  #contact      the contact form
        teal                 testimonial (Scott Sedgley)
      The bookshelf photo is a background image set on the card block itself, so it can be
      swapped in the editor. */
.home-hero { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--ah-s-8); align-items: center; }
.home-hero__video { border: 1px solid var(--ah-white); border-radius: 12px; overflow: hidden; margin: 0; }
.home-hero__video .hero__video { border-radius: 0; }
.home-hero__title { margin: 0; }

/* Testimonials: one between sections, each the same full-width teal band (Rob, 2026-10-11:
   "uniform, all look the same"). The quote is centred at the featured size (step 2, the h3
   size), the mark and the name centred with it. The header's Testimonials link lands on the
   first (Jon Gordon, #testimonials). */
.home-voice-band .ah-quote { max-width: 50rem; margin-inline: auto; align-items: center; text-align: center; }
.home-voice-band .ah-quote__text { font-size: var(--ah-fs-h3); line-height: 1.4; }

/* Living With Tragedy across the edge of the teal (Rob, 2026-10-11): the heading and first
   paragraph sit on the teal that runs down from the hero, the second paragraph and the buttons on
   white, and the photo is centred on the whole text column, so it straddles the edge and stays
   centred however long the copy gets. One section, white, two grid rows: the grid's ::before paints
   row 1 (and half the gap below it) teal from edge to edge, and the photo spans both rows. The
   lead carries .ah-band--teal for the dark ground's colours and background (no band padding). */
.home-story { --story-gap: var(--ah-s-12); padding-top: 0; padding-bottom: 0; isolation: isolate; overflow-x: clip; }
.home-story .story__grid { grid-template-columns: 1.2fr 0.8fr; grid-template-rows: auto auto; row-gap: var(--story-gap); column-gap: var(--ah-s-8); align-items: start; }
.home-story .story__grid::before { content: ""; grid-column: 1 / -1; grid-row: 1; align-self: stretch; margin: -1px -100vw calc(-0.5 * var(--story-gap)); background: var(--ah-teal); z-index: -1; }  /* -1px: no hairline where it meets the hero band */
.home-story__lead { grid-column: 1; grid-row: 1; align-self: end; }
.home-story__lead.ah-band--teal { padding-block: 0; }  /* keeps the band's teal behind its own text too, so contrast checkers (and a failed paint) still see white on teal */
.home-story__lead .story__text { margin-bottom: 0; }
.home-story__more { grid-column: 1; grid-row: 2; }
.home-story .story__media { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.home-story .story__img { border: 1px solid var(--ah-white); border-radius: 12px; }

.home-book,
.home-book__btn { box-sizing: border-box; } /* min-heights are the live site's outer sizes */
/* The card is its own dark ground (the bookshelf photo), whatever band it sits in: white type. */
.home-book {
  --ah-fg: var(--ah-white);
  --ah-fg-heading: var(--ah-white);
  --ah-fg-muted: var(--ah-on-dark-muted);
  color: var(--ah-fg);
}
.home-book {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 630px;
  margin-top: 0;
  padding: 64px;
  border: 1px solid var(--ah-white);
  border-radius: 12px;
  overflow: hidden;
}
.home-book__copy { max-width: 400px; }
/* The card's "Available Now" is a tokens .ah-eyebrow (Oswald caps, v1.4); it sits on the
   bookshelf photo rather than a ground, so it keeps the live site's white. */
.home-book__eyebrow { color: var(--ah-white); }
.home-book__title { margin-bottom: var(--ah-s-2); }
.home-book__actions { display: flex; flex-direction: column; gap: 11px; margin: var(--ah-s-3) 0; }
.home-book__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 49px;
  padding: 12px 16px;
  background: var(--ah-teal);
  color: var(--ah-white);
  font-family: var(--ah-font-text);       /* button type, as .ah-btn (v1.4 type table) */
  font-weight: var(--ah-fw-button);
  font-size: 1rem;
  letter-spacing: var(--ah-track-button);
  text-decoration: none;
  transition: background-color var(--ah-speed) var(--ah-ease);
}
.home-book__btn:hover,
.home-book__btn:focus-visible { background: var(--ah-teal-deep); }
.home-book__btn .gb-shape { display: inline-flex; }
.home-book__btn .gb-shape svg { width: 1.2em; height: 1.2em; fill: currentColor; }
.home-book__note { margin: 0; }


/* The speaking photo in the story photo's style (Rob, 2026-10-11): the same column split as Living
   With Tragedy, a square crop filling its column, 12px corners and the 1px white frame. Arik.jpg
   is only 352px wide, so it's enlarged a little on desktop; a larger original would sharpen it
   (DESIGN.md open item 4). */
.home-speaking .topics__intro { grid-template-columns: 1.2fr 0.8fr; margin-bottom: 0; }  /* the cards moved to the grief section */
.home-speaking .topics__head { max-width: none; }  /* the column sets the width, as in Living With Tragedy */
.home-speaking .ah-btn-row { margin-top: var(--ah-s-1); }
.home-speaking .topics__media { justify-self: stretch; }
.home-speaking .topics__img { max-width: none; aspect-ratio: 1; object-fit: cover; object-position: 50% 25%; border: 1px solid var(--ah-white); border-radius: 12px; }

/* The grief intro: a narrow heading column and the family photo large beside it (Rob, 2026-10-11:
   "a good, large size"; it briefly took the other photo sections' 1.2fr / 0.8fr split, which made
   it small). The photo keeps the same 12px corners and white frame. Then the three topic cards. */
.home-grief { display: grid; grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr); gap: var(--ah-s-8); align-items: center; }
.home-grief + .ah-container { margin-top: var(--ah-s-8); }
.home-grief__title { margin-bottom: 0; }  /* the heading stands alone beside the photo ("Explore More" removed, Rob 2026-10-11) */
.home-grief__media { margin: 0; }
.home-grief__img { width: 100%; height: auto; border: 1px solid var(--ah-white); border-radius: 12px; }

/* The latest three podcast episodes (under the podcast blurb) and the latest three blog posts
   (their own mist band, with the blog's intro line), Rob 2026-10-11. GenerateBlocks Query blocks
   (category podcast / blog, newest first) holding the /podcast/ and /blog/ lists' cards
   (.ah-post, arik-blog.css, which loads on the homepage for them). Their own grid class, so the
   lists' "featured first post" treatment doesn't apply here. Three across from 700px. */
.home-latest { margin-top: var(--ah-s-12); }
.home-latest__title { margin-bottom: var(--ah-s-4); }
.home-latest__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ah-s-6) var(--ah-s-3); }
@media (min-width: 700px) {
  .home-latest__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.home-latest .ah-section-foot,
.home-blog .ah-section-foot { margin-bottom: 0; }

@media (max-width: 900px) {
  .home-hero, .home-grief { grid-template-columns: 1fr; gap: var(--ah-s-6); }
  .home-speaking .topics__intro { grid-template-columns: 1fr; }
  /* Phones: the lead on teal, the photo across the edge (half on teal: 50% of the column width is
     half the height of the square photo), then the rest on white. */
  .home-story { --story-gap: var(--ah-s-6); }
  .home-story .story__grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .home-story .story__grid::before { grid-row: 1 / 3; margin-bottom: 50%; }
  .home-story .story__media { grid-column: 1; grid-row: 2; }
  .home-story__more { grid-row: 3; }
  .home-book { min-height: 0; padding: var(--ah-s-6) var(--ah-s-3); }
  /* On a phone the copy sits over the book itself: a slate scrim keeps it readable. */
  .home-book::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(28, 42, 48, 0.78); }
  .home-book__copy { max-width: none; }
}

/* 9. The Contact page (/contact/, Rob 2026-10-11): every "Book Arik" button and the menu's Contact
      link go here instead of jumping to the homepage form. The audience pages' slate hero, a
      testimonial band, then the same Gravity Form in a reading-width column at the bottom (Rob).
      The homepage keeps its own form section. */
.contact-page__form { max-width: 48rem; margin-inline: auto; }   /* centred (Rob, 2026-10-12) */
/* The form now leads the page and the Jon Gordon testimonial follows it (Rob, 2026-10-12). */

/* The homepage's form section ("Contact Form", Arik's 24-48 hours line, Gravity Form 1) also closes
   the Speaking page and the three audience pages (Rob, 2026-10-12). Its two-column grid lives in
   page-home.css, which loads on the front page only; the same rules here, for those pages. */
.contact__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--ah-s-8); align-items: start; }
@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; gap: var(--ah-s-6); }
}
/* Phones: the portrait would push the form another screen down; this page is for the form. */
@media (max-width: 900px) {
  .ah-page-hero:has(~ .contact-page) .ah-split__media { display: none; }
}

/* 10. Legal pages (Privacy Policy, Terms of Use; rewritten 2026-10-11). The slate page hero with the
       date as its eyebrow, then one reading column (.ah-prose.ah-measure.ah-legal): a short summary on
       a card, an "On this page" list of jump links, then numbered sections. Long documents, so the
       section heads step down a size (h2 at the h3 size, h3 at the lead size) and lists lose
       GeneratePress's 3em indent. */
.ah-legal h2 { font-size: var(--ah-fs-h3); margin-top: var(--ah-s-8); margin-bottom: var(--ah-s-2); scroll-margin-top: var(--ah-s-3); }
.ah-legal h3 { font-size: var(--ah-fs-lead); margin-top: var(--ah-s-4); margin-bottom: var(--ah-s-1); }
.ah-legal ul,
.ah-legal ol { margin: 0 0 var(--ah-s-3); padding-inline-start: 1.25em; }
.ah-legal li { margin-bottom: var(--ah-s-1); padding-inline-start: 0.25em; }
.ah-legal code { font-size: 0.85em; overflow-wrap: anywhere; }
.ah-legal__summary { background: var(--ah-card-bg); border-radius: var(--ah-radius-card); padding: var(--ah-s-4); margin-block: var(--ah-s-6); }
.ah-legal__summary h2,
.ah-legal__toc h2 { font-size: var(--ah-fs-lead); margin-top: 0; margin-bottom: var(--ah-s-2); }
.ah-legal__summary ul,
.ah-legal__toc ol { margin-bottom: 0; }
.ah-legal__toc li { margin-bottom: 4px; }
@media (min-width: 900px) {
  .ah-legal__toc ol { columns: 2; column-gap: var(--ah-s-6); }
  .ah-legal__toc li { break-inside: avoid; }
}
@media (max-width: 600px) {
  .ah-legal__summary { padding: var(--ah-s-3); }
}

/* 11. Speaking page, "Who Books Arik": each audience card's link ends in an arrow (Rob, 2026-10-12),
       the same Font Awesome arrow-right the buttons use, drawn as a mask in the link colour so it
       survives editing the text in the editor. It nudges right on hover. */
.ah-covers__link a::after {
  content: "";
  display: inline-block;   /* inline, so on a two-line link the arrow follows the last word */
  margin-inline-start: 0.4em;
  vertical-align: -0.05em;
  width: 0.85em;
  height: 0.85em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--ah-speed) var(--ah-ease);
}
.ah-covers__link a:hover::after,
.ah-covers__link a:focus-visible::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .ah-covers__link a::after { transition: none; } }

/* 12. The "Contact form section" synced pattern (wp_block, Rob 2026-10-12) is a white band. After another white
       band (the Speaking page's "What He Covers") it switches to mist, so the bands still alternate. */
.ah-band--white:not(.ah-cta-band) + .ah-band--white.contact,
.ah-band--mist.ah-cta-band + .ah-band--white.contact { --ah-bg: var(--ah-mist); --ah-card-bg: var(--ah-white); background-color: var(--ah-mist); }
/* The page's lead-in line sits directly above the form, on the same ground (Rob, 2026-10-12): Home, Speaking and
   the audience pages. No button: the form is right there. */
.ah-cta-band:has(+ .contact) { padding-bottom: 0; }
.ah-cta-band + .contact { padding-top: var(--ah-s-6); }