/*
Theme Name:  Dad With A Gym Child
Theme URI:   https://dadwithagym.com
Description: Child theme for Dad With A Gym — "The Plate" (Direction 1b). Slate-blue primary with a warm brick-red accent on a linen ground. Built on the Kadence parent theme. All brand tokens live as CSS variables at the top of this file; change a color once and it cascades everywhere. Follows Brand HQ Web Development Standards v1.1.
Author:      Brand HQ · Kara Hudson
Template:    kadence
Version:     1.0.0
Text Domain: dadwithagym-child
*/

/* ==========================================================================
   1. DESIGN TOKENS  —  the single source of truth
   Edit values HERE, not scattered through the file. If a value shows up more
   than once on the site, it belongs here as a variable.
   Palette + type + spacing lifted from the locked DWG brand guidelines.
   ========================================================================== */
:root {

  /* ---- Brand colors (locked · from DWG Brand Guidelines) ---------------- */
  --dwg-slate:        #4A6474; /* PRIMARY — panels, labels, active states, links */
  --dwg-deep-slate:   #2E4A5A; /* dark panels, footer, hero/section backgrounds */
  --dwg-brick:        #9C4433; /* WARM ACCENT — rules, buttons, emphasis. NOT terracotta. */
  --dwg-espresso:     #26201C; /* headlines, dark ground, the monogram disc */
  --dwg-linen:        #F4EDE3; /* light ground, on-dark type */
  --dwg-slate-pale:   #D4E0E8; /* subtext, tints, on-dark labels */

  /* Interaction states (darkened for hover/press) */
  --dwg-brick-hover:  #833629;
  --dwg-slate-hover:  #3D5462;
  --dwg-slate-active: #324450;

  /* Neutrals / lines */
  --dwg-linen-2:      #ECE2D3; /* card edges, subtle fills on linen */
  --dwg-border:       #E1D7C8; /* neutral hairline border on linen */
  --dwg-hairline:     rgba(156, 68, 51, 0.55); /* brick hairline rule */
  --dwg-text-body:    #3A332E; /* espresso softened for long-form reading */

  /* ---- Semantic aliases (use these in rules; repaint the brand above) --- */
  --color-bg:          var(--dwg-linen);
  --color-surface:     #FFFFFF;
  --color-panel:       var(--dwg-deep-slate);
  --color-ink:         var(--dwg-espresso);
  --color-body:        var(--dwg-text-body);
  --color-muted:       var(--dwg-slate);
  --color-on-dark:     var(--dwg-linen);
  --color-on-slate:    #EAF1F6;
  --color-primary:     var(--dwg-slate);
  --color-accent:      var(--dwg-brick);
  --color-accent-hover:var(--dwg-brick-hover);
  --color-border:      var(--dwg-border);

  /* ---- Type families ---------------------------------------------------- */
  --font-display:  "Cormorant SC", Georgia, "Times New Roman", serif;  /* wordmark, DWG monogram, section titles — small caps */
  --font-headline: "Cormorant Garamond", Georgia, serif;               /* hero lines, pull quotes — 300 light italic */
  --font-body:     "Lora", Georgia, "Times New Roman", serif;          /* reading, nav, labels */

  /* Weights */
  --fw-headline: 300;
  --fw-display:  400;
  --fw-body:     400;
  --fw-body-med: 500;
  --fw-label:    600;

  /* Tracking */
  --track-wordmark: 0.13em; /* DAD WITH A GYM */
  --track-label:    0.18em; /* uppercase Lora labels, taglines */
  --track-title:    0.06em; /* Cormorant SC section titles */

  /* Type scale (fluid where useful) */
  --fs-hero:  clamp(3rem, 6vw, 5.25rem);      /* Cormorant Garamond italic hero */
  --fs-h1:    clamp(2.25rem, 4vw, 3.25rem);
  --fs-h2:    clamp(1.75rem, 2.6vw, 2.25rem);
  --fs-h3:    1.5rem;
  --fs-title: 1rem;        /* small-caps section title */
  --fs-lead:  1.3rem;
  --fs-body:  1.0625rem;   /* 17px base reading size */
  --fs-small: 0.9375rem;   /* 15px */
  --fs-label: 0.75rem;     /* 12px uppercase label */

  /* Line heights */
  --lh-tight:   1.12;
  --lh-heading: 1.2;
  --lh-body:    1.7;

  /* ---- Spacing scale (base 4px) ---------------------------------------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;   --space-6: 2rem;    --space-7: 3rem;    --space-8: 4rem;
  --space-9: 6rem;     --space-10: 8rem;

  /* ---- Layout ----------------------------------------------------------- */
  --measure: 65ch;
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* ---- Effects ---------------------------------------------------------- */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(38, 32, 28, 0.05);
  --shadow-sm: 0 2px 8px rgba(38, 32, 28, 0.06);
  --shadow-md: 0 8px 28px rgba(38, 32, 28, 0.09);
  --shadow-lg: 0 18px 50px rgba(38, 32, 28, 0.12);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
}

/* Map DWG tokens onto Kadence's own global variables so the block editor,
   buttons, and headings inherit the brand without per-element overrides. */
:root {
  --global-palette1: var(--dwg-slate);        /* Kadence "primary accent" */
  --global-palette2: var(--dwg-brick);        /* Kadence "secondary accent" */
  --global-palette3: var(--dwg-espresso);     /* strongest text */
  --global-palette4: var(--dwg-text-body);    /* body text */
  --global-palette5: var(--dwg-slate);        /* medium text */
  --global-palette6: var(--dwg-border);       /* borders */
  --global-palette7: var(--dwg-linen-2);      /* subtle background */
  --global-palette8: var(--dwg-linen);        /* base background */
  --global-palette9: var(--dwg-linen);
}

/* ==========================================================================
   2. GLOBAL TYPOGRAPHY
   ========================================================================== */
body {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-body);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  color: var(--color-ink);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-title);
}

h1, .entry-title { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* Hero / pull-quote lines: Cormorant Garamond, light italic */
.dwg-hero, .is-style-dwg-hero, blockquote p {
  font-family: var(--font-headline);
  font-weight: var(--fw-headline);
  font-style: italic;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  color: var(--color-ink);
}

.entry-content p { max-width: var(--measure); }
.entry-content { font-size: var(--fs-body); }
.lead, .entry-content > p:first-of-type { font-size: var(--fs-lead); }

/* ==========================================================================
   3. LINKS
   ========================================================================== */
a { color: var(--color-accent); text-decoration: none; }
a:hover, a:focus { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 3px; }

.entry-content a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ==========================================================================
   4. BUTTONS  (WordPress core, Kadence, and helper class .dwg-btn)
   ========================================================================== */
.wp-block-button__link,
.kb-button,
.button,
button.wp-block-button__link,
input[type="submit"],
.dwg-btn {
  font-family: var(--font-body);
  font-weight: var(--fw-label);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--dwg-espresso);
  background-color: var(--color-accent);
  border: none;
  border-radius: var(--radius-md);
  padding: 0.9em 1.9em;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.wp-block-button__link:hover,
.kb-button:hover,
.button:hover,
input[type="submit"]:hover,
.dwg-btn:hover {
  background-color: var(--color-accent-hover);
  color: var(--dwg-linen);
  transform: translateY(-1px);
}

/* Secondary / outline button — slate, for lower-emphasis actions */
.is-style-outline .wp-block-button__link,
.dwg-btn--slate {
  background-color: var(--color-primary);
  color: var(--dwg-linen);
}
.is-style-outline .wp-block-button__link:hover,
.dwg-btn--slate:hover { background-color: var(--dwg-slate-hover); }

/* ==========================================================================
   5. NAVIGATION / HEADER
   ========================================================================== */
.site-title, .site-branding a {
  font-family: var(--font-display);
  letter-spacing: var(--track-wordmark);
  text-transform: uppercase;
  color: var(--color-ink);
}
.main-navigation a, .header-navigation a {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--color-ink);
}
.main-navigation .current-menu-item > a,
.main-navigation a:hover { color: var(--color-primary); }

/* Active-state underline in brick */
.main-navigation .current-menu-item > a { box-shadow: inset 0 -2px 0 var(--color-accent); }

/* ==========================================================================
   6. COMPONENTS
   ========================================================================== */

/* Eyebrow / kicker label — uppercase Lora in brick */
.dwg-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-label);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Brick hairline rule — the signature divider */
.dwg-rule { width: 120px; height: 1px; background: var(--color-accent); border: 0; margin: var(--space-5) 0; }

/* Dark panel utility — deep-slate section, on-dark text */
.dwg-panel {
  background: var(--color-panel);
  color: var(--color-on-slate);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--gutter);
}
.dwg-panel h1, .dwg-panel h2, .dwg-panel h3 { color: var(--color-on-dark); }
.dwg-panel .dwg-eyebrow { color: var(--dwg-slate-pale); }

/* Card on linen */
.dwg-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

/* Round DWG monogram bug (espresso disc, brick ring) — reusable brand mark */
.dwg-monogram {
  display: inline-flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: var(--radius-pill);
  background: var(--dwg-espresso);
  box-shadow: inset 0 0 0 5px var(--dwg-brick), inset 0 0 0 6px rgba(0,0,0,0.28);
  font-family: var(--font-display); font-weight: 600; font-size: 1.4rem;
  letter-spacing: 0.04em; color: var(--dwg-linen);
}

/* ==========================================================================
   7. PAGE-SPECIFIC OVERRIDES
   (add homepage / archive / single-post rules here as the site grows)
   ========================================================================== */

/* Category-tinted accents — enabled by the body_class hook in functions.php.
   Example: give workout-log posts a slate title bar.
   body.cat-workouts .entry-title { ... }  */

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */
@media (max-width: 782px) {
  :root { --fs-body: 1rem; }
  .dwg-panel { padding: var(--space-7) var(--space-5); }
}

/* ==========================================================================
   9. PRINT
   ========================================================================== */
@media print {
  a { color: #000; text-decoration: underline; }
  .dwg-panel { background: #fff; color: #000; }
  .main-navigation, .site-footer { display: none; }
}