/*
Theme Name: DFW Veterans Chamber
Theme URI:  https://dfwveteranschamber.org
Description: Custom Awwwards-caliber child theme - navy + gold magazine-editorial. Built from the approved Home + DFW Business Week prototypes (Phase 3).
Author:     Dex / Blu Dragonfly LLC
Author URI: https://bludragonfly.net
Template:   twentytwentyfive
Version:    2.3.0
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: dfw-custom
*/

/* ── Header offsets — keep #site-header flush under whatever is above it ─────
   Re-derived from measurement 2026-09-05 at 375/768/1280/1440/2380, because
   the previous numbers no longer matched the rendered header:

     - #utility-bar renders 45px tall, not 36px: 44px of content (site.css
       gives its controls a 44px tap target) plus its 1px border-b.
     - The utility bar only appears at >=1024px. site.css hides it and pins
       `#site-header { top: 0 !important }` below that, so the old 783px
       admin-bar rules were dead there — the nav row sat under the WP admin
       bar instead of below it. Matching the 1024px breakpoint fixes that,
       and the sub-1024 admin-bar rules need !important to beat site.css.

   Logged out this only closes a 1px overlap; with the admin bar it closes a
   9px one at >=1024px and an entire hidden-nav bug below it. None of this
   moves the hero, which is already flush to y=0 behind the transparent
   header at every width. */
@media screen and (min-width: 1024px) {
  #site-header { top: 45px; }                                  /* utility bar height */
  body.admin-bar #utility-bar { top: 32px; }
  body.admin-bar #site-header { top: 77px; }                   /* 32px admin bar + 45px utility bar */
}
@media screen and (min-width: 783px) and (max-width: 1023px) {
  body.admin-bar #site-header { top: 32px !important; }        /* admin bar only; utility bar hidden */
}
@media screen and (max-width: 782px) {
  body.admin-bar #site-header { top: 46px !important; }        /* mobile admin bar; utility bar hidden */
}

/* -- Primary nav fit, 1280-1535px -- REMOVED 2026-09-14 ----------------------
   This band used to tighten #nav-row's inset to 3rem and the item gap to
   1.25rem, because Member Directory had made the nav an eight-item row that
   cleared 1280px by only ~6px. The nav is six items as of 2026-09-14, so the
   override was measured out rather than left in place.

   Measured in the browser at 1280px with the override neutralised: nav 833px
   wide, 68px of slack between the logo and the first item, no wrap, no
   horizontal overflow. Re-measured through the font stack in case the webfont
   fails to load - "DM Sans" 68px, system-ui 64px, Helvetica 73px. 1280px is
   the worst case in the band; above it the slack only grows, and >=1536px was
   never covered by this rule.

   If a seventh item is ever added, re-measure before trusting this: the old
   rule bought back roughly 56px, which is most of the cushion above. */

/* -- DFW Business Week flipbook frame ---------------------------------------
   The reader moved from designrr to Simplebooklet (2026-09-03). Simplebooklet's
   own copied embed code hard-codes height:650px and max-width:1012px inline,
   which letterboxes the magazine inside the 1280px column at desktop widths.
   The iframe therefore ships with no dimension attributes and no inline style;
   the frame is sized here instead.

   .flip-frame's border, radius and navy/gold treatment already live in
   assets/css/business-week.css. This block adds geometry only, and that file
   sets neither aspect-ratio nor height, so nothing here is overridden even
   though business-week.css is enqueued after style.css.

   Ratios follow the source pages, which are 980x1269 - US Letter portrait:
     - >=768px the reader lays out a two-page spread, (2 x 980)/1269 = 1.544.
       3/2 is a hair taller, which gives the Minimalist control bar its own
       strip instead of taking it out of the pages.
     - <768px the reader drops to a single portrait page (0.772). 3/4 keeps
       that page tall rather than squeezing it into a landscape box.

   max-width caps the frame against the viewport height so a full-width column
   on a short laptop screen cannot push the controls below the fold - the width
   gives way and the ratio holds, rather than the reverse. */
.flip-frame {
  aspect-ratio: 3 / 4;
  margin-inline: auto;
}
.flip-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
@media (min-width: 768px) {
  .flip-frame {
    aspect-ratio: 3 / 2;
    max-width: calc((100vh - 11rem) * 3 / 2);
    max-width: calc((100svh - 11rem) * 3 / 2);
  }
}