/**
 * @file
 * Mega menu: backdrop, rail, panels, columns, promo card, news cards.
 *
 * Extracted from stuff/phi-menu-mockup-008-D-Home-Menu.html. The mockup wins
 * on any disagreement — re-extract rather than patching here.
 *
 * Design tokens live in global.css and are not redeclared.
 */

/* MEGA MENU */
/* --header-bottom is the live bottom edge of .main-header, written by
   mega-menu.js. One variable covers the admin toolbar offset, the utility bar
   height and the docked/undocked state, so the menu always hangs off the
   header wherever it currently is. The fallback matches the default layout. */
.mega-backdrop {
    /* Explicit display so it overrides the critical-CSS display:none in
       html.html.twig once this file loads. */
    display: block;
    position: fixed; top: var(--header-bottom, 116px); left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.22);
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 999;
}
.mega-backdrop.visible { opacity: 1; visibility: visible; }
.mega-menu {
    /* Explicit display so it overrides the critical-CSS display:none in
       html.html.twig once this file loads. */
    display: block;
    position: fixed; top: var(--header-bottom, 116px); left: 0; right: 0;
    background: var(--white);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12); z-index: 1002;
    transform: translateY(-6px); opacity: 0; visibility: hidden;
    transition: transform 0.3s var(--ease), opacity 0.25s ease, visibility 0.25s ease;
    max-height: calc(100vh - var(--header-bottom, 116px)); overflow-y: auto;
}
.mega-menu.open { transform: translateY(0); opacity: 1; visibility: visible; }
.mega-inner {
    max-width: var(--container); margin: 0 auto; padding: 36px 24px 40px;
    display: grid; gap: 36px;
}
/* Column counts are driven by how many columns the menu actually has, so
   adding a column in the menu UI needs no CSS change. */
.mega-inner.cols-1 { grid-template-columns: 1fr 280px; }
.mega-inner.cols-2 { grid-template-columns: 1fr 1fr 280px; }
.mega-inner.cols-3 { grid-template-columns: 1fr 1fr 1fr 280px; }
.mega-inner.cols-4 { grid-template-columns: repeat(4, 1fr) 280px; }

/* ========== RAIL + PANELS ========== */
.mega-rail-outer {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}
.mega-rail-layout {
    display: grid;
    grid-template-columns: 220px 1fr 1fr auto;
    gap: 0;
    min-height: 380px;
}
.mega-rail {
    background: var(--phi-secondary);
    border-right: 1px solid var(--phi-gray-200);
    padding: 28px 0;
    display: flex; flex-direction: column; gap: 2px;
}
/* ========== MEGA MENU LABEL TYPE SCALE ==========
   Two tiers only, so the panels read as one system:
     Tier A "section heading"  13.5px / 700 / uppercase / 0.06em / --phi-dark
             (always paired with an 18px orange icon)
     Tier B "eyebrow label"    11px   / 700 / uppercase / 0.09em / --phi-gray-400
   Every label sets its own line-height: the theme's
   --bs-body-line-height (1.75rem = 28px) applies to these small labels
   otherwise, which both loosens them and — where an icon sits beside the
   text — throws the icon out of alignment with the glyphs. */
.mega-rail-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--phi-gray-400);
    line-height: 1.15;
    padding: 0 20px 10px;
}
.mega-rail-item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 20px; margin: 0 8px;
    border-radius: 7px; border: none; background: none;
    cursor: pointer; text-align: left; width: calc(100% - 16px);
    font-family: var(--display-font);
    font-size: 15px; font-weight: 600; color: var(--phi-gray-800);
    text-decoration: none; line-height: 1.35;
    transition: all 0.18s ease; position: relative;
}
.mega-rail-item:hover { background: var(--white); color: var(--phi-orange); }
.mega-rail-item.active { background: var(--white); color: var(--phi-orange); box-shadow: 0 1px 6px rgba(0,0,0,0.07); }
.mega-rail-item.active::after {
    content: ''; position: absolute; right: -9px; top: 50%;
    transform: translateY(-50%);
    border-top: 7px solid transparent; border-bottom: 7px solid transparent;
    border-left: 8px solid var(--white);
}
.mega-rail-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--phi-orange); opacity: 0.6; }
.mega-rail-item.active svg, .mega-rail-item:hover svg { opacity: 1; }
.mega-rail-count {
    margin-left: auto; font-size: 11px; font-weight: 700;
    background: var(--phi-orange-light); color: var(--phi-orange);
    padding: 2px 7px; border-radius: 10px; flex-shrink: 0;
}
.mega-rail-item.active .mega-rail-count { background: var(--phi-orange); color: white; }
.mega-rail-item .arr {
    margin-left: auto; opacity: 0; transform: translateX(-4px);
    transition: all 0.18s ease; color: var(--phi-orange); font-size: 14px;
}
.mega-rail-item:hover .arr,
.mega-rail-item.active .arr { opacity: 1; transform: translateX(0); }
.mega-rail-divider { height: 1px; background: var(--phi-gray-200); margin: 6px 20px; }
.mega-rail-footer {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 20px; margin: 0 8px; border-radius: 7px;
    text-decoration: none; font-family: var(--display-font);
    font-size: 13px; font-weight: 700; color: var(--phi-orange);
    text-transform: uppercase; letter-spacing: 0.05em; transition: background 0.18s ease;
    white-space: nowrap;
}
.mega-rail-footer svg { margin-left: auto; flex-shrink: 0; }
.mega-rail-footer:hover { background: var(--phi-orange-light); }

/* No promo card: the panels take the remaining track. Eco-Solutions relies on
   this — the layout must not collapse when field_promo is empty. */
.mega-rail-layout--no-promo { grid-template-columns: 240px 1fr; }
.mega-rail-layout--no-promo .mega-panels { grid-column: auto; border-right: none; }

.mega-panels {
    position: relative;
    border-right: 1px solid var(--phi-gray-200);
    grid-column: span 2;
}
.mega-panel { display: none; padding: 28px 24px 28px 28px; }
.mega-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.mega-panel-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--phi-gray-400);
    line-height: 1.15;
    padding: 0 10px 8px; border-bottom: 1px solid var(--phi-gray-200);
    margin-bottom: 8px; grid-column: 1 / -1;
}
.mega-panel ul { list-style: none; margin: 0; padding: 0; }
.mega-panel li { margin-bottom: 1px; }
.mega-panel a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-radius: 6px;
    text-decoration: none; color: var(--phi-gray-800);
    font-size: 15px; font-weight: 500; transition: all 0.18s ease;
}
.mega-panel a:hover { background: var(--phi-secondary); color: var(--phi-orange); padding-left: 14px; }
.mega-panel a .arr {
    opacity: 0; transform: translateX(-4px);
    transition: all 0.18s ease; color: var(--phi-orange); font-size: 14px; flex-shrink: 0;
}
.mega-panel a:hover .arr { opacity: 1; transform: translateX(0); }
.mega-panel .sub-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--phi-gray-400);
    padding: 12px 10px 6px; margin-top: 4px;
}

/* Depth-3 links inside a flat panel. The mockup expressed this with inline
   styles on each <li>; the same treatment lives here as classes so the
   markup stays generated rather than hand-maintained. */
.mega-panel a.is-parent { font-weight: 600; color: var(--phi-dark); }
.mega-panel li.is-child { padding-left: 16px; }
.mega-panel li.is-child a { font-size: 14px; color: var(--phi-gray-600); }
.mega-panel li.is-child .down { color: var(--phi-gray-400); margin-right: 2px; }

.mega-promo {
    background: linear-gradient(145deg, var(--phi-dark), var(--phi-dark-600));
    border-left: 4px solid var(--phi-orange);
    border-radius: 12px;
    padding: 24px 22px;
    color: white;
    display: flex; flex-direction: column; justify-content: space-between;
    width: 220px;
    margin: 28px 24px 28px 12px;
    align-self: start;
}
/* Same eyebrow tier as .mega-featured-label; only the bottom margin differs
   because the promo card is the narrower of the two. */
.mega-promo .mega-featured-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--phi-orange); opacity: 0.9;
    line-height: 1.15; margin-bottom: 8px;
}
.mega-promo h3 {
    font-family: var(--display-font);
    font-size: 17px; font-weight: 700; line-height: 1.3; margin-bottom: 8px;
    color: white;
}
.mega-promo p { font-size: 15px; line-height: 1.5; opacity: 0.8; margin-bottom: 16px; }

.mega-panel-footer {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 16px; padding: 9px 14px; border-radius: 6px;
    background: var(--phi-orange-light); color: var(--phi-orange);
    text-decoration: none; font-size: 12.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    transition: all 0.2s ease; grid-column: 1 / -1;
}
.mega-panel-footer:hover { background: var(--phi-orange); color: white; }
.mega-panel-footer svg { width: 13px; height: 13px; }

/* ---- Contextual links (hover-to-edit pencils) ----
   The promo card and the news view are rendered from preprocess rather than as
   placed blocks, so they get their contextual links wired up in phi.theme.
   A positioned .contextual-region is what the contextual module anchors to. */
.mega-menu .contextual-region { position: relative; }
.mega-menu .contextual { z-index: 5; }
/* The pencil is dark-on-dark over the promo card; lift it so it stays visible. */
.mega-promo .contextual .trigger,
.mega-featured .contextual .trigger {
    background-color: var(--white);
    border-radius: 4px;
}
/* Contextual's own JS reveals these on hover; make sure nothing here clips them. */
.mega-promo, .mega-featured, .news-section { overflow: visible; }

/* Column styles */
.menu-col-header {
    display: flex; align-items: center; gap: 9px;
    margin-bottom: 6px; padding-bottom: 10px;
}
.menu-col-header svg { width: 18px; height: 18px; color: var(--phi-orange); flex-shrink: 0; }
.menu-col-header h4 {
    font-family: var(--display-font);
    font-size: 13.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--phi-dark);
    line-height: 1.15;
    margin: 0;
}
.menu-col ul, ul.menu-col { list-style: none; margin: 0; padding: 0; }
.menu-col li { margin-bottom: 1px; }
.menu-col a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 10px; border-radius: 6px;
    text-decoration: none; color: var(--phi-gray-800);
    font-size: 15px; font-weight: 500;
    transition: all 0.2s ease; line-height: 1.35;
}
.menu-col a:hover { background: var(--phi-secondary); color: var(--phi-orange); padding-left: 14px; }
.menu-col a .arr {
    opacity: 0; transform: translateX(-4px);
    transition: all 0.2s ease; color: var(--phi-orange); font-size: 15px; flex-shrink: 0;
}
.menu-col a:hover .arr { opacity: 1; transform: translateX(0); }
.menu-col.compact li { margin-bottom: 0; }
.menu-col.compact a { padding: 6px 10px; font-size: 14.5px; }

/* Featured card */
.mega-featured {
    background: linear-gradient(145deg, var(--phi-dark), var(--phi-dark-600));
    border-radius: 12px; padding: 28px 24px;
    color: white; display: flex; flex-direction: column;
    justify-content: space-between; min-height: 240px;
    border-left: 4px solid var(--phi-orange);
}
.mega-featured-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--phi-orange); opacity: 0.9;
    line-height: 1.15; margin-bottom: 10px;
}
.mega-featured h3 {
    font-family: var(--display-font);
    font-size: 21px; font-weight: 700; line-height: 1.3; margin-bottom: 10px;
    color: white;
}
.mega-featured p { font-size: 14.5px; line-height: 1.55; opacity: 0.8; margin-bottom: 20px; }
.mega-featured-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--phi-orange); font-size: 13px; font-weight: 700;
    text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em;
    /* Never wrap: the label and its arrow are one unit, and breaking between
       them leaves a lone arrow on a second line. */
    white-space: nowrap;
}
/* Colour pinned on hover: without it the theme's generic `a:hover` (#35939a,
   a legacy teal) overrode the orange and the CTA changed colour mid-hover. */
.mega-featured-link:hover,
.mega-featured-link:focus { color: var(--phi-orange); }

/* The arrow slides on a TRANSFORM, not by animating the gap. Growing the gap
   made the link 4px wider on hover, which was enough to tip it past its
   container and wrap the arrow onto a second line. A transform is painted, not
   laid out, so the link's width never changes and it cannot reflow.
   Matches .orange-link / .green-link in custom-classes.css. */
.mega-featured-link svg {
    width: 14px; height: 14px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.mega-featured-link:hover svg,
.mega-featured-link:focus svg { transform: translateX(4px); }

/* ---- Rail variant: plain (white rail, grey active pill) ----
   The supplied designs styled the Products rail and the Eco-Solutions rail
   differently. The brief flagged that as possibly unintentional, so ONE
   treatment (the filled rail above) is applied to every rail for consistency.
   This modifier is kept, unused, so the alternative is one class away — add
   `mega-rail--plain` in mega--rail-panels.html.twig to bring it back. */
.mega-rail--plain { background: var(--white); }
.mega-rail--plain .mega-rail-item:hover,
.mega-rail--plain .mega-rail-item.active {
    background: var(--phi-secondary); color: var(--phi-orange); box-shadow: none;
}
.mega-rail--plain .mega-rail-item.active::after { display: none; }

/* Rail heading with icon, as used on Eco-Solutions / About Us */
.mega-rail-label.with-icon {
    /* centre, not flex-start: with the 28px inherited line box the icon was
       landing 19px above the text's centre line. */
    display: flex; align-items: center; gap: 9px;
    line-height: 1.15;
    font-size: 13.5px; color: var(--phi-dark); letter-spacing: 0.06em;
    padding: 0 20px 14px;
}
.mega-rail-label.with-icon svg {
    width: 18px; height: 18px; color: var(--phi-orange); flex-shrink: 0;
}

/* ---- Panel style: grouped ----
   Each child becomes a column heading with its own children beneath.
   Default panel style is flat (see .mega-panel above). */
.mega-panel.mega-panel--grouped.active {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 40px;
    align-content: start;
}
/* Same tier as .mega-panel-label — both label a list of links inside a panel,
   so they must read identically (was 15px, sentence case, dark). */
.mega-panel-group-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--phi-gray-400);
    line-height: 1.15;
    padding: 0 10px 8px; margin-bottom: 8px;
    border-bottom: 1px solid var(--phi-gray-200);
}
.mega-panel--grouped ul { list-style: none; margin: 0; padding: 0; }
.mega-panel--grouped li { margin-bottom: 1px; }

/* ========== ABOUT US MEGA — news cards ========== */
.about-mega-grid {
    max-width: var(--container); margin: 0 auto; padding: 36px 24px 40px;
    display: grid; grid-template-columns: 200px 1fr; gap: 36px;
}
.about-links-col {
    padding-right: 16px;
    border-right: 1px solid var(--phi-gray-200);
}
.news-section { display: flex; flex-direction: column; }
/* The heading + "View More" link are supplied by the view's header area
   (news / block_4), so they render inside `.view-header`. The old
   `.news-section-header` selectors are kept alongside so any other menu that
   still hardcodes the markup keeps working. */
.news-section-header,
.news-section .view-header {
    display: flex; align-items: center; justify-content: space-between;
    /* Same box as .menu-col-header (10px padding + 6px margin = the 16px that
       used to be a bare margin), so this heading and "About PHI Heating" in the
       column beside it start on the same line. */
    padding-bottom: 10px;
    margin-bottom: 6px;
}
.news-section-header h4,
.news-section .view-header h4 {
    font-family: var(--display-font);
    font-size: 13.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--phi-dark);
    line-height: 1.15;
    display: flex; align-items: center; gap: 9px; margin: 0;
}
.news-section-header h4 svg,
.news-section .view-header h4 svg {
    width: 18px; height: 18px; color: var(--phi-orange); flex-shrink: 0;
}
/* This heading keeps its icon INSIDE the h4; the column heading opposite keeps
   it as a sibling of the h4. That makes the two boxes different heights however
   they are sized, so the boxes are not what gets matched here. Giving the text a
   line box the same height as the icon (18px, the height the opposite column's
   row takes from its own icon) centres both headings' glyphs on the same line,
   which is the thing the eye actually reads as aligned. */
.news-section .view-header h4 { line-height: 18px; }
/* The view header wraps its link in a <div>; keep it from stretching. */
.news-section .view-header > div { margin: 0; }
.news-section-header a,
.news-section .view-header a {
    font-size: 12px; font-weight: 700; color: var(--phi-orange);
    text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em;
    /* line-height matters as much as the size here: unstyled, this link kept
       the 28px body line-height and was the tallest thing in the row, which is
       what pushed the heading off the line in the first place. */
    line-height: 1.15;
    display: flex; align-items: center; gap: 4px; transition: gap 0.2s ease;
}
.news-section-header a:hover,
.news-section .view-header a:hover { gap: 8px; }
.news-section-header a svg,
.news-section .view-header a svg { width: 12px; height: 12px; }

/* The news view (news / block_4) renders its own wrappers. No new view was
   created and the view is not modified — these rules reach through its markup
   and give each .views-row the .news-card treatment, which is exactly the
   "match .news-card" the brief allows and no more. */
.news-cards .view-content {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;
}
.news-cards .views-row {
    display: flex; flex-direction: column;
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--phi-gray-200);
    background: var(--white);
    transition: all 0.25s ease;
}
.news-cards .views-row:hover {
    border-color: var(--phi-orange);
    box-shadow: 0 4px 16px rgba(245, 120, 32, 0.12);
    transform: translateY(-2px);
}
/* Image field -> .news-card-img */
.news-cards .views-field-field-news-image-media,
.news-cards .views-row .field-content.force3x2 { width: 100%; }
.news-cards .views-row img {
    width: 100%; object-fit: cover; display: block;
    background: var(--phi-secondary);
}
/* Text field -> .news-card-body */
.news-cards .views-field-nothing {
    padding: 14px 16px; flex: 1;
    font-size: 14px; line-height: 1.5; color: var(--phi-gray-600);
}
.news-cards .views-field-nothing a {
    font-family: var(--display-font);
    font-size: 15px; font-weight: 700; line-height: 1.35;
    color: var(--phi-dark); text-decoration: none; display: block;
    margin-bottom: 6px;
}
.news-cards .views-row:hover .views-field-nothing a { color: var(--phi-orange); }
/* The view's own "view more" footer, aligned with the mockup's View All. */
.news-cards .view-footer { grid-column: 1 / -1; margin-top: 4px; }
.news-cards .view-footer a {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; color: var(--phi-orange);
    text-transform: uppercase; letter-spacing: 0.05em;
    text-decoration: none; border: none; padding: 0;
}
.news-card {
    display: flex; flex-direction: column;
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--phi-gray-200);
    transition: all 0.25s ease; text-decoration: none; color: inherit;
    width: 100%;
}
.news-card:hover {
    border-color: var(--phi-orange);
    box-shadow: 0 4px 16px rgba(245, 120, 32, 0.12);
    transform: translateY(-2px);
}
.news-card-img {
    width: 100%; height: 140px; object-fit: cover;
    background: var(--phi-secondary);
}
.news-card-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; }
.news-card-date {
    font-size: 11.5px; font-weight: 600; color: var(--phi-orange);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
}
.news-card-title {
    font-family: var(--display-font);
    font-size: 15px; font-weight: 700; line-height: 1.35;
    color: var(--phi-dark); margin-bottom: 6px;
}
.news-card:hover .news-card-title { color: var(--phi-orange); }
.news-card-excerpt {
    font-size: 15px; line-height: 1.5; color: var(--phi-gray-600);
    flex: 1;
}

/* ---- Mobile: the same tree, stacked inline ----
   No duplicate markup. The mega menus stop being fixed overlays and become
   accordion content under their own trigger. */
/* ========== NARROW DESKTOP (<= 1100px) ==========
   Between the mega menu's switch point and ~1100px the bar is cramped: the
   promo cards ("Explore / Full Product Range", "Support / End-to-End Furnace
   Service") squeeze the rail and panels. Drop the cards and give their space
   back to the navigation itself. The cards are hidden, not removed, so nothing
   changes for editors — they reappear above 1100px. */
@media (max-width: 1100px) {
    .mega-promo,
    .mega-featured { display: none; }

    /* The cols-* grids reserve a fixed 280px track for the featured card.
       Reclaim it, or the columns keep an empty gutter. */
    .mega-inner.cols-1 { grid-template-columns: 1fr; }
    .mega-inner.cols-2 { grid-template-columns: 1fr 1fr; }
    .mega-inner.cols-3 { grid-template-columns: repeat(3, 1fr); }
    .mega-inner.cols-4 { grid-template-columns: repeat(4, 1fr); }

    /* rail_panels: drop the promo's trailing `auto` track and let the two
       panel columns take the width. */
    .mega-rail-layout { grid-template-columns: 220px 1fr 1fr; }
    .mega-rail-layout .mega-panels { border-right: none; }
}

@media (max-width: 1100px) {
    .nav-collapsed .mega-menu {
        position: static; max-height: none; overflow: visible;
        box-shadow: none; transform: none; opacity: 1; visibility: visible;
        display: none;
    }
    .nav-collapsed .mega-menu.open { display: block; }
    .nav-collapsed .mega-backdrop { display: none; }
    .nav-collapsed .mega-rail-layout,
    .nav-collapsed .mega-rail-layout--no-promo,
    .nav-collapsed .about-mega-grid,
    .nav-collapsed .mega-inner { grid-template-columns: 1fr; min-height: 0; gap: 0; }
    .nav-collapsed .mega-rail { border-right: none; }
    .nav-collapsed .mega-panels { border-right: none; }
    .nav-collapsed .mega-panel.active,
    .nav-collapsed .mega-panel--grouped.active { grid-template-columns: 1fr; }
    .nav-collapsed .about-links-col { border-right: none; padding-right: 0; }
    .nav-collapsed .news-cards,
    .nav-collapsed .news-cards .view-content { grid-template-columns: 1fr; }
    .nav-collapsed .mega-promo { width: auto; margin: 16px 24px; }
}

/* ========== LONG GROUPS — "Show N more" ========== */

/* Collapsed is the rendered default (the template sets .is-collapsed), so the
   extra items never paint and then vanish. */
.mega-group-list.is-collapsed .is-extra {
    display: none;
}

.mega-more {
    /* Matches .mega-panel a: same padding, radius and metrics, so the toggle
       sits in the list as another row rather than as a form control. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--phi-orange);
    text-align: left;
    cursor: pointer;
    transition: all 0.18s ease;
}

.mega-more:hover,
.mega-more:focus-visible {
    background: var(--phi-secondary);
    padding-left: 14px;
}

.mega-more .arr {
    transition: transform 0.18s ease;
}

/* The caret points down to open and up to close, so the control reads the same
   way whichever state it is in. */
.mega-group-list:not(.is-collapsed) .mega-more .arr {
    transform: rotate(180deg);
}

.mega-more-item {
    margin-top: 2px;
}