/* ==========================================================================
   Eddsport Magazine — redesign
   Modern editorial / news-site treatment: white surfaces, hairline rules,
   generous whitespace, one house accent, and section colour used only as a
   small tag + rule rather than a filled block.
   Bootstrap 5.3.3 is the base; this is the theme layer on top.
   ========================================================================== */

:root {
    /* Surfaces */
    --ed-bg:         #ffffff;
    --ed-bg-alt:     #f6f7f9;
    --ed-card:       #ffffff;
    --ed-dark:       #101318;
    --ed-dark-2:     #1a1f27;

    /* Text */
    --ed-ink:        #101318;
    --ed-ink-soft:   #5c6572;
    --ed-ink-faint:  #8b93a1;

    /* Lines */
    --ed-line:       #e4e7ec;
    --ed-line-dark:  #2b323d;

    /* House accent */
    --ed-accent:     #d0021b;

    /* Section accents — deeper and less shouty than a full colour block */
    --ed-totm:       #c2182b;
    --ed-motor:      #a85908;
    --ed-mind:       #0f766e;
    --ed-state:      #3f3fbf;
    --ed-junk:       #9d1f95;

    --ed-radius:     10px;
    --ed-shadow:     0 1px 2px rgba(16, 19, 24, .05),
                     0 8px 24px rgba(16, 19, 24, .06);
    --ed-shadow-lg:  0 2px 4px rgba(16, 19, 24, .06),
                     0 16px 40px rgba(16, 19, 24, .10);

    --bs-body-bg:    var(--ed-bg);
    --bs-body-color: var(--ed-ink);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 76px;
}

body {
    /* No texture. A dot screen reads as 1990s print pastiche, not news. */
    background: var(--ed-bg);
    color: var(--ed-ink);
    font-family: 'Spectral', Georgia, 'Times New Roman', serif;
    font-size: 1.02rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* Anton is reserved for the wordmark and big section titles. Everything
   structural uses Archivo, which is what keeps it feeling like a masthead
   rather than a poster. */
h1, h2, h3, h4, h5,
.wordmark, .display-title {
    font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
    font-weight: 400;
    letter-spacing: .01em;
    text-transform: uppercase;
    line-height: 1.04;
}

a {
    color: var(--ed-accent);
    text-decoration: none;
}

a:hover {
    color: var(--ed-ink);
}

::selection {
    background: var(--ed-ink);
    color: #fff;
}

.eyebrow {
    display: block;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ed-ink-faint);
    margin-bottom: .7rem;
}

/* --- Wordmark -------------------------------------------------------------
   EDDSPORT with the S picked out, so it reads as either EDD SPORT or
   EDDS PORT. That ambiguity is the whole joke, so the S never changes
   colour on hover or inverts with the rest of the mark.
   ------------------------------------------------------------------------- */

.wordmark {
    display: inline-block;
    font-size: 1.7rem;
    letter-spacing: .02em;
    color: var(--ed-ink);
    line-height: 1;
}

.wordmark:hover {
    color: var(--ed-ink);
}

.wordmark__s {
    color: var(--ed-accent);
}

/* block, not inline-block — otherwise it flows alongside the .eyebrow above it */
.wordmark--hero {
    display: block;
    font-size: clamp(3.2rem, 13vw, 9rem);
    letter-spacing: -.01em;
    margin: 0;
}

.wordmark--footer {
    font-size: 2rem;
    color: #fff;
}

/* --- Navbar --------------------------------------------------------------- */

.ed-nav {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ed-line);
}

.ed-nav .nav-link {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ed-ink-soft);
    padding: .45rem .9rem;
}

.ed-nav .nav-link:hover {
    color: var(--ed-ink);
}

.navbar-toggler {
    border: 1px solid var(--ed-line);
    border-radius: 8px;
    padding: .3rem .55rem;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* --- Hero ----------------------------------------------------------------
   Kept as-is in spirit: typographic, no photograph. A photo dates the site
   and needs re-shooting whenever the sections change.
   ------------------------------------------------------------------------ */

.hero {
    background: var(--ed-dark);
    color: #fff;
    padding: 5rem 0 4.5rem;
    position: relative;
    overflow: hidden;
}

/* Single accent hairline rather than the old dashed registration strip */
.hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--ed-accent);
}

.hero .eyebrow {
    color: #7d8694;
}

.hero .wordmark--hero {
    color: #fff;
}

.hero__standfirst {
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    color: #b8bfca;
    max-width: 48ch;
    margin: 1.4rem 0 0;
}

.hero__meta {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6b7480;
    margin-top: 2.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--ed-line-dark);
}

/* --- Sections ------------------------------------------------------------ */

.section {
    padding: 5rem 0;
}

.section--alt {
    background: var(--ed-bg-alt);
    border-top: 1px solid var(--ed-line);
    border-bottom: 1px solid var(--ed-line);
}

.section-head {
    margin-bottom: 2.5rem;
}

.section-title {
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    margin: 0;
}

.section-lede {
    color: var(--ed-ink-soft);
    max-width: 62ch;
    margin: .8rem 0 0;
}

/* Hairline, not a slab */
.rule {
    height: 1px;
    background: var(--ed-line);
    margin: 1.4rem 0 0;
}

/* --- Category panels ----------------------------------------------------- */

.panel {
    background: var(--ed-card);
    border: 1px solid var(--ed-line);
    border-top: 3px solid var(--sec, var(--ed-accent));
    border-radius: var(--ed-radius);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--ed-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}

.panel:hover {
    transform: translateY(-2px);
    box-shadow: var(--ed-shadow-lg);
}

.panel__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.15rem 1.4rem .9rem;
}

/* Small colour chip standing in for a section logo */
.panel__mark {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: var(--sec, var(--ed-accent));
    color: #fff;
    border-radius: 6px;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
}

/* Sentence case + Archivo — this is the main thing that stops it reading
   as a poster and starts it reading as a news section header. */
.panel__title {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--ed-ink);
    margin: 0;
}

.panel__count {
    margin-left: auto;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ed-ink-faint);
    white-space: nowrap;
}

.panel__intro {
    padding: 0 1.4rem .35rem;
    margin: 0;
    color: var(--ed-ink-soft);
    font-size: .95rem;
}

.panel__list {
    list-style: none;
    margin: 0;
    padding: .5rem 1.4rem 0;
    flex: 1 1 auto;
}

.panel__list li {
    padding: .85rem 0;
    border-bottom: 1px solid var(--ed-line);
}

.panel__list li:last-child {
    border-bottom: 0;
}

.panel__list a {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--ed-ink);
    display: block;
}

.panel__list a:hover {
    color: var(--sec, var(--ed-accent));
}

.panel__strap {
    display: block;
    font-family: 'Spectral', Georgia, serif;
    font-weight: 400;
    font-size: .92rem;
    color: var(--ed-ink-soft);
    margin-top: .25rem;
}

.panel__foot {
    padding: 1.1rem 1.4rem 1.4rem;
    margin-top: auto;
}

/* Empty state — for a section that exists but has nothing filed yet.
   Deliberately does NOT flex-grow: stretching it to match a full panel
   leaves a huge dashed void. Natural height, and .panel__foot's auto
   margin pushes the button to the bottom instead. */
.panel__empty {
    flex: 0 0 auto;
    margin: .75rem 1.4rem 0;
    padding: 1.5rem 1.25rem;
    border: 1px dashed #cfd5de;
    border-radius: 8px;
    background: var(--ed-bg-alt);
    text-align: center;
}

.panel__empty-title {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: .95rem;
    color: var(--ed-ink);
    margin: 0 0 .3rem;
}

.panel__empty-copy {
    font-size: .9rem;
    color: var(--ed-ink-soft);
    margin: 0;
}

/* A "Coming soon" button isn't clickable — make that visible, not just semantic */
.btn[aria-disabled="true"] {
    opacity: .5;
    pointer-events: none;
}

/* --- Buttons ------------------------------------------------------------- */

.btn-ink {
    --bs-btn-font-family: 'Archivo', system-ui, sans-serif;
    background: var(--ed-ink);
    color: #fff;
    border: 1px solid var(--ed-ink);
    border-radius: 8px;
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .6rem 1.15rem;
    transition: background .18s ease, border-color .18s ease;
}

.btn-ink:hover,
.btn-ink:focus-visible {
    background: var(--sec, var(--ed-accent));
    border-color: var(--sec, var(--ed-accent));
    color: #fff;
}

.btn-outline-ink {
    --bs-btn-font-family: 'Archivo', system-ui, sans-serif;
    background: transparent;
    color: var(--ed-ink);
    border: 1px solid #c9cfd8;
    border-radius: 8px;
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .6rem 1.15rem;
}

.btn-outline-ink:hover,
.btn-outline-ink:focus-visible {
    background: var(--ed-ink);
    color: #fff;
    border-color: var(--ed-ink);
}

/* Section accent assignment — one class per category */
.sec-totm  { --sec: var(--ed-totm); }
.sec-motor { --sec: var(--ed-motor); }
.sec-mind  { --sec: var(--ed-mind); }
.sec-state { --sec: var(--ed-state); }
.sec-junk  { --sec: var(--ed-junk); }

/* --- Title cards (F1 Bite, NRL, future sites) ---------------------------
   The dark band with light cards is the treatment Eddie picked out, so it
   stays — just cleaned up: soft shadows, hairline borders, no hard offsets.
   ----------------------------------------------------------------------- */

.titles {
    background: var(--ed-dark);
    color: #fff;
    padding: 5rem 0;
}

.titles .section-title {
    color: #fff;
}

.titles .eyebrow {
    color: #7d8694;
}

.titles .section-lede {
    color: #b8bfca;
}

.titles .rule {
    background: var(--ed-line-dark);
}

.title-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid transparent;
    border-radius: var(--ed-radius);
    padding: 1.85rem;
    color: var(--ed-ink);
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .32);
}

.title-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .42);
    color: var(--ed-ink);
}

/* Text logo block — each title gets its own lockup rather than an image */
.title-card__logo {
    font-family: 'Anton', sans-serif;
    font-size: 2rem;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.title-card__logo em {
    font-style: normal;
    color: var(--sec, var(--ed-accent));
}

.title-card__kind {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ed-ink-faint);
    margin-bottom: .8rem;
}

.title-card__copy {
    font-size: .95rem;
    color: var(--ed-ink-soft);
    flex: 1 1 auto;
    margin: 0 0 1.35rem;
}

.title-card__cta {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ed-ink);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.title-card:hover .title-card__cta {
    color: var(--sec, var(--ed-accent));
}

/* Locked (members-only) variant — sits back into the dark band */
.title-card--locked {
    background: var(--ed-dark-2);
    border: 1px solid var(--ed-line-dark);
    color: #fff;
    box-shadow: none;
}

.title-card--locked:hover {
    transform: none;
    box-shadow: none;
    color: #fff;
    border-color: #3c4553;
}

.title-card--locked .title-card__logo {
    color: #fff;
}

.title-card--locked .title-card__kind {
    color: #6b7480;
}

.title-card--locked .title-card__copy {
    color: #9aa2ae;
}

.title-card--locked .title-card__cta {
    color: #fff;
}

/* --- Article listing ----------------------------------------------------- */

.list-count {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ed-ink-faint);
    margin: 0 0 1rem;
}

.article-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-row {
    border-top: 1px solid var(--ed-line);
}

.article-row:last-child {
    border-bottom: 1px solid var(--ed-line);
}

.article-row__link {
    display: block;
    padding: 1.4rem 0 1.5rem;
    color: var(--ed-ink);
    /* the section colour shows as a rule that grows in on hover */
    box-shadow: inset 0 0 0 0 var(--sec, var(--ed-accent));
    transition: box-shadow .18s ease, padding-left .18s ease;
}

.article-row__link:hover {
    color: var(--ed-ink);
    box-shadow: inset 3px 0 0 0 var(--sec, var(--ed-accent));
    padding-left: 1rem;
}

.article-row__title {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -.015em;
    text-transform: none;
    line-height: 1.25;
    margin: 0;
}

.article-row__link:hover .article-row__title {
    color: var(--sec, var(--ed-accent));
}

.article-row__strap {
    color: var(--ed-ink-soft);
    margin: .4rem 0 0;
}

.article-row__meta {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ed-ink-faint);
    margin: .65rem 0 0;
}

.article-row__tag {
    color: var(--sec, var(--ed-accent));
    margin-right: .7rem;
}

.article-list__ad {
    list-style: none;
    border-top: 1px solid var(--ed-line);
    padding: 1.5rem 0;
}

/* --- Single article ------------------------------------------------------ */

.article-head {
    padding-bottom: 1.75rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--ed-line);
}

.article-head__section {
    font: inherit;
    color: var(--sec, var(--ed-accent));
}

.article-head__section:hover {
    color: var(--ed-ink);
}

.article-head__title {
    font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
    font-size: clamp(2rem, 5vw, 3.1rem);
    line-height: 1.04;
    margin: 0;
}

/* No measure cap — it would stop short of the now full-width body below it */
.article-head__strap {
    font-size: 1.15rem;
    color: var(--ed-ink-soft);
    margin: .9rem 0 0;
}

.article-head__date {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ed-ink-faint);
    margin: 1.1rem 0 0;
}

/* Body copy comes out of fm_paragraphformat, so style bare tags rather than
   expecting classes on anything. */
/* Full column width. There was a 68ch measure cap here, which is the classic
   readability line length, but in a col-lg-8 it stopped about three-quarters
   across and looked like a mistake. Line height carries the legibility
   instead. */
.article-body {
    font-size: 1.08rem;
    line-height: 1.75;
}

.article-body p {
    margin: 0 0 1.3rem;
}

.article-body a {
    text-decoration: underline;
    text-underline-offset: .15em;
}

.article-body h2,
.article-body h3 {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -.01em;
    margin: 2.25rem 0 .85rem;
}

.article-body h2 { font-size: 1.5rem; }
.article-body h3 { font-size: 1.25rem; }

.article-body ul,
.article-body ol {
    margin: 0 0 1.3rem 1.1rem;
    padding: 0;
}

.article-body li {
    margin-bottom: .45rem;
}

.article-body blockquote {
    margin: 1.75rem 0;
    padding: .3rem 0 .3rem 1.3rem;
    border-left: 3px solid var(--sec, var(--ed-accent));
    color: var(--ed-ink-soft);
    font-style: italic;
}

.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Lead-in paragraph, when the article has one */
.article-intro {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--ed-ink);
    padding-left: 1.1rem;
    border-left: 3px solid var(--sec, var(--ed-accent));
    margin-bottom: 1.75rem;
}

.article-intro p:last-child {
    margin-bottom: 0;
}

.article-image {
    margin: 0 0 1.75rem;
}

.article-image img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--ed-line);
    border-radius: 8px;
}

.article-foot {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--ed-line);
}

/* --- Sidebar rail -------------------------------------------------------- */

.rail {
    position: sticky;
    top: 92px;
}

@media (max-width: 991.98px) {
    .rail {
        position: static;
        margin-top: 3rem;
    }
}

.rail__block {
    padding: 1.4rem;
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-radius);
    background: var(--ed-bg-alt);
    margin-bottom: 1.25rem;
}

.rail__title {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ed-ink-faint);
    margin: 0 0 1rem;
}

.rail__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rail__list li {
    border-bottom: 1px solid var(--ed-line);
}

.rail__list li:last-child {
    border-bottom: 0;
}

.rail__list a {
    display: block;
    padding: .6rem 0 .6rem .85rem;
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 600;
    font-size: .95rem;
    color: var(--ed-ink);
    border-left: 3px solid var(--sec, var(--ed-accent));
}

.rail__list a:hover {
    color: var(--sec, var(--ed-accent));
}

/* --- Advertising ---------------------------------------------------------
   Ads are labelled and given their own quiet band so they read as adverts
   and not as editorial. min-height reserves space so the page doesn't jump
   when a unit fills, and collapses to nothing if AdSense returns no fill.
   ------------------------------------------------------------------------ */

.ad-band {
    background: var(--ed-bg-alt);
    border-top: 1px solid var(--ed-line);
    border-bottom: 1px solid var(--ed-line);
    padding: 2rem 0;
}

.ad {
    max-width: 970px;
    margin: 0 auto;
    text-align: center;
}

.ad__label {
    display: block;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ed-ink-faint);
    margin-bottom: .6rem;
}

.ad__unit {
    display: block;
    min-height: 90px;
}

/* Preview only — stands in for a live unit in index.html so the band can be
   checked without loading the real AdSense tag from localhost. */
.ad__unit--placeholder {
    display: grid;
    place-items: center;
    min-height: 110px;
    border: 1px dashed #cfd5de;
    border-radius: 8px;
    background: #fff;
    color: var(--ed-ink-faint);
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .8rem;
    letter-spacing: .08em;
}

/* An unfilled AdSense unit gets height:auto and no children — don't hold
   space open for an advert that never arrived. */
.ad__unit[data-ad-status="unfilled"] {
    display: none;
}

.ad__unit[data-ad-status="unfilled"] + script + .ad__label,
.ad:has(.ad__unit[data-ad-status="unfilled"]) .ad__label {
    display: none;
}

/* --- Books strip --------------------------------------------------------- */

.books {
    background: var(--ed-bg-alt);
    border-top: 1px solid var(--ed-line);
    padding: 4rem 0;
}

.book-cover {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--ed-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
    background: #fff;
}

.book-cover:hover {
    transform: translateY(-3px);
    box-shadow: var(--ed-shadow-lg);
}

.book-cover img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Footer -------------------------------------------------------------- */

.ed-footer {
    background: var(--ed-dark);
    color: #9aa2ae;
    padding: 3.25rem 0 2.75rem;
    font-size: .92rem;
}

.ed-footer a {
    color: #c3cad4;
}

.ed-footer a:hover {
    color: #fff;
}

.ed-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* --- Motion preference --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .panel,
    .panel:hover,
    .title-card,
    .title-card:hover,
    .book-cover,
    .book-cover:hover {
        transform: none;
        transition: none;
    }
}