/* ================================================================= */
/* SITE HEADER (header.css)                                          */
/* The dark bar at the top of every page: logo and the space the     */
/* headline ticker sits in (ticker.css styles the ticker itself),    */
/* plus the Admin Login button below the menu bar. Markup in         */
/* header.php.                                                       */
/* ================================================================= */

/* Styles the main site header bar (logo and ticker) at the top of every page */
.rsn-site-header {
    background-color: var(--rsn-deep); /* Deep — header/nav is one of Deep's explicit use cases */
    padding: 20px 0; /* Space above and below the header contents. The left/right space comes from */
    /* .rsn-header-inner instead (see below), so the logo lines up with the banner's left edge */
}

/* Inner wrapper that centers the header contents to the 1100px content column */
.rsn-header-inner {
    max-width: 1100px; /* Match the width of the banner, menu bar and article sections below */
    margin: 0 auto; /* Center the inner wrapper horizontally within the full-width header */
    padding: 0 20px; /* The same 20px side padding the banner and sections use. Because every element uses */
    /* box-sizing: border-box (set in base.css), that padding sits INSIDE the 1100px, leaving */
    /* the same 1060px-wide content area as the banner, so the logo starts exactly where the banner does. */
    display: flex; /* Use flexbox to place the logo and the ticker side by side */
    align-items: center; /* Vertically center the logo and ticker relative to each other */
    justify-content: space-between; /* Push the logo to the left and the ticker to the right */
    flex-wrap: wrap; /* Allow them to wrap onto separate lines on narrow screens */
    gap: 20px; /* Space between the logo and the headline ticker (beside it on desktop, below it on phones) */
}

/* The clickable link wrapping the site name/logo in the header */
.rsn-site-branding {
    text-decoration: none; /* Remove the default underline from the link */
    display: inline-block; /* Allow the link to size itself to its text content */
}

/* The site name next to the logo (.rsn-site-title) is hidden visually but kept for screen readers */
/* and SEO, since the visible branding is the logo image instead of text. It needs no rule here: */
/* its screen-reader-text class is hidden by the site-wide rule in base.css. */

/* Styles the actual RSN logo image (icon mark + "REGEN" wordmark) in the header */
.rsn-site-logo {
    height: 44px; /* Display height of the logo in the header bar */
    width: auto; /* Let width scale proportionally so the logo doesn't stretch/distort */
    display: block; /* Removes the small default inline-image gap beneath the image */
    transition: opacity 0.2s ease; /* Smoothly animate the opacity change on hover below */
}

/* Give the logo a subtle hover state, since it's an image rather than colored link text */
.rsn-site-branding:hover .rsn-site-logo {
    opacity: 0.85; /* Slight fade on hover signals interactivity, standard pattern for image-based logos */
}

/* The row below the menu bar that holds the Subscriber Login and Admin Login buttons (markup at the end of header.php). */
/* It sits outside the header bar now, but its styles stay in this file since it's still part of header.php. */
.rsn-admin-login-row {
    max-width: 1100px; /* Same width as the banner and menu bar above, so the edges line up */
    margin: 12px auto 0; /* A small gap below the menu bar, centered; the next section adds its own top margin */
    padding: 0 20px; /* The same 20px side padding as the menu bar, so the button ends exactly where the bar does */
    display: flex; /* Flexbox, so the button can be pushed to one side with justify-content below */
    justify-content: flex-end; /* Push the buttons to the right edge, under the end of the menu bar */
    gap: 10px; /* Space between the Subscriber Login and Admin Login buttons */
}

/* The "Subscriber Login" and "Admin Login" buttons shown below the menu bar (both use this class) */
.rsn-admin-login-btn {
    background-color: var(--rsn-signal); /* Signal — primary brand color drives this call-to-action button */
    color: var(--rsn-ice); /* Ice — button label text stays legible against the bright Signal background */
    text-decoration: none; /* Remove the default underline from the link */
    font-family: var(--rsn-font-dm-sans); /* Body role: DM Sans, matching other UI-level (non-headline) text */
    font-weight: var(--rsn-type-body-weight); /* 400 weight, per the Body row of the type spec */
    font-size: 13px; /* Slightly smaller than nav links, since this is a secondary/utility action, not primary nav */
    padding: 6px 14px; /* Compact padding so it reads as a button, not a full nav item */
    border-radius: 4px; /* Slightly rounded corners, consistent with the theme's card/button styling elsewhere */
    white-space: nowrap; /* Prevent "Admin Login" / "Subscriber Login" from wrapping onto two lines inside the button */
    transition: background-color 0.2s ease; /* Smoothly animate the hover color change below */
}

/* Hover/focus state on the login buttons, using Drive for consistency with other Signal elements */
.rsn-admin-login-btn:hover,
.rsn-admin-login-btn:focus {
    background-color: var(--rsn-drive); /* Drive — Signal's designated hover/pressed state */
}

/* Responsive rule: stack and center the header contents on narrow/mobile screens */
@media (max-width: 768px) {
    .rsn-header-inner {
        flex-direction: column; /* Stack the header contents vertically on a narrow screen */
        text-align: center; /* Center the branding when stacked */
    }
}