/* Flagler HVAC Guide — "Current" theme: vibrant, saturated blue.
   Same markup/class names as the blueprint build; this file only
   changes the visual language (color, type, card/button treatment). */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("space-grotesk-600.woff2") format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("space-grotesk-700.woff2") format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("inter-400.woff2") format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("inter-500.woff2") format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("inter-600.woff2") format('woff2');
}

:root {
  --color-bg: #FFFFFF;
  --color-surface: #EEF3FF;
  --color-text: #0E1A33;
  --color-accent: #2F5CFF;
  --color-accent-2: #00C2FF;
  /* Homepage redesign tokens (design spec section 2). The spec's
     --color-primary and --color-accent are --color-accent and
     --color-accent-2 above. */
  --color-heading: #10204F;
  --color-body: #53627A;
  --color-muted: #738198;
  --color-bg-soft: #F6FAFF;
  --color-bg-blue: #EAF7FF;
  --color-border: #DCE8F2;
  --color-border-strong: #C9DBEB;
  --color-divider: color-mix(in srgb, #0E1A33 12%, transparent);

  --color-neutral-100: #F3F5F8;
  --color-neutral-200: #E6E9EF;
  --color-neutral-300: #CBD1DC;
  --color-neutral-400: #A6AFC0;
  --color-neutral-500: #7C879C;
  --color-neutral-600: #5B6478;
  --color-neutral-700: #414A5C;
  --color-neutral-800: #262E40;
  --color-neutral-900: #131A29;

  --color-accent-100: #E7EDFF;
  --color-accent-200: #C7D6FF;
  --color-accent-300: #A0B8FF;
  --color-accent-400: #6E8FFF;
  --color-accent-500: #4A70FF;
  --color-accent-600: #2F5CFF;
  --color-accent-700: #1E3FCB;
  --color-accent-800: #172F99;
  --color-accent-900: #101F66;

  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-sm: 0 2px 6px color-mix(in srgb, var(--color-accent) 12%, transparent);
  --shadow-md: 0 10px 24px color-mix(in srgb, var(--color-accent) 16%, transparent);
  --shadow-lg: 0 20px 48px color-mix(in srgb, var(--color-accent) 20%, transparent);
  --shadow-card: 0 8px 24px rgba(16, 32, 79, 0.07);

  --radius-pill: 999px;

  /* Page container: content width plus side gutters */
  --content-width: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

/* The old build used .blueprint + .corner crosshair registration marks
   as the card boundary. This theme reads containers through color,
   radius and shadow instead — corner marks are switched off, and the
   card look moves onto .blueprint itself so the existing markup (tier
   panels, dialogs, the hero image frame) picks up the new language
   with no HTML changes. */
.blueprint {
  position: relative;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.blueprint > .corner { display: none; }

.duotone { position: relative; overflow: hidden; border-radius: var(--radius-md); }
.duotone::after { content: none; }

*, *::before, *::after { box-sizing: border-box; }
/* Inline display styles would otherwise override the hidden attribute. */
[hidden] { display: none !important; }
body { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 var(--space-2);
}
h1 { font-size: 44px; }
h2 { font-size: 30px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { font-size: 11px; margin-top: var(--space-1); color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 25%, transparent); }

.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* — buttons: filled pill for primary, soft-tint pill for secondary — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-weight: 600;
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: 11px 20px; border-radius: 999px;
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-accent-700); }
.btn-primary:active { background: var(--color-accent-800); }
.btn-secondary { background: var(--color-accent-100); color: var(--color-accent-700); }
.btn-secondary:hover { background: var(--color-accent-200); }
.btn-secondary:active { background: var(--color-accent-200); color: var(--color-accent-800); }
.btn-accent { background: var(--color-accent-2); color: var(--color-heading); }
/* Heading-color text on the accent fills: 7.6:1 normal, 9.5:1 hover,
   10.9:1 pressed. Focus keeps the fill and adds the blue outline. */
.btn-accent:hover { background: #5CD8FF; }
.btn-accent:active { background: #8FE3FF; }
.btn-outline-accent {
  background: #fff; color: var(--color-heading);
  border: 2px solid var(--color-accent-2);
}
/* Heading-color text: 15.7:1 on white, 14.3:1 hover, 13.1:1 pressed.
   Focus keeps the look and adds the blue outline. */
.btn-outline-accent:hover { background: #E3F8FF; border-color: #00A8DD; }
.btn-outline-accent:active { background: #C9F1FF; }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); border-radius: var(--radius-sm); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.input {
  width: 100%; min-height: 40px; padding: 8px 12px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-sm);
}
.input:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }

/* — cards: soft blue-tinted shadow, rounded corners, no border needed — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--color-surface);
}
.card-kicker { font-size: 11px; letter-spacing: 0.02em; color: var(--color-accent); font-weight: 600; }
.card-title { font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13px; opacity: 0.75; flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.01em; padding: 4px 12px; border-radius: 999px;
}
.tag-accent { background: var(--color-accent); color: #fff; }
.tag-accent-2 { background: var(--color-accent-2); color: #04223A; }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-700); }
.tag-outline { border: 1px solid var(--color-accent-300); color: var(--color-accent-700); background: var(--color-accent-100); }

/* — dialog (kept for markup parity; not opened in this static build) — */
.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent); }
.dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-lg); }
.dialog-title { font-family: var(--font-heading); font-weight: 700; font-size: 20px; }
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — card family overrides: rounded, shadowed, no border — */
.card { box-shadow: var(--shadow-sm); }
.card:hover { box-shadow: var(--shadow-md); }
a.card:hover { text-decoration: none; }

/* — layout helpers — */
.container { width: min(100% - 2 * var(--gutter), var(--content-width)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Section heading block (homepage, directory): title and intro on the left,
   an optional "View all" link on the right. */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: 8px 24px; margin-bottom: 18px; padding-inline: 10px;
}
.section-title {
  margin: 0;
  font-size: clamp(1.875rem, 3.2vw, 2.4rem); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--color-heading);
}
.section-intro { margin: 6px 0 0; font-size: 15px; color: var(--color-body); }
@media (max-width: 639px) {
  .section-head { padding-inline: 0; }
}

/* Links without a destination yet (PendingLink.astro) look and hover like
   real ones. */
[data-pending-link] { cursor: pointer; }

/* Keep the page from scrolling behind an open profile popup */
html:has(dialog[open]) { overflow: hidden; }

@media (max-width: 700px) {
  .article-layout { flex-direction: column; }
}