/*
 * Marketing site: applies the 10-colour design system (tokens.css) to the
 * vendored Astro pages WITHOUT editing the immutable /_astro bundles.
 * Loaded last in <head> (after tokens.css), so it wins at equal specificity.
 *
 * 1. Re-point the Astro palette + semantic variables to the design tokens.
 *    Note: the Astro bundles use --color-accent for their brand ACTION colour
 *    (buttons, links). On marketing pages it is re-pointed to St Tropaz here;
 *    the design system's rare violet accent is available as --color-attention.
 * 2. Component overrides where the bundles hard-code colours or where the
 *    brief asks for a specific treatment (navy header, focus rings, inputs).
 */

:root {
  /* Astro palette → design system */
  --navy-950: var(--pm-navy);
  --navy-900: var(--pm-navy);
  --navy-800: var(--pm-tropaz);
  --navy-700: var(--pm-tropaz);
  --navy-600: var(--pm-tropaz);
  --teal-700: var(--pm-tropaz);
  --teal-600: var(--pm-tropaz);
  --teal-500: var(--pm-picton);
  --teal-100: var(--status-active-bg);
  --warm-white: var(--pm-chrome);
  --white: var(--pm-white);
  --charcoal-900: var(--pm-navy);
  --charcoal-700: var(--pm-tropaz);
  --charcoal-500: var(--pm-tropaz);
  --neutral-100: var(--pm-navy-06);
  --neutral-200: var(--pm-navy-12);
  --neutral-300: var(--pm-navy-20);
  --neutral-400: var(--pm-khaki);
  --border-subtle: var(--pm-navy-12);
  --border-strong: var(--pm-khaki);

  /* Astro semantic names → design-system semantics */
  --color-bg: var(--color-background);
  --color-surface: var(--pm-white);
  --color-surface-alt: var(--pm-navy-06);
  --color-ink: var(--color-text);
  --color-ink-muted: var(--color-text-secondary);
  --color-brand: var(--pm-navy);
  --color-brand-strong: var(--pm-navy);
  --color-accent: var(--pm-tropaz);
  --color-accent-strong: var(--pm-tropaz);
  --color-on-brand: var(--pm-chrome);
  --color-on-accent: var(--pm-white);

  --shadow-sm: var(--shadow-1);
  --shadow-md: 0 6px 20px -8px rgba(18, 59, 93, 0.18);
  --shadow-lg: var(--shadow-3);
}

/* ---------- focus: always visible, strong contrast ---------- */
:focus-visible {
  outline: 3px solid var(--color-focus-outline);
  outline-offset: 2px;
}
.site-header :focus-visible,
.site-footer :focus-visible,
.section--brand :focus-visible,
.quote-banner :focus-visible {
  outline-color: var(--color-focus-outline-on-dark);
}

/* ---------- header: Deep Navy bar, Chrome White text ---------- */
.site-header[data-astro-cid-3ef6ksr2] {
  background: var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
  color: var(--color-text-on-dark);
}
.wordmark[data-astro-cid-3ef6ksr2] { color: var(--color-text-on-dark); }
.wordmark-mark[data-astro-cid-3ef6ksr2] { color: var(--color-info); }
.wordmark-sub[data-astro-cid-3ef6ksr2] { color: var(--color-text-on-dark-muted); }

.desktop-nav[data-astro-cid-3ef6ksr2] { gap: var(--space-2); }
.desktop-nav[data-astro-cid-3ef6ksr2] > ul[data-astro-cid-3ef6ksr2] { gap: 2px; }
.desktop-nav[data-astro-cid-3ef6ksr2] > ul > li,
.desktop-nav[data-astro-cid-3ef6ksr2] a,
.desktop-nav[data-astro-cid-3ef6ksr2] summary,
.lang-switch--desktop[data-astro-cid-a2mxz4y6],
.header-actions > a { white-space: nowrap; flex-shrink: 0; }

/* Items: hover = Picton with navy text (white on Picton is only 2.3:1);
   current page = St Tropaz with white text + a Picton indicator bar. */
.desktop-nav[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2]:not(.dropdown-all),
.nav-dropdown[data-astro-cid-3ef6ksr2] summary[data-astro-cid-3ef6ksr2] {
  color: var(--color-text-on-dark);
  padding: 0.45em 0.55em;
  border-radius: var(--radius-md);
  border-bottom: 0;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.desktop-nav[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2]:not(.dropdown-all):hover,
.nav-dropdown[data-astro-cid-3ef6ksr2] summary[data-astro-cid-3ef6ksr2]:hover {
  background: var(--color-info);
  color: var(--color-primary);
}
.desktop-nav[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2][aria-current=page]:not(.dropdown-all),
.nav-dropdown.is-current[data-astro-cid-3ef6ksr2] summary[data-astro-cid-3ef6ksr2],
.nav-dropdown[data-astro-cid-3ef6ksr2][open] summary[data-astro-cid-3ef6ksr2] {
  background: var(--color-secondary);
  color: var(--pm-white);
  box-shadow: inset 0 -3px 0 var(--color-info);
}

/* The dropdown panel stays a white card with navy text. */
.dropdown-panel[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2] { color: var(--color-text) !important; padding: var(--space-2) !important; }
.dropdown-panel[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2]:hover,
.dropdown-panel[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2][aria-current=page] {
  background: var(--color-row-hover) !important;
  color: var(--color-secondary) !important;
  box-shadow: inset 3px 0 0 var(--color-info);
}
.dropdown-panel[data-astro-cid-3ef6ksr2] .dropdown-all[data-astro-cid-3ef6ksr2] {
  color: var(--color-secondary) !important;
  background: none !important;
  box-shadow: none;
}

.lang-switch--desktop[data-astro-cid-a2mxz4y6] {
  color: var(--color-text-on-dark);
  margin-left: var(--space-1);
  padding-left: var(--space-2);
  border-left: 1px solid rgba(245, 247, 245, 0.25);
}
.lang-switch--desktop[data-astro-cid-a2mxz4y6] a[data-astro-cid-a2mxz4y6] {
  color: var(--color-info);
  padding: 0.3em 0.35em;
  border-radius: var(--radius-sm);
}
.lang-switch--desktop[data-astro-cid-a2mxz4y6] a[data-astro-cid-a2mxz4y6]:hover {
  background: var(--color-info);
  color: var(--color-primary);
}
.lang-switch--desktop[data-astro-cid-a2mxz4y6] .lang-current[data-astro-cid-a2mxz4y6] { color: var(--color-text-on-dark-muted); }
.lang-switch--desktop[data-astro-cid-a2mxz4y6] .lang-sep[data-astro-cid-a2mxz4y6] { color: var(--pm-navy-45); }

.mobile-nav-toggle[data-astro-cid-3ef6ksr2] {
  color: var(--color-text-on-dark);
  border-color: rgba(245, 247, 245, 0.55);
}
.mobile-nav-toggle[data-astro-cid-3ef6ksr2]:hover { background: var(--color-info); color: var(--color-primary); border-color: var(--color-info); }
.mobile-nav-panel[data-astro-cid-3ef6ksr2] { border-top: 3px solid var(--color-info); }
.mobile-nav-panel[data-astro-cid-3ef6ksr2] a[aria-current=page] {
  color: var(--color-secondary) !important;
  box-shadow: inset 3px 0 0 var(--color-info);
  padding-left: var(--space-3) !important;
}
.mobile-signup-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.mobile-signup-row .btn { flex: 1 1 0; }
.mobile-signup-row svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }

/* Header actions on navy: Login (outline), Sign up (highlight), Get a Quote.
   On navy, a St Tropaz button would nearly vanish (1.7:1 against the bar),
   so the header's primary CTA uses Picton with navy text (5.0:1). */
.header-actions[data-astro-cid-3ef6ksr2] { gap: var(--space-2); }
.header-inner[data-astro-cid-3ef6ksr2] { gap: var(--space-3); }
@media (min-width: 1320px) {
  .header-cta[data-astro-cid-3ef6ksr2] { padding: 0.65em 1.05em; }
}
.header-actions > .btn-secondary.header-cta {
  color: var(--color-text-on-dark);
  border-color: rgba(245, 247, 245, 0.7);
  background: transparent;
}
.header-actions > .btn-secondary.header-cta:hover {
  background: var(--pm-chrome);
  border-color: var(--pm-chrome);
  color: var(--color-primary);
}
.header-actions > .btn-primary.header-cta {
  background: var(--color-info);
  border-color: var(--color-info);
  color: var(--color-primary);
}
.header-actions > .btn-primary.header-cta:hover {
  background: var(--pm-chrome);
  border-color: var(--pm-chrome);
  color: var(--color-primary);
}
/* Sign up (owner requirement R5): the one bright, "shiny" call to open an
   account. Gossip Green with navy text (9.4:1) and a thin Picton ring, so
   it stands out on navy without gradients or glow. */
.header-signup-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: var(--color-highlight);
  border: 1.5px solid var(--color-highlight);
  color: var(--color-primary) !important;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 3px rgba(69, 181, 230, 0.7);
}
.header-signup-btn:hover {
  background: var(--pm-white);
  border-color: var(--pm-white);
}
.header-signup-btn svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }
/* Phones: the bar has room for the logo, Quote and the menu only, so Sign up
   moves to the top of the menu panel (beside Login) instead. */
.header-actions > .header-signup-btn { display: none; }
@media (min-width: 640px) {
  .header-actions > .header-signup-btn { display: inline-flex; }
}

/* ---------- buttons ---------- */
.btn-primary:hover {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text);
}
.btn-secondary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-dark);
}
.btn:disabled,
.btn[aria-disabled=true] {
  background: var(--pm-navy-20) !important;
  border-color: var(--pm-navy-20) !important;
  color: var(--pm-navy-75) !important;
  cursor: not-allowed;
}
/* On navy sections, the primary action switches to Picton + navy text. */
.section--brand .btn-primary,
.quote-banner .btn-primary,
.guide-final-cta .btn-primary {
  background: var(--color-info);
  border-color: var(--color-info);
  color: var(--color-primary);
}
.section--brand .btn-primary:hover,
.quote-banner .btn-primary:hover,
.guide-final-cta .btn-primary:hover {
  background: var(--pm-chrome);
  border-color: var(--pm-chrome);
  color: var(--color-primary);
}
.btn-ghost-on-photo { background: rgba(18, 59, 93, 0.3); border-color: rgba(245, 247, 245, 0.7); }
.btn-ghost-on-photo:hover { background: rgba(18, 59, 93, 0.55); }

/* ---------- text on navy: Chrome White / muted chrome, never grey-blue ---------- */
.section--brand .eyebrow,
.quote-banner[data-astro-cid-f7wh7l3f] .eyebrow[data-astro-cid-f7wh7l3f] { color: var(--color-info); }
.section--brand .lede,
.quote-banner[data-astro-cid-f7wh7l3f] .lede[data-astro-cid-f7wh7l3f],
.quote-banner-guide-link[data-astro-cid-f7wh7l3f] { color: var(--color-text-on-dark-muted); }
.guide-lede[data-astro-cid-aq3pqpnb] { color: var(--color-text-on-dark); }

/* ---------- footer ---------- */
.site-footer[data-astro-cid-sz7xmlte] { background: var(--color-primary); color: var(--color-text-on-dark-muted); border-top: 4px solid var(--color-secondary); }
.footer-brand[data-astro-cid-sz7xmlte] .wordmark-mark[data-astro-cid-sz7xmlte] { color: var(--color-info); }
.footer-brand[data-astro-cid-sz7xmlte] p[data-astro-cid-sz7xmlte],
.footer-col[data-astro-cid-sz7xmlte] a[data-astro-cid-sz7xmlte] { color: var(--color-text-on-dark-muted); }
.footer-col[data-astro-cid-sz7xmlte] a[data-astro-cid-sz7xmlte]:hover { color: var(--pm-white); text-decoration: underline; }
.contact-list[data-astro-cid-sz7xmlte] svg { color: var(--color-info); }
.footer-bottom[data-astro-cid-sz7xmlte] { color: var(--color-text-on-dark-muted); border-top-color: rgba(245, 247, 245, 0.15); }
.site-footer .footer-group-link { color: var(--color-info); }
.site-footer .footer-group-link:hover,
.site-footer .footer-group-link:focus-visible { color: var(--pm-white); }

/* ---------- forms (quote wizard, contact) ---------- */
.field[data-astro-cid-f7wh7l3f] label[data-astro-cid-f7wh7l3f] { color: var(--color-text); }
.field input,
.field select,
.field textarea,
.copy-fallback textarea {
  border-color: var(--color-border-input) !important;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--color-text-tertiary); opacity: 1; }
.field input:focus,
.field select:focus,
.field textarea:focus,
.copy-fallback textarea:focus {
  outline: 2px solid transparent;
  border-color: var(--color-focus) !important;
  box-shadow: 0 0 0 1px var(--color-focus), 0 0 0 4px var(--color-focus-ring);
}
.field input[aria-invalid=true],
.field select[aria-invalid=true],
.field textarea[aria-invalid=true] { border-color: var(--status-error-text) !important; }
.field input[aria-invalid=true]:focus,
.field select[aria-invalid=true]:focus,
.field textarea[aria-invalid=true]:focus {
  box-shadow: 0 0 0 1px var(--status-error-text), 0 0 0 4px rgba(179, 38, 30, 0.15);
}
.field-error[data-astro-cid-f7wh7l3f] { color: var(--status-error-text); }
.field-error[data-astro-cid-f7wh7l3f]:not(:empty)::before { content: "! " / ""; font-weight: 800; }

/* Option cards: selected = Gossip Green highlight + Tropaz border + check. */
.option-card[data-astro-cid-f7wh7l3f] { border-color: var(--color-border-strong); background: var(--color-surface); position: relative; }
.option-card[data-astro-cid-f7wh7l3f]:hover { border-color: var(--color-info); background: var(--color-row-hover); }
.option-card[data-astro-cid-f7wh7l3f]:has(input:checked) {
  border-color: var(--color-secondary);
  background: var(--color-highlight);
}
.option-card[data-astro-cid-f7wh7l3f]:has(input:checked)::after {
  content: "✓" / "";
  position: absolute;
  top: 8px;
  right: 10px;
  font-weight: 800;
  color: var(--status-soft-text);
}
.option-card[data-astro-cid-f7wh7l3f]:has(input:focus-visible) { outline-color: var(--color-focus-outline); }

/* Wizard progress: current = Picton bar, done = Chateau bar, upcoming = grey. */
.progress-step[data-astro-cid-f7wh7l3f] { border-top-color: var(--color-border-strong); }
.progress-step[data-astro-cid-f7wh7l3f] .progress-num[data-astro-cid-f7wh7l3f] { color: var(--color-text-tertiary); }
.progress-step[data-astro-cid-f7wh7l3f][aria-current=step] { border-top-color: var(--color-info); }
.progress-step[data-astro-cid-f7wh7l3f][aria-current=step] .progress-num[data-astro-cid-f7wh7l3f] { color: var(--color-secondary); }
.progress-step[data-astro-cid-f7wh7l3f].is-complete { border-top-color: var(--color-success); }
.progress-step[data-astro-cid-f7wh7l3f].is-complete .progress-num[data-astro-cid-f7wh7l3f] { color: var(--status-success-text); }

.copy-status[data-astro-cid-f7wh7l3f] { color: var(--status-success-text); }

/* ---------- misc ---------- */
.lang-sep[data-astro-cid-a2mxz4y6] { color: var(--pm-navy-45); }
.phone-callout[data-astro-cid-aq3pqpnb] { border-color: var(--color-info); }
.orientation-tile[data-astro-cid-aq3pqpnb]:hover,
.orientation-tile[data-astro-cid-aq3pqpnb]:focus-visible { border-color: var(--color-info); background: var(--color-row-hover); }
.card { border-color: var(--color-border); }
hr.rule { border-top-color: var(--color-border-decorative); }
.review-list .review-edit:focus-visible { outline-color: var(--color-focus-outline); }

/* On a solid navy band there is no photo to blur: a plain outline button reads
   better, and contrast checkers can measure it (they skip backdrop-filter). */
.section--brand .btn-ghost-on-photo {
  background: transparent;
  backdrop-filter: none;
  border-color: rgba(245, 247, 245, 0.7);
}
.section--brand .btn-ghost-on-photo:hover { background: rgba(245, 247, 245, 0.12); }

/* Stage 1: Privacy · Cookie policy · Cookie settings, above the small print. */
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; width: 100%; margin: 0 0 12px; font-size: 0.9375rem; }
.footer-legal a { color: var(--color-text-on-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(245, 247, 245, 0.4); }
.footer-legal a:hover { color: #fff; text-decoration-color: currentColor; }
.footer-legal a:focus-visible { outline: 3px solid var(--pm-picton, #45b5e6); outline-offset: 2px; border-radius: 3px; }

/* Stage 1: "Your cookie settings" card on the Cookie policy page. */
.pm-consent-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; flex-wrap: wrap; max-width: 52rem;
  padding: 1.5rem 1.6rem; border-radius: 18px; background: linear-gradient(135deg, #f4fafd, #f6faf6); border: 1px solid #d6e8f2;
}
.pm-consent-text { flex: 1 1 22rem; min-width: 0; }
.pm-consent-text h2 { margin: 0 0 .35rem; }
.pm-consent-text p { margin: 0; color: #4d6c86; }
.pm-consent-status { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.pm-consent-status[hidden] { display: none; }
.pm-consent-status li { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .5rem .35rem .8rem; border-radius: 999px; background: #fff; border: 1px solid #e3e7ec; font-size: .875rem; color: #123b5d; }
.pm-consent-status b { padding: .1rem .55rem; border-radius: 999px; font-size: .75rem; background: #eef1f4; color: #4d6c86; }
.pm-consent-status b.is-on { background: #e5f3ec; color: #296e4a; }
.pm-consent-btn {
  flex: none; min-height: 48px; padding: .75rem 1.3rem; border: 0; border-radius: 12px; background: #123b5d; color: #fff;
  font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 10px 22px -12px rgba(18, 59, 93, .8); transition: background .15s, transform .12s;
}
.pm-consent-btn:hover { background: #2f5d8a; }
.pm-consent-btn:active { transform: translateY(1px); }
.pm-consent-btn:focus-visible { outline: 3px solid #45b5e6; outline-offset: 2px; }
@media (max-width: 640px) { .pm-consent-card { padding: 1.2rem; } .pm-consent-btn { width: 100%; } }