/*
Theme Name: WTT Hub
Theme URI: https://wheretotravel.ro
Description: Minimal agency chooser for the root wheretotravel.ro — sends visitors to the Cluj or București site. Part of the Where to Travel project. No page builder, PHP 7.4 safe.
Author: Vargas Digital
Version: 1.0.0
Requires PHP: 7.4
*/

/* ---------------------------------------------------------- @FONT-FACE
   Romanian spans two subsets: â î in latin, ă ș ț in latin-ext. BOTH blocks
   per family are required (CLAUDE.md §5) — "București", "agenția" need them. */
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/newsreader-400-latin.woff2') format('woff2');
  unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+202F,U+20AC,U+2039-203A,U+2190,U+2192,U+25BE,U+2605,U+2715;
}
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/newsreader-400-latinext.woff2') format('woff2');
  unicode-range:U+0100-017F,U+0218-021B;
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('assets/fonts/archivo-400-600-latin.woff2') format('woff2');
  unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+202F,U+20AC,U+2039-203A,U+2190,U+2192,U+25BE,U+2605,U+2715;
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('assets/fonts/archivo-400-600-latinext.woff2') format('woff2');
  unicode-range:U+0100-017F,U+0218-021B;
}

/* ---------------------------------------------------------------- tokens
   Copied from the Cluj site so the three sites read as one brand. */
:root{
  --ink-900:#1b160f; --ink-700:#3b352c; --ink-500:#6e6559; --ink-200:#e5ddd0;
  --sun:#ee7b1d; --sun-deep:#c2590a; --sun-wash:#fdeeda;
  --sky:#e9f3f2; --sky-deep:#2f6b63;
  --paper:#fff; --paper-2:#faf6ef;
  --font-display:'Newsreader', Georgia, 'Times New Roman', serif;
  --font-text:'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --r-lg:24px; --r-md:18px;
  --e1:0 1px 2px rgba(27,22,15,.05), 0 8px 24px rgba(27,22,15,.08);
  --e2:0 24px 64px rgba(27,22,15,.20);
  --ease-out:cubic-bezier(.16,1,.30,1);
  --d-ui:240ms;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100svh; overflow-x:hidden; color:var(--ink-900);
  font-family:var(--font-text); font-size:clamp(1.0625rem,1.15vw,1.125rem); line-height:1.6;
  background:
    radial-gradient(120% 80% at 50% -10%, #fff 0%, var(--paper-2) 60%, #f4ecdd 100%);
  display:flex; flex-direction:column;
}
a{ color:inherit; }

.hub{
  flex:1; width:100%; max-width:1080px; margin:0 auto;
  padding:clamp(28px,6vw,72px) clamp(20px,5vw,48px);
  display:flex; flex-direction:column; justify-content:center; gap:clamp(28px,4.5vw,52px);
}

/* Brand + intro ----------------------------------------------------------- */
.hub__head{ text-align:center; }
.hub__brand{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:clamp(1.15rem,2.4vw,1.5rem);
  letter-spacing:-.02em; color:var(--ink-900); text-decoration:none;
}
.hub__brand-logo{ height:40px; width:auto; flex:none; }
.hub__eyebrow{
  margin:clamp(20px,3.5vw,32px) 0 0; font-size:.8125rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sun-deep);
}
.hub__title{
  font-family:var(--font-display); font-weight:400; color:var(--ink-900);
  font-size:clamp(2.4rem,7vw,4.2rem); line-height:.98; letter-spacing:-.03em;
  margin:10px 0 0; text-wrap:balance;
}
.hub__sub{
  margin:clamp(12px,2vw,18px) auto 0; max-width:36rem; color:var(--ink-700);
  font-size:clamp(1.05rem,1.6vw,1.2rem); line-height:1.5;
}

/* The two cards ----------------------------------------------------------- */
.hub__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.4vw,26px); }
@media (max-width:719px){ .hub__grid{ grid-template-columns:1fr; } }

.city{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; min-height:clamp(260px,34vw,340px);
  padding:clamp(24px,3.2vw,36px);
  border-radius:var(--r-lg); border:1px solid var(--ink-200);
  text-decoration:none; color:var(--ink-900);
  box-shadow:var(--e1);
  transition:transform var(--d-ui) var(--ease-out), box-shadow var(--d-ui) var(--ease-out), border-color var(--d-ui) var(--ease-out);
}
.city--cluj{ background:linear-gradient(165deg, #fff6ec 0%, var(--sun-wash) 100%); }
.city--buc{ background:linear-gradient(165deg, #f2faf8 0%, var(--sky) 100%); }
.city:hover, .city:focus-visible{ transform:translateY(-4px); box-shadow:var(--e2); border-color:transparent; outline:none; }

.city__eyebrow{
  font-size:.8125rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.city--cluj .city__eyebrow{ color:var(--sun-deep); }
.city--buc .city__eyebrow{ color:var(--sky-deep); }

.city__name{
  font-family:var(--font-display); font-weight:400; color:var(--ink-900);
  font-size:clamp(2.2rem,4.6vw,3.1rem); line-height:1; letter-spacing:-.025em;
  margin-top:6px;
}
.city__note{ margin-top:8px; color:var(--ink-700); font-size:1rem; max-width:26ch; }

.city__go{
  margin-top:auto; padding-top:clamp(20px,3vw,28px);
  display:inline-flex; align-items:center; gap:10px;
  font-weight:500; font-size:.9375rem; letter-spacing:.06em; text-transform:uppercase;
}
.city__go .pill{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink-900); color:#fff; border-radius:999px; padding:11px 20px;
  transition:background var(--d-ui) var(--ease-out), gap var(--d-ui) var(--ease-out);
}
.city--cluj:hover .city__go .pill{ background:var(--sun-deep); }
.city--buc:hover .city__go .pill{ background:var(--sky-deep); }
.city__go .pill .arw{ transition:transform var(--d-ui) var(--ease-out); }
.city:hover .city__go .pill .arw{ transform:translateX(4px); }

/* Decorative watermark glyph in the corner */
.city__mark{
  position:absolute; top:-14px; right:-10px; z-index:-1;
  width:clamp(120px,20vw,180px); height:auto; opacity:.14;
}
.city--cluj .city__mark{ color:var(--sun); }
.city--buc .city__mark{ color:var(--sky-deep); }

/* Footer ------------------------------------------------------------------ */
.hub__foot{
  text-align:center; color:var(--ink-500); font-size:.875rem; padding:clamp(20px,4vw,36px) 20px;
}
.hub__foot a{ color:var(--sun-deep); text-decoration:none; }
.hub__foot a:hover{ text-decoration:underline; }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}