/* =====================================================================
   kap-menu.css — the "Our Product" mega-menu and the product-page left rail.

   Loaded LAST from the $site_css array in top-section.php. It has to be last
   because the three stylesheets it overlaps with (App.css, inner.css,
   CommonServices.css) are minified single-line files with no source map and
   are off-limits for editing, so source order is the only way to win a
   specificity tie against them.

   Readable on purpose — not minified. Everything here is a positioning
   workaround for a documented constraint, and a minified version of that is
   unreviewable.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Desktop panel geometry.

   Scoped to min-width:992px so the mobile off-canvas drawer is untouched:
   below 992px App.css turns .nav-menu into a fixed drawer and .dropdown into
   a static display:none block, and that behaviour is correct as-is.
   --------------------------------------------------------------------- */
@media (min-width: 992px) {

    /* The panel is full-navbar-width, so it must resolve against the nav row
       rather than against its own <li>. .nav-container is the 1200px row.

       position:fixed would be the obvious alternative and is WRONG here:
       App.css gives .navbar backdrop-filter:blur(10px), which makes .navbar a
       containing block, so a fixed child resolves against the navbar and not
       against the viewport. */
    .nav-container {
        position: relative;
    }

    /* The panel anchors to its OWN <li>, like every other dropdown in this bar.
       It was briefly stretched across the whole 1200px nav row, which looked
       like a site-wide takeover: it covered the page behind it and buried the
       twelve items anyone actually wanted behind a wall of tiles. A compact
       panel under the trigger is both easier to scan and less startling. */
    .nav-item.has-megamenu {
        position: relative;
    }

    .kap-mega {
        left: auto;
        right: 0;
        /* Four columns of ~92px plus padding and the scrollbar gutter. Fixed
           rather than fluid: the tile is a fixed size, so a fluid panel would
           just add whitespace between columns at wide viewports. */
        width: 420px;
        min-width: 420px;
        /* Roughly seven rows before it scrolls, which keeps the panel well
           short of the fold on a 768px-tall laptop. */
        max-height: min(70vh, 560px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 14px 14px 0;
    }

    /* Make the button actually work on desktop.

       script.js toggles .active on the panel, but App.css only defines
       .dropdown.active{display:block} inside @media (max-width:991px) — so
       until now the button was inoperable by click and by keyboard on
       desktop, and the menu opened on hover only.

       Deliberately NOT a blanket `.dropdown.active` desktop rule: that would
       change the behaviour of five other menus in one release. */
    .kap-mega.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* .is-closed is set by kap-menu.js ONLY on a deliberate close (click the
       button again, Escape, focus leaves the menu) and removed on mouseleave.
       Without it, clicking to close does nothing visible while the pointer is
       still over the item, because App.css's :hover rule immediately reopens
       the panel. Because it is JS-set, the no-JS hover fallback is untouched. */
    .nav-item.has-megamenu.is-closed:hover .kap-mega {
        opacity: 0;
        visibility: hidden;
    }
}


/* ---------------------------------------------------------------------
   2. Group headings and the tile grid.
   --------------------------------------------------------------------- */
.kap-mega-sec {
    padding: 0 0 12px;
}

.kap-mega-h {
    margin: 0 0 10px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #8892a4;
}

.kap-mega-grid {
    display: grid;
    /* Four across, matching the reference. Six was only possible because the
       panel spanned the whole nav row. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kap-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #2c3e50;
    transition: background .2s ease, transform .2s ease;
}

.kap-tile:hover,
.kap-tile:focus-visible {
    background: #f4f6fb;
    transform: translateY(-2px);
    color: #1e90ff;
}

.kap-tile:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.kap-tile-disc {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 15px;
}

.kap-tile-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 600;
    text-align: center;
    /* The tile is ~92px wide now and the full product name lives in title= and
       aria-label=, so a long label clamps rather than stretching the column. */
    max-height: 2.6em;
}

/* Market chip. AU products get no chip at all — see kap_menu_market(). */
.kap-tile-chip {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    background: #eef1f7;
    color: #55607a;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.5;
}

/* A SEPARATE badge class, not the existing .new-tag from top-section.php.
   .new-tag carries animation:blinker, and a grid of up to 22 tiles could put
   several blinking badges on screen at once, which is a vestibular trigger.
   Static here. */
.kap-badge-new {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    background: #ff3b30;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    line-height: 1.6;
}


/* ---------------------------------------------------------------------
   3. Footer bar — always visible, never staff-gated.
   --------------------------------------------------------------------- */
.kap-mega-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    /* Bleeds to the panel edge, so this MUST track .kap-mega's padding. It was
       -16px against 14px of padding, which pushed the bar 4px past the panel
       and gave the whole menu a horizontal scrollbar. */
    margin: 0 -14px;
    padding: 11px 14px;
    border-top: 1px solid #edf0f5;
    background: #fafbfd;
    border-radius: 0 0 8px 8px;
}

.kap-mega-foot-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #2c3e50;
    font-size: 13.5px;
    font-weight: 700;
}

.kap-mega-foot-link i {
    color: #1b9e5a;
}

.kap-mega-foot-txt small {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: #7d8798;
}

.kap-mega-foot-all {
    text-decoration: none;
    color: #1e90ff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.kap-mega-foot-link:hover,
.kap-mega-foot-all:hover {
    text-decoration: underline;
}


/* ---------------------------------------------------------------------
   4. Mobile drawer. At <=991px .nav-menu is a fixed off-canvas panel and
      .dropdown is a static block, so the grid has to become a plain stacked
      list or the tiles end up 40px wide.

      Paddings match App.css's mobile .dropdown-link{padding:10px 30px} so the
      product rows line up with the About/Research/Sectors rows in the same
      drawer.
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
    .kap-mega {
        padding: 0;
    }

    .kap-mega-sec {
        padding: 0;
    }

    .kap-mega-h {
        padding: 10px 30px 4px;
    }

    .kap-mega-grid {
        display: block;
    }

    .kap-tile {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 10px 30px;
        border-radius: 0;
    }

    .kap-tile:hover,
    .kap-tile:focus-visible {
        transform: none;
    }

    .kap-tile-disc {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .kap-tile-label {
        -webkit-line-clamp: 2;
        text-align: left;
        font-size: 14px;
        max-height: none;
    }

    /* Absolute corners make no sense on a full-width row. */
    .kap-tile-chip,
    .kap-badge-new {
        position: static;
        margin-left: auto;
    }

    .kap-mega-foot {
        margin: 0;
        padding: 12px 30px;
        border-radius: 0;
    }
}


/* ---------------------------------------------------------------------
   5. Product page left rail.

   The wrapper carries BOTH .companies-code-sec (the shipped flex rail from
   inner.css: sidebar width, tab styling, and a complete <=768px horizontal
   scroller) and .kap-product-shell (the handful of things that rail needs in
   order to be sticky and to hold 22 items). inner.css is minified and must
   not be edited, so everything below is additive.

   The markup deliberately sits OUTSIDE every .container and outside
   #productReport, which dissolves two blockers at once:
     - .container{overflow:hidden} (App.css) kills position:sticky outright;
     - CommonServices.css forces #productReport.article-con to
       grid-template-columns:47fr 0fr!important, so a column added inside it
       collapses to zero width.
   --------------------------------------------------------------------- */
.kap-product-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 12px;
    /* LOAD-BEARING. The flex default is align-items:stretch, which makes the
       aside exactly as tall as the article column — at which point the sticky
       element has zero travel inside its own parent and silently never
       sticks. This one line is the difference between a working rail and a
       rail that "just doesn't work" with no error anywhere. */
    align-items: flex-start;
}

.kap-product-shell .companies-code-sidebar {
    position: sticky;
    top: 100px;
    flex: 0 0 220px;
    width: 220px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    border-radius: 12px;
}

.kap-product-main {
    /* min-width:0 or the long CKEditor paragraphs and the article grid push
       the flex item wider than its track and the rail gets squeezed off. */
    flex: 1;
    min-width: 0;
}

.kap-product-rail-h {
    margin: 0 0 6px;
    padding: 0 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #8892a4;
}

/* inner.css sizes .tab for three year buttons (18px/700, 15px 30px padding).
   This rail carries 22 products plus two footer links, so it needs to be
   denser or it is 900px tall before anything is selected. */
.kap-product-rail .tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    color: #556070;
}

.kap-product-rail .tab i {
    flex: 0 0 16px;
    font-size: 13px;
    text-align: center;
}

.kap-product-rail .tab-sep {
    margin: 8px 16px;
    border: 0;
    border-top: 1px solid #eceff4;
}

@media screen and (max-width: 768px) {
    /* Hand the rail back to inner.css's horizontal scroller. position:sticky
       has to be cleared explicitly: the rules above are more specific than
       inner.css's mobile block, so they would otherwise keep winning. */
    .kap-product-shell .companies-code-sidebar {
        position: static;
        flex: 0 0 auto;
        width: 100%;
        max-height: none;
        overflow-y: visible;
        overflow-x: auto;
        display: flex;
        border-radius: 0;
    }

    .kap-product-rail-h,
    .kap-product-rail .tab-sep {
        display: none;
    }

    .kap-product-rail .tab {
        white-space: nowrap;
        border-left: none;
        border-bottom: 4px solid transparent;
        padding: 10px 16px;
    }

    .kap-product-rail .tab.active {
        border-left: none;
        border-bottom: 4px solid #1e90ff;
    }
}


/* ---------------------------------------------------------------------
   6. /our-products cards.

   Hero artwork exists for nine of the twenty-two products. The other thirteen
   get the derived icon on a tinted panel of the same height, so the grid still
   reads as one set instead of as "nine real products and thirteen broken
   images".
   --------------------------------------------------------------------- */
.kap-card-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    /* CommonServices.css sets .serviceImg{height:200px} and then relaxes it to
       height:auto further down the file; an explicit min-height keeps the
       fallback the same size as a real hero either way. */
    min-height: 200px;
    font-size: 56px;
}

/* .kap-tile-chip is absolutely positioned for the menu tiles; on a card it
   sits inline after the product name. */
.kap-card-chip {
    position: static;
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
}


/* ---------------------------------------------------------------------
   7. Reduced motion. The tile lift and the panel slide are decoration.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .kap-mega,
    .kap-tile {
        transition: none;
    }

    .kap-tile:hover,
    .kap-tile:focus-visible {
        transform: none;
    }
}