/* ==========================================================================
   Fence Painters Sydney - components.css
   --------------------------------------------------------------------------
   Shared UI component layer (Card / Eyebrow / Button), ported from the
   Sydney South component library (shared/ssds-components.css).

   HOW THIS FILE WORKS
   Loaded AFTER styles.css, so it overrides presentation only. It adds no new
   class names and requires no markup changes: every selector targets elements
   that already exist (.btn, .card, .kicker, .service-card, .step-card,
   .figure-card, .quote-card, .faq details). Remove the <link> in index.html
   and the site returns to its previous appearance exactly.

   WHAT WAS ADOPTED
   The component *form*: geometry, spacing, the zero-blur offset shadow with a
   trailing arrow, the eyebrow pill, one unified card language, focus
   discipline and reduced-motion support.

   WHAT WAS DELIBERATELY NOT ADOPTED
   The source palette and typefaces. Fence Painters' navy and green already
   map onto the source's trust/go roles, and the yellow is the brand's primary
   CTA colour and matches the livery. Bebas Neue is likewise identity-carrying.
   Swapping either would change the brand, not the design language. To move
   fully onto the source palette, change the role values in section 1 only.

   Presentation only: no data, endpoints, credentials or keys belong in here.
   ========================================================================== */

/* ============================================================
   1. ROLE TOKENS
   The source's three-role system, filled with this brand's own
   colours:
     ink   - body copy and headings
     trust - structure and credentials  (their navy)
     go    - action and outcome         (their green)
     cta   - the brand's signature CTA  (their yellow)
   Change these six values to re-theme every component below.
   ============================================================ */
:root {
  --ink-role: var(--ink);
  --ink-muted-role: var(--muted);

  --trust: var(--navy);
  --trust-deep: var(--navy-deep);
  --trust-tint: #e9eff5;

  /* Their --green-dark, not --green: white text on #2e8f63 measures 4.02:1,
     short of AA at the 1.35rem button size. #23724e measures 5.85:1. */
  --go: #23724e;
  --go-hover: #1a5a3d;
  --go-tint: #e8f3ed;

  --cta: var(--yellow);
  --cta-hover: var(--yellow-hover);

  /* RGB triplets so every rgba() still resolves to a token */
  --trust-rgb: 20, 56, 92;
  --trust-deep-rgb: 14, 39, 64;
  --white-rgb: 255, 255, 255;

  --radius-btn: 14px;
  --radius-card: 1.25rem;
  --shadow-card: 0 12px 30px rgba(var(--trust-rgb), 0.08);
  --shadow-card-lift: 0 20px 50px rgba(var(--trust-rgb), 0.15);
}

/* ============================================================
   2. FOCUS
   Replaces the orange ring, which measured ~2.2:1 on white and
   read as decoration rather than a focus state.
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--go);
  outline-offset: 2px;
}

/* On the dark bands --go drops below 3:1, so those take a white ring */
.site-header :focus-visible,
.hero :focus-visible,
.section--dark :focus-visible,
.site-footer :focus-visible,
.btn--green:focus-visible {
  outline-color: var(--white);
}

/* ============================================================
   3. EYEBROW  (.kicker)
   A full pill with a 1px border, a 3px zero-blur offset shadow
   matching the buttons, and a small accent dot. Dropping the
   uppercase and the 0.12em tracking is what separates this from
   the stretched kicker it replaces.
   ============================================================ */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.56rem;
  margin-bottom: 1rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--trust);
  border-radius: 6.25rem;
  background: var(--trust-tint);
  box-shadow: 3px 3px 0 0 var(--trust);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: var(--trust);
}

.kicker::before {
  content: "";
  flex-shrink: 0;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: var(--go);
}

/* The pill carries its own light ground, so it reads the same on the dark
   bands. Re-assert the colour, which the section rule would otherwise win. */
.section--dark .kicker {
  color: var(--trust);
}

/* ============================================================
   4. BUTTONS
   14px radius, 2px border and the signature zero-blur offset
   shadow with a trailing arrow. The role stays encoded in the
   fill, not only in the offset. Type size, weight and the display
   face are inherited from styles.css so the labels keep their
   existing voice.
   ============================================================ */
.btn {
  --btn-offset: 5px;
  --btn-offset-colour: var(--ink-role);
  position: relative;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  box-shadow: var(--btn-offset) var(--btn-offset) 0 0 var(--btn-offset-colour);
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Trailing arrow. Decorative: every label already reads correctly
   without it. */
.btn::after {
  content: "\2192";
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.15s ease;
}

.btn:hover::after,
.btn:focus-visible::after {
  transform: translateX(3px);
}

/* Presses into its own offset, so the affordance survives greyscale */
.btn:active {
  transform: translate(var(--btn-offset), var(--btn-offset));
  box-shadow: 0 0 0 0 var(--btn-offset-colour);
}

/* Primary CTA: the brand yellow, navy label */
.btn--yellow {
  --btn-offset-colour: var(--trust-deep);
  background: var(--cta);
  border-color: var(--cta);
  color: var(--navy-deep);
}

.btn--yellow:hover {
  --btn-offset-colour: var(--go);
  background: var(--cta-hover);
  border-color: var(--cta-hover);
}

/* Secondary action: solid go, white label, 5.85:1 */
.btn--green {
  --btn-offset-colour: var(--ink-role);
  background: var(--go);
  border-color: var(--go);
  color: var(--white);
}

.btn--green:hover {
  --btn-offset-colour: var(--trust);
  background: var(--go-hover);
  border-color: var(--go-hover);
}

/* On the dark hero and footer the offset has to be lighter than the ground */
.hero .btn--yellow,
.section--dark .btn--yellow,
.site-header .btn--yellow {
  --btn-offset-colour: rgba(var(--white-rgb), 0.55);
}

.hero .btn--yellow:hover,
.section--dark .btn--yellow:hover,
.site-header .btn--yellow:hover {
  --btn-offset-colour: var(--white);
}

.hero .btn--green,
.section--dark .btn--green,
.site-header .btn--green {
  --btn-offset-colour: rgba(var(--white-rgb), 0.55);
}

.hero .btn--green:hover,
.section--dark .btn--green:hover,
.site-header .btn--green:hover {
  --btn-offset-colour: var(--white);
}

/* The quote cards are light surfaces sitting on the dark hero and final
   band, so their buttons keep the on-light offset rather than the ground's
   white one, which would vanish against the card. */
.quote-card .btn--yellow {
  --btn-offset-colour: var(--trust-deep);
}

.quote-card .btn--yellow:hover {
  --btn-offset-colour: var(--go);
}

.quote-card .btn--green {
  --btn-offset-colour: var(--ink-role);
}

.quote-card .btn--green:hover {
  --btn-offset-colour: var(--trust);
}

/* The compact header pair takes the smaller offset */
.site-header .btn {
  --btn-offset: 3px;
}

/* Full-width buttons: keep the label and its arrow together */
.btn--block {
  gap: 0.6rem;
}

/* ============================================================
   5. CARDS
   One card language: 1px border, shared radius, white ground and
   a single shadow, with a lift on the interactive ones.
   ============================================================ */
.card,
.service-card,
.step-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover,
.service-card:hover,
.step-card:hover {
  transform: translateY(-3px);
  border-color: var(--trust);
  box-shadow: var(--shadow-card-lift);
}

/* .service-card and .step-card carry .card in the markup in most places, but
   not all: give the standalone ones the same padding. */
.service-card:not(.card),
.step-card:not(.card) {
  padding: 1.5rem;
}

/* Icon plate, matching the source's rounded-square treatment */
.service-card__icon,
.trust-item__icon {
  border-radius: 0.9rem;
  background: var(--trust-tint);
  border: 0;
  color: var(--trust);
}

.service-card__icon {
  width: 3rem;
  height: 3rem;
}

.trust-item__icon {
  width: 2.9rem;
  height: 2.9rem;
}

/* Process step numerals sit in go, as the outcome role */
.step-card__num {
  color: var(--go);
}

/* --- Media cards --- */
.figure-card {
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.figure-card figcaption {
  background: var(--trust);
}

.split__media img {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* --- Quote form card: the page's most prominent surface --- */
.quote-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 22px 48px rgba(var(--trust-rgb), 0.18);
}

.field input,
.field select,
.field textarea {
  border-radius: 0.625rem;
  border-color: #b8c2cc;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--go);
}

/* --- FAQ cards --- */
.faq details {
  border-radius: var(--radius-card);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}

.faq summary::after {
  color: var(--go);
}

/* ============================================================
   6. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::after,
  .card,
  .service-card,
  .step-card {
    transition: none;
  }

  .btn:hover,
  .btn:active,
  .btn:hover::after,
  .btn:focus-visible::after,
  .card:hover,
  .service-card:hover,
  .step-card:hover {
    transform: none;
  }

  /* keep the pressed state legible without the movement */
  .btn:active {
    box-shadow: 0 0 0 0 var(--btn-offset-colour);
  }
}