/* --- Orvenzia FIXES (2025-10-10) --- */

/* Make primary/ghost/case buttons lighten on hover instead of darken */
.btn-primary:hover,
.btn-ghost:hover,
.case-button:hover,
.case-solid:hover,
.link-arrow:hover {
  filter: brightness(1.12);
  transition: filter .2s ease-in-out;
}

/* Ensure 'case solid' doesn't turn black on hover if any previous rules exist */
.btn-primary:hover { background: inherit !important; }

/* Keep PDF/action links aligned right when in card footers */
.card .btn-open-pdf,
.card .link-arrow { margin-left: auto; }

/* Ensure transparent black utility (50%) exists */
.transparent-50 { background: rgba(0,0,0,.5); }

/* Improve tap targets and mobile spacing */
button, .btn, .case-button { min-height: 44px; }

/* Prevent accidental invisible text on dark images */
.on-image, .on-image * { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.3); }

/* Smooth scroll to footer + offset for sticky header */
html { scroll-behavior: smooth; }
#footer { scroll-margin-top: 96px; }



/* === MOBILE HEADER: left logo + dropdown (2025-10-13) === */
@media (max-width: 768px){
  /* Ensure brand sits left */
  header { text-align: left !important; }
  header a.font-serif.text-xl.tracking-tightest,
  header .logo, header .brand, header .navbar-brand {
    display: inline-block !important;
    margin-left: 16px !important;
  }

  /* Hamburger toggle */
  .mobile-nav-toggle{
    position: absolute; right: 16px; top: 14px;
    width: 40px; height: 40px; border: 1px solid rgba(0,0,0,.12);
    border-radius: 10px; background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    z-index: 3;
  }
  .mobile-nav-toggle:focus{ outline: 2px solid rgba(0,0,0,.2); outline-offset: 2px; }
  .mobile-nav-toggle .burger, .mobile-nav-toggle .burger::before, .mobile-nav-toggle .burger::after{
    content:""; display:block; width: 20px; height: 2px; background:#000;
    position: relative;
  }
  .mobile-nav-toggle .burger::before{ position:absolute; top:-6px; }
  .mobile-nav-toggle .burger::after{ position:absolute; top:6px; }

  /* Dropdown menu */
  .mobile-menu{
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-top: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 10px 14px 12px; z-index: 2;
  }
  .mobile-menu .mm-item{
    display: block; padding: 12px 8px; border-radius: 10px;
    text-decoration: none; color: #000; font-size: 15px;
  }
  .mobile-menu .mm-item:active, .mobile-menu .mm-item:hover{
    background: rgba(0,0,0,.04);
  }
}

/* Keep desktop untouched */
@media (min-width: 769px){
  .mobile-nav-toggle{ display:none !important; }
  #mobile-menu{ display:none !important; }
}


/* === MOBILE CLEAN V30 (2025-10-14) === */
/* Unify mobile header, burger, menu and background across all pages. */
/* Desktop untouched (all rules <= 860px) */
@media (max-width: 860px){
  :root{ --paper: #FCFCFA; --ink: #0B0B0B; }

  /* Fixed header look & placement */
  header, .site-header{
    position: fixed !important; top: 0; left: 0; right: 0;
    z-index: 10000 !important;
    background: var(--paper) !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.04) !important;
    backdrop-filter: blur(8px);
  }
  body{ padding-top: 64px !important; }

  /* Brand left, hide desktop nav on mobile */
  header .site-brand{ margin-right: auto !important; }
  header nav, header .desktop-nav, header .menu, header .menu-list, header .nav-links, header .header-links{
    display: none !important;
  }

  /* Burger (single source of truth) */
  .mobile-nav-toggle, .m-burger{
    position: fixed !important; right: 12px; top: 12px;
    width: 40px; height: 40px; border: 1px solid rgba(0,0,0,.12);
    border-radius: 12px; background: #fff;
    display: inline-flex !important; align-items: center; justify-content: center;
    box-shadow: 0 4px 18px rgba(0,0,0,.06);
    z-index: 10002 !important;
  }
  .mobile-nav-toggle .burger, .m-burger .bar{
    display: block; width: 20px; height: 2px; background: #000; position: relative;
  }
  .mobile-nav-toggle .burger::before, .mobile-nav-toggle .burger::after{
    content:""; position: absolute; left: 0; width: 20px; height: 2px; background: #000;
  }
  .mobile-nav-toggle .burger::before{ top: -6px; }
  .mobile-nav-toggle .burger::after{ top: 6px; }

  /* Background behaviour (global) */
  html, body{ background: transparent !important; overflow-x: hidden !important; }
  body::before{
    content:""; position: fixed !important; inset: 0 !important; display: block !important;
    background-image: url('/assets/esg-global-bg.jpg') !important;
    background-size: cover !important; background-position: center center !important;
    background-repeat: no-repeat !important; background-attachment: scroll !important;
    opacity: 1 !important; z-index: 0 !important; pointer-events: none !important;
  }
  body::after{ position: fixed !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; }
  body > *{ position: relative !important; z-index: 1 !important; }

  /* Default: make big white/paper panels transparent to reveal bg */
  section, .section, .container, .card, .hero-card, .paper,
  .bg-white, .bg-[#ffffff], .bg-[#FCFCFA], .bg-paper,
  #mobile-menu, #m-panel{
    background: transparent !important; box-shadow: none !important; backdrop-filter: none !important;
  }

  /* Preserve readability on ABOUT/PRIVACY/TERMS (bg-paper body) */
  body.bg-paper section,
  body.bg-paper .section,
  body.bg-paper .container,
  body.bg-paper .paper,
  body.bg-paper .bg-white,
  body.bg-paper .bg-[#ffffff],
  body.bg-paper .bg-[#FCFCFA]{
    background: var(--paper) !important;
  }

  /* Preserve CASE cards */
  body.cases .tcards .tcard,
  body.cases article,
  body.cases .card{
    background: #fff !important;
  }

  /* Mobile menu panel (single style for #mobile-menu and #m-panel) */
  #mobile-menu, #m-panel{
    position: fixed !important; right: 12px; top: 64px;
    width: min(88vw, 340px); max-height: calc(100vh - 84px); overflow: auto;
    display: none; flex-direction: column; gap: 6px;
    color: #fff; background: rgba(12,12,12,.92);
    border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 10px;
    box-shadow: 0 20px 40px rgba(0,0,0,.45); z-index: 10001 !important;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  #mobile-menu.is-open, #m-panel.open{ display: flex !important; }
  #mobile-menu a, #m-panel a{
    color: #fff !important; text-decoration: none; padding: 10px 12px; border-radius: 10px; display: block;
  }
  #mobile-menu a:hover, #m-panel a:hover{ background: rgba(255,255,255,.06); }
  #mobile-menu a.cta, #m-panel a.cta{ font-weight: 700; border: 1px solid rgba(255,255,255,.2); text-align: center; }

  /* Avoid header CTA duplication on mobile */
  header a[href*="screening"]{ display: none !important; }
}

/* Guarantee zero desktop impact */
@media (min-width: 861px){
  .mobile-nav-toggle, .m-burger, #mobile-menu, #m-panel{ display: none !important; }
}


/* === MOBILE CONSISTENT & PERF V30 (2025-10-15) === */
:root { --paper:#FCFCFA; --ink:#0B0B0B; }
@media (max-width: 860px){
  header, .site-header{
    position: fixed !important; top:0; left:0; right:0;
    z-index: 10000 !important;
    background: rgba(252,252,250,0.96) !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.04) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    will-change: transform; transform: translateZ(0);
  }
  body{ padding-top:64px !important; touch-action: manipulation; }
  header .site-brand{ margin-right:auto !important; }
  header nav, header .desktop-nav, header .menu, header .menu-list, header .nav-links, header .header-links{ display: none !important; }
  .mobile-nav-toggle, .m-burger{
    position: fixed !important; right:12px; top:12px;
    width:40px; height:40px; border:1px solid rgba(0,0,0,.12);
    border-radius:12px; background:#fff; display:inline-flex !important; align-items:center; justify-content:center;
    box-shadow:0 4px 18px rgba(0,0,0,.06); z-index:10002 !important;
  }
  .mobile-nav-toggle .burger, .m-burger .bar{ display:block; width:20px; height:2px; background:#000; position:relative; }
  .mobile-nav-toggle .burger::before, .mobile-nav-toggle .burger::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:#000; }
  .mobile-nav-toggle .burger::before{ top:-6px; } .mobile-nav-toggle .burger::after{ top: 6px; }
  html, body{ background:transparent !important; overflow-x:hidden !important; }
  body::before{
    content:""; position:fixed !important; inset:0 !important; display:block !important;
    background-image: url('/assets/esg-global-bg.jpg') !important;
    background-size:cover !important; background-position:center center !important;
    background-repeat:no-repeat !important; opacity:1 !important;
    z-index:0 !important; pointer-events:none !important; will-change: transform; transform: translateZ(0);
  }
  body::after{ position:fixed !important; inset:0 !important; z-index:0 !important; pointer-events:none !important; }
  body > *{ position:relative !important; z-index:1 !important; }
  section, .section, .container, .card, .hero-card, .paper, .bg-white, .bg-[#ffffff], .bg-[#FCFCFA], .bg-paper, #mobile-menu, #m-panel{
    background:transparent !important; box-shadow:none !important; backdrop-filter:none !important; filter:none !important;
  }
  body.bg-paper section, body.bg-paper .section, body.bg-paper .container, body.bg-paper .paper, body.bg-paper .bg-white, body.bg-paper .bg-[#ffffff], body.bg-paper .bg-[#FCFCFA]{ background: var(--paper) !important; }
  body.cases .tcards .tcard, body.cases article, body.cases .card{ background:#fff !important; }
  #mobile-menu, #m-panel{
    position:fixed !important; right:12px; top:64px; width:min(88vw,340px); max-height:calc(100vh - 84px); overflow:auto;
    display:none; flex-direction:column; gap:6px; color:#fff; background:rgba(12,12,12,.92);
    border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:10px; box-shadow:0 20px 40px rgba(0,0,0,.45); z-index:10001 !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  #mobile-menu.is-open, #m-panel.open{ display:flex !important; }
  #mobile-menu a, #m-panel a{ color:#fff !important; text-decoration:none; padding:10px 12px; border-radius:10px; display:block; }
  #mobile-menu a:hover, #m-panel a:hover{ background:rgba(255,255,255,.06); }
  #mobile-menu a.cta, #m-panel a.cta{ font-weight:700; border:1px solid rgba(255,255,255,.2); text-align:center; }
  header a[href*="screening"]{ display:none !important; }
}
@media (min-width: 861px){ .mobile-nav-toggle, .m-burger, #mobile-menu, #m-panel{ display:none !important; } }
@media (max-width: 860px){ header, .site-header{ will-change: transform; transform: translateZ(0); } body::before{ will-change: transform; transform: translateZ(0); } }


@media (max-width: 860px){
  body::before{
    background-image: image-set(
      url('/assets/esg-global-bg-mobile-1280.jpg') 1x,
      url('/assets/esg-global-bg-mobile-1920.jpg') 2x,
      url('/assets/esg-global-bg.jpg') 3x
    ) !important;
  }
}