/* ================================================================= */
/* BASE STYLES (base.css)                                            */
/* Site-wide foundations: the spacing reset, the default body text,  */
/* and utility classes for each role in the brand type spec.         */
/* Loaded right after tokens.css, before every component file.       */
/* ================================================================= */

/* Reset default margin/padding on all elements so spacing is predictable */
* {
    margin: 0; /* Remove default outer spacing on every element */
    padding: 0; /* Remove default inner spacing on every element */
    box-sizing: border-box; /* Include border/padding in element width/height calculations */
}

/* Base body styling applied site-wide */
body {
    font-family: var(--rsn-font-dm-sans); /* Body role: DM Sans is the default readable font for body copy site-wide */
    font-weight: var(--rsn-type-body-weight); /* 400 weight, per the Body row of the type spec */
    font-size: var(--rsn-type-body-size); /* 15px, the middle of the Body role's 14–16px range */
    background-color: var(--rsn-deep); /* Deep — this is the dark page base color behind all content */
    color: var(--rsn-ice); /* Ice — default body text color, readable against the dark Deep background */
    line-height: 1.5; /* Comfortable spacing between lines of text */
}

/* ---------------------------------------------------------------- */
/* TYPE-ROLE UTILITY CLASSES                                        */
/* ---------------------------------------------------------------- */

/* Utility class for the Display type role. Used on the homepage slider headlines; also apply */
/* it to hero banners, video thumbnails, or breaking-news headlines when those templates exist. */
.rsn-text-display {
    font-family: var(--rsn-font-rajdhani); /* Rajdhani, per the Display row of the type spec */
    font-weight: var(--rsn-type-display-weight); /* 700 weight, per the Display row */
    font-size: var(--rsn-type-display-size); /* 56px, the middle of the Display role's 48–72px range */
}

/* Utility class for the H1 type role. Not yet used in markup (single.php and page.php style their */
/* own H1s) — apply it to section-hero titles or other article headlines when needed. */
.rsn-text-h1 {
    font-family: var(--rsn-font-rajdhani); /* Rajdhani, per the H1 row of the type spec */
    font-weight: var(--rsn-type-h1-weight); /* 700 weight, per the H1 row */
    font-size: var(--rsn-type-h1-size); /* 40px, the middle of the H1 role's 36–48px range */
}

/* Utility class for the H3 type role. Not yet used in markup — apply to subheadings, */
/* sidebar titles, or podcast titles once those sections exist. */
.rsn-text-h3 {
    font-family: var(--rsn-font-dm-sans); /* DM Sans, per the H3 row of the type spec */
    font-weight: var(--rsn-type-h3-weight); /* 600 weight, per the H3 row */
    font-size: var(--rsn-type-h3-size); /* 22px, the middle of the H3 role's 20–24px range */
}

/* Utility class for the Caption type role. Not yet used in markup — apply to image */
/* captions, footnotes, or bylines (e.g. "Photo: Getty Images") once needed. */
.rsn-text-caption {
    font-family: var(--rsn-font-dm-sans); /* DM Sans, per the Caption row of the type spec */
    font-weight: var(--rsn-type-caption-weight); /* 300 weight, per the Caption row */
    font-size: var(--rsn-type-caption-size); /* 12px, the middle of the Caption role's 11–13px range */
}

/* Utility class for the Data type role. Not yet used in markup — apply to live scores, */
/* stats, tickers, or game clocks (e.g. "NFL · Q4 2:34") once that markup exists. */
.rsn-text-data {
    font-family: var(--rsn-font-dm-mono); /* DM Mono, per the Data row of the type spec */
    font-weight: var(--rsn-type-data-weight); /* 500 weight, per the Data row */
    font-size: var(--rsn-type-data-size); /* 12px, the middle of the Data role's 11–14px range */
}

/* ---------------------------------------------------------------- */
/* SCREEN-READER-ONLY TEXT                                          */
/* ---------------------------------------------------------------- */

/* WordPress's standard class for text that screen readers should read but sighted visitors */
/* shouldn't see. WordPress itself adds it to markup it prints, for example the "Posts navigation" */
/* heading inside the_posts_pagination() on index.php, so every theme is expected to hide it. */
/* (It's also used on the hidden site name in header.php.) This is the same rule WordPress's own */
/* default themes use. We can't use display: none, because screen readers skip that too. */
.screen-reader-text {
    border: 0; /* No border, so the 1px box below can't show a visible line */
    clip-path: inset(50%); /* Modern way of clipping the box away to nothing */
    clip: rect(1px, 1px, 1px, 1px); /* Legacy clipping method some older browsers still rely on */
    height: 1px; /* Shrink the box to effectively nothing... */
    width: 1px; /* ...in both dimensions, so it's visually invisible */
    margin: -1px; /* Pull it back by its own size so it doesn't nudge anything around it */
    overflow: hidden; /* Clip any content that might otherwise overflow this tiny box */
    padding: 0; /* No padding that could make the box bigger */
    position: absolute !important; /* Take it out of the normal flow so it takes up no space. !important stops */
                                   /* a more specific rule (e.g. a heading style) from accidentally un-hiding it */
    word-wrap: normal !important; /* Keep the text on one line, so screen readers read it as one phrase */
}

/* Exception: if a hidden element is reached with the Tab key (e.g. a "Skip to content" link), */
/* show it while it has focus, so keyboard users can see where they are. */
.screen-reader-text:focus {
    background-color: var(--rsn-ice); /* Light box, so it stands out against the dark page */
    color: var(--rsn-deep); /* Dark text on the light box */
    clip-path: none; /* Undo the clipping above... */
    clip: auto;
    height: auto; /* ...and the tiny size, so the text shows in full */
    width: auto;
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px; /* Pin it to the top-left corner of the page */
    left: 5px;
    z-index: 100000; /* Above everything else on the page */
}