/* =========================================================================
   Tonygomme — shared styles
   Typography: two voices only
     · mono     → main links + metadata (Space Mono)
     · system   → all descriptive / longer text (body default)
     · grotesk  → large display headings
   Spacing: exactly two tokens — --reg (regular) and --lg (large)
   ========================================================================= */

:root{
  --reg:  1.5rem;   /* regular — gutters, internal padding, small rhythm */
  --md:   3rem;   /* regular — gutters, internal padding, small rhythm */
  --lg:   5rem;     /* large   — section breaks, page rhythm */
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
/* Unlike hidden, clip does not create an overflow scroll container that
   prevents descendant position:sticky elements from following page scroll. */
html,body{ overflow-x:clip; }

/* system font = the default voice for descriptive text & longer details */
body{
  margin:0;
  background:#fff;
  color:#000;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
}
::selection{ background:#000; color:#fff; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---- the two type voices ------------------------------------------------ */
.grotesk{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:800; letter-spacing:-0.045em; line-height:0.82;
  text-transform:uppercase; margin:0;
}
.mono{
  font-family:'Space Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
}
/* Menu / Chiudi etc. are <button>s but must read as plain mono links */
button.mono{
  -webkit-appearance:none; appearance:none;
  background:none; border:0; padding:0; margin:0;
  color:inherit; cursor:pointer; line-height:inherit;
}
.hov{ transition:opacity .2s; }
.hov:hover{ opacity:0.45; }

/* ---- spacing system: two tokens, nothing else --------------------------- */
.px-page{ padding-left:var(--reg); padding-right:var(--reg); }
.py-lg{ padding-top:var(--lg); padding-bottom:var(--lg); }
.pt-lg{ padding-top:var(--lg); }
.pb-lg{ padding-bottom:var(--lg); }
.p-reg{ padding:var(--reg); }
.pad-reg-y{ padding-top:var(--reg); padding-bottom:var(--reg); }
.mb-reg{ margin-bottom:var(--reg); }
.mb-lg{ margin-bottom:var(--lg); }
.mt-reg{ margin-top:var(--reg); }
.mt-lg{ margin-top:var(--lg); }
.gap-reg{ gap:var(--reg); }
.gap-lg{ gap:var(--lg); }

/* ---- brand wordmark ----------------------------------------------------- */
.logo-svg{ fill:currentColor; display:block; }

/* ---- header — rides over the black hero, then solidifies ---------------- */
#hdr{
  position:fixed; inset-inline:0; top:0; z-index:50;
  color:#fff; transition:color .2s, background-color .2s, border-color .2s;
}
#hdr .bar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  height:56px; padding-left:var(--reg); padding-right:var(--reg);
}
#hdr.solid{ color:#000; background:#fff; border-bottom:1px solid #000; }
/* subpages have no dark hero → solid by default */
#hdr.static{ color:#000; background:#fff; border-bottom:1px solid #000; }

.nav-left{ display:flex; align-items:center; gap:var(--reg); }
.nav-right{ display:flex; align-items:center; justify-content:flex-end; gap:var(--reg); }
.nav-link{ display:none; }
@media(min-width:1024px){ .nav-link{ display:inline; } .menu-btn{ display:none; } }

/* ---- mobile menu -------------------------------------------------------- */
#menu{
  position:fixed; inset:0; z-index:60; display:flex; flex-direction:column;
  background:#000; color:#fff; transition:opacity .25s, visibility .25s;
}
#menu[hidden]{ display:flex; opacity:0; visibility:hidden; pointer-events:none; }
#menu .bar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  height:56px; padding-left:var(--reg); padding-right:var(--reg);
}
#menu nav{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:var(--reg); padding:var(--reg); }
#menu nav a{ font-size:clamp(2.5rem,12vw,4rem); }

/* ---- floating WhatsApp icon (Phosphor whatsapp-logo) — no circle -------- */
#wa{
  position:fixed; right:var(--reg); bottom:var(--reg); z-index:70;
  display:flex; align-items:center; justify-content:center;
  color:#fff;                       /* white over the dark hero */
  transition:color .2s, transform .2s;
}
#wa.dark{ color:#000; }             /* black over white content / subpages */
body.menu-open #wa{ color:#fff; }   /* the mobile menu is always black */
#wa:hover{ transform:translateY(-2px); }
#wa svg{ width:40px; height:40px; }

/* ---- hero --------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden; background:#000; color:#fff;
  min-height:100svh; display:flex; flex-direction:column; justify-content:space-between;
  padding:5rem var(--reg) var(--reg);  /* top clears header; sides + bottom = regular */
}
.hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); }
.hero .veil{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.12) 34%,rgba(0,0,0,.12) 56%,rgba(0,0,0,.62)); }
.hero .row{ position:relative; z-index:10; display:flex; justify-content:space-between; }
.hero .row.bottom{ align-items:flex-end; }
/* -0.07em hangs the big grotesk caps onto the gutter so their VISUAL left
   edge lines up with the mono labels / body text (compensates side bearing) */
.hero h1{ position:relative; z-index:10; font-size:7vw; line-height:0.9; margin-left:-0.07em; }
@media(min-width:1024px){ .hero h1{ font-size:8vw; } }

/* ---- newsroom — photo / text checkerboard ------------------------------ */
/* Each item is <photo><text>: the photo is the "black" square, the text sits
   on white. On desktop the photo alternates left/right row to row so the
   photos read as a racing checkerboard. Single column on mobile. */
/* mobile: single column, NOT checkerboarded — items spaced, text flush to
   the photo's edge (no side padding so it lines up with the outer margin) */
.news-grid{ display:grid; grid-template-columns:1fr; width:100%; gap:var(--lg); }
.news-item{ display:grid; grid-template-columns:1fr; overflow:hidden; }
.news-photo{ aspect-ratio:16/9; overflow:hidden; align-self:start; }
.news-photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04); transition:transform .5s ease; }
.news-item:hover .news-photo img{ transform:scale(1.04); }
.news-text{
  background:#fff; color:#000; padding-top:var(--reg);
  display:flex; flex-direction:column; justify-content:center; gap:var(--reg);
}
.news-title{ font-size:clamp(1.6rem,3.2vw,2.6rem); line-height:1.1; }
.news-excerpt{ font-size:0.95rem; line-height:1.65; max-width:46ch; }

/* desktop: photo / text checkerboard — tiles touch, text padded inside */
@media(min-width:1024px){
  .news-grid{ gap:0; }
  .news-item{ grid-template-columns:1fr 1fr; }
  .news-text{ padding:var(--reg); }
  .news-item:nth-child(even) .news-photo{ grid-column:2; grid-row:1; }
  .news-item:nth-child(even) .news-text{ grid-column:1; grid-row:1; }
  .news-item--text-only .news-text{ grid-column:1 / -1; }
}

/* ---- generic prose / sections ------------------------------------------ */
.prose{ max-width:60ch; line-height:1.7; }
.display-xl{ font-size:12vw; line-height:0.84; margin-left:-0.07em; }  /* optical gutter align */
@media(min-width:1024px){ .display-xl{ font-size:9vw; } }

/* ---- services index ----------------------------------------------------- */
.svc{ display:grid; grid-template-columns:2rem 1fr; gap:var(--reg); }
@media(min-width:1024px){ .svc{ grid-template-columns:4rem 1fr; } }
.svc .svc-no{ padding-top:0.5rem; }
.svc h3{ font-size:clamp(2rem,6vw,3.75rem); }
@media(min-width:1024px){ .svc .svc-no{ padding-top:1.25rem; } }

/* ---- responsive multi-column footer ------------------------------------ */
@media(min-width:768px){
  .footer-cols{ grid-template-columns:repeat(4,1fr) !important; }
}

@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .news-tile a:hover .news-photo img{ transform:none; } }

/* ---- WordPress integration -------------------------------------------- */
.admin-bar #hdr{ top:32px; }
.admin-bar #menu{ top:32px; }
@media(max-width:782px){ .admin-bar #hdr,.admin-bar #menu{ top:46px; } }

.screen-reader-text{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.footer-detail{ text-transform:none; letter-spacing:0; line-height:1.9; }
.footer-base{ display:flex; justify-content:space-between; }
.footer-wordmark{ overflow:hidden; }
.footer-wordmark svg{ width:100%; height:auto; }
.hero-address{ text-align:right; }
.services-list{ display:flex; flex-direction:column; gap:var(--md); }

/* ---- services partner grid -------------------------------------------- */
.brands-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
}
.brand-mark{
  min-height:8rem; padding:var(--reg);
  display:flex; align-items:center; justify-content:center;
}
.brand-mark img{
  width:100%; height:4rem; object-fit:contain;
}
@media(min-width:768px){
  .brands-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .brand-mark{ min-height:10rem; }
  .brand-mark img{ width:min(100%,12rem); }
}
@media(min-width:1024px){
  .brands-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}

.entry-content{ /*max-width:60ch;*/ line-height:1.7; }
.entry-content > *:first-child{ margin-top:0; }
.entry-content > *:last-child{ margin-bottom:0; }
.entry-content h2,.entry-content h3,.entry-content h4{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:800;
  letter-spacing:-0.045em; line-height:0.95; text-transform:uppercase;
  margin:var(--lg) 0 var(--reg);
}
.entry-content h2{ font-size:clamp(2rem,6vw,3.75rem); }
.entry-content h3{ font-size:clamp(1.5rem,4vw,2.5rem); }
.entry-content p,.entry-content ul,.entry-content ol,.entry-content blockquote{ margin:0 0 var(--reg); }
.entry-content a{ text-decoration:underline; text-underline-offset:.2em; }
.entry-content blockquote{ border-left:1px solid #000; padding-left:var(--reg); }
.entry-content figure{ margin:var(--lg) 0; }
.entry-content figcaption{ font-family:'Space Mono',ui-monospace,monospace; font-size:11px; letter-spacing:.08em; margin-top:.5rem; }
.article-hero img,.page-feature img{ width:100%; height:auto; max-height:none; object-fit:contain; filter:grayscale(1) contrast(1.04); }
.article-layout--reading-room .entry-content{ max-width:72ch; margin-left:auto; margin-right:auto; }
.article-layout--reading-room .entry-content > .alignwide{
  width:min(100rem,calc(100vw - (var(--reg) * 2))); max-width:none;
  margin-left:50%; margin-right:0; transform:translateX(-50%);
}
.article-layout--reading-room .entry-content > .alignfull{
  width:100vw; max-width:none; margin-left:50%; margin-right:0; transform:translateX(-50%);
}
.article-layout--reading-room .entry-content > p{ margin-bottom:calc(var(--reg) * 1.25); }
.article-secondary-image{ margin:var(--lg) 0 0; }
.article-secondary-image img{ width:100%; max-height:80vh; object-fit:cover; filter:grayscale(1) contrast(1.04); }
.article-layout--three-columns .entry-content{ width:100%; max-width:none; }
.tonygomme-editorial-heading{ max-width:calc((100% - (var(--reg) * 2)) / 3); }
.tonygomme-editorial-columns{ width:100%; max-width:none; gap:var(--reg); }
.tonygomme-editorial-columns > .wp-block-column{ margin-top:0 !important; }
.tonygomme-editorial-columns h1,.tonygomme-editorial-columns h2,.tonygomme-editorial-columns h3{ margin-top:0; }
/* Mobile deliberately removes desktop-only layout tricks: image first, then
   text; editorial columns stack in their authored left-to-right order. */
@media(max-width:1023px){
  .article-layout--sticky-image .article-hero,.article-layout--sticky-image .page-feature{ margin-top:var(--reg); }
  .article-layout--sticky-image .entry-content{ padding-top:var(--lg); }
  .article-layout--three-columns .wp-block-columns{ display:block; }
  .article-layout--three-columns .wp-block-column + .wp-block-column{ margin-top:var(--lg); }
  .tonygomme-editorial-heading{ max-width:none; }
  .article-layout--reading-room .entry-content{ max-width:60ch; }
}
@media(min-width:1024px){
  .article-layout--sticky-image{ display:grid; grid-template-columns:minmax(0,1fr) minmax(20rem,2fr); column-gap:var(--lg); align-items:start; padding:var(--lg) var(--reg); }
  .article-layout--sticky-image > header{ grid-column:1; padding:0; }
  .article-layout--sticky-image .display-xl{ font-size:clamp(3rem,5vw,6rem); overflow-wrap:anywhere; }
  .article-layout--sticky-image > .entry-content{ grid-column:1; padding:var(--lg) 0 0; }
  .article-layout--sticky-image > .article-hero,.article-layout--sticky-image > .page-feature{ grid-column:2; grid-row:1 / span 2; position:sticky; top:calc(56px + var(--reg)); margin:0; padding:0; }
  .article-layout--sticky-image .article-hero img,.article-layout--sticky-image .page-feature img{ height:calc(100vh - 56px - (var(--reg) * 2)); max-height:none; object-fit:cover; }
  .admin-bar .article-layout--sticky-image > .article-hero,.admin-bar .article-layout--sticky-image > .page-feature{ top:calc(88px + var(--reg)); }
  .admin-bar .article-layout--sticky-image .article-hero img,.admin-bar .article-layout--sticky-image .page-feature img{ height:calc(100vh - 88px - (var(--reg) * 2)); }
  .article-layout--hero-sticky-image .article-layout-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(20rem,2fr); gap:var(--lg); align-items:start; }
  .article-layout--hero-sticky-image .article-secondary-image{ position:-webkit-sticky; position:sticky; align-self:start; top:calc(56px + var(--reg)); margin:0; }
  .article-layout--hero-sticky-image .article-secondary-image img{ height:calc(100vh - 56px - (var(--reg) * 2)); max-height:none; }
  .admin-bar .article-layout--hero-sticky-image .article-secondary-image{ top:calc(88px + var(--reg)); }
  .admin-bar .article-layout--hero-sticky-image .article-secondary-image img{ height:calc(100vh - 88px - (var(--reg) * 2)); }
  .article-layout--three-columns .entry-content > .wp-block-columns{ gap:var(--reg); align-items:flex-start; }
  .article-layout--three-columns .entry-content > .wp-block-columns > .wp-block-column{ margin-top:0; }
}
.nav-links{ display:flex; gap:var(--reg); justify-content:center; margin-top:var(--lg); font-family:'Space Mono',ui-monospace,monospace; font-size:11px; text-transform:uppercase; }
.current{ opacity:.45; }