/* =============================================================================
   HEADER MEGA PANELS  —  assets/css/megamenu.css
   =============================================================================
   The desktop dropdown panels only. Everything that paints a .mm-drop now lives
   in this one file; it used to be spread across design-system.css (§16g),
   premium.css and ui.css, which is how the panel ended up with three competing
   icon-tile treatments and a set of !important rules written to beat the other
   two files.

   NOT in this file, deliberately:
     * the header bar itself (.mm-bar / .mm-bar-link)  — design-system.css
     * the mobile drawer (.mm-panel / .mm-acc / .mm-link) — design-system.css
     * the breakpoint guards that hide the bar below 1024px and the panels
       below it — design-system.css, so the site still degrades correctly if
       this file ever fails to load
     * the overlay stacking order (.mm-drop z-index) — design-system.css §"overlays"

   Loaded from includes/header.php AFTER design-system.css, so equal-specificity
   rules here win without any !important.

   Hooks main.js relies on and that must not change: [data-mm-drop] on the bar
   button resolves the panel by id; the panel carries .mm-drop and
   data-mm-dropdown; the script toggles [hidden] and .is-open and writes
   `style.top` to pin the panel under the header.
   ========================================================================== */

@media (min-width: 1024px) {

/* ---------------------------------------------------------------- the panel
   Full-bleed band under the header. `top` is written by main.js from the live
   header height, so it is not set here. max-height/overflow are the guard the
   old rules never had: a tall panel on a short laptop screen used to run off
   the bottom of the viewport with no way to reach the last row. */
.mm-drop {
    position: fixed;
    left: 0;
    right: 0;
    background: var(--surface, #fff);
    border-top: 1px solid color-mix(in srgb, var(--primary, #0B4E3D) 12%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--primary, #0B4E3D) 10%, transparent);
    /* Elevation, not glow: a single soft drop shadow beneath the band. */
    box-shadow: 0 24px 48px -28px rgba(11, 45, 35, .34);
    max-height: calc(100vh - var(--header-h, 74px));
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity var(--dur, .3s) var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
                transform var(--dur, .3s) var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}
.mm-drop.is-open { opacity: 1; transform: translateY(0); }

/* Rail beside content. minmax(0, 1fr) on the second track, not plain 1fr:
   a grid item defaults to min-content width, so a long description would
   otherwise push the columns wider than the container and give the page a
   horizontal scrollbar. */
.mm-drop-inner {
    display: grid;
    grid-template-columns: minmax(228px, 264px) minmax(0, 1fr);
    gap: clamp(1.25rem, 2.4vw, 2.5rem);
    align-items: start;
    padding-block: clamp(1.4rem, 2.1vw, 2.1rem);
}

/* ------------------------------------------------------------------ the rail
   The section's own identity: what this group is, in the one sentence the tree
   already stores as 'blurb', and the link that covers all of it. */
.mm-rail {
    display: grid;
    align-content: start;
    gap: .5rem;
    padding: 1.15rem 1.15rem 1.05rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--primary, #0B4E3D) 13%, transparent);
    background:
        linear-gradient(162deg,
            color-mix(in srgb, var(--primary, #0B4E3D) 9%, transparent) 0%,
            color-mix(in srgb, var(--primary, #0B4E3D) 3%, transparent) 100%);
}
.mm-rail-ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--primary, #0B4E3D);
    color: #fff;
}
.mm-rail-ico > svg,
.mm-rail-ico > i { width: 21px; height: 21px; display: block; }

.mm-rail-title {
    margin: .2rem 0 0;
    font-size: 1.06rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--text, #0B4E3D);
}
.mm-rail-blurb {
    margin: 0;
    font-size: .845rem;
    line-height: 1.55;
    color: var(--muted, #4B6754);
}

/* The rail's closing call to action — the "featured" slot at its foot.
   Selected as `.mm-drop a.mm-rail-all`, not `.mm-rail-all`: tailwind.css carries
   `:root[data-theme="dark"] a { color: var(--brand-600) }` at specificity
   (0,2,1), which beat a bare class and painted this label the same green as its
   own background — an invisible button for anyone using the site's dark theme.
   (0,2,1) here ties that, and megamenu.css loads later, so it wins on order
   rather than on !important. */
.mm-drop a.mm-rail-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-top: .45rem;
    padding: .62rem .85rem;
    border-radius: 11px;
    background: var(--primary, #0B4E3D);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--dur-fast, .18s) var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}
.mm-drop a.mm-rail-all:hover,
.mm-drop a.mm-rail-all:focus-visible {
    /* Stays in the brand green — darker, not a different hue. */
    background: color-mix(in srgb, var(--primary, #0B4E3D) 84%, #000);
    color: #fff;
}
.mm-rail-all:focus-visible { outline: 2px solid var(--primary, #0B4E3D); outline-offset: 2px; }
.mm-rail-arrow { display: inline-grid; place-items: center; flex: none; }
.mm-rail-arrow > svg,
.mm-rail-arrow > i {
    width: 16px; height: 16px; display: block;
    transition: transform var(--dur, .3s) var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}
.mm-rail-all:hover .mm-rail-arrow > svg { transform: translateX(3px); }

/* --------------------------------------------------------------- the columns
   auto-fit at a 250px floor gives three columns inside a 1200px container and
   two once the container narrows, without a separate media query per width.
   Still a <ul>: the count a screen reader announces is worth keeping. */
.mm-drop-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: .15rem .4rem;
}

.mm-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .7rem;
    height: 100%;
    padding: .62rem .7rem;
    border: 1px solid transparent;
    border-radius: 13px;
    color: inherit;
    text-decoration: none;
    transition: background-color var(--dur-fast, .18s) var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
                border-color var(--dur-fast, .18s) var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
                transform var(--dur-fast, .18s) var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}
/* Hover moves 1px and changes a background. Nothing slides, nothing lifts off
   the panel — a menu that reflows under the cursor is hard to aim at. */
.mm-tile:hover { background: color-mix(in srgb, var(--primary, #0B4E3D) 7%, transparent); transform: translateY(-1px); }
.mm-tile:focus-visible { outline: 2px solid var(--primary, #0B4E3D); outline-offset: -2px; }

.mm-tile-ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--primary, #0B4E3D) 10%, transparent);
    color: var(--primary, #0B4E3D);
    transition: background-color var(--dur-fast, .18s) var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
                color var(--dur-fast, .18s) var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}
.mm-tile-ico > svg,
.mm-tile-ico > i { width: 19px; height: 19px; display: block; }
.mm-tile:hover .mm-tile-ico { background: var(--primary, #0B4E3D); color: #fff; }

.mm-tile-txt { display: block; min-width: 0; }
.mm-tile-label {
    display: block;
    font-size: .925rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text, #0B4E3D);
}
.mm-tile-desc {
    display: block;
    margin-top: .12rem;
    font-size: .785rem;
    line-height: 1.45;
    color: var(--muted, #4B6754);
}

/* Current page. mega_is_active() computes this; the tile just has to show it.
   Signalled by the tint, the border and the filled icon — NOT by recolouring
   the label. The obvious choice, --accent-ink, measures 4.50:1 on this tint
   under the live theme, i.e. exactly on the AA line, and --accent is admin
   editable in the Theme Engine, so any lighter pick would push the one label
   that matters most below it. Keeping --text leaves it the most legible line
   in the panel and the state is still carried by aria-current="page". */
.mm-tile.is-active {
    background: color-mix(in srgb, var(--primary, #0B4E3D) 9%, transparent);
    border-color: color-mix(in srgb, var(--primary, #0B4E3D) 30%, transparent);
}
.mm-tile.is-active .mm-tile-ico { background: var(--primary, #0B4E3D); color: #fff; }
.mm-tile.is-active .mm-tile-label { font-weight: 800; }

/* ------------------------------------------------------------------ widths
   1024–1279. The floor goes UP, not down: at 1024 a 224px floor still fitted
   three columns, and "Community Coordinator" and "Kanya Daan Registration" both
   wrapped inside them. 240px keeps three columns down to ~1080 and then drops
   cleanly to two roomy ones, which is the readable answer on a 1024 laptop. */
@media (max-width: 1279px) {
    .mm-drop-inner { grid-template-columns: minmax(210px, 240px) minmax(0, 1fr); gap: 1.25rem; }
    .mm-drop-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .mm-rail { padding: 1rem; }
    .mm-rail-title { font-size: 1rem; }
    .mm-tile { padding: .55rem .6rem; gap: .6rem; }
    .mm-tile-ico { width: 36px; height: 36px; }
}

/* Short viewports: the panel scrolls rather than reaching past the fold. */
@media (max-height: 620px) {
    .mm-drop-inner { padding-block: 1.1rem; }
}

}   /* /@media (min-width: 1024px) */

/* ------------------------------------------------------------ reduced motion
   Every transition introduced above, switched off in one place. */
@media (prefers-reduced-motion: reduce) {
    .mm-drop,
    .mm-tile,
    .mm-tile-ico,
    .mm-rail-all,
    .mm-rail-arrow > svg { transition: none; }
    .mm-tile:hover { transform: none; }
    .mm-rail-all:hover .mm-rail-arrow > svg { transform: none; }
}