/*
  header.css
  Site header: logo, main links and two mega dropdowns (About, News).
  On phones the links collapse into a burger button.
  Needs css/base.css.
*/

.fm-header {
    background: var(--fm-bg);
    border-bottom: 1px solid var(--fm-rule);
}

.fm-header__bar {
    display: flex;
    align-items: center;
    gap: var(--fm-gap);
    padding-block: 0.8rem;
}

.fm-header__logo img {
    height: 2.25rem;
    width: auto;
}

/* ---------- Desktop links (hidden on phones, see the media query at the bottom) ---------- */
.fm-header__nav {
    display: none;
    flex: 1;
    margin-inline-start: clamp(1.5rem, 3vw, 3.5rem);
}
    /* Links are grouped at the right of the bar, next to each other, with the logo on the left */
    .fm-header__nav > ul {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: clamp(1.5rem, 2.6vw, 2.75rem);
    }

        .fm-header__nav > ul > li > a, .fm-header__trigger {
            display: block;
            font-size: 0.9375rem;
            line-height: 1.4;
            font-weight: 600;
            cursor: pointer;
        }

            .fm-header__nav > ul > li > a:hover, .fm-header__has-panel:hover > .fm-header__trigger, .fm-header__has-panel:focus-within > .fm-header__trigger {
                color: var(--fm-blue);
            }

/* ---------- Mega dropdowns (About, News) ---------- */
/* Open on hover (and keyboard focus) with CSS only, no JavaScript, like the BFREPA "About" panel.
   The <li> is not positioned, so the panel anchors to .fm-header and runs edge to edge under the bar. */
.fm-header {
    position: relative;
}

.fm-header__trigger {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    color: inherit;
}
    /* Small chevron drawn with borders (no image); it flips while the panel is open */
    .fm-header__trigger::after {
        content: "";
        display: inline-block;
        width: 0.38em;
        height: 0.38em;
        margin-inline-start: 0.5em;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-0.18em) rotate(45deg);
        transition: transform 0.15s;
    }

.fm-header__has-panel:hover > .fm-header__trigger::after,
.fm-header__has-panel:focus-within > .fm-header__trigger::after {
    transform: translateY(0.02em) rotate(225deg);
}

/* The panel is a full-width white band flush under the bar, like BFREPA. ::before is an invisible bridge
   over the bar's bottom padding, so the pointer never crosses a gap between the trigger and the panel. */
.fm-header__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 50;
    background: var(--fm-blue-tint);
    border-top: 1px solid var(--fm-rule);
    border-bottom: 1px solid var(--fm-rule);
    box-shadow: 0 14px 28px rgb(0 20 40 / 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.35rem);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

    .fm-header__panel::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 1.5rem;
    }

.fm-header__has-panel:hover > .fm-header__panel, .fm-header__has-panel:focus-within > .fm-header__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

/* Titled columns of links, lined up with the page content; the white feature strip (magazines) runs along the bottom */
.fm-header__panel-inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
    width: min(100% - clamp(2.5rem, 6vw, 6rem), var(--fm-max));
    margin-inline: auto;
    padding-block: 1.5rem 1.5rem;
}
/* Both About and News have four columns (News: the last one is the Livestock box) */
.fm-header__panel-inner--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fm-header__title {
    margin: 0 0 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fm-blue);
}

.fm-header__col ul {
    display: grid;
    gap: 0.35rem;
}
    /* Long lists flow down then across, so the panel stays short: --rows2 wraps after 2 links, --rows3 after 3 */
    .fm-header__col ul.fm-header__list--rows2, .fm-header__col ul.fm-header__list--rows3 {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        column-gap: 1.75rem;
    }

    .fm-header__col ul.fm-header__list--rows2 {
        grid-template-rows: repeat(2, auto);
    }

    .fm-header__col ul.fm-header__list--rows3 {
        grid-template-rows: repeat(3, auto);
    }
/* Livestock sits in a white rounded box at the right of the News panel, its two columns packed close */
.fm-header__box {
    align-self: start;
    margin-top: -0.9rem;
    padding: 0.9rem 1.25rem 1rem;
    border: 1px solid var(--fm-rule);
    border-radius: var(--fm-radius);
    background: var(--fm-bg);
}

    .fm-header__box ul {
        column-gap: 1.25rem;
    }

.fm-header__col a {
    display: block;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
}

    .fm-header__col a:hover, .fm-header__col a:focus-visible {
        color: var(--fm-blue);
    }

.fm-header__feature {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.5rem;
    padding: 0.8rem 1.25rem;
    border: 1px solid var(--fm-rule);
    border-radius: var(--fm-radius);
    background: var(--fm-bg);
}

    .fm-header__feature .fm-header__title {
        margin: 0;
    }

    .fm-header__feature ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 1.25rem;
    }

.fm-header__col a.fm-header__feature-link {
    display: inline-block;
    margin: 0 0 0 auto;
    color: var(--fm-blue);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--fm-blue);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

/* ---------- Phone menu ---------- */
/* A <details>. Its button is a burger (three lines) sitting at the right of the logo bar; the links open below the bar in two columns. */
/* Phones only: the burger is placed against the content width. (On desktop the dropdown panels must anchor to the full-width .fm-header, so .fm-wrap is left unpositioned there.) */
@media (max-width: 61.99rem) {
    .fm-header .fm-wrap {
        position: relative;
        --fm-bar-h: 3.85rem;
    }
    /* bar height: logo 2.25rem + 2 x 0.8rem padding */
}

.fm-header__menu summary {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: var(--fm-bar-h);
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--fm-blue);
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

    .fm-header__menu summary::-webkit-details-marker {
        display: none;
    }
    /* Always the same blue (also after a tap, when phones keep the hover state) */
    .fm-header__menu summary:hover, .fm-header__menu summary:active, .fm-header__menu summary:focus, .fm-header__menu[open] summary {
        color: var(--fm-blue);
    }

    .fm-header__menu summary:focus-visible {
        outline: 2px solid var(--fm-blue);
        outline-offset: -2px;
        border-radius: 0.25rem;
    }
/* Open: the three lines turn into a cross */
.fm-header__menu .fa-xmark, .fm-header__menu[open] .fa-bars {
    display: none;
}

.fm-header__menu[open] .fa-xmark {
    display: inline-block;
}
/* "Menu" is only for screen readers */
.fm-header__menu-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.fm-header__menu ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 1rem;
    padding-bottom: 1.25rem;
}

.fm-header__menu-label {
    margin: 0.25rem 0 0.4rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--fm-rule);
    font-size: var(--fm-t-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fm-muted);
}

.fm-header__menu a {
    display: block;
    padding-block: 0.45rem;
    font-size: var(--fm-t-sm);
}

/* ---------- Desktop (992px and up): swap the phone menu for the full links ---------- */
@media (min-width: 62rem) {
    .fm-header__nav {
        display: block;
    }

    .fm-header__menu {
        display: none;
    }
}