/* ============================================================
   Theme: CIVIC  -  editorial / newspaper barbershop
   ------------------------------------------------------------
   For: calm, established barbershops - Mount Lawley / Subiaco
   feel. Mood: a tidy mid-century shop with white tile, framed
   prints on the wall, the morning paper folded on the counter.
   A restrained serif display (Lora) over Inter body, one deep
   editorial red as the only accent, hairline rules, no
   shadows. A LIGHT theme. Volume turned down on purpose.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

.theme-civic {
  /* -------- Surfaces (warm newsprint white) ------------- */
  --bg:        #F4EFE6;
  --bg-2:      #ECE5D7;
  --surface:   #FBF7EE;

  /* -------- Text (deep slate on warm white) ------------- */
  --fg:            #1F2933;
  --fg-muted:      #5B6770;
  --heading-color: #14202B;

  /* -------- Accent (single deep editorial red) ---------- */
  --accent:        #8C2E2B;
  --accent-bright: #A03832;
  --accent-hover:  #6F2421;
  --accent-2:      #8C2E2B;   /* single accent, no second pop  */
  --on-accent:     #FBF7EE;

  --hairline:   rgba(31, 41, 51, 0.14);
  --hairline-2: rgba(31, 41, 51, 0.24);

  /* -------- Hero (deep slate veil over photo) ----------- */
  --hero-ink: #FBF7EE;
  --hero-min-h: 84vh;
  --hero-overlay:
    radial-gradient(120% 95% at 50% 40%, rgba(20,32,43,0.36) 0%, rgba(20,32,43,0.58) 66%, rgba(14,22,30,0.86) 100%),
    linear-gradient(180deg, rgba(20,32,43,0.42) 0%, rgba(20,32,43,0.34) 42%, rgba(14,22,30,0.86) 100%);

  /* -------- Footer (deep slate, cream type) ------------- */
  --footer-bg:     #14202B;
  --footer-fg:     rgba(251, 247, 238, 0.74);
  --footer-strong: #FBF7EE;
  --footer-head:   #B8A87E;

  /* -------- Type ---------------------------------------- */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.4rem, 5.5vw + 1rem, 4.6rem);
  --heading-weight: 500;
  --heading-tracking: -0.005em;
  --eyebrow-tracking: 0.18em;

  /* -------- Tight corners, hairline rules --------------- */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-pill: 999px;
  --radius-btn: 4px;       /* tight, editorial */
  --rule-width: 40px;
  --rule-height: 1px;
  --rule-color: var(--accent);

  --shadow-1: none;
  --shadow-2: none;
}

/* ---- Structural personality: editorial / calm ----------- */

.theme-civic h1,
.theme-civic h2,
.theme-civic h3,
.theme-civic .hero__title,
.theme-civic .footer__wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* Hairline section rule */
.theme-civic .rule { height: 1px; width: 40px; }

/* Matte panels with hairline borders, no glow */
.theme-civic .menu-group {
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: none;
}
.theme-civic .menu-group__title { border-bottom: 1px solid var(--hairline-2); }
.theme-civic .menu-group__title h3 { font-family: var(--font-display); font-weight: 600; }
.theme-civic .menu-row__price {
  color: var(--accent);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}

/* Primary button: deep red, calm hover */
.theme-civic .btn {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.theme-civic .btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}

/* Ghost button on hero: cream hairline, fills cream on hover */
.theme-civic .btn--ghost {
  background: transparent;
  color: var(--hero-ink);
  border: 1px solid color-mix(in srgb, var(--hero-ink) 55%, transparent);
}
.theme-civic .btn--ghost:hover {
  background: var(--hero-ink);
  color: #14202B;
  border-color: var(--hero-ink);
}

/* Quiet links: red on hover */
.theme-civic .link-quiet:hover { color: var(--accent-bright); border-color: currentColor; }

/* Hairline social circles, fill red on hover */
.theme-civic .socials a { border-color: var(--hairline-2); color: var(--fg); }
.theme-civic .socials a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* TODAY + map-open chips read as cream-on-red */
.theme-civic .hours-table .badge,
.theme-civic .map__open { background: var(--accent); color: var(--on-accent); }
.theme-civic .map__open:hover { background: var(--accent-hover); color: var(--on-accent); }