/* =====================================================================
   Avioxx website v2.2 — presentation enhancements
   Loaded after css/custom-bs.css. Additive only: no existing rule is
   removed. Brand colours from custom-bs.css (#111D19 dark, #7DF08E green).
   Each block is tagged with its Visual Enhancements register ID (V2–V7).
   ===================================================================== */

/* V2 — Accessibility: visible keyboard focus on links, buttons and
   gallery triggers (the base theme suppresses outlines). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.img-container:focus-visible {
  outline: 3px solid #7DF08E;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #111D19;
}

/* V3 — Specification tiles: lining figures, and long values
   (e.g. "1.5–2k TPA", "Aug 2024") scale down on small screens
   instead of overflowing the column. */
.display-1 {
  font-variant-numeric: lining-nums;  /* v2.3: tabular spacing removed - it spaced out decimal points ("7 . 6 MW") */
}
@media (max-width: 575.98px) {
  .display-1.text-nowrap,
  .display-1 {
    font-size: clamp(2.25rem, 11vw, 3.375rem);
    overflow-wrap: anywhere;
  }
}
/* V3b (v2.3) — Tablet widths (576–991px): long no-wrap tile values such as
   "Fuel Innovation" overflowed their half-width column by up to 57px
   (Project Catalyst page, also on the live site). Scale them with the
   viewport in this range only; desktop and mobile sizes are unchanged. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .display-1.text-nowrap {
    font-size: min(calc(1.625rem + 4.5vw), 6vw);
  }
}
/* V3c (v2.3) — About page team grid at 1400–1499px: the longest no-wrap
   name ("William Harding-Newman") overflowed its column by 5px (also on
   the live site). Allow it to wrap in that range only. */
@media (min-width: 1400px) and (max-width: 1499.98px) {
  .col-xxl-3 > a > h5.text-nowrap { white-space: normal !important; }
}
/* the single qualification line under each tile group */
.display-1 ~ small,
.col-12 > small {
  display: inline-block;
  letter-spacing: 0.01em;
  opacity: 0.85;
}

/* V4 — Media labels: distinguish photographs of the operational Runcorn
   facility from concept visualisations of proposed plants. */
.media-label {
  display: inline-block;
  margin: 0 0.4rem 0.25rem 0;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.1em;
  white-space: nowrap;
}
.media-label--render { background: #EDEFF0; color: #111D19; border: 1px solid #c9cfcd; }
.media-label--photo  { background: #111D19; color: #7DF08E; }

/* V5 — Milestones: status chip after each date (Completed / In
   development / Target). Review build only. */
.tl-status {
  display: inline-block;
  margin-left: 0.75rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.6;
}
.tl-status--done   { background: #111D19; color: #7DF08E; }
.tl-status--dev    { background: #7DF08E; color: #111D19; }
.tl-status--target { background: transparent; color: #111D19; border: 1px dashed #111D19; }
@media (max-width: 767.98px) {
  .tl-status { margin-left: 0.5rem; font-size: 0.7rem; }
}

/* V6 — Project pages: development-status pill above the hero title.
   Review build only. */
.project-status {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.6;
  vertical-align: middle;
}
.project-status.is-operational { background: #7DF08E; color: #111D19; }
.project-status.is-concept,
.project-status.is-engineering,
.project-status.is-commercial  { background: transparent; color: #7DF08E; border: 1px solid #7DF08E; }

/* V9 (v2.3) — Header menu at 768–959px (small laptops, landscape tablets).
   On the live site the seven menu items do not fit between 769px and ~905px:
   "Contact" is pushed off-screen (up to 98px horizontal scroll) and "Eco Feed"
   wraps. Tighten spacing in this range only; other widths are unchanged. */
@media (min-width: 768px) and (max-width: 959.98px) {
  .global-header .navbar-nav > .nav-item { margin-left: 0 !important; margin-right: 0 !important; }
  .global-header .navbar-nav > .nav-item > .nav-link {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
    font-size: 1rem;
    white-space: nowrap;
  }
}

/* V7 — Respect reduced-motion preferences: timeline cards appear
   without the scroll-linked fade. */
@media (prefers-reduced-motion: reduce) {
  .timeline-event { animation: none !important; opacity: 1 !important; }
  html { scroll-behavior: auto; }
}

/* P6 (v3.0) — dated clarification note at the top of selected historical articles */
.article-clarification {
  border-left: 3px solid #7DF08E;
  background: #F4F7F6;
  padding: 0.75rem 1rem;
  margin: 0 0 1.5rem 0;
  color: #111D19;
}

/* A3 (v3.1) — "Cookie settings" footer control: a real button styled like the adjacent footer links */
button.cookie-settings {
  background: transparent;
  border: 0;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  vertical-align: baseline;
}
button.cookie-settings:hover { text-decoration: underline; }

/* B7 (v3.1) — WCAG 2.2 AA colour contrast on LIGHT backgrounds only.
   Bright brand green #50C760 on white is 2.2:1 (AA needs 4.5:1 for normal text). On light
   backgrounds, green text uses #2B7A36 (5.3:1 on white, 4.6:1 on #EDEFF0). The green on dark
   backgrounds, buttons and the hero sections is unchanged. */
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link { color: #2B7A36; }
.navbar-light .navbar-nav > li:last-child > .nav-link.active,
.navbar-light .navbar-nav > li:last-child > .nav-link.active:hover { color: #111D19 !important; }
.content-block-default a:not(.btn):not(.nav-link):not([class*="text-"]),
.content-block-muted a:not(.btn):not(.nav-link):not([class*="text-"]) { color: #2B7A36; }
.content-block-default a:not(.btn):not(.nav-link):not([class*="text-"]):hover,
.content-block-muted a:not(.btn):not(.nav-link):not([class*="text-"]):hover { color: #245E4B; }
.content-block-default .text-muted,
.content-block-muted .text-muted { color: #666E75 !important; }
.project-nav-item .text-secondary { color: #5F6C78 !important; }
/* body-text links are also underlined, so they do not rely on colour alone (WCAG 1.4.1) */
.content-block-default :is(p, li) > a:not(.btn):not(.nav-link):not(.stretched-link),
.content-block-muted :is(p, li) > a:not(.btn):not(.nav-link):not(.stretched-link) { text-decoration: underline; }
.content-block-soft a.stretched-link:not([class*="text-"]) { color: #2B7A36; }
/* B8 (v3.1) — Project hero on phones: the longer approved project names made the hero text
   taller than the fixed 29rem hero, so it was clipped and scrolled inside the hero.
   Below 576px the hero now grows to fit its text (still bottom-aligned, same minimum height). */
@media (max-width: 575.98px) {
  .hero-2 { height: auto; min-height: 29rem; }
  .hero-2 .content > .container { height: auto; min-height: 29rem; display: flex; flex-direction: column; justify-content: flex-end; }
  .hero-2 .content > .container > .row { height: auto; }
}
/* visible keyboard focus for links and buttons that had none */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #2B7A36;
  outline-offset: 2px;
}
.global-footer a:focus-visible, .global-footer button:focus-visible,
.bg-hero a:focus-visible, .navbar-dark a:focus-visible { outline-color: #7DF08E; }

/* B6 (v3.1) — phones (< 768 px) load 1080 px-wide copies of the hero photographs (same images, smaller files). */
@media (max-width: 767.98px) {
  .bg-hero-1 { background-image: url(../img/ProtectingEarth-1-w1080.jpg); }
  .bg-hero-3 { background-image: url(../img/CarbonNet-1-w1080.jpg); }
  .bg-hero-4 { background-image: url(../img/AvioxxProcess-2-w1080.jpg); }
  .bg-hero-6 { background-image: url(../img/DrivingForce-1-w1080.jpg); }
  .bg-hero-7 { background-image: url(../img/Invest-w1080.jpg); }
  .bg-hero-plant-1 { background-image: url(../img/Plant-1-w1080.jpg); }
  .bg-hero-plant-2 { background-image: url(../img/Plant-2-w1080.jpg); }
  .bg-hero-plant-3 { background-image: url(../img/Plant-3-w1080.jpg); }
  .bg-hero-plant-4 { background-image: url(../img/Plant-4-w1080.jpg); }
  .bg-hero-plant-5 { background-image: url(../img/Plant-5-w1080.jpg); }
  .bg-hero-project-1-a { background-image: url(../img/Plant-1-w1080.jpg); }
  .bg-hero-project-1-b { background-image: url(../img/Plant-3-w1080.jpg); }
}

/* B7 (Vercel production readiness) */
/* WebP copies of the hero photographs via image-set(); browsers without image-set keep the JPEG rule above. */
@media (min-width: 768px) {
  .bg-hero-1 { background-image: image-set(url(../img/ProtectingEarth-1.webp) type("image/webp"), url(../img/ProtectingEarth-1.jpg) type("image/jpeg")); }
  .bg-hero-3 { background-image: image-set(url(../img/CarbonNet-1.webp) type("image/webp"), url(../img/CarbonNet-1.jpg) type("image/jpeg")); }
  .bg-hero-4 { background-image: image-set(url(../img/AvioxxProcess-2.webp) type("image/webp"), url(../img/AvioxxProcess-2.jpg) type("image/jpeg")); }
  .bg-hero-6 { background-image: image-set(url(../img/DrivingForce-1.webp) type("image/webp"), url(../img/DrivingForce-1.jpg) type("image/jpeg")); }
  .bg-hero-7 { background-image: image-set(url(../img/Invest.webp) type("image/webp"), url(../img/Invest.jpg) type("image/jpeg")); }
  .bg-hero-plant-1 { background-image: image-set(url(../img/Plant-1-w1920.webp) type("image/webp"), url(../img/Plant-1.jpg) type("image/jpeg")); }
  .bg-hero-plant-2 { background-image: image-set(url(../img/Plant-2-w1920.webp) type("image/webp"), url(../img/Plant-2.jpg) type("image/jpeg")); }
  .bg-hero-plant-3 { background-image: image-set(url(../img/Plant-3-w1920.webp) type("image/webp"), url(../img/Plant-3.jpg) type("image/jpeg")); }
  .bg-hero-plant-4 { background-image: image-set(url(../img/Plant-4-w1920.webp) type("image/webp"), url(../img/Plant-4.jpg) type("image/jpeg")); }
  .bg-hero-plant-5 { background-image: image-set(url(../img/Plant-5-w1920.webp) type("image/webp"), url(../img/Plant-5.jpg) type("image/jpeg")); }
  .bg-hero-project-1-a { background-image: image-set(url(../img/Plant-1-w1920.webp) type("image/webp"), url(../img/Plant-1.jpg) type("image/jpeg")); }
  .bg-hero-project-1-b { background-image: image-set(url(../img/Plant-3-w1920.webp) type("image/webp"), url(../img/Plant-3.jpg) type("image/jpeg")); }
}
@media (max-width: 767.98px) {
  .bg-hero-1 { background-image: image-set(url(../img/ProtectingEarth-1-w1080.webp) type("image/webp"), url(../img/ProtectingEarth-1-w1080.jpg) type("image/jpeg")); }
  .bg-hero-3 { background-image: image-set(url(../img/CarbonNet-1-w1080.webp) type("image/webp"), url(../img/CarbonNet-1-w1080.jpg) type("image/jpeg")); }
  .bg-hero-4 { background-image: image-set(url(../img/AvioxxProcess-2-w1080.webp) type("image/webp"), url(../img/AvioxxProcess-2-w1080.jpg) type("image/jpeg")); }
  .bg-hero-6 { background-image: image-set(url(../img/DrivingForce-1-w1080.webp) type("image/webp"), url(../img/DrivingForce-1-w1080.jpg) type("image/jpeg")); }
  .bg-hero-7 { background-image: image-set(url(../img/Invest-w1080.webp) type("image/webp"), url(../img/Invest-w1080.jpg) type("image/jpeg")); }
  .bg-hero-plant-1 { background-image: image-set(url(../img/Plant-1-w1080.webp) type("image/webp"), url(../img/Plant-1-w1080.jpg) type("image/jpeg")); }
  .bg-hero-plant-2 { background-image: image-set(url(../img/Plant-2-w1080.webp) type("image/webp"), url(../img/Plant-2-w1080.jpg) type("image/jpeg")); }
  .bg-hero-plant-3 { background-image: image-set(url(../img/Plant-3-w1080.webp) type("image/webp"), url(../img/Plant-3-w1080.jpg) type("image/jpeg")); }
  .bg-hero-plant-4 { background-image: image-set(url(../img/Plant-4-w1080.webp) type("image/webp"), url(../img/Plant-4-w1080.jpg) type("image/jpeg")); }
  .bg-hero-plant-5 { background-image: image-set(url(../img/Plant-5-w1080.webp) type("image/webp"), url(../img/Plant-5-w1080.jpg) type("image/jpeg")); }
  .bg-hero-project-1-a { background-image: image-set(url(../img/Plant-1-w1080.webp) type("image/webp"), url(../img/Plant-1-w1080.jpg) type("image/jpeg")); }
  .bg-hero-project-1-b { background-image: image-set(url(../img/Plant-3-w1080.webp) type("image/webp"), url(../img/Plant-3-w1080.jpg) type("image/jpeg")); }
}