/* Eldoraigne Tennis Club — brand layer.
 *
 * Loaded by the server AFTER the template CSS + the palette <style> on
 * Eldoraigne's templated pages only (server.js _clubBrandCssLink). Colours
 * that have a website setting (accent / nav / text / surface) are set in
 * club_website_settings by scripts/brand/apply-club-brand.js — this file only
 * carries what the settings can't: the brand fonts, the tokens with no
 * setting, and the logo panel. Source + rules: brand.json, /club-brand-kit.
 *
 * Kit: navy + white only, no accent colour. Club name = Nunito Italic 600;
 * descriptors (TENNIS CLUB, EST. 1967) = Archivo Narrow, uppercase, tracked.
 * Never add a glow / shadow to the mark.
 */
@font-face { font-family: 'Nunito'; font-weight: 400; font-style: normal; font-display: swap; src: url('/club-brand/eldoraigne/fonts/nunito-regular.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 600; font-style: italic; font-display: swap; src: url('/club-brand/eldoraigne/fonts/nunito-italic.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-style: normal; font-display: swap; src: url('/club-brand/eldoraigne/fonts/nunito-bold.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-style: italic; font-display: swap; src: url('/club-brand/eldoraigne/fonts/nunito-bold-italic.woff2') format('woff2'); }
@font-face { font-family: 'Archivo Narrow'; font-weight: 400; font-style: normal; font-display: swap; src: url('/club-brand/eldoraigne/fonts/archivo-narrow-regular.woff2') format('woff2'); }
@font-face { font-family: 'Archivo Narrow'; font-weight: 600; font-style: normal; font-display: swap; src: url('/club-brand/eldoraigne/fonts/archivo-narrow-semibold.woff2') format('woff2'); }
@font-face { font-family: 'Archivo Narrow'; font-weight: 700; font-style: normal; font-display: swap; src: url('/club-brand/eldoraigne/fonts/archivo-narrow-bold.woff2') format('woff2'); }

:root {
    --brand-navy:              #0b3173;
    --brand-white:             #ffffff;
    --brand-descriptor:        #4b6fb5;   /* secondary text on white */
    --brand-descriptor-on-navy:#c3d2ec;   /* secondary text on navy */
    --brand-font-club:       Nunito, 'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;
    --brand-font-descriptor: 'Archivo Narrow', 'Arial Narrow', 'Roboto Condensed', Arial, sans-serif;

    /* Template tokens with no website setting */
    --el-font-display:   var(--brand-font-club);
    --el-accent:         var(--brand-descriptor);   /* was sky blue */
    --el-accent-strong:  var(--brand-navy);
    --el-green:          var(--brand-white);        /* was tennis-ball lime — no accent colour */
    --el-green-text:     var(--brand-navy);
    --el-brand-logo-w:   clamp(220px, 36vw, 460px);
}

body { font-family: var(--brand-font-club); }

.el-display {
    font-family: var(--brand-font-club);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* The italic "flourish" word in headings: the club-name style (Nunito
   Italic 600) in the colour of the text around it — navy on white,
   white on navy (ink on ground), never a third colour. */
.el-italic,
html.night-mode .el-italic,
.el-hero-title .el-italic,
.el-hero-title:not(.el-hero-title--home) .el-italic,
.el-ready-title .el-italic,
html.night-mode .el-ready-title .el-italic {
    font-family: var(--brand-font-club);
    font-style: italic;
    font-weight: 600;
    font-size: 1em;
    line-height: inherit;
    letter-spacing: 0;
    color: inherit;
    text-shadow: inherit;
    animation: none;
    padding: 0;
}

/* Descriptor style for eyebrows / small uppercase labels. */
.el-eyebrow,
.el-section-eyebrow,
.el-hero-eyebrow {
    font-family: var(--brand-font-descriptor);
    font-weight: 700;
    letter-spacing: 0.2em;
}
/* On the hero photo / navy: the kit's descriptor-on-navy blue. */
.el-hero-eyebrow { color: var(--brand-descriptor-on-navy); }

/* Hero logo: the white lockup on a solid navy panel (the kit's rule for a
   mark over a busy photo), half an icon height of clear space, no glow. */
.el-hero-logo,
html.night-mode .el-hero-logo,
html.night-mode .el-hero.is-hero-glow .el-hero-logo {
    width: calc(var(--el-brand-logo-w) * (var(--img-size-pct, 100) / 100));
    box-sizing: content-box;
    padding: calc(var(--el-brand-logo-w) * 0.119 * (var(--img-size-pct, 100) / 100));
    background: var(--brand-navy);
    filter: none;
    animation: none;
    box-shadow: none;
}