/* ==========================================================================
   EVOLVED — Design uplift overlay (Path A)
   Loaded AFTER base.css and style.css. Surgical overrides only.
   Target: kill AI-template slop signals without restructuring the page.

   Inventory of changes (kept short so future Caio knows what changed):
   1. Cap border-radius at 4px on all cards/buttons
   2. Kill box-shadows (replaced with 1px hairline borders)
   3. Tighten section vertical padding (was up to 200–400px)
   4. Left-align section headers (was centred)
   5. Hero H1 set to a confident 56px with -0.02em tracking
   6. Body bumped to 17px, line-height 1.7
   7. Eyebrow Option B: vertical hairline left-border, no dot
   8. Sentence-case CTAs (text-transform reset)
   9. Restyle cookie banner to brand cream + teal hairline
  10. Tighten container max-width to 1100px on default container
  11. Underline-on-hover for inline links
   ========================================================================== */

/* ---------- 1 + 2: kill shadows, cap radius ---------- */
:root {
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 4px;
  /* radius-full kept for true pills like avatar wraps */
  --shadow-sm: 0 0 0 1px var(--color-divider);
  --shadow-md: 0 0 0 1px var(--color-divider);
  --shadow-lg: 0 0 0 1px var(--color-border);
}

/* explicitly strip shadows on common cards and surfaces */
.feature-card,
.diff-item,
.faq-item,
.faq-question,
.pillar-card,
.pricing-card,
.section--alt,
.card,
[class*="card"]:not(.cards) {
  box-shadow: none !important;
}

/* dropdown menu keeps a single hairline, no shadow */
.nav-dropdown__menu {
  box-shadow: none;
  border: 1px solid var(--color-border);
}

/* ---------- 3: tighten section padding ---------- */
.section,
.section--alt {
  padding-block: clamp(64px, 8vw, 112px);
}

/* Hero kept generous but not theatrical */
.hero--branded {
  padding-block: clamp(80px, 10vw, 144px);
}

.hero--interior {
  padding-block: clamp(64px, 8vw, 112px);
}

/* editorial divider (full-bleed images) loses excess margin */
.editorial-divider {
  margin-block: clamp(32px, 5vw, 64px);
}

/* ---------- 4: left-align section headers ---------- */
.section__header {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
  max-width: 720px;
}

.section__title,
.section__desc,
.section__label {
  text-align: left;
}

/* Interior page heroes left-align too (FAQ, About, Pillar pages, etc.).
   Branded home hero stays centered because of the brand mark composition. */
.hero--interior {
  text-align: left;
}
.hero--interior .container > * {
  margin-left: 0;
  margin-right: auto;
  max-width: 760px;
}

/* ---------- 5 + 6: type system tune ---------- */
:root {
  /* Hero gets a confident 56px ceiling, not the previous 80px */
  --text-3xl: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); /* 36px → 56px */
  /* Section titles tighten a notch */
  --text-2xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); /* 28px → 40px */
  /* Body large reads like prose, not UI */
  --text-base: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); /* 17px → 18px */
}

body {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: -0.005em;
}

.hero h1,
.hero--branded .hero__tagline,
.hero--interior h1,
h1, h2, h3, h4 {
  letter-spacing: -0.02em;
}

.hero h1 {
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.section__title {
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.section__desc {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* ---------- 7: eyebrow Option B (vertical hairline) ---------- */
.section__label,
.hero__label,
.hero__eyebrow,
.feature-row__label {
  display: inline-block !important;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--color-primary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.2;
  margin-bottom: 20px;
  gap: 0;
}

/* explicitly remove the dot pseudo-element from any eyebrow */
.section__label::before,
.hero__label::before,
.hero__eyebrow::before,
.feature-row__label::before {
  content: none !important;
  display: none !important;
}

/* on dark hero backgrounds (branded teal hero), eyebrow goes cream */
.hero--branded .hero__eyebrow {
  color: rgba(255, 255, 255, 0.92);
  border-left-color: rgba(255, 255, 255, 0.92);
}

/* ---------- 8: sentence-case CTAs ---------- */
.btn,
.btn--primary,
.btn--secondary,
.btn--large,
button.btn {
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  border-radius: 4px !important;
  font-weight: 500;
  box-shadow: none !important;
}

.btn--primary {
  background: var(--color-primary);
  color: #FAF8F4;
  border: 1px solid var(--color-primary);
  transition: background 200ms ease-out, border-color 200ms ease-out;
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: none;
}

.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn--secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}

/* ---------- 9: cookie banner restyle ---------- */
/* Targets common cookie-banner class names; harmless if not present */
.cookie-banner,
#cookie-banner,
.cookie-consent,
[class*="cookie"][class*="banner"],
[class*="cookie"][class*="consent"] {
  background: var(--color-bg) !important;
  border: 1px solid var(--color-primary) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
}

.cookie-banner a,
#cookie-banner a,
.cookie-consent a,
[class*="cookie"] a {
  color: var(--color-primary) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.cookie-banner button,
#cookie-banner button,
.cookie-consent button,
[class*="cookie"] button {
  border-radius: 4px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ---------- 10: container width ---------- */
:root {
  --content-wide: 1100px;
  --content-default: 920px;
  --content-narrow: 640px;
}

.container {
  max-width: 1100px;
}

.container--narrow {
  max-width: 720px;
}

/* ---------- 11: hover underline on inline links ---------- */
.section p a:not(.btn),
.faq-answer a:not(.btn),
.footer a:not(.btn) {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness 180ms ease-out;
}

.section p a:not(.btn):hover,
.faq-answer a:not(.btn):hover,
.footer a:not(.btn):hover {
  text-decoration-thickness: 2px;
}

/* ---------- 12: feature cards redesign (kept but improved) ---------- */
.feature-card,
.diff-item {
  background: transparent !important;
  border: 1px solid var(--color-divider);
  border-radius: 4px !important;
  padding: 28px 24px;
  box-shadow: none !important;
  transition: border-color 200ms ease-out;
}

.feature-card:hover,
.diff-item:hover {
  border-color: var(--color-primary);
  transform: none;
}

.feature-card__icon,
.diff-item__icon {
  width: 32px;
  height: 32px;
  margin-bottom: 16px;
  color: var(--color-primary);
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.feature-card__icon svg,
.diff-item__icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}

.feature-card h3,
.diff-item h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--color-text);
}

.feature-card p,
.diff-item p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ---------- 12a: Official Green Key logo treatment ---------- */
/* The official logo is a coloured square asset, used here under permission
   from Green Key International / FEE. Display restrained: keep aspect, no shadow,
   no rounded corners that would distort the trademark, capped width. */
.gk-official-logo {
  display: block;
  max-width: 280px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 768px) {
  .gk-official-logo { max-width: 320px; }
}

/* ---------- 12b: New 2026-2031 criteria sections grid ---------- */
.gk-sections-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

@media (max-width: 768px) {
  .gk-sections-grid {
    grid-template-columns: 1fr;
  }
}

.gk-section-card {
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border, rgba(26, 26, 24, 0.1));
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.gk-section-card:hover {
  border-color: var(--color-primary, #1A5C50);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px rgba(26, 92, 80, 0.18);
}

.gk-section-card__num {
  font-family: var(--font-display, 'Switzer', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary, #1A5C50);
}

.gk-section-card__title {
  font-family: var(--font-display, 'Switzer', sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text, #1A1A18);
  margin: 0;
  line-height: 1.3;
}

.gk-section-card__subs {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.gk-section-card__subs li {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-text-muted, #4A4A48);
  padding-left: 0.85rem;
  position: relative;
}

.gk-section-card__subs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 1px;
  background: var(--color-primary, #1A5C50);
}

/* ---------- 13: trust strap (new component) ---------- */
.trust-strap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 400;
  letter-spacing: 0.01em;
  max-width: 620px;
  text-align: left;
}

.trust-strap__text {
  margin: 0;
}

.trust-strap__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.7);
}

.trust-strap__text strong {
  color: #ffffff;
  font-weight: 600;
}

/* Trust strap on light backgrounds (interior heroes) */
.hero--interior .trust-strap,
.section .trust-strap {
  border-top-color: var(--color-divider);
  color: var(--color-text-muted);
}

.hero--interior .trust-strap__icon,
.section .trust-strap__icon {
  color: var(--color-primary);
}

.hero--interior .trust-strap__text strong,
.section .trust-strap__text strong {
  color: var(--color-text);
}

/* ---------- 14: tighten reveal-on-scroll spacing ---------- */
.reveal {
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

/* ---------- 15: footer trim ---------- */
.footer {
  padding-block: 64px 32px;
  border-top: 1px solid var(--color-divider);
}

.footer__legal,
.footer__last-updated {
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--color-text-faint);
}

/* ---------- 16: dark-mode adjustments ---------- */
[data-theme="dark"] .feature-card,
[data-theme="dark"] .diff-item,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .feature-card,
  :root:not([data-theme]) .diff-item {
    border-color: var(--color-divider);
  }
}

/* End uplift.css */