/* ============================================================
   Components — anatomy and states per handoff §5.
   Consumes tokens.css. No hard-coded design values.
   → WordPress: bottom of style.css (or enqueued separately)

   INFERRED (not in handoff, flagged in DESIGN-DECISIONS.md):
   - .accordion   (FAQ) — built from outlined-card + hairline rules
   - .compare     — neutral grey for the "DIY" column instead of --danger,
                    because --danger reads as an error state, not a comparison
   ============================================================ */

/* ---- Buttons (handoff §5) ---------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 52px;
  padding: 15px 28px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: var(--fs-button);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--green-900); color: var(--paper); }
.btn--primary:hover { background: var(--green-700); }

.btn--secondary {
  background: var(--paper);
  color: var(--green-900);
  border: 1.5px solid var(--green-900);
  padding: 13.5px 26.5px;      /* keeps the 52px box */
}
.btn--secondary:hover { background: var(--green-50); }

/* On tinted/dark backgrounds the outline softens to --line-input */
.section--wash .btn--secondary { border-color: var(--line-input); }

.btn--text {
  height: auto; padding: 0;
  background: none; color: var(--green-900);
}
.btn--text:hover { color: var(--green-600); }
.btn--text::after { content: "→"; }

.btn--on-dark { background: var(--paper); color: var(--green-900); }
.btn--on-dark:hover { background: var(--green-50); }

.btn[disabled], .btn--disabled {
  background: #C6D3C6; color: var(--paper);
  cursor: not-allowed; pointer-events: none;
}

/* ---- Pill / badge (handoff §5) ----------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  background: var(--green-50);
  color: var(--green-900);
}
.pill--emphasis { background: var(--green-900); color: var(--paper); }
.pill--neutral {
  background: transparent;
  border: 1px solid var(--line-input);
  color: var(--ink-muted);
  font-weight: 500;
}
.pill__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-500); flex: none;
}

/* ---- Cards — three treatments (handoff §5) ----------------- */

.card {
  border-radius: var(--r-card);
  padding: var(--s-8);
  /* Column layout lets a card pin its footer (review author, card__link) to the
     bottom, so those elements line up across a grid row regardless of how much
     copy each card carries. */
  display: flex;
  flex-direction: column;
}
/* Body copy takes the slack so footers sit flush at the bottom */
.card > p { flex-grow: 1; }
/* 1. Outlined */
.card--outlined { background: var(--paper); border: 1px solid var(--line); }
/* Hover lift applies to INTERACTIVE cards only */
a.card--outlined,
.card--interactive {
  transition: box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
a.card--outlined:hover,
.card--interactive:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: transparent;      /* never both shadow and border */
  text-decoration: none;
}
/* 2. Tinted */
.card--tinted { background: var(--green-50); }
.card--tinted .eyebrow { color: var(--green-600); }
/* 3. Inverted */
.card--inverted { background: var(--green-900); color: var(--on-dark-muted); }
.card--inverted h3, .card--inverted .card__title { color: var(--on-dark); }
.card--inverted .eyebrow { color: var(--green-300); }

.card__icon { width: 30px; height: 30px; margin-bottom: var(--s-4); }
.card__title { font-size: 20px; font-weight: 600; margin: 0 0 var(--s-2); }
.card p { font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.card--inverted p { color: var(--on-dark-muted); }
.card__link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-4);
  font-size: 15px; font-weight: 600; color: var(--green-900);
}
.card__link::after { content: "→"; }

/* ---- Form fields (handoff §5 Input) ------------------------- */

.form { margin-top: var(--s-8); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

.field { margin-bottom: var(--s-4); }
.field label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--s-2);          /* 8px gap, per spec */
}
.field__opt { color: var(--ink-faint); font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font);
  font-size: 16px;                    /* 16px prevents iOS zoom-on-focus */
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line-input);
  border-radius: var(--r-input);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(87, 185, 71, 0.18);
}

/* Error state. Applied on BLUR, not on keystroke - see form.js */
.field--error input,
.field--error select,
.field--error textarea { border-color: var(--danger); }
.field__error {
  margin: var(--s-2) 0 0;
  font-size: 13px;
  color: var(--danger);
}

/* Honeypot: off-screen rather than display:none, which some bots skip */
.field--trap {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---- Illustration scenes (illustration handoff) -------------
   Monoline, 4px shamrock stroke, one fresh-green accent per drawing.
   Rule: scenes sit on a wash panel, never directly on white or shamrock.
   Rule: legible from ~220px wide; below that use an icon instead. */

.scene {
  background: var(--green-50);
  border-radius: var(--r-panel);
  overflow: hidden;
}
.scene svg { width: 100%; height: auto; display: block; }
/* Inside a card the panel takes the card's radius: an inner corner rounder than
   its container reads as a mistake. */
.card .scene { border-radius: var(--r-card); margin-bottom: var(--s-6); }

/* Purpose-drawn UI icons ship at 32px with their own stroke colour. */
.ui-icon { display: inline-block; }
.ui-icon svg { width: 30px; height: 30px; display: block; }

/* Closing CTA scene: small, centred, sits above the headline */
.cta-scene { max-width: 260px; margin: 0 auto var(--s-6); }

/* On shamrock, the handoff specifies inverting to white with sprout as accent.
   CSS beats the SVG's presentation attributes, so no file edits needed. */
.scene--on-dark { background: transparent; }
.scene--on-dark svg { stroke: var(--paper); }
.scene--on-dark svg [stroke="#57B947"] { stroke: var(--green-300); }

/* ---- Icons (handoff §4) ------------------------------------
   Outline only, 2px stroke, round caps/joins, always shamrock. */
.icon {
  width: 24px; height: 24px;
  fill: none;
  stroke: var(--green-900);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icon--lg { width: 30px; height: 30px; }
.section--dark .icon { stroke: var(--green-300); }

/* ---- Header (handoff §5) ----------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 20px var(--s-8);
}
.site-header__inner {
  max-width: var(--container); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
}
.nav-links { display: flex; align-items: center; gap: var(--s-6); list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-size: var(--fs-nav); font-weight: 500; color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}
.nav-links a:hover { color: var(--green-500); text-decoration: none; }
.site-header .btn { height: auto; padding: 12px 22px; white-space: nowrap; }
@media (max-width: 900px) {
  .nav-links { display: none; }   /* → drawer; quote button stays visible */
}
@media (max-width: 640px) {
  .site-header { padding: var(--s-3) var(--s-4); }
  .site-header .btn { padding: 10px 16px; font-size: var(--fs-small); }
  .logo { gap: var(--s-3); }
  .logo__mark { width: 30px; height: 30px; }
  .logo__name { font-size: 17px; }
  .logo__sub { font-size: 4.9px; }
}

/* ---- Logo lockup (handoff §1) ------------------------------ */

.logo { display: inline-flex; align-items: center; gap: 22px; }
.logo__mark { width: 36px; height: 36px; flex: none; }
.logo__word { display: block; line-height: 0.9; }
.logo__name {
  display: block;
  font-size: 21px; font-weight: 700;
  letter-spacing: -0.03em; color: var(--green-900);
}
.logo__sub {
  display: block;
  font-size: 6.1px;              /* ≈29% of name size */
  font-weight: 500;
  letter-spacing: 0.335em;
  color: var(--green-500);
  margin-top: 3px;
}

/* ---- Accordion / FAQ  [INFERRED] --------------------------- */

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-6) 0;
  font-size: 18px; font-weight: 600; color: var(--ink);
  cursor: pointer; list-style: none;
  transition: color var(--t-fast) var(--ease);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--green-600); }
.accordion summary::after {
  content: ""; flex: none;
  width: 12px; height: 12px;
  border-right: 2px solid var(--green-900);
  border-bottom: 2px solid var(--green-900);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-base) var(--ease);
}
.accordion details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.accordion details > p {
  margin: 0 0 var(--s-6);
  max-width: var(--measure);
  color: var(--ink-muted);
}

/* ---- Compare (pro vs DIY)  [INFERRED colour choice] --------
   The system has no positive/negative pair; --danger would read as
   an error. Ticks are shamrock, crosses are neutral grey. */
.compare__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.compare__list li { display: flex; gap: var(--s-3); font-size: 15px; line-height: 1.6; }
.icon--yes { stroke: var(--green-500); }
.icon--no  { stroke: var(--ink-faint); }
/* On shamrock cards, Sprout is the AA-safe positive marker */
.icon--yes-dark { stroke: var(--green-300); }
.card--inverted .compare__list li { color: var(--on-dark-muted); }

/* ---- Media (handoff §6) ------------------------------------
   Photography: real jobs, natural light, 3:2, rounded to 24px. */

.media {
  background: var(--green-100);
  border: 1px dashed var(--line-input);
  border-radius: var(--r-panel);
  aspect-ratio: 3 / 2;
  display: grid; place-items: center;
  text-align: center; padding: var(--s-6);
  color: var(--ink-faint); font-size: var(--fs-small);
}
/* Real photography: same footprint, no dashed placeholder treatment */
.media--photo {
  border: 0;
  padding: 0;
  overflow: hidden;
  background: var(--green-100);
}
.media--photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.media--portrait { aspect-ratio: 4 / 5; }
.media--square { aspect-ratio: 1 / 1; }

/* ---- Stat / fact row (entity strip) ------------------------ */

.facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6);
  margin: 0; padding: var(--s-6) 0 0;
  border-top: 1px solid var(--line);
}
.facts dt {
  font-size: var(--fs-eyebrow); letter-spacing: 0.20em; text-transform: uppercase;
  font-weight: 600; color: var(--green-600); margin-bottom: var(--s-1);
}
.facts dd { margin: 0; font-size: 15px; font-weight: 500; color: var(--ink); }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; } }

/* ---- Split (hero + specialty slot) ------------------------- */

.split { display: grid; grid-template-columns: 55fr 45fr; gap: var(--s-16); align-items: center; }
@media (max-width: 900px) { .split { gap: var(--s-12); } }
@media (max-width: 640px) { .split { grid-template-columns: 1fr; } }

/* ---- Steps (process) --------------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
.steps--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .steps--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .steps--5 { grid-template-columns: 1fr; } }
.step__num {
  font-size: var(--fs-eyebrow); letter-spacing: 0.20em; text-transform: uppercase;
  font-weight: 600; color: var(--green-600); margin-bottom: var(--s-3);
}
.step h3 { font-size: 18px; margin-bottom: var(--s-2); }
.step p { font-size: 15px; }
.section--dark .step__num { color: var(--green-300); }
.section--dark .step p { color: var(--on-dark-muted); }

/* ---- Reviews ----------------------------------------------- */

.review__stars { color: var(--green-500); letter-spacing: 0.1em; margin-bottom: var(--s-3); }
/* margin-top:auto pins the author row to the bottom of the card, so author rows
   line up across a grid even when the quotes run to different line counts.
   Requires .card to be a flex column - see .card above. */
.review__author {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: auto; padding-top: var(--s-6);
}
.review__avatar {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--green-100); flex: none;
  /* centre the initial: without this it sits top-left and reads as if it is
     outside the circle */
  display: grid; place-items: center;
  font-size: 15px; font-weight: 600; color: var(--green-900);
  line-height: 1;
}
.review__name { font-size: 15px; font-weight: 600; color: var(--ink); }

/* ---- Areas -------------------------------------------------- */

/* Service-area diagram — schematic, drawn from tokens so it re-themes free */
.areas-map {
  background: var(--green-50);
  border-radius: var(--r-panel);
  padding: var(--s-4);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.areas-map svg { width: 100%; height: 100%; display: block; }
.areas-map__sea { fill: var(--green-100); }
.areas-map__label--sm { font-size: 12px; letter-spacing: 0.10em; }
.areas-map__sea-label {
  fill: var(--ink-faint); font-size: 13px; font-weight: 500;
  letter-spacing: 0.22em; text-anchor: middle;
}
.areas-map__zone {
  fill: var(--paper);
  stroke: var(--line);
  stroke-width: 1.5;
}
.areas-map__zone--focus { fill: var(--green-900); stroke: none; }
.areas-map__label {
  fill: var(--ink); font-size: 15px; font-weight: 600;
  letter-spacing: 0.12em; text-anchor: middle;
}
.areas-map__label--focus { fill: var(--paper); }
.areas-map__split { stroke: rgba(255,255,255,0.35); stroke-width: 1.5; }
.areas-map__sub {
  fill: var(--green-300); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-anchor: middle;
}
.areas-map text { font-family: var(--font); }

.areas__col ul { list-style: none; margin: 0; padding: 0; }
.areas__col li { padding: 6px 0; font-size: 15px; color: var(--ink-muted); }
.areas__col h3 {
  font-size: var(--fs-eyebrow); letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--green-600); margin-bottom: var(--s-3);
}

/* ---- Footer ------------------------------------------------- */

.site-footer { background: var(--green-900); color: var(--on-dark-muted); padding: var(--s-16) var(--s-8) var(--s-8); }
.site-footer a { color: var(--on-dark-muted); }
.site-footer a:hover { color: var(--paper); }
.site-footer h3 {
  color: var(--paper);
  font-size: var(--fs-eyebrow); letter-spacing: 0.20em; text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 5px 0; font-size: 15px; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.14);
  margin-top: var(--s-12); padding-top: var(--s-6);
  font-size: 13px; color: var(--green-300);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3);
}

/* ---- Cookie consent (handoff has no spec; built from system primitives) ----
   Accept and Reject share .consent__btn deliberately: identical size, weight
   and colour. Any visual advantage given to Accept is a "nudge" under the
   Irish DPC guidance and is the usual reason a banner fails review. If this
   ever needs restyling, restyle both or neither. */

.consent {
  position: fixed;
  left: var(--s-4); right: var(--s-4); bottom: var(--s-4);
  z-index: 9999;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: 0 8px 40px rgba(11, 43, 22, 0.16);
  padding: var(--s-6);
  max-width: 1100px;
  margin: 0 auto;
}
.consent[hidden] { display: none; }

.consent__inner {
  display: flex;
  gap: var(--s-8);
  align-items: flex-start;
  flex-wrap: wrap;
}
.consent__main { flex: 1 1 420px; min-width: 0; }
.consent__title { font-size: var(--fs-h4); margin: 0 0 var(--s-2); }
.consent__body {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-muted);
  max-width: 68ch;
}
.consent__body a { color: var(--green-700); text-decoration: underline; }

/* A display: rule beats the browser's default [hidden] { display: none },
   so anything here that toggles via the hidden attribute must say so itself.
   Without this the options panel and Save button render on first paint. */
.consent [hidden] { display: none !important; }

.consent__options {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.consent__opt {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--ink-muted);
  cursor: pointer;
}
.consent__opt input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--green-600); }
.consent__opt input:disabled { cursor: not-allowed; }
.consent__opt strong { color: var(--ink); }

.consent__actions {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
/* Equal prominence. Both buttons, always. */
.consent__btn { min-width: 132px; justify-content: center; }
.consent__manage { white-space: nowrap; }

@media (max-width: 720px) {
  .consent { left: 0; right: 0; bottom: 0; border-radius: var(--r-panel) var(--r-panel) 0 0; padding: var(--s-5); }
  .consent__actions { width: 100%; }
  .consent__btn { flex: 1 1 auto; }
}

/* ---- Quote form: submission states ---------------------------------- */

/* Failure only. Success replaces the form entirely, so it needs no colour
   here. --danger is the system's one non-green, used as intended. */
.form__status {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--danger);
  background: var(--paper-2, #F3F1EC);
  color: var(--ink);
  font-size: var(--fs-small);
}
.form__status[hidden] { display: none; }

.form__done {
  border: 1.5px solid var(--green-500);
  border-radius: var(--r-panel);
  padding: var(--s-8);
  background: var(--green-50);
}
.form__done[hidden] { display: none; }
.form__done:focus { outline: 2px solid var(--green-600); outline-offset: 3px; }

.form button[type="submit"][disabled] { opacity: .6; cursor: progress; }

/* ---- Legal pages (privacy, terms) -----------------------------------
   Long-form reading, not marketing layout: a slightly wider measure than
   body copy (legal text is scanned by section, not read in a column), clear
   heading rhythm, and numbered sections so a clause can be cited. */

.legal { max-width: 72ch; }
.legal h2 {
  font-size: var(--fs-h3);
  margin: var(--s-12) 0 var(--s-4);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--s-8); }
.legal h3 { font-size: var(--fs-h4); margin: var(--s-8) 0 var(--s-3); }
.legal p, .legal li { color: var(--ink-muted); }
.legal p { margin: 0 0 var(--s-4); }
.legal ul { margin: 0 0 var(--s-4); padding-left: var(--s-6); }
.legal li { margin-bottom: var(--s-2); }
.legal strong { color: var(--ink); }
.legal a { color: var(--green-700); text-decoration: underline; }

/* Effective date / plain-English intro */
.legal__meta {
  display: flex; gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  background: var(--green-50);
  border-radius: var(--r-input);
  font-size: var(--fs-small);
  margin-bottom: var(--s-8);
}

/* Anything Grant still has to confirm. Deliberately loud: this must not
   reach production unnoticed. */
.legal mark {
  background: #FFF3C4;
  color: var(--ink);
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
}