/* =================================================================
   PAVED THEME OVERRIDES
   All brand changes live here. Dark mode is disabled in functions.php
   (color_scheme forced to light + toggle removed), so this file only
   needs to retune the light palette + shapes.

   Cascade note: the Customizer injects --cs-light-* vars at :root
   specificity (0,1,0). We use a doubled :root:root selector (0,2,0)
   so these overrides win regardless of stylesheet load order.
   ================================================================= */

/* 1. BRAND COLOR TOKENS
   Override the light-prefixed source variables; the semantic
   --cs-color-* vars in :root pick these up automatically. */

:root:root {
  /* Interactive accent: blue #0d6eff -> Paved purple */
  --cs-light-accent-color:            #9159ff;

  /* Button hover (from brand guide .btn-primary): bg purple-300, text stays
     dark (neutral-950). Active deepens to purple-400 (see section 4 below). */
  --cs-light-button-hover-background: #cfc0ff; /* purple-300 */
  --cs-light-button-hover-color:      #1d211f; /* neutral-950 */

  /* 2. SHAPES (from Figma 2635:8772) */
  --cs-button-border-radius: 2px;   /* was 26px (pill) -> near-square */
  --cs-input-border-radius:  4px;   /* was 3px */
}

/* 2b. TYPOGRAPHY — brand rule: ALL headings/titles = Satoshi, everything
   else = Inter. Restored production mods used Epilogue (titles) and Manrope
   (meta/subtitle/etc.); retarget every theme font var here. Satoshi's
   @font-face is generated by the theme from assets/static/fonts. */

:root:root {
  /* Headings & titles -> Satoshi */
  --cs-font-headings-family:    satoshi;
  --cs-font-entry-title-family: satoshi;
  --cs-font-post-title-family:  satoshi;

  /* Everything else -> Inter */
  --cs-font-base-family:           Inter;
  --cs-font-primary-family:        Inter;
  --cs-font-secondary-family:      Inter;
  --cs-font-post-subtitle-family:  Inter;
  --cs-font-post-content-family:   Inter;
  --cs-font-category-family:       Inter;
  --cs-font-post-meta-family:      satoshi; /* published dates in Satoshi */
  --cs-font-entry-excerpt-family:  Inter;
  --cs-font-input-family:          Inter;
  --cs-font-menu-family:           Inter;
  --cs-font-submenu-family:        Inter;
  --cs-font-footer-menu-family:    Inter;
  --cs-font-footer-submenu-family: Inter;
  --cs-font-main-logo-family:      Inter;
  --cs-font-footer-logo-family:    Inter;
}

/* 2c. FONT WEIGHTS — all headings/titles = 500 (Satoshi Medium),
   all body/paragraph text = 400. */

:root:root {
  --cs-font-headings-weight:      500;
  --cs-font-entry-title-weight:   500;
  --cs-font-post-title-weight:    500;

  --cs-font-base-weight:          400;
  --cs-font-post-content-weight:  400;
  --cs-font-post-subtitle-weight: 400;
  --cs-font-entry-excerpt-weight: 400;
}

/* Hard cap: no heading anywhere may exceed weight 500. !important + heading
   tags & title/heading classes so 600/700 can't slip through on any page,
   block, or widget. */
h1, h2, h3, h4, h5, h6,
.cs-entry__title, .cs-entry__title a,
.wp-block-heading,
.widget-title, .cs-widget__title {
  font-weight: 500 !important;
}
p {
  font-weight: 400;
}
/* <b>/<strong> inside headings must follow the heading weight, not their
   default 700 (e.g. in-content `<h2><b>…</b></h2>`). */
h1 b, h1 strong, h2 b, h2 strong, h3 b, h3 strong,
h4 b, h4 strong, h5 b, h5 strong, h6 b, h6 strong,
.wp-block-heading b, .wp-block-heading strong,
.cs-entry__title b, .cs-entry__title strong, .cs-entry__title span {
  font-weight: inherit !important;
}
/* Single post / page title (h1) -> 400. */
h1.cs-entry__title {
  font-weight: 400 !important;
}
/* Homepage hero/slider entry titles -> 400 (grid titles stay 500). */
.cs-home-hero .cs-entry__title,
.cs-home-hero .cs-entry__title a,
.cs-home-hero .cs-entry__title span {
  font-weight: 400 !important;
}

/* 3. HERO OVERLAY
   Figma keeps a dark ~rgba(0,0,0,0.5) overlay (image-forward with
   readable white text), which matches the current swyft treatment.
   No change required — documented here intentionally. If the live
   overlay drifts lighter/darker than Figma, tune it in Stage 4. */

/* 4. BUTTON STATES — port the brand guide .btn-primary interaction
   (@layer components in paved.css):
     hover  -> bg purple-300 (#cfc0ff, via hover vars above) + 2px purple-600
               underline grows 0 -> 100%, text stays dark
     active -> bg purple-400 (#ae8fff) + same underline
   Applies to the theme CTA buttons, the search submit, and Load More. */

.cs-button,
.wp-block-search__button,
.cs-load-more {
  position: relative;
  overflow: hidden;
}

.cs-button::after,
.wp-block-search__button::after,
.cs-load-more::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #9159ff; /* purple-600 */
  transition: width 0.3s ease;
  pointer-events: none;
}

.cs-button:hover::after,
.cs-button:focus::after,
.cs-button:active::after,
.wp-block-search__button:hover::after,
.wp-block-search__button:focus::after,
.wp-block-search__button:active::after,
.cs-load-more:hover::after,
.cs-load-more:focus::after,
.cs-load-more:active::after {
  width: 100%;
}

.cs-button:active,
.wp-block-search__button:active,
.cs-load-more:active {
  background-color: #ae8fff; /* purple-400 */
  color: #1d211f;
}

/* 5. COMPONENT GAPS
   Targeted fixes discovered during browser QA go below. */

/* Tracking/attribution pixels (e.g. attr_set.gif) are appended directly to
   <body> as inline images, generating an ~18px line box of whitespace below
   the footer. Take them out of flow — they still load for tracking. */
body > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Logo: Paved SVG wordmark + "Blog" suffix (markup in functions.php).
   Header uses the primary (dark green #093C22) mark; footer uses the
   dark-background (mint #A8FDC8) mark. Suffix matches each mark's color. */
.cs-logo--paved {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cs-logo--paved .cs-logo__mark {
  display: block;
  width: auto;
  height: 36px; /* native wordmark height */
}
.cs-logo--paved .cs-logo__suffix {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #093c22; /* match primary wordmark */
}
.cs-logo--footer .cs-logo__suffix {
  color: #a8fdc8; /* match dark-background wordmark */
}
/* Footer wordmark a touch smaller per Figma footer (32px). */
.cs-footer__logo.cs-logo--paved .cs-logo__mark {
  height: 32px;
}

/* Footer: dark Paved green (Figma green-700) — theme paints it with the
   light --cs-layout-background, which hides the mint/dark-bg logo. */
.cs-footer {
  background: #146139;
  color: #ffffff;
}
.cs-footer a {
  color: #ffffff;
}
/* Divider (hr) — Figma uses neon @ 50% on the footer bottom bar. */
.cs-footer__item + .cs-footer__item {
  border-top-color: rgba(222, 233, 72, 0.5);
}
/* Copyright — Figma green-50. */
.cs-footer__copyright {
  color: #e4fdf0;
}
.cs-footer__copyright a {
  color: #e4fdf0;
}
.cs-footer__copyright a:hover {
  color: #ffffff;
}

/* Footer menu links -> brand .btn-navbarLink (pill, white, green-500 hover,
   green-100 active). Replaces the theme's underline-on-hover treatment. */
.cs-footer__nav > li > a {
  color: #ffffff;
  border-radius: 100px;       /* rounding-5xl */
  padding: 8px 16px;          /* block sm / inline md */
  text-align: center;
  font-family: Inter, sans-serif; /* Figma body/xs */
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.14px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.cs-footer__nav > li > a::after {
  display: none !important;   /* remove underline hover effect */
}
.cs-footer__nav > li > a:hover,
.cs-footer__nav > li > a:focus {
  background-color: #218853;  /* green-500 */
  color: #ffffff;
}
.cs-footer__nav > li > a:active {
  background-color: #a8fdd1;  /* green-100 */
  color: #1f1f1f;
}

/* Hero slider category tag buttons -> Figma body/xs (Inter 14/20, -0.14px).
   Scoped to the hero; selector mirrors the theme's category chain so it
   outweighs `.cs-entry__post-meta .cs-meta-category .post-categories a`. */
.cs-home-hero .cs-entry__post-meta .cs-meta-category .post-categories a {
  color: #ffffff;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.14px;
  text-transform: none;
}

/* Category tag typography for ALL post listings & post boxes (homepage grid,
   archive, search, related, hero) -> match the homepage hero category links
   (Inter 14/20, -0.14px). Mirrors the theme's own category selector so it wins
   at equal specificity. Colors/pill stay theme-default to read on light cards;
   the hero keeps its white text via the .cs-home-hero rule above. */
.cs-entry__post-meta .cs-meta-category .post-categories a {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.14px;
  text-align: center;
  text-transform: none;
}

/* Publication dates -> Figma header/H6 (Satoshi 18/24, -0.36px).
   Typography applies everywhere; the #3E3E3E color is scoped to the
   listing so the hero date (on its dark overlay) stays light. */
.cs-meta-date,
.cs-meta-date a,
.cs-meta-date time {
  font-family: satoshi, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.36px;
  text-transform: none;
}
.cs-posts-area .cs-meta-date,
.cs-posts-area .cs-meta-date a,
.cs-posts-area .cs-meta-date time {
  color: #3e3e3e; /* white-900 */
}

/* Mobile/offcanvas nav menu links -> Figma body/sm (Inter 16/22, -0.16px). */
.cs-offcanvas__area .widget_nav_menu .menu a {
  color: #1f1f1f;            /* white-950 */
  text-align: left;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.16px;
  text-transform: none;
}
.cs-offcanvas__area .widget_nav_menu .menu a:hover,
.cs-offcanvas__area .widget_nav_menu .menu a:focus {
  color: #1f1f1f;            /* white-950 */
}

/* Sidebar headings (e.g. the search label) -> Figma body/lg.
   First selector matches the theme's own (0,3,1) rule so our size wins. */
.cs-widget-area .widget_block > form > .wp-block-search__label,
.cs-sidebar__area .wp-block-search__label,
.cs-sidebar__area .widget-title,
.cs-sidebar__area .cs-widget__title {
  color: #1f1f1f;            /* white-950 */
  font-family: Inter, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.22px;
  text-transform: none;
}

/* Load More is a primary (neon) button in Figma, not the grey secondary.
   The theme forces secondary colors with !important via the pagination
   selector, so match that specificity + !important. Hover (purple-300) and
   the underline are inherited from the button-state rules above. */
.cs-posts-area__pagination .cs-load-more {
  background-color: var(--cs-color-button) !important;          /* neon #dee948 */
  color: var(--cs-color-button-contrast) !important;            /* dark #1d211f */
}
.cs-posts-area__pagination .cs-load-more:active {
  background-color: #ae8fff !important;                         /* purple-400 */
  color: #1d211f !important;
}