/* ==========================================================
   MedicAid Drugstore & Convenience Store — globals.css
   Shared styles for every page of the site.

   1. DESIGN TOKENS   colors and fonts (light + dark mode)
   2. BASE            reset, typography, links, page wrapper
   3. COMPONENTS      buttons, boxes, brand icon, labels, illustrations
   4. SECTIONS        header, hero, services, discounts, find us, footer
   5. RESPONSIVE      tablet and phone adjustments

   To add a page: copy the <head> from index.html so it links
   this file, keep the <header> and <footer>, and build the page
   body from the classes below.
   ========================================================== */


/* ==========================================================
   1. DESIGN TOKENS
   Change brand colors and fonts here; everything else follows.
   ========================================================== */
:root {
  /* Surfaces and text */
  --bg: #fbf8f7;          /* page background */
  --surface: #ffffff;     /* boxes and cards */
  --ink: #2a1514;         /* main text */
  --muted: #6b5654;       /* secondary text */
  --line: #eddcda;        /* borders */

  /* Brand */
  --brand: #de2826;       /* buttons, links, highlights */
  --brand-ink: #ffffff;   /* text on brand color */
  --band: #de2826;        /* header, footer, icons (logo red) */
  --fill: #fdeceb;        /* soft red tint */
  --fill-ink: #8f1714;    /* text on soft red tint */

  /* Illustration colors */
  --shelf: #ecc9c4;
  --park: #d7ead3;
  --pop: #f2b84b;

  /* Placeholder highlight (for details still to be filled in) */
  --ph: #fff1c7;
  --ph-ink: #6e4d00;

  /* Fonts */
  --display: "Outfit", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;

  /* Layout */
  --max-width: 1080px;
  --gutter: 16px;
  --radius: 14px;
}

/* Dark mode: follows the visitor's phone/computer setting */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171010; --surface: #211716; --ink: #f5e9e8; --muted: #bba5a3; --line: #3a2826;
    --brand: #ff6a5f; --brand-ink: #2a0605; --band: #c42320; --fill: #3b1715; --fill-ink: #ffc0ba;
    --shelf: #5a2a27; --park: #24372a; --pop: #d99a2b; --ph: #3d3110; --ph-ink: #f6d58f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #171010; --surface: #211716; --ink: #f5e9e8; --muted: #bba5a3; --line: #3a2826;
  --brand: #ff6a5f; --brand-ink: #2a0605; --band: #c42320; --fill: #3b1715; --fill-ink: #ffc0ba;
  --shelf: #5a2a27; --park: #24372a; --pop: #d99a2b; --ph: #3d3110; --ph-ink: #f6d58f;
  color-scheme: dark;
}


/* ==========================================================
   2. BASE
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
}
img { max-width: 100%; }
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--display); line-height: 1.12; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0; }

a { color: var(--brand); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

/* Centered page column with side gutters */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Standard page section */
section.block .wrap { padding-block: 64px; display: grid; gap: 28px; }
section.block.alt { background: var(--surface); border-block: 1px solid var(--line); }
.intro { max-width: 62ch; display: grid; gap: 10px; }


/* ==========================================================
   3. COMPONENTS
   ========================================================== */

/* Small uppercase label above headings */
.label { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--muted); }

/* Small print */
.fine { font-size: .88rem; color: var(--muted); }

/* Placeholder highlight: remove class="ph" once the real detail is in */
.ph { background: var(--ph); color: var(--ph-ink); padding: 0 .3em; border-radius: 4px; font-weight: 600; }

/* Buttons: <a class="btn solid"> or <a class="btn ghost"> */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--brand);
}
.btn.solid { background: var(--brand); color: var(--brand-ink); }
.btn.ghost { color: var(--brand); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Small pill button (e.g. Copy) */
.copy {
  font: inherit; font-size: .82rem; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  cursor: pointer;
}

/* Brand icon (white circle + cross on red) pinned to a box's top-left corner.
   Usage: <svg class="ic" aria-hidden="true"><use href="#mk"/></svg> inside any box below. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic {
  position: absolute; top: -18px; left: -14px;
  width: 44px; height: 44px; display: block;
  color: var(--band);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--ring, var(--bg)); /* ring matches the section background */
}
.storecard, .svc, .disc, .panel { position: relative; }
.alt { --ring: var(--surface); }
.boxhead { display: flex; align-items: center; gap: 12px; }

/* Boxes */
.svc {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 22px 22px; display: grid; gap: 8px; align-content: start;
}
.svc p { color: var(--muted); }

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 24px 24px; display: grid; gap: 14px; align-content: start; min-width: 0;
}

.disc {
  background: var(--fill); color: var(--fill-ink); border-radius: var(--radius);
  padding: 30px 24px 24px; display: grid; gap: 6px; align-content: start;
}
.disc .big {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.1; text-transform: uppercase; letter-spacing: .01em;
}
.disc .vat {
  justify-self: start; font-weight: 800; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--band); color: #ffffff; padding: 4px 12px; border-radius: 999px; margin-bottom: 4px;
}

/* Label + value pair stacked */
.row { display: grid; gap: 2px; }

/* Illustrations (drawn pictures) */
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-width: 0; }
.tile { margin: 0; border-radius: 18px; background: var(--fill); overflow: hidden; line-height: 0; }
.tile svg { width: 100%; height: 100%; display: block; }
.t1 { grid-row: span 2; }
.i-red { fill: var(--band); }
.i-white { fill: #ffffff; }
.i-ink { fill: var(--fill-ink); }
.i-wood { fill: var(--shelf); }
.i-pop { fill: var(--pop); }


/* ==========================================================
   4. SECTIONS
   ========================================================== */

/* --- Header: red band with the white logo --- */
header { background: var(--band); }
header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px; padding-block: 14px;
}
.logo { display: block; line-height: 0; }
.logo img { height: 60px; width: auto; max-width: 100%; }
nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-weight: 700; }
nav a { text-decoration: none; color: #ffffff; }
nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
header a:focus-visible { outline-color: #ffffff; }

/* --- Hero: text on the left, photo fading in on the right --- */
.hero { position: relative; overflow: hidden; }
.hero .wrap {
  position: relative; z-index: 1;
  display: grid; align-items: center;
  min-height: 660px; padding-block: 56px;
}
.hero-text { display: grid; max-width: 560px; min-width: 0; }
.hero h1 { margin-top: 10px; font-size: clamp(2.2rem, 5.5vw, 3.6rem); font-weight: 800; letter-spacing: -.015em; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero p.lede { font-size: 1.15rem; color: var(--muted); max-width: 52ch; margin-top: 16px; }

.hero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 35%; display: block; }
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, transparent) 14%, color-mix(in srgb, var(--bg) 0%, transparent) 48%),
    linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 0%, transparent) 18%);
}

/* Store hours card */
.storecard {
  margin-top: 40px; justify-self: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px 24px 20px; display: grid; gap: 12px;
  box-shadow: 0 14px 32px -20px rgba(222, 40, 38, .5);
}
.status { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--brand); }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-variant-numeric: tabular-nums; margin: 0; }
.hours dt { color: var(--muted); }
.hours dd { margin: 0; font-weight: 600; }

/* --- Services --- */
.svc-head { display: grid; grid-template-columns: 1fr minmax(0, 460px); gap: 40px; align-items: center; }
.svc-head .collage { height: 300px; grid-template-rows: 1fr 1fr; }
.grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 22px; padding-top: 12px; }
.grid > .svc { flex: 0 1 calc((100% - 44px) / 3); min-width: 0; }

/* --- Discounts --- */
.discount { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 22px; padding-top: 12px; }

/* --- Find us (address, map, contact) --- */
.visit { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 40px 22px; padding-top: 12px; }
.mapbox { border: 1px solid var(--line); border-radius: 12px; background: var(--fill); height: 240px; overflow: hidden; }
.mapbox iframe { display: block; width: 100%; height: 100%; border: 0; }
.mapbtn {
  justify-self: start; position: relative; z-index: 1;
  margin: -40px 0 0 16px; white-space: nowrap;
  box-shadow: 0 0 0 4px var(--surface), 0 8px 18px -8px rgba(0, 0, 0, .35);
}
.copyline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.phone {
  font-family: var(--display); font-weight: 800; font-size: 1.6rem;
  text-decoration: none; font-variant-numeric: tabular-nums;
}

/* --- Footer --- */
footer { background: var(--band); color: #ffffff; }
footer .wrap {
  padding-block: 36px 32px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; font-size: .9rem;
}
.flogo { display: block; line-height: 0; margin-bottom: 10px; }
.flogo img { height: 64px; width: auto; max-width: 100%; }
footer a:focus-visible { outline-color: #ffffff; }
footer .ph { background: rgba(255, 255, 255, .2); color: #ffffff; }


/* ==========================================================
   5. RESPONSIVE
   ========================================================== */

/* Tablet and below */
@media (max-width: 820px) {
  .hero-photo { position: relative; width: 100%; height: 400px; }
  .hero-photo::after { background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 0%, transparent) 45%); }
  .hero .wrap { min-height: 0; margin-top: -70px; padding-block: 0 40px; }
  .hero-text { max-width: none; }
  .svc-head { grid-template-columns: 1fr; }
  .grid > .svc { flex-basis: calc((100% - 22px) / 2); }
  .visit, .discount { grid-template-columns: 1fr; }
}

/* Phone */
@media (max-width: 600px) {
  .wrap {
    padding-left: max(1cm, env(safe-area-inset-left, 0px));
    padding-right: max(1cm, env(safe-area-inset-right, 0px));
  }
  section.block .wrap { padding-block: 2cm; }
  .hero .wrap { padding-bottom: 2cm; }

  header .wrap {
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
    flex-direction: column; justify-content: center; gap: 10px;
  }
  nav { justify-content: center; }
  .cta { justify-content: center; }
  .mapbtn { justify-self: center; margin: -40px 0 0; font-size: .9rem; padding: 10px 16px; }
  footer .wrap { padding-block: 2cm; }
}

/* Small phone */
@media (max-width: 520px) {
  .collage { gap: 10px; }
  .grid > .svc { flex-basis: 100%; }
  .logo img { height: 48px; }
}