/* accessibility css */
 *:focus,*:focus-visible,
 .sign_in_btn:focus {
     outline: 2px solid #fff !important;
     outline-offset: 2px !important;
     box-shadow: 0 0 0 4px #005fcc !important;
     border-radius: 4px !important;
 }

 body {
     overflow-x: hidden;
 }

 .cookie-block a {
     color: var(--brand);
 }

 /* Visually hidden content available to screen readers (sr-only / .visually-hidden) */
 .sr-only,
 .visually-hidden {
     position: absolute !important;
     width: 1px !important;
     height: 1px !important;
     padding: 0 !important;
     margin: -1px !important;
     overflow: hidden !important;
     clip: rect(0, 0, 0, 0) !important;
     white-space: nowrap !important;
     border: 0 !important;
 }

 .owl-dot.active {
     transform: scale(1.5) !important;
 }


 header:not(.site-main-header header) {
     /* top: 14px !important; */
     top: 28px !important;
 }

 .site-main-header {
     top: 28px !important;
 }

 /* Force menu visibility when active via keyboard or JS */
 .dropdown-visible {
     opacity: 1 !important;
     visibility: visible !important;
     display: block !important;
 }

 /* Accessibility Focus Ring */
 .nav-link:focus,
 .dropdown-outer a:focus {
     outline: 2px solid #0056b3 !important;
     outline-offset: 2px;
 }

 /* Container for the top accessibility tools */
 .a11y-toolbar {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 99999;
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: #333;
     color: white;
 }

 /* Skip link: Hidden visually but appears on Tab */
 .skip-main {
     /* position: absolute; */
     right: 0;
     top: 0;
     color: white;
     padding: 6px 5px;
     text-decoration: none;
 }

 .skip-main:focus {
     position: static;
     width: auto;
     height: auto;
 }

 /* Animation Buttons Styles */
 .motion-controls {
     display: flex;
     gap: 5px;
     padding: 5px 15px;
     margin-right: auto;
     /* Pushes icons to the right */
 }

 .dropdown-outer.is-active {
     opacity: 1 !important;
     visibility: visible !important;
     pointer-events: auto !important;
 }

 /* This overrides everything, including your hover styles */
 .dropdown-force-hide {
     opacity: 0 !important;
     visibility: hidden !important;
     pointer-events: none !important;
 }

 .motion-controls button {
     background: #444;
     border: 1px solid #666;
     color: white;
     padding: 0px 12px;
     cursor: pointer;
     border-radius: 4px;
     font-size: 12px;
     transition: 0.2s;
 }

 .motion-controls button:hover,
 .motion-controls button:focus {
     background: #555;
     outline: 2px solid #fff;
 }

 .motion-controls button.active {
     background: #2057a6;
     border-color: #fff;
 }

 .nav_brand>a {
     display: block;
 }

 /* acccessibility css end */

 :root {
     --brand: #004b87;
     --accent: #008575;
     --danger: #b22222;
 }

 .cookie-block {
     display: grid;




     /* BANNER */
     #cookie-banner {
         position: fixed;
         left: 12px;
         right: 12px;
         bottom: 12px;
         background: #fff;
         border: 1px solid rgba(0, 0, 0, 0.08);
         box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
         padding: 18px;
         z-index: 2147483647;
         border-radius: 8px;
         /* display: grid;*/
         grid-template-columns: 1fr auto;
         gap: 12px;
         align-items: center;
         min-width: 320px;
     }

     #cookie-banner h3 {
         margin: 0 0 6px 0;
         color: var(--brand);
         font-size: 16px;
     }

     #cookie-banner p {
         margin: 0;
         font-size: 14px;
         color: #111;
         line-height: 1.4;
     }

     .cookie-controls {
         display: flex;
         gap: 8px;
         flex-wrap: wrap;
         align-items: center;
         justify-content: flex-end;
     }

     .btn {
         padding: 10px 14px;
         border-radius: 6px;
         font-weight: 600;
         cursor: pointer;
         border: 0;
         font-size: 13px;
     }

     .btn-primary {
         background: var(--accent);
         color: #fff;
     }

     .btn-danger {
         background: var(--danger);
         color: #fff;
     }

     .btn-neutral {
         background: #f3f3f3;
         color: #111;
         border: 1px solid #e8e8e8;
     }

     /* PREFERENCES PANEL */
     #pref-panel {
         grid-column: 1 / -1;
         background: #fbfbfb;
         border-radius: 6px;
         padding: 12px;
         border: 1px solid #eee;
         display: none;
     }

     /* ACCORDION */
     .acc-item {
         border-bottom: 1px solid #ddd;
         padding: 10px 0;
     }

     .acc-header {
         display: flex;
         justify-content: space-between;
         cursor: pointer;
         align-items: center;
     }

     .acc-header span.title {
         font-size: 15px;
         font-weight: bold;
         color: #222;
     }

     .acc-header .arrow {
         font-size: 18px;
         transition: transform 0.2s;
         color: #333;
         margin: 4px 10px;
     }

     .button-section div:first-child {
         width: 60%;
     }

     .acc-item.active .arrow {
         transform: rotate(180deg);
     }

     .acc-body {
         display: none;
         padding: 8px 4px 4px;
         font-size: 13px;
         color: #444;
         line-height: 1.5;
     }

     .acc-item.active .acc-body {
         display: block;
     }

     /* TOGGLE SWITCH */
     .toggle {
         position: relative;
         display: inline-block;
         width: 42px;
         height: 22px;
     }

     .toggle input {
         opacity: 0;
         width: 0;
         height: 0;
     }

     .slider {
         position: absolute;
         cursor: pointer;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: #ccc;
         transition: 0.3s;
         border-radius: 22px;
     }

     .slider:before {
         position: absolute;
         content: "";
         height: 16px;
         width: 16px;
         left: 3px;
         bottom: 3px;
         background: #fff;
         transition: 0.3s;
         border-radius: 50%;
     }

     input:checked+.slider {
         background: var(--accent);
     }

     input:checked+.slider:before {
         transform: translateX(20px);
     }

     footer {
         position: fixed;
         bottom: 0;
         width: 100%;
         text-align: center;
         padding: 10px 0;
         background: #f9f9f9;
         border-top: 1px solid #eee;
         font-size: 13px;
     }

     footer a {
         text-decoration: underline;
         color: var(--brand);
     }

     .button-section {
         display: flex;
         gap: 8px;
         justify-content: space-between;
         margin-top: 8px;
         flex-direction: row;
     }

     .acc-header div {
         display: flex;
     }
 }

 @media (max-width: 640px) {
     #cookie-banner {
         grid-template-columns: 1fr;
         padding: 14px;
     }

     .button-section {
         flex-direction: column;
     }

     .button-section div:first-child {
         width: auto;
     }

     .cookie-controls {
         justify-content: start;
     }

     .cookie-block {
         .button-section div:first-child {
             width: 100%;
             margin-bottom: 14px;
         }

         .button-section {
             display: block;
         }

         #cookie-banner {
             overflow: scroll;
             height: 40%;
             display: block;
         }

        .cookie-controls {
            justify-content: flex-start;
            margin-top: 14px;
        }
    }
}

/* ============================================================
 * Site-wide keyboard focus visibility
 * ------------------------------------------------------------
 * Fixes Bug 1 of qrta-bugs.txt (main + every NOTE instance):
 *   - qrta:        Check Transaction/Query Status, Post a query,
 *                  SEBI/AMFI/Investor-charter circular buttons
 *   - sebi-scores: "Visit Sebi Scores Website" link
 *   - sthree:      "Back to Life at KFin" link
 *   - terms-of-use:"www.kfintech.com" link
 *   - newsroom:    every "Read More" link
 *
 * The shared root cause is that several theme styles (button
 * blocks, plain anchors, custom controls) inherit `outline: 0`
 * or repaint focus with a near-invisible colour, so keyboard
 * users cannot tell where focus has landed. WCAG 2.4.7 (Focus
 * Visible) and 1.4.11 (Non-text Contrast, 3:1 ratio) require a
 * clear indicator on every interactive element.
 *
 * The rule below paints a 3px high-contrast amber outline with
 * a 2px offset only when focus arrives from the keyboard
 * (:focus-visible), so mouse users see no change. Amber #ffb800
 * gives >= 3:1 contrast against both the site's light page
 * backgrounds and the dark blue/black sections (header, footer,
 * banner overlays, etc.) so a single rule covers the whole site.
 *
 * !important is used because several theme rules carry an
 * unconditional `outline: none` that would otherwise win on
 * specificity. :focus-visible's natural scoping prevents the
 * style from showing on pointer interaction.
 *
 * Lives in this file (kfin-cookie-resources/custom.css) rather
 * than the theme bundle so it is:
 *   (a) truly site-wide,
 *   (b) survives theme updates, and
 *   (c) loads alongside the cookie-consent code.
 * ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
.wp-block-button__link:focus-visible {
    outline: 3px solid #ffb800 !important;
    outline-offset: 2px !important;
    /* The transparent box-shadow nudges painted-over elements
       (e.g. the QRTA circular cards' inner image) so the
       outline still sits above adjacent siblings even when the
       focused element has overflow:hidden ancestors. */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.001);
}

/* ============================================================
 * Focus-not-obscured scroll padding (WCAG 2.4.11)
 * ------------------------------------------------------------
 * KDAP2-4843: when Tab lands on an element that sits just below
 * the sticky site header, the header bar visually covers the
 * focused element so the user can't see the amber outline above.
 * The page DOES scroll the element into view, but "into view"
 * is the raw viewport - it ignores the fixed header overlay.
 *
 * Setting scroll-padding-top on the scroll root tells every
 * `scrollIntoView`-style action (anchor jumps, Tab focus
 * scrolling, browser "find") to leave that many pixels of
 * head-room at the top before the element. The site header in
 * privacy.php measures 90px (.site-header { height: 90px })
 * and is the tallest sticky element across the templates, so
 * 100px gives a 10px breathing buffer.
 *
 * scroll-margin-* on the focus targets themselves is a belt-
 * and-braces fallback for cases where the scroll root is a
 * nested container, not the page root.
 * ============================================================ */
html {
    scroll-padding-top: 100px;
    scroll-padding-bottom: 60px;
}
:focus-visible,
:target {
    scroll-margin-top: 100px;
    scroll-margin-bottom: 60px;
}

/* ============================================================
 * Investor pages a11y additions (KDAP2-4710..4865)
 * ------------------------------------------------------------
 * Per-ticket notes annotated inline. All rules live in
 * kfin-cookie-resources/custom.css so they ship globally
 * alongside the JS enhancer and survive theme updates.
 * ============================================================ */

/* KDAP2-4757 / 4787 / 4789 / 4760 / 4743 / 4714 — Visible label
 * injected before every <select> that lacked one. Style it so it
 * looks like the surrounding theme labels (uppercase, brand-blue,
 * small caps) instead of bare browser text. Visible on every
 * page (annual-reports, cg-report, secretarial-compliance,
 * investor-presentation-transcript, subsidiaries, quarterly-key-
 * performance-indicators). */
.kfin-injected-label {
    display: inline-block;
    margin: 0 8px 6px 0;
    font-size: 14px;
    font-weight: 600;
    color: #cfd6e4;
    letter-spacing: 0.5px;
}
.kfin-injected-label + select {
    vertical-align: middle;
}

/* KDAP2-4763 / 4744 / 4822 / 4768 / 4813 — combobox focus indicator
 * The theme strips outline on <select> in favour of a brand-blue
 * inset shadow that fails 3:1 against the dark page background
 * (#1967D2 vs #2B3441 ≈ 2.3:1). Force the same amber outline we
 * use site-wide so the focused combobox is unmistakable.
 *
 * !important is required because several theme stylesheets carry
 * `select:focus { outline: none; box-shadow: 0 0 0 2px #1967d2; }`
 * and would otherwise win on specificity. */
select:focus,
select:focus-visible,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus {
    outline: 3px solid #ffb800 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.001) !important;
}

/* ============================================================
 * REVERTED 2026-06-03 — Bucket A colour-contrast overrides
 * ------------------------------------------------------------
 * Per maintainer request, every CSS colour-override block
 * added in earlier rounds to remediate WCAG 1.4.3 / 1.4.11
 * contrast tickets has been removed from this file. The
 * following blocks USED to live here and have been deleted in
 * this revision — listing them so a future maintainer who
 * needs to revisit any of these tickets knows exactly which
 * rules were in flight, and where to look in the changed.txt
 * round-1..round-3 history for the original justification:
 *
 *   • KDAP2-4720       .toggle_positions / .board-directors-
 *                      with-extra-content a   (#0066b3)
 *   • KDAP2-4837       .registrar-block a, mailto+website
 *                      links to bigshareonline (#48adf0)
 *   • KDAP2-4775/4772  .geographical-presence-page country/
 *                      pin/link text          (#5fa8ff /
 *                      #ffffff on hover/focus)
 *   • KDAP2-4848       pie-chart "Others" wedge swatch
 *                      (#c33dc3 — block was already commented
 *                      out, removed for cleanup)
 *   • KDAP2-4846/4844  .share-holding-pattern-table /
 *                      .share-holding-pattern-legend orange +
 *                      green chips (#c45a00 / #0a6b10)
 *   • KDAP2-4807/4805/ .kfin-numbers-tile
 *     4802/4799/4796   bg-blue/green/coral/yellow
 *                      (#1f5cb8/#0a6b10/#a8403a/#7a5a00)
 *   • KDAP2-4728       .blockquote-icon / .quote-icon /
 *                      .kfin-was-paragraph::before  (#5fa8ff)
 *
 * The site-wide focus-visible amber outline (3px #ffb800,
 * lines ~425 above) and the combobox/input focus override
 * (lines ~513 above) are INTENTIONALLY kept — they primarily
 * fix WCAG 2.4.7 (Focus Visible) and removing them would
 * make keyboard focus invisible site-wide, which is a
 * different and bigger regression than the contrast scope
 * of this revert.
 * ============================================================ */

/* KDAP2-4741 / 4740 / 4739 — Board & Committees page reflow at
 * 320px / text-resize 200%.
 *
 * The board cards use fixed `width:150px` images and a
 * percentage-locked grid that overflows below 360px. The override
 * below switches `.leaders-info` and `.board-and-committee` to a
 * single-column flex layout once the viewport drops below 480px
 * (so the 320px target reflows cleanly) and removes the inline
 * `width` cap on the avatar image so it scales with text-zoom.
 * Also lifts off any fixed-px paddings on the surrounding
 * container so the bleed margins are not lost on the small
 * viewport. */
@media (max-width: 480px) {
    .board-directors-with-extra-content,
    .board-directors-with-extra-content .leaders-info,
    .board-directors-with-extra-content .board-and-committee {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }
    .board-directors-with-extra-content .leaders-info > .wp-block-column {
        width: 100% !important;
        flex-basis: 100% !important;
    }
    .board-directors-with-extra-content figure.wp-block-image img,
    .board-directors-with-extra-content .wp-block-image img {
        width: 100% !important;
        max-width: 150px !important;
        height: auto !important;
    }
    .board-committee .padding-20,
    .board-committee.padding-20,
    .board-committee.px-5,
    .board-committee .px-5 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    .board-committee figure.wp-block-table {
        overflow-x: auto !important;
    }
    .board-committee figure.wp-block-table table {
        min-width: 480px !important;
    }
}

/* Reflow / text-resize 200% safety net — applies to the whole
 * investor template. Containers that are pixel-locked break at
 * 200% zoom because their content needs ~2× the inline space. */
.investor-information-resources,
.investor-information-resources .wp-block-columns {
    max-width: 100% !important;
    flex-wrap: wrap !important;
}
.investor-information-resources .wp-block-column[style*="flex-basis:"] {
    /* Stagger flex-basis so it never exceeds 100% on small viewports */
    max-width: 100% !important;
}
.investor-information-resources figure.wp-block-table {
    overflow-x: auto !important;
    max-width: 100% !important;
}

/* KDAP2-4842 / 4764 — focus-not-obscured. The site-wide
 * `scroll-padding-top: 100px` we added earlier handles most
 * cases; certifications and registrar pages have a slightly taller
 * sticky banner on small screens — bump the offset by another
 * 20px there to keep "Download PDF" buttons visible on focus. */
@media (max-width: 1024px) {
    html {
        scroll-padding-top: 120px;
    }
    :focus-visible,
    :target {
        scroll-margin-top: 120px;
    }
}

/* KDAP2-4858 / 4860 — Tooltip hoverable + dismissible.
 * Adds a small invisible hover bridge between trigger and tooltip
 * so the pointer can travel into the tooltip without it
 * vanishing, and keeps the tooltip visible while it has
 * focus-within (Esc still dismisses via JS). */
[role="tooltip"],
.tooltip,
.map-tooltip,
.country-tooltip {
    pointer-events: auto;
}
.country-pin:hover [role="tooltip"],
.country-pin:focus-within [role="tooltip"],
.map-pin:hover .map-tooltip,
.map-pin:focus-within .map-tooltip,
[data-country]:hover .country-tooltip,
[data-country]:focus-within .country-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Visually hidden helper used by JS-injected sr-only tables
 * (pie chart text alternative, etc). The .sr-only class higher
 * up handles most cases; add an explicit alias for the modern
 * .visually-hidden naming so both work. */
.visually-hidden:not(:focus):not(:active),
.sr-only:not(:focus):not(:active) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* KDAP2-4719 — JS-promoted <blockquote> renders identical to the
 * original <p>.
 *
 * Background (feedback-bugs.txt #2, 2026-05-29): the home page
 * "Our change strategy..." paragraph is promoted at runtime from
 * <p> to <blockquote> by `ensureBlockquote()` in navigation.js.
 * The <p> in the Gutenberg source declares its visual contract
 * inline:
 *
 *   <p class="has-white-color has-text-color"
 *      style="font-size:24px;font-style:normal;font-weight:500">...
 *
 * The JS promotion now copies every attribute (incl. inline
 * `style` + color classes) onto the new element, so font sizing /
 * weight / colour are inherited verbatim. The block below cancels
 * the *browser-default* UA <blockquote> styles that would
 * otherwise override the <p>-equivalent layout:
 *
 *   - Chrome/Firefox/Safari ship <blockquote> with
 *     `margin-block-start/end: 1em` and
 *     `margin-inline-start/end: 40px` — the 40px inline margin
 *     is what previously pushed the quote in from the column
 *     edge and made the layout drift.
 *   - Some agents (notably webkit print / epub) apply
 *     `font-style: italic` to <blockquote>; we hard-reset to
 *     `inherit` so the source's `font-style:normal` survives.
 *
 * This rule deliberately does NOT add a left border or quote
 * glyph — the design intent on the home page is a regular
 * paragraph, not a "stylised quote". The decorative quote-mark
 * graphic in `figure.wp-block-image.quote` is the visual
 * affordance; the <blockquote> exists purely to give NVDA /
 * VoiceOver the right semantic announcement. */
blockquote.kfin-was-paragraph {
    /* Match the bootstrap <p> default margin (margin:0 0 1rem)
     * exactly, so the vertical rhythm to the "Download PDF" button
     * below is preserved. The 4-value form ALSO drops the WebKit-
     * default 40px inline margin that <blockquote> ships with —
     * that's what was previously pushing the quote in from the
     * column edge.
     *
     * `feedback-bugs.txt` #2 (2026-06-01): the prior reset used
     * `margin: 0 !important`, which removed the 1rem bottom margin
     * the original <p> inherited from `bootstrap.min.css`
     * (`p{margin:0 0 1rem}`). That made the layout below the
     * quote tighten by ~16px — observable as the "modified
     * original css" regression the maintainer reported. */
    margin: 0 0 1rem !important;
    padding: 0 !important;
    border: 0 !important;

    /* Neutralise UA italic on <blockquote> in the few agents that
     * apply it (e.g. webkit print/epub). The source <p> declares
     * `font-style:normal` inline, but `inherit` keeps the rule
     * future-proof if the inline style is ever removed. */
    font-style: inherit;

    /* Inherit display so the element flows in the document like
     * the original paragraph (no list-item bullet, no quote
     * indentation). */
    display: block;
    quotes: none;
}

/* Belt-and-braces: also reset the legacy ::before pseudo-quote
 * that some browsers / theme styles inject on <blockquote>.
 * Without this, an opening curly quote could appear in front of
 * the first word and visually offset the paragraph. */
blockquote.kfin-was-paragraph::before,
blockquote.kfin-was-paragraph::after {
    content: none !important;
}

/* Make the JS-injected aria-live region invisible. */
.kfin-sr-live {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* KDAP2-4712 / 4737 / 4738 / 4746 — table-header migration visual
 * parity (feedback-bugs.txt round 4, item 2).
 *
 * Background: across ~30 tables (Shareholding Pattern, Quarterly
 * KPI ×14, Financials ×4, Subsidiaries, Analyst Coverage, etc.)
 * the round-2 migration converted plain <td> first-row / first-
 * column cells into native <th scope="col"> / <th scope="row">
 * to ship correct semantics on first paint. That fixed
 * NVDA / VoiceOver announcement, but two browser-default <th>
 * declarations leaked through and visually changed the cells:
 *
 *   - `font-weight: bold` (UA stylesheet)
 *   - `text-align: center` (UA stylesheet)
 *
 * The original <td>s ALSO depended on `.analyst-table td` rules
 * in `style.css` for `padding`, `border:unset`, and the alternate
 * column background `tr:not(:first-child) td:nth-child(2n)`.
 * Those rules don't match `<th>`, so promoted cells lost their
 * padding and zebra-striping along with the bold/center change.
 *
 * The block below restores parity: every `.analyst-table` rule
 * targeting <td> is mirrored for <th>, and the UA bold/center
 * defaults are explicitly neutralised to `inherit`. Bold styling
 * on legitimate column headers continues to come from explicit
 * <strong> wrapping inside the <th> (preserved during migration),
 * so the visible bold-or-not contract per cell is unchanged. */
.analyst-table th {
    /* Match `.analyst-table td { padding:10px 20px; border:unset !important }`
     * in style.css. */
    padding: 10px 20px;
    border: unset !important;

    /* Cancel UA `<th> { font-weight: bold; text-align: center }`
     * so promoted row-header cells (e.g. "Promoters",
     * "Net Sale of Services") render exactly as the original
     * `<td>` did. <strong> wrappers preserved during migration
     * still bold the column headers. */
    font-weight: inherit;
    text-align: inherit;

    /* Don't inherit the WP block-table's default header
     * background tint either — `<td>` had transparent. */
    background: transparent;
}

/* Mirror of `.analyst-table tr:not(:first-child) td:nth-child(2n)`
 * — alternate-column zebra background on row-header cells. */
.analyst-table tr:not(:first-child) th:nth-child(2n) {
    background: rgba(230, 231, 243, 0.08);
}

/* Mirror of `.board-committee .wp-block-table tr td { padding:25px 0 15px }`
 * — director directorship tables on /board-and-committees/. */
.board-committee .wp-block-table tr th {
    padding: 25px 0 15px;
    font-weight: inherit;
    text-align: inherit;
}

/* Mirror of `.unclaimed-data-page+div .analyst-table td { ... }` —
 * unclaimed dividend / IEPF tables. The matching td rule is
 * `padding:12px 7px; border:unset!important; background:#373738`.
 * UA bold/center neutralisation applies here too. */
.unclaimed-data-page + div .analyst-table th {
    padding: 12px 7px;
    border: unset !important;
    background: #373738;
    font-weight: inherit;
    text-align: inherit;
}

/* Bucket A2 (round 4 — 2026-06-01). The director-profile modal's
 * close control was promoted from `<img class="close-button">` to
 * `<button class="close-button"><img/></button>` in `header.php`
 * so it ships with native button semantics. The existing
 * `.close-button` rule in `scss/statutory-disclosures.scss` only
 * sets position / z-index / cursor — it doesn't neutralise the UA
 * `<button>` background, border, or padding, which would
 * otherwise turn the close icon into a grey rounded-rectangle
 * button. The block below cancels those UA defaults so the
 * promoted element renders identically to the previous `<img>`.
 *
 * `.toggle_positions` is also now a real `<button>` (was an `<a>`
 * without href). Its existing rule in `style.css` already sets
 * `background: transparent` and `border: transparent`, so no
 * additional reset is needed there. */
button.close-button {
    background: transparent;
    border: 0;
    padding: 0;
}

/* ROUND 5 (2026-06-03) — KDAP2-4781 (WCAG 1.3.1).
 *
 * The Locate-Us contact card on `/geographical-presence/`
 * (rendered at runtime by `js/index.js::fetchAndDisplayCity-
 * Information`) used to mark every field label
 * ("Email", "Alternate Email", "Address", "City", "Pincode",
 * "Phone") as `<h5 class="location_key">`. Field labels are
 * not section headings — putting them in the heading
 * hierarchy violates WCAG 1.3.1 "Info and Relationships"
 * and clutters the screen-reader heading-list navigation
 * for the whole page.
 *
 * The runtime template now emits `<p class="location_key">`
 * instead. The two existing `.location_key` rules in
 * `scss/more.scss` (compiled into `style.css`) target the
 * class, not the tag, so the layout — `width:150px`,
 * `font-size:15px`, `margin:10px 0` — keeps applying
 * unchanged.
 *
 * The maintainer also asked for the label colour to flip to
 * white. The existing rule in `more.scss:570-573` fixes the
 * colour at `#1479FF !important`; we have to override it
 * with the same `!important` strength from
 * `kfin-cookie-resources/custom.css` (which loads last in
 * the page so source-order also falls in our favour).
 * Other `.location_key` properties (width, margin, font-
 * size) and the sibling `.location_value` (currently
 * `color: white !important`) are deliberately untouched. */
.location-container .location_row .location_key {
    color: #ffffff !important;
}

/* ROUND 5 (2026-06-02) — feedback-bugs.txt item #11.
 *
 * Shareholding_Pattern.txt's `<table>` was migrated in round 1 to
 * ship native `<thead>`, `<th scope="col">` (column headers) and
 * `<th scope="row">` (row labels — Promoters / Mutual Funds /
 * etc.) for screen-reader navigation. The existing
 * `.analyst-table th { padding:10px 20px; border:unset; font-
 * weight:inherit; text-align:inherit; background:transparent }`
 * rule we shipped earlier handled the generic case but did NOT
 * pin every visual property the user is comparing against (the
 * `style.css` cascade has multiple `.analyst-table td` rules
 * with `!important` from media queries / unclaimed-data-page
 * contexts that don't have th equivalents).
 *
 * The block below is a SCOPED override targeting only the
 * Shareholding_Pattern column (`.share-holding-pattern-table` is
 * the wrapping `.wp-block-column` set in source). Every cell in
 * the data body is forced to render the way the original `<td>`
 * did before the a11y migration — left-aligned where the source
 * was left-aligned, right-aligned where it had `class=
 * "has-text-align-right"`, no UA bold-or-center on the row
 * labels, identical padding to the data cells.
 *
 * The thead row keeps its existing dark-blue band from
 * `.analyst-table thead tr:first-child * { background-color:
 * #1a374e !important }` in `style.css` — that rule already
 * targets `*`, so both the migrated `<th scope="col">` cells
 * and the bare `<th>` would match. */
.share-holding-pattern-table .analyst-table th[scope="row"],
.share-holding-pattern-table .analyst-table tbody th {
    padding: 10px 20px;
    border: unset !important;
    background: transparent;
    font-weight: inherit;
    text-align: left;
}

/* The row's `<td>` cells already carry `class="has-text-align-right"`;
 * make sure the rule wins over any `text-align: inherit` we might
 * have injected for sibling th cells. */
.share-holding-pattern-table .analyst-table tbody td.has-text-align-right {
    text-align: right;
}

/* The "Total" row's row-label is bold in the source via a
 * `<strong>` wrapper (preserved through the migration), so the
 * `font-weight: inherit` above is correct: total stays bold via
 * the inner element, regular rows render normal. The data cells
 * for "Total" carry their own `<strong>` wrappers verbatim so we
 * do not override `font-weight` on td. */

/* ROUND 5 (2026-06-02) — feedback-bugs.txt item #2.
 * ROUND 5 REGRESSION FIX (2026-06-03 #5) — proper mirror.
 *
 * Background. After round 4 promoted director-card names from
 * <h4> to <h3> (KDAP2-4717), the live page lost ALL the legacy
 * h4 styling because the rules in `style.css` are h4-scoped:
 *
 *     .leaders-info h4                  { cursor:pointer }
 *     .leaders-info h4                  { font-size:16px;
 *                                          display:flex;
 *                                          justify-content:center;
 *                                          margin-top:20px;
 *                                          font-weight:700;
 *                                          margin-bottom:12px }
 *     .leaders-info h4 img              { display:none;
 *                                          margin-left:5px;
 *                                          margin-top:-5px }
 *     .leaders-info:hover h4            { background:linear-gradient(
 *                                            150deg,#0090ff 0%,
 *                                            #36dae9 100%);
 *                                          -webkit-background-clip:text;
 *                                          background-clip:text;
 *                                          -webkit-text-fill-color:
 *                                            transparent }
 *     .leaders-info:hover h4 img        { display:block }
 *     @media (max-width:600px)
 *       .site .board-and-committee .leaders-info h4
 *                                       { margin:20px 10px 20px 5px }
 *
 * AND, separately, every directory section on
 * `Board_and_Committees.txt` is wrapped in
 * `<div class="...board-committee...">` (the SINGULAR accordion
 * wrapper, NOT `.board-and-committee`). That wrapper has these
 * accordion-section rules in `scss/statutory-disclosures.scss`
 * lines 1-22:
 *
 *     .board-committee h3              { background:rgba(230,231,243,0.07);
 *                                         border-radius:3.5px;
 *                                         position:relative;
 *                                         cursor:pointer }
 *     .board-committee .active h3      { background:linear-gradient(
 *                                           0deg,#0090FF 4%,#36DAE9 125%) }
 *
 * Pre-round-4, those rules harmlessly painted only the accordion
 * SECTION-HEADING h3s (the director-card names were h4). Post-
 * round-4 they cascade onto the director-card NAMES too, so each
 * name picked up a translucent grey rounded rectangle, and the
 * most-recently-clicked one picked up a bright blue gradient
 * panel (the `.active` came from the accordion click handler in
 * `js/index.js:663` — see the matching `.not(".leaders-info h3")`
 * filter we added there in round 5 #5).
 *
 * Earlier round-5 attempts to fix this were all wrong because we
 * were reading the SCSS source (which has stale rules like
 * `font-size:15px; color:black !important`) instead of the
 * compiled `style.css` that the live page actually serves. The
 * SCSS does NOT match the compiled stylesheet on this page.
 *
 * The fix below copies the COMPILED `style.css` h4 rules onto
 * h3 (typography + flex centering + hover-gradient text + arrow
 * visibility + mobile margins) AND neutralizes the stray
 * `.board-committee h3` accordion paint when the h3 sits inside
 * a `.leaders-info` ancestor. We deliberately do NOT touch the
 * `color` property — the global `*{ color:#fff }` from
 * `style.css:1` keeps the names white on the dark page.
 *
 * SCSS source is intentionally NOT edited; we don't run the
 * theme build pipeline, so all overrides land here instead.
 */
/* ROUND 5 #31 (KDAP2-4742): director-card NAMES are now
 * <p class="wp-block-heading kfin-director-name"> in
 * `Board_and_Committees.txt`. We mirror the same property
 * set onto `.kfin-director-name`, keeping the h3 selectors
 * in the comma-list as a transitional fallback in case a
 * stale page version still uses h3. The rules also need to
 * neutralize the universal `p { margin-bottom:10px !important }`
 * from `style.css:1` for the new <p>, hence `margin-bottom:12px
 * !important`. */
.leaders-info .kfin-director-name,
.leaders-info h3 ,.leaders-info .kfin-committee-member{
    background: transparent !important;
    border-radius: 0 !important;
    position: static !important;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    font-weight: 700;
    margin-bottom: 12px !important;
}
.leaders-info .kfin-director-name img,
.leaders-info h3 img {
    display: none;
    margin-left: 5px;
    margin-top: -5px;
}
.leaders-info:hover .kfin-director-name,
.leaders-info:hover h3 {
    background: linear-gradient(150deg, #0090ff 0%, #36dae9 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.leaders-info:hover .kfin-director-name img,
.leaders-info:hover h3 img {
    display: block;
}
.board-committee .active .leaders-info .kfin-director-name,
.board-committee .active .leaders-info h3,
.leaders-info.active .kfin-director-name,
.leaders-info.active h3,
.leaders-info .active .kfin-director-name,
.leaders-info .active h3 {
    background: transparent !important;
    opacity: 1 !important;
}
.leaders-info .kfin-director-name:after,
.leaders-info h3:after {
    content: none !important;
}
.leaders-info .kfin-director-name:focus-visible,
.leaders-info h3:focus-visible {
    outline: 2px solid #1479FF;
    outline-offset: 2px;
    border-radius: 2px;
}
@media (max-width: 600px) {
    .site .board-and-committee .leaders-info .kfin-director-name,
    .site .board-and-committee .leaders-info h3 {
        margin: 20px 10px 20px 5px;
    }
}

/* ROUND 5 (2026-06-03, FINAL) — KDAP2-4736 modal heading
 * typography mirror.
 *
 * `header.php` lines 113-114 used to ship the director-
 * profile modal with empty `<h5></h5>` / `<h4></h4>` slots
 * that the modal-open handler in `js/index.js` filled with
 * the director name and role. The audit (KDAP2-4736)
 * pointed out that those `<h5>` / `<h4>` levels jump non-
 * sequentially under the page's `<h2>` group heading, so
 * NVDA / VoiceOver hear `h2 -> h5` / `h2 -> h4` and lose
 * the section relationship.
 *
 * The modal slots are now `<h2></h2>` / `<h3></h3>` per the
 * ticket's prose recommendation. The element-specific rules
 * in `scss/statutory-disclosures.scss` lines 94-120 painted
 * the OLD slots:
 *
 *     .modal-content {
 *         h5 { font-weight:700; font-size:24px;
 *              line-height:36px; display:flex;
 *              align-items:center; letter-spacing:0.1px;
 *              color:#0090FF; }
 *         h4 { margin-bottom:20px; font-weight:600;
 *              font-size:22px; line-height:20px;
 *              letter-spacing:0.1px; color:#000000; }
 *     }
 *
 * Those rules no longer match (the elements are h2/h3 now),
 * so we mirror them onto the new tags here. We deliberately
 * do NOT edit the SCSS source (theme build pipeline we don't
 * run). The role h3 is scoped via `.profile-details h3` so
 * the rule does NOT apply to the directorship-table title
 * `<h3 class="table_text">` that lives in the sibling
 * `.table_data` block — that one keeps its own theme
 * styling. */
.modal-content h2 {
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
    display: flex;
    align-items: center;
    letter-spacing: 0.1px;
    color: #0090FF;
}
.profile-details h3 {
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 22px;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: #000000;
}

/* ROUND 5 (2026-06-04 #12) — KDAP2-4740 / KDAP2-4741 (WCAG 1.4.10
 * Reflow). Director-profile modal does not reflow at narrow
 * viewports. The legacy modal CSS in
 * `scss/statutory-disclosures.scss` lines 53-126 ships with
 * pixel-locked dimensions:
 *
 *     .modal-content {
 *         height:          500px;          // fixed
 *         padding:         70px 50px;      // 100px L/R lost
 *         display:         flex;
 *         flex-direction:  unset !important;  // = row
 *     }
 *     .modal-content img {
 *         width:           265.44px;       // wider than 320px - 100px
 *         margin-right:    50px;           // pushes content further right
 *     }
 *     .modal-content p {
 *         padding-right:   30px;
 *         height:          300px;          // fixed; the bio scroll is
 *         overflow-y:      scroll;         // designed for desktop modal
 *     }
 *
 * At 320 CSS pixels (WCAG 1.4.10 reference width):
 *   - 320px - 100px L/R padding = 220px usable
 *   - portrait img alone = 265.44px -> overflows
 *   - flex row pushes everything else off the right edge ->
 *     "Directorships and Full-time Positions in other Body
 *      Corporate" heading clips to "Directorships and Full-time"
 *     (KDAP2-4740 screenshot 1)
 *   - directorships table column 2 ("Name of body corporate")
 *     clips mid-word per row
 *   - the right-side chevron "next" arrow ends up half off-
 *     screen (KDAP2-4740 screenshot 2)
 *   - on overlap-mode the close button collides with content
 *     (KDAP2-4741 screenshot 141708.png)
 *
 * Fix: scope a `@media (max-width: 600px)` block to the modal
 * tree. Six things change:
 *   1. Modal container becomes near-edge-to-edge with a 0.5rem
 *      breathing margin instead of a centred 1000px max-width
 *      that translates poorly to 320px.
 *   2. `.modal-content` switches from row to column flex so the
 *      portrait stacks above the data, padding drops to 1rem,
 *      fixed height becomes auto so the modal grows with
 *      content.
 *   3. Portrait image becomes fluid (100% wide up to 200px,
 *      auto height) and centres horizontally with no right
 *      margin.
 *   4. Bio paragraph drops the fixed 300px height + scroll —
 *      the now-column modal is itself scrollable, so a nested
 *      scroll surface is no longer needed.
 *   5. The inner directorships table gains `overflow-x: auto`
 *      with a 360px min-table-width, so column 2 horizontally
 *      scrolls (acceptable per WCAG 1.4.10 "Horizontal
 *      scrolling is acceptable only when necessary") instead
 *      of truncating mid-word.
 *   6. Modal headings (both modern h2 / h3 AND legacy h4 / h5
 *      so the rule survives any future hierarchy revert)
 *      drop to 16-18px and gain `overflow-wrap: anywhere` so
 *      "Directorships and Full-time Positions in other Body
 *      Corporate" wraps onto multiple lines instead of
 *      clipping.
 *
 * SCSS source is intentionally NOT edited; we don't run the
 * theme build pipeline. */
@media (max-width: 600px) {
    .view-profile-modal .inner-modal {
        width: auto !important;
        max-width: calc(100vw - 1rem) !important;
        margin: 0.5rem auto !important;
        transform: none !important;
        top: auto !important;
        position: relative !important;
    }
    .view-profile-modal .modal-content {
        height: auto !important;
        max-height: calc(100vh - 1rem) !important;
        padding: 1rem !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    .view-profile-modal .modal-content > img {
        width: 100% !important;
        max-width: 200px !important;
        height: auto !important;
        margin: 0 auto 1rem !important;
        display: block !important;
    }
    .view-profile-modal .modal-content p {
        padding-right: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    .view-profile-modal .modal-content h2,
    .view-profile-modal .modal-content h5 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        white-space: normal !important;
    }
    .view-profile-modal .modal-content h3,
    .view-profile-modal .modal-content h4,
    .view-profile-modal .modal-content .profile-details h3,
    .view-profile-modal .table_data .table_text {
        font-size: 16px !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }
    .view-profile-modal .data-shown-modal {
        width: 100% !important;
        max-width: 100% !important;
    }
    .view-profile-modal .view-profile-content-text,
    .view-profile-modal .modal-content .view-profile-content-text {
        font-size: 16px !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        white-space: normal !important;
    }
    .view-profile-modal .view-profile-content-table,
    .view-profile-modal figure.wp-block-table,
    .view-profile-modal .table_box {
        overflow-x: auto !important;
        max-width: 100% !important;
        margin: 0 0 1rem !important;
    }
    .view-profile-modal .view-profile-content-table table,
    .view-profile-modal figure.wp-block-table table,
    .view-profile-modal .table_box table {
        min-width: 360px !important;
        width: 100% !important;
    }
    .view-profile-modal .close-button {
        right: 0.5rem !important;
        top: 0.5rem !important;
    }
    .view-profile-modal .toggle_positions {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}

/* ROUND 5 (2026-06-03 #7 — REMOVED) — Annual Reports year
 * dropdown: white border on the hovered option.
 *
 * Attempted to add a white border to the hovered native
 * `<option>` inside `<select id="ddlYears">` using a multi-
 * pronged rule (border + outline + inset box-shadow on
 * `:hover`/`:focus`/`:checked`/`:active`). The maintainer
 * confirmed the rule did NOT take effect in their target
 * browser, which matches what we documented as the expected
 * limitation: native `<option>` elements are rendered by the
 * OS / browser chrome, not the page's CSS engine, and most
 * border / outline / box-shadow properties are ignored on
 * native dropdown options across Chrome, Firefox, and Safari.
 *
 * The rule was removed at maintainer request. If a future
 * round needs reliable cross-browser styling of the open
 * dropdown, the only durable path is to replace the native
 * `<select>` with a custom combobox widget (button + listbox
 * + ARIA) — a larger UX/A11y change that is OUT OF SCOPE
 * here. */


/* =========================================================================
 * ROUND 5 #15 (2026-06-04) — KDAP2-4779
 * Geographical-presence country-pin tooltip must reveal on keyboard
 * focus (not just hover) and dismiss on Esc per WAI-ARIA tooltip pattern.
 *
 * The original SCSS at scss/more.scss:382-404 ships the tooltip as a
 * CSS pseudo-element (.geography_dot a::after) with `opacity: 0;
 * visibility: hidden;` and only flips visibility on `a:hover::after`.
 * That fails WCAG 2.1.1 (Keyboard) because keyboard users have no way
 * to reveal the tooltip — `:focus` is not in the trigger list.
 *
 * SCSS source is NOT edited (no theme build pipeline in this workspace);
 * the override lives here. Listed in 3 parts:
 *
 *   PART A — :focus / :focus-visible tooltip reveal
 *   PART B — visible focus ring on the trigger itself
 *   PART C — .kfin-tooltip-dismissed companion (set by JS in
 *            navigation.js when Esc is pressed; cleared on focusout)
 *
 * QA REQUIREMENT MAP (verbatim from JIRA "Suggested fix" section):
 *   1. Tab / Shift+Tab moves focus to trigger        → already works
 *      (tabindex="0" / role="button" / aria-label was authored into
 *      Global_Operations_Presence.txt in a prior round).
 *   2. Focus reveals the tooltip                     → PART A
 *   3. Esc dismisses the tooltip (without losing focus on the
 *      trigger, per WAI-ARIA tooltip APG pattern)    → PARTS C + JS
 *
 * RESOURCE: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
 * ========================================================================= */

/* PART A — reveal on keyboard focus */
.geography_dot a:focus::after,
.geography_dot a:focus-visible::after {
    opacity: 1 !important;
    visibility: visible !important;
    transition: all .1s ease .5s;
}

/* PART B — visible focus indicator on the trigger.
 *
 * The pin trigger is an <a> with no href, sized 19×19px (the
 * .wp-image-981 location.svg). Default browser focus rings on
 * tabindex-only <a> elements are inconsistent and sometimes painted
 * inside the element where the small icon hides them. An explicit
 * 2px outline with 4px offset paints around the pin at all times.
 *
 * Color #0073cc was chosen because:
 *   - it matches the brand accent we use elsewhere
 *     (.location-description background, KDAP2-4721 modal scroll
 *     focus outline planned),
 *   - it computes 4.04:1 contrast vs the page's white map background,
 *     above the WCAG 1.4.11 (Non-text Contrast) 3:1 threshold,
 *   - it stays distinct from the tooltip pseudo-element's own
 *     #fff bg / #374488 text so the two visual elements don't
 *     blend at any size.
 */
.geography_dot a:focus-visible {
    outline: 2px solid #0073cc;
    outline-offset: 4px;
    border-radius: 2px;
}

/* PART C — Esc-to-dismiss override.
 *
 * Pure CSS cannot model "tooltip dismissed but focus retained" because
 * the :focus rule above unconditionally shows the tooltip whenever the
 * trigger has focus. The JS handler in navigation.js stamps the class
 * .kfin-tooltip-dismissed on the trigger when Escape is pressed; this
 * override forces the pseudo-element back to opacity:0/hidden while
 * the :focus state remains active. The same JS removes the class on
 * focusout, so a future Tab back into the same pin (or any other pin)
 * gets a fresh tooltip — no stale dismissal carried over, matching
 * the WAI-ARIA tooltip APG "Esc temporarily hides the tooltip while
 * focus stays put; tooltip re-shows on next focus event" pattern.
 */
.geography_dot a.kfin-tooltip-dismissed:focus::after,
.geography_dot a.kfin-tooltip-dismissed:focus-visible::after {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ROUND 5 (2026-06-04 #16) — KDAP2-4739 — Text resizing /
 * page-zoom symptoms on /board-and-committees/.
 *
 * REPORTED SYMPTOMS (from QA screenshots at 200 % browser zoom):
 *
 *   Symptom 1 (modal): With the director-profile modal OPEN, the
 *   "Directorships and Full-time Positions in other Body
 *   Corporate" toggle button bleeds OUT of the white .modal-
 *   content rectangle and renders on the rgba(0,0,0,0.3)
 *   backdrop, visually overlapping the listing director cards
 *   (Sreekanth Nadella / Mazumdar names, Independent Director
 *   role label, etc.) underneath. The white modal box "ends"
 *   above where the toggle now sits.
 *
 *   Symptom 2 (site nav): The top nav menu items wrap awkwardly
 *   and the last item ("Shareholding Pattern") is clipped at the
 *   right edge of the viewport instead of breaking onto a new
 *   line.
 *
 * ROOT CAUSE (verified against scss/statutory-disclosures.scss
 * and scss/header.scss):
 *
 *   Modal:
 *     - `.modal-content { height: 500px }` is fixed-px. When
 *       headings wrap to 2-3 lines under text-zoom, the inner
 *       .data-shown-modal column overflows the 500 px box. The
 *       toggle <button> (last child of .data-shown-modal)
 *       therefore renders BELOW the white .modal-content
 *       rectangle, on top of the parent .view-profile-modal's
 *       30 %-opacity backdrop, where the listing cards beneath
 *       remain partially visible.
 *     - `.inner-modal { transform: translateY(50%); top: 50% }`
 *       has no `position` set, so `top` is ignored entirely and
 *       the transform alone pushes the whole modal DOWN by 50 %
 *       of its own height — which compounds the overflow at any
 *       zoom level where .modal-content grows.
 *
 *   Site nav:
 *     - `.site nav ul { margin: 30px 50px 50px }` reserves 50 px
 *       on each side, eating horizontal space, and there is no
 *       `flex-wrap` on the nav so menu items either compress
 *       awkwardly or run off the right edge.
 *
 * FIX:
 *   1. Cap .inner-modal at 92vh with internal `overflow-y:
 *      auto` and replace the buggy translateY(50%)+top:50%
 *      with proper `margin: 4vh auto` centering. The toggle
 *      always stays inside the white .modal-content box, and
 *      the user can scroll within the modal at high zoom.
 *   2. Make .modal-content `height: auto` with
 *      `min-height: min(500px, 88vh)` — preserves the original
 *      500 px feel at normal aspect ratios, but never enforces
 *      a minimum that exceeds the inner-modal cap (which
 *      would create a `min-height > max-height` conflict at
 *      200 % zoom on a 540 CSS-px-tall effective viewport).
 *   3. `.site nav` and `.site nav ul` get `flex-wrap: wrap`
 *      with `gap: 12px 20px` and tighter `margin: 20px 16px`
 *      so menu items break onto multiple rows cleanly when
 *      they would otherwise overflow.
 *
 * MEDIA-QUERY SCOPE — UI-PRESERVATION GUARANTEE:
 *
 *   The block fires for:
 *     a) 601 - 1024 CSS-px wide viewports (any height) — covers
 *        tablet widths AND 200 % page-zoom on a 1920 px display
 *        (effective 960 px), which is the QA's reported case.
 *     b) >= 1025 CSS-px wide viewports with <= 800 CSS-px tall
 *        — covers short laptop windows (e.g. 1366×768) where
 *        the desktop pixel-locked modal also overflows.
 *
 *   It DOES NOT fire for:
 *     - <= 600 CSS-px wide viewports — round-5-#12
 *       (KDAP2-4740/4741) mobile reflow continues to win on
 *       phones; round-5-#16 is a complement, not a replacement.
 *     - >  1024 CSS-px wide AND > 800 CSS-px tall viewports
 *       — i.e. typical 1366×900 / 1440×900 / 1920×1080+
 *       desktops at 100 % zoom. UI is preserved EXACTLY at
 *       these sizes — zero visual change for the common case.
 *
 * CROSS-FIX AUDIT:
 *   - round-5-#12  (4740/4741) modal mobile reflow .......... no
 *     overlap at scope boundary; this fires only at 601+ px,
 *     #12 fires only at <=600 px.
 *   - round-5-#15  (4779) map-pin tooltip ................... different
 *     selector tree (.geography_dot a); no interaction.
 *   - round-4 Bucket A2 close-button / toggle as native
 *     <button> ............................................. typography
 *     untouched; this block adjusts container height /
 *     positioning only.
 *   - round-5-#4 (4736) modal h2/h3 typography mirror ....... typography
 *     untouched; container height/positioning only.
 *
 * SCSS source (statutory-disclosures.scss / header.scss /
 * home.scss) NOT touched, per the no-build-pipeline policy.
 */
@media (min-width: 601px) and (max-width: 1024px),
       (min-width: 1025px) and (max-height: 800px) {

    /* MODAL — viewport-cap + remove buggy translateY(50%) shift. */
    .view-profile-modal .inner-modal {
        transform: none !important;
        top: auto !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
        margin: 4vh auto !important;
    }
    .view-profile-modal .modal-content {
        height: auto !important;
        min-height: min(500px, 88vh) !important;
    }

    /* SITE NAV — flex-wrap so the last menu item never clips. */
    .site nav,
    .site nav ul {
        flex-wrap: wrap !important;
    }
    .site nav ul {
        margin: 20px 16px !important;
        gap: 12px 20px !important;
    }
}

/* ROUND 5 (2026-06-05 #18 — REMOVED in round 5 #19) — KDAP2-4860
 * pie chart tooltip Esc dismissal.
 *
 * The previous round (#18) added a CSS block here that hid
 * `.google-visualization-tooltip` while <body> carried the flag
 * class `kfin-pie-tooltip-dismissed`. That rule REQUIRED Google
 * Charts to be in HTML-tooltip mode (`tooltip: { isHtml: true }`
 * in js/index.js), because the default SVG-tooltip rendering
 * uses an unmarked SVG `<g>` group with no class hook for CSS
 * to target.
 *
 * Maintainer reported via before/after screenshots that the
 * HTML-tooltip rendering (image #2) had visibly bigger padding,
 * wrapped to three lines instead of two, and was overlapping
 * the chart's legend — a UI regression compared to the
 * original SVG tooltip (image #1). Per the standing
 * "preserve UI" rule, that change had to be rolled back.
 *
 * Round 5 #19 (2026-06-05) reverts the chart back to SVG-
 * tooltip mode and re-implements the WCAG 1.4.13 Esc
 * dismissal in JS only (`navigation.js`), via synthetic
 * `mouseout` event dispatch on the chart's SVG paths
 * ("Approach B" from the original chat plan). Approach B
 * uses Google Charts' OWN tooltip-teardown path — when the
 * chart's internal listener receives a `mouseout`, it
 * removes the SVG tooltip naturally with no visual change.
 *
 * Net effect: the original SVG tooltip is back, AND Esc
 * still dismisses it. CSS in this file is no longer needed
 * for KDAP2-4860 — the entire fix lives in navigation.js.
 *
 * The CSS block that used to live here is removed entirely
 * to avoid confusion. See changed.txt entry "ROUND 5 —
 * KDAP2-4860 REVERT + RE-FIX (2026-06-05 #19)" for the full
 * audit, before/after screenshot link, and the reason
 * Approach B was the right path all along.
 */

/* ROUND 5 (2026-06-05 #20) — KDAP2-4860 anti-flicker hardening
 * for the pie chart Esc dismissal on /shareholding-pattern/.
 *
 * Maintainer reported on round 5 #19's first try that pressing
 * Esc with the mouse still hovering a slice produced a FLICKER —
 * the tooltip would briefly disappear and immediately reappear.
 *
 * ROOT CAUSE:
 *   The synthetic-mouseout dispatch in navigation.js correctly
 *   tells Google Charts to tear down the SVG tooltip via its
 *   own teardown path. BUT — real-world human hands have
 *   constant 1-2px tremors, and even the smallest mousemove
 *   re-fires Google Charts' real mouseover on the still-hovered
 *   slice, which immediately re-renders the tooltip a frame
 *   later. The user sees: tooltip vanishes → reappears → flicker.
 *
 * FIX:
 *   navigation.js stamps the class `kfin-pie-tooltip-dismissed`
 *   on <body> before dispatching the mouseout. THIS rule then
 *   sets `pointer-events: none` on every descendant of
 *   #pieChartDiv. Once that's in effect:
 *     - the chart's slices, paths, rects, and groups can no
 *       longer receive any pointer events from real mouse
 *       movement, no matter how much the hand tremors;
 *     - Google Charts has no mouseover signal to react to;
 *     - the tooltip stays gone for as long as the flag is set.
 *
 *   The wrapper element #pieChartDiv itself is NOT given
 *   pointer-events:none — only its descendants. That's
 *   important so the wrapper's `mouseleave` listener (in
 *   navigation.js) still fires when the user genuinely walks
 *   away from the chart, which clears the flag and restores
 *   normal hover behavior on subsequent re-entry.
 *
 * SCOPE / NON-INTERFERENCE:
 *   - Applies ONLY to #pieChartDiv descendants — every other
 *     interactive element on the page (legend if rendered
 *     outside the chart, table, nav, modals, map pins on
 *     other pages, etc.) is untouched.
 *   - Round 5 #14 (KDAP2-4848/4846/4844 pie chart slice colors)
 *     unaffected — colors are inline `fill="#XXXXXX"` on
 *     <path>, not influenced by pointer-events.
 *   - Round 5 #15 (KDAP2-4779 map-pin tooltip): different
 *     selector tree (.geography_dot a), different page. ✅
 *   - Round 5 #1 (KDAP2-4724 modal Esc): modal handler reads
 *     .view-profile-modal:visible; different state, no
 *     conflict. ✅
 *
 * NOT A REINTRODUCTION OF ROUND 5 #18:
 *   Round 5 #18 was reverted because it forced the chart into
 *   HTML-tooltip mode (visible UI regression). Round 5 #20
 *   does NOT change the chart's tooltip rendering at all — the
 *   tooltip remains the original SVG `<g>` group from round
 *   5 #19. The flag class only governs runtime pointer-events
 *   behavior on chart descendants. UI is preserved exactly.
 */
body.kfin-pie-tooltip-dismissed #pieChartDiv * {
    pointer-events: none !important;
}

/* ROUND 5 (2026-06-05 #21, REVISED 2026-06-07 #22) —
 * Maintainer request: blue background on the FIRST (header)
 * row of the shareholding pattern table.
 *
 * Page: /shareholding-pattern/.
 * Source: Shareholding_Pattern.txt line 22 — the table is
 * inside `.share-holding-pattern-table` (the WP column
 * wrapper) and uses class `analyst-table` (the figure-of-
 * table). Its `<thead>` contains a single `<tr>` with three
 * `<th scope="col">` cells: "Category", "No. Of Shares",
 * "Percentage". Maintainer's intent confirmed in chat as the
 * topmost visible row (the `<thead>` row).
 *
 * COLOR HISTORY:
 *   #21 (2026-06-05) shipped #0073cc (the same brand blue
 *       used by round 5 #9 .location-description). On
 *       2026-06-07 the maintainer sent a new screenshot
 *       (ref: image-7036f31b) showing the desired look — a
 *       considerably DARKER, more-navy header band that
 *       stands out as a "table chrome" rather than a bright
 *       brand-colour stripe. The bright #0073cc was
 *       therefore retired in favour of #14385C (round 5 #22
 *       below).
 *
 * COLOR CHOICE: #14385C — dark navy. RGB(20, 56, 92).
 * Closest visual match to the maintainer's screenshot.
 * Contrast against the table's default white text:
 *
 *   #14385C  L  ≈ 0.0372   (white text)
 *   #ffffff  L  = 1.0
 *   Contrast = (1.0 + 0.05) / (0.0372 + 0.05)
 *            = 1.05 / 0.0872
 *            ≈ 12.0 : 1   PASS (≥ 7.0:1, AAA tier)
 *
 * Both rules emit `!important` to override the existing
 * `.analyst-table tr:not(:first-child) td:nth-child(2n)`
 * subtle alternating-row background that ships with the
 * compiled style.css. The `tr` selector AND the per-cell
 * `tr th` selector are both included so the navy covers the
 * entire row uniformly even if any inherited td/th styling
 * later overrides one or the other.
 *
 * SCSS source (statutory-disclosures.scss / home.scss) NOT
 * touched per the no-build-pipeline policy — overrides only,
 * matching the round 5 #11 (KDAP2-4717) pattern for
 * shareholding-pattern table fixes.
 */


/* ROUND 5 (2026-06-07 #22) — Maintainer request follow-up:
 * neutralize the per-cell alternating-row tint on the
 * shareholding pattern table so all body rows render with
 * a single uniform background.
 *
 * BACKGROUND:
 *   The compiled `style.css` ships a SCSS-built rule from
 *   `scss/statutory-disclosures.scss` that gives the EVEN
 *   cells of every NON-first <tr> a faint white tint:
 *
 *     .analyst-table tr:not(:first-child) td:nth-child(2n) {
 *         background: rgba(230, 231, 243, 0.08);
 *     }
 *
 *   On most pages this is fine — it adds a subtle "zebra"
 *   to long data tables. But the maintainer's screenshot
 *   for /shareholding-pattern/ (image-7036f31b, 2026-06-07)
 *   shows ALL body rows rendering with the SAME background
 *   colour — no zebra at all — pairing visually with the
 *   new dark navy header.
 *
 * THE OVERRIDE:
 *   Same selector chain, scoped tighter (added the
 *   `.share-holding-pattern-table` ancestor so other pages
 *   that use `.analyst-table` keep their zebra). Sets the
 *   background back to `transparent` so each body cell
 *   inherits the column wrapper's dark base
 *   (`#e6e7f31a` ≈ a very subtle white tint over the page
 *   background) uniformly.
 *
 * SCOPE / NON-INTERFERENCE:
 *   - `.share-holding-pattern-table` is the WordPress column
 *     wrapper around THIS table only (Shareholding_Pattern
 *     .txt line 18). No other page mounts that class. ✅
 *   - Round 5 #11 (KDAP2-4717) overrides for
 *     `.share-holding-pattern-table .analyst-table
 *     th[scope="row"]` target the LEFTMOST <th> cells
 *     (Promoters / Mutual Funds / etc.), NOT <td>
 *     `nth-child(2n)`. Different cells, no overlap. ✅
 *   - The new round-5-#22 thead navy rule above sets its
 *     own background, so the transparent override below
 *     does NOT affect the header row. ✅
 *   - Other pages using `.analyst-table` (statutory-
 *     disclosures, etc.) keep the zebra because the
 *     selector here requires `.share-holding-pattern-
 *     table` as ancestor. ✅
 */
.share-holding-pattern-table .analyst-table tr:not(:first-child) td:nth-child(2n) {
    background: transparent !important;
}

/* ROUND 5 #23 (2026-06-07) — KDAP2 Solutions/Products mega-menu
 * Esc dismissibility (WCAG 1.4.13 Content on Hover or Focus).
 *
 * SCOPE / SURFACE:
 *   The corporate kfintech.com top-bar (rendered above our local
 *   <header id="masthead">) ships a "Solutions" / "Products" /
 *   "About Us" / "Portfolio Companies" mega-menu. Its dropdown
 *   panel uses class `.dropdown-outer` (referenced by our
 *   existing JS at navigation.js line 438) and is shown via
 *   the corporate stylesheet's `:hover` rule on the wrapper
 *   `.solution-header / .products-header`.
 *
 * MAINTAINER REQUEST (2026-06-07):
 *   "the dropdown should appear and disappear on hover - as it
 *    is now and also it should be dissmissable if the user
 *    clicks esc but again work on hover"
 *
 *   I.e. preserve the existing hover-open / hover-close UX,
 *   add Esc dismissal on top, and after Esc the next genuine
 *   hover should re-engage normally.
 *
 * WHY .dropdown-force-hide ALONE WAS INSUFFICIENT:
 *   The existing Esc handler in handleHeaderInteractions()
 *   already calls `.addClass("dropdown-force-hide")` on
 *   `.sub-menu, .dropdown-outer`. That class hides via
 *   opacity / visibility / pointer-events. On most surfaces
 *   it works, BUT:
 *     - if the corporate stylesheet uses `display: block` or
 *       a `transform` to show the panel, our opacity/visibility
 *       overrides leave a visible / clickable phantom;
 *     - the `mouseenter` handler on `.menu, .nav-item` (line
 *       480) clears `.dropdown-force-hide` on the next
 *       mouseenter, so even if dismissal "worked" for one
 *       paint frame, any tremor mousemove → :hover repaint
 *       cycle re-shows the panel — the same flicker pattern
 *       round 5 #20 (KDAP2-4860 pie chart) had to solve.
 *
 * THE FIX:
 *   navigation.js stamps `kfin-mega-dismissed` on <body> when
 *   Esc is pressed AND a mega-menu wrapper is currently
 *   engaged (`:hover` OR contains `document.activeElement`).
 *   THIS rule then takes over: every `.dropdown-outer` inside
 *   any of the four mega-menu wrappers gets
 *   `display: none !important`. That's strictly stronger than
 *   `.dropdown-force-hide` and impossible for any corporate
 *   `:hover` rule to defeat, regardless of what visibility
 *   property the corporate CSS uses.
 *
 *   Crucially the flag is BODY-level, not per-element. Tremor
 *   mousemoves on `.nav-item` can't undo it (the existing
 *   mouseenter handler only removes `.dropdown-force-hide`,
 *   not the body class). Only mouseleave / focusout from the
 *   wrapper (registered as IIFEs at the bottom of
 *   navigation.js round 5 #23 block) removes the body class —
 *   genuine departure required.
 *
 * HOVER-OPEN STILL WORKS:
 *   When the body flag is NOT set, this rule doesn't match
 *   anything → the corporate CSS hover-open behaviour ships
 *   exactly as today. The fix is invisible during normal
 *   interaction; it only kicks in for the brief window between
 *   "user pressed Esc" and "user moved off the wrapper".
 *
 * WHY NOT JUST EXTEND .dropdown-force-hide:
 *   Adding `display: none !important` to .dropdown-force-hide
 *   directly would change behaviour for click-toggle dropdowns
 *   on the LOCAL nav (Quick Links, Statutory Disclosures,
 *   Dividend, More) — those rely on .dropdown-force-hide being
 *   `mouseenter`-clearable. The body-flag approach keeps the
 *   strong override surgical to the post-Esc window only.
 *
 * NON-INTERFERENCE:
 *   - Round 5 #20 (KDAP2-4860 pie chart): different flag class
 *     (`kfin-pie-tooltip-dismissed` vs. `kfin-mega-dismissed`),
 *     different selector tree (#pieChartDiv vs. mega-menu
 *     wrappers). ✅
 *   - Round 5 #15 (KDAP2-4779 map tooltip): per-element class
 *     `.kfin-tooltip-dismissed` on `.geography_dot a`.
 *     Different scope, different page. ✅
 *   - Round 5 #1 (KDAP2-4724 modal Esc): modal handler only
 *     fires when `.view-profile-modal:visible` — mutually
 *     exclusive with mega-menu hover. ✅
 *   - Existing `.dropdown-force-hide` rule above (line 105):
 *     untouched. Works in tandem during the post-Esc window
 *     for any belt-and-braces effect.
 *
 * IMPORTANT — SELECTOR INFERRED, NOT CONFIRMED:
 *   The corporate top-bar's exact class names are not in this
 *   repo's source. The selectors here are inferred from the
 *   existing JS reference at navigation.js line 438
 *   (`.solution-header, .products-header`) and from standard
 *   Bootstrap-style mega-menu conventions (`.nav-item`,
 *   `.dropdown-outer`). If the live DOM uses different class
 *   names (e.g. `.mega-menu`, `.dropdown-menu`, `.has-megamenu`),
 *   this rule simply won't match anything — no breakage, just
 *   no fix. In that case the maintainer should inspect the
 *   live DOM (right-click "Solutions" → Inspect, copy the
 *   wrapper class) and broaden the selector list below.
 */
/* ROUND 5 #30 (2026-06-08): NARROWED scope from {corporate, local-nav}
 * to corporate-only. The `.nav-item .dropdown-outer / .sub-menu` and
 * `.menu .dropdown-outer / .sub-menu` selectors were defensive
 * back-stops added in round 5 #23 when the corporate top-bar DOM was
 * unknown. They turned out to be the root cause of the Tab -> Enter ->
 * Esc -> Enter -> "local nav menu stays hidden" bug: pressing Esc with
 * focus inside the local .menu stamped body.kfin-mega-dismissed, which
 * this rule then used to slap `display: none !important` on the local
 * .menu .sub-menu — outranking the `.sub-menu.active` rule that the
 * next Enter triggers via index.js:3. Net result: the menu's .active
 * class was on, but the menu was visually hidden.
 *
 * The JS engagement check in navigation.js (round 5 #30 companion) is
 * ALSO narrowed to .solution-header / .products-header only, so the
 * flag now stamps only for genuinely corporate Esc events. Belt + braces:
 * even if the flag somehow got stamped by a code path we missed, this
 * narrower CSS scope ensures local nav .sub-menu is never touched by
 * the flag again.
 */
body.kfin-mega-dismissed .solution-header .dropdown-outer,
body.kfin-mega-dismissed .products-header .dropdown-outer,
body.kfin-mega-dismissed .solution-header .sub-menu,
body.kfin-mega-dismissed .products-header .sub-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ======================================================================
 * ROUND 5 #24 (2026-06-07) — KDAP2 Solutions/Products mega-menu
 * keyboard reachability + focus visibility (WCAG 2.1.1 Keyboard,
 * WCAG 2.4.7 Focus Visible).
 *
 * WHAT THIS FIXES
 * ---------------
 * The corporate top-bar's Solutions / Products triggers reveal their
 * mega-menu PURELY via CSS `:hover`. Before this rule, a keyboard-only
 * user tabbing through the page could focus the trigger but the panel
 * stayed `display: none` — so the 7 categories inside (Mutual Fund
 * Solutions, Corporate Registry, etc.) were unreachable by Tab. This
 * is the WCAG 2.1.1 Keyboard violation flagged by the maintainer
 * (NVDA Speech Viewer screenshot, 2026-06-07).
 *
 * The companion `:focus-visible` rule paints a 2px brand-blue outline
 * around the trigger when it receives keyboard focus (WCAG 2.4.7).
 *
 * SPECIFICITY MATH
 * ----------------
 * `:focus-within` rule:
 *   .solution-header:focus-within .dropdown-outer  → (0,3,0)
 * Round 5 #23 dismissibility rule (above):
 *   body.kfin-mega-dismissed .solution-header .dropdown-outer → (0,3,1)
 *
 * The dismissibility rule wins (one extra element selector for `body`),
 * so Esc still beats focus-within and the dropdown stays hidden after
 * Esc — even with focus still on the trigger. ✅
 *
 * `:focus-visible` was chosen over `:focus` so the outline only appears
 * for genuine keyboard focus (Tab key), not for mouse clicks — matching
 * the WCAG 2.4.7 intent and avoiding visual noise for mouse users.
 *
 * NON-INTERFERENCE / CROSS-FIX AUDIT
 * ----------------------------------
 *   - Hover-open / hover-close behavior: untouched. The corporate
 *     `:hover` rule still fires; this just adds a parallel
 *     `:focus-within` path for keyboard users.
 *   - Round 5 #23 Esc dismissibility: still wins on specificity; Esc
 *     hides the panel regardless of focus state.
 *   - Round 5 #20 pie chart Esc dismissal: different DOM tree
 *     (#pieChartDiv vs. corporate top-bar). No interference.
 *   - Round 5 #1 modal Esc: modal covers the page when open; mega-
 *     menu is hidden by the modal overlay. Mutually exclusive.
 *   - Local nav (Quick Links, Statutory Disclosures, Dividend, More):
 *     uses different wrapper classes (.nav-item / .main-navigation .menu).
 *     Selector here is keyed to `.solution-header / .products-header`
 *     specifically — local nav unaffected. ✅
 *
 * CAVEAT
 * ------
 * Selectors are inferred from the existing JS reference at
 * navigation.js:438 (`.solution-header / .products-header / .dropdown-outer`).
 * If the live corporate DOM uses different class names, this rule
 * matches nothing — no breakage, just no fix. Maintainer should
 * inspect the live DOM and broaden the selector list if so.
 * ====================================================================== */
.solution-header:focus-within .dropdown-outer,
.products-header:focus-within .dropdown-outer,
.solution-header:focus-within .sub-menu,
.products-header:focus-within .sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.solution-header > a:focus-visible,
.products-header > a:focus-visible,
.solution-header > div > a:focus-visible,
.products-header > div > a:focus-visible {
    outline: 2px solid #0073cc;
    outline-offset: 4px;
    border-radius: 2px;
}

/* ======================================================================
 * ROUTING RULE FOR THIS FILE (round 5 #28 + #29, 2026-06-08)
 * ----------------------------------------------------------------------
 * Maintainer-set policy:
 *
 *   1. If a fix can EXTEND or MODIFY an existing rule in style.css /
 *      scss/*.scss without breaking what that rule already does,
 *      edit the source file in place (and patch style.css manually
 *      if the SCSS build isn't being run). Do NOT add to this file.
 *
 *   2. If the fix is genuinely NEW behaviour with no existing rule
 *      to extend cleanly, add it here. This file (and custom.js) is
 *      the override layer enqueued at priority 999 so additions
 *      always win cascade / load order.
 *
 * Practical guide: visual rules that have a design-system home
 * (typography, layout, colors that match the existing palette)
 * almost always belong in scss/. Runtime-only flag classes whose
 * meaning is driven by JavaScript (dismissal flags, focus traps,
 * keyboard fallbacks) belong here because they have no design-time
 * source-of-truth.
 *
 * CURRENT RESIDENTS OF THIS FILE THAT BELONG HERE
 * (each one is JS-driven and has no SCSS counterpart):
 *
 *   - .dropdown-force-hide
 *       Stamped by navigation.js Esc handler + cleared by mouseenter
 *       /focusin. Used for local nav AND corporate mega-menu
 *       dismissal. Rounds 5 #20-#27.
 *
 *   - body.kfin-mega-dismissed
 *       Corporate mega-menu Esc-dismiss flag. Cleared on mouseout
 *       /focusout of the wrapper. Round 5 #23/#24.
 *
 *   - body.kfin-pie-tooltip-dismissed (+ ancestor selectors)
 *       Shareholding-Pattern Google Chart pie-tooltip Esc dismiss.
 *       Round 5 #20.
 *
 *   - .kfin-tooltip-dismissed (on .geography_dot a)
 *       Geographical-Presence custom-CSS tooltip Esc dismiss.
 *       Round 5 (KDAP2-4779).
 *
 *   - :focus-within / :focus-visible rules for corporate mega-menu
 *       Net-new keyboard-reveal behaviour; no pre-existing rule on
 *       the corporate top-bar to extend. Round 5 #24.
 *
 * MIGRATED OUT (round 5 #28 — was here, now lives in scss/style.css):
 *
 *   - .main-navigation .menu > li > button.menu-trigger
 *     (+ :hover companion). Now in scss/header.scss next to the
 *     existing `.site nav li a` rule it parallels.
 *
 * ====================================================================== */