/* ---------------------------------------------------------------- */
/* SITE BANNER (banner.css)                                          */
/* The REGEN brand banner directly below the header on every page    */
/* (markup in template-parts/header/banner.php, image in             */
/* assets/images/rsn-web-banner.png). The banner's words are part of */
/* the image itself, so it is always shown whole: it scales down to  */
/* fit the column but is never cropped.                              */
/* ---------------------------------------------------------------- */

/* Outer wrapper: same width/centering as the header and the homepage sections, so all the edges line up */
.rsn-banner {
    max-width: 1100px; /* Matches .rsn-site-header's inner width and .rsn-latest-articles */
    margin: 20px auto 0; /* A little space below the header, centered; no bottom margin since the next section adds its own top margin */
    padding: 0 20px; /* Left/right breathing room on smaller screens, matching the sections below */
}

/* Wrapper exactly the size of the image, so the icon links can be positioned as percentages of the picture */
.rsn-banner-inner {
    position: relative; /* Becomes the reference point for the absolutely-positioned links below */
}

/* The banner image itself */
.rsn-banner-image {
    display: block; /* Removes the small default gap browsers leave under inline images */
    width: 100%; /* Fill the column's full width (1060px on desktop, the screen width minus padding on phones) */
    height: auto; /* Let the height follow the width, keeping the image's 3:1 shape so nothing is stretched or cut off. */
    /* This also overrides the height="501" attribute in the markup, which is only there to reserve space while loading */
    border-radius: 6px; /* Same rounded corners as the menu bar, ticker and cards */
}

/* ---------------------------------------------------------------- */
/* SOCIAL ICON LINKS                                                 */
/* The social icons are drawn into the banner image, so each link is */
/* an invisible circle laid over its icon. All sizes and positions   */
/* are percentages of the image, so they stay on the icons as the    */
/* banner shrinks. Each link's horizontal center comes from the      */
/* --rsn-icon-x variable set in template-parts/header/banner.php.    */
/* ---------------------------------------------------------------- */

/* The list of links, stretched over the whole image */
.rsn-banner-social {
    position: absolute; /* Lay the list on top of the image instead of below it */
    inset: 0; /* Shorthand for top/right/bottom/left: 0, so the list covers the image exactly */
    list-style: none; /* Remove the default bullet points */
    pointer-events: none; /* Let clicks pass straight through the empty parts of the list... */
}

/* One link, sized and placed over its icon */
.rsn-banner-social a {
    position: absolute; /* Position each link independently within the list */
    /* The icons are about 85px wide on the 1500×501 image. Each link is a 96px square on that image (6.4% of */
    /* the width, 19.16% of the height), a little bigger than the icon so it's easy to hit with a finger. */
    width: 6.4%;
    height: 19.16%;
    left: calc(var(--rsn-icon-x) - 3.2%); /* Icon's center minus half the link's width = the link's left edge */
    top: 16.47%; /* All six icons share a center line 26.05% down the image; minus half the link's height (9.58%). */
    /* Re-measured for the Nov 2026 banner, which moved the icons up from 67.07% to 26.05% (y≈130px of 501) */
    border-radius: 50%; /* Round, so the hover/focus ring below is a circle hugging the round icon */
    pointer-events: auto; /* ...but the links themselves DO catch clicks (switching back on what the list turned off) */
    transition: box-shadow 0.2s ease; /* Smoothly fade the ring in and out */
}

/* Hover and keyboard-focus state: a Signal ring around the icon, so visitors can see it's a link. */
/* :focus-visible only shows the ring for keyboard users, not after every mouse click. */
.rsn-banner-social a:hover,
.rsn-banner-social a:focus-visible {
    box-shadow: 0 0 0 3px var(--rsn-signal); /* A 3px Signal ring drawn just outside the link's circle */
    outline: none; /* The ring above replaces the browser's default square focus outline */
}