/*
 * Deliberate departures from the original WordPress theme.
 *
 * public/theme/css/style.min.css is the theme's compiled CSS, copied unchanged; this file is
 * loaded right after it (src/components/site/Head.astro) and holds every visual change we make
 * on purpose, so a difference from the live WordPress site is either here or a bug. Keep each
 * rule commented with why it departs from the theme.
 */

:root {
  /* The brand cyan (#00c3ff) is only 2.0:1 on white and 2.75:1 on the brand blue (#0064cf), so
     as a text colour it is swapped per background (WCAG AA, 4.5:1 for normal-size text):
     - on white / light grey (#fff, #f4f9fe, #f1f7fe): a deeper cyan-blue, 5.6:1 on white, 5.3:1
       on #f4f9fe (and still 4.6:1 on #e1ebf2);
     - on the brand blues (#0064cf, #1d56b1, #204aa9): a pale cyan, 4.6:1 on #0064cf;
     - on navy / dark (#000054, #000022, #051d36) the cyan itself passes (9:1) and is kept. */
  --netsg-cyan-on-light: #006cad;
  --netsg-cyan-on-blue: #c4f0ff;
}

/* ---------- 1. Colour contrast ---------- */

/* Eyebrow labels and subtitles on light backgrounds ("About Us", form subtitles, contact titles). */
.subtitle,
.media-content__subtitle {
  color: var(--netsg-cyan-on-light) !important; /* the theme sets the cyan with !important */
}
.form-contact__title {
  color: var(--netsg-cyan-on-light);
}
/* …the same labels inside inverted (blue) copy, e.g. the media-content blue containment. */
.copy--inverted .subtitle,
.copy--inverted .media-content__subtitle {
  color: var(--netsg-cyan-on-blue) !important;
}
/* …and on navy/dark sections or over a photo, the original cyan. */
.l-section--background_dark .subtitle,
.full-width-media .subtitle {
  color: #00c3ff !important;
}

/* Cyan text on the brand blue: the hero's "Discover more" line, the active tab on blue tabs,
   step cards and the blue icon-text title. */
.hero__subtitle,
.tabs--inverted .tabs__button.is-active,
.step-card__subtitle,
.step-card__title,
.l-icon-text--background_blue .l-icon-text__title {
  color: var(--netsg-cyan-on-blue);
}

/* Download links (white on the brand blue): the file type/size line was white at 75% opacity
   (3.8:1); 90% is 4.9:1. */
.download-link__meta {
  opacity: 0.9;
}

/* Pricing cards: "ex GST per month" #768c9b was 3.5:1 on white; the theme's #607382 is 4.9:1
   (4.6:1 on the #f1f7fe card). */
.pricing-card__under-price {
  color: #607382;
}

/* ---------- 2. Floating "Enquire Today" button (phones) ---------- */

/* Below 580px the theme fixes the header's Enquire button to the bottom-right corner, where it
   covered the hero image and post date/reading time. It now appears once the hero/banner has
   been scrolled past (src/scripts/theme/floating-enquire.ts toggles .floating-enquire-visible
   on <body>). Without JavaScript (no html.js) it is always shown, as before. While hidden it
   stays in the tab order and shows itself when focused. */
@media screen and (max-width: 36.1875em) {
  .site-header-actions__action--enquire {
    transition:
      opacity 0.25s ease-out,
      translate 0.25s ease-out;
  }
  .js body:not(.floating-enquire-visible) .site-header-actions__action--enquire:not(:focus-within) {
    opacity: 0;
    pointer-events: none;
    translate: 0 1rem;
  }
  /* Room under the footer so the button never sits on its last line (was 3.75rem). */
  .site-footer {
    padding-block-end: 6.5rem;
  }
}
@media screen and (max-width: 36.1875em) and (prefers-reduced-motion: reduce) {
  .site-header-actions__action--enquire {
    transition: none;
  }
}

/* ---------- 3. Spacing ---------- */

/* Home pages: the theme's first section after the hero starts 10.3125rem (165px) below it on
   wide screens, on top of the hero's own bottom padding; keep the tablet value (5rem). */
@media (min-width: 80em) {
  .l-section--home_first {
    margin-block-start: 5rem;
  }
}

/* Icon-text grids of bordered cards: the theme's row gap (up to 6.25rem, plus a 1.75rem cell
   padding and a divider line on small screens, meant for the unboxed default cards) was ~2.5x
   the column gap. Boxed cards get the same gap both ways and no divider. */
.l-icon-text__grid:has(> .l-icon-text__cell .icon-text--bordered) {
  --row-spacing: var(--column-spacing);
}
.l-icon-text__grid:has(> .l-icon-text__cell .icon-text--bordered) > .l-icon-text__cell {
  padding-block-end: 0;
}
.l-icon-text__grid:has(> .l-icon-text__cell .icon-text--bordered) > .l-icon-text__cell::after {
  display: none;
}

/* ---------- 4. Accessibility markup ---------- */

/* Primary/off-canvas menu items that only open a submenu are <button>s rather than links to "#"
   (src/components/site/menus.ts); make them look exactly like the links they replace. */
button.primary-menu__link,
button.offcanvas-menu__link,
button.offcanvas-menu-submenu__link {
  color: inherit;
  font-family: inherit;
  text-align: start;
}
button.offcanvas-menu__link,
button.offcanvas-menu-submenu__link {
  width: 100%;
}
/* A flyout closed from the keyboard (Escape, or Enter on its button) stays closed while focus
   is still on its button (src/scripts/theme/primary-menu.ts). */
.primary-menu__item.is-dismissed .primary-menu__dropdown {
  opacity: 0;
  visibility: hidden;
}