/* ==========================================================================
   vodafone.css — Vodafone design layer over the Italians.ch portale.
   Loaded LAST on every page, so it cascades over styles.css / portale.css
   (editorial pages) and airbnb.css (case-vacanze).

   Translates the site to the Vodafone design language (see DESIGN-vodafone.md):
     · single red accent  #CE2B37  (no second accent colour)
     · ink / white band rhythm — surface contrast, not soft neutrals
     · heavy uppercase display type (Inter 800, tight tracking)
     · pill CTAs (60px radius), flat surfaces (no drop shadows)
     · editorial photography stays (the placeholder gradient tiles)

   Fully reversible: delete the <link> to this file to restore the original.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   1. Token remap — editorial pages (styles.css + portale.css :root)
   ========================================================================== */
:root {
  /* Surfaces — white canvas, near-white soft, hairline */
  --cream:       #ffffff;
  --cream-2:     #f2f2f2;
  --white:       #ffffff;
  --line:        #e3e3e3;

  /* Text */
  --ink:         #15110F;
  --ink-soft:    #4a4d50;
  --gray:        #7e7e7e;

  /* Brand: red is the ONLY accent. The former "green" tokens (used for dark
     bands, nav, footer, wordmark) become Vodafone ink; the CTA greens become
     Vodafone red. */
  --green:       #15110F;
  --green-card:  #2f3337;
  --green-dark:  #1b1d1f;
  --green-deep:  #141517;
  --italy-green: #CE2B37;
  --italy-green-dark: #A4222C;
  --red:         #CE2B37;
  --red-dark:    #A4222C;

  /* Gold accent is removed in Vodafone → fold into the red family */
  --gold:        #CE2B37;
  --gold-dark:   #A4222C;
  --gold-soft:   #f6c9c9;

  /* portale.css vertical tints → neutralise to grey / red / ink */
  --teal-bg:  #f2f2f2;  --teal-ln:  #e3e3e3;
  --terra-bg: #fbe6e6;  --terra-ln: #f3c4c4;  --terra: #CE2B37;
  --indigo:   #15110F;  --indigo-bg: #f2f2f2;

  /* Single typeface throughout (kills Playfair / Spectral serif) */
  --serif: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sans:  Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* airbnb page (case-vacanze) — recolour Rausch → Vodafone red */
  --rausch:        #CE2B37;
  --rausch-active: #A4222C;
  --rausch-disabled: #f6c9c9;
}

/* ==========================================================================
   2. Typography — one family, heavy uppercase display voice
   ========================================================================== */
body, .abnb { font-family: var(--sans); }

/* Drop every italic-serif flourish */
.wordmark, .masthead__motto, .footer__motto, .reader__brand, .reader__quote,
.auth__brand, .phero__title em, .plan__name, .adhouse b {
  font-style: normal;
}

/* Wordmark → Archivo Black, ink with a red TLD (Italians.ch brand) */
.wordmark {
  font-family: 'Archivo Black', var(--sans);
  font-weight: 400;
  letter-spacing: -.03em;
  color: var(--ink);
}
/* Header lockup: speech-bubble icon + wordmark (logo direction 02) */
.masthead .wordmark { display: inline-flex; align-items: center; }
.masthead .wordmark::before {
  content: "";
  width: .92em; height: .92em; flex: none; margin-right: .24em;
  background: url("../italians-icon.svg") center / contain no-repeat;
}
.wordmark .tld { color: var(--red); }
.footer .wordmark { color: #fff; }
.footer .wordmark .tld { color: var(--red); }

/* Hero headlines — the Vodafone billboard: UPPERCASE weight 800, tight */
.phero__title {
  font-family: var(--sans);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: clamp(40px, 7vw, 92px);
  line-height: .95;
  color: #fff;
  max-width: 18ch;
}
.phero__title em { color: var(--red); font-style: normal; }

.lead h2, .lead .lead__title {
  font-family: var(--sans);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -.015em;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: .98;
}

/* Hero deck (sottotitolo): segue la larghezza dell'hero, non più stretto a 600px */
.lead .lead__deck { max-width: none; }

/* Section heads — uppercase 800, moderate scale */
.events__title, .newsletter__title, .block-head h2, .tabbed__head h2,
.psection__title, .section-head-row h2, .col-heading, .mealplan h2 {
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

/* Body-level headings stay sentence-case for legibility, Inter 700 */
.card h3, .lcard__title, .lcard__name, .cinema-card h3, .latest__item h3,
.mostread__title, .partnerbox__title, .plan__name, .mealday b,
.reader__title, .reader__deck, .auth__title, .adbanner__title,
.adhouse b, .eventcard__venue, .stat__lbl, .lcard__meta, .table td b {
  font-family: var(--sans);
  letter-spacing: -.005em;
  text-transform: none;
}
.card h3, .lcard__title, .lcard__name, .cinema-card h3, .latest__item h3,
.partnerbox__title, .plan__name, .auth__title, .reader__title { font-weight: 700; }

/* Eyebrows / kickers / labels → red, heavy (on light surfaces) */
.kicker, .eyebrow, .psection__eyebrow, .masthead__since, .sponsors__label,
.adwrap__label, .ticker__tag, .events__all, .block-head__more,
.lcard__tag, .table__price, .auth__switch button {
  color: var(--red);
}
.kicker, .eyebrow, .psection__eyebrow, .masthead__since { font-weight: 800; }

/* Eyebrows that sit on dark (ink) bands → light, not red (contrast) */
.events__kicker, .newsletter__kicker, .phero__eyebrow {
  color: #fff;
  opacity: .9;
  font-weight: 800;
}
.footer__head { color: #fff; opacity: .75; }

/* Numerals that were gold → red brand pop */
.mostread__n, .stat__num, .eventcard__day { color: var(--red); }

/* ==========================================================================
   3. Buttons & pills — red fill primary, outline secondary, 60px radius
   ========================================================================== */
.btn, .partnerbox__btn, .newsletter__form button, .btn-newsletter,
.eventcard__btn, .abnb-btn, .tab {
  border-radius: 60px;
}

/* Primary CTA — solid Vodafone red pill */
.btn--green, .btn--gold, .partnerbox__btn, .newsletter__form button,
.btn-newsletter, .abnb-btn--primary, .abnb-btn--grad {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  filter: none;
}
.btn--green:hover, .btn--gold:hover, .partnerbox__btn:hover,
.newsletter__form button:hover, .btn-newsletter:hover,
.abnb-btn--primary:hover, .abnb-btn--grad:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  filter: none;
}

/* Secondary / outline pills */
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--ghost-light { border-color: rgba(255,255,255,.7); }
.abnb-btn--secondary { border-radius: 60px; border-color: var(--ink); }

/* Active tab / current nav → red */
.tab[aria-selected="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.navitem[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); }

/* ==========================================================================
   4. Surfaces — flat (no soft shadows); contrast does the elevation work
   ========================================================================== */
.card, .lcard, .eventcard, .plan, .lcard__price { border-radius: 6px; }

.card:hover, .lcard:hover, .eventcard:hover {
  box-shadow: none;
  border-color: var(--ink);
}
.card:hover, .cinema-card:hover { transform: translateY(-2px); }

/* airbnb page: keep functional chrome, drop the soft shadow tier */
.abnb-search, .abnb-account:hover, .abnb-badge { box-shadow: none; }
.abnb-search { border-color: var(--ink); }
.abnb-account { border-color: var(--ink); }

/* ==========================================================================
   5. case-vacanze (airbnb layout) — Vodafone display + logo
   ========================================================================== */
.abnb-logo { text-transform: uppercase; letter-spacing: -.01em; color: var(--red); }
.abnb-hero h1 {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.02;
}
.abnb-h2 { font-weight: 800; letter-spacing: -.01em; }
.abnb-tab[aria-selected="true"]::after { background: var(--red); }
.abnb-cat[aria-selected="true"] { border-bottom-color: var(--red); }

/* ==========================================================================
   6. Misc brand alignment
   ========================================================================== */
/* speechmark-style red accent on the masthead motto */
.masthead__motto { color: var(--red); }

/* keep dark utility / ticker bars clearly Vodafone ink */
.utility { background: var(--ink); }
.ticker  { background: var(--ink); }

/* tab outline geometry already pill; ensure consistent padding feel */
.tab { padding: 8px 18px; }

/* ==========================================================================
   7. Notizie importate (reader body) — stile del RichText Webflow
   ========================================================================== */
.reader__body p { font-size: 17px; line-height: 1.7; margin: 0 0 18px; color: var(--ink); }
.reader__body img { max-width: 100%; height: auto; display: block; border-radius: 6px; margin: 18px 0; }
.reader__body figure { margin: 18px 0; }
.reader__body figcaption { font-size: 13px; color: var(--gray); margin-top: 6px; }
.reader__body h2 { font-family: var(--sans); font-weight: 800; font-size: 24px; text-transform: uppercase; letter-spacing: -.01em; margin: 30px 0 10px; }
.reader__body h3 { font-family: var(--sans); font-weight: 700; font-size: 20px; margin: 24px 0 8px; }
.reader__body a { color: var(--red); text-decoration: underline; }
.reader__body ul, .reader__body ol { margin: 0 0 18px; padding-left: 22px; }
.reader__body li { margin: 6px 0; }
.reader__body iframe, .reader__body video { max-width: 100%; border-radius: 6px; margin: 18px 0; }
.reader__body blockquote { border-left: 3px solid var(--red); padding-left: 18px; margin: 24px 0; font-style: italic; }
.card { cursor: pointer; }

/* Pagina articolo: si apre come un sito normale (header/menu/footer restano in cima) */
.article-wrap { max-width: 760px; margin: 0 auto; padding: 30px 20px 72px; }
.article-back { display: inline-block; margin-bottom: 16px; color: var(--gray); font: 600 14px/1 var(--sans, Inter), system-ui, sans-serif; text-decoration: none; }
.article-back:hover { color: var(--red, #CE2B37); }
.article-page .kicker { margin-bottom: 6px; }
.article-page .reader__title { margin-top: 0; }
.article-page .reader__media { aspect-ratio: 16 / 9; margin: 10px 0 26px; border-radius: 10px; }
.related { margin-top: 18px; padding-top: 30px; border-top: 1px solid var(--line); }
/* Reader: con articoli lunghi il pannello deve crescere col contenuto e scrollare
   (default align-items:stretch lo stirava all'altezza viewport -> overflow visibile) */
.reader { align-items: flex-start; }

/* ==========================================================================
   8. Redazione (area riservata giornalisti)
   ========================================================================== */
.red-grid { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: start; }
.red-list { display: flex; flex-direction: column; gap: 8px; max-height: 72vh; overflow: auto; padding-right: 4px; }
.red-item { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 3px; transition: border-color .12s; }
.red-item:hover { border-color: var(--ink); }
.red-item.is-on { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.red-item__t { font-weight: 600; font-size: 14px; line-height: 1.25; color: var(--ink); }
.red-item__m { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--red); }
#f-body:focus { border-color: var(--ink); }
@media (max-width: 860px) { .red-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   9. Editor redazione: font coerente (titolo/sottotitolo = corpo) + toolbar RTE
   ========================================================================== */
#f-title, #f-sub, #f-body { font-family: var(--sans) !important; color: var(--ink); }
#f-title { font-size: 18px; font-weight: 600; }
#f-sub { font-size: 17px; line-height: 1.6; resize: none; overflow: hidden; }
.rte-toolbar { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px; background: var(--cream-2); border: 1px solid var(--line); border-bottom: none; border-radius: 8px 8px 0 0; }
.rte-toolbar button { background: #fff; border: 1px solid var(--line); border-radius: 6px; min-width: 34px; padding: 6px 9px; font: inherit; font-size: 14px; line-height: 1; color: var(--ink); cursor: pointer; }
.rte-toolbar button:hover { border-color: var(--ink); }

/* Redazione: anteprime foto */
.red-photos { display: flex; gap: 16px; flex-wrap: wrap; }
.red-photo { flex: 1 1 200px; }
.red-photo__cap { font-size: 12px; color: var(--gray); margin-bottom: 6px; }
.red-photo__img { width: 100%; aspect-ratio: 16/10; border: 1px solid var(--line); border-radius: 8px; background: var(--cream-2) center/cover no-repeat; }