/* EXO Consulting — deployment-safe scoped visual fixes | 20261014-exo-i18n-nav-r2.
   Keep existing design system and tax logic intact. New components are scoped. */

/* Real local photograph is the final fallback if an Unsplash request is unavailable.
   Per-route photographic layer stays unique whenever Unsplash is accessible. */
.page-view .exo-route-photo-hero.exo-route-photo-hero--dark {
  background-image:
    linear-gradient(90deg,rgba(6,19,43,.985),rgba(11,32,70,.94) 38%,rgba(18,54,104,.76) 68%,rgba(18,54,104,.49)),
    radial-gradient(circle at 79% 16%,rgba(203,162,56,.18),transparent 26%),
    var(--exo-route-photo),
    url('../hero-background.webp') !important;
  background-position:center,center,var(--exo-route-photo-position,center),center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
}
.page-view .exo-route-photo-hero.exo-route-photo-hero--light {
  background-image:
    linear-gradient(90deg,rgba(252,250,245,.99),rgba(255,253,249,.98) 38%,rgba(255,244,215,.85) 69%,rgba(245,225,182,.61)),
    radial-gradient(circle at 82% 18%,rgba(228,191,92,.28),transparent 28%),
    var(--exo-route-photo),
    url('../hero-background.webp') !important;
  background-position:center,center,var(--exo-route-photo-position,center),center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
}
/* Each new Tax Tool gets an individual architectural photo and a consistent ivory/gold overlay. */
#view-uji-tp-doc-page {--exo-tool-photo:url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1600&q=78')}
#view-kalkulator-ppn-page {--exo-tool-photo:url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=1600&q=78')}
#view-kalender-pajak-page {--exo-tool-photo:url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1600&q=78')}
.exo-lab .exo-lab-hero {
  background-image:
    linear-gradient(90deg,rgba(252,251,249,.99),rgba(250,248,241,.98) 31%,rgba(250,247,237,.93) 48%,rgba(250,244,225,.76) 67%,rgba(233,199,130,.52)),
    var(--exo-tool-photo),
    url('../hero-background.webp');
  background-size:cover;
  background-position:center,center 47%,center;
  background-repeat:no-repeat;
}
/* The Pusat Data pages remain navy and get distinct photo contexts + graceful local backup. */
.pd-detail[data-pd-page="peraturan"] {--exo-pd-photo:url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1600&q=78')}
.pd-detail[data-pd-page="tax-treaty"] {--exo-pd-photo:url('https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?auto=format&fit=crop&w=1600&q=78')}
.pd-detail[data-pd-page="putusan"] {--exo-pd-photo:url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1600&q=78')}
.pd-detail[data-pd-page="tarif-bunga"] {--exo-pd-photo:url('https://images.unsplash.com/photo-1523287562758-66c7fc58967f?auto=format&fit=crop&w=1600&q=78')}
.pd-detail .pd-detail-hero {
  background-image:
    linear-gradient(100deg,rgba(6,19,43,.97) 3%,rgba(10,35,69,.93) 54%,rgba(10,35,69,.67)),
    var(--exo-pd-photo),
    url('../hero-background.webp');
  background-position:center,center,center;
  background-size:cover;
  background-repeat:no-repeat;
}
.pd-detail .pd-detail-hero::before {opacity:.4}

/* Clean headline hierarchy and predictable dimensions on narrow devices. */
.exo-lab .exo-lab-hero-row > div {min-width:0}
.exo-lab .exo-lab-hero-mark,.exo-lab .exo-lab-eyebrow {display:none !important}
.exo-lab .exo-lab-hero h1,.pd-detail .pd-detail-hero h1 {overflow-wrap:break-word}
.exo-lab .exo-cal-layout > *,.exo-lab .exo-lab-columns > * {min-width:0}
.pd-detail .pd-results-area,.pd-detail .pd-detail-layout > * {min-width:0}

/* EXO Insight uses a single compositor animation rather than rebuild-on-hover. */
#exo-update-track.is-ready {will-change:transform;backface-visibility:hidden;animation-timing-function:linear}
#exo-update-track .exo-update-cycle {flex-shrink:0}

@media (max-width:767px) {
  .exo-lab .exo-lab-hero {background-position:center,66% center,center;padding:35px 0 43px;min-height:255px}
  .exo-lab .exo-lab-hero h1 {font-size:clamp(29px,8vw,42px);line-height:1.16}
  .exo-lab .exo-lab-crumb {flex-wrap:wrap;gap:7px}
  .pd-detail .pd-detail-hero {background-position:center,65% center,center}
  .pd-detail .pd-detail-hero h1 {font-size:clamp(29px,8vw,41px)}
  #exo-update-track {will-change:transform}
}
@media (prefers-reduced-motion:reduce) {
  #exo-update-track.is-ready {animation:none !important;transform:none !important}
}
@media (prefers-reduced-data:reduce) {
  .exo-lab .exo-lab-hero,.pd-detail .pd-detail-hero {
    background-image:linear-gradient(110deg,#f9f7f2,#f7e9cd);
  }
  .pd-detail .pd-detail-hero {background-image:linear-gradient(110deg,#081936,#204c7c)}
}

/* EXO r2 | Navbar: one consistent baseline, About = Profile + Services + Team + Internship. */
@media (min-width:1280px){
  #exo-main-header-container{max-width:1480px!important}
  #exo-main-header-row{min-width:0;gap:clamp(9px,1.1vw,18px)!important}
  #exo-main-nav{display:flex!important;align-items:center!important;justify-content:center!important;gap:clamp(10px,1.15vw,18px)!important;margin-inline:clamp(8px,1.5vw,20px)!important;min-width:0}
  #exo-main-nav > a,#exo-main-nav > div{align-self:center}
  #exo-main-nav > div{padding-top:0!important;padding-bottom:0!important}
  #exo-main-nav > a,#exo-main-nav > div > a,#exo-main-nav > div > button{font-size:clamp(11px,.94vw,13px)!important;line-height:1.25!important;white-space:nowrap;min-height:30px;display:inline-flex;align-items:center}
  #dropdown-about-wrap{gap:3px!important}
  #nav-about-toggle{width:22px;height:27px;color:#7b879a}
  #menu-about-dropdown.exo-about-menu-shell{left:50%;transform:translateX(-50%);width:min(590px,calc(100vw - 48px));z-index:80}
  #menu-about-dropdown .exo-about-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;border-radius:19px}
  #menu-about-dropdown .exo-about-menu-item{padding:14px;min-height:83px}
  #menu-about-dropdown .exo-about-menu-item b{font-size:12px}
  #menu-about-dropdown .exo-about-menu-item small{font-size:10px}
  #menu-about-dropdown #nav-about-services{background:#fffbf2;border-color:#f3e7c9}
  #exo-main-header-actions{gap:clamp(6px,.8vw,12px)!important;flex-shrink:0}
}
@media (min-width:1280px) and (max-width:1399px){
  #exo-main-header-container{padding-inline:15px!important}
  #exo-main-nav{gap:10px!important;margin-inline:8px!important}
  #exo-main-header-actions [data-exo-lang-trigger]{min-width:114px!important;padding-inline:8px!important}
  #exo-account-header-btn{padding-inline:9px!important}
  #exo-main-header-actions > a{padding-inline:11px!important}
}
@media (max-width:1279px){
  #mobile-nav{max-height:calc(100dvh - 78px);overflow-y:auto;overscroll-behavior:contain}
  #mobile-nav .grid > a{min-width:0;overflow-wrap:break-word}
  /* Mobile menu links should stay visible immediately, not wait for scroll-reveal animations. */
  #mobile-nav .exo-global-pop{opacity:1!important;transform:none!important;transition:none!important}
}
/* Owner request: disable top-of-viewport route progress strip. */
#exo-route-loading-indicator,.exo-route-loading-indicator{display:none!important}
@media (min-width:1280px){
  #exo-main-header-actions{display:flex!important;align-items:center!important}
  #exo-mobile-controls{display:none!important}
}
@media (max-width:1279px){
  #exo-main-header-actions{display:none!important}
  #exo-mobile-controls{display:flex!important}
}

/* EXO R8 | Invoice Detail: viewport-safe portal dialog, with independent scroll.
   The underlying SPA page has contain:paint and animations that break fixed descendants.
   The JS mounts the dialog directly beneath body while it is visible. */
#billing-invoice-detail-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10100 !important;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overscroll-behavior: contain;
}
#billing-invoice-detail-modal .exo-billing-detail-panel {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  flex: 0 1 672px;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 672px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: hidden !important;
  overscroll-behavior: contain;
}
#billing-invoice-detail-modal .exo-billing-detail-header {
  flex: 0 0 auto;
  min-width: 0;
  background: #fff;
}
#billing-invoice-detail-modal #billing-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
#billing-invoice-detail-modal #billing-detail-body * {
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  #billing-invoice-detail-modal { padding: 10px; }
  #billing-invoice-detail-modal .exo-billing-detail-panel {
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 18px;
  }
  #billing-invoice-detail-modal .exo-billing-detail-header { padding: 16px; }
  #billing-invoice-detail-modal #billing-detail-body { padding: 16px; }
}

/* R8: the bundled utility stylesheet omits bg-emerald-700; keep the WhatsApp
   share action legible rather than white text on a transparent button. */
#billing-invoice-detail-modal #billing-detail-body button.bg-emerald-700 {
  background-color: #047857;
  color: #fff;
}
#billing-invoice-detail-modal #billing-detail-body button.bg-emerald-700:hover {
  background-color: #065f46;
}