/* EuroRail Times — shared site chrome (Phase 1)
   Variables, reset, language bar, nav, footer (homepage + blog patterns).
   Page-specific styles stay inline or in blog.css.
   Load BEFORE page CSS; mobile-fix.css loads LAST.
   Cache: bump ?v= when changing this file. */
:root{
  --steel:    #1C2B3A;
  --steel-mid:#253545;
  --steel-lgt:#2E4055;
  --amber:    #E8A020;
  --amber-dim:#C4881A;
  --amber-pale:#FEF3DC;
  --chalk:    #F2EEE8;
  --chalk-dk: #E4DED6;
  --signal-r: #C0392B;
  --signal-g: #27AE60;
  --signal-o: #E67E22;
  --ink:      #1A2530;
  --ink-mid:  #3D5166;
  --muted:    #5A7085;
  --white:    #FFFFFF;
  --mono:     'JetBrains Mono', monospace;
  /* Shared content rail — keep nav/lang/sections/footer on one left edge */
  --page-max: 1200px;
  --page-gutter: 24px;
  --page-gutter-sm: 16px;
}

/* Metric-matched fallback — reduces CLS when DM Sans swaps in */
@font-face{font-family:'DM Sans Fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica');size-adjust:103%;ascent-override:95%;descent-override:30%;line-gap-override:0%}@font-face{font-family:'DM Serif Fallback';src:local('Georgia'),local('Times New Roman');size-adjust:108%;ascent-override:92%;descent-override:22%;line-gap-override:0%}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'DM Sans','DM Sans Fallback',sans-serif;background:var(--chalk);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip}
a,button,[role="button"]{-webkit-tap-highlight-color:transparent}

/* Shared content rail helpers (opt-in + overrides for mismatched max-widths) */
.wrap,
.hero-inner,
.aff-inner,
.newsletter-inner,
.footer-grid,
.footer-bot,
.lang-inner,
.nav-inner,
.foot-inner,
.foot-bot,
.sleep-near .ayb-inner,
.calc-card{
  max-width:var(--page-max);
  margin-left:auto;
  margin-right:auto;
  width:100%;
  box-sizing:border-box;
}

/* ─── LANGUAGE BAR ─── */
.lang-bar{background:var(--steel);border-bottom:1px solid rgba(255,255,255,.07);
  padding:6px var(--page-gutter)}
.lang-inner{max-width:var(--page-max);margin:0 auto;display:flex;justify-content:flex-end;align-items:center;gap:6px;flex-wrap:wrap}
.lang-btn{background:none;border:1px solid transparent;color:rgba(255,255,255,.5);
  font:500 .72rem 'DM Sans',sans-serif;padding:3px 10px;border-radius:4px;cursor:pointer;
  letter-spacing:.04em;transition:all .2s;text-decoration:none}
.lang-btn:hover{color:var(--amber);border-color:rgba(232,160,32,.3)}
.lang-btn.active{color:var(--amber);border-color:var(--amber);background:rgba(232,160,32,.1)}
.lang-sep{color:rgba(255,255,255,.2);font-size:.7rem}

/* ─── NAV ───
   Gutters on <nav>, not inside .nav-inner — matches .section/.hero/.lang-bar
   (avoids 24px inward drift vs headings/content at desktop widths). */
nav{background:var(--steel-mid);position:sticky;top:0;z-index:100;border-bottom:3px solid var(--amber);
  padding:0 var(--page-gutter)}
.nav-inner{max-width:var(--page-max);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;padding:0;height:58px}
.logo{font-family:'DM Serif Display',serif;font-size:1.3rem;color:var(--white);
  text-decoration:none;display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
.logo-mark{width:32px;height:32px;background:var(--amber);border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.logo sup{font-family:'DM Sans',sans-serif;font-size:.6rem;font-weight:700;
  background:var(--amber);color:var(--steel);padding:1px 5px;border-radius:3px;
  margin-left:4px;vertical-align:top;margin-top:4px}
.nav-links{display:flex;gap:0;list-style:none}
.nav-links a{color:rgba(255,255,255,.7);text-decoration:none;font-size:.84rem;
  font-weight:500;padding:0 16px;height:58px;display:flex;align-items:center;
  border-bottom:3px solid transparent;margin-bottom:-3px;transition:all .2s}
.nav-links a:hover,.nav-links a.active{color:var(--white);border-bottom-color:var(--amber)}
.nav-ticket{background:var(--amber);color:var(--steel);border:none;border-radius:6px;
  padding:8px 20px;font:.85rem/1 'DM Sans',sans-serif;font-weight:700;cursor:pointer;
  transition:background .2s}
.nav-ticket:hover{background:var(--amber-dim)}

/* ─── FOOTER (shared grid rail) ───
   Brand spans full width; HELP | SCHEDULES | COMPARE | STATION GUIDES
   share one 4-col row with equal gutters (--page-gutter). */
footer{background:var(--steel);border-top:3px solid var(--amber);padding:48px var(--page-gutter) 28px}
.footer-grid{
  max-width:var(--page-max);margin:0 auto 36px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:var(--page-gutter);
  row-gap:28px;
  align-items:start;
}
/* Brand chrome above the link columns */
.f-brand{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:10px 24px;
}
.f-brand .logo{font-size:1.1rem;margin:0}
.f-brand > p{
  font-size:.8rem;color:rgba(255,255,255,.58);line-height:1.55;
  max-width:520px;margin:0;flex:1 1 240px;
}
/* Homepage legacy: HELP nested inside .f-brand — promote into the 4-col rail */
.f-brand:has(> .f-help){display:contents}
.f-brand:has(> .f-help) > .logo,
.f-brand:has(> .f-help) > p{grid-column:1 / -1}
.f-brand:has(> .f-help) > p{max-width:520px;margin:0}
.f-brand .f-help{margin-top:0}
.f-col h4{
  color:var(--white);font:.7rem/1.2 var(--mono);text-transform:uppercase;
  letter-spacing:.1em;margin:0 0 12px;
}
.f-col ul{list-style:none;margin:0;padding:0}
.f-col li{margin:0 0 8px;line-height:1.45}
.f-col li:last-child{margin-bottom:0}
.f-col a{
  color:rgba(255,255,255,.62);font-size:.8rem;line-height:1.45;
  text-decoration:none;transition:color .2s;
  display:inline-flex;align-items:center;gap:6px;
}
.f-col a:hover{color:var(--amber)}
.f-col a svg{flex-shrink:0;width:12px;height:12px;display:block}
.f-stations-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:var(--page-gutter);
  row-gap:0;
  align-items:start;
}
.f-stations-list li{margin:0 0 8px}
.f-stations-list li:last-child{margin-bottom:0}
.footer-bot{max-width:var(--page-max);margin:0 auto;border-top:1px solid rgba(255,255,255,.07);
  padding-top:22px;display:flex;justify-content:space-between;align-items:center;
  font-size:.75rem;color:rgba(255,255,255,.3);flex-wrap:wrap;gap:10px}
@media (max-width:900px){
  :root{--page-gutter:20px}
  .footer-grid{
    grid-template-columns:1fr 1fr;
    column-gap:var(--page-gutter);
    row-gap:28px;
  }
  .f-brand{grid-column:1 / -1}
  .f-brand:has(> .f-help) > .logo,
  .f-brand:has(> .f-help) > p{grid-column:1 / -1}
  .f-brand > p{max-width:none}
}
@media (max-width:560px){
  :root{--page-gutter:var(--page-gutter-sm)}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .f-stations-list{grid-template-columns:1fr 1fr;column-gap:16px}
}

/* ─── FOOTER (blog compact) ─── */
.foot-inner{max-width:var(--page-max);margin:0 auto;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.foot-inner .logo{font-size:1.05rem}
.foot-links a{color:rgba(255,255,255,.55);text-decoration:none;font-size:.82rem;margin-left:16px}
.foot-links a:hover{color:var(--amber)}
.foot-bot{max-width:var(--page-max);margin:18px auto 0;border-top:1px solid rgba(255,255,255,.1);padding-top:14px;font-size:.75rem;color:rgba(255,255,255,.4);text-align:center}

/* a11y skip + main landmark helpers — hidden until keyboard focus */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;z-index:10000;
  text-decoration:none;color:inherit;
}
.skip-link:focus,
.skip-link:focus-visible{
  position:fixed;left:16px;top:16px;width:auto;height:auto;
  padding:10px 14px;background:var(--amber,#E8A020);color:var(--steel,#1C2B3A);
  font:700 .9rem/1.2 'DM Sans',sans-serif;border-radius:6px;
  overflow:visible;clip:auto;white-space:normal;
  outline:2px solid var(--steel,#1C2B3A);outline-offset:2px;
  text-decoration:none;box-shadow:0 4px 14px rgba(28,43,58,.25);
}

/* Stay22 After-you-book — steel/amber brand panel */
.ayb{
  margin:28px 0;padding:22px 20px;
  background:var(--white,#fff);
  border:1px solid rgba(28,43,58,.14);
  border-top:3px solid var(--amber,#E8A020);
  border-radius:10px;
  box-shadow:0 1px 0 rgba(28,43,58,.04);
}
.ayb-pre{
  font:.68rem 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-dim,#C4881A);margin:0 0 8px;
}
.ayb-title{
  font-family:'DM Serif Display',serif;font-size:1.28rem;color:var(--steel,#1C2B3A);
  margin:0 0 6px;line-height:1.25;
}
.ayb-sub{
  font-size:.84rem;color:var(--ink-mid,#3D5166);margin:0 0 18px;line-height:1.5;max-width:54ch;
}
.ayb-btns{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.ayb-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:11px 18px;border-radius:8px;
  font:.85rem 'DM Sans',sans-serif;font-weight:700;text-decoration:none;
  transition:background .15s,border-color .15s,color .15s;
  flex:0 1 auto;
}
.ayb-btn--primary{background:var(--amber,#E8A020);color:var(--steel,#1C2B3A)}
.ayb-btn--primary:hover{background:var(--amber-dim,#C4881A)}
.ayb-btn--steel{background:var(--steel,#1C2B3A);color:#fff}
.ayb-btn--steel:hover{background:var(--steel-lgt,#2E4055)}
.ayb-links{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:14px 0 0;padding:0;list-style:none;
}
.ayb-links a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:8px 14px;
  font-size:.8rem;font-weight:700;color:var(--steel,#1C2B3A);
  text-decoration:none;border-radius:8px;
  background:rgba(28,43,58,.06);border:1px solid rgba(28,43,58,.14);
}
.ayb-links a:hover{
  color:var(--steel,#1C2B3A);background:var(--amber-pale,#FEF3DC);
  border-color:rgba(232,160,32,.45);
}
.ayb-kit{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin:18px 0 0;padding:14px 0 0;
  background:transparent;
  border-top:1px solid rgba(28,43,58,.1);
  font-size:.8rem;color:var(--ink-mid,#3D5166);line-height:1.4;
}
.ayb-kit-label{
  font:.65rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--steel,#1C2B3A);font-weight:600;margin-right:2px;
}
.ayb-kit a{
  color:var(--steel,#1C2B3A);font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(28,43,58,.28);
  min-height:44px;display:inline-flex;align-items:center;
}
.ayb-kit a:hover{color:var(--amber-dim,#C4881A);border-bottom-color:var(--amber,#E8A020)}
.ayb-kit-sep{opacity:.35;user-select:none}
@media(max-width:560px){
  .ayb{padding:18px 16px}
  .ayb-btns{gap:8px}
  .ayb-btn{flex:1 1 calc(50% - 8px);min-width:132px}
  .ayb-links{gap:8px}
  .ayb-kit{margin-top:16px;padding-top:12px;flex-direction:column;align-items:flex-start;gap:6px}
  .ayb-kit-sep{display:none}
}

/* Sleep near station (homepage) — same language */
.sleep-near{
  padding:32px var(--page-gutter);
  background:var(--white,#fff);
  border-top:1px solid rgba(28,43,58,.1);
  border-bottom:1px solid rgba(28,43,58,.06);
}
.sleep-near .ayb-inner{max-width:var(--page-max);margin:0 auto}
.sleep-near .ayb-btns{margin-bottom:0}

/* Station hotels panel — same content rail as .wrap (no double gutter) */
.station-hotels{
  width:min(100% - 2 * var(--page-gutter), var(--page-max));
  max-width:var(--page-max);
  margin:0 auto 32px;
  padding:0;
  box-sizing:border-box;
}
.station-hotels .ayb{margin:0}
/* Headings / rows — prevent odd inward wraps and orphaned edges */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px}
.sec-title,article h2,article h3{
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:manual;
  text-wrap:balance;
}
.see-all{flex-shrink:0}
.kl-search-card{margin-left:0;margin-right:0;max-width:min(1040px,100%);box-sizing:border-box}
.kl-sub-bar{padding-left:0;padding-right:0;box-sizing:border-box}
.kl-grid{min-width:0}
.kl-field{min-width:0}
.container{max-width:var(--page-max);margin-left:auto;margin-right:auto;
  padding-left:var(--page-gutter);padding-right:var(--page-gutter);box-sizing:border-box}

/* Operator chip strip under map — keep side gutters when .wrap is full-bleed */
.op-guides-rail{
  width:min(100% - 2 * var(--page-gutter), var(--page-max));
  max-width:var(--page-max);
  margin-left:auto;
  margin-right:auto;
}

@media (max-width:600px){
  :root{--page-gutter:var(--page-gutter-sm)}
  nav{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
  .nav-inner{padding:0;height:54px}
  .lang-bar{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
  .sec-head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:20px}
  .sec-title{text-wrap:pretty}
  .kl-search-card{margin-left:0;margin-right:0}
}