/* BJJ Friends theme core (THEME-CORE). 1:1 port of the Astra + Elementor WordPress site, measured off the live
   render 2026-11-11 (RECON/DESIGN.md). Fluid tokens interpolate 390 to 1440 px, rem assumes a 16px root.
   This file: tokens, fonts, base, containers, masthead box, header, nav, mobile menu, footer, skip link, focus.
   Everything inside <main> (hero content, cards, post body, title-bar h1 + breadcrumb, 404) lives in content.css. */

/* Fonts (D1): Libre Franklin is declared at 400 only and without an italic face, so 500 to 700 and italics are
   synthesized exactly like live (which only loads the 400 face). Roboto Condensed 700 only (live 404 asks for 400
   and gets the 700 face). Roboto real weights (hero). latin + latin-ext. */
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/libre-franklin-roman-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/libre-franklin-roman-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/roboto-condensed-roman-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/roboto-condensed-roman-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/roboto-roman-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/roboto-roman-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* colours (DESIGN 1) */
  --text: #1b1e28;
  --heading: #3a3a3a;
  --link: #1e73be;
  --link-hover: #000000;
  --accent: #dd9933;
  --brand-red: #be1622;
  --white: #ffffff;
  --breadcrumb: #dddddd;
  --breadcrumb-hover: #efcaa6;
  --nav-active: #f9f9f9;
  --page-bg: #f5f5f5;
  --surface: #ffffff;
  --rule: #e5e5e5;
  --toc-bg: #f9f9f9;
  --toc-border: #aaaaaa;
  --toc-link: #444444;
  --search-bg: #fafafa;
  --search-text: #666666;
  --overlay: rgb(0 0 0 / 0.5);
  --masthead-fallback: #eaeaea;

  /* fonts (DESIGN 2) */
  --font-body: "Libre Franklin", sans-serif;
  --font-head: "Roboto Condensed", sans-serif;
  --font-hero: "Roboto", sans-serif;

  /* type scale (DESIGN 3), 390 to 1440 */
  --fs-body: clamp(0.912rem, calc(0.8793rem + 0.1341vw), 1rem);          /* 14.59 to 16 */
  --fs-h1: clamp(1.875rem, calc(1.596rem + 1.143vw), 2.625rem);          /* 30 to 42: title bar h1, 404 h1 */
  --fs-h2: clamp(1.562rem, calc(1.261rem + 1.238vw), 2.375rem);          /* 25 to 38: content h2, hero kicker */
  --fs-h3: clamp(1.25rem, calc(1.018rem + 0.9524vw), 1.875rem);          /* 20 to 30 */
  --fs-card-title: clamp(1.459rem, calc(1.407rem + 0.2146vw), 1.6rem);   /* 23.35 to 25.6 */
  --fs-meta: clamp(0.7752rem, calc(0.7474rem + 0.114vw), 0.85rem);       /* 12.4 to 13.6 */
  --fs-hero-title: clamp(2.098rem, calc(1.057rem + 4.27vw), 4.9rem);     /* 33.56 to 78.4 */
  --fs-figcaption: clamp(0.75rem, calc(0.7314rem + 0.07619vw), 0.8rem);  /* 12 to 12.8 */
  --fs-toc-title: clamp(1.094rem, calc(1.055rem + 0.1609vw), 1.2rem);    /* 17.51 to 19.2 */
  --fs-toc-link: clamp(0.8231rem, calc(0.7936rem + 0.121vw), 0.9025rem); /* 13.17 to 14.44 */
  --fs-404-sub: clamp(1.368rem, calc(1.319rem + 0.2011vw), 1.5rem);      /* 21.89 to 24 */
  --lh-body: 1.9;

  /* spacing (DESIGN 3) */
  --space-p: clamp(1.824rem, calc(1.759rem + 0.2682vw), 2rem);           /* 29.18 to 32: p mb, card gaps */
  --space-primary: clamp(3.648rem, calc(3.517rem + 0.5364vw), 4rem);     /* 58.37 to 64: #primary margin-block */
  --space-article-inline: clamp(0.912rem, calc(0.1365rem + 3.182vw), 3rem); /* 14.59 to 48 */
  --space-article-block: clamp(1.368rem, calc(0.7618rem + 2.487vw), 3rem);  /* 21.89 to 48 */
  --hero-top: clamp(5rem, calc(3.607rem + 5.714vw), 8.75rem);            /* 80 to 140 */
  --hero-bottom: clamp(0rem, calc(-3.018rem + 12.38vw), 8.125rem);       /* 0 to 130 */

  /* containers (DESIGN 4): max widths include the 20px side padding */
  --gutter: 1.25rem;                                                     /* 20 */
  --gutter-boxed: clamp(0.4925rem, calc(0.2111rem + 1.154vw), 1.25rem);  /* 7.88 to 20: boxed singles */
  --container: 77.5rem;        /* 1240: header, title bar, footer, page + 404 (content 1200) */
  --container-blog: 68.75rem;  /* 1100: home, archives, posts (content 1060) */

  /* header (DESIGN 5) */
  --logo-w: 11.25rem;          /* 180 */
  --header-row: 80px;
  --header-min: 80.9px;
  --header-pad: 16px;
}

@media (width <= 921px) {
  :root { --header-pad: 13.6px; --header-min: 80px; }
}

@layer base, components, utilities;

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: var(--lh-body);
    color: var(--text);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word;
  }
  /* Footer sits at the viewport bottom on short pages (404), as Astra does on live. */
  body { display: flex; flex-direction: column; min-block-size: 100dvh; }
  body > main { flex: 1 0 auto; }
  body.is-boxed { background: var(--page-bg); }
  body.is-plain { background: var(--surface); }

  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--heading);
    text-wrap: balance;
  }
  h1 { font-size: var(--fs-h1); line-height: 1.4; }
  h2 { font-size: var(--fs-h2); line-height: 1.3; }
  h3 { font-size: var(--fs-h3); line-height: 1.3; }

  p, ul, ol, figure, blockquote { margin: 0; }
  p, li, figcaption, blockquote { text-wrap: pretty; }
  :where(p, li, figcaption, blockquote):has(br) { text-wrap: wrap; }

  img, svg, video { max-inline-size: 100%; block-size: auto; }
  img { display: block; }
  svg { display: inline-block; }

  a { color: var(--link); }
  @media (hover: hover) { a:hover { color: var(--link-hover); } }

  button { font: inherit; color: inherit; }

  :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
  main:focus { outline: none; }

  a[href^="tel:"], a[href^="mailto:"] { white-space: nowrap; }
}

@layer components {
  /* containers */
  .container {
    inline-size: 100%;
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .container--blog { max-inline-size: var(--container-blog); }
  .container--page { max-inline-size: var(--container); }
  .is-boxed .container--blog,
  .is-boxed .container--page { padding-inline: var(--gutter-boxed); }

  /* skip link */
  .skip-link {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--white);
    color: var(--text);
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    translate: 0 -200%;
  }
  .skip-link span { display: inline-block; text-box: trim-both cap alphabetic; }
  .skip-link:focus-visible { translate: 0 0; outline-offset: 0; }

  /* masthead box (D4). hero: header floats over the home hero in <main>. titlebar: one photo + 50% black
     overlay behind the header and the title section. plain: white header with a bottom rule (404). */
  .masthead { position: relative; }
  .masthead--hero {
    position: absolute;
    inset: 0 0 auto;
    z-index: 20;
  }
  /* Photos (title bar, home hero) are responsive backgrounds: background-image per viewport/dpr comes from the
     <style> bf_bg_head() prints in <head>, position and size live here. */
  .masthead--titlebar {
    background-color: var(--masthead-fallback);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: var(--masthead-pos, center center);
  }
  .hero {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: var(--hero-pos, center center);
  }
  @media (width < 768px) { .hero { background-position: var(--hero-pos-m, 34% 0%); } }
  .masthead--titlebar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay);
    pointer-events: none;
  }
  .masthead--titlebar > * { position: relative; z-index: 1; }
  .masthead--titlebar > .site-header { z-index: 2; }
  .masthead__title {
    padding-block: 3%;
    text-align: center;
    color: var(--white);
  }
  .masthead__title :where(h1, h2, a) { color: var(--white); }
  .masthead--plain .site-header__bar {
    background: var(--white);
    border-block-end: 1px solid var(--rule);
  }

  /* header */
  .site-header { position: relative; }
  .site-header__bar { padding-block: var(--header-pad); }
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-block-size: var(--header-min);
  }
  .site-header__logo { display: block; flex: none; inline-size: var(--logo-w); }
  /* Over a photo: white focus ring on the logo link (currentColor), and a top scrim so the white nav text keeps
     4.5:1 on bright photo areas (pixel-sampled, temp/img/contrast.mjs). Held through the text row, fades out below. */
  :where(.masthead--hero, .masthead--titlebar) .site-header__logo { color: var(--white); }
  :where(.masthead--hero, .masthead--titlebar) .site-header__bar {
    background-image: linear-gradient(rgb(0 0 0 / 0.42), rgb(0 0 0 / 0.42) 60%, rgb(0 0 0 / 0));
  }
  .site-header__logo img { inline-size: 100%; block-size: auto; }

  .site-nav__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .site-nav__link {
    display: block;
    padding-inline: 1rem;
    font-size: 1rem;
    line-height: var(--header-row);
    color: var(--white);
    text-decoration: none;
  }
  .masthead--titlebar .site-nav__link[aria-current="page"] { color: var(--nav-active); }
  .masthead--plain .site-nav__link { color: var(--link); }
  @media (hover: hover) {
    .masthead--hero .site-nav__link:hover,
    .masthead--titlebar .site-nav__link:hover { color: var(--white); }
    .masthead--plain .site-nav__link:hover { color: var(--link-hover); }
  }

  .site-header__toggle { display: none; }

  @media (width <= 921px) {
    .site-header__toggle {
      display: grid;
      place-items: center;
      inline-size: 41.9px;
      aspect-ratio: 1;
      margin-inline-end: 0;
      padding: 0;
      border: 0;
      border-radius: 2px;
      background: transparent;
      color: var(--white);
      cursor: pointer;
    }
    .masthead--plain .site-header__toggle { color: var(--text); }
    .site-header__toggle svg { inline-size: 20px; block-size: 20px; grid-area: 1 / 1; }
    .site-header__icon-close { visibility: hidden; }
    .site-header--open .site-header__icon-open { visibility: hidden; }
    .site-header--open .site-header__icon-close { visibility: visible; }

    /* dropdown: white panel under the bar, same 3 items as desktop, dark text */
    .js .site-nav { display: none; }
    .site-nav {
      position: absolute;
      inset: 100% 0 auto;
      z-index: 30;
      background: var(--white);
    }
    .site-header--open .site-nav { display: block; }
    .site-nav__list { display: block; }
    .site-nav__link {
      display: flex;
      align-items: center;
      min-block-size: 3em;
      padding-inline: var(--gutter);
      font-size: var(--fs-body);
      line-height: 1;
      color: #000000;
    }
    .site-nav__link,
    .masthead--plain .site-nav__link,
    .masthead--titlebar .site-nav__link[aria-current="page"] { color: #000000; }
    @media (hover: hover) {
      .masthead--hero .site-nav__link:hover,
      .masthead--titlebar .site-nav__link:hover,
      .masthead--plain .site-nav__link:hover { color: var(--link); }
    }
    .site-nav__link:focus-visible { outline-offset: -2px; }
    .masthead--plain .site-header__bar { background: transparent; }
  }

  /* footer */
  .site-footer {
    padding-block: 20px;
    border-block-start: 1px solid var(--rule);
    background: var(--white);
    color: var(--text);
  }
  .site-footer__inner { min-block-size: 80px; }
  .site-footer__copy {
    margin: 0;
    text-align: center;
    text-wrap: balance;
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}