/**
 * Crabtree Chevrolet Blog — Official Chevrolet Brand Standard Scheme
 *
 * Colors sourced directly from the Chevrolet Digital Color Palette:
 *   Modern Gold  #F2BC18  (Pantone 7408 C — R242 G188 B24)
 *   Black        #000000  (Pantone Black C)
 *   White        #FFFFFF  (Pantone White C)
 *   Modern Blue  #0077D9  (Pantone 2172 C — R0 G119 B217)
 *
 * Digital Extension Shades (body copy / UI greys):
 *   Grey Very Light  #F2F2F2
 *   Grey Light       #E6E6E6
 *   Grey Mid         #B3B3B3
 *   Grey UI          #8C8C8C
 *   Grey Mid Dark    #666666  (secondary copy)
 *   Grey Dark        #262626  (primary copy — ADA 4.5:1 on white)
 *   Grey Very Dark   #1A1A1A
 *
 * Enqueued when Color Scheme = "Official Chevrolet Brand" in Customizer.
 */

/* ============================================================
   1. COLOR TOKEN OVERRIDES
   ============================================================ */
:root {
  /* Official Modern Gold replaces the Vegas-Gold default (#D1AD57) */
  --color-gold:          #F2BC18;
  --color-gold-dark:     #D4A010;     /* hover / pressed state */
  --color-gold-light:    #F5CC45;     /* subtle highlight */

  /* Surface / background tokens — light, clean, brand-appropriate */
  --color-dark:          #F2F2F2;     /* Grey Very Light — page bg, cards */
  --color-charcoal:      #E6E6E6;     /* Grey Light — subtle dividers */
  --color-off-white:     #FFFFFF;     /* Pure white surfaces */
  --color-light-gray:    #F2F2F2;
  --color-border:        #E6E6E6;

  /* Body copy — ADA-compliant brand greys */
  --color-text-primary:  #262626;     /* Grey Dark — primary copy 4.5:1 on white */
  --color-text-secondary:#666666;     /* Grey Mid Dark — secondary copy */
  --color-text-muted:    #8C8C8C;     /* Grey UI — captions, meta */

  /* Footer stays brand-black */
  --footer-bg:           #000000;     /* True Pantone Black */
  --footer-text:         rgba(255,255,255,0.65);
  --footer-accent:       #F2BC18;     /* Official gold in footer */
}

/* ============================================================
   2. BODY — official light-grey brand page background
   ============================================================ */
body {
  background-color: #F2F2F2;
  color: #262626;
}

/* ============================================================
   3. HEADER
   3a. Top utility bar — official Modern Blue topbar
   ============================================================ */
.header-topbar {
  background: #0077D9;               /* Pantone 2172 C */
  border-bottom: none;
}

.header-topbar .container {
  border-bottom: none;
}

.topbar-contact a {
  color: rgba(255,255,255,0.9);
}

.topbar-contact a:hover {
  color: #FFFFFF;
}

.topbar-contact .dashicons {
  color: rgba(255,255,255,0.75);
}

.topbar-cta a {
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.35);
}

.topbar-cta a:hover,
.topbar-cta a.is-gold {
  background: #F2BC18;               /* Official gold CTA */
  border-color: #F2BC18;
  color: #000000;
}

/* ============================================================
   3b. Main header bar — white, official gold bottom accent
   ============================================================ */
.site-header {
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  border-bottom: 4px solid #F2BC18;  /* Official Modern Gold underline */
}

/* Logo text on white header */
.site-logo-text .dealership-name {
  color: #1A1A1A;                    /* Grey Very Dark */
}

.site-logo-text .dealership-sub {
  color: #0077D9;                    /* Official blue sub-label */
}

/* ============================================================
   3c. Desktop nav links — dark grey on white
   ============================================================ */
.primary-nav ul li a {
  color: #262626;                    /* Grey Dark primary copy */
}

.primary-nav ul li a::after {
  background: #F2BC18;               /* Official gold underline indicator */
}

.primary-nav ul li a:hover,
.primary-nav ul li.current-menu-item > a,
.primary-nav ul li.current-page-ancestor > a {
  color: #0077D9;                    /* Official blue on hover */
}

/* Dropdown menus */
.primary-nav ul li ul {
  background: #FFFFFF;
  border-top: 3px solid #F2BC18;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.primary-nav ul li ul li a {
  color: #262626;
  border-bottom-color: #E6E6E6;
}

.primary-nav ul li ul li a:hover {
  background: rgba(242,188,24,0.08);
  color: #0077D9;
}

/* Search toggle */
.header-search-toggle {
  color: #666666;
}

.header-search-toggle:hover {
  color: #0077D9;
}

/* Hamburger bars — dark on white header */
.nav-toggle span {
  background: #262626;
}

.nav-toggle:hover span {
  background: #0077D9;
}

/* Blog LIVE badge */
.nav-blog-badge {
  background: #F2BC18;
  color: #000000 !important;
}

/* ============================================================
   3d. Mobile nav — true black with official gold top border
   ============================================================ */
@media (max-width: 1024px) {
  .primary-nav.is-open {
    background: #000000;
    border-top: 3px solid #F2BC18;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  }

  .primary-nav.is-open ul li a {
    color: rgba(255,255,255,0.9);
    border-bottom-color: rgba(255,255,255,0.08);
  }

  .primary-nav.is-open ul li a:hover {
    color: #F2BC18;
  }

  .primary-nav.is-open ul li ul {
    background: rgba(255,255,255,0.06);
    border-top: none;
    box-shadow: none;
  }
}

/* ============================================================
   4. PAGE HERO — true black base, official gold accent line
   ============================================================ */
.page-hero {
  background: #000000;
  border-bottom: 1px solid #E6E6E6;
}

.page-hero::before {
  display: block;
  background-color: rgba(0,0,0,0.55);
}

.page-hero__label {
  background: #F2BC18;
  color: #000000;
}

.page-hero__title {
  color: #FFFFFF;
}

.page-hero__meta,
.page-hero__meta a {
  color: rgba(255,255,255,0.7);
}

/* ============================================================
   5. BUTTONS — official gold primary, official blue secondary
   ============================================================ */
.btn--primary {
  background: #F2BC18;
  border-color: #F2BC18;
  color: #000000;
}

.btn--primary:hover {
  background: #D4A010;
  border-color: #D4A010;
  color: #000000;
}

.btn--secondary {
  background: transparent;
  border-color: #0077D9;
  color: #0077D9;
}

.btn--secondary:hover {
  background: #0077D9;
  border-color: #0077D9;
  color: #FFFFFF;
}

.btn--dark {
  background: #000000;
  border-color: #000000;
  color: #FFFFFF;
}

.btn--dark:hover {
  background: #1A1A1A;
  border-color: #1A1A1A;
}

/* ============================================================
   6. POST CARDS — white cards on light grey page
   ============================================================ */
.post-card {
  background: #FFFFFF;
  border: 1px solid #E6E6E6;
}

.post-card__category {
  background: #F2BC18;
  color: #000000;
}

.post-card__title a {
  color: #262626;
}

.post-card__title a:hover {
  color: #0077D9;
}

.post-card__meta,
.post-card__excerpt {
  color: #666666;
}

/* ============================================================
   7. SIDEBAR WIDGETS — white cards, official gold widget titles
   ============================================================ */
.widget {
  background: #FFFFFF;
  border: 1px solid #E6E6E6;
}

.widget-title {
  background: linear-gradient(90deg, #F2BC18 0%, rgba(242,188,24,0) 100%);
  color: #000000;
}

.widget-title::before {
  background: #F2BC18;
}

/* Sidebar links → official blue */
.widget ul li a {
  color: #262626;
}

.widget ul li a:hover {
  color: #0077D9;
}

/* Banner widget badge */
.widget-banner__badge {
  background: #F2BC18;
  color: #000000;
}

.widget-banner__btn {
  background: #F2BC18;
  color: #000000;
}

/* ============================================================
   8. SINGLE POST — white card, brand grey body copy
   ============================================================ */
.entry-post-card {
  background: #FFFFFF;
  border: 1px solid #E6E6E6;
}

.entry-post-card__body {
  color: #262626;
}

.entry-post-card__body a {
  color: #0077D9;
}

.entry-post-card__body a:hover {
  color: #0055A0;
}

/* Blockquote — official gold left border */
.entry-post-card__body blockquote {
  border-left-color: #F2BC18;
  background: rgba(242,188,24,0.06);
  color: #262626;
}

/* Reading progress bar */
#reading-progress {
  background: #F2BC18;
}

/* Post attribution bar */
.post-attribution {
  background: #F2BC18;
}

.post-attribution,
.post-attribution a,
.post-attribution .dashicons {
  color: #000000 !important;
}

/* ============================================================
   9. SECTION LABELS — official gold
   ============================================================ */
.section-label::before {
  background: #F2BC18;
}

.section-label {
  color: #262626;
}

/* ============================================================
   10. CTA BANNER (single.php inline banner)
       The banner uses style="background: var(--color-black)"
       so it will correctly use #0A0A0A from base (near-black).
       Override text and button explicitly for brand compliance.
   ============================================================ */
.post-cta-banner {
  background: #000000 !important;
  border-top: 4px solid #F2BC18;
}

.post-cta-banner h3,
.post-cta-banner p {
  color: #FFFFFF;
}

/* ============================================================
   11. SEARCH OVERLAY — matches official blue accent
   ============================================================ */
.search-form-overlay {
  background: rgba(0,0,0,0.93);
}

.search-label {
  color: rgba(255,255,255,0.5);
}

/* ============================================================
   12. PAGINATION — official gold active page
   ============================================================ */
.pagination .page-numbers.current {
  background: #F2BC18;
  color: #000000;
}

.pagination .page-numbers:hover {
  background: #F2BC18;
  color: #000000;
}

/* ============================================================
   13. BREADCRUMBS — official grey + blue links
   ============================================================ */
.breadcrumb a {
  color: #0077D9;
}

.breadcrumb a:hover {
  color: #0055A0;
}

/* ============================================================
   14. FOOTER — brand-black with official gold accent bar
   ============================================================ */
.site-footer {
  background: #000000;
}

.footer-top {
  border-top: 4px solid #F2BC18;    /* Official gold top bar */
}

.footer-widget-title {
  color: #FFFFFF;
}

.footer-widget-title::after {
  background: linear-gradient(90deg, #F2BC18 0%, transparent 100%);
}

.site-footer a:hover {
  color: #F2BC18;
}

/* ============================================================
   15. DASHICONS / DECORATIVE ACCENTS — official gold
   ============================================================ */
.dashicons {
  color: #F2BC18;
}

.sidebar .dashicons,
.widget .dashicons {
  color: #F2BC18;
}

/* ============================================================
   16. TAGS & CATEGORY CHIPS
   ============================================================ */
.post-tag a {
  color: #262626;
  border-color: #E6E6E6;
  background: #FFFFFF;
}

.post-tag a:hover {
  background: #F2BC18;
  border-color: #F2BC18;
  color: #000000;
}

.category-chip {
  background: #F2BC18;
  color: #000000;
}

/* ============================================================
   17. RESPONSIVE — mobile overrides
   ============================================================ */
@media (max-width: 768px) {
  .header-topbar {
    overflow-x: hidden;
  }

  .header-topbar .container {
    flex-wrap: wrap;
    gap: 6px;
  }

  .topbar-contact {
    flex-wrap: wrap;
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .post-card__meta {
    flex-wrap: wrap;
    gap: 4px;
  }

  .page-hero__title {
    font-size: clamp(1.25rem, 5vw, 2rem);
  }
}