/* PASAM 2026 - responsive, mobile navigation and performance fixes */
:root{--pasam-header-h:88px}
html,body{max-width:100%;overflow-x:clip}
body.menu-open{overflow:hidden}
.site-header{z-index:10000}
.mobile-lang-switcher{display:none}
img{max-width:100%}

/* Prevent very long metric from dominating intermediate desktop sizes */
@media (min-width:901px) and (max-width:1280px){
  .metric-number strong{font-size:clamp(42px,4.4vw,58px)!important}
}

@media (max-width:900px){
  :root{--pasam-header-h:74px}
  .site-header{
    height:var(--pasam-header-h)!important;
    min-height:var(--pasam-header-h)!important;
    padding:0 16px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    background:#123314fa!important;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }
  .brand{width:118px!important;min-width:0!important;position:relative;z-index:10002}
  .brand img{width:100%!important;height:auto!important;max-height:42px!important;display:block}
  .language-switcher{display:none!important}
  .menu-toggle{
    display:grid!important;
    width:46px!important;height:46px!important;
    border:1px solid rgba(255,255,255,.25)!important;
    border-radius:0!important;
    background:transparent!important;
    padding:0 11px!important;
    gap:7px!important;
    align-content:center!important;
    justify-self:end!important;
    position:relative!important;
    z-index:10002!important;
  }
  .menu-toggle span{display:block!important;width:100%!important;height:1px!important;background:#fff!important;transform-origin:center;transition:transform .25s ease,opacity .2s ease}
  .menu-toggle.is-open span:first-child{transform:translateY(4px) rotate(45deg)!important}
  .menu-toggle.is-open span:last-child{transform:translateY(-4px) rotate(-45deg)!important}
  .main-nav{
    display:flex!important;
    position:fixed!important;
    z-index:10001!important;
    inset:var(--pasam-header-h) 0 0 0!important;
    height:calc(100dvh - var(--pasam-header-h))!important;
    width:100%!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    touch-action:pan-y;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    gap:0!important;
    padding:18px 18px 42px!important;
    background:#123314!important;
    opacity:1!important;
    visibility:hidden;
    pointer-events:none!important;
    transform:translateX(100%)!important;
    transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s!important;
  }
  .main-nav.is-open{visibility:visible;pointer-events:auto!important;transform:translateX(0)!important}
  .main-nav>a,.main-nav>.nav-dropdown{width:100%!important;border-bottom:1px solid rgba(255,255,255,.14)!important;margin:0!important}
  .main-nav>a{display:block!important;padding:17px 2px!important;font-size:21px!important;line-height:1.15!important}
  .nav-dropdown summary{display:flex!important;justify-content:space-between!important;align-items:center!important;width:100%!important;padding:17px 2px!important;font-size:21px!important;line-height:1.15!important;cursor:pointer!important;list-style:none!important}
  .nav-dropdown summary::-webkit-details-marker{display:none}
  .nav-dropdown summary span{font-size:22px;transition:transform .2s ease}
  .nav-dropdown[open] summary span{transform:rotate(45deg)}
  .nav-dropdown-panel{position:static!important;width:100%!important;transform:none!important;opacity:1!important;pointer-events:auto!important;background:rgba(255,255,255,.045)!important;box-shadow:none!important;border:0!important;padding:2px 14px 10px!important;margin:0!important}
  .nav-dropdown:not([open]) .nav-dropdown-panel{display:none!important}
  .nav-dropdown-panel a{display:block!important;padding:11px 0!important;border:0!important;font-size:16px!important;line-height:1.25!important;opacity:.92}
  .mobile-lang-switcher{display:flex!important;order:-2;gap:8px;margin:0 0 12px;padding:0 0 14px;border-bottom:1px solid rgba(255,255,255,.14)}
  .mobile-lang-switcher a,.mobile-lang-switcher span{display:grid!important;place-items:center;width:42px!important;height:38px!important;padding:0!important;border:1px solid rgba(255,255,255,.22)!important;font-size:12px!important;line-height:1!important;text-decoration:none;color:#fff}
  .mobile-lang-switcher .active{background:var(--yellow,#d9ff52)!important;color:#123314!important;border-color:var(--yellow,#d9ff52)!important;font-weight:800}

  /* Home: one clean vertical flow, no absolute overlap */
  .home-hero{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    padding:calc(var(--pasam-header-h) + 38px) 18px 0!important;
    gap:0!important;
    overflow:hidden!important;
  }
  .hero-copy{order:1!important;width:100%!important;max-width:none!important;padding:0 0 34px!important;position:relative!important;inset:auto!important}
  .hero-title{font-size:clamp(44px,13vw,68px)!important;line-height:.92!important;letter-spacing:-.04em!important;max-width:100%!important;margin:0!important}
  .hero-title>span{display:block!important;white-space:normal!important;width:auto!important;max-width:100%!important}
  .hero-lead{margin-top:24px!important;font-size:17px!important;line-height:1.45!important}
  .hero-copy .button{margin-top:24px!important;max-width:100%}
  .hero-visual{order:2!important;position:relative!important;inset:auto!important;width:calc(100% + 36px)!important;height:clamp(330px,98vw,470px)!important;margin:0 -18px!important;border:0!important;overflow:hidden!important}
  .hero-photo{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;transform:none!important}
  .hero-visual.js-parallax{transform:none!important}
  .hero-metrics{order:3!important;position:relative!important;inset:auto!important;width:calc(100% + 36px)!important;height:auto!important;margin:0 -18px!important;display:grid!important;grid-template-columns:1fr 1fr!important}
  .hero-metrics>div{min-width:0!important;min-height:118px!important;height:auto!important;padding:22px 18px!important}
  .metric-place,.sicily-mark{font-size:12px!important}
  .metric-number strong{font-size:clamp(38px,11vw,48px)!important;letter-spacing:-.07em!important;white-space:nowrap!important}
  .metric-number span{font-size:12px!important;margin-top:7px!important}
  .metric-copy{display:grid!important;grid-template-columns:72px minmax(0,1fr)!important;gap:7px 10px!important;align-content:center!important;font-size:12px!important}
  .metric-copy strong{min-width:0;overflow-wrap:anywhere}
  .hero-grid-line,.hero-side-note,.scroll-cue{display:none!important}

  /* Generic mobile page layout */
  .page-hero{padding-top:var(--pasam-header-h)!important;grid-template-columns:1fr!important;min-height:0!important}
  .page-hero-copy{min-height:0!important;padding:58px 18px!important}
  .page-title{font-size:clamp(46px,13vw,72px)!important;line-height:.94!important;overflow-wrap:anywhere}
  .page-hero-image{height:clamp(330px,92vw,470px)!important;min-height:0!important}
  .section-pad{padding:72px 18px!important}
  .story-section,.editorial-grid,.process-intro,.feature-split,.markets,.contact-layout,.bee-section,.product-details,.trace-band{grid-template-columns:1fr!important}
  .story-section{gap:34px!important}
  .photo-statement-copy{left:18px!important;width:calc(100% - 36px)!important}
  .footer,.footer-cta{padding-left:18px!important;padding-right:18px!important}
  .whatsapp{right:14px!important;bottom:14px!important}
}

@media (max-width:560px){
  .home-hero{padding-left:16px!important;padding-right:16px!important}
  .hero-title{font-size:clamp(42px,13.2vw,58px)!important}
  .hero-visual,.hero-metrics{width:calc(100% + 32px)!important;margin-left:-16px!important;margin-right:-16px!important}
  .hero-metrics{grid-template-columns:1fr 1fr!important}
  .hero-metrics>div{min-height:108px!important;padding:18px 15px!important}
  .metric-number strong{font-size:clamp(34px,10vw,44px)!important}
  .metric-copy{grid-template-columns:64px minmax(0,1fr)!important;font-size:11px!important}
  .bee-copy h2,.contact-info h2,.editorial-heading h2,.feature-copy h2,.footer-cta h2,.markets-copy h2,.process-title h2,.section-heading h2,.story-title h2{font-size:clamp(34px,10.5vw,44px)!important}
  .photo-statement-copy h2{font-size:clamp(42px,12vw,60px)!important}
  .product-card h3{font-size:clamp(34px,10vw,42px)!important}
  .scroll-lemon{width:135%!important;left:-17%!important}
}

/* Perceived performance on phones: do not block the first paint behind the desktop intro curtain. */
@media (max-width:900px){
  .intro-curtain{display:none!important}
}

/* Mobile menu link reliability: submenu links must always receive the tap. */
@media (max-width:900px){
  .main-nav .nav-dropdown-panel{position:relative!important;z-index:2!important}
  .main-nav .nav-dropdown-panel a,
  .main-nav>a,
  .main-nav .mobile-lang-switcher a{position:relative!important;z-index:3!important;pointer-events:auto!important;touch-action:manipulation!important;-webkit-tap-highlight-color:transparent}
}