/* yellow.taxi — Žuti Taxi Split's public site. Black on taxi yellow, the colours of the car door. */

@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('fonts/barlow-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('fonts/barlow-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('fonts/barlow-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('fonts/barlow-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('fonts/barlow-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('fonts/barlow-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('fonts/barlow-condensed-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url('fonts/barlow-condensed-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url('fonts/barlow-condensed-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --yellow: #F6C21A;
  --black: #000000;
  --white: #FFFFFF;
  --grey: #5E5E5E;
  --rule: #E3E3E3;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --text: 'Barlow', system-ui, sans-serif;
  --gutter: clamp(1rem, 4vw, 3rem);
  --measure: 38rem;
  /* from the content's right edge to the window's: what a picture adds to bleed off the page */
  --bleed: max(var(--gutter), (100vw - 76rem) / 2 + var(--gutter));
  /* the car's livery: two rows of black and yellow squares */
  --checker: repeating-conic-gradient(var(--black) 0 25%, var(--yellow) 0 50%) 0 0 / 1.5rem 1.5rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-feature-settings: 'tnum' 1;
}
img, svg { display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: var(--gutter); top: .75rem; z-index: 10; background: var(--black); color: var(--yellow); padding: .5rem .75rem; }

.wrap { max-width: 76rem; margin: 0 auto; padding: 0 var(--gutter); }

/* ── Header (sits on the yellow) ── */
.bar { display: flex; align-items: center; gap: 1.5rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: .01em; line-height: 1; }
.brand svg { width: 2.25rem; height: 2.25rem; }
.nav { display: flex; gap: 1.5rem; margin-left: auto; font-weight: 500; }
.nav a { text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: currentColor; }
.lang { font-weight: 600; text-decoration: none; border: 2px solid currentColor; border-radius: 3px; padding: .1rem .45rem; font-size: .9rem; }
@media (max-width: 720px) { .nav { display: none; } .lang { margin-left: auto; } }

/* ── Hero: the tagline, set like the sign on the roof, a member's car on the Riva in a card, and the
   livery's checker band, which closes every yellow header ── */
.hero { background: var(--yellow); overflow-x: clip; }
.hero::after, .page-head::after { content: ''; display: block; height: 1.5rem; background: var(--checker); }
.hero-body { padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: 0; }
.hero h1 {
  margin: 0 0 0 -0.03em; font-family: var(--display); font-weight: 800;
  font-size: clamp(2.4rem, 5.4vw, 5.4rem); line-height: .95; letter-spacing: -.01em; text-wrap: balance;
}
.hero h1 span { display: block; }
.hero h1 span + span { font-weight: 600; margin-top: .12em; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: end; margin-top: clamp(2rem, 4vw, 3rem); }
.hero-text { padding-bottom: clamp(2rem, 4vw, 3rem); }
.hero p { max-width: 30rem; margin: 0; font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.4; }
.hero .intl { margin-top: 1rem; font-size: 1rem; line-height: 1.55; font-weight: 500; }
.hero-card { justify-self: end; width: min(100%, 34rem); margin-bottom: clamp(2rem, 4vw, 3rem); border-radius: 14px; overflow: hidden; background: var(--black); box-shadow: 0 1.5rem 2.5rem -1rem rgba(96, 62, 0, .55); }
.hero-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-text { padding-bottom: 2rem; }
  .hero-card { justify-self: stretch; width: auto; margin-bottom: 2rem; border-radius: 12px; }
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.75rem; }
.button {
  display: inline-block; background: var(--black); color: var(--yellow); text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: .02em;
  padding: .7rem 1.5rem .75rem; border-radius: 4px; border: 2px solid var(--black);
}
.button:hover { background: #222; }
.button:focus-visible { outline-color: var(--black); }
.button-line { background: transparent; color: var(--black); }
.button-line:hover { background: var(--black); color: var(--yellow); }
.button-yellow { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.button-yellow:hover { background: var(--white); border-color: var(--white); }
.button-yellow:focus-visible { outline-color: var(--yellow); }

/* ── Sections ── */
section { padding: clamp(3rem, 8vw, 6rem) 0; }
h2 { margin: 0 0 1.5rem; font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1; }
.lede { max-width: var(--measure); margin: 0 0 2.5rem; color: var(--grey); font-size: 1.15rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The promises: what the association stands behind, each under a heavy rule */
.promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem 4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.promises li { border-top: 8px solid var(--black); padding-top: 1.25rem; }
.promises h3 { margin: 0 0 .75rem; font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: .95; }
.promises p { margin: 0; max-width: 34rem; font-size: 1.2rem; }
@media (max-width: 800px) { .promises { grid-template-columns: 1fr; } }

/* The app: black, the yellow of the car on it */
.app { background: var(--black); color: var(--white); }
.app h2 { color: var(--white); }
.app .lede { color: #CFCFCF; margin-bottom: 1.75rem; }
.app-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'head phones' 'facts phones'; gap: 0 clamp(2rem, 6vw, 6rem); align-items: start; }
.app-head { grid-area: head; }
.app .facts { grid-area: facts; }
/* Two real screens: the live map behind, the fixed price in front */
.phones { grid-area: phones; position: relative; width: 27rem; aspect-ratio: 27 / 41; }
.phone {
  position: absolute; padding: .45rem; border-radius: 2.6rem; background: #151515;
  box-shadow: inset 0 0 0 1px #464646, inset 0 0 0 .3rem #0A0A0A, 0 0 0 1px #262626;
}
.phone::after { content: ''; position: absolute; right: -3px; top: 21%; width: 3px; height: 8%; border-radius: 0 2px 2px 0; background: #303030; }
.phone img { display: block; width: 100%; height: auto; border-radius: 2.15rem; }
.phone-back { left: 0; top: 0; width: 55.5%; }
.phone-front { right: 0; top: 12%; width: 66.6%; box-shadow: inset 0 0 0 1px #464646, inset 0 0 0 .3rem #0A0A0A, 0 0 0 1px #262626, -1.25rem 1.5rem 2.5rem rgba(0, 0, 0, .75); }
.app-address {
  display: block; margin: 0 0 1.75rem -0.03em; color: var(--yellow); text-decoration: none;
  font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 7.4vw, 7rem); line-height: .9; letter-spacing: -.01em;
}
.app-open { margin: 0 0 3.5rem; }
.app .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.app .facts li { border-top: 3px solid var(--yellow); padding-top: 1rem; }
.app .facts p { color: #CFCFCF; }
.app a:focus-visible { outline-color: var(--yellow); }
@media (max-width: 860px) {
  .app-grid { grid-template-columns: 1fr; grid-template-areas: 'head' 'phones' 'facts'; }
  .app-address { font-size: clamp(2.6rem, 11vw, 6rem); }
  .app-open { margin-bottom: 2.5rem; }
  .phones { width: min(100%, 24rem); margin: 0 0 2rem; }
}
@media (max-width: 420px) { .phone { border-radius: 2rem; padding: .35rem; } .phone img { border-radius: 1.65rem; } }
@media (max-width: 560px) { .app .facts { grid-template-columns: 1fr; } }

.services { border-top: 1px solid var(--rule); }

.tariff { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 0; }
.tariff div { padding: 1.5rem 1.25rem 1.5rem 0; }
.tariff div + div { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
.tariff dt { color: var(--grey); font-weight: 500; }
.tariff dd { margin: .25rem 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; }
.tariff dd small { font-family: var(--text); font-weight: 500; font-size: .95rem; color: var(--grey); margin-left: .2rem; }
.note { max-width: var(--measure); margin: 1.25rem 0 0; color: var(--grey); }
@media (max-width: 800px) {
  .tariff { grid-template-columns: 1fr 1fr; }
  .tariff div + div { border-left: 0; padding-left: 0; }
  .tariff div:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
  .tariff div:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; margin: 0; padding: 0; list-style: none; }
.facts li { max-width: 34rem; }
.facts h3 { margin: 0 0 .3rem; font-size: 1.15rem; font-weight: 600; }
.facts p { margin: 0; }
@media (max-width: 800px) { .facts { grid-template-columns: 1fr; } }

.members-cta { background: var(--yellow); }
.members-cta .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: end; }
.members-cta p { margin: 0; max-width: var(--measure); font-size: 1.15rem; }
.members-cta .count { justify-self: end; font-family: var(--display); font-weight: 800; font-size: clamp(5rem, 14vw, 11rem); line-height: .8; }
.members-cta a { font-weight: 600; }
@media (max-width: 800px) { .members-cta .wrap { grid-template-columns: 1fr; } .members-cta .count { justify-self: start; grid-row: 1; } }

/* ── Members register ── */
.page-head { background: var(--yellow); }
.page-head .head-body { padding-top: 1.5rem; padding-bottom: 2.5rem; }
.page-head h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(2.8rem, 7vw, 5rem); line-height: .95; }
.page-head p { max-width: 44rem; margin: 1rem 0 0; font-size: 1.1rem; }
.crumbs { margin: 0 0 .75rem; font-weight: 500; }
.crumbs a { text-decoration: underline; text-underline-offset: .15em; }

.register { width: 100%; border-collapse: collapse; font-size: 1rem; }
.register caption { text-align: left; color: var(--grey); padding-bottom: .75rem; }
.register th { text-align: left; font-weight: 600; border-bottom: 2px solid var(--black); padding: .6rem .75rem .6rem 0; }
.register td { border-bottom: 1px solid var(--rule); padding: .8rem .75rem .8rem 0; vertical-align: top; }
.register a { font-weight: 600; text-decoration: none; }
.register a:hover { text-decoration: underline; }
.register tr:target td { background: #FFF6D6; }
@media (max-width: 760px) {
  .register thead { display: none; }
  .register tr { display: block; border-bottom: 1px solid var(--rule); padding: .9rem 0; }
  .register td { display: block; border: 0; padding: .1rem 0; }
  .register td[data-label]::before { content: attr(data-label) ': '; color: var(--grey); }
}

.card > * { max-width: 44rem; }
.card dl { display: grid; grid-template-columns: max-content 1fr; gap: .9rem 2rem; margin: 0 0 2.5rem; }
.card dt { color: var(--grey); font-weight: 500; }
.card dd { margin: 0; font-weight: 500; }
.card h2 { font-size: 1.75rem; margin-top: 2.5rem; }
.card p { max-width: var(--measure); }
.card .actions { margin-top: 1.5rem; }

/* ── Footer ── */
footer { background: var(--black); color: #CFCFCF; padding: 3rem 0 6rem; font-size: .95rem; }
footer .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
footer strong { color: var(--white); font-weight: 600; display: block; margin-bottom: .35rem; }
footer p { margin: 0 0 .35rem; }
footer a { color: var(--yellow); }
footer a:focus-visible { outline-color: var(--yellow); }
@media (max-width: 800px) { footer .wrap { grid-template-columns: 1fr; } }

/* ── The call bar on phones ── */
.callbar { display: none; }
@media (max-width: 720px) {
  .callbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
    justify-content: center; align-items: center; gap: .5rem;
    background: var(--black); color: var(--yellow); text-decoration: none;
    font-family: var(--display); font-weight: 700; font-size: 1.4rem;
    padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom));
  }
}