/*
Theme Name: CarDependability
Theme URI: https://cardependability.com
Template: generatepress
Author: MotoWords LLC
Author URI: https://cardependability.com
Description: Child theme for CarDependability.com — the Executive/Premium brand system (navy #012450, teal #0A7A7E, Satin Gold #C9A227 CTA) with design tokens, brand typography, buttons, header/footer treatment, and component styles (grade pills, cards, rankings, lookup). Built on GeneratePress.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: cardependability
*/

/* ============================================================
   1. DESIGN TOKENS  (edit here to recolor the whole site)
   ============================================================ */
:root{
  --navy:#012450; --navy-ink:#001B3D;
  --teal:#0A7A7E; --teal-ink:#086A6D;
  --gold:#C9A227; --gold-ink:#B38E1E;
  --ink:#1A222B; --ink-soft:#41474F; --muted:#5B6570;
  --canvas:#FFFFFF; --surface:#F4F6F8; --hairline:#E1E5EA; --hairline-2:#EDEFF2;
  --on-gold:#012450; --on-navy:#FFFFFF;
  /* grade scale — semantic, do not restyle */
  --grade-a:#1F8A4C; --grade-a-bg:#E7F3EC;
  --grade-b:#4FA05F; --grade-b-bg:#ECF5EE;
  --grade-c:#C98A00; --grade-c-bg:#F8F0DA;
  --grade-d:#D9702B; --grade-d-bg:#FBEADF;
  --grade-f:#C63A2F; --grade-f-bg:#FBE4E2;
  --radius:14px;
  --shadow:0 1px 2px rgba(1,36,80,.06),0 8px 24px rgba(1,36,80,.07);
  --font-body:"Source Sans 3",system-ui,-apple-system,sans-serif;
  --font-disp:"Poppins","Source Sans 3",system-ui,sans-serif;
}

/* ============================================================
   2. BASE TYPOGRAPHY
   ============================================================ */
body{font-family:var(--font-body);color:var(--ink);background:var(--canvas);line-height:1.6;}
h1,h2,h3,h4,h5,.site-title{font-family:var(--font-disp);color:var(--navy);line-height:1.15;}
h1{letter-spacing:-.02em;}
a{color:var(--teal);}
a:hover{color:var(--teal-ink);}
.entry-content a{text-decoration:underline;text-underline-offset:2px;}

/* eyebrow / kicker utility */
.cd-eyebrow{font-family:var(--font-disp);text-transform:uppercase;letter-spacing:.15em;font-weight:600;font-size:12px;color:var(--teal);}

/* ============================================================
   3. HEADER + NAV  (white header, gold underline, navy nav text)
   ============================================================ */
.site-header{background:var(--canvas);border-bottom:2px solid var(--gold);}
.main-navigation,
.main-navigation ul{background:var(--canvas);}
.main-navigation .main-nav ul li a{font-family:var(--font-disp);text-transform:uppercase;letter-spacing:.08em;font-weight:500;font-size:13px;color:var(--navy);}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a{color:var(--teal);}
/* highlight the ratings/index nav item: give that menu item the class "nav-ratings" in Appearance > Menus */
.main-navigation .main-nav ul li.nav-ratings a{color:var(--teal);}
.main-navigation .main-nav ul li.nav-ratings a::before{content:"\2605";font-size:9px;vertical-align:2px;margin-right:5px;}

/* ============================================================
   4. BUTTONS  (CTA = Satin Gold with navy text)
   ============================================================ */
.button,button.button,input[type="submit"],
.wp-block-button__link,.gb-button,
.main-navigation .menu-bar-item.cd-cta > a{
  background:var(--gold);color:var(--on-gold);border:none;border-radius:9px;
  font-family:var(--font-disp);text-transform:uppercase;letter-spacing:.06em;font-weight:600;
  padding:.7em 1.4em;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
}
.button:hover,button.button:hover,input[type="submit"]:hover,
.wp-block-button__link:hover,.gb-button:hover{background:var(--gold-ink);color:var(--on-gold);}
/* secondary button: navy fill, white text — add class "cd-btn-secondary" */
.cd-btn-secondary,.wp-block-button.is-style-outline .wp-block-button__link{background:var(--navy);color:#fff;}
.cd-btn-secondary:hover{background:var(--navy-ink);color:#fff;}

/* ============================================================
   5. FOOTER  (navy)
   ============================================================ */
.site-footer,.site-info,.footer-widgets{background:var(--navy);color:var(--on-navy);}
.site-footer a,.site-info a{color:#fff;}
.site-footer a:hover,.site-info a:hover{color:var(--gold);}
.footer-widgets .widget-title{font-family:var(--font-disp);text-transform:uppercase;letter-spacing:.11em;font-size:11px;color:#AEB7C6;}

/* ============================================================
   6. COMPONENTS  (apply the class names below via GenerateBlocks
      "Advanced > Additional CSS class(es)" when building pages)
   ============================================================ */

/* Card */
.cd-card{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;transition:transform .12s ease,box-shadow .12s ease;}
.cd-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.cd-card .cd-cat{font-family:var(--font-disp);text-transform:uppercase;letter-spacing:.09em;font-size:10px;font-weight:600;background:var(--navy);color:#fff;padding:3px 8px;border-radius:4px;}
.cd-card h4{font-size:16.5px;margin:.3em 0;}

/* Section surface band */
.cd-band-surface{background:var(--surface);}

/* Grade pill — use .cd-grade plus a grade class */
.cd-grade{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;border-radius:9px;font-family:var(--font-disp);font-weight:700;font-size:19px;line-height:1;}
.cd-grade.gr-a{background:var(--grade-a-bg);color:var(--grade-a);}
.cd-grade.gr-b{background:var(--grade-b-bg);color:var(--grade-b);}
.cd-grade.gr-c{background:var(--grade-c-bg);color:var(--grade-c);}
.cd-grade.gr-d{background:var(--grade-d-bg);color:var(--grade-d);}
.cd-grade.gr-f{background:var(--grade-f-bg);color:var(--grade-f);}

/* Grade text pill (inline label) */
.cd-gradepill{display:inline-block;padding:2px 10px;border-radius:999px;font-family:var(--font-disp);font-weight:600;font-size:12px;}
.cd-gradepill.gr-a{background:var(--grade-a-bg);color:var(--grade-a);}
.cd-gradepill.gr-b{background:var(--grade-b-bg);color:var(--grade-b);}
.cd-gradepill.gr-c{background:var(--grade-c-bg);color:var(--grade-c);}
.cd-gradepill.gr-d{background:var(--grade-d-bg);color:var(--grade-d);}
.cd-gradepill.gr-f{background:var(--grade-f-bg);color:var(--grade-f);}

/* Ranking row */
.cd-rrow{display:flex;align-items:center;gap:12px;background:var(--canvas);border:1px solid var(--hairline);border-radius:11px;padding:11px 13px;text-decoration:none;color:inherit;transition:border-color .12s,transform .12s;}
.cd-rrow:hover{border-color:var(--teal);transform:translateY(-1px);}

/* Lookup card (vehicle selector) */
.cd-lookup{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;}
.cd-lookup select{background:var(--surface);border:1px solid var(--hairline);border-radius:9px;padding:11px 12px;font-family:var(--font-body);}

/* Make/brand chip */
.cd-make{display:flex;align-items:center;justify-content:center;background:var(--canvas);border:1px solid var(--hairline);border-radius:10px;padding:14px 8px;font-family:var(--font-disp);font-weight:500;font-size:13px;color:var(--ink);text-decoration:none;transition:border-color .12s,color .12s;}
.cd-make:hover{border-color:var(--teal);color:var(--teal);}

/* Numbered step (methodology) */
.cd-step-n{font-family:var(--font-disp);font-weight:700;color:var(--teal);border:1.5px solid var(--teal);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

/* Affiliate / alert band */
.cd-affil{background:var(--canvas);border:1px solid var(--hairline);border-left:4px solid var(--teal);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px;}
.cd-disc{font-size:11px;color:var(--muted);font-style:italic;}

/* Newsletter (navy block) */
.cd-news{background:var(--navy);color:#EAF0F6;border-radius:var(--radius);padding:34px;}
.cd-news h2{color:#fff;}

/* Ad slot placeholder */
.cd-adslot{background:#EEF1F4;border:1px dashed #D3D9E0;border-radius:8px;color:#8A929C;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-disp);text-transform:uppercase;letter-spacing:.18em;font-size:10px;padding:28px;}

/* Inline affiliate notice (top of article) */
.cd-affnote{font-size:13px;color:var(--muted);font-style:italic;border-left:3px solid var(--gold);padding-left:10px;margin:.5em 0 1.25em;}