/* SMCON26 theme fixes, loaded after the site styles. */

/* 1. No scroll pinning: "The programme" and "Built for" play in place instead of holding the page. */
@media (min-width:1024px){
  .roll{height:auto}
  .roll-stage{position:relative;top:auto;height:min(76vh,700px);min-height:520px}
  .built{height:auto}
  .built-stage{position:relative;height:auto;min-height:min(86vh,780px);padding-block:96px}
}

/* 2. French: hide the content for a moment while the dictionary loads (never longer than 2.5 s). */
html.i18n-wait main, html.i18n-wait .ftr{visibility:hidden}

/* 3. Nothing wider than the screen. Grid and flex items may shrink below their longest word or link row
   (the page heroes, stats, prize bands, contest facts and cards spilled off phone screens). */
:is(.phero-grid,.grid,.stats,.prize-band,.faq-grid,.c-facts,.cta-band,.mount,.news-card,.ftr-big,.hero-grid,.split,.tiers,.pk-grid,.ex-grid,.aud,.pillars,.steps)>*{min-width:0}
:is(h1,h2,h3,.h1,.h2,.lead,p,dd,dt,li,summary,figcaption){overflow-wrap:break-word}
.jump,.c-switch,.crumbs{max-width:100%}
.badge{max-width:100%;white-space:normal}
.faq-list summary{min-width:0}
.faq-list summary>*:not(i){min-width:0}
@media (max-width:1023px){
  .phero-grid>div{max-width:100%}
  .cta-band .row{justify-content:flex-start}
}
@media (max-width:640px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:24px 16px}
  .stat b{font-size:clamp(1.9rem,10.5vw,3rem)}
  .stat span{letter-spacing:.14em}
  .prize-band{grid-template-columns:repeat(3,minmax(0,1fr))}
  .prize-band b{font-size:clamp(.9rem,4.4vw,1.4rem);letter-spacing:-.02em}
  .prize-band>div{padding:16px 12px}
  .cta-band .row{flex-direction:column;align-items:stretch}
  .cta-band .row .btn{width:100%;justify-content:center;white-space:normal;text-align:center}
  .faq-list summary{gap:12px;padding-inline-end:8px}
  .logo-grid>*{min-width:0}
  .logo-grid .lt{white-space:normal;text-align:center;font-size:clamp(.85rem,4vw,1.05rem)}
  .modes .seg{flex-wrap:wrap}
  .h1,h1.h1{font-size:clamp(2.2rem,11vw,3.4rem)}
  .h2,h2.h2{font-size:clamp(1.8rem,8.4vw,2.6rem)}
  .btn{white-space:normal;text-align:center}
}

/* 4. Header on laptops (1024–1320 px): everything fits on one line; nothing runs off the right edge. */
@media (min-width:1024px) and (max-width:1320px){
  .hdr-in{gap:12px}
  .hdr-tools{gap:8px;flex:none}
  .hdr-tools .btn-line,.hdr-tools .date-chip{display:none}
  .nav a.top{padding-left:8px;font-size:13.5px}
  .nav .chev{width:22px}
}
@media (min-width:1024px) and (max-width:1240px){
  .hdr-tools :is(.theme-btn,.cart-btn){display:none}
  .hdr-tools .hdr-cta{padding-inline:1.1em}
  .nav a.top{font-size:12.5px;padding-left:5px}
  .nav .chev{width:18px}
  .hdr-logo img{max-width:104px;height:auto}
  .hdr-tools .hdr-cta{font-size:10px;letter-spacing:.08em;padding-inline:1em}
  .hdr-tools .lang button{padding-inline:9px}
}

/* 5. Big figures fit their cards on every width. */
@media (min-width:641px){.stat b{font-size:clamp(2.4rem,5.2vw,5.6rem)}}

/* 6. Dark mode is dark everywhere: whole sections no longer switch back to white. Small accent cards
   (featured offer, volt speaker card, tickets, logo tiles) stay light on purpose. */
html[data-theme="dark"] :is(.bg-mint,.smback,#business,#gain,#plan,#theme,#news,#why,#how,#organiser,#formats,#contests,#passes,#meet,#community,#gallery){
  background:var(--paper-2)!important;
  --paper-2:#0C0E0D;--surface:#101312;--mint:#181C1A;--mint-2:#1E2320;--forest:#0B0D0C;--elephant:#A8E62B;
  --ink:#F3F5F2;--ink-2:rgba(243,245,242,.72);--ink-3:rgba(243,245,242,.5);--inv:#0B0D0C;
  --rule:rgba(255,255,255,.09);--rule-2:rgba(255,255,255,.17);--shadow-2:0 0 0 1px rgba(255,255,255,.16);
  color:var(--ink)}
html[data-theme="dark"] :is(.bg-mint,.smback,#business,#gain,#plan,#theme,#news,#why,#how,#organiser,#formats,#contests,#passes,#meet,#community,#gallery) .hl{color:var(--volt)}
html[data-theme="dark"] :is(.bg-mint,.smback,#business,#gain,#plan,#theme,#news,#why,#how,#organiser,#formats,#contests,#passes,#meet,#community,#gallery) .hl::after{opacity:0}
html[data-theme="dark"] :is(#theme) .theme-q .w{color:var(--ink)}
html[data-theme="dark"] .bg-mint [style*="background:#fff"]{background:var(--surface)!important}
html[data-theme="dark"] :is(.bg-mint,#business,#gain,#plan) .patch{opacity:.08}
/* forms inside former white sections */
html[data-theme="dark"] .bg-mint :is(.field input,.field select,.field textarea){background:var(--surface);color:var(--ink);border-color:var(--rule-2)}
/* header: solid on scroll in dark mode, so menu text never sits on busy content */
html[data-theme="dark"] .hdr:not(.over){background:rgba(5,6,5,.94);border-bottom-color:var(--rule)}
html[data-theme="dark"] :is(.roll-list li,.card,.contest,.news-card,.offer:not(.feat),.post,.mega-panel,.lt){background:var(--surface);color:var(--ink);border-color:var(--rule-2)}
html[data-theme="dark"] .roll-list li.more{background:var(--volt);color:#0B0D0C}
html[data-theme="dark"] .roll-list li.more :is(h3,p,span){color:#0B0D0C}
html[data-theme="dark"] .mnav{background:var(--paper)}

/* 7. Scroll reveal (see app.js): smooth, and always ends in place. */
html.rv-on .rv:not(.rv-in),html.rv-on .rv-s:not(.rv-in)>*{opacity:0;transform:translateY(56px)}
html.rv-on .rv:not(.rv-done),html.rv-on .rv-s:not(.rv-done)>*{transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:var(--rv-d,0ms)}
html.rv-on .rv-s.rv-in>*{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.rv-on .rv,html.rv-on .rv-s>*{opacity:1!important;transform:none!important;transition:none}}