/*
Theme Name:   CyclingCostadelSol Child
Theme URI:    https://cyclingcostadelsol.com
Description:  Astra child theme for CyclingCostadelSol.com — Costa del Sol road cycling guide.
Author:       CyclingCostadelSol
Author URI:   https://cyclingcostadelsol.com
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         cycling, costa del sol, astra child
Text Domain:  cycling-costadelsol-child
*/

/* ============================================================
   COSTA DEL SOL — BRAND TOKENS
   ============================================================ */
:root {
  /* Backgrounds */
  --cds-sand:          #f0e6d3;   /* main page background */
  --cds-sand-mid:      #e8d9c0;   /* section alternates, hero */
  --cds-sand-dark:     #d4c4a8;   /* borders, dividers */
  --cds-parchment:     #faf6f0;   /* card backgrounds, white areas */

  /* Brand accent */
  --cds-terra:         #c8580a;   /* primary CTA, links, accents */
  --cds-terra-light:   #e06a18;   /* hover state */
  --cds-terra-deep:    #a04208;   /* dark pressed state */

  /* Text */
  --cds-charcoal:      #1c1c1c;   /* primary body text */
  --cds-charcoal-mid:  #3d3530;   /* secondary headings */
  --cds-stone:         #7a6e62;   /* muted body text */
  --cds-stone-light:   #a89d93;   /* captions, meta */

  /* Borders */
  --cds-border:        rgba(100, 80, 60, 0.15);

  /* Footer stays dark */
  --cds-footer-bg:     #1c1c1c;
  --cds-footer-text:   rgba(255,255,255,0.45);
}

/* ============================================================
   GOOGLE FONTS — loaded via functions.php enqueue
   Barlow Condensed 700, 900  |  DM Sans 300, 400, 500
   ============================================================ */

/* ============================================================
   GLOBAL RESETS / BASE
   ============================================================ */
body {
  background-color: var(--cds-sand) !important;
  color: var(--cds-charcoal) !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-blog-single-element,
.elementor-heading-widget h1,
.elementor-heading-widget h2,
.elementor-heading-widget h3 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  color: var(--cds-charcoal) !important;
  line-height: 0.95;
}

p, li, td, th, label, input, textarea, select {
  font-family: 'DM Sans', sans-serif !important;
  color: var(--cds-charcoal);
}

a { color: var(--cds-terra); }
a:hover { color: var(--cds-terra-light); }

/* ============================================================
   ASTRA HEADER OVERRIDES
   ============================================================ */
.site-header,
#masthead,
.ast-desktop-header,
.main-header-bar {
  background-color: rgba(240, 230, 211, 0.96) !important;
  border-bottom: 1px solid var(--cds-sand-dark) !important;
  backdrop-filter: blur(10px);
}

/* Site title / logo text */
.site-title a,
.ast-site-title-wrap a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  letter-spacing: 0.04em !important;
  color: var(--cds-charcoal) !important;
  text-decoration: none !important;
}

/* Nav links */
.main-navigation a,
.ast-primary-menu > li > a,
#site-navigation a {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--cds-charcoal-mid) !important;
  transition: color 0.2s !important;
}
.main-navigation a:hover,
.ast-primary-menu > li > a:hover {
  color: var(--cds-charcoal) !important;
}

/* Nav CTA button (add class "nav-cta" to your button menu item) */
.menu-item.nav-cta > a,
.ast-primary-menu .nav-cta > a {
  background: var(--cds-terra) !important;
  color: #fff !important;
  padding: 8px 18px !important;
  border-radius: 4px !important;
}
.menu-item.nav-cta > a:hover {
  background: var(--cds-terra-light) !important;
  color: #fff !important;
}

/* Dropdown menus */
.ast-primary-menu .sub-menu,
.main-navigation .sub-menu {
  background: var(--cds-parchment) !important;
  border: 1px solid var(--cds-sand-dark) !important;
  border-radius: 6px !important;
  box-shadow: 0 20px 48px rgba(60,40,20,0.15) !important;
}
.ast-primary-menu .sub-menu a,
.main-navigation .sub-menu a {
  color: var(--cds-stone) !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}
.ast-primary-menu .sub-menu a:hover {
  color: var(--cds-terra) !important;
  background: rgba(200,88,10,0.06) !important;
}

/* ============================================================
   ASTRA FOOTER OVERRIDES
   ============================================================ */
.site-footer,
#colophon,
.ast-footer-overlay {
  background-color: var(--cds-footer-bg) !important;
  color: var(--cds-footer-text) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.site-footer a,
#colophon a { color: rgba(255,255,255,0.45) !important; }
.site-footer a:hover,
#colophon a:hover { color: #fff !important; }
.ast-footer-copyright { color: rgba(255,255,255,0.2) !important; }

/* ============================================================
   ELEMENTOR GLOBAL OVERRIDES
   ============================================================ */

/* Section/Container backgrounds */
.elementor-section,
.e-con {
  /* Elementor sections inherit body bg by default — 
     override per-section in Elementor editor as needed */
}

/* Elementor headings */
.elementor-widget-heading .elementor-heading-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: var(--cds-charcoal) !important;
  line-height: 0.95 !important;
}

/* Elementor text editor */
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  color: var(--cds-stone) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* Elementor buttons */
.elementor-button,
.elementor-button-wrapper .elementor-button {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  border-radius: 4px !important;
}

/* ============================================================
   UTILITY CLASSES — use these in Elementor Custom CSS fields
   ============================================================ */

/* Section label (orange line + uppercase label) */
.cds-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cds-terra);
  margin-bottom: 12px;
}
.cds-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--cds-terra);
}

/* Card style */
.cds-card {
  background: var(--cds-parchment);
  border: 1px solid var(--cds-sand-dark);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.cds-card:hover {
  box-shadow: 0 16px 48px rgba(60,40,20,0.15);
  transform: translateY(-4px);
  border-color: rgba(200,88,10,0.4);
}

/* Primary button */
.cds-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cds-terra);
  color: #fff !important;
  padding: 13px 28px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.cds-btn-primary:hover {
  background: var(--cds-terra-light) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Ghost / outline button */
.cds-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cds-charcoal) !important;
  padding: 13px 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  border: 1px solid var(--cds-sand-dark);
  transition: border-color 0.2s, background 0.2s;
}
.cds-btn-ghost:hover {
  border-color: var(--cds-charcoal-mid);
  background: rgba(100,80,60,0.06);
}

/* Difficulty badges */
.cds-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cds-badge-easy     { background: rgba(34,130,60,0.12);  color: #1a7a40; }
.cds-badge-moderate { background: rgba(180,120,10,0.12); color: #9a6800; }
.cds-badge-hard     { background: rgba(200,88,10,0.14);  color: #c8580a; }
.cds-badge-epic     { background: rgba(180,30,30,0.12);  color: #a01818; }

/* Contact / CTA band */
.cds-contact-band {
  background: var(--cds-sand-mid);
  padding: 64px 48px;
  border-top: 1px solid var(--cds-sand-dark);
  border-bottom: 1px solid var(--cds-sand-dark);
}

/* Hero stat */
.cds-stat-number {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: var(--cds-charcoal);
}
.cds-stat-number span { color: var(--cds-terra); font-size: 24px; }
.cds-stat-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--cds-stone);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   SECTION BACKGROUND HELPERS
   (apply to Elementor sections via CSS class field)
   ============================================================ */
.bg-sand        { background-color: var(--cds-sand) !important; }
.bg-sand-mid    { background-color: var(--cds-sand-mid) !important; }
.bg-parchment   { background-color: var(--cds-parchment) !important; }
.bg-charcoal    { background-color: var(--cds-charcoal) !important; }
.text-on-dark   { color: #fff !important; }
.text-on-dark p,
.text-on-dark li { color: rgba(255,255,255,0.65) !important; }
.text-on-dark h1,
.text-on-dark h2,
.text-on-dark h3 { color: #fff !important; }

/* ============================================================
   RESPONSIVE — mobile nav cleanup
   ============================================================ */
@media (max-width: 768px) {
  .ast-mobile-header-stack,
  .ast-header-break-point .main-header-bar {
    background-color: var(--cds-sand) !important;
  }
  .ast-mobile-menu-trigger-btn span,
  .ast-mobile-menu-trigger-btn span::before,
  .ast-mobile-menu-trigger-btn span::after {
    background-color: var(--cds-charcoal) !important;
  }
}