/* SME Menu Manager — Front-End Styles
   Loaded on the public site (not wp-admin). Styles the output of the
   [sme_col] and [sme_mega_sponsor] shortcodes wherever they're placed —
   typically inside a Divi Code module in a mega menu or mobile menu layout.

   Typography matches SME's existing mega menu design:
     - Headings: Lora/Alegreya serif, SME blue
     - Button links: Roboto, bold, uppercase, slight letter-spacing
     - Arrow: larger, SME green, more prominent
*/

:root {
    --sme-col-blue:    #0089cf;
    --sme-col-green:   #bfd730;
    --sme-col-clay:    #4a4a4a;
    --sme-col-gray-bg: #fafaf8;
    --sme-col-gray-bg-hover: #0089cf;
}

.sme-col {
    margin-bottom: 14px;
}
.sme-col:last-child {
    margin-bottom: 0;
}

.sme-col-heading {
    font-family: 'Alegreya', 'Lora', Georgia, serif;
    color: var(--sme-col-blue);
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

/* Plain text links — stacked vertically, one per line */
.sme-col-link {
    margin: 0 0 4px;
    line-height: 1.4;
}
.sme-col-link:last-child {
    margin-bottom: 0;
}
.sme-col-link a {
    color: var(--sme-col-clay);
    text-decoration: none;
    display: inline-block;
}
.sme-col-link a:hover {
    color: var(--sme-col-blue);
    text-decoration: underline;
}

/* Button-style links — stacked gray bars with a trailing arrow,
   tightened padding to match the original compact row height */
.sme-col-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--sme-col-gray-bg);
    color: var(--sme-col-clay);
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 7px 14px;
    margin-bottom: 1px;
    border-radius: 0;
    transition: background .15s, color .15s;
}
.sme-col-button:last-child {
    margin-bottom: 0;
}
.sme-col-button:hover {
    background: var(--sme-col-gray-bg-hover);
    color: #fff;
    text-decoration: none;
}
.sme-col-button:hover::after {
    color: #fff;
}
.sme-col-button::after {
    content: '\25B8'; /* ▸ */
    color: var(--sme-col-green);
    font-size: 18px;
    line-height: 1;
    margin-left: 8px;
    flex-shrink: 0;
    transition: color .15s;
}

/* ===========================================================
   Multi-column grid layout — [sme_col layout="2col"]
   The heading always spans the full width; links flow into
   equal-width columns beneath it.
=========================================================== */
.sme-col-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

/* Heading always spans all columns */
.sme-col-heading--full {
    grid-column: 1 / -1;
    margin-bottom: 6px;
}

.sme-col-grid--2col {
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
}

.sme-col-grid--3col {
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 16px;
}

/* Heading still spans all columns when in a grid */
.sme-col-grid--2col .sme-col-heading--full,
.sme-col-grid--3col .sme-col-heading--full {
    grid-column: 1 / -1;
}

/* Buttons in a grid need display:block to fill their column */
.sme-col-grid .sme-col-button {
    display: block;
    margin-bottom: 1px;
}

.sme-mega-sponsor {
    text-align: center;
}
.sme-sponsor-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--sme-col-clay);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 0 0 12px;
}
.sme-sponsor-link {
    display: inline-block;
}
.sme-sponsor-logo {
    max-width: 100%;
    height: auto;
}
.sme-sponsor-name-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--sme-col-blue);
}

/* ===========================================================
   Multi-column grid layout for [sme_col layout="2col|3col"]
   The heading spans the full width; links flow into columns.
=========================================================== */
.sme-col-grid {
    display: grid;
    grid-template-columns: 1fr;  /* heading row always full-width */
    gap: 0;
}
.sme-col-heading--full {
    grid-column: 1 / -1;  /* always spans all columns */
    margin-bottom: 6px;
}

/* Links container sits inside the grid and gets its own sub-grid */
.sme-col-grid--2col .sme-col-button,
.sme-col-grid--2col .sme-col-link {
    /* handled by re-wrapping children — see below */
}

/* For 2col and 3col we inject a link-grid wrapper via the heading--full
   trick: all siblings after the heading flow into a sub-grid div.
   Since we can't easily wrap only the links in PHP without restructuring,
   we use CSS grid on the .sme-col itself with auto-placement. */
.sme-col-grid--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
    row-gap: 0;
    align-items: start;
}
.sme-col-grid--3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 8px;
    row-gap: 0;
    align-items: start;
}

/* Heading always spans all columns regardless of layout */
.sme-col-grid--2col .sme-col-heading--full,
.sme-col-grid--3col .sme-col-heading--full {
    grid-column: 1 / -1;
    margin-bottom: 6px;
}

/* Each button/link is a grid item and auto-flows into the next cell */
.sme-col-grid--2col .sme-col-button,
.sme-col-grid--2col .sme-col-link,
.sme-col-grid--3col .sme-col-button,
.sme-col-grid--3col .sme-col-link {
    margin-bottom: 1px;
}