/* ==========================================================================
   BALKAN TRAVEL OPS — 2026 SITEWIDE LAYER
   Loaded on every page, straight after main.css. main.css itself is not edited
   (migration parity rule); anything the redesign needs to change about an
   existing component is overridden here, so the change stays reviewable and
   reversible in one file.
   ========================================================================== */

/* --- type ----------------------------------------------------------------- */

/* DM Serif Display ships in one weight (400) and main.css asks for 700 on its
   headings, so the browser would synthesise a bold — thick, smeared strokes.
   Turning synthesis off renders the real 400 face wherever 700 is requested. */
html {
  font-synthesis: none;
}

/* --- shared controls ------------------------------------------------------ */
/* Lives here rather than in home-2026.css because the header's "Request a
   proposal" button is on every page, including pages that do not load the
   redesign section stylesheet. */

.r26-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  font-family: var(--font-family-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.r26-btn--primary { background: var(--bto-petrol); color: #fff; }
.r26-btn--primary:hover { background: var(--bto-petrol-dark); color: #fff; }
.r26-btn--ivory { background: var(--bto-ivory); color: var(--bto-navy); }
.r26-btn--ivory:hover { background: #fff; color: var(--bto-navy); }
.r26-btn--ghost { background: transparent; color: var(--bto-navy); border-color: var(--bto-rule-strong); }
.r26-btn--ghost:hover { border-color: var(--bto-navy); }
.r26-btn--sm { padding: 0.7rem 1.15rem; font-size: 0.875rem; }

/* Visible keyboard focus everywhere, not only on redesigned sections. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--bto-terracotta);
  outline-offset: 2px;
}

/* --- flatten decorative gradients ----------------------------------------- */
/* With the new tokens, main.css's primary->accent gradients render as
   petrol->terracotta blends, and several hard-coded ones are the old blue and
   terracotta->gold. The brief asks for restraint, so decorative gradients become
   flat fills. Image scrims (legibility over photos) are kept on purpose. */

.hero,
.form-section {
  background: var(--bto-navy) !important;
  background-image: none !important;
}
.hero::after { display: none; }
/* Decorative topographic pattern over the hero: dropped with the gradient. */
.hero::before { display: none; }

/* Sidebar and panel labels are interface text; main.css gives h2-h4 the display
   face. Covers the service/segment sidebars and the Itinerary Builder panels. */
.sidebar-title,
.panel-title,
.sidebar-card__title {
  font-family: var(--font-family-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.card::before { display: none; }

.btn--warm,
.footer-newsletter__btn {
  background: var(--bto-petrol);
  color: #fff;
}
.btn--warm:hover,
.footer-newsletter__btn:hover {
  background: var(--bto-petrol-dark);
  color: #fff;
}

.form-benefits__icon,
.process-timeline__marker,
.best-time-card__icon,
.destination-map__placeholder-icon,
.back-to-top,
.read-progress__bar {
  background: var(--bto-petrol);
}

.comparison-table thead { background: var(--bto-navy); }

.process-timeline__line { background: var(--bto-rule); }

.pull-quote,
.best-time-card,
.destination-map__container {
  background: var(--bto-ivory-deep);
}
.pull-quote { border-image: none; border-left: 3px solid var(--bto-terracotta); }

/* Scrim kept, re-tinted from the old blue to the brand navy. */
.card--photo .card-image::after {
  background: linear-gradient(to top, rgba(20, 45, 59, 0.18) 0%, transparent 50%);
}

/* --- footer ---------------------------------------------------------------- */

.site-footer {
  background: var(--bto-navy);
  color: rgba(247, 245, 240, 0.78);
}
.site-footer a { color: rgba(247, 245, 240, 0.86); }
.site-footer a:hover { color: #fff; }
.site-footer .footer-title,
.site-footer .footer-newsletter__title {
  font-family: var(--font-family-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bto-ivory);
}
.site-footer .site-logo--inverse {
  font-family: var(--font-family-display);
  font-weight: 400;
  color: var(--bto-ivory);
}
.site-footer .footer-bottom { border-top: 1px solid rgba(247, 245, 240, 0.14); }
.site-footer .footer-country { margin-top: 0.9rem; }
.site-footer .footer-country:first-child { margin-top: 0; }
.site-footer .footer-country > a { font-weight: 600; color: var(--bto-ivory); }
.site-footer .footer-country ul {
  margin: 0.3rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.9rem;
}

/* --- form labels on light surfaces ---------------------------------------- */
/* main.css colours every .form-label white, assuming a navy .form-section.
   Forms that sit on a light section instead — the contact page's "Send a
   message" form among them — have had labels at ~1.04:1 on PRODUCTION, i.e.
   invisible. Default to dark; keep white only where the surface is dark. */
.form-label,
.inquiry-form .form-microcopy {
  color: var(--bto-navy);
}
.inquiry-form .form-microcopy { color: var(--color-text-muted); }
/* Every dark surface that holds a form. .quote-section (itineraries index) and
   .quote-form-section (all nine programme pages) are dark but are not
   .form-section, so they must be listed or their labels go navy-on-navy. */
.form-section .form-label,
.quote-section .form-label,
.quote-form-section .form-label { color: rgba(255, 255, 255, 0.9); }
.form-section .form-microcopy,
.quote-section .form-microcopy,
.quote-form-section .form-microcopy { color: rgba(247, 245, 240, 0.78); }

/* Those two carry the old blue gradient in page-level <style> blocks, which load
   after this file; `main` raises specificity so the flat navy still wins. */
main .quote-section,
main .quote-form-section {
  background-color: var(--bto-navy);
  background-image: none;
}
/* Body copy in those panels picked up main.css's dark paragraph colour —
   1.52:1 on production. */
main .quote-section p,
main .quote-form-section p { color: rgba(247, 245, 240, 0.85); }
main .quote-section h2,
main .quote-section h3,
main .quote-form-section h2,
main .quote-form-section h3 { color: var(--bto-ivory); }

/* --- pre-existing contrast failures, found in the whole-page audit -------- */
/* Both were live before the redesign (measured on the pre-redesign build). */

/* Season badges on the city hubs: peak 4.41:1 and shoulder 3.15:1. Darker
   tones of the same hues: 5.91:1, 4.79:1, and off-season moved off the 4.55
   borderline to 7.24:1. */
.season-badge--peak { color: #b91c1c; }
.season-badge--shoulder { color: #15803d; }
.season-badge--off { color: #475569; }

/* Playbook "quick start" box: white list on a dark panel, but .prose strong
   coloured the bold labels navy — 1.28:1, dark on dark. Also flattened. */
.quick-start {
  background: var(--bto-navy) !important;
}
.quick-start strong,
.quick-start a:not(.btn) { color: inherit; }