/*
 Theme Name: CRA Agency
 Theme URI: https://childcare.agency/
 Author: CRA
 Description: Agency theme for a childcare staffing company.
 Version: 1.2.0
 License: GPL-2.0-or-later
 Text Domain: cra-agency
*/
:root{
  --brand:#2556d6;
  --accent:#1fb77a;
  --ink:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --soft:#f8fafc;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
h1,h2,h3{letter-spacing:.2px}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.topbar{background:#0b2a55;color:#dbeafe;font-size:14px}
.topbar .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0}
.topbar a{color:#bfdbfe}
.site-header{border-bottom:1px solid #e2e8f0;background:#fff;position:sticky;top:0;z-index:10;box-shadow:0 1px 0 #e2e8f0}
.site-header .inner{display:flex;align-items:center;gap:24px;justify-content:space-between;padding:14px 0}
.site-title{font-size:20px;font-weight:700;letter-spacing:.2px}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:16px}
.site-nav a{padding:8px 10px;border-radius:8px;font-weight:600}
.site-nav a.button{background:var(--brand);color:#fff;text-decoration:none}
html { scroll-behavior: smooth; }

/* offset for sticky header so anchors aren’t hidden */
#apply-form, #request-form {
  scroll-margin-top: var(--header-height, 0px);
}


.hero{background:linear-gradient(120deg, var(--soft), #eef6ff);padding:84px 0;border-bottom:1px solid #e6eef9}
/* .hero-graphic img {max-width: 100%;height: auto;display: block;} */
/* keep your existing hero styles */
.hero .hero-wrap{
  display:grid;
  grid-template-columns: 1fr auto; /* text grows, logo fits */
  gap:28px;
  align-items:center;
}

/* NEW: center the logo item itself */
.hero-graphic{
  align-self:center;      /* vertically center this grid item */
  justify-self:end;       /* push it to the right neatly */
  display:flex;           /* optional: for internal centering */
  align-items:center;
  justify-content:center;
}

/* optional sizing so the hero isn’t too tall */
.hero-graphic img{
  max-height: 150px;      /* adjust to taste: 120–180px works well */
  height:auto;
  width:auto;
  display:block;
}

/* tidy hero text spacing so the visual “middle” feels right */
.hero .badge{margin-bottom:12px;}
.hero h1{margin:8px 0 12px;}
.hero p{margin:0 0 18px;}

.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.button{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:700;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.button.primary{background:var(--brand);color:#fff}
.button.secondary{background:#e9f2ff;color:#12326f}
.section{padding:56px 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:22px;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.06)}
.card .icon-wrap{width:56px;height:56px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:#eef4ff;margin-bottom:10px;border:1px solid #d6e3ff}
.icon{width:28px;height:28px;display:inline-block}
.card h3{margin-top:6px}
.soft-band{background:var(--soft);border-top:1px solid #e6eef9;border-bottom:1px solid #e6eef9}
.page-hero{background:linear-gradient(120deg,#eef6ff,#f4fff8);border-bottom:1px solid #e6eef9;padding:40px 0}
.page-hero h1{margin:0}
.article-wrap{margin-top:20px}
.site-footer{background:#0f172a;color:#cbd5e1;border-top:none}
.site-footer .inner{padding:40px 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
.footer-col h4{margin:0 0 10px 0;color:#e2e8f0}
.footer-col p, .footer-col a{color:#cbd5e1}
.footer-col a{display:block;margin:4px 0;text-decoration:none}
.footer-col a:hover{color:#fff;text-decoration:underline}
.footer-bottom{border-top:1px solid rgba(148,163,184,.2);margin-top:18px;padding-top:12px;color:#94a3b8;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
@media (max-width: 900px){
  .grid-2{grid-template-columns:1fr}
  .hero .hero-wrap{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#e7fff3;color:#065f46;font-weight:600;border:1px solid #b6f3d4;font-size:12px}
.hr{height:1px;background:#e6eef9;margin:18px 0}

/* =========================
   Mobile polish & fixes
   ========================= */

/* 0) Make anchor jumps clear the sticky header */
.site-header{ --header-height: 72px; } /* adjust if your header is taller */
#apply-form, #request-form { scroll-margin-top: var(--header-height); }

/* 1) Header/topbar: stop wrapping badly on phones */
@media (max-width: 900px){
  .topbar .inner{ flex-wrap: wrap; gap: 6px; }
  .site-header .inner{ flex-wrap: wrap; gap: 12px; }
  .site-title{ font-size: 18px; }
  .site-nav ul{ flex-wrap: wrap; row-gap: 8px; }
  .site-nav a{ padding: 8px 10px; }
}

/* 2) Hero: stack cleanly + cap logo size on phones */
@media (max-width: 900px){
  .hero{ padding: 48px 0; }
  .hero .hero-wrap{ grid-template-columns: 1fr; gap: 20px; }
  .hero-graphic{ justify-self: center; margin-top: 4px; }
  .hero-graphic img{
    max-width: 72%;
    max-height: 120px;   /* keep hero compact */
  }
  .hero h1{ font-size: 32px; line-height: 1.15; margin: 8px 0 10px; }
  .hero p{ font-size: 16px; line-height: 1.5; margin: 0 0 16px; }
  .cta-row .button{ padding: 10px 14px; font-size: 15px; }
}

/* 3) Sections & cards: one-column grid with tighter spacing */
@media (max-width: 900px){
  .section{ padding: 36px 0; }
  .grid-2{ grid-template-columns: 1fr; gap: 16px; }
  .card{ padding: 16px; border-radius: 14px; }
  .card .icon-wrap{ width: 44px; height: 44px; border-radius: 12px; }
  .icon{ width: 22px; height: 22px; }
  .card h3{ margin: 8px 0; }
  .card p, .card li{ font-size: 15px; line-height: 1.5; }
}

/* 4) CTA band: center buttons on mobile */
@media (max-width: 900px){
  .soft-band .container{ text-align: center; }
  .soft-band .cta-row{ justify-content: center; gap: 10px; }
}

/* 5) Footer: stack columns on phones */
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr; gap: 16px; }
}

/* Hamburger button */
.mobile-toggle{
  display:none;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #e2e8f0;
  background:#fff;
  color:#0f172a;
  cursor:pointer;
}
.mobile-toggle:hover{background:#f8fafc}
.mobile-toggle svg{display:block}

/* Mobile menu behavior */
@media (max-width: 900px){
  .mobile-toggle{display:inline-flex}
  .site-nav{position:relative}
  .site-nav .menu{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    left:auto;
    background:#fff;
    border:1px solid #e2e8f0;
    box-shadow:0 10px 30px rgba(15, 23, 42, .08);
    border-radius:12px;
    padding:10px;
    flex-direction:column;
    gap:6px;
    z-index:99;
    min-width: 220px;
  }
  .site-nav.open .menu{display:flex}
  .site-nav .menu a{
    display:block;
    padding:10px 12px;
    border-radius:10px;
  }
  .site-nav .menu a:hover{background:#f8fafc}
  /* Hide the blue "Request Staff" button styling in the dropdown */
  .site-nav .menu a.button{background:transparent;color:var(--brand)}
}

/* Keep desktop as-is */
@media (min-width: 901px){
  .site-nav .menu{display:flex}
  .mobile-toggle{display:none}
}

/* Show full menu on desktop */
@media (min-width: 901px){
  .site-nav .menu{ display:flex !important; }
  .mobile-toggle{ display:none; }
}

/* Mobile behaviour */
@media (max-width: 900px){
  .mobile-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:10px;
    border:1px solid #e2e8f0;
    background:#fff;
    color:#0f172a;
    cursor:pointer;
  }

  /* Hide menu by default on mobile (override the global .site-nav ul {display:flex}) */
  .site-nav .menu{
    display:none !important;
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    background:#fff;
    border:1px solid #e2e8f0;
    box-shadow:0 10px 30px rgba(15,23,42,.08);
    border-radius:12px;
    padding:10px;
    min-width:220px;
    z-index:99;
    flex-direction:column;
    gap:6px;
  }

  /* When nav is open, show it */
  #primary-menu.open .menu{
    display:flex !important;
  }

  /* Make header a positioning context for the absolute dropdown */
  .site-header .inner{ position:relative; }

  /* Tidy link styles inside dropdown */
  .site-nav .menu a{
    display:block;
    padding:10px 12px;
    border-radius:10px;
  }
  .site-nav .menu a:hover{ background:#f8fafc; }

  /* In dropdown, remove the blue "button" styling */
  .site-nav .menu a.button{ background:transparent; color:var(--brand); }
}

.nowrap {
  white-space: nowrap;
}