/*
Theme Name: Shuttle Shuffle
Author: KM Virtual Solutions
Description: Shuttle Shuffle base theme
Version: 1.0
*/

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

/* Brand tokens */
:root{
  --ss-graphite: #2B2E34;
  --ss-emerald:  #1F7A63;
  --ss-softgray: #F2F3F5;
  --ss-white:    #FFFFFF;
  --ss-charcoal: #3A3A3A;
}

/* Base */
*{ box-sizing:border-box; }
body{
  margin:0;
  padding:0;
  font-family: 'Montserrat', Arial, sans-serif;
  background: var(--ss-softgray);
  color: var(--ss-charcoal);
}

a{
  color: var(--ss-charcoal);
  text-decoration: none;
}
a:hover{
  color: var(--ss-emerald);
  text-decoration: underline;
}

/* ===== HEADER / BANNER ===== */
.site-header{
  margin:0;
  padding:0;
  background: var(--ss-softgray);
}

/* Full-bleed banner */
.site-header-banner{
  width: 100vw;
  max-width: 100%;
  height: 300px;
  object-fit: cover;
  display:block;

  /* this forces true full width even inside a centered wrapper */
  margin-left: calc(50% - 50vw);
}

/* Nav under banner */
.site-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  padding:16px 12px 14px;
  background: var(--ss-softgray);
  border-bottom: 1px solid rgba(43,46,52,0.14);
}

/* wp_nav_menu outputs a UL; force it horizontal and remove bullets */
.site-nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
}
.site-nav li{ margin:0; padding:0; }
.site-nav a{
  font-weight:700;
  letter-spacing:0.04em;
  font-size:14px;
  color: var(--ss-charcoal);
  padding:8px 10px;
  border-radius:10px;
}
.site-nav a:hover{
  background: rgba(31,122,99,0.14);
  color: var(--ss-graphite);
  text-decoration:none;
}

/* Layout */
.main-container{
  width: min(1100px, 94%);
  margin: 24px auto 40px;
}
main h1, main h2, main h3{ color: var(--ss-charcoal); }
main p{ color: rgba(58,58,58,0.92); }

/* Optional highlight span for "Med Valet" words */
/* Legacy class kept for compatibility */
.mv-highlight{ color: var(--ss-emerald); font-weight:700; }

/* Footer */
footer.site-footer{
  text-align:center;
  padding: 28px 12px 22px;
  font-size: 13px;
  background: var(--ss-graphite);
  color: rgba(255,255,255,0.92);
  border-top: 1px solid rgba(255,255,255,0.14);
}
footer.site-footer a{
  color: var(--ss-emerald);
  text-decoration:none;
  font-weight:600;
}
footer.site-footer a:hover{
  color:#ffffff;
  text-decoration:underline;
}

/* Remove any social bar if it exists from previous theme */
.topbar, .header-top, .social, .social-icons{ display:none !important; }


/* Global Pale Graphite Background */
body {
    background-color: #E5E7EA;
}
.site, #page, .site-content {
    background: transparent;
}


/* ===============================
   SHUTTLE SHUFFLE — HARDWIRED COLOR SCHEME
   Graphite + Emerald + Soft Gray (Pale Graphite Background)
   =============================== */

:root{
  --ss-graphite:#2B2E34;
  --ss-emerald:#1F7A63;
  --ss-emerald-dark:#166651;
  --ss-pale-graphite:#E5E7EA;
  --ss-soft-gray:#F2F3F5;
  --ss-white:#FFFFFF;
  --ss-border:#CFD3D8;
}

/* Global page background + text */
html, body{
  background-color: var(--ss-pale-graphite) !important;
  color: var(--ss-graphite) !important;
}

/* Core containers should not paint over background */
#page, .site, .site-content, main, .ast-container, .content-area{
  background: transparent !important;
}

/* Headings */
h1,h2,h3,h4,h5,h6{
  color: var(--ss-graphite) !important;
}

/* Links */
a{
  color: var(--ss-emerald) !important;
  text-decoration: none;
}
a:hover, a:focus{
  color: var(--ss-emerald-dark) !important;
  text-decoration: underline;
}

/* Buttons (Astra + WP blocks) */
button,
.button,
.wp-block-button__link,
input[type="submit"],
input[type="button"],
input[type="reset"]{
  background-color: var(--ss-emerald) !important;
  color: var(--ss-white) !important;
  border: none !important;
  border-radius: 10px;
}
button:hover,
.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover{
  background-color: var(--ss-emerald-dark) !important;
}

/* Form fields */
input, textarea, select{
  background-color: var(--ss-white) !important;
  color: var(--ss-graphite) !important;
  border: 1px solid var(--ss-border) !important;
  border-radius: 8px;
}

/* Optional white “card” utility class for Custom HTML blocks */
.ss-card{
  background: var(--ss-white);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}