/*
=====================================================================
 Belldiva responsive layer: phones, tablets, large monitors
 Part of the Belldiva design system. Enqueued LAST by functions.php as
 `belldiva-responsive` (see bd_style_parts()), so at equal specificity
 these rules win over the partials above.

 The page partials describe the laptop layout (about 1100 to 1600px), the
 reference design. This file holds what changes on other screens, so the
 small-screen and big-screen behaviour can be read in one place:

   1. Touch basics      tap targets and form fields, any touch device
   2. Phone header      menu, logo, icons on one row; full-screen menu
   3. Phone pages       hero, trust bar, journal, blog, offers, picks, About
   4. Phone footer      newsletter and collapsible link groups
   5. Large monitors    hero height, logo size

 The large-monitor scale itself (root size, content width, gutters) is in
 _tokens.css and _base.css, because every partial depends on it.
=====================================================================
*/

/* =====================================================================
   1. Touch basics
   ===================================================================== */
@media (pointer: coarse), (max-width: 1100px) {
  /* iOS Safari zooms the whole page into any field whose text is under
     16px, and leaves it zoomed after. WPForms and the legacy newsletter
     rules set 14px with !important, hence the !important here. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  select,
  textarea { font-size: 16px !important; }

  /* Social icons were 13 to 17px targets. The icon stays small; the link
     around it becomes a 44px square (WCAG 2.5.8 asks for 24, 44 is the
     comfortable thumb size). Negative margin keeps the row's visual edge. */
  .bd-social { gap: 0; margin-inline: -13px; }
  .bd-social a { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

  /* Text links that stand alone (not inside a sentence) were 19 to 23px
     tall. Vertical padding brings them past 24px without moving anything a
     desktop visitor sees: these rules only apply to touch screens. Top
     padding only where the link carries an underline border at its foot. */
  .bd .section-head .more,
  .bd .bd-jrow-cta { display: inline-block; padding-top: 9px; }
  .bd :is(.bd-journal-title, .bd-shop-card-title) a { display: inline-block; padding-block: 3px; }
  .bd .bd-prod-review { padding-block: 4px; }
  .bd .bd-brand-az button { min-width: 36px; min-height: 36px; }
  .bd-announce-account a { display: inline-block; padding-block: 5px; }
  .bd-footer-col li a { display: inline-block; padding-block: 3px; }
  .bd .bd-auth-panel-link { display: inline-block; padding-block: 6px; }
  /* "Remember me": the label around it is the real target; a bigger box is
     easier to see and hit. */
  .bd input[type="checkbox"] { width: 18px; height: 18px; }
}

/* =====================================================================
   2. Phone and tablet header
   Menu button left, logo centred, search and account right: the layout
   people know from shopping apps. The menu opens full screen under the bar.
   ===================================================================== */
@media (max-width: 720px) {
  /* The announcement bar only carried social links and Sign in / Create
     account on phones (the strapline was already hidden). Both live in the
     menu now, so the bar goes and the page starts with the header. */
  .bd-announce { display: none; }
}

@media (max-width: 1100px) {
  .bd-topnav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0 var(--space-2);
    padding: 6px var(--gutter);
  }
  .bd-nav-toggle {
    grid-area: 1 / 1; justify-self: start;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; margin-left: -12px;
  }
  .bd-topnav .bd-logo--nav { grid-area: 1 / 2; }
  .bd-nav-icons { grid-area: 1 / 3; justify-self: end; margin: 0 -12px 0 0; gap: 0; }
  .bd-nav-icons a,
  .bd-nav-icons button { width: 44px; height: 44px; align-items: center; justify-content: center; }
  .bd-nav-icons svg { width: 20px; height: 20px; }
  .bd-search-panel { grid-column: 1 / -1; }

  /* Hide on scroll down, back on scroll up (belldiva.js adds the class),
     so the bar never covers what is being read. */
  .bd-topnav { transition: transform 0.25s var(--ease-standard); }
  .bd-topnav.bd-topnav--away { transform: translateY(calc(-100% - 50px)); }

  /* The menu: full screen under the bar, large serif rows. --bd-drawer-top
     is the bar's bottom edge, measured by belldiva.js when it opens. */
  .bd-tabs.bd-open {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0;
    top: var(--bd-drawer-top, 56px);
    z-index: 499;
    width: auto; padding: var(--space-2) var(--gutter) calc(var(--space-8) + env(safe-area-inset-bottom));
    background: var(--ground);
    border-top: 1px solid var(--line);
    overflow-y: auto; overscroll-behavior: contain;
    animation: bd-drawer-in 0.22s var(--ease-standard);
  }
  .bd-tabs.bd-open .bd-tab-list {
    flex-direction: column; flex-wrap: nowrap; gap: 0;
    background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0;
    width: 100%; max-width: 560px;
  }
  .bd-tabs.bd-open .bd-tab-list li + li { border-top: 1px solid var(--line-soft); }
  .bd-tabs.bd-open .bd-tab-list a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 0;
    font-family: 'Kholic', Georgia, serif; font-size: 1.375rem;
    letter-spacing: 0; text-transform: none; line-height: 1.2;
  }
  /* A quiet arrow on each row; it replaces the desktop hover underline. */
  .bd-tabs.bd-open .bd-tab-list a::after {
    content: "\2192"; display: block;
    position: static; height: auto; background: none; transform: none;
    font-family: -apple-system, "Segoe UI", Arial, sans-serif; font-size: 1rem;
    color: var(--gold-deep);
  }
  .bd-tabs.bd-open .bd-tab-list .current-menu-item > a,
  .bd-tabs.bd-open .bd-tab-list .current_page_item > a { color: var(--gold-deep); }
  .bd-tabs.bd-open .bd-tabs-foot {
    margin-top: var(--space-6); padding: var(--space-5) 0 0;
    border-top: 1px solid var(--line);
    max-width: 560px; flex-wrap: wrap;
  }
  .bd-tabs-links { display: flex; align-items: center; gap: var(--space-5); }
  .bd-tabs-links a {
    font-size: 0.75rem; letter-spacing: 0.085em; text-transform: uppercase;
    color: var(--ink); padding: 12px 0;
  }
  .bd-tabs-links a.bd-tabs-account { border-bottom: 0; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; }
}
/* Page behind the open menu does not scroll. The bar's backdrop blur (and
   the auto-hide transform) would make it the containing block for the
   fixed menu, trapping the menu inside the 57px bar; drop both while open. */
html.bd-menu-open,
html.bd-menu-open body { overflow: hidden; }
html.bd-menu-open .bd-topnav { backdrop-filter: none; transform: none; background: var(--ground); }

@keyframes bd-drawer-in {
  from { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .bd-tabs.bd-open { animation: none; }
  .bd-topnav { transition: none; }
}

/* =====================================================================
   3. Phone pages
   ===================================================================== */

/* Hero: one full-width call to action, like an app button. */
@media (max-width: 600px) {
  .bd .hero .hero-cta { display: flex; width: 100%; justify-content: center; padding-block: 15px; }
}

/* Trust bar: a 2 x 2 block instead of four rows filling a whole screen. */
@media (max-width: 600px) {
  .bd .bd-trust {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-4);
    padding: var(--space-6) var(--space-5);
  }
  .bd .bd-trust-item { flex-direction: column; gap: var(--space-2); padding: 0; border-right: 0; }
  .bd .bd-trust-icon svg { width: 22px; height: 22px; }
}

/* Home journal row: the dark intro on top, the guides side by side under
   it (they stacked as two full-screen cards). */
@media (max-width: 560px) {
  .bd .bd-journal-row { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .bd .bd-jrow-intro { grid-column: 1 / -1; padding: var(--space-6) var(--space-5); }
  .bd .bd-jrow-body { padding: var(--space-3); gap: var(--space-1); }
  .bd .bd-jrow-title { font-size: var(--text-base); }
  .bd .bd-jrow-sub { display: none; }
}

/* Home "From the Blog": a compact list, thumbnail beside the title, the way
   news and magazine apps show it. Three full-width photo cards were most
   of a screen each. */
@media (max-width: 620px) {
  .bd .bd-journal-grid--compact { grid-template-columns: 1fr; gap: 0; }
  .bd .bd-journal-grid--compact .bd-journal-card {
    display: grid; grid-template-columns: 104px minmax(0, 1fr);
    gap: var(--space-4); align-items: center;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .bd .bd-journal-grid--compact .bd-journal-card:first-child { padding-top: 0; }
  .bd .bd-journal-grid--compact .bd-journal-media { aspect-ratio: 1; margin: 0; }
  .bd .bd-journal-grid--compact .bd-journal-card h3 { font-size: var(--text-base); }
}

/* Offers: a swipe row with the next card peeking in, instead of a stack.
   The row bleeds to the screen edges so the peek reads as "more this way". */
@media (max-width: 680px) {
  .bd .bd-offer-grid:not(.bd-offer-grid--1) {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) var(--space-2);
    scrollbar-width: none;
  }
  .bd .bd-offer-grid::-webkit-scrollbar { display: none; }
  .bd .bd-offer-grid > * { scroll-snap-align: start; }
}

/* Anita's Headline Picks: a swipe row. Their 200px minimum left one card
   per row on a phone, each a full-width square, about two screens of scroll
   before the rest of the page. */
@media (max-width: 640px) {
  .bd .bd-picks-featured .bd-prod-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 58%;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) var(--space-2);
    scrollbar-width: none;
  }
  .bd .bd-picks-featured .bd-prod-grid::-webkit-scrollbar { display: none; }
  .bd .bd-picks-featured .bd-prod { scroll-snap-align: start; }

  /* Products with no photo show a typeset placeholder; on a phone a 4:3
     panel carries the brand name as well as a square at half the height. */
  .bd .bd-prod-media:has(.bd-prod-ph) { aspect-ratio: 4 / 3; }
}

/* Category filter pills (product grids, Brands, Journal): one swipeable row, the
   way shopping apps show filters. Anita's Picks has nine and they wrapped
   into five rows above the products. */
@media (max-width: 640px) {
  .bd .bd-prod-pills,
  .bd .bd-brand-filters,
  .bd .bd-journal-filters {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  }
  .bd .bd-prod-pills::-webkit-scrollbar,
  .bd .bd-brand-filters::-webkit-scrollbar,
  .bd .bd-journal-filters::-webkit-scrollbar { display: none; }
  .bd .bd-prod-pills > *,
  .bd .bd-brand-filters > *,
  .bd .bd-journal-filters > * { flex: 0 0 auto; min-height: 40px; }
  .bd .bd-prod-controls { gap: var(--space-3); }
  .bd .bd-prod-pills,
  .bd .bd-brand-filters { width: calc(100% + 2 * var(--gutter)); }
}

/* Brands A to Z: one swipeable row of 40px letters. Two cramped rows of
   20px targets were hard to hit with a thumb. */
@media (max-width: 700px) {
  .bd .bd-brand-az {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  }
  .bd .bd-brand-az::-webkit-scrollbar { display: none; }
  .bd .bd-brand-az button { flex: 0 0 auto; min-width: 40px; min-height: 40px; font-size: var(--text-sm); }
}

/* About, phones: Anita's portrait becomes a small round avatar above her
   story, and the film is the one large image of the section. Before, the
   portrait and the 9:16 film were two tall pictures of her one after the
   other. The film is capped at 70% of the screen height so it never needs
   scrolling to see the whole frame. */
@media (max-width: 860px) {
  .bd .bd-founder--film .bd-founder-story { gap: var(--space-4); }
  .bd .bd-founder--film .bd-founder-media {
    width: 88px; height: 88px; max-width: none;
    aspect-ratio: 1; border-radius: 50%;
  }
  .bd .bd-founder-film-col { margin-top: var(--space-4); }
  .bd .bd-founder-film-col .bd-vinline,
  .bd .bd-founder-film-col .bd-vinline--portrait .bd-vinline-frame { width: 100%; max-width: min(100%, calc(70svh * 9 / 16)); }
  .bd .bd-founder-film-col .bd-vinline-caption { max-width: none; }

  /* The philosophy photo: landscape crop rather than a 4:5 block. (Three
     classes: `.bd .pullquote .portrait` sets the 4:5.) */
  .bd .pullquote .bd-about-portrait { aspect-ratio: 4 / 3; }
  .bd .bd-about-portrait img { object-position: center 25%; }
}
/* Phones: the group photo was a full-width 4:3 block, most of a screen with
   its caption, right before "Our story". A wide 16:10 band, never more than
   about two fifths of the screen, keeps the four faces and gets the reader
   to the story sooner. */
@media (max-width: 600px) {
  .bd .pullquote .bd-about-portrait { aspect-ratio: 16 / 10; max-height: 40svh; }
  .bd .bd-about-portrait img { object-position: center 18%; }
}

/* Menopause & Wellness 40+, tablets and phones: the copy, then the photo
   under a gold rule (the client's mobile reference), no pillar column. The
   five topic cards become a swipe row instead of squeezing to 140px. */
@media (max-width: 980px) {
  .bd .bd-meno-feature { grid-template-columns: 1fr; min-height: 0; }
  .bd .bd-meno-copy { padding: var(--space-8) var(--space-6); }
  /* A height, not aspect-ratio plus max-height: that pair shrank the photo's
     width to keep 4:3 and left a green strip beside it on tablets. */
  .bd .bd-meno-media { height: clamp(16rem, 62vw, 26rem); border-top: 2px solid var(--gold); }
  .bd .bd-meno-media img { -webkit-mask-image: none; mask-image: none; object-position: 55% 25%; }
  .bd .bd-meno-pillars { display: none; }
}
@media (max-width: 1100px) {
  .bd .bd-meno-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 34%;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--space-2);
    scrollbar-width: none;
  }
  .bd .bd-meno-grid::-webkit-scrollbar { display: none; }
  .bd .bd-meno-grid li { scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .bd .bd-meno-grid { grid-auto-columns: 72%; }
  .bd .bd-meno-cta { display: flex; justify-content: center; width: 100%; padding-block: 15px; }
}
/* Home: the square goes under the quote, at a size that does not fill the
   screen. */
@media (max-width: 860px) {
  .bd .bd-home-quote { grid-template-columns: 1fr; gap: var(--space-8); }
  .bd .bd-home-quote .bd-meno-tile { width: min(100%, 20rem); margin-inline: auto; }
}

/* =====================================================================
   4. Phone footer
   ===================================================================== */

/* Footer link groups are <details> (includes/parts/footer.php). On desktop
   they are always open and the summary is a plain heading; belldiva.js
   keeps them open there and closes them on phones. */
.bd-footer-col > summary { list-style: none; cursor: default; }
.bd-footer-col > summary::-webkit-details-marker { display: none; }
.bd-footer-col > summary h3 { margin: 0 0 var(--space-3); }

@media (max-width: 620px) {
  .bd-footer-inner { grid-template-columns: 1fr; gap: 0; }
  .bd-footer-brand { padding-bottom: var(--space-6); }
  .bd-footer-col { border-top: 1px solid color-mix(in srgb, var(--ground) 14%, transparent); }
  .bd-footer-col:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ground) 14%, transparent); }
  .bd-footer-col > summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px; cursor: pointer;
  }
  .bd-footer-col > summary h3 { margin: 0; }
  .bd-footer-col > summary::after {
    content: "+"; color: var(--gold); font-size: 1.25rem; line-height: 1;
  }
  .bd-footer-col[open] > summary::after { content: "\2212"; }
  .bd-footer-col ul { padding-bottom: var(--space-3); }
  .bd-footer-col li { margin: 0; }
  .bd-footer-col li a { display: inline-block; padding: 11px 0; }

  /* Newsletter: field and button at full width, 48px tall. */
  .bd-newsletter-wrap .bd-newsletter-bar { padding: var(--space-5); gap: var(--space-4); }
  .bd-newsletter-form-wrap { flex-basis: 100%; max-width: none; }
  .bd-newsletter-form-wrap .wpforms-field,
  .bd-newsletter-form-wrap .wpforms-submit-container { flex: 1 1 100% !important; }
  /* WPForms caps a "medium" field at 60% of the row. */
  .bd-newsletter-form-wrap input[type="text"],
  .bd-newsletter-form-wrap input[type="email"] { min-height: 48px; max-width: none !important; }
  .bd-newsletter-form-wrap button[type="submit"] { width: 100%; min-height: 48px; }
}

/* =====================================================================
   5. Large monitors
   ===================================================================== */

/* The newsletter bar sits in Salient's .container; line it up with the
   site column and gutters like the footer below it. */
.bd-newsletter-wrap > .container { max-width: var(--wrap-max); padding-inline: var(--gutter); }
@media (min-width: 981px) {
  /* The hero scales with the type, but never taller than the window allows:
     on a short 1366 x 768 laptop the trust bar still shows under it. */
  .bd .hero--has-image { min-height: min(35rem, calc(100svh - 120px)); }
  .bd.bd-home .hero--has-image { min-height: min(28.75rem, calc(100svh - 160px)); }
}

/* Banner photo past 1920px. Up to 1920 the photo runs off the right edge
   (the laptop design). Wider, it kept growing as 58% of the screen while the
   copy stayed in the centred column: on an ultrawide it was a 2000px strip
   cropped through the eyes, blown up from a 900 to 1250px original. Now it
   lives on a 1920px stage centred on the screen, which puts its right edge
   just past the content column (where the trust bar and grids end), stops
   growing, and fades on its right edge as on its left. At exactly 1920 the
   offset is 0, so nothing jumps. */
@media (min-width: 1921px) {
  .bd .hero-media {
    right: calc((100% - 1920px) / 2);
    width: calc(1920px * 0.58);
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.28) 12%, rgba(0,0,0,0.86) 34%, #000 52%),
      linear-gradient(0deg, transparent 0%, rgba(0,0,0,0.5) 6%, rgba(0,0,0,0.94) 16%, #000 26%),
      linear-gradient(270deg, transparent 0%, rgba(0,0,0,0.6) 5%, #000 14%);
    -webkit-mask-composite: source-in, source-in;
    mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.28) 12%, rgba(0,0,0,0.86) 34%, #000 52%),
      linear-gradient(0deg, transparent 0%, rgba(0,0,0,0.5) 6%, rgba(0,0,0,0.94) 16%, #000 26%),
      linear-gradient(270deg, transparent 0%, rgba(0,0,0,0.6) 5%, #000 14%);
    mask-composite: intersect, intersect;
  }
  /* The band's tint ran to a pale green at the screen edge, which showed as a
     grey strip beside the photo once the photo stopped short of it. Cream at
     both ends, the warm glow centred behind the photo. */
  .bd .hero--has-image .hero-bg {
    background: linear-gradient(90deg, var(--ground) 0%, var(--ground) 38%, var(--gold-tint) 62%, var(--ground) 92%);
  }
  .bd .hero--has-image .hero-bg::after {
    background: radial-gradient(ellipse 30% 75% at 63% 42%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 72%);
  }
}