/*
Theme Name: Fresh Digital Child
Template: hello-elementor
Version: 1.0.0
Description: Fresh Digital 2026 design system - token layer, self-hosted Poppins, Hello reset fixes.
*/

/* ---------------------------------------------------------------
   1. Self-hosted Didact Gothic (Mitch, 25 Aug 2026 - trialled as a closer
   match to the design's Century Gothic than Poppins).
   NOTE: Didact Gothic ships ONE weight (400). Bold text is therefore
   synthesised by the browser. The design of record renders its whole
   600-950 ladder as Century Gothic Regular anyway, so this is closer to
   the design, not further from it - but true bold (<b>NOW</b>, <b>Keep</b>)
   is faux-bold rather than a drawn bold face. Flagged for sign-off.
   Latin + latin-ext only; no fonts.googleapis.com request is made.
   --------------------------------------------------------------- */
@font-face{font-family:"Didact Gothic";src:url("fonts/didactgothic-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Didact Gothic";src:url("fonts/didactgothic-400-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------------------------------------------------------------
   2. Tokens. ONE governed set. The source design rendered 43
   distinct colours of which only 8 were declared; these are the
   measured, rationalised values.
   --------------------------------------------------------------- */
:root{
  --fd-ink:#000000;
  --fd-paper:#ffffff;
  --fd-pink:#fd2eb3;
  --fd-pink-deep:#8f005f;     /* small text on light - pink fails AA below 24px */
  --fd-pink-tint:#fff0f9;
  --fd-blue:#31c6f4;
  --fd-blue-tint:#effbff;
  --fd-mint:#61d4b3;
  --fd-mint-tint:#effdf8;
  --fd-orange:#fb8d62;        /* buttons */
  --fd-orange-tint:#fff4ef;
  --fd-yellow:#fdd365;
  --fd-night:#0b0d1c;         /* one near-black, not four */
  --fd-text-2:#555555;        /* measured secondary text */
  --fd-text-on-dark:#c3c4cf;
  --fd-shell:1180px;
  --fd-border:2px solid var(--fd-ink);
  --fd-shadow:5px 5px 0 var(--fd-ink);
  --fd-shadow-lg:7px 7px 0 var(--fd-pink);
  /* Monotonic fluid scale. The source scale went BACKWARDS at 768px. */
  --fd-t-display:clamp(44px,6.2vw,90px);
  --fd-t-h2:clamp(34px,4.6vw,68px);
  --fd-t-h3:clamp(22px,1.9vw,31px);
  --fd-t-body:clamp(16px,1.05vw,18px);
  --fd-band:clamp(64px,8vw,120px);
}

body{font-family:var(--e-global-typography-text-font-family, "Didact Gothic"),Arial,Helvetica,sans-serif;font-size:var(--fd-t-body);
     line-height:1.6;color:var(--fd-ink);background:var(--fd-paper);
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ---------------------------------------------------------------
   3. Hello Elementor reset fixes.
   Hello paints bare links and buttons #c36 (a pink that is NOT our
   pink) and forces its own heading font. Both must be neutralised
   or stray elements show the wrong brand colour.
   --------------------------------------------------------------- */
a{color:inherit}
a:hover,a:focus{color:var(--fd-pink-deep)}
h1,h2,h3,h4,h5,h6{font-family:var(--e-global-typography-primary-font-family, "Didact Gothic"),Arial,sans-serif;margin:0}
/* weight, tracking and line-height come from the kit + Global Classes,
   never a blanket rule - a blanket 700 silently defeats the 900 display. */
button,input[type=submit],input[type=button],.button{
  background:var(--fd-orange);color:var(--fd-ink);border:var(--fd-border);
  border-radius:0;box-shadow:var(--fd-shadow);font-family:inherit;font-weight:700}

/* [hidden] must actually hide - Hello/Elementor display rules override it */
[hidden]{display:none !important}

/* Form controls must be allowed to shrink, or they set a min-content
   floor that pushes layouts wider than the viewport. */
input,textarea,select,button{min-width:0;max-width:100%}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ---------------------------------------------------------------
   4. V3 widget bridge.
   The nav menu is a V3 widget (no atomic equivalent yet), so it
   cannot take a Global Class. Without this it renders in Elementor's
   default Roboto grey. Values are MEASURED from the approved design
   (see research/INTERACTION-STATES.md).
   --------------------------------------------------------------- */
.fd-header .elementor-nav-menu a,
.fd-footer-col .elementor-nav-menu a{
  font-family:var(--e-global-typography-accent-font-family, "Didact Gothic"),Arial,sans-serif;font-weight:700;font-size:13px;
  color:var(--fd-ink);letter-spacing:0;transition:.16s;
}
.fd-footer-col .elementor-nav-menu a{color:var(--fd-text-on-dark);font-weight:400;font-size:14px}
.fd-footer-col .elementor-nav-menu a:hover{color:var(--fd-pink)}

/* the pill hover Mitch screenshotted: pink text, pale pink fill,
   black underline, cyan offset shadow */
.fd-header .elementor-nav-menu > li > a:hover,
.fd-header .elementor-nav-menu > li > a:focus-visible{
  color:var(--fd-pink);
  background:#FFF3FA;
  border-bottom:2px solid var(--fd-ink);
  box-shadow:3px 3px 0 var(--fd-blue);
}
/* submenu panel: hard border + pink offset shadow, two columns like the design */
.fd-header .elementor-nav-menu--dropdown{
  border:2px solid var(--fd-ink);box-shadow:7px 7px 0 var(--fd-pink);background:#fff;
}
.fd-header .elementor-nav-menu--dropdown a{font-weight:400;font-size:12px}
.fd-header .elementor-nav-menu--dropdown a:hover{background:#FFF0FA;color:var(--fd-pink)}

/* burger */
.fd-header .elementor-menu-toggle{
  color:var(--fd-ink);border:2px solid var(--fd-ink);border-radius:0;
  box-shadow:3px 3px 0 var(--fd-pink);background:#fff;
}

/* ---------------------------------------------------------------
   5. Kit chain. Elementor prints --e-global-color-* on the kit class
   (applied to <body>), NOT on :root — so the chain must be declared
   on body or var() resolves to the fallback and Site Settings does
   nothing. This is Build 1's logged "Global Colors dead" defect.
   --------------------------------------------------------------- */
body{
  --fd-ink:        var(--e-global-color-text,     #000000);
  --fd-paper:      var(--e-global-color-fdpaper,  #FFFFFF);
  --fd-pink:       var(--e-global-color-primary,  #FD2EB3);
  --fd-pink-deep:  var(--e-global-color-fdpinkdp, #8F005F);
  --fd-blue:       var(--e-global-color-secondary,#31C6F4);
  --fd-mint:       var(--e-global-color-fdmint,   #61D4B3);
  --fd-orange:     var(--e-global-color-accent,   #FB8D62);
  --fd-yellow:     var(--e-global-color-fdyellow, #FDD365);
  --fd-night:      var(--e-global-color-fdnight,  #0B0D1C);
  --fd-text-2:     var(--e-global-color-fdtext2,  #555555);
  --fd-text-on-dark:var(--e-global-color-fdondark,#C3C4CF);
  --fd-pink-tint:#FFF0F9;
  --fd-nav-tint:#FFF3FA;
}

/* ---------------------------------------------------------------
   4. Chrome behaviours the class layer cannot express natively
   (descendant combinators + white-space are not in style-schema.php).
   Kept to the absolute minimum; everything visual lives in classes.
   --------------------------------------------------------------- */
.fd-navlink,
.fd-btn,
.fd-mobile-trigger { white-space: nowrap; }

.fd-nav-menu:hover > .fd-nav-panel,
.fd-nav-menu:focus-within > .fd-nav-panel { display: grid; }

/* ------------------------------------------------------------------
   Dropdown hover bridge. Mitch, 26 Aug: "when i hover over marketing and
   pull my mouse down, the drop down keeps disappearing."
   Measured cause: the trigger box ends at y=73 and the panel starts at
   y=77 (inset-block-start:46px against a 42px-tall pill), so there is a
   4px strip belonging to neither. Crossing it slowly drops
   .fd-nav-menu:hover and the panel closes; a fast flick jumps the gap,
   which is why it seemed intermittent and position-dependent.
   The bridge is a child of the panel, so it only exists while the panel
   is open, spans the panel's full width (which more than covers the
   trigger) and makes the hover target continuous. Nothing moves: the
   panel keeps its designed 46px offset.
   ------------------------------------------------------------------ */
.fd-nav-menu > .fd-nav-panel::before {
  content: "";
  position: absolute;
  inset-block-end: 100%;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 8px;
}


.fd-mobile-menu:hover > .fd-mobile-panel,
.fd-mobile-menu:focus-within > .fd-mobile-panel { display: grid; }

/* Kill Elementor/Hello default button chrome inside the nav pills and
   footer links: the atomic e-button base paints a background unless told
   otherwise, which showed as the stray blue block behind "Marketing". */
.fd-navlink .e-button-base,
.fd-navlink-text.e-button-base,
.fd-nav-panel .e-button-base,
.fd-mobile-panel .e-button-base {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  color: inherit;
}

/* Pill label + caret inherit the pill hover colour. */
.fd-navlink:hover .fd-navlink-text,
.fd-navlink:hover .e-paragraph-base { color: inherit; }

/* Card hover ease (transition prop shape TBD in schema; native residue). */
.fd-card { transition: transform .18s, box-shadow .18s; }

/* NAP row phone link stays quiet (13px) while the design footer link is 20px. */
.fd-footer-napline .fd-footer-link { font-size: 13px; }

/* ---------------------------------------------------------------
   5. ATOMIC CONTAINER RESET.
   Elementor gives every atomic container .e-flexbox-base{padding:10px;display:flex}
   and .e-div-block-base{min-width:30px;padding:10px}. The design's containers are
   plain blocks with no padding. Specificity is deliberate: :is(tag...) .e-con is
   NOTE (26 Aug): the specificity maths below was wrong. An attribute selector counts
   as CLASS weight, so this selector is (0,2,0) - a TIE with .elementor .e-flexbox-base,
   not a win. It only prevailed because this stylesheet loads later. In the Elementor
   editor that order reverses, which is why the builder rendered scrambled. It is left
   at this weight deliberately: raising it would also beat the Global Classes that give
   the header and footer their padding. Order is restored for the editor in functions.php.
   --------------------------------------------------------------- */
[data-elementor-type="wp-page"] .e-flexbox-base,
[data-elementor-type="wp-page"] .e-div-block-base {
  display: block;
  padding: 0;
  min-width: 0;
}

/* ---------------------------------------------------------------
   6. LONGFORM TEMPLATE — blog posts, legal pages, and anything else
   rendered by the theme rather than Elementor. The ChatGPT design has
   no template for these, so this is ours, built from the same tokens:
   the 1180 shell (narrower measure for reading), the design's type
   ramp, pink links, hard-bordered tables.
   --------------------------------------------------------------- */
.site-main > .page-header,
.site-main > .page-content,
.site-main > .post-content,
.site-main > .entry-content {
  width: min(760px, 100% - 48px);
  margin-inline: auto;
}
.site-main > .page-header { padding-block: 72px 0; }
.site-main > .page-header .entry-title {
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: 1.02;
  letter-spacing: -.028em;
  margin: 0;
}
.site-main > .page-content,
.site-main > .post-content,
.site-main > .entry-content { padding-block: 28px 96px; font-size: 17px; line-height: 1.7; }
.site-main .page-content > p,
.site-main .post-content > p { margin: 0 0 18px; color: #444; }
.site-main .page-content h2,
.site-main .post-content h2 { font-size: 30px; line-height: 1.2; margin: 44px 0 14px; }
.site-main .page-content h3,
.site-main .post-content h3 { font-size: 22px; line-height: 1.25; margin: 34px 0 12px; }
.site-main .page-content strong,
.site-main .post-content strong { font-weight: 700; }
.site-main .page-content a,
.site-main .post-content a { color: var(--fd-pink-deep, #8f005f); text-decoration: underline; text-underline-offset: 3px; }
.site-main .page-content a:hover,
.site-main .post-content a:hover { color: var(--fd-pink, #fd2eb3); }
.site-main .page-content ul,
.site-main .post-content ul { margin: 0 0 18px; padding-inline-start: 22px; list-style: disc; }
.site-main .page-content li,
.site-main .post-content li { margin: 0 0 8px; }
.site-main .page-content img,
.site-main .post-content img { max-width: 100%; height: auto; border: 2px solid var(--fd-ink, #000); display: block; margin: 26px 0; }
.site-main .page-content table,
.site-main .post-content table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 14px; }
.site-main .page-content th,
.site-main .page-content td,
.site-main .post-content th,
.site-main .post-content td { border: 2px solid var(--fd-ink, #000); padding: 12px 14px; text-align: left; vertical-align: top; }
.site-main .page-content th,
.site-main .post-content th { background: var(--fd-pink-tint, #fff0f9); font-weight: 700; }
/* Hello Elementor's reset.css sets `border-block-start: 1px solid hsla(0,0%,50%,.502)` on
   `thead tr:first-child th` - the LOGICAL property, and only on the header row - so the top
   edge of every table header rendered 1px grey while every other edge was correct 2px ink.
   Their selector is (0,2,4); a (0,2,3) restatement LOSES, and a (0,2,4) one only ties and would
   be relying on load order. Mirrored here with both :first-child pseudos, giving (0,4,4), so it
   wins on specificity outright. */
.site-main .page-content table thead:first-child tr:first-child th,
.site-main .post-content table thead:first-child tr:first-child th { border-block-start: 2px solid var(--fd-ink, #000); }
/* archive / blog index */
.site-main article.post { width: min(760px, 100% - 48px); margin-inline: auto; padding-block: 26px;
  border-bottom: 2px solid var(--fd-ink, #000); }
.site-main article.post .entry-title { font-size: 26px; line-height: 1.2; margin: 0 0 8px; }
.site-main article.post a { color: var(--fd-ink, #000); text-decoration: none; }
.site-main article.post a:hover { color: var(--fd-pink, #fd2eb3); }
/* ---------------------------------------------------------------
   7. TESTIMONIALS ARCHIVE — theme template, not an Elementor document.
   Elementor only enqueues its Global Class CSS for Elementor documents, so
   on this template the design-sections rules load but the global-class
   layout props (display/flex/width) do NOT. Anything the template needs
   from a Global Class must be declared here explicitly. That was why the
   cards ran off the right edge and the eyebrow sat beside the heading.
   --------------------------------------------------------------- */
/* Hello Elementor caps .site-main via `body:not([class*="elementor-page-"]) .site-main`
   (0,2,1), which stopped the archive hero band reaching the viewport edge. Released so
   the design's own `.page-hero.fd-shell` full-bleed breakout works here exactly as it
   does on the 13 design pages. (Mitch, 26 Aug, raised against the blog; the testimonials
   archive is the same template family and had the same cap.) */
body .site-main.fd-testimonials-archive.fd-testimonials-archive {
  width: 100%; max-width: none; margin: 0; padding: 0;
}
.fd-testimonials-archive .fd-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.fd-testimonials-archive .page-hero.fd-shell { width: 100%; }
.fd-testimonials-archive .page-hero > p:not(.eyebrow) {
  max-width: 760px; margin: 0; font-size: 20px; line-height: 1.55; color: #484858;
}
.fd-testimonials-archive .eyebrow {
  margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fd-pink-deep, #8f005f);
}
.fd-testimonials-archive .t-archive { padding-block: 0 96px; }
.fd-testimonials-archive .next-step { padding-block: 84px; }
.fd-testimonials-archive .next-step > .fd-shell {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.fd-testimonials-archive .next-step h2 { margin: 0; }
.fd-testimonials-archive .next-step p { margin: 0; max-width: 620px; }
.fd-testimonials-archive .next-step .fd-btn { margin-top: 10px; }
@media (max-width: 600px) {
  .fd-testimonials-archive .fd-shell { width: min(100% - 30px, 1180px); }
  .fd-testimonials-archive .page-hero { padding-block: 60px 48px; }
}

/* ------------------------------------------------------------------
   Header nav weight. Mitch, 26 Aug: "the header nav text needs to be a
   tad thicker."
   Didact Gothic ships ONE weight (400), so font-weight is no use here:
   500 resolves back to 400 and renders identically, and 600+ triggers the
   browser's synthetic bold, which is a hard jump rather than a nudge.
   A hairline stroke in the text's own colour thickens the stem by a
   fraction of a pixel, which is the "tad" that was asked for. There is no
   atomic prop key for it (style-schema.php holds 73 keys and this is not
   one), so it is declared here rather than lost silently in a Global Class.
   If the site later pairs Didact with a real medium face, delete this and
   set the weight properly - see HANDOVER §4 item 4.
   ------------------------------------------------------------------ */
.fd-navlink-text,
.fd-navlink .fd-nav-caret {
  -webkit-text-stroke: 0.3px currentColor;
  text-stroke: 0.3px currentColor;
  paint-order: stroke fill;
}


/* ------------------------------------------------------------------
   Single testimonial. Same cap release as the other archive templates:
   Hello Elementor constrains .site-main, which would stop the hero band
   reaching the viewport edge.
   ------------------------------------------------------------------ */
body .site-main.fd-testimonial-single.fd-testimonial-single {
  width: 100%; max-width: none; margin: 0; padding: 0;
}
.fd-testimonial-single .fd-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.fd-testimonial-single .page-hero.fd-shell { width: 100%; }
.fd-testimonial-single .t-single-person { margin: 14px 0 0; font-size: 15px; color: var(--fd-text-2, #555); }

/* The two headline results, given the weight they deserve: this is the number a
   prospect came to see. Yellow chip, hard border, offset shadow. */
.fd-testimonial-single .t-single-results {
  display: flex; flex-wrap: wrap; gap: 16px; padding-block: 40px 0;
}
.fd-testimonial-single .t-result {
  display: inline-block; padding: 14px 20px;
  background: var(--fd-yellow, #fdd365);
  border: var(--fd-border, 2px solid #000);
  box-shadow: 5px 5px 0 var(--fd-ink, #000);
  font-size: 17px; line-height: 1.25;
}
.fd-testimonial-single .t-single-body { padding-block: 40px 0; font-size: 17px; line-height: 1.7; }
.fd-testimonial-single .t-single-body > p { margin: 0 0 18px; color: #444; }
.fd-testimonial-single .t-single-quote { padding-block: 34px 84px; }
.fd-testimonial-single .t-single-quote blockquote {
  margin: 0; padding: 30px 32px;
  background: var(--fd-mint-tint, #effdf8);
  border: var(--fd-border, 2px solid #000);
  box-shadow: 7px 7px 0 var(--fd-mint, #61d4b3);
}
.fd-testimonial-single .t-single-quote blockquote p { margin: 0; font-size: 20px; line-height: 1.45; }
.fd-testimonial-single .t-single-quote blockquote footer { margin-top: 16px; font-size: 14px; color: var(--fd-text-2, #555); }
.fd-testimonial-single .next-step { padding-block: 84px; background: var(--fd-pink, #fd2eb3); border-top: 2px solid var(--fd-ink, #000); }
.fd-testimonial-single .next-step > .fd-shell { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.fd-testimonial-single .next-step h2 { margin: 0; }
.fd-testimonial-single .next-step .fd-btn {
  margin-top: 10px; display: inline-block; padding: 14px 26px; text-decoration: none;
  background: #fff; color: var(--fd-ink, #000);
  border: var(--fd-border, 2px solid #000); box-shadow: var(--fd-shadow, 5px 5px 0 #000);
}
@media (max-width: 600px) {
  .fd-testimonial-single .fd-shell { width: min(100% - 30px, 1180px); }
  .fd-testimonial-single .t-result { font-size: 15px; }
}

/* ------------------------------------------------------------------
   Skip link. Hidden until it takes focus, then it lands on the ink
   border + offset shadow like everything else. Targets #content, which
   now exists on every template.
   ------------------------------------------------------------------ */
.skip-link.screen-reader-text {
  position: absolute; left: -9999px; top: 0; z-index: 100000;
  padding: 12px 18px; font-size: 14px; text-decoration: none;
  background: var(--fd-paper, #fff); color: var(--fd-ink, #000);
  border: var(--fd-border, 2px solid #000);
  box-shadow: 5px 5px 0 var(--fd-pink, #fd2eb3);
}
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible {
  left: 16px; top: 16px; outline: 2px solid var(--fd-blue, #31c6f4); outline-offset: 2px;
}

/* The design places the star ornament with `.page-hero::after { top:12%; right:4% }`, which
   is 12% of the nearest POSITIONED ancestor. On the 13 Elementor design pages the hero is a
   positioned container, so it means 12% of the hero. Our archive heroes are plain <section>s
   and default to position:static, so the star anchored to a different ancestor entirely and
   sat at a fixed 103px regardless of hero height, reading too high on the shorter heroes
   (Mitch, 26 Aug). Making them relative restores the design's own proportional placement. */
.fd-editorial .page-hero,
.fd-testimonials-archive .page-hero,
.fd-testimonial-single .page-hero { position: relative; }