/* ==========================================================================
   Cambelle Pharmacy — Design Tokens
   Palette: apothecary green + amber glass + warm paper
   Type: Fraunces (display, heritage serif) + Inter (body/utility)
   Signature motif: the "capsule divider" — a two-tone pill shape used as
   a section break, echoing a medicine capsule split down the middle.
   ========================================================================== */

:root{
  --forest-900:#12241d;
  --forest-700:#1f3d33;
  --forest-500:#2f5747;
  --sage-100:#e7ecdf;
  --sage-50:#f1f4ea;
  --paper:#faf7f0;
  --paper-raised:#ffffff;
  --amber-600:#b9752e;
  --amber-500:#c4883b;
  --amber-100:#f2e2c8;
  --charcoal:#26261f;
  --charcoal-soft:#55564c;
  --line:#dcd9cd;

  --font-display:"Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-pill:999px;
  --radius-md:14px;
  --radius-sm:8px;

  --shadow-soft:0 8px 24px rgba(18,36,29,0.08);
  --shadow-lift:0 16px 40px rgba(18,36,29,0.14);

  --container:1180px;
  --space-1:0.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2.5rem;
  --space-5:4rem;
  --space-6:6rem;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--charcoal);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; line-height:1.15; font-weight:600; color:var(--forest-900); }
p{ margin:0; }

:focus-visible{
  outline:3px solid var(--amber-500);
  outline-offset:3px;
}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:1.5rem;
}

.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.75rem;
  font-weight:700;
  color:var(--amber-600);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.85rem 1.6rem;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:0.95rem;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--amber-500);
  color:var(--paper-raised);
  box-shadow:var(--shadow-soft);
}
.btn-primary:hover{ background:var(--amber-600); transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.btn-ghost{
  background:transparent;
  border-color:rgba(250,247,240,0.5);
  color:var(--paper-raised);
}
.btn-ghost:hover{ border-color:var(--paper-raised); transform:translateY(-2px); }
.btn-outline{
  background:transparent;
  border-color:var(--forest-700);
  color:var(--forest-700);
}
.btn-outline:hover{ background:var(--forest-700); color:var(--paper-raised); }

/* ---------- Capsule divider (signature element) ---------- */
.capsule-divider{
  width:96px;
  height:34px;
  border-radius:var(--radius-pill);
  display:flex;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  margin-block:var(--space-3);
}
.capsule-divider span{ flex:1; }
.capsule-divider span:first-child{ background:var(--forest-700); }
.capsule-divider span:last-child{ background:var(--amber-500); }
.capsule-divider.center{ margin-inline:auto; }

/* ---------- Top utility bar ---------- */
.topbar{
  background:var(--forest-900);
  color:var(--sage-50);
  font-size:0.85rem;
}
.topbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-block:0.5rem;
  gap:1rem;
  flex-wrap:wrap;
}
.topbar a{ color:var(--sage-50); }
.topbar .topbar-links{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.topbar .topbar-links a:hover{ color:var(--amber-500); }

/* ---------- Header / Nav ---------- */
.site-header{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:1rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:0.65rem;
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:700;
  color:var(--forest-900);
}
.brand-mark{
  width:38px; height:38px;
  border-radius:var(--radius-pill);
  background:var(--forest-700);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.brand-mark svg{ width:20px; height:20px; }

.nav-links{
  display:flex;
  align-items:center;
  gap:2.25rem;
}
.nav-links a{
  font-weight:600;
  font-size:0.95rem;
  color:var(--forest-700);
  padding-block:0.25rem;
  border-bottom:2px solid transparent;
  transition:border-color 0.15s ease, color 0.15s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{
  border-color:var(--amber-500);
  color:var(--forest-900);
}
.nav-cta{ display:flex; align-items:center; gap:0.85rem; }

.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:0.4rem;
}
.nav-toggle span{
  display:block;
  width:26px;
  height:2px;
  background:var(--forest-900);
  margin:5px 0;
  transition:transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:860px){
  .nav-links{
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--paper);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    border-bottom:1px solid var(--line);
    max-height:0;
    overflow:hidden;
    transition:max-height 0.25s ease;
  }
  .nav-links.open{ max-height:400px; }
  .nav-links a{ padding:0.9rem 1.5rem; width:100%; border-bottom:1px solid var(--line); }
  .nav-cta .btn-primary{ padding:0.7rem 1.1rem; font-size:0.85rem; }
  .nav-cta .btn-outline{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(160deg, var(--forest-900) 0%, var(--forest-700) 62%, var(--forest-500) 100%);
  color:var(--paper);
  position:relative;
  overflow:hidden;
}
.hero .container{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:var(--space-5);
  align-items:center;
  padding-block:var(--space-6);
}
.hero h1{ color:var(--paper); font-size:clamp(2.2rem,4vw,3.4rem); }
.hero-lede{ font-size:1.15rem; color:var(--sage-100); max-width:46ch; margin-top:1.25rem; }
.hero-actions{ display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; }
.hero-meta{
  display:flex;
  gap:2rem;
  margin-top:2.5rem;
  flex-wrap:wrap;
}
.hero-meta div{ display:flex; flex-direction:column; gap:0.15rem; }
.hero-meta .label{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--amber-100); }
.hero-meta .value{ font-weight:600; }

.hero-art{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-art svg{ width:100%; max-width:360px; height:auto; }

@media (max-width:860px){
  .hero .container{ grid-template-columns:1fr; padding-block:var(--space-5); }
  .hero-art{ order:-1; max-width:220px; margin-inline:auto; }
}

/* ---------- Sections ---------- */
.section{ padding-block:var(--space-6); }
.section-sage{ background:var(--sage-50); }
.section-forest{ background:var(--forest-900); color:var(--paper); }
.section-head{ max-width:640px; margin-bottom:var(--space-4); }
.section-head h2{ font-size:clamp(1.8rem,3vw,2.5rem); margin-top:0.5rem; }
.section-head p{ margin-top:1rem; color:var(--charcoal-soft); font-size:1.05rem; }
.section-forest .section-head p{ color:var(--sage-100); }

/* ---------- Card grids ---------- */
.grid{ display:grid; gap:1.75rem; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .grid-3,.grid-2{ grid-template-columns:1fr; } }

.card{
  background:var(--paper-raised);
  border-radius:var(--radius-md);
  padding:2rem;
  box-shadow:var(--shadow-soft);
  border:1px solid var(--line);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.card-icon{
  width:52px; height:52px;
  border-radius:var(--radius-pill);
  background:var(--sage-100);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.25rem;
}
.card-icon svg{ width:26px; height:26px; }
.card h3{ font-size:1.2rem; margin-bottom:0.6rem; }
.card p{ color:var(--charcoal-soft); font-size:0.98rem; }

/* ---------- Testimonials (prescription-label styling) ---------- */
.testimonial{
  background:var(--paper-raised);
  border-left:5px solid var(--amber-500);
  border-radius:var(--radius-sm);
  padding:1.75rem;
  box-shadow:var(--shadow-soft);
  position:relative;
}
.testimonial p.quote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.1rem;
  color:var(--forest-900);
}
.testimonial .source{
  display:block;
  margin-top:1rem;
  font-size:0.85rem;
  color:var(--charcoal-soft);
  text-transform:uppercase;
  letter-spacing:0.06em;
}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--amber-500);
  color:var(--forest-900);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  flex-wrap:wrap;
}
.cta-band h3{ font-size:1.5rem; }
.cta-band .btn-primary{ background:var(--forest-900); }
.cta-band .btn-primary:hover{ background:var(--forest-700); }

/* ---------- Info list ---------- */
.info-list{ display:flex; flex-direction:column; gap:1.1rem; }
.info-list li{ display:flex; gap:1rem; align-items:flex-start; }
.info-list .icon{
  width:40px; height:40px; flex-shrink:0;
  border-radius:var(--radius-pill);
  background:var(--sage-100);
  display:flex; align-items:center; justify-content:center;
}
.info-list .icon svg{ width:20px; height:20px; }
.info-list h4{ font-size:1rem; margin-bottom:0.15rem; }
.info-list p, .info-list a{ color:var(--charcoal-soft); font-size:0.95rem; }
.info-list a:hover{ color:var(--amber-600); }

/* ---------- Hours table ---------- */
.hours-table{ width:100%; border-collapse:collapse; }
.hours-table td{ padding:0.6rem 0; border-bottom:1px solid var(--line); font-size:0.95rem; }
.hours-table td:last-child{ text-align:right; font-weight:600; color:var(--forest-900); }
.hours-table tr:last-child td{ border-bottom:none; }

/* ---------- Map ---------- */
.map-frame{
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  border:1px solid var(--line);
}
.map-frame iframe{ width:100%; height:380px; border:0; display:block; }

/* ---------- Form ---------- */
.form-card{
  background:var(--paper-raised);
  border-radius:var(--radius-md);
  padding:2rem;
  box-shadow:var(--shadow-soft);
  border:1px solid var(--line);
}
.form-row{ margin-bottom:1.25rem; }
.form-row label{
  display:block;
  font-weight:600;
  font-size:0.9rem;
  margin-bottom:0.4rem;
  color:var(--forest-900);
}
.form-row input, .form-row textarea, .form-row select{
  width:100%;
  padding:0.75rem 0.9rem;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--line);
  font-family:var(--font-body);
  font-size:0.95rem;
  background:var(--paper);
  color:var(--charcoal);
  transition:border-color 0.15s ease;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{
  border-color:var(--amber-500);
  outline:none;
}
.form-note{ font-size:0.85rem; color:var(--charcoal-soft); margin-top:0.75rem; }

/* ---------- Breadcrumb / page header ---------- */
.page-header{
  background:var(--sage-50);
  padding-block:var(--space-4);
  border-bottom:1px solid var(--line);
}
.page-header .eyebrow{ margin-bottom:0.5rem; display:block; }
.page-header h1{ font-size:clamp(1.9rem,3.4vw,2.6rem); }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--forest-900);
  color:var(--sage-100);
  padding-block:var(--space-5) var(--space-3);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:var(--space-4);
  border-bottom:1px solid rgba(250,247,240,0.15);
}
@media (max-width:768px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand{ display:flex; align-items:center; gap:0.6rem; font-family:var(--font-display); font-size:1.2rem; color:var(--paper); margin-bottom:0.75rem; }
.footer-brand .brand-mark{ background:var(--amber-500); }
.site-footer p{ color:var(--sage-100); font-size:0.92rem; }
.site-footer h4{ color:var(--paper); font-size:0.95rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:1rem; }
.footer-links li{ margin-bottom:0.6rem; }
.footer-links a{ font-size:0.92rem; color:var(--sage-100); }
.footer-links a:hover{ color:var(--amber-500); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:var(--space-3);
  flex-wrap:wrap;
  gap:0.75rem;
  font-size:0.85rem;
  color:rgba(250,247,240,0.65);
}
.footer-bottom a{ color:rgba(250,247,240,0.85); font-weight:600; }
.footer-bottom a:hover{ color:var(--amber-500); }

/* ---------- Utility ---------- */
.text-center{ text-align:center; }
.mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; } .mt-3{ margin-top:3rem; }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--amber-500);
  color:var(--forest-900);
  padding:0.75rem 1.25rem;
  z-index:100;
  border-radius:0 0 var(--radius-sm) 0;
  font-weight:700;
}
.skip-link:focus{ left:0; }

/* ---------- Reveal-on-scroll (subtle) ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }