/*
 * Theme · Novara FC (04 · section 5, built with the two-pass process of section 2; plan in HANDOFF_04).
 * Own identity, same information architecture as Monza. Values to verify with the club brand kit.
 * Principles: night blue frames the page (header, hero, footer, balance), light blue is only action and numbers;
 * dry shapes (6 px, flat cards, no card shadows); the territory is a home block (extra.js);
 * the only graphic sign is an original line drawing of a city dome, never a crest.
 * Contrast ratios (WCAG 2.x relative luminance) computed for every pair and noted next to each value.
 */
@import url("../../shared/vendor/fonts/saira/saira.css");

:root {
  /* palette: Blu notte, Azzurro Piola, Azzurro profondo, Velo azzurro, Nebbia */
  --c-ink: #0D2238;            /* Blu notte · white on it 16.12:1 · header, hero, footer, balance band */
  --c-brand: #1192D8;          /* Azzurro Piola · white 3.43:1 (large text and surfaces only) · on Blu notte 4.70:1 */
  --c-brand-strong: #0B6FAA;   /* Azzurro profondo · buttons, small brand text · white 5.43:1 */
  --c-brand-soft: #E4F3FC;     /* Velo azzurro · FAN badges · Azzurro profondo on it 4.79:1 */
  --c-on-brand: #FFFFFF;
  --c-ink-muted: #5B6573;      /* 5.91:1 on white, 5.45:1 on Nebbia */
  --c-surface: #FFFFFF;
  --c-canvas: #F3F6F9;         /* Nebbia */
  --c-line: #DCE4EC;
  --c-success: #1F7A45;        /* 5.35:1 on white */
  --c-warning: #9A5B00;        /* 5.43:1 on white */
  --c-danger: #C62828;         /* 5.62:1 on white; red far from the club blue, always with an icon */
  --c-focus: #0B6FAA;

  /* dark header (core tokens, 04 · section 3) */
  --c-header-bg: #0D2238;
  --c-header-fg: #FFFFFF;
  --c-header-line: #0D2238;
  --c-header-accent: #FFFFFF;
  --c-header-mark: #1192D8;    /* active underline, 4.70:1 on Blu notte */
  --c-header-hover: rgba(255, 255, 255, 0.08);
  --c-header-current: rgba(17, 146, 216, 0.18);
  --c-header-focus: #FFFFFF;

  --f-display: "Saira", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-text: "Saira", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fw-display: 750;
  --fwdth-display: 75%;

  --r-card: 6px;
  --r-control: 6px;
  --r-pill: 999px;

  --cta-chevron: none;
  /* Original line drawing of a stepped city dome with its spire (not a crest): light blue stroke on night blue. */
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 400' fill='none' stroke='%231192D8' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M0 398H200'/%3E%3Crect x='30' y='322' width='140' height='76'/%3E%3Cpath d='M48 332v56M66 332v56M84 332v56M102 332v56M120 332v56M138 332v56M156 332v56'/%3E%3Crect x='50' y='272' width='100' height='50'/%3E%3Cpath d='M64 280v34M80 280v34M96 280v34M112 280v34M128 280v34M140 280v34'/%3E%3Cpath d='M50 272C50 222 150 222 150 272'/%3E%3Crect x='80' y='190' width='40' height='44'/%3E%3Cpath d='M90 198v28M100 198v28M110 198v28'/%3E%3Cpath d='M80 190C80 166 120 166 120 190'/%3E%3Crect x='91' y='132' width='18' height='40'/%3E%3Cpath d='M91 132L100 44L109 132'/%3E%3Cpath d='M100 44V14'/%3E%3Ccircle cx='100' cy='10' r='4'/%3E%3C/svg%3E") right 6% bottom / auto 88% no-repeat;
}

/* Header: the club name in white next to the crest; balance pill with a light blue ring. */
.site-header .fan-pill { border-color: #1192D8; }
.site-header .fan-pill--negative { background: #FBE8EB; border-color: #FBE8EB; color: #A3122A; }   /* 6.67:1 */

/* Hero: night blue field, photo confined to the right 55%; without a photo the dome drawing stands on the right. */
.hero::before { background: linear-gradient(90deg, #0D2238 0 45%, rgba(13, 34, 56, 0.55) 52%, rgba(13, 34, 56, 0) 68%); }
.hero__media { left: 45%; }
.hero--placeholder .hero__media { left: 0; }
.hero__title { font-weight: 780; font-stretch: 72%; letter-spacing: 0; max-width: 11ch; }
@media (max-width: 699px) {
  .hero__media { left: 0; }
  .hero::before { background: rgba(13, 34, 56, 0.72); }
  .hero--placeholder .hero__media::after { opacity: 0.45; }
}

/* Territory block (extra.js): breathing room from the shop grid. */
.page-body > .territory { margin-top: var(--s-7); }
.territory .section-head p { max-width: 60ch; }

/* Cards: flat with a hairline; hover turns the edge light blue. */
.product-card:hover, .exp-card:hover { border-color: #1192D8; }
.fan-badge { border-radius: 4px; }

/* "Come funziona": numbered steps in condensed numerals instead of icons, separated by hairlines. */
.steps { background: transparent; border: 0; border-block: 1px solid var(--c-line); border-radius: 0; padding-inline: 0; }
.steps__list { counter-reset: step; }
.steps__icon { counter-increment: step; width: auto; height: auto; background: none; color: #0B6FAA; }
.steps__icon .icon { display: none; }
.steps__icon::before { content: counter(step); font-family: var(--f-display); font-weight: 800; font-stretch: 70%; font-size: var(--t-2xl); line-height: 1; font-variant-numeric: tabular-nums; }
.steps__item + .steps__item::before { -webkit-mask: none; mask: none; width: 1px; height: 36px; background: var(--c-line); }

/* Account: the balance sits on a night blue band at the top of its card. */
.account-balance__top {
  --c-focus: #FFFFFF;
  margin: calc(-1 * clamp(var(--s-4), 2.4vw, var(--s-6))) calc(-1 * clamp(var(--s-4), 2.4vw, var(--s-6))) 0;
  padding: clamp(var(--s-4), 2.4vw, var(--s-6));
  background: #0D2238; color: #FFFFFF; border-radius: var(--r-card) var(--r-card) 0 0;
}
.account-balance__label { color: #FFFFFF; }
.account-balance__top .balance__unit span { color: #C9D3DE; }                 /* 10.63:1 */
.account-balance__top .balance--empty .balance__num,
.account-balance__top .balance--empty .balance__unit b,
.account-balance__top .balance--empty .balance__coins { color: #9FB0C3; }    /* 7.27:1 */
.account-balance__top .balance--negative .balance__num,
.account-balance__top .balance--negative .balance__unit b,
.account-balance__top .balance--negative .balance__coins { color: #FF9C94; } /* 8.01:1 */
.account-balance__top .btn--primary { --btn-bd: #1192D8; }
.account-balance__top .btn--ghost { --btn-fg: #FFFFFF; }
.account-balance__top .btn--ghost:hover { --btn-bg: rgba(255, 255, 255, 0.1); }

/* ---- Review pass (revisore-ui, session 4) ---- */
/* FAN marks without the star (a Monza motif): figures only, in condensed tabular numerals. */
.fan-badge { padding: 3px 8px; font-stretch: 85%; }
.fan-badge__star, .fan-pill__star { display: none; }
.fan-pill { padding: 4px 14px; font-stretch: 85%; }
.pack__coin { background: #0D2238; box-shadow: inset 0 0 0 3px #1192D8; font-stretch: 85%; }
/* Condensed width only for large titles; small headings and names stay at normal width. */
h4, .product-card__name, .account-balance__label, .help-link__title { font-stretch: 100%; }
.product-card__name { font-weight: 650; }
/* Prices and indicators: a touch narrower and lighter, so the balance stays the largest number. */
.price__now, .pack__price, .kpi__value { font-stretch: 85%; font-weight: 750; }
/* Provisional crest on the dark header: transparent, as in the footer. */
.site-header .crest-ph { background: transparent; border-color: rgba(255, 255, 255, 0.7); color: #FFFFFF; }
/* Help links in the account: a list with hairlines, no cards and no chevrons. */
.help-link { border: 0; border-top: 1px solid var(--c-line); border-radius: 0; background: transparent; padding-inline: 0; }
.help-link:hover { border-color: var(--c-line); }
.help-link:hover .help-link__title { text-decoration: underline; }
.help-link > .icon:last-child { display: none; }
/* Pass 4, one decoration less: the dome stays only on the home hero, not in inner heroes or the cart title. */
.hero--compact.hero--placeholder .hero__media::after, .cart-head::after { display: none; }
.mini-coin { background: #0D2238; box-shadow: inset 0 0 0 2px #1192D8; }