/* BYTEGHOST FINAL LOCK 2026-07-05
   Last loaded stylesheet. Keeps the home hero compact on phones/desktop,
   fixes the mobile brand and adds premium 3D polish without overflow. */
:root{
  --bgf-gold:#e7b85b;
  --bgf-gold-soft:#ffd98a;
  --bgf-cyan:#35d8ff;
  --bgf-panel:rgba(4,14,13,.82);
}
html,body{max-width:100%;overflow-x:hidden!important;}
.site-header{box-shadow:0 18px 55px rgba(0,0,0,.38), inset 0 -1px 0 rgba(231,184,91,.08)!important;}
.site-header .container{min-width:0!important;}
.site-header .brand{min-width:0!important;overflow:hidden!important;}
.site-header .brand-word{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
body[data-page="home"] .monster-hero,
body[data-page="home"] .hero2-card,
body[data-page="home"] .monster-hero-copy{
  max-width:100%!important;
  overflow:hidden!important;
  transform-style:preserve-3d!important;
  background:
    radial-gradient(circle at 18% 0%,rgba(255,217,138,.14),transparent 32%),
    radial-gradient(circle at 92% 10%,rgba(53,216,255,.10),transparent 30%),
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(4,14,13,.86) 54%,rgba(1,8,10,.94))!important;
  border:1px solid rgba(231,184,91,.20)!important;
  box-shadow:
    0 26px 80px rgba(0,0,0,.48),
    0 0 0 1px rgba(53,216,255,.055),
    inset 0 1px 0 rgba(255,255,255,.105),
    inset 0 -28px 60px rgba(0,0,0,.20)!important;
}
body[data-page="home"] .monster-hero-copy::before,
body[data-page="home"] .hero2-card::before{
  content:''!important;position:absolute!important;inset:0!important;pointer-events:none!important;
  background:linear-gradient(118deg,transparent 0 38%,rgba(255,255,255,.085) 45%,transparent 53%)!important;
  opacity:.34!important;mix-blend-mode:screen!important;
}
body[data-page="home"] .hero2-title,
body[data-page="home"] .monster-title{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:.42rem 0 .52rem!important;
  padding:0!important;
  font-family:var(--f-display),system-ui,sans-serif!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:-.018em!important;
  line-height:1.02!important;
  font-size:clamp(1.85rem,3.85vw,3.35rem)!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  text-wrap:balance!important;
  overflow:hidden!important;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.34))!important;
}
body[data-page="home"] .hero2-title,
body[data-page="home"] .monster-title{font-size:clamp(1.35rem,3.2vw,2.25rem)!important;}
body[data-page="home"] .hero2-title span,
body[data-page="home"] .monster-title span{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}
body[data-page="home"] .hero2-title .amber,
body[data-page="home"] .monster-title .amber{
  color:#ffae57!important;
  background:linear-gradient(92deg,#ffac54 0%,#ffd285 56%,#e79038 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:none!important;
}
body[data-page="home"] .hero2-sub,
body[data-page="home"] .monster-sub{max-width:68ch!important;}
body[data-page="home"] .hero2-motto{letter-spacing:-.01em!important;}
body[data-page="home"] .hero2-cta .hero2-cta-btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 14px 30px rgba(0,0,0,.24)!important;}
.admin-actions,.card-actions,.gallery-actions,.item-actions,.row-actions,[data-actions]{display:flex!important;flex-wrap:wrap!important;gap:.45rem!important;align-items:center!important;justify-content:flex-start!important;}
.admin-actions .btn,.card-actions .btn,.gallery-actions .btn,.item-actions .btn,.row-actions .btn,[data-actions] .btn{position:static!important;margin:0!important;min-width:0!important;}
input[type="file"]{max-width:100%!important;color:var(--cc-text)!important;}
.upload-hint,.file-hint,.max-upload-hint{display:none!important;}
.footer-social-row{display:flex!important;align-items:center!important;gap:.55rem!important;flex-wrap:wrap!important;}
.footer-dev-icon-only{font-size:0!important;width:42px!important;height:42px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:999px!important;overflow:hidden!important;}
.footer-dev-icon-only span{display:none!important;}
.footer-dev-icon-only svg{width:20px!important;height:20px!important;}
@media (min-width: 981px){
  body[data-page="home"] .monster-hero{gap:1rem!important;align-items:stretch!important;}
  body[data-page="home"] .monster-hero-copy{padding:1.15rem 1.25rem!important;border-radius:28px!important;}
  body[data-page="home"] .hero2-title,body[data-page="home"] .monster-title{font-size:clamp(1.85rem,2.5vw,2.6rem)!important;line-height:1.02!important;}
}
@media (max-width: 760px){
  :root{--header-h:74px!important;}
  .site-header{height:74px!important;min-height:74px!important;overflow:hidden!important;background:rgba(1,8,11,.94)!important;backdrop-filter:blur(20px) saturate(1.45)!important;-webkit-backdrop-filter:blur(20px) saturate(1.45)!important;}
  .site-header .container{height:74px!important;padding:.52rem .78rem!important;gap:.34rem!important;display:flex!important;align-items:center!important;justify-content:space-between!important;overflow:hidden!important;}
  .site-header .brand{flex:1 1 auto!important;max-width:45vw!important;gap:.36rem!important;}
  .site-header .brand-mark{width:34px!important;height:34px!important;flex:0 0 34px!important;object-fit:contain!important;background:#fff!important;border-radius:50%!important;padding:2px!important;}
  .site-header .brand-word{font-size:0!important;line-height:0!important;letter-spacing:0!important;max-width:100%!important;white-space:nowrap!important;text-overflow:clip!important;}
  .site-header .brand-word::before{content:'ALLEANZA.SAM'!important;display:block!important;font-family:var(--f-display),system-ui,sans-serif!important;font-weight:900!important;font-size:clamp(.56rem,2.7vw,.72rem)!important;line-height:1!important;letter-spacing:.02em!important;color:#ecf8ff!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important;text-shadow:0 0 12px rgba(53,216,255,.28)!important;}
  .site-header .brand-word small{display:none!important;}
  .nav-actions{flex:0 0 auto!important;margin-left:auto!important;gap:.28rem!important;}
  .search-toggle,.lang-select,.burger{width:42px!important;height:42px!important;min-width:42px!important;border-radius:14px!important;}
  .lang-select{font-size:.62rem!important;padding:0!important;display:inline-grid!important;place-items:center!important;}
  body[data-page="home"] .home-main,body[data-page="home"] main{padding-top:calc(var(--header-h,74px) + .65rem)!important;}
  body[data-page="home"] .monster-container{width:calc(100% - 22px)!important;margin:0 auto!important;}
  body[data-page="home"] .monster-hero,body[data-page="home"] .hero2-card,body[data-page="home"] .monster-hero-copy{border-radius:22px!important;padding:.88rem .82rem .92rem!important;max-width:100%!important;}
  body[data-page="home"] .hero2-mission,body[data-page="home"] .monster-badge{font-size:.54rem!important;letter-spacing:.12em!important;padding:.24rem .5rem!important;margin-bottom:.38rem!important;}
  body[data-page="home"] .hero2-accred{margin:.42rem 0 .44rem!important;gap:.26rem!important;}
  body[data-page="home"] .hero2-accred strong{font-size:.82rem!important;line-height:1.25!important;}
  body[data-page="home"] .hero2-accred span{font-size:.68rem!important;line-height:1.35!important;}
  body[data-page="home"] .hero2-accred span:last-child{font-size:.54rem!important;letter-spacing:.07em!important;line-height:1.45!important;}
  body[data-page="home"] .hero2-title,body[data-page="home"] .monster-title{font-size:clamp(.8rem,3.6vw,1.02rem)!important;line-height:1.12!important;letter-spacing:-.004em!important;margin:.3rem 0 .4rem!important;max-width:100%!important;overflow:hidden!important;}
  body[data-page="home"] .hero2-title span,body[data-page="home"] .monster-title span{white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;}
  body[data-page="home"] .hero2-sub,body[data-page="home"] .monster-sub{font-size:.74rem!important;line-height:1.42!important;margin:.35rem 0!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
  body[data-page="home"] .hero2-motto{font-size:.82rem!important;margin:.34rem 0 .58rem!important;}
  body[data-page="home"] .monster-cta{grid-template-columns:1fr!important;gap:.38rem!important;}
  body[data-page="home"] .monster-cta .hero2-cta-btn{min-height:34px!important;padding:.44rem .55rem!important;font-size:.64rem!important;border-radius:13px!important;}
  body[data-page="home"] .monster-cta .hero2-cta-btn:nth-child(n+4){display:none!important;}
  body[data-page="home"] .hero2-metrics,body[data-page="home"] .monster-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.38rem!important;margin-top:.42rem!important;padding-top:.48rem!important;}
  body[data-page="home"] .hero2-metric{padding:.42rem!important;border-radius:14px!important;}
  body[data-page="home"] .hero2-metric-val{font-size:.88rem!important;}
  body[data-page="home"] .hero2-metric-lbl{font-size:.45rem!important;line-height:1.1!important;}
  .bottom-nav{z-index:9000!important;}
}
@media (max-width: 390px){
  .site-header .brand{max-width:43vw!important;gap:.28rem!important;}
  .site-header .brand-mark{width:30px!important;height:30px!important;flex-basis:30px!important;}
  .site-header .brand-word::before{font-size:clamp(.50rem,2.52vw,.61rem)!important;}
  .search-toggle,.lang-select,.burger{width:39px!important;height:39px!important;min-width:39px!important;}
  body[data-page="home"] .monster-container{width:calc(100% - 18px)!important;}
  body[data-page="home"] .hero2-title,body[data-page="home"] .monster-title{font-size:clamp(.76rem,3.55vw,.96rem)!important;line-height:1.14!important;}
  body[data-page="home"] .hero2-accred strong{font-size:.78rem!important;}
  body[data-page="home"] .hero2-accred span{font-size:.64rem!important;}
}

/* BYTEGHOST PREMIUM POLISH 2026-07-05 (final review)
   Subtle, non-layout-affecting refinements only: smoother premium transitions,
   gentle depth on hover, refined hero title glow. No geometry changes -> cannot
   introduce overflow. */
:root{ --bgf-ease:cubic-bezier(.22,.61,.36,1); }
body[data-page="home"] .hero2-title .amber,
body[data-page="home"] .monster-title .amber{
  filter:drop-shadow(0 2px 10px rgba(255,174,87,.20))!important;
}
/* Premium micro-interactions on interactive surfaces (transition/shadow only) */
.hero2-cta-btn,.btn,.pcard,.cc-panel,.hero2-metric,.mini-resource-card,.news-mini-card,.res-card,.partner-chip{
  transition:transform .28s var(--bgf-ease),box-shadow .28s var(--bgf-ease),border-color .28s var(--bgf-ease),background-color .28s var(--bgf-ease)!important;
  will-change:transform;
}
.hero2-cta-btn:hover,.pcard:hover,.cc-panel:hover{
  box-shadow:0 22px 60px rgba(0,0,0,.42),0 0 30px rgba(53,216,255,.08),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.hero2-metric:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(231,184,91,.34)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.34),0 0 22px rgba(231,184,91,.10)!important;
}
/* Refined focus ring for accessibility + premium feel */
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(53,216,255,.55)!important;outline-offset:2px!important;border-radius:10px;
}
@media (prefers-reduced-motion: reduce){
  .hero2-cta-btn,.btn,.pcard,.cc-panel,.hero2-metric,.mini-resource-card,.news-mini-card,.res-card,.partner-chip{transition:none!important;}
}

/* ============================================================================
   BYTEGHOST FINAL AUTHORITATIVE PASS — 2026-07-08
   Loaded last on every page. Single source of truth for: mobile language
   selector, mobile header brand fit, and the home hero title. Selectors are
   scoped + !important so they win the cascade over earlier layered fixes.
   ============================================================================ */

/* --- 1. LANGUAGE SELECTOR (all viewports) -------------------------------- */
/* The dropdown is now "portaled" to <body> by main.js while open, with fixed
   positioning computed from the trigger button. That makes it immune to
   header overflow clipping, backdrop-filter containing blocks, sidebar
   transforms and every stacking-context bug. CSS here only guarantees the
   header never clips the closed-state anchor and the portaled menu paints
   above everything. */
.site-header{ overflow:visible !important; }
.site-header .container{ overflow:visible !important; }
.site-header .brand,
.site-header .brand-word{ overflow:hidden !important; }
.lang-switch{ position:relative !important; z-index:100000 !important; }
.lang-menu{ z-index:100001; max-width:min(240px, calc(100vw - 24px)); }
.lang-menu[data-portaled]{
  z-index:2147483000 !important;
  opacity:1 !important; visibility:visible !important; transform:none !important;
  pointer-events:auto !important;
  background:rgba(6,14,20,.97);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(231,184,91,.28);
  border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(53,216,255,.06);
  padding:.35rem;
}
.lang-menu[data-portaled] button{
  display:block; width:100%; text-align:left;
  padding:.68rem .85rem; border-radius:10px;
  font-size:.9rem; color:var(--cc-text,#eafff5);
  min-height:44px;
}
.lang-menu[data-portaled] button:hover,
.lang-menu[data-portaled] button:focus-visible{ background:rgba(231,184,91,.14); color:#ffd98a; }
/* keep the menu clickable and never underneath sibling content */
.lang-switch.open .lang-menu{ pointer-events:auto !important; }

@media (max-width:760px){
  /* header still must not clip the dropdown on mobile */
  .site-header,
  .site-header .container{ overflow:visible !important; }
}

/* --- 2. MOBILE HEADER BRAND: exactly "ALLEANZA-SAM", fit, never wrap ------ */
@media (max-width:760px){
  .site-header .brand{ max-width:calc(100vw - 150px) !important; min-width:0 !important; overflow:hidden !important; }
  /* Hide any text node / JS-inserted short span so the ::before label is the
     single rendered brand string (prevents duplicated "ALLEANZA-SAM"). */
  .site-header .brand-word{ font-size:0 !important; line-height:0 !important; white-space:nowrap !important; overflow:hidden !important; }
  .site-header .brand-word > *{ font-size:0 !important; }
  .site-header .brand-word small{ display:none !important; }
  .site-header .brand-word::before{
    content:'ALLEANZA.SAM' !important; display:block !important;
    font-family:var(--f-display), system-ui, sans-serif !important; font-weight:900 !important;
    font-size:clamp(.68rem, 3.4vw, .9rem) !important; line-height:1 !important; letter-spacing:.01em !important;
    color:#ecf8ff !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:clip !important;
    text-shadow:0 0 12px rgba(53,216,255,.28) !important;
  }
}

/* --- 3. HOME HERO TITLE: premium, compact, balanced, responsive ---------- */
/* Proper-case (not forced uppercase), smaller than before, centered on
   narrow screens, never overflowing, wins over all earlier size rules. */
body[data-page="home"] .hero2-title,
body[data-page="home"] .monster-title{
  font-size:clamp(1.4rem, 2.6vw + .6rem, 2.6rem) !important;
  line-height:1.06 !important;
  letter-spacing:-.02em !important;
  text-transform:none !important;
  text-wrap:balance !important;
  margin:.5rem 0 .7rem !important;
  max-width:22ch !important;
  overflow:visible !important;
  word-break:normal !important; overflow-wrap:break-word !important;
}
body[data-page="home"] .hero2-title span,
body[data-page="home"] .monster-title span{ text-transform:none !important; }

@media (max-width:980px){
  body[data-page="home"] .hero2-title,
  body[data-page="home"] .monster-title{
    text-align:center !important; margin-left:auto !important; margin-right:auto !important;
    font-size:clamp(1.3rem, 4.6vw, 1.9rem) !important;
    line-height:1.12 !important;
  }
}
@media (max-width:520px){
  body[data-page="home"] .hero2-title,
  body[data-page="home"] .monster-title{
    font-size:clamp(1rem, 4.9vw, 1.32rem) !important;
    line-height:1.18 !important;
    max-width:100% !important;
    text-align:center !important;
  }
}
@media (max-width:390px){
  body[data-page="home"] .hero2-title,
  body[data-page="home"] .monster-title{
    font-size:clamp(.94rem, 4.7vw, 1.16rem) !important;
  }
}

/* --- 2b. DESKTOP BRAND: full name, wrapped on two lines, never clipped ---- */
@media (min-width:761px){
  .site-header .brand{ flex:0 1 auto !important; max-width:clamp(280px, 30vw, 460px) !important; }
  .site-header .brand-word{
    white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
    font-size:.8rem !important; line-height:1.14 !important; letter-spacing:.03em !important;
  }
  .site-header .brand-word small,
  .site-header .brand-word .mobile-brand-short{ display:none !important; }
}

/* --- 3a. MOBILE MENU above the header ------------------------------------- */
/* The header is z-index 2500 (premium-monster) but the slide-in menu was only
   1200, so the menu's close button and first rows sat UNDER the transparent
   header strip and could not be tapped. */
body .mobile-menu{ z-index:99990 !important; }

/* --- 3b. Breadcrumbs never dominate small screens ------------------------- */
@media (max-width:760px){
  .crumbs{display:block !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;max-width:100% !important;}
  .crumbs > *{display:inline !important;}
}

/* --- 4. FOOTER: single Legal Office block -------------------------------- */
.footer-legal-office{ display:flex !important; flex-direction:column !important; gap:.15rem !important; list-style:none !important; }
.footer-legal-office strong{ color:var(--cc-text,#eafff5) !important; font-weight:700 !important; }
.footer-legal-office span{ color:var(--cc-text-2,#9fb7ad) !important; line-height:1.5 !important; font-size:.9rem !important; }

/* ============================================================================
   PREMIUM POLISH PASS — production client release (2026-07-14)
   Non-layout-affecting refinements only: smoother interactions, consistent
   depth, refined focus and press feedback. Guarded by prefers-reduced-motion.
   ============================================================================ */
html{ scroll-behavior:smooth; }
::selection{ background:rgba(231,184,91,.32); color:#fff; }

/* gentle page-enter transition (opacity only — transforms would create
   containing blocks for fixed/sticky children while animating) */
@media (prefers-reduced-motion: no-preference){
  body > main, body > .exp-shell{
    animation:bgf-page-in .45s ease-out both;
  }
  @keyframes bgf-page-in{ from{opacity:0} to{opacity:1} }
}

/* consistent press feedback on every button-like control */
.btn:active,.hero2-cta-btn:active,.map-layer-btn:active,.lang-btn:active,.burger:active{
  transform:translateY(1px) scale(.985) !important;
  transition-duration:.08s !important;
}

/* unified premium hover depth for all primary card surfaces */
.pcard:hover,.news-card:hover,.doc-card:hover,.res-card:hover,.bear-card:hover,
.home-hub-card:hover,.involve-card:hover,.contact-info-card:hover,.mini-resource-card:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(231,184,91,.4) !important;
  box-shadow:0 26px 70px rgba(0,0,0,.45), 0 0 34px rgba(231,184,91,.10), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* home hub cards: layered glass with a soft gold sheen */
.home-hub-card{
  position:relative; overflow:hidden;
  transition:transform .3s var(--bgf-ease,cubic-bezier(.22,.61,.36,1)), box-shadow .3s, border-color .3s;
}
.home-hub-card::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.07) 46%,transparent 60%);
  transition:opacity .35s;
}
.home-hub-card:hover::after{ opacity:1; }
.home-hub-card:hover .home-hub-arrow{ transform:translateX(4px); }
.home-hub-arrow{ transition:transform .28s var(--bgf-ease,ease); display:inline-block; }

/* gallery / media zoom-in consistency */
.news-card-img img,.pcard-media img,.project-gallery-thumb img{ will-change:transform; }

/* smoother skeleton shimmer */
.skeleton{ position:relative; overflow:hidden; }
.skeleton::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%);
  animation:bgf-shimmer 1.4s infinite;
}
@keyframes bgf-shimmer{ from{transform:translateX(-100%)} to{transform:translateX(100%)} }

/* toast polish */
.toast{ box-shadow:0 18px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(231,184,91,.14) !important; backdrop-filter:blur(14px); }

/* cinematic hero: living gradient on the highlighted title line + slow
   environmental drift on the backdrop (desktop pointer devices only) */
body[data-page="home"] .hero2-title .amber,
body[data-page="home"] .monster-title .amber{
  background-size:220% 100% !important;
  animation:bgf-amber-live 9s ease-in-out infinite alternate;
}
@keyframes bgf-amber-live{ from{background-position:0% 50%} to{background-position:100% 50%} }
@media (hover:hover) and (min-width:981px){
  .env-backdrop{
    transition:transform .6s cubic-bezier(.22,.61,.36,1);
    animation:bgf-env-drift 46s ease-in-out infinite alternate;
    will-change:transform;
  }
  @keyframes bgf-env-drift{ from{transform:scale(1.04) translate(0,0)} to{transform:scale(1.09) translate(-14px,-10px)} }
  body[data-page="home"] .monster-hero-copy,
  body[data-page="home"] .hero2-right .cc-panel{
    transition:transform .45s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
  }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .skeleton::after{ animation:none; }
  .btn:active,.hero2-cta-btn:active,.map-layer-btn:active{ transform:none !important; }
  body[data-page="home"] .hero2-title .amber,
  body[data-page="home"] .monster-title .amber{ animation:none; }
  .env-backdrop{ animation:none !important; }
}