/* ============================================================================
   um-info-reset.css — opt-out layer for the mockup-faithful info pages
   ----------------------------------------------------------------------------
   Loaded by: /id/kerjasama, /id/business, /id/tentang,
              /en/partnership, /en/business, /en/about

   WHY THIS FILE EXISTS
   The three info pages are ported verbatim from standalone HTML design mockups,
   each with its own complete design system. The portal's global stylesheet
   (resources/views/components/homepage/styles.blade.php) decorates every public
   page with liquid-glass treatments that would corrupt those designs.

   This file cancels exactly those decorations, and ONLY inside the page body.
   Every selector is scoped to .um-info-main / .um-info-page, so the shared
   header and footer keep their normal portal styling untouched.

   SPECIFICITY NOTE
   Tailwind Play CDN injects its compiled utilities at runtime, so it is always
   the LAST author stylesheet. But every Tailwind utility is a single class
   (0,1,0), so any rule written with two classes beats it regardless of source
   order. That is why the mockup CSS is namespaced rather than !important-ed.
   !important appears below only where it answers an !important from the portal.

   NOTE: this is a plain .css file, so it cannot contain Blade. Any url() must
   be root-relative (e.g. /images/info/...).
   ========================================================================== */


/* [1] Kill the golden-leaves decorative overlay.
       Portal rule: `main::after { background-image: url(golden-leaves-bg.jpg);
       opacity: .15 }` (styles.blade.php:639-652), plus an `opacity:.25` dark
       variant at :655. Our selector (0,1,2) already outranks `main::after`
       (0,0,2); !important is belt-and-braces so a future change to the global
       cannot resurrect the leaves on top of a mockup design. */
main.um-info-main::after {
    content: none !important;
    display: none !important;
    background-image: none !important;
}


/* [2] Undo the forced stacking context on every direct child of <main>.
       Portal rule: `main > * { position: relative; z-index: 2 }`
       (styles.blade.php:659-662). It exists to lift content above the leaf
       overlay — which [1] just removed, so it has no purpose here.
       It actively breaks the mockups: the Business hexagon's drop-shadow
       filter and its dark feature bar both rely on their own stacking. */
main.um-info-main > * {
    position: static;
    z-index: auto;
}


/* [3] Offset the fixed portal header (.site-header, 4.5rem tall,
       z-index: 9999 !important at styles.blade.php:458).
       Used INSTEAD of the <div class="header-spacer"> idiom, because the
       mockups already carry their own top padding and a spacer div would
       double the gap. */
main.um-info-main {
    position: relative;
    padding-top: 4.5rem;
}


/* [4] Release form controls from the portal's dark-mode override.
       Portal rule: `html.dark input, html.dark select, html.dark textarea
       { background: rgba(255,255,255,.05) !important; color: ... !important;
       border-color: ... !important }` (styles.blade.php:802-808).
       Because that rule is !important, specificity alone cannot beat it — the
       answer must also be !important. `revert` rolls each property back to the
       browser default so each page's own dark block can then style the field
       normally, instead of us guessing a value here. */
html.dark .um-info-main input,
html.dark .um-info-main select,
html.dark .um-info-main textarea {
    background: revert !important;
    color: revert !important;
    border-color: revert !important;
}


/* [5] Lift modals above the site header.
       .site-header is z-index: 9999 !important, and the header also renders
       components/ticket/floating-widget for signed-in users. The mockups ship
       their modals at z-index 1000-2000, so without this every contact and
       form modal opens BEHIND the navbar. */
.um-info-page .km-popup,
.um-info-page .bz-modal-overlay,
.um-info-page .tt-modal-overlay {
    z-index: 10000;
}


/* [6] LINT RULE — enforced by code review, not by CSS.
       Never use Tailwind teal utilities (bg-teal-*, text-teal-*, border-teal-*,
       hover:bg-teal-*, focus:ring-teal-*) inside these pages.
       styles.blade.php:317-335 remaps the whole teal scale to var(--accent)
       with !important, which would repaint mockup buttons UM-green in light
       mode and UM-maroon in dark, destroying the delivered palette.
       The mockups use their own prefixed class names, so those portal rules
       stay inert as long as no teal utility is introduced here. */