/**
 * Brand surface system
 * ---------------------------------------------------------------------------
 * The palette was being used as flat primary blocks, and — more to the point —
 * hover states left the brand entirely: `hover:bg-green-700` and
 * `hover:bg-blue-600` are stock Tailwind shades, not Forest Air colours. A
 * brand-green button therefore turned a generic green when you touched it.
 *
 * This gives the fills a gradient within their own hue, and resolves every
 * hover toward a shared deep teal — the point where #004713 and #2a5aae meet.
 * Green and blue stop being two unrelated blocks and start reading as two ends
 * of one ramp.
 *
 * Gradients are painted as background-image, so they sit above the Tailwind
 * background-color without needing !important or a template change.
 */

:root {
  --fa-green-500: #0d6b28;
  --fa-green-600: #0a5a21;
  --fa-green-700: #004713;  /* primary */
  --fa-green-800: #013d14;
  --fa-blue-400:  #4a7ad8;
  --fa-blue-500:  #3a6cc4;
  --fa-blue-600:  #2a5aae;  /* secondary */
  --fa-blue-700:  #234d95;
  --fa-teal:      #0a4a52;  /* where the two meet */
  --fa-teal-lift: #12605e;
}

/* ===========================================================================
 * Filled buttons
 * ========================================================================= */
a.rounded-full.bg-primary,
button.rounded-full.bg-primary,
a.rounded-full.bg-forest,
button.rounded-full.bg-forest,
input[type="submit"] {
  background-image: linear-gradient(160deg, var(--fa-green-600) 0%, var(--fa-green-700) 58%, var(--fa-green-800) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(1, 61, 20, 0.18);
}
a.rounded-full.bg-primary:hover,
button.rounded-full.bg-primary:hover,
a.rounded-full.bg-forest:hover,
button.rounded-full.bg-forest:hover,
input[type="submit"]:hover {
  background-image: linear-gradient(160deg, var(--fa-green-500) 0%, #06552a 45%, var(--fa-teal) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 26px -12px rgba(10, 74, 82, 0.62);
}

a.rounded-full.bg-secondary,
button.rounded-full.bg-secondary {
  background-image: linear-gradient(160deg, var(--fa-blue-500) 0%, var(--fa-blue-600) 58%, var(--fa-blue-700) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(35, 77, 149, 0.20);
}
a.rounded-full.bg-secondary:hover,
button.rounded-full.bg-secondary:hover {
  background-image: linear-gradient(160deg, var(--fa-blue-400) 0%, var(--fa-blue-600) 45%, var(--fa-teal-lift) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 12px 26px -12px rgba(18, 96, 94, 0.58);
}

/* A light sheen crosses the button once on hover. Uses ::before, because
 * ::after on .fa-svc-link is already the whole-card click target. */
a.rounded-full.bg-primary,
a.rounded-full.bg-secondary,
a.rounded-full.bg-forest {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
a.rounded-full.bg-primary::before,
a.rounded-full.bg-secondary::before,
a.rounded-full.bg-forest::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
a.rounded-full.bg-primary:hover::before,
a.rounded-full.bg-secondary:hover::before,
a.rounded-full.bg-forest:hover::before {
  transform: translateX(120%);
}

/* ===========================================================================
 * Outline and white buttons — pick up brand blue rather than going grey.
 * ========================================================================= */
a.rounded-full.bg-white:hover,
button.rounded-full.bg-white:hover {
  background-image: linear-gradient(160deg, #ffffff 0%, #eef3fb 100%);
  color: var(--fa-blue-600);
  box-shadow: inset 0 0 0 1px rgba(42, 90, 174, 0.25), 0 12px 26px -12px rgba(42, 90, 174, 0.40);
}
a.rounded-full.border:not(.bg-primary):not(.bg-secondary):not(.bg-forest):not(.bg-white):hover {
  border-color: var(--fa-blue-600);
  color: var(--fa-blue-600);
  background-color: rgba(42, 90, 174, 0.06);
}

/* ===========================================================================
 * The eyebrow dot that precedes section labels: make it the ramp in miniature.
 * ========================================================================= */
.bg-forest.rounded-full.h-1\.5,
.bg-secondary.rounded-full.h-1\.5 {
  background-image: linear-gradient(140deg, var(--fa-green-700), var(--fa-blue-600));
}

@media (prefers-reduced-motion: reduce) {
  a.rounded-full::before { display: none; }
}

/* ===========================================================================
 * Shared brand components
 *
 * The accent is sampled from the logo, not chosen. Quantising it gives deep
 * forest green at 25% of the artwork — the trees — and a family of sky blues
 * around #30c0f0 for the oval behind them. The theme already had the second
 * one as `cyan`, #39c2f4, and was not using it for anything.
 *
 * The dark surface is a single hue. A band that travels green to teal to blue
 * reads as a gradient someone applied, not as a brand colour.
 *
 * These are the pieces that make a page look composed rather than assembled —
 * a dark band, an eyebrow, a chip, a pill, an icon tile — defined once here so
 * the blog, the homepage and the inner pages can all be built from the same
 * parts. Nothing below is blog-specific.
 * ========================================================================= */

:root {
  --fa-sky:        #39c2f4;  /* the logo's sky — fills and marks on dark */
  --fa-sky-bright: #7bd8fa;
  /* #39c2f4 on white is about 2.1:1. Anything that has to be READ on a light
   * surface uses this instead; the bright sky stays for fills and for text on
   * the dark bands. */
  --fa-sky-deep:   #0e6f94;
  --fa-sky-soft:   rgba(57, 194, 244, 0.16);

  /* The trees, with depth but no change of hue. */
  --fa-surface-dark: linear-gradient(160deg, #0a5420 0%, #013d14 56%, #002b0e 100%);
  --fa-surface-tint: #eef3ec;

  --fa-ease-brand: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Dark band ------------------------------------------------------------
 * The structural device: a filled, rounded panel that holds a page header or a
 * call to action. Using it instead of photo-plus-overlay is what stops every
 * band looking like the same stock photograph behind the same blue wash. */
.fa-band {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background-color: #013d14;
  background-image: var(--fa-surface-dark);
  color: #ffffff;
}
/* A soft sky-blue light source in the top right, so a large fill is not a flat slab. */
.fa-band::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 55%;
  height: 160%;
  border-radius: 50%;
  background-image: radial-gradient(closest-side, rgba(57, 194, 244, 0.2), rgba(57, 194, 244, 0) 70%);
  pointer-events: none;
}
.fa-band > * {
  position: relative;
}

/* --- Eyebrow -------------------------------------------------------------- */
.fa-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fa-sky-deep);
}
.fa-band .fa-eyebrow {
  color: var(--fa-sky);
}

/* --- Chip ----------------------------------------------------------------- */
.fa-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.fa-band .fa-chip {
  background-color: var(--fa-sky-soft);
  color: var(--fa-sky);
}

/* --- Pill button ----------------------------------------------------------
 * A third button alongside the green and blue fills in this file: sky, for
 * the one action on a dark band that should be unmissable. */
.fa-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8125rem 1.5rem;
  border-radius: 999px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 200ms var(--fa-ease-brand),
              background-color 200ms var(--fa-ease-brand),
              border-color 200ms var(--fa-ease-brand),
              color 200ms var(--fa-ease-brand);
}
.fa-pill:hover {
  transform: translateY(-2px);
}
.fa-pill--sky {
  background-image: linear-gradient(160deg, var(--fa-sky-bright) 0%, var(--fa-sky) 58%, #1fa8dd 100%);
  color: #002b0e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 18px -10px rgba(31, 168, 221, 0.9);
}
.fa-pill--ghost {
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
}
.fa-pill--ghost:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.75);
}
.fa-pill__icon {
  width: 1.0625rem;
  height: 1.0625rem;
  flex-shrink: 0;
}

/* --- Icon tile ------------------------------------------------------------
 * A card whose subject is an icon in a round badge. The hover does the work:
 * the badge fills, the cue appears, the card lifts. */
.fa-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid rgba(52, 52, 52, 0.1);
  border-radius: 14px;
  background-color: #ffffff;
  text-decoration: none;
  transition: transform 220ms var(--fa-ease-brand),
              box-shadow 220ms var(--fa-ease-brand),
              border-color 220ms var(--fa-ease-brand);
}
.fa-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 71, 19, 0.28);
  box-shadow: 0 18px 36px -24px rgba(52, 52, 52, 0.5);
}
.fa-tile__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: rgba(0, 71, 19, 0.08);
  color: #004713;
  transition: background-color 220ms var(--fa-ease-brand),
              color 220ms var(--fa-ease-brand);
}
.fa-tile:hover .fa-tile__badge {
  background-image: var(--fa-surface-dark);
  color: var(--fa-sky);
}
.fa-tile__badge svg {
  width: 1.125rem;
  height: 1.125rem;
}
.fa-tile__title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #343434;
}
.fa-tile__note {
  font-family: "DM Sans", sans-serif;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #5d6b5f;
}
.fa-tile__go {
  margin-top: auto;
  padding-top: 0.25rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--fa-sky-deep);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 220ms var(--fa-ease-brand), transform 220ms var(--fa-ease-brand);
}
.fa-tile:hover .fa-tile__go,
.fa-tile:focus-visible .fa-tile__go {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: none) {
  .fa-tile__go {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fa-pill,
  .fa-tile,
  .fa-tile__badge,
  .fa-tile__go {
    transition: none;
  }
  .fa-pill:hover,
  .fa-tile:hover {
    transform: none;
  }
  .fa-tile__go {
    opacity: 1;
    transform: none;
  }
}

/* ===========================================================================
 * Photo bands
 *
 * Fourteen blocks put type on a photograph behind a gradient — every hero,
 * every CTA band, the Cool Club teaser, the contact panel, the blog sidebar.
 * Each one picked its own overlay, so legibility depended on what the
 * photograph happened to be doing behind that particular sentence. Blake has
 * raised it and he is right: it is the same problem in fourteen places.
 *
 * The fix is to stop asking the photograph to be a background. The brand colour
 * carries the block, and the picture drops to texture over it at a fixed
 * opacity behind a fixed scrim — so a block is exactly as readable as every
 * other block, whatever image an editor chooses and wherever the text sits in
 * it. No directional mask, because the text is left-aligned in some of these
 * and right-aligned in others.
 *
 * Scoped by section so it cannot reach markup it was not meant for, and
 * written against the wrapper that actually holds the image (`:has`), because
 * that is the section in some modules and an inner card in others.
 * ========================================================================= */

#ss-hero-banner:has(> img.object-cover),
#ss-inner-hero :has(> img.object-cover),
#ss-emergency-cta :has(> img.object-cover),
#ss-cta-band-v2 :has(> img.object-cover),
#ss-cool-club :has(> img.object-cover),
#ss-why-choose-us-v2 :has(> img.object-cover),
#ss-contact-info :has(> img.object-cover),
#ss-blog-listing aside:has(> img.object-cover),
#ss-our-services :has(> img.object-cover),
#ss-blog-single aside :has(> img.object-cover) {
  background-color: #013d14;
  background-image: var(--fa-surface-dark);
}

#ss-hero-banner > img.object-cover,
#ss-inner-hero img.object-cover,
#ss-emergency-cta img.object-cover,
#ss-cta-band-v2 img.object-cover,
#ss-cool-club img.object-cover,
#ss-why-choose-us-v2 img.object-cover,
#ss-contact-info img.object-cover,
#ss-blog-listing aside > img.object-cover,
#ss-our-services img.object-cover,
#ss-blog-single aside img.object-cover {
  opacity: 0.32;
}

/* The hero scrim.
 *
 * Both hero modules carried this gradient as an inline `style` attribute, which
 * beats any stylesheet. Five separate blocks in Customizer → Additional CSS had
 * then been layered on top of it with `!important` to try to get past that —
 * two of them contradicting each other, one of them keyed on
 * `[style*="linear-gradient"]`, which is a selector that only exists because of
 * the inline style. That is why the heroes have never behaved and why the same
 * complaint keeps coming back.
 *
 * The inline style is gone and the element is `.fa-scrim`, so the old selectors
 * — `span.absolute.inset-0`, `[style*="linear-gradient"]` — match nothing at
 * all. Those five blocks are now dead weight and should be deleted; see the PR.
 * Nothing here needs `!important`. */
.fa-scrim {
  position: absolute;
  inset: 0;
  background: rgba(1, 61, 20, 0.52);
}

/* The modules' own overlays, each a different gradient, all replaced by one
 * scrim. */
#ss-emergency-cta span.inset-0,
#ss-cta-band-v2 span.inset-0,
#ss-cool-club span.inset-0,
#ss-why-choose-us-v2 span.inset-0,
#ss-contact-info span.inset-0,
#ss-blog-listing aside > span.inset-0,
#ss-our-services span.inset-0,
#ss-blog-single aside span.inset-0 {
  background: rgba(1, 61, 20, 0.52);
}

/* .fa-scrim used to open with a solid strip, because the header was absolute
 * and sat on top of the hero photograph. The redesigned header is solid and in
 * the page flow, so the strip is gone. */

/* ===========================================================================
 * Buttons and links
 *
 * Every module sized its own buttons: px-6 py-3, px-6 py-4, px-7 py-4 and
 * px-8 py-4 are all in use, at text-sm in some places and text-ss-15 in others.
 * Side by side in the same band they do not line up. One geometry here, and the
 * fills above keep their colours.
 * ========================================================================= */

/* The carousel arrows are `h-12 w-12` icon buttons: a fixed box with
 * border-box sizing, so padding there would crush the icon to nothing, and a
 * translate on hover would fight the one that centres them. They are excluded
 * from both. */
a.rounded-full:not(.h-12):not(.w-12),
button.rounded-full:not(.h-12):not(.w-12),
input[type="submit"] {
  padding: 0.8125rem 1.625rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
}

/* One lift, one speed, everywhere. */
a.rounded-full:not(.h-12):not(.w-12):hover,
button.rounded-full:not(.h-12):not(.w-12):hover,
input[type="submit"]:hover {
  transform: translateY(-2px);
}
a.rounded-full:not(.h-12):not(.w-12):active,
button.rounded-full:not(.h-12):not(.w-12):active,
input[type="submit"]:active {
  transform: translateY(0);
}

/* One focus ring, on brand, visible on light and dark. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--fa-sky);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Inline links inside running text: underlined, brand blue, deepening on
 * hover. Buttons and cards are excluded — they are not running text. */
.entry-content a:not([class]),
.prose a:not([class]),
.fa-post__body a:not([class]) {
  color: var(--fa-blue-600);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color 180ms var(--fa-ease-brand);
}
.entry-content a:not([class]):hover,
.prose a:not([class]):hover,
.fa-post__body a:not([class]):hover {
  color: var(--fa-green-700);
  text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: reduce) {
  a.rounded-full:not(.h-12):not(.w-12):hover,
  button.rounded-full:not(.h-12):not(.w-12):hover,
  input[type="submit"]:hover {
    transform: none;
  }
}