/* MediaPress — shared styles */
:root {
  /* Primary blue from logo */
  --brand: #0349a8;
  --brand-700: #043B89;
  --brand-900: #022A66;
  --brand-50: #E8EFF9;
  --powder: #B8D4E8;
  --powder-soft: #E8F0F7;

  /* Light theme tokens */
  --bg: #FAF8F4;
  --surface: #FFFFFF;
  --ink: #11182B;
  --ink-soft: rgba(17,24,43,0.75);
  --ink-mute: rgba(17,24,43,0.55);
  --rule: rgba(3,73,168,0.14);
  --card-border: rgba(3,73,168,0.12);
  --inv-text: #FFFFFF;

  /* Dark sections */
  --dark-bg: #07112A;
  --dark-bg-2: #0A1838;

  --paper: var(--bg);
  --navy: var(--brand);
  --navy-dark: var(--brand-900);
}

[data-theme="dark"] {
  --bg: #06101F;
  --surface: #0C1A33;
  --ink: #ECF1F8;
  --ink-soft: rgba(236,241,248,0.78);
  --ink-mute: rgba(236,241,248,0.55);
  --rule: rgba(184,212,232,0.18);
  --card-border: rgba(184,212,232,0.14);
  --paper: var(--bg);
  --dark-bg: #02080F;
  --dark-bg-2: #06101F;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .3s ease, color .3s ease;
}

.font-serif { font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; }
.font-sans  { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

.serif-italic { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; }

.h-display { font-family: 'Playfair Display', serif; font-weight: 500; letter-spacing: -0.02em; line-height: 0.98; }

.eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--brand); }
.eyebrow.on-dark { color: var(--powder); }

.rule { height: 1px; background: var(--rule); width: 100%; }
.rule-on-dark { height: 1px; background: rgba(184,212,232,0.25); width: 100%; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; border-radius: 999px; transition: all .25s ease; white-space: nowrap; cursor: pointer; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-700); transform: translateY(-1px); }
.btn-ghost { color: var(--brand); border: 1px solid color-mix(in oklab, var(--brand) 35%, transparent); background: transparent; }
.btn-ghost:hover { border-color: var(--brand); background: color-mix(in oklab, var(--brand) 6%, transparent); }
.btn-light { background: #fff; color: var(--brand); }
.btn-light:hover { background: var(--powder-soft); }

/* Link with underline trick */
.link-arrow { display:inline-flex; align-items:center; gap:8px; font-weight:500; color: var(--brand); position:relative; }
.link-arrow::after { content: ""; position: absolute; left:0; right: 28px; bottom: -3px; height: 1px; background: currentColor; }
.link-arrow:hover .arrow-i { transform: translateX(4px); }
.arrow-i { transition: transform .25s ease; }

/* Nav */
.navbar { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 85%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--rule); }
.nav-link { font-size: 13px; letter-spacing: 0.06em; font-weight: 500; color: var(--ink); padding: 8px 2px; position: relative; }
.nav-link::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: var(--brand); }
.nav-link.active::after { transform: scaleX(1); }

.logo-mark { font-family: 'Playfair Display', serif; letter-spacing: -0.01em; color: var(--ink); }
.logo-mark .press { font-style: italic; color: var(--brand); font-weight: 400; }

/* Toolbar (theme + lang) */
.tool-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding: 7px 11px; border:1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink-soft); font-size: 12px; font-weight: 500; cursor: pointer; transition: all .2s ease; }
.tool-btn:hover { color: var(--brand); border-color: color-mix(in oklab, var(--brand) 40%, transparent); }
.tool-btn.icon-only { width: 36px; height: 36px; padding: 0; }
.lang-toggle { display:inline-flex; border:1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.lang-toggle button { padding: 7px 11px; font-size: 11px; letter-spacing: 0.14em; font-weight: 600; background: transparent; color: var(--ink-mute); cursor: pointer; }
.lang-toggle button.active { background: var(--brand); color: #fff; }

.heroline { display: inline-block; height: 1px; width: 56px; background: var(--brand); vertical-align: middle; margin: 0 14px 6px 0; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--card-border); border-radius: 4px; transition: all .35s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -22px rgba(3,73,168,0.22); border-color: color-mix(in oklab, var(--brand) 25%, transparent); }

.icon-tile { width: 52px; height: 52px; border-radius: 4px; display: grid; place-items: center; background: color-mix(in oklab, var(--brand) 8%, transparent); color: var(--brand); border: 1px solid color-mix(in oklab, var(--brand) 12%, transparent); }
.icon-tile.lg { width: 72px; height: 72px; }
.icon-tile.dark { background: var(--brand); color: #fff; border-color: var(--brand); }

.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.06em; font-weight: 500; padding: 5px 10px; border-radius: 999px; background: color-mix(in oklab, var(--brand) 7%, transparent); color: var(--brand); border: 1px solid color-mix(in oklab, var(--brand) 12%, transparent); }

.bignum { font-family: 'Playfair Display', serif; font-weight: 500; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.02em; color: var(--brand); }

/* Fade in on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; }

/* Footer */
.footer { background: var(--dark-bg); color: #E6ECF3; }
.footer a:hover { color: #fff; }

/* "Made by AsApps Studio" credit */
.mp-credit { display: inline-flex; align-items: center; gap: 8px; opacity: .72; transition: opacity .25s ease; }
.mp-credit:hover { opacity: 1; }
.mp-credit img { height: 16px; width: auto; display: block; }

/* Card variants */
.card-dark { background: var(--brand-900); color: #fff; border: 1px solid rgba(184,212,232,0.18); border-radius: 4px; }
.card-dark a { color: #fff; }
.card-dark a:hover { color: var(--powder); }

/* Form */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field > span:first-child, .field-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-weight:500; display: block; }
label.field { display: flex; flex-direction: column; gap: 6px; }
label.field > span:first-child { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-weight:500; }
.check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand); }
.field input, .field select, .field textarea { width: 100%; padding: 14px 0; background: transparent; border: 0; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--ink); font-family: inherit; transition: border-color .25s ease; outline: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--brand); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }
.field textarea { resize: vertical; min-height: 96px; }
.field select option { background: var(--surface); color: var(--ink); }

.mobile-menu { display:none; }
.mobile-menu.open { display:block; }

section[id] { scroll-margin-top: 90px; }

.editorial-bg {
  background:
    radial-gradient(ellipse at 80% -20%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 55%),
    radial-gradient(ellipse at 0% 110%, color-mix(in oklab, var(--brand) 10%, transparent), transparent 50%),
    var(--bg);
}

.dark-bg { background: radial-gradient(ellipse at 80% 0%, rgba(184,212,232,0.14), transparent 55%), var(--dark-bg); color: #fff; }

.placeholder-striped { background-image: repeating-linear-gradient(135deg, color-mix(in oklab, var(--brand) 8%, transparent) 0 1px, transparent 1px 12px), linear-gradient(180deg, color-mix(in oklab, var(--brand) 5%, transparent), var(--surface)); border: 1px solid var(--rule); display:grid; place-items:center; color: var(--ink-mute); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }

/* Image slot filled from content/images.json (replaces the striped placeholder) */
.placeholder-striped.is-filled { background: none; border: 0; padding: 0; }
.slot-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

.hover-zoom { overflow: hidden; }
.hover-zoom .ph-inner { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.hover-zoom:hover .ph-inner { transform: scale(1.04); }

.dropcap::first-letter { font-family: 'Playfair Display', serif; font-size: 4.2em; line-height: 0.85; float: left; margin: 6px 12px 0 -2px; color: var(--brand); font-weight: 500; }

/* ---------- CLIENT LOGO WALL ("Hanno scelto noi") ---------- */
/* Each logo sits on its own white tile so multicolor logos read cleanly
   in both light and dark mode. To add a new client: copy one .logo-cell
   block in portfolio.html and point the <img> at a file in assets/logos/. */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 640px) { .logo-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1024px) { .logo-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; } }

.logo-cell {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  padding: 18px 22px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.logo-cell:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -20px rgba(3,73,168,0.28);
  border-color: color-mix(in oklab, var(--brand) 25%, transparent);
}
.logo-cell img {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Placeholder text shown until a real logo file is dropped in */
.logo-cell .logo-ph {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--brand);
  text-align: center;
  line-height: 1.2;
}

/* Logo image: invert in dark mode for legibility */
[data-theme="dark"] .logo-img-tile { background: #fff; }
[data-theme="dark"] .nav-logo-img { background: #fff; padding: 2px; border-radius: 4px; }

/* ============ FEEDBACK FIXES (client review) ============ */

/* 1) Mobile navbar overflow — site.css component display rules (.btn /
   .lang-toggle) were overriding Tailwind's responsive `hidden`, leaving the
   desktop CTA + language toggle visible on phones and overflowing the bar.
   Re-assert the intended hiding (mobile-only + scoped, desktop untouched). */
@media (max-width: 767px) {
  .navbar a.btn.hidden { display: none !important; }
}
@media (max-width: 639px) {
  .navbar .lang-toggle.hidden { display: none !important; }
}
@media (min-width: 640px) {
  #mobileMenu .lang-toggle.sm\:hidden { display: none !important; }
}

/* 2) Dark mode — brand blue (#0349a8) is too dark on the night background, so
   the stats numbers and accent words were hard to read. Lighten the blue *text*
   accents in dark mode only (buttons/backgrounds keep the solid brand blue). */
[data-theme="dark"] .bignum,
[data-theme="dark"] .text-brand,
[data-theme="dark"] .eyebrow:not(.on-dark),
[data-theme="dark"] .link-arrow { color: #5e9bff; }
[data-theme="dark"] .btn-ghost { color: #5e9bff; border-color: color-mix(in oklab, #5e9bff 45%, transparent); }