/* FalconDCC landing page styles — applied to the "FalconDCC Landing" block pattern.
   Every rule is scoped under .fdcc-page, which exists only on that page, so nothing
   here can reach the shop.

   Specificity, not source order, decides everything below. Jetpack Boost concatenates
   this file into a bundle that loads BEFORE Storefront's and WordPress's inline
   <style> blocks, so a rule that merely TIES on specificity loses. The competitors:
     Storefront  .wp-block-button__link:not(.has-background)      (0,2,0), :hover (0,3,0)
     WP core     :root :where(.is-layout-flow) > :last-child      (0,2,0)  <- :last-child!
     WP core     :root :where(.is-layout-flow) > *                (0,1,0)
     WP core     :root :where(.is-layout-flex)                    (0,1,0)

   Hence `body .fdcc-page` rather than plain `.fdcc-page`: the extra type selector puts
   every rule at (0,2,1)+, one notch above those (0,2,0) rules. The :last-child one is the
   subtle one — the pseudo-class lifts it to (0,2,0), which is why a plain .fdcc-page rule
   held the margin on .fdcc-num (not a last child) but silently lost it on .fdcc-cta and
   .fdcc-finenote, which are.
   The reset and the component rules sit at the SAME specificity on purpose, so source
   order inside this file decides between them — keep components below the resets. */

body .fdcc-page{--bg:#fdfbf7;--panel:#ffffff;--soft:#f3ecdf;--ink:#221f1a;--muted:#57524a;--accent:#e8611c;--on-accent:#ffffff;--hairline:rgba(34,31,26,.14);
  background:var(--bg);color:var(--ink);font-family:'Bricolage Grotesque',system-ui,sans-serif;line-height:1.4;margin:0 !important;max-width:none !important}
/* Dark mode is ours alone: functions.php opts this template out of WP Dark Mode, which
   darkens by cloning stylesheet rules and would re-darken this already-dark palette.
   Default follows the OS; html.fdcc-dark / html.fdcc-light are the visitor's explicit
   choice, set before first paint by an inline <head> script so there is no flash. */
@media (prefers-color-scheme:dark){html:not(.fdcc-light) body .fdcc-page{--bg:#1a1815;--panel:#232019;--soft:#2b2720;--ink:#f2ede1;--muted:#b1a996;--accent:#f0703a;--on-accent:#1a1815;--hairline:rgba(242,237,225,.16)}}
html.fdcc-dark body .fdcc-page{--bg:#1a1815;--panel:#232019;--soft:#2b2720;--ink:#f2ede1;--muted:#b1a996;--accent:#f0703a;--on-accent:#1a1815;--hairline:rgba(242,237,225,.16)}
body .fdcc-page,body .fdcc-page *{box-sizing:border-box}

/* Storefront pins the WooCommerce store notice position:fixed to the top of the viewport,
   and this template deliberately has no Storefront header to offset it — so the notice sat
   ON TOP of the landing header and swallowed clicks on Buy now. Pinning it to the bottom
   instead just moved the collision onto the tab strip: fixed means it always covers
   something. Put it in normal flow so it takes up space and covers nothing; falcondcc.js
   moves it above the page, since WooCommerce prints it at the end of <body>. Keyed to this
   template's body class — the shop's own top-pinned notice is untouched. */
body.page-template-template-blank .woocommerce-store-notice{position:static}

/* WordPress block-layout neutralisers ---------------------------------------- */
/* Storefront ships no theme.json, so WP still wraps every Group block's children in
   .wp-block-group__inner-container. That wrapper becomes the sole flex/grid child,
   which is what collapsed the header, brand, CTA, footer and spec grid into a
   vertical stack. display:contents makes it transparent to layout. */
body .fdcc-page .wp-block-group__inner-container{display:contents}
/* WP's block-gap rule forces margin-block-end:0 and a 24px margin-block-start onto
   every flow child, flattening the designed rhythm (the 01/02/03 stack) and pushing
   the tab strip off the panel. Reset here; the component margins below re-apply. */
body .fdcc-page .is-layout-flow > *{margin-block-start:0;margin-block-end:0}

/* Neutralise Storefront's heading colour and typeface. `p` is deliberately absent
   from the colour reset: including it out-ranked .fdcc-num, .fdcc-badge and
   .fdcc-lede and forced every one of them to --ink. */
body .fdcc-page h1,body .fdcc-page h2,body .fdcc-page h3{font-family:inherit;color:inherit}
body .fdcc-page p{font-family:inherit}
body .fdcc-page a{color:var(--accent)}
body .fdcc-page a:hover{color:var(--ink)}

/* Header */
body .fdcc-page .fdcc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 48px;border-bottom:2px solid var(--ink);margin-bottom:0}
/* margin-right:auto absorbs the free space, so the theme toggle and Buy now sit
   together at the right instead of being spread out by space-between. */
body .fdcc-page .fdcc-brand{display:flex;align-items:center;gap:12px;margin:0 auto 0 0}
body .fdcc-page .fdcc-logo{background:#fdfbf7;border:2px solid var(--ink);border-radius:50%;width:46px;height:46px;display:flex;align-items:center;justify-content:center;flex:none;margin:0;overflow:hidden}
body .fdcc-page .fdcc-logo img{height:32px;width:auto;object-fit:contain}
body .fdcc-page .fdcc-brand-name{font-weight:800;font-size:18px;margin:0}

/* Theme toggle (injected into the header by falcondcc.js) */
body .fdcc-page .fdcc-dm{display:flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;padding:0;cursor:pointer;font-family:inherit;background:var(--soft);color:var(--ink);border:2px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink)}
body .fdcc-page .fdcc-dm:hover{color:var(--ink);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
/* Storefront's focus ring is its purple link colour; keep the ring (a11y) but on-palette. */
body .fdcc-page .fdcc-dm:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body .fdcc-page .fdcc-dm svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Buttons */
body .fdcc-page .fdcc-btn .wp-block-button__link{background-color:var(--accent);color:var(--on-accent);font-family:inherit;font-weight:700;font-size:15px;padding:14px 28px;border-radius:12px;box-shadow:4px 4px 0 var(--ink);text-decoration:none}
body .fdcc-page .fdcc-btn .wp-block-button__link:hover,body .fdcc-page .fdcc-btn .wp-block-button__link:focus,body .fdcc-page .fdcc-btn .wp-block-button__link:active{background-color:var(--accent);color:var(--on-accent);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
body .fdcc-page .fdcc-btn-small .wp-block-button__link{font-size:14px;padding:11px 22px;border-radius:10px;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
body .fdcc-page .fdcc-btn-ink .wp-block-button__link{background-color:var(--ink);color:var(--bg)}
body .fdcc-page .fdcc-btn-ink .wp-block-button__link:hover,body .fdcc-page .fdcc-btn-ink .wp-block-button__link:focus,body .fdcc-page .fdcc-btn-ink .wp-block-button__link:active{background-color:var(--ink);color:var(--bg)}

/* Hero */
body .fdcc-page .fdcc-hero{padding:44px 48px 52px;max-width:1120px;margin:0 auto;gap:24px}
body .fdcc-page .fdcc-badge{display:inline-block;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border:2px solid var(--accent);border-radius:999px;padding:5px 12px;margin-bottom:18px}
body .fdcc-page .fdcc-h1{font-weight:800;font-size:50px;line-height:1.02;letter-spacing:-.02em;margin:0 0 20px}
/* nowrap keeps the accent clause whole, as in the source design, instead of breaking it
   as "by DCC or / Wi-Fi." Only above 1024px: WP stacks .wp-block-columns at 781px, so
   between there and ~1000px the hero column is only half-width and the unbreakable
   clause would overflow it at 50px/800. Released below — see the 1024px query. */
body .fdcc-page .fdcc-h1 em{color:var(--accent);font-style:normal;white-space:nowrap}
@media (max-width:1024px){body .fdcc-page .fdcc-h1 em{white-space:normal}}
body .fdcc-page .fdcc-lede{font-size:17px;line-height:1.6;color:var(--muted);margin:0 0 28px;max-width:44ch}
body .fdcc-page .fdcc-board{margin:0}
body .fdcc-page .fdcc-board img{width:88%;max-width:460px;height:auto;filter:drop-shadow(0 24px 40px rgba(60,45,20,.28));transform:rotate(-2deg)}
body .fdcc-page .fdcc-hero-cta{gap:14px;align-items:center}
body .fdcc-page .fdcc-see-features{font-weight:700;font-size:15px}
body .fdcc-page .fdcc-see-features a{color:var(--ink);text-decoration:none}

/* Tabs */
body .fdcc-page .fdcc-tabs{display:flex;gap:8px;justify-content:center;padding:0 48px}
body .fdcc-page .fdcc-tab{font-family:inherit;cursor:pointer;font-weight:700;font-size:14px;padding:11px 22px;border-radius:12px 12px 0 0;border:2px solid var(--ink);border-bottom:none;background:var(--soft);color:var(--muted);flex:none}
body .fdcc-page .fdcc-tab.on{background:var(--ink);color:var(--bg)}
/* Same as .fdcc-dm: keep the focus ring for a11y, but off Storefront's purple. */
body .fdcc-page .fdcc-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body .fdcc-page .fdcc-body{border-top:2px solid var(--ink);background:var(--panel);margin:0}
/* The panels are the real content column; .fdcc-body's own child is the (now
   display:contents) inner container, so the max-width has to live here. */
body .fdcc-page .fdcc-panel{max-width:1120px;margin-left:auto;margin-right:auto}
/* Panel visibility.
   Hidden from FIRST PAINT, keyed to the front-end body class — waiting for the script to
   add .fdcc-tabs-ready meant every visitor saw all four panels stacked (a ~4x too long
   page) until the deferred footer script ran, then watched it collapse. The block editor
   has no .page-template-template-blank body class and never loads falcondcc.js, so it
   still shows every panel for editing.
   flow-root, not block: it establishes a BFC so the CTA's bottom margin stays inside the
   panel instead of collapsing out through it and leaving the orange box flush on the
   footer. Unlike overflow:hidden it doesn't clip the CTA's 6px offset shadow. */
body.page-template-template-blank .fdcc-panel{display:none}
body.page-template-template-blank .fdcc-panel-overview{display:flow-root}
body .fdcc-page.fdcc-tabs-ready .fdcc-panel{display:none}
body .fdcc-page.fdcc-tabs-ready .fdcc-panel.on{display:flow-root}

/* Overview */
body .fdcc-page .fdcc-feats{padding:44px 48px 8px;gap:40px}
body .fdcc-page .fdcc-num{font-weight:800;font-size:12px;letter-spacing:.1em;color:var(--accent);margin:0 0 8px}
body .fdcc-page .fdcc-feat-title{font-weight:800;font-size:17px;margin:0 0 6px;line-height:1.3}
body .fdcc-page .fdcc-muted{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0}
body .fdcc-page .fdcc-story{padding:36px 48px 12px;gap:36px}
body .fdcc-page .fdcc-story h2,body .fdcc-page .fdcc-h2{font-weight:800;font-size:28px;letter-spacing:-.01em;margin:0 0 14px;line-height:1.15}
body .fdcc-page .fdcc-story p{font-size:15.5px;line-height:1.7;color:var(--muted);margin:0 0 14px}
body .fdcc-page .fdcc-photo{border:2px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:6px 6px 0 var(--ink);margin:0}
body .fdcc-page .fdcc-photo img,body .fdcc-page .fdcc-photo video{width:100%;height:300px;object-fit:cover;display:block}
/* Showcase video tile: poster fills like a photo, with a prominent play button; click opens a lightbox */
body .fdcc-page .fdcc-video{position:relative;cursor:pointer;padding:0}
body .fdcc-page .fdcc-play-btn{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;padding:0;margin:0}
body .fdcc-page .fdcc-play-ico{display:flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 8px 28px rgba(0,0,0,.4);transition:transform .15s ease;animation:fdcc-pulse 2.4s ease-out infinite}
body .fdcc-page .fdcc-play-ico::before{content:"";width:0;height:0;margin-left:7px;border-style:solid;border-width:17px 0 17px 28px;border-color:transparent transparent transparent #fff}
body .fdcc-page .fdcc-video:hover .fdcc-play-ico,body .fdcc-page .fdcc-play-btn:focus-visible .fdcc-play-ico{transform:scale(1.08)}
body .fdcc-page .fdcc-play-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@keyframes fdcc-pulse{0%{box-shadow:0 8px 28px rgba(0,0,0,.4),0 0 0 0 rgba(232,97,28,.5)}70%{box-shadow:0 8px 28px rgba(0,0,0,.4),0 0 0 20px rgba(232,97,28,0)}100%{box-shadow:0 8px 28px rgba(0,0,0,.4),0 0 0 0 rgba(232,97,28,0)}}
@media (prefers-reduced-motion:reduce){body .fdcc-page .fdcc-play-ico{animation:none}}
/* Lightbox (JS appends this to <body>, outside .fdcc-page) */
body .fdcc-lightbox{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.88);padding:3vmin}
body .fdcc-lightbox video{width:min(92vw,1600px);max-height:90vh;background:#000;border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.6)}
body .fdcc-lightbox .fdcc-lb-close{position:absolute;top:14px;right:16px;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
body .fdcc-lightbox .fdcc-lb-close:hover{background:rgba(255,255,255,.32)}
body .fdcc-page .fdcc-steps-wrap{padding:40px 48px 8px}
body .fdcc-page .fdcc-steps{gap:20px}
body .fdcc-page .fdcc-step{background:var(--soft);border:2px solid var(--ink);border-radius:14px;padding:22px 24px}
body .fdcc-page .fdcc-step-kicker{font-weight:800;font-size:13px;color:var(--accent);margin:0 0 8px}
body .fdcc-page .fdcc-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:44px 48px 48px;background:var(--accent);border:2px solid var(--ink);border-radius:18px;padding:32px 36px;box-shadow:6px 6px 0 var(--ink)}
body .fdcc-page .fdcc-cta-title{font-weight:800;font-size:24px;color:var(--on-accent);margin:0 0 4px}
body .fdcc-page .fdcc-cta-sub{font-size:15px;color:var(--on-accent);opacity:.85;margin:0}

/* Specs */
body .fdcc-page .fdcc-section{padding:44px 48px 48px}
/* Descendant, not child: the inner container sits between .fdcc-section and its h2. */
body .fdcc-page .fdcc-section h2{font-weight:800;font-size:28px;margin:0 0 8px}
body .fdcc-page .fdcc-section-sub{font-size:15px;color:var(--muted);margin:0 0 26px}
body .fdcc-page .fdcc-spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;max-width:960px}
body .fdcc-page .fdcc-spec{padding:14px 0;border-bottom:1px solid var(--hairline);font-size:15px;line-height:1.55;margin:0}
body .fdcc-page .fdcc-spec strong{display:block;font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
body .fdcc-page .fdcc-finenote{margin:28px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:70ch}

/* Downloads */
body .fdcc-page .fdcc-dl-cols{gap:48px;max-width:880px;margin-left:0}
body .fdcc-page .fdcc-dl-head{font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);padding-bottom:10px;border-bottom:2px solid var(--ink);margin:0 0 6px}
body .fdcc-page .fdcc-dl-list{list-style:none;margin:0;padding:0}
body .fdcc-page .fdcc-dl-list li{padding:13px 2px;border-bottom:1px solid var(--hairline);font-weight:600;font-size:15px;margin:0}
body .fdcc-page .fdcc-dl-list li a{color:var(--ink);text-decoration:none}
body .fdcc-page .fdcc-dl-list li a:hover{color:var(--accent)}
body .fdcc-page .fdcc-dl-note{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}

/* Resellers */
body .fdcc-page .fdcc-cards{gap:20px;max-width:820px;margin-left:0}
body .fdcc-page .fdcc-card{background:var(--soft);border:2px solid var(--ink);border-radius:14px;padding:24px}
body .fdcc-page .fdcc-card-dashed{background:var(--panel);border:2px dashed var(--hairline);border-radius:14px;padding:24px}
body .fdcc-page .fdcc-kicker{font-weight:800;font-size:13px;color:var(--accent);margin:0 0 10px}
body .fdcc-page .fdcc-kicker-muted{font-weight:800;font-size:13px;color:var(--muted);margin:0 0 10px}
body .fdcc-page .fdcc-card-title{font-weight:800;font-size:17px;margin:0 0 6px}
body .fdcc-page .fdcc-card-title a{color:var(--ink);text-decoration:none}
body .fdcc-page .fdcc-card-title a:hover{color:var(--accent)}

/* Footer */
body .fdcc-page .fdcc-foot{border-top:2px solid var(--ink);padding:24px 48px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
body .fdcc-page .fdcc-foot p{font-size:13px;color:var(--muted);margin:0}

/* Mobile */
@media (max-width:820px){
  body .fdcc-page .fdcc-head{padding:16px 20px}
  body .fdcc-page .fdcc-hero{padding:36px 24px 40px}
  body .fdcc-page .fdcc-h1{font-size:38px}
  body .fdcc-page .fdcc-tabs{justify-content:flex-start;overflow-x:auto;padding:0 16px}
  body .fdcc-page .fdcc-feats,body .fdcc-page .fdcc-story,body .fdcc-page .fdcc-steps-wrap,body .fdcc-page .fdcc-section{padding-left:24px;padding-right:24px}
  body .fdcc-page .fdcc-cta{flex-direction:column;text-align:center;margin-left:24px;margin-right:24px}
  body .fdcc-page .fdcc-spec-grid{grid-template-columns:1fr}
  body .fdcc-page .fdcc-foot{padding:24px}
}
