/*
Theme Name: Drew's Drone Services
Theme URI: https://drewsdrone.services/
Description: GeneratePress child theme for Drew's Drone Services, LLC. Component styles live in assets/css/dds.css (design system "Contour") and assets/css/gp.css (GeneratePress chrome); GenerateBlocks Pro global classes carry the dds-* names only. This file holds only the WordPress-integration rules those two files don't cover.
Author: Drew's Drone Services, LLC
Template: generatepress
Version: 1.0.0
Text Domain: dds
*/

/* ==========================================================================
   WordPress integration layer (loads last: GP → dds.css → Menu Plus → gp.css → this file).
   dds.css and gp.css are the tested design files (DESIGN.md §7, §9.4) and stay untouched;
   only what GP/GP Premium markup needs beyond the mock lives here.
   ========================================================================== */

/* ---- Size-matched fallback fonts (Polish R2: /faq/ CLS 0.11–0.15 on a slow connection) ----
   Until the web fonts arrive (font-display:swap), text is set in a local font scaled to the web font's width, so lines
   wrap the same before and after the swap and nothing below moves. size-adjust = average advance width of
   IBM Plex Sans 400/600 or Newsreader 500 (italic) ÷ the local font's, measured over the site's own copy
   (.build/tmp/polish-r2/fallback-metrics.js). Arial covers Windows, macOS and iOS (Liberation Sans is metric-compatible
   with Arial); DejaVu covers Linux. Where neither exists (Android) the stack continues as before. Mono needs none:
   IBM Plex Mono and the usual monospace fallbacks share the 0.6 em advance. */
@font-face{ font-family:"DDS Sans Fallback"; font-style:normal; font-weight:400; src:local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); size-adjust:100.5%; }
@font-face{ font-family:"DDS Sans Fallback"; font-style:normal; font-weight:600; src:local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); size-adjust:96.6%; }
@font-face{ font-family:"DDS Sans Fallback L"; font-style:normal; font-weight:400; src:local("DejaVu Sans"), local("DejaVuSans"); size-adjust:88.7%; }
@font-face{ font-family:"DDS Sans Fallback L"; font-style:normal; font-weight:600; src:local("DejaVu Sans Bold"), local("DejaVuSans-Bold"); size-adjust:81%; }
@font-face{ font-family:"DDS Serif Fallback"; font-style:normal; font-weight:500; src:local("Georgia"); size-adjust:97.7%; }
@font-face{ font-family:"DDS Serif Fallback"; font-style:italic; font-weight:500; src:local("Georgia Italic"), local("Georgia-Italic"); size-adjust:91.3%; }
@font-face{ font-family:"DDS Serif Fallback L"; font-style:normal; font-weight:500; src:local("DejaVu Serif"), local("DejaVuSerif"); size-adjust:83.7%; }
@font-face{ font-family:"DDS Serif Fallback L"; font-style:italic; font-weight:500; src:local("DejaVu Serif Italic"), local("DejaVuSerif-Italic"); size-adjust:79.9%; }
/* GP's font library defines these on :root in fonts.css (loaded earlier); dds.css's --f-head/--f-body read them. */
:root{
  --gp-font--newsreader:"Newsreader", "DDS Serif Fallback", "DDS Serif Fallback L", Georgia, 'Times New Roman', serif;
  --gp-font--ibm-plex-sans:"IBM Plex Sans", "DDS Sans Fallback", "DDS Sans Fallback L", system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Anchors clear the sticky header (84 px bar + 9 px ruler). */
html{ scroll-padding-top:100px; }

/* Short views (thank-you, empty search, 404): the footer sits at the bottom of the viewport instead of leaving a Paper
   strip under it. The fixed sticky header, back-to-top and off-canvas panel are out of flow and unaffected. */
body{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
body > #page.site{ flex:1 0 auto; width:100%; }

/* Skip link (first Tab on every page): Contour colours instead of GP/WordPress grey and blue. */
.skip-link.screen-reader-text:focus{ top:8px; left:8px; padding:14px 18px; background:var(--base-3); color:var(--contrast); border:1px solid var(--contrast);
  border-radius:2px; box-shadow:none; font:600 1rem/1.2 var(--f-body); text-decoration:none; outline:2px solid var(--accent-2); outline-offset:3px; }

/* GP chrome icons are swapped for Tabler outline SVGs (inc/setup.php); GP's .gp-icon svg{fill:currentColor} would fill them. */
.gp-icon svg[fill="none"]{ fill:none; stroke:currentColor; }

/* ---- Header: parent section stays marked on child pages (service/project singles, dropdown children) ---- */
.main-navigation:not(.slideout-navigation) .main-nav > ul > li:is(.current-menu-ancestor, .current-menu-parent, .dds-current-section) > a{
  color:var(--contrast); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:8px; text-decoration-color:var(--contrast); }

/* ---- Header: side gutters below 1025 px (Menu Plus sets padding:0 + a 10 px logo margin at its mobile breakpoint) ---- */
@media (max-width:1024px){
  .main-navigation.has-branding .inside-navigation.grid-container{ padding:0 24px; }
  .main-navigation.has-branding .navigation-branding{ margin-left:0; }
}
@media (max-width:767px){ .main-navigation.has-branding .inside-navigation.grid-container{ padding:0 20px; } }

/* ---- Header: narrow phones (360–379 px, incl. the common 360×800 Android size) ----
   Logo 167 + CTA 112 + toggle 52 needs 331 px of the 320 px content box at 360, so the toggle wrapped to a second row.
   Shrink instead of dropping the CTA: 143 + 108 + 50 = 301 px (Logo-Banner at 44 px). gp.css still hides the CTA at ≤359 px. */
@media (max-width:379px){
  .main-navigation .navigation-branding .site-logo img, .main-navigation .site-logo img{ height:44px; }
  .main-navigation .menu-bar-item.nav-cta > a{ padding:0 10px; }
  .main-navigation .menu-toggle{ margin-left:6px; }
}

/* ---- Header: the quote CTA exists twice so the DOM (= Tab) order matches what you see (inc/setup.php):
   desktop: logo → menu → CTA (in .menu-bar-items); ≤1024: logo → CTA (.dds-nav-cta-m, printed before the toggle) → toggle. */
.main-navigation .dds-nav-cta-m{ display:none; }
@media (max-width:1024px){
  .main-navigation .menu-bar-items .nav-cta{ display:none; }
  .main-navigation .dds-nav-cta-m{ display:flex; align-items:center; order:1; margin-left:auto; }
  .main-navigation .navigation-branding{ margin-right:12px; }
  /* One row in any font (R1, SH-05: mobile CLS 0.336). Until IBM Plex Sans 600 loaded, the wider fallback CTA pushed
     the toggle onto a second row. Now the row never wraps: the CTA and toggle keep their size and the logo shrinks
     (contained, left-aligned, same box height), so a late font swap can't change the header height. */
  .main-navigation .inside-navigation{ flex-wrap:nowrap; }
  .main-navigation .nav-cta a, .main-navigation .dds-nav-cta-m a{ white-space:nowrap; }
  .main-navigation .dds-nav-cta-m, .main-navigation .menu-toggle{ flex:none; }
  .main-navigation .navigation-branding{ flex:0 1 auto; min-width:0; }
  .main-navigation .navigation-branding .site-logo, .main-navigation .navigation-branding .site-logo a{ min-width:0; max-width:100%; }
  .main-navigation .navigation-branding .site-logo img{ max-width:100%; object-fit:contain; object-position:left center; }
  /* Polish R2: opening the off-canvas menu adds .toggled, and GP then shows #primary-menu (display:block; flex:0 1 100%).
     It used to wrap to its own row; with nowrap it stayed on the header row and squeezed the logo/CTA/toggle behind the
     panel. The off-canvas panel does the navigating, so the header's own list stays out of the row. */
  .slideout-mobile .main-navigation:not(.slideout-navigation).toggled .main-nav{ display:none; }
}

/* ---- Header: narrow desktops (1025–1199 px). With About ▾ and Resources in the menu (R1, D8), and Work once it is live,
   the row needs ~1050 px at 1200: tighten the item padding and use the short CTA label ("Get a quote") here so the CTA
   never wraps under the menu. 1200 px and up keep the full spacing. ---- */
@media (min-width:1025px) and (max-width:1199px){
  .main-navigation:not(.slideout-navigation) .main-nav > ul > li > a{ padding-inline:9px; }
  .main-navigation:not(.slideout-navigation) .main-nav > ul > li.menu-item-has-children > a{ padding-right:0; }
  .main-navigation:not(.slideout-navigation) .main-nav > ul > li.menu-item-has-children > a .dropdown-menu-toggle{ padding-right:9px; }
  .main-navigation .menu-bar-item.nav-cta > a{ margin-left:8px; }
  .main-navigation .menu-bar-items .nav-cta .nav-cta__lg{ display:none; }
  .main-navigation .menu-bar-items .nav-cta .nav-cta__sm{ display:inline; }
}
@media (min-width:1025px) and (max-width:1099px){
  .main-navigation .navigation-branding .site-logo img{ height:54px; } /* 60 → 54 px: room for Work once it is live */
}

/* ---- Header focus rings ----
   The links are 84 px tall boxes: a ring around the whole box bled into the Ink top bar (2.5:1) and onto the ruler.
   Draw a 44 px ring around the label instead (and around the dropdown chevron), inside the Paper band. */
.main-navigation:not(.slideout-navigation) .main-nav > ul > li > a{ position:relative; }
.main-navigation:not(.slideout-navigation) .main-nav > ul > li > a:focus-visible,
.main-navigation:not(.slideout-navigation) .main-nav .dropdown-menu-toggle:focus-visible{ outline:none; }
.main-navigation:not(.slideout-navigation) .main-nav > ul > li > a:focus-visible::after,
.main-navigation:not(.slideout-navigation) .main-nav .dropdown-menu-toggle:focus-visible::after{
  content:""; position:absolute; inset:calc(50% - 22px) 4px auto; height:44px; border:2px solid var(--accent-2); border-radius:2px; pointer-events:none; }
.main-navigation:not(.slideout-navigation) .main-nav .dropdown-menu-toggle{ position:relative; }
.main-navigation:not(.slideout-navigation) .main-nav .dropdown-menu-toggle:focus-visible::after{ inset:calc(50% - 16px) -2px auto; height:32px; }
.main-navigation:not(.slideout-navigation) .main-nav ul ul a:focus-visible{ outline-offset:-3px; }
.top-bar a:focus-visible{ outline-offset:-3px; } /* the 44 px link fills the bar: an outer ring lost its top edge at y = -4 */

/* ---- Header: Services dropdown (desktop, nav_dropdown_type click-arrow) ---- */
.main-navigation:not(.slideout-navigation) .main-nav ul li.menu-item-has-children > a .dropdown-menu-toggle{ padding-left:6px; }
.main-navigation:not(.slideout-navigation) .main-nav ul li.menu-item-has-children > a .dropdown-menu-toggle .gp-icon svg{ width:16px; height:16px; top:.15em; stroke-width:2; }
/* Muted side/bottom edges (Hairline alone is 1.45:1 and the panel read as floating text over the textured hero);
   the Ink top rule stays. Shifted 8 px left so item text lines up with the "Services" label above it. */
.main-navigation:not(.slideout-navigation) .main-nav ul ul{ padding:8px 0; background:var(--base-3); border:1px solid var(--contrast-3); border-top:1px solid var(--contrast); box-shadow:none; }
.main-navigation:not(.slideout-navigation) .main-nav > ul > li > ul{ margin-top:9px; margin-left:-8px; } /* open below the header ruler, not over it */
.main-navigation:not(.slideout-navigation) .main-nav ul ul li a{ padding:11px 20px; color:var(--contrast); font:400 .9375rem/1.35 var(--f-body); }
.main-navigation:not(.slideout-navigation) .main-nav ul ul li:not(.nav-cta) > a:hover,
.main-navigation:not(.slideout-navigation) .main-nav ul ul li.current-menu-item > a{ background:var(--base-2); color:var(--contrast); text-decoration:underline; text-underline-offset:4px; }
.main-navigation:not(.slideout-navigation) .main-nav ul ul li:not(.nav-cta) > a:hover{ text-decoration-color:var(--accent-2); }
.main-navigation:not(.slideout-navigation) .main-nav ul ul li.current-menu-item > a{ text-decoration-color:var(--contrast); }

/* ---- Header: mobile toggle (Menu Plus adds padding-right:20px for has-branding navs) ---- */
.main-navigation.has-branding .menu-toggle{ padding:0; }
/* gp.css gives the toggle display:inline-flex; GP only shows it below its mobile-menu breakpoint (1024). */
@media (min-width:1025px){ .main-navigation .menu-toggle, .main-navigation.has-branding .menu-toggle{ display:none; } }
.main-navigation .menu-toggle .gp-icon svg{ width:22px; height:22px; top:0; }

/* ---- Off-canvas panel (DESIGN §9.3) ---- */
/* GP's .nav-below-header .main-navigation .inside-navigation.grid-container{padding:0 11px} outranks gp.css here. */
#generate-slideout-menu .inside-navigation{ display:block; padding:20px 24px 32px; }
.slideout-navigation.main-navigation::after{ content:none; } /* the header ruler belongs to the header only */
/* gp.css underlines the current header item; in the panel the current item is marked by the Signal bar only. */
.slideout-navigation.main-navigation .main-nav ul li.current-menu-item > a{ text-decoration:none; }
/* offside.css: button.slideout-exit{width:100%;border:0} outranks gp.css's .slideout-exit box */
.slideout-navigation button.slideout-exit{ display:grid; place-items:center; width:44px; height:44px; margin:0 -8px 8px auto; padding:0;
  border:1px solid rgba(169,189,176,.5); border-radius:2px; background:transparent; color:var(--base-3); }
.slideout-navigation button.slideout-exit:is(:hover, :focus-visible){ background:var(--base-3); border-color:var(--base-3); color:var(--contrast); }
.slideout-navigation .slideout-exit .gp-icon svg{ width:22px; height:22px; top:0; }
/* Services sub-menu inside the panel: the arrow is a 44 px toggle at the row end; children are Plex Sans rows. */
.slideout-navigation.main-navigation .main-nav ul li.menu-item-has-children > a{ padding-right:0; }
/* Same 56 px rhythm as the other top-level rows: the 44 px toggle box is centred instead of adding to the row height. */
.slideout-navigation.main-navigation .main-nav > ul > li.menu-item-has-children > a{ min-height:56px; padding-block:5px; }
.slideout-navigation.main-navigation .main-nav li.menu-item-has-children > a > .dropdown-menu-toggle{ align-self:center; }
.slideout-navigation.main-navigation .main-nav li.menu-item-has-children > a > .dropdown-menu-toggle{
  display:grid; place-items:center; width:44px; height:44px; margin-left:auto; padding:0; float:none;
  border:1px solid rgba(169,189,176,.5); border-radius:2px; }
.slideout-navigation.main-navigation .main-nav .dropdown-menu-toggle .gp-icon svg{ width:20px; height:20px; top:0; }
.slideout-navigation.main-navigation .main-nav ul ul{ border-top:0; background:transparent; box-shadow:none; }
.slideout-navigation.main-navigation .main-nav ul ul li a{ min-height:48px; padding:10px 0 10px 18px; font:400 1.0625rem/1.3 var(--f-body); }
.slideout-navigation.main-navigation .main-nav ul ul li.current-menu-item > a{ padding-left:30px; }
/* Widget area "slide-out-widget": quote button + email line. Menu Plus colours every panel link paper, so the button
   label is set back to Ink (Signal takes Ink labels only, DESIGN §4.5). */
.slideout-navigation .slideout-widget{ margin:28px 0 0; }
.slideout-navigation .slideout-widget a.dds-btn{ display:inline-flex; width:100%; color:var(--btn-fg); font:600 1rem/1.2 var(--f-body); } /* beats .main-navigation a{display:block;font-weight:400} */
.slideout-navigation .slideout-widget a.dds-btn:is(:hover, :focus-visible){ color:var(--btn-fg-h); }
.slideout-navigation .slideout-widget .dds-offcanvas-mail{ margin-top:20px; }
/* "Or email drew@…" on one line, at the paragraph's size (GP's .main-navigation a{display:block} leaked in). */
.slideout-navigation .slideout-widget .dds-offcanvas-mail a{ display:inline; font-size:inherit; }

/* ---- Back to top (GP): square Contour control; out of the tab order while it is hidden ---- */
.generate-back-to-top{ display:grid; place-items:center; width:44px; height:44px; line-height:1; border-radius:2px; visibility:hidden;
  transition:opacity 300ms ease-in-out, transform 300ms ease-in-out, visibility 0s linear 300ms, background-color var(--t), color var(--t); }
.generate-back-to-top.generate-back-to-top__show{ visibility:visible; transition-delay:0s; }
.generate-back-to-top .gp-icon svg{ width:20px; height:20px; top:0; }
/* A Sage hairline edge so the Ink square still reads as a control over the Ink footer (wp.css keeps the footer's
   bottom row clear of it). */
.generate-back-to-top{ box-shadow:0 0 0 1px rgba(169,189,176,.55); }
.generate-back-to-top:focus-visible{ outline:2px solid var(--contrast); outline-offset:2px; box-shadow:0 0 0 2px var(--base-3); } /* reads on light and dark bands */
/* R1 (SH-19): clear of the iPhone home indicator; hidden on phones (it covered text and form fields) and on every page
   with a form (multi-step quote, contact, feedback), where the sticky header and the form's own buttons are enough. */
.generate-back-to-top{ bottom:calc(30px + env(safe-area-inset-bottom, 0px)); }
@media (max-width:767px){ .generate-back-to-top{ display:none; } }
body:has(.dds-form) .generate-back-to-top{ display:none; }
/* inc/setup.php moves focus to #content (tabindex -1) after "Back to top": a container, not a control, so no ring. */
#content:focus{ outline:none; }

/* ---- GP entry meta (blog index until the Resources loop template ships): GP's filled folder/tag icons break the
   Tabler-outline-only rule (DESIGN §13); the words carry the meaning. ---- */
.entry-meta .gp-icon{ display:none; }

/* ---- Articles (GP's default single-post template, DESIGN §6: a 720 px text column) ----
   dds.css zeroes p/h margins for GB layouts; this restores prose rhythm for core blocks in post content only.
   :where() keeps it at element specificity, so any block class or content-template style overrides it. */
:where(.single-post) .site-main{ max-width:720px; margin-inline:auto; }
:where(.single-post .entry-content, .single-post .dynamic-entry-content) > :is(p, ul, ol, blockquote, figure, table, pre){ margin-block:0 1.25em; }
:where(.single-post .entry-content, .single-post .dynamic-entry-content) > :is(h2, h3, h4){ margin-block:1.6em .6em; }