/*
Theme Name: FastDL
Theme URI: https://fastdl.website/
Description: FastDL's Kadence child theme for the Instagram media downloader, support pages, and project design system.
Template: kadence
Version: 1.9.5
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: master-downloader
*/

/* ============================================================
   1. TOKENS  —  rebrand by editing --md-accent* only
   ============================================================ */
:root {
  --md-accent:        #2f62d6;
  --md-accent-dark:   #22459c;
  --md-accent-soft:   #eef2fd;

  --md-bg:            #f4f6f7;
  --md-surface:       #ffffff;
  --md-surface-alt:   #fbfcfd;
  --md-text:          #14161a;
  --md-text-2:        #3c424b;
  --md-text-3:        #545a63;
  --md-muted:         #878e98;
  --md-border:        #e6e9ec;
  --md-border-strong: #d9dee3;
  --md-divider:       #edeff1;

  --md-success:       #1c7a52;
  --md-warning:       #b26a05;
  --md-error:         #c0392b;
  --md-info:          #2b6b8f;

  --md-r-input:  10px;
  --md-r-button: 12px;
  --md-r-card:   16px;
  --md-r-tool:   20px;
  --md-r-large:  22px;

  --md-shadow-tool: 0 1px 2px rgba(20,22,26,.04), 0 18px 44px -22px rgba(20,22,26,.16);

  --md-ease: cubic-bezier(.2,.6,.3,1);
}

/* Brand variants: add class to <body> or a section wrapper */
.md-brand-purple { --md-accent:#6b46c9; --md-accent-dark:#4f3196; --md-accent-soft:#f2edfd; }
.md-brand-green  { --md-accent:#157a5b; --md-accent-dark:#0f5b44; --md-accent-soft:#e8f5f0; }


/* ============================================================
   1b. DARK MODE  —  same tokens, different values.
   Set by assets/theme-toggle.js on <html data-md-theme="dark">.
   Nothing below section 1b needs a dark-specific rule.
   ============================================================ */
html[data-md-theme="dark"] {
  --md-accent-soft:   #1a2440;

  --md-bg:            #0e1014;
  --md-surface:       #16191f;
  --md-surface-alt:   #1b1f26;
  --md-text:          #f2f4f6;
  --md-text-2:        #c9cfd6;
  --md-text-3:        #a3aab3;
  --md-muted:         #7d858f;
  --md-border:        #262b33;
  --md-border-strong: #333944;
  --md-divider:       #22262d;

  --md-success:       #4cba8b;
  --md-warning:       #d99b33;
  --md-error:         #e5786a;
  --md-info:          #5fa8cc;

  --md-shadow-tool: 0 1px 2px rgba(0,0,0,.4), 0 18px 44px -22px rgba(0,0,0,.7);
}
html[data-md-theme="dark"] { color-scheme: dark; }
html[data-md-theme="dark"] body,
html[data-md-theme="dark"] .md { background: var(--md-bg); color: var(--md-text); }

/* dark-mode surfaces that were hard-coded light in the patterns */
html[data-md-theme="dark"] .md-tool-slot__card,
html[data-md-theme="dark"] .md-tool,
html[data-md-theme="dark"] .md-card,
html[data-md-theme="dark"] .md-faq,
html[data-md-theme="dark"] .md-panel,
html[data-md-theme="dark"] .md-step__num { background: var(--md-surface); }
html[data-md-theme="dark"] .md-btn--secondary { background: var(--md-surface); color: var(--md-text); }
html[data-md-theme="dark"] .md-btn--dark { background: var(--md-surface-alt); color: var(--md-text); }
html[data-md-theme="dark"] .md-faq summary::after { background: var(--md-surface-alt); }
html[data-md-theme="dark"] .md-media,
html[data-md-theme="dark"] .md-result__thumb {
  background: repeating-linear-gradient(135deg, #1e2229 0 8px, #24282f 8px 16px);
}
html[data-md-theme="dark"] .md-alert--error { background:#2a1a19; border-color:#432724; }
html[data-md-theme="dark"] .md-alert--error .md-alert__title { color:#f0a79b; }
html[data-md-theme="dark"] .md-alert--error .md-alert__body  { color:#c99188; }
html[data-md-theme="dark"] .md-alert--warn  { background:#2a2317; border-color:#443925; }
html[data-md-theme="dark"] .md-alert--warn .md-alert__title { color:#e8bd74; }
html[data-md-theme="dark"] .md-alert--warn .md-alert__body  { color:#c2a173; }
html[data-md-theme="dark"] .md-note { border-color: #2c3550; }
html[data-md-theme="dark"] .md-cta { border: 1px solid var(--md-border); }
html[data-md-theme="dark"] .md-tool__input,
html[data-md-theme="dark"] .md-field input,
html[data-md-theme="dark"] .md-field select,
html[data-md-theme="dark"] .md-field textarea { background: var(--md-surface-alt); color: var(--md-text); }
html[data-md-theme="dark"] .md-tool__clear { background: var(--md-surface-alt); color: var(--md-text-3); }

/* ------------------------------------------------------------
   1b-ii. DARK MODE × KADENCE
   The parent theme paints its own containers and text from its
   palette, which is a light palette. Those elements sit outside
   every .md section, so the tokens above never reach them —
   without this block the page turns dark and the copy does not,
   and white bands appear between sections.
   ------------------------------------------------------------ */
html[data-md-theme="dark"] body,
html[data-md-theme="dark"] #wrapper,
html[data-md-theme="dark"] #inner-wrap,
html[data-md-theme="dark"] #main,
html[data-md-theme="dark"] #primary,
html[data-md-theme="dark"] .site,
html[data-md-theme="dark"] .site-container,
html[data-md-theme="dark"] .content-area,
html[data-md-theme="dark"] .content-container,
html[data-md-theme="dark"] .content-bg,
html[data-md-theme="dark"] .entry-content-wrap,
html[data-md-theme="dark"] .entry,
html[data-md-theme="dark"] .entry-content,
html[data-md-theme="dark"] .wp-site-blocks,
html[data-md-theme="dark"] .post-thumbnail,
html[data-md-theme="dark"] .comments-area,
html[data-md-theme="dark"] .entry-related { background-color: var(--md-bg); }

html[data-md-theme="dark"] body,
html[data-md-theme="dark"] .entry-content,
html[data-md-theme="dark"] .entry-content p,
html[data-md-theme="dark"] .entry-content li,
html[data-md-theme="dark"] .entry-content td,
html[data-md-theme="dark"] .entry-content th,
html[data-md-theme="dark"] .entry-content dd,
html[data-md-theme="dark"] .entry-content figcaption,
html[data-md-theme="dark"] .entry-meta,
html[data-md-theme="dark"] .entry-taxonomies { color: var(--md-text-2); }

/* Our own classed elements keep their token colours — this only
   catches the ones the parent theme was colouring. */
html[data-md-theme="dark"] .md-eyebrow { color: var(--md-accent); }
html[data-md-theme="dark"] .md-eyebrow--muted { color: var(--md-muted); }

html[data-md-theme="dark"] h1,
html[data-md-theme="dark"] h2,
html[data-md-theme="dark"] h3,
html[data-md-theme="dark"] h4,
html[data-md-theme="dark"] h5,
html[data-md-theme="dark"] h6,
html[data-md-theme="dark"] .entry-title,
html[data-md-theme="dark"] .entry-title a,
html[data-md-theme="dark"] .site-title,
html[data-md-theme="dark"] .site-title a,
html[data-md-theme="dark"] .widget-title,
html[data-md-theme="dark"] strong,
html[data-md-theme="dark"] .md-h1,
html[data-md-theme="dark"] .md-h2,
html[data-md-theme="dark"] .md-h3,
html[data-md-theme="dark"] .md-card__title { color: var(--md-text); }

html[data-md-theme="dark"] .entry-content a:not(.md-btn):not(.wp-block-button__link) { color: var(--md-accent); }
html[data-md-theme="dark"] hr,
html[data-md-theme="dark"] .entry-content table,
html[data-md-theme="dark"] .entry-content th,
html[data-md-theme="dark"] .entry-content td { border-color: var(--md-border); }
html[data-md-theme="dark"] input,
html[data-md-theme="dark"] textarea,
html[data-md-theme="dark"] select {
  background-color: var(--md-surface-alt); color: var(--md-text); border-color: var(--md-border-strong);
}
html[data-md-theme="dark"] ::placeholder { color: var(--md-muted); }
html[data-md-theme="dark"] .md-cta > div { background: none !important; color: #fff; }
html[data-md-theme="dark"] .md-cta .md-h2 { color: #fff; }
html[data-md-theme="dark"] img:not([src*=".svg"]) { filter: none; }

/* ============================================================
   1c. THEME TOGGLE BUTTON
   Place with the [md_theme_toggle] shortcode (Kadence header →
   add an HTML/shortcode item), or drop <button class="md-toggle">.
   ============================================================ */
.md-toggle {
  width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center;
  border: 1px solid var(--md-border-strong); border-radius: var(--md-r-input);
  background: var(--md-surface); color: var(--md-text); cursor: pointer; padding: 0;
  transition: background .12s var(--md-ease), border-color .12s var(--md-ease);
}
.md-toggle:hover { background: var(--md-surface-alt); border-color: var(--md-muted); }
.md-toggle svg { width: 18px; height: 18px; }
/* `.md-toggle svg` would outrank a bare `.md-toggle__sun`, leaving both
   icons on screen — keep the show/hide rules at the same specificity. */
.md-toggle .md-toggle__sun  { display: none; }
.md-toggle .md-toggle__moon { display: block; }
html[data-md-theme="dark"] .md-toggle .md-toggle__sun  { display: block; }
html[data-md-theme="dark"] .md-toggle .md-toggle__moon { display: none; }
.md-toggle--floating {
  position: fixed; right: 20px; bottom: 20px; z-index: 999;
  width: 46px; height: 46px; border-radius: 999px;
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.35);
}

/* ============================================================
   2. BASE
   ============================================================ */
body { color: var(--md-text); }
.md a { color: var(--md-accent); text-decoration: none; }
.md a:hover { color: var(--md-accent-dark); }

.md-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--md-accent); margin: 0 0 14px;
}
.md-eyebrow--muted { color: var(--md-muted); }

.md-h1 { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; margin: 0; text-wrap: balance; color: var(--md-text); }
.md-h2 { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.15; letter-spacing: -.025em; font-weight: 800; margin: 0; color: var(--md-text); }
.md-h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.015em; font-weight: 700; margin: 0; color: var(--md-text); }

/* Headings and unclassed body copy inside a section take their colour
   from the tokens rather than from the parent theme's palette — without
   this they stay near-black and vanish the moment dark mode is on. */
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { color: var(--md-text); }
.md p:not([class]), .md li:not([class]), .md dd, .md dt,
.md figcaption, .md td, .md th { color: var(--md-text-2); }
.md strong, .md b { color: var(--md-text); }
.md-lead { font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.55; color: var(--md-text-3); }
.md-prose { max-width: 68ch; font-size: 16.5px; line-height: 1.7; color: var(--md-text-2); }
.md-prose h2 { margin-top: 2em; }
.md-note {
  padding: 18px 20px; border-radius: 14px;
  background: var(--md-accent-soft); border: 1px solid color-mix(in srgb, var(--md-accent) 18%, #fff);
}

/* ============================================================
   3. BUTTONS
   ============================================================ */
.md-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px; border: 0; border-radius: var(--md-r-button);
  font-size: 15.5px; font-weight: 700; cursor: pointer;
  transition: background .12s var(--md-ease), transform .12s var(--md-ease), color .12s var(--md-ease);
}
.md-btn:active { transform: scale(.985); }
.md-btn--primary   { background: var(--md-accent); color: #fff; }
.md-btn--primary:hover { background: var(--md-accent-dark); color: #fff; }
.md-btn--secondary { background: #fff; color: var(--md-text); border: 1px solid var(--md-border-strong); }
.md-btn--secondary:hover { background: #f7f8f9; color: var(--md-text); }
.md-btn--ghost     { background: transparent; color: var(--md-text-3); }
.md-btn--ghost:hover { background: #f2f4f6; color: var(--md-text); }
.md-btn--dark      { background: var(--md-text); color: #fff; }
.md-btn--dark:hover { background: #2b2f36; color: #fff; }
.md-btn[disabled], .md-btn.is-busy { background: #a9bdee; cursor: default; }

/* Buttons rendered as links sit inside .entry-content, where Kadence's
   own `.entry-content a` rule (element+class) outranks a bare class and
   repaints the label in the palette link colour — invisible on a filled
   button. Same specificity here, stated last, so the button wins. */
a.md-btn--primary, .entry-content a.md-btn--primary,
a.md-btn--primary:hover, .entry-content a.md-btn--primary:hover,
a.md-btn--dark, .entry-content a.md-btn--dark,
a.md-btn--dark:hover, .entry-content a.md-btn--dark:hover { color: #fff; }
a.md-btn--secondary, .entry-content a.md-btn--secondary,
a.md-btn--secondary:hover, .entry-content a.md-btn--secondary:hover { color: var(--md-text); }
a.md-btn--ghost, .entry-content a.md-btn--ghost { color: var(--md-text-3); }
a.md-btn, .entry-content a.md-btn { text-decoration: none; }

/* ============================================================
   4. DOWNLOADER TOOL
   ============================================================ */
/* The slot every pattern places via [md_downloader]. It owns the width and
   centring so a third-party plugin form lands exactly where ours did. */
.md-tool-slot { max-width: 780px; margin-inline: auto; }
.md-tool-slot .md-tool { max-width: none; }

/* A plugin's own form won't have .md-tool, so the slot draws the card for it —
   on an inner wrapper, not the slot, so the trust chips land inside the card
   and the rights line stays outside and under it, as our own form does. */
.md-tool-slot__card {
  border: 1px solid var(--md-border); border-radius: var(--md-r-tool);
  background: var(--md-surface); box-shadow: var(--md-shadow-tool);
  padding: 26px;
}
/* Unless the plugin already draws its own card — opt out with this class. */
.md-tool-slot.is-bare .md-tool-slot__card {
  border: 0; background: none; box-shadow: none; padding: 0;
}
/* Generic nudges for a third-party form we know nothing about. Scoped away
   from the ASD widget, which asd-bridge.css themes properly instead. */
.md-tool-slot--override input[type="url"],
.md-tool-slot--override input[type="text"] {
  border-radius: var(--md-r-input);
}
.md-tool-slot--override button,
.md-tool-slot--override input[type="submit"],
.md-tool-slot--override a.button {
  border-radius: var(--md-r-button);
}

.md-tool {
  border: 1px solid var(--md-border); border-radius: var(--md-r-tool);
  background: var(--md-surface); box-shadow: var(--md-shadow-tool);
  padding: 26px; max-width: 780px; margin-inline: auto;
}
.md-tool__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.md-tool__label { font-size: 14px; font-weight: 700; }
.md-tool__hint { font-size: 12.5px; color: var(--md-muted); }
.md-tool__row { display: flex; gap: 10px; flex-wrap: wrap; }
.md-tool__field { position: relative; flex: 1 1 320px; min-width: 240px; }
.md-tool__input {
  width: 100%; height: 56px; padding: 0 44px 0 16px;
  border-radius: var(--md-r-button); border: 1px solid var(--md-border-strong);
  background: var(--md-surface-alt); font: inherit; font-size: 15.5px; color: var(--md-text);
  transition: border-color .15s var(--md-ease), box-shadow .15s var(--md-ease), background .15s var(--md-ease);
}
.md-tool__input:focus {
  outline: none; background: var(--md-surface); color: var(--md-text);
  border-color: var(--md-accent); box-shadow: 0 0 0 4px var(--md-accent-soft);
}
.md-tool__clear {
  position: absolute; right: 12px; top: 16px; width: 24px; height: 24px;
  border: 0; border-radius: 999px; background: #eceff2; color: var(--md-text-3);
  font-size: 14px; line-height: 1; cursor: pointer; display: none;
}
.md-tool.has-value .md-tool__clear { display: block; }
.md-tool__submit { flex: 0 0 auto; }

.md-tool__trust { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 18px; font-size: 13.5px; font-weight: 600; color: var(--md-text-3); }
.md-tool__trust span::before { content: "✓"; color: var(--md-success); font-weight: 800; margin-right: 7px; }
.md-tool__fineprint { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: var(--md-muted); }

.md-tool__panel { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--md-divider); }
.md-tool__panel[hidden] { display: none; }

.md-progress { margin-top: 12px; height: 3px; border-radius: 999px; background: #eceff2; overflow: hidden; }
.md-progress i { display: block; width: 30%; height: 100%; border-radius: 999px; background: var(--md-accent); animation: md-bar 1.1s ease-in-out infinite; }
@keyframes md-bar { 0% { transform: translateX(-100%);} 100% { transform: translateX(320%);} }
.md-processing { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--md-text-3); }
.md-processing::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--md-accent); animation: md-pulse 1s ease-in-out infinite; }
@keyframes md-pulse { 0%,100%{opacity:.35} 50%{opacity:1} }

.md-result { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.md-result__thumb { width: 76px; height: 104px; border-radius: 10px; border: 1px solid var(--md-border); background: repeating-linear-gradient(135deg,#f2f4f6 0 6px,#e8ebee 6px 12px); flex: none; }
.md-result__meta { flex: 1 1 200px; min-width: 180px; }
.md-result__title { font-size: 15.5px; font-weight: 700; }
.md-result__sub { margin-top: 4px; font-size: 13.5px; color: var(--md-muted); }

.md-alert { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; margin-top: 16px; }
.md-alert__title { font-size: 14px; font-weight: 700; }
.md-alert__body { margin-top: 3px; font-size: 13.5px; line-height: 1.5; }
.md-alert--error   { background:#fdf3f2; border:1px solid #f6dcd8; }
.md-alert--error .md-alert__title { color:#8f2a1e; } .md-alert--error .md-alert__body { color:#9a5248; }
.md-alert--warn    { background:#fdf9ef; border:1px solid #f2e4c6; }
.md-alert--warn .md-alert__title { color:#8a5504; } .md-alert--warn .md-alert__body { color:#97672a; }
.md-alert--empty   { background: var(--md-surface-alt); border:1px dashed var(--md-border-strong); }

/* ============================================================
   5. CARDS / STEPS / FAQ
   ============================================================ */
.md-card {
  padding: 24px; border: 1px solid var(--md-border); border-radius: var(--md-r-card);
  background: var(--md-surface); transition: border-color .18s var(--md-ease), transform .18s var(--md-ease);
  height: 100%;
}
a.md-card { display: block; color: var(--md-text); }
.md-card:hover { border-color: #d3d8dd; transform: translateY(-2px); }
a.md-card:hover { border-color: var(--md-accent); color: var(--md-text); }
.md-card__icon { width: 38px; height: 38px; border-radius: 11px; background: var(--md-accent-soft); display: grid; place-items: center; }
.md-card__title { margin: 16px 0 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; color: var(--md-text); }
.md-card__text { margin: 7px 0 0; font-size: 14px; line-height: 1.55; color: var(--md-text-3); }

.md-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.md-media { aspect-ratio: 16 / 10; background: repeating-linear-gradient(135deg,#f2f4f6 0 8px,#e9ecef 8px 16px); display: grid; place-items: center; }
.md-media span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: #9aa1aa; }

.md-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.md-steps::before { content: ""; position: absolute; top: 19px; left: 16%; right: 16%; height: 1px; background: #dfe3e8; }
.md-step { position: relative; text-align: center; padding: 0 20px; }
.md-step__num { width: 38px; height: 38px; margin: 0 auto; border-radius: 999px; background: #fff; border: 1px solid #dfe3e8; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--md-accent); }
.md-step h3 { margin: 18px 0 0; font-size: 17px; font-weight: 700; }
.md-step p { margin: 7px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--md-text-3); }

.md-faq { border: 1px solid var(--md-border); border-radius: var(--md-r-card); overflow: hidden; background: #fff; }
.md-faq details { border-top: 1px solid var(--md-divider); }
.md-faq details:first-child { border-top: 0; }
.md-faq summary {
  list-style: none; cursor: pointer; padding: 20px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-size: 16px; font-weight: 650;
}
.md-faq summary::-webkit-details-marker { display: none; }
.md-faq summary:hover { background: var(--md-surface-alt); }
.md-faq summary::after {
  content: "+"; flex: none; width: 26px; height: 26px; border-radius: 8px;
  background: #f2f4f6; color: var(--md-text-3); font-size: 16px; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}
.md-faq details[open] summary::after { content: "–"; background: var(--md-accent-soft); color: var(--md-accent); }
.md-faq details p { margin: 0; padding: 0 22px 22px; max-width: 68ch; font-size: 15.5px; line-height: 1.65; color: var(--md-text-3); }

/* ============================================================
   6. RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  .md-tool { padding: 18px; border-radius: 18px; }
  .md-tool-slot__card { padding: 18px; border-radius: 18px; }
  .md-tool__row { flex-direction: column; }
  .md-tool__submit { width: 100%; }
  .md-tool__trust { display: grid; gap: 8px; }
  .md-steps { grid-template-columns: 1fr; gap: 0; }
  .md-steps::before { top: 0; bottom: 0; left: 19px; right: auto; width: 1px; height: auto; }
  .md-step { text-align: left; display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 0 0 22px; }
  .md-step__num { margin: 0; }
  .md-step h3 { margin: 6px 0 0; grid-column: 2; }
  .md-step p { grid-column: 2; }
  .md-btn { width: 100%; }
  .md-cta .md-btn { width: auto; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .md-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .md-feature-grid { grid-template-columns: 1fr; gap: 14px; }
  .md-card { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   7. PAGE-PATTERN COMPONENTS
   (About, FAQ page, Contact, Blog, Legal, Tool page)
   ============================================================ */
.md-group-label {
  margin: 44px 0 14px; font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--md-muted);
}
.md-meta { font-size: 12.5px; color: var(--md-muted); }
.md-panel {
  padding: 22px; border: 1px solid var(--md-border);
  border-radius: var(--md-r-card); background: var(--md-surface-alt);
}
.md-panel--plain { background: transparent; }
.md-panel .md-btn { display: inline-flex; }

.md-split { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 56px; align-items: start; }
.md-split--tool  { grid-template-columns: minmax(0,1fr) 320px; gap: 48px; margin-top: 24px; }
.md-split--legal { grid-template-columns: 220px minmax(0,1fr); }
.md-sticky { position: sticky; top: 120px; display: grid; gap: 14px; }

.md-aside-list { margin-top: 14px; display: grid; gap: 14px; font-size: 14.5px; line-height: 1.5; }
.md-aside-list strong { display: block; font-weight: 650; }
.md-aside-list--links { gap: 12px; font-weight: 600; }
.md-aside-list--links a { color: var(--md-text); }
.md-aside-list--links a:hover { color: var(--md-accent); }

/* ---------- Legal / policy pages ---------- */
.md-legal-head { max-width: 1000px; margin-inline: auto; }
.md-legal-head .md-h1, .md-legal-head .md-h2 { margin: 0; }
.md-legal__updated { margin: 12px 0 0; font-size: 13.5px; color: var(--md-muted); }
.md-legal__intro { margin: 18px 0 0; max-width: 62ch; }

.md-legal-nav {
  position: sticky; top: 120px; display: grid; gap: 2px;
  padding: 16px; border: 1px solid var(--md-border);
  border-radius: var(--md-r-card); background: var(--md-surface);
  font-size: 14.5px;
}
.md-legal-nav .md-group-label { margin: 2px 0 10px; padding-inline: 12px; }
.md-legal-nav a,
.entry-content .md-legal-nav a {
  display: block; padding: 9px 12px; border-radius: var(--md-r-input);
  color: var(--md-text-3) !important; text-decoration: none;
}
.md-legal-nav a:hover,
.entry-content .md-legal-nav a:hover {
  background: var(--md-surface-alt); color: var(--md-text) !important;
}
.md-legal-nav a.is-current,
.entry-content .md-legal-nav a.is-current {
  background: var(--md-accent-soft); color: var(--md-accent-dark) !important; font-weight: 650;
}
html[data-md-theme="dark"] .md-legal-nav a.is-current,
html[data-md-theme="dark"] .entry-content .md-legal-nav a.is-current { color: var(--md-text) !important; }

.md-prose--legal { max-width: 72ch; }
.md-prose--legal > * { margin-block: 1.05em; }
.md-prose--legal h2 {
  font-size: 20px; font-weight: 750; letter-spacing: -.015em; color: var(--md-text);
  margin-top: 2.2em; padding-top: 1em; border-top: 1px solid var(--md-divider);
}
.md-prose--legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.md-prose--legal ul { margin: 1em 0; padding-left: 20px; display: grid; gap: 8px; }
.md-prose--legal a { color: var(--md-accent); }
.md-legal-foot {
  margin-top: 44px; padding: 20px 22px;
  border: 1px solid var(--md-border); border-radius: var(--md-r-card);
  background: var(--md-surface-alt);
  font-size: 14.5px; line-height: 1.6; color: var(--md-text-3);
}
.md-legal-foot strong { display: block; margin-bottom: 4px; color: var(--md-text); }

.md-breadcrumb { display: flex; gap: 8px; padding: 14px 0; font-size: 13px; color: var(--md-muted); }
.md-breadcrumb a { color: var(--md-muted); }
.md-breadcrumb [aria-current] { color: var(--md-text); }

.md-ministeps { margin-top: 12px; display: grid; gap: 10px; font-size: 14px; color: var(--md-text-3); }

/* Forms */
.md-form { display: grid; gap: 18px; }
.md-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.md-field { display: block; }
.md-field > span { display: block; font-size: 13px; font-weight: 650; margin-bottom: 7px; }
.md-field input, .md-field select, .md-field textarea {
  width: 100%; border: 1px solid var(--md-border-strong); border-radius: 11px;
  background: var(--md-surface-alt); font: inherit; font-size: 15px; color: var(--md-text);
  padding: 0 14px; height: 50px;
  transition: border-color .15s var(--md-ease), box-shadow .15s var(--md-ease);
}
.md-field textarea { height: auto; padding: 14px; line-height: 1.6; resize: vertical; }
.md-field input:focus, .md-field select:focus, .md-field textarea:focus {
  outline: none; border-color: var(--md-accent); box-shadow: 0 0 0 4px var(--md-accent-soft);
}
.md-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--md-text-3); }
.md-check input { width: 18px; height: 18px; accent-color: var(--md-accent); }
.md-form .md-btn { justify-self: start; }

/* Blog (Query Loop) */
.md-chips ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.md-chips li a {
  display: inline-flex; align-items: center; height: 34px; padding: 0 15px;
  border: 1px solid var(--md-border); border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--md-text-3);
}
.md-chips li a:hover { border-color: var(--md-accent); color: var(--md-accent); }
/* Post cards. The card owns one padding box, so every child lines up on the
   same left edge no matter what margin shorthand it carries; the cover image
   is the only thing that breaks out of it. The two variable-length runs are
   clamped and the date is pinned to the floor, so a three-up row reads as one
   grid whatever the editor wrote. */
.md-card--post {
  padding: 24px; overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
  transition: border-color .14s var(--md-ease), box-shadow .14s var(--md-ease);
}
.md-card--post > * { margin-inline: 0; }
.md-card--post > .wp-block-post-featured-image {
  margin: -24px -24px 20px; background: var(--md-surface-alt); line-height: 0;
}
.md-card--post > .wp-block-post-featured-image:empty { display: none; }
.md-card--post img { border-radius: 0; }
.md-card--post .wp-block-post-featured-image img {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
}
.md-card--post .md-eyebrow {
  margin: 0 0 10px; font-size: 11px; line-height: 1; letter-spacing: .13em;
}
.md-card--post .md-card__title {
  margin: 0; font-size: 17.5px; line-height: 1.34; letter-spacing: -.018em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.md-card--post .md-card__title a,
.entry-content .md-card--post .md-card__title a {
  color: var(--md-text) !important; text-decoration: none;
}
.md-card--post .md-card__title a:hover,
.entry-content .md-card--post .md-card__title a:hover { color: var(--md-accent) !important; }
.md-card--post .md-card__text {
  margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--md-text-3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.md-card--post .md-meta {
  margin: auto 0 0; padding-top: 16px;
  border-top: 1px solid var(--md-divider);
  font-size: 12.5px; color: var(--md-muted);
}
.md-card--post:hover {
  border-color: var(--md-border-strong);
  box-shadow: 0 1px 2px rgba(20,22,26,.04), 0 14px 32px -20px rgba(20,22,26,.22);
}
/* The post template is a list; strip the list chrome and set the card gutter. */
.wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.wp-block-post-template.is-layout-grid { gap: 22px; align-items: stretch; }
.wp-block-post-template.is-layout-grid > li { display: flex; }
.wp-block-post-template.is-layout-grid > li > .md-card--post { width: 100%; }

/* Section head: heading on the left, "all articles" on the right. */
.md-sec__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px 24px; flex-wrap: wrap;
}
.md-sec__head > * { margin: 0 !important; }
.md-sec__more { margin: 0; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.md-sec__more a { color: var(--md-accent); text-decoration: none; }

/* ------------------------------------------------------------
   Single post — the article is rendered by the parent theme, so
   these style what inc/single-post.php adds around it.
   ------------------------------------------------------------ */
.md-article__top { margin-bottom: 18px; }
.md-prose--article { margin-inline: auto; }
.md-article__meta {
  max-width: 68ch; margin: 28px auto 0; padding-top: 16px;
  border-top: 1px solid var(--md-divider);
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
  font-size: 13.5px; color: var(--md-muted);
}
.md-postfoot { max-width: 1240px; margin: 48px auto 0; }
.md-postfoot__author { max-width: 68ch; margin-inline: auto; }
.md-related { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--md-divider); }
.md-related__title { font-size: 24px; }
.md-related__grid {
  margin-top: 22px; display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.md-related__grid .md-card--post { display: block; text-decoration: none; }
.md-related__grid .md-card__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin: 0; }
.md-related__grid .md-card__body { display: block; padding: 18px 20px 20px; }
.md-related__grid .md-eyebrow { display: block; margin-bottom: 8px; }
.md-related__grid .md-card__title { display: block; margin: 0; }
.md-related__grid .md-meta { display: block; margin-top: 12px; }
.md-article__cta {
  margin-top: 40px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.md-article__cta strong { font-size: 16px; }
.md-article__cta p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--md-text-3); }
.md-article__cta .md-btn { flex: none; }
.md-featured {
  padding: 28px; border: 1px solid var(--md-border);
  border-radius: var(--md-r-tool); background: var(--md-surface-alt);
}
.md-pagination { margin-top: 36px; gap: 6px; font-size: 14.5px; font-weight: 600; }
.md-byline {
  margin-top: 24px; padding: 16px 0; gap: 12px; align-items: center;
  border-top: 1px solid var(--md-divider); border-bottom: 1px solid var(--md-divider);
}
.md-prose--article { font-size: 17.5px; line-height: 1.75; }
.md-prose--article > * { margin-block: 1.1em; }
.md-prose--article h2 { font-size: 26px; letter-spacing: -.02em; font-weight: 800; margin-top: 1.8em; }
.md-prose--article h3 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; margin-top: 1.6em; }

@media (max-width: 1024px) {
  .md-split, .md-split--tool, .md-split--legal { grid-template-columns: 1fr; gap: 36px; }
  .md-sticky, .md-legal-nav { position: static; }
  .md-legal-nav { display: flex; gap: 4px; flex-wrap: wrap; }
  .md-legal-nav .md-group-label { flex: 1 0 100%; }
}
@media (max-width: 767px) {
  .md-form__row { grid-template-columns: 1fr; }
  .md-featured { padding: 18px; }
}

/* ============================================================
   8. ICON SYSTEM
   One box, one stroke weight, one colour source. Icons never
   carry their own colour — they inherit from their container,
   so the same icon works in a button, a card and a dark header.
   ============================================================ */
.md-icon {
  display: block; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.md-icon--sm { stroke-width: 1.8; }
.md-icon--lg { stroke-width: 1.5; }

/* Icon wells: the tinted square behind a card or feature icon. */
.md-icon-well {
  width: 38px; height: 38px; flex: none;
  border-radius: 11px; display: grid; place-items: center;
  background: var(--md-accent-soft); color: var(--md-accent);
}
.md-icon-well--sm { width: 34px; height: 34px; border-radius: 10px; }
.md-icon-well--neutral { background: var(--md-fill, var(--md-surface-alt)); color: var(--md-text-3); }
.md-card__icon { /* legacy alias, same treatment */
  background: var(--md-accent-soft); color: var(--md-accent);
  display: grid; place-items: center;
}

/* Icons sitting inline with text */
.md-inline-icon { display: inline-flex; align-items: center; gap: 8px; }
.md-btn .md-icon { margin-right: 8px; margin-left: -2px; }
.md-btn--icon-only { width: 52px; padding: 0; }
.md-btn--icon-only .md-icon { margin: 0; }

/* Trust row uses real icons rather than a ::before glyph when available */
.md-tool__trust .md-icon { color: var(--md-success); }
.md-tool__trust span.has-icon::before { content: none; }

/* ============================================================
   9. SECTION RHYTHM + DENSITY
   .md-sec marks a full-width page section. It owns the vertical
   rhythm (so --md-density actually rescales it, overriding the
   inline padding the block editor writes) and the alternating
   surface, which is token-driven so dark mode follows.
   ============================================================ */
.md > section, section.md {
  padding-block: calc(72px * var(--md-density, 1));
}
section.md-sec, .md-sec {
  padding-block: calc(76px * var(--md-density, 1)) !important;
  border-bottom: 1px solid var(--md-divider);
}
section.md-sec--alt, .md-sec--alt { background: var(--md-surface-alt); }
section.md-sec--wash, .md-sec--wash {
  background: linear-gradient(var(--md-surface-alt), var(--md-surface));
}

/* ============================================================
   9c. KADENCE PAGE SHELL
   The parent theme wraps page content in its own container with a
   max-width, edge gutters, a hero title area and per-block margins.
   Pages built from these patterns are full-bleed bands that already
   own all four, so on those pages only (body.md-page, set in
   functions.php) the shell steps out of the way. Posts and any page
   not built from the patterns keep Kadence's layout untouched.
   ============================================================ */
body.md-page .content-container,
body.md-page .content-area,
body.md-page .site-main,
body.md-page .entry-content {
  max-width: none !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
body.md-page .content-area,
body.md-page .site-main {
  margin-top: 0 !important; margin-bottom: 0 !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
}
/* Sections butt up against each other — .md-sec owns the rhythm. */
body.md-page .entry-content > * { margin-block: 0 !important; }
body.md-page .entry-content > .md,
body.md-page .entry-content > section.md { max-width: none; }
/* Every pattern supplies its own h1, so Kadence's title area repeats it. */
body.md-page .entry-hero-container-inner,
body.md-page .page-title,
body.md-page .entry-header,
body.md-page .content-area > .entry-hero-container { display: none; }
/* Nothing full-bleed should be able to push a horizontal scrollbar. */
body.md-page .site { overflow-x: clip; }

/* ============================================================
   9b. HEADER — align Kadence's chrome with the system
   The dark-mode switch is injected as the last primary-menu
   item (see functions.php), so no shortcode setup is needed.
   ============================================================ */
#masthead,
#masthead .site-header-wrap,
#masthead .site-header-inner-wrap,
#masthead .site-header-upper-wrap,
#masthead .site-header-upper-inner-wrap,
#masthead .site-main-header-wrap,
#masthead .site-header-row-container-inner,
#masthead .site-container,
#masthead .site-main-header-inner-wrap { background: var(--md-surface) !important; }
#masthead { border-bottom: 1px solid var(--md-divider); }
#masthead .site-branding .site-title,
#masthead .site-title a {
  font-family: var(--md-font-heading, inherit);
  font-weight: 800; letter-spacing: -.02em;
}
#masthead .header-navigation .header-menu-container > ul > li > a,
#masthead .primary-menu-container > ul > li > a {
  font-family: var(--md-font-body, inherit);
  font-size: 14.5px; font-weight: 600; color: var(--md-text-3);
}
#masthead .header-navigation .header-menu-container > ul > li.current-menu-item > a,
#masthead .header-navigation .header-menu-container > ul > li > a:hover { color: var(--md-text); }
#masthead .header-navigation .header-menu-container > ul > li.md-menu-item--toggle {
  display: flex; align-items: center; margin-left: 6px;
}
.md-menu-item--toggle > .md-toggle { margin: 0; }
html[data-md-theme="dark"] #masthead,
html[data-md-theme="dark"] #colophon,
html[data-md-theme="dark"] .site-footer-row-container-inner { background: var(--md-surface); color: var(--md-text); }
html[data-md-theme="dark"] #colophon .site-container,
html[data-md-theme="dark"] #colophon .site-footer-row { background: var(--md-surface) !important; }
html[data-md-theme="dark"] #masthead a,
html[data-md-theme="dark"] #colophon a { color: var(--md-text-2); }

/* ============================================================
   10. BRAND-CONFIG FALLBACKS
   brand.css can set these; the system supplies a default so a
   deleted line never breaks the design.
   ============================================================ */
.md, .md-tool, .md-card, .md-btn, .md-field input, .md-field select, .md-field textarea {
  font-family: var(--md-font-body, inherit);
}
.md-h1, .md-h2, .md-h3, .md-prose h2, .md-prose h3, .md-card__title {
  font-family: var(--md-font-heading, var(--md-font-body, inherit));
}

/* The wizard's typeface applies site-wide, not only inside .md
   sections — Kadence sets its own family on body and headings,
   so these need the weight of !important to land. */
body.md-typeface,
body.md-typeface button,
body.md-typeface input,
body.md-typeface select,
body.md-typeface textarea,
body.md-typeface .entry-content,
body.md-typeface .header-navigation a { font-family: var(--md-font-body, inherit) !important; }
body.md-typeface h1, body.md-typeface h2, body.md-typeface h3,
body.md-typeface h4, body.md-typeface h5, body.md-typeface h6,
body.md-typeface .site-title { font-family: var(--md-font-heading, var(--md-font-body, inherit)) !important; }

/* ============================================================
   11. FOCUS VISIBILITY  (accessibility baseline)
   ============================================================ */
.md a:focus-visible,
.md-btn:focus-visible,
.md-toggle:focus-visible,
.md-faq summary:focus-visible,
.md-chips li a:focus-visible {
  outline: 2px solid var(--md-accent);
  outline-offset: 2px;
  border-radius: var(--md-r-input);
}
.md-faq summary:focus-visible { outline-offset: -2px; }

/* Skip the accent outline where a ring is already drawn */
.md-tool__input:focus-visible { outline: none; }

/* Screen-reader-only utility */
.md-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   12. PRINT
   Legal pages and articles are the ones people actually print.
   ============================================================ */
@media print {
  .md-toggle, .md-tool, .md-cta, .md-related, .md-chips, .md-pagination { display: none !important; }
  .md, .md-prose { color: #000; }
  .md-prose a::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; }
  .md-faq details { break-inside: avoid; }
  .md-faq details > p { display: block !important; }
}