/*
 * Rowmark LLC — site layout (header / nav / footer)
 * Placeholder styling carrying over the legacy palette (#005a9c header,
 * #636363 footer) until the marketing Figma redesign lands. Markup/class
 * structure mirrors gyford's layout.css so the Figma pass is CSS-only.
 */

:root {
    --llc-blue: #005a9c;
    --llc-blue-dark: #00477c;
    --llc-gray: #636363;
    --llc-text: #414141;
}

body {
    font-family: "acumin-pro", sans-serif;
    font-weight: 300;
    color: var(--llc-text);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Header ---------- */

.site-header {
    background: var(--llc-blue);
}

.header-inner {
    /* Match the legacy homepage's Bulma 0.6.0 `.container`, whose width STEPS
       960→1152→1344 at 1024/1216/1408 (see the shared media block below) — NOT a
       flat max-width, which only coincides with Bulma at ≥1408px and runs full
       width below it. 1rem inset → logo at x≈64; the bar is 52px (Bulma navbar
       min-height 3.25rem) with the logo centered. */
    box-sizing: border-box;
    min-height: 52px;
    margin: 0 auto;
    /* No container padding — like Bulma, the edge inset comes from the items
       (logo margin-left + the nav links' own padding), so the nav's right edge
       reaches the container edge and aligns with the homepage. */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

/* Legacy `/` and `/news` wrap the header + footer in Bulma 0.6.0's `.container`,
   which is a FIXED, centered width at each breakpoint (below 1024px: full width):
       @media (min-width:1024px){ width:960px  }
       @media (min-width:1216px){ width:1152px }
       @media (min-width:1408px){ width:1344px }
   The landing chrome must replicate these exact steps so it lines up with the
   legacy chrome at EVERY width — not just ≥1408px, where a flat 1344 coincides. */
@media (min-width: 1024px) { .header-inner, .site-footer__inner { width: 960px;  max-width: 960px;  } }
@media (min-width: 1216px) { .header-inner, .site-footer__inner { width: 1152px; max-width: 1152px; } }
@media (min-width: 1408px) { .header-inner, .site-footer__inner { width: 1344px; max-width: 1344px; } }

.brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 1rem;
}

.brand__img {
    /* Matches the legacy homepage logo (Bulma caps navbar images at 1.75rem). */
    height: 28px;
    width: auto;
    display: block;
}

.brand__text {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
}

/* ---------- Primary nav ---------- */

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    padding: 0.5rem;
}

.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Fill the full header height so a hovered item's background spans the whole
   bar top-to-bottom (matches the legacy homepage nav). */
.nav {
    align-self: stretch;
}

.nav .menu {
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu__item {
    position: relative;
    display: flex;
}

.menu__link {
    /* Typography copied from the legacy Bulma navbar (measured on the homepage):
       full white, weight 300, 16px, 0.5rem/1rem padding, line-height 1.5. */
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

/* Plain (non-dropdown) links darken on hover — matches Bulma's is-info navbar
   item hover (#03528e bg, white text). */
.menu__item:not(.has-children) > .menu__link:hover,
.menu__item:not(.has-children) > .menu__link.active {
    background: #03528e;
    color: #fff;
}

/* The dropdown parent ("About Us") instead goes white with blue text, so it
   merges with the white submenu that opens beneath it. */
.has-children:hover > .menu__link,
.has-children:focus-within > .menu__link {
    background: #fff;
    color: #0263ac;
}

/* Dropdown caret — Bulma's border chevron (measured 8×8px / 1px borders,
   rotated -45° to point down). Reserve space with padding-right 2.5em and place
   the arrow absolutely at right 1.125em, exactly like Bulma, so the item width
   matches the homepage. border-color inherits currentColor, so it turns blue on
   its own when the parent link goes white on hover/open. */
.has-children > .menu__link {
    padding-right: 2.5em;
}

.has-children > .menu__link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.125em;
    margin-top: -0.375em;
    /* border-box so 0.5em is the arrow's total size incl. borders, matching
       Bulma (whose html is border-box); content-box would render ~2px larger. */
    box-sizing: border-box;
    width: 0.5em;
    height: 0.5em;
    border: 1px solid currentColor;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

/* Dropdowns */

/* Dropdown box — Bulma's `.navbar-dropdown.is-boxed` (measured on the homepage):
   white, 5px radius, the boxed shadow, min-width 100% of the parent, 0.5rem/0 pad. */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 8px 8px 0 rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    z-index: 50;
}

.menu__item.align-right .submenu {
    left: auto;
    right: 0;
}

/* Dropdown links — Bulma navbar-dropdown items: 14px, blue #0263ac, line-height
   1.5, padding 0.375rem 3rem 0.375rem 1rem. Hover = blue bg + white text. */
.submenu a {
    display: block;
    padding: 0.375rem 3rem 0.375rem 1rem;
    color: #0263ac;
    font-size: 0.875rem;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
}

.submenu a:hover {
    background: #03528e;
    color: #fff;
}

@media (min-width: 921px) {
    .has-children:hover > .submenu,
    .has-children:focus-within > .submenu {
        display: block;
    }
}

/* Mobile nav */

@media (max-width: 920px) {
    .nav-toggle {
        display: block;
    }

    .nav {
        display: none;
        position: absolute;
        top: var(--header-h, 64px);
        left: 0;
        right: 0;
        background: var(--llc-blue);
        z-index: 100;
        max-height: calc(100vh - var(--header-h, 64px));
        overflow-y: auto;
    }

    .nav.is-open {
        display: block;
    }

    .header-inner {
        position: relative;
    }

    .nav .menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 0 1rem;
    }

    /* Stack each item's link above its (now always-expanded) submenu, instead of
       the desktop row layout that would drop the submenu beside the link. */
    .menu__item {
        flex-direction: column;
        align-items: stretch;
    }

    .menu__link {
        width: 100%;
        justify-content: space-between;
        padding: 0.85rem 1.25rem;
    }

    .submenu {
        position: static;
        box-shadow: none;
        border-radius: 0;
        background: var(--llc-blue-dark);
    }

    .submenu a {
        color: #fff;
        padding-left: 2rem;
        white-space: normal;
    }

    .submenu a:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
    }

    /* Match the legacy (Bulma) mobile nav: dropdowns are expanded inline with
       their children indented under each parent — no tap-to-collapse chevron —
       so the page-builder pages read the same as the older pages on mobile. */
    .has-children > .submenu {
        display: block;
    }
    .has-children > .menu__link::after {
        display: none;
    }
    .has-children > .menu__link {
        padding-right: 1.25rem;
    }
}

/* ---------- Footer ---------- */
/* Mirrors the legacy Bulma footer (styles.css `.footer`/`.footer-logo`/global
   `p`, + Bulma 0.6.0's column grid): #636363, padding 2rem 1.5rem 0.5rem, a
   1344px centered container, and a `.columns` row (margin -0.75rem) holding an
   is-4 logo column + is-3 nav columns (each 0.75rem padding, border-box). */

footer {
    /* border-box so the 1.5rem side padding sits inside the viewport width
       (Bulma's html is border-box); content-box would widen it by 48px. */
    box-sizing: border-box;
    background: var(--llc-gray);
    color: #fff;
    padding: 2rem 1.5rem 0.5rem;
    margin-top: 3rem;
    /* Clip the empty right-hand overflow of the legacy Bulma 13/12 footer grid
       (is-4 + 3×is-3 = 108% → last column box spills ~78px past the viewport).
       The column layout/positions are unchanged (matches the homepage); only the
       empty overflow is clipped, so no horizontal page scrollbar. */
    overflow-x: clip;
}

.site-footer__inner {
    /* Width comes from the shared Bulma-container media block above (stepped
       960/1152/1344); full width below 1024px like Bulma. */
    margin: 0 auto;
}

/* = Bulma .columns gutters (-0.75rem). Bottom margin is 1.25rem so that, after
   the columns' own 0.75rem bottom padding, the gap to the copyright is the
   legacy `.footer section { margin-bottom: 2rem }`. */
.site-footer__main {
    display: flex;
    margin: -0.75rem -0.75rem 1.25rem;
}

.site-footer__col {
    box-sizing: border-box;
    padding: 0.75rem;
}

.site-footer__brand-col {
    flex: none;
    width: 33.3333%;
}

.site-footer__nav {
    flex: none;
    width: 25%;
}

/* = .footer-logo { width: 130px; height: 47px; margin-top: 1.2rem }. Left inline
   (not display:block) like the legacy img, so its line-box leaves the same ~6px
   gap before the address block. */
.site-footer__logo img {
    width: 130px;
    height: 47px;
    margin-top: 1.2rem;
}

/* Bulma resets headings to 100%/normal; `.footer h4` adds weight 800 + 1.2rem top. */
.site-footer__heading {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.5;
    color: #fff;
    margin: 1.2rem 0 0;
}

.site-footer__address {
    font-style: normal;
    margin: 0;
}

/* Global `p { font-size: 1.1rem; line-height: 1.6 }` on the legacy site. */
.site-footer__address p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
}

/* `.footer ul { margin-top: 0.5rem }`, `.footer ul li { font-size: 0.9rem }`. */
.site-footer__nav ul {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.site-footer__nav li {
    font-size: 0.9rem;
    line-height: 1.5;
}

.site-footer__inner a {
    color: #fff;
    text-decoration: none;
}

.site-footer__inner a:hover {
    text-decoration: underline;
}

/* `.content.is-size-7` copyright, overridden to 0.8rem by `.footer .is-size-7 p`. */
.site-footer__legal {
    font-size: 0.8rem;
}

/* = Bulma `.content p:last-of-type { margin-bottom: 1em }` — the legacy
   copyright sits in `.content`, leaving 1em of space below it. */
.site-footer__copyright {
    margin: 0 0 1em;
    line-height: 1.6;
}