/* BJJ Friends content layer (TEMPLATES): hero content, title-bar type, blog cards, single post body,
   Easy TOC box, share row, post navigation, privacy page, 404. Measured off live (RECON/DESIGN.md 6 to 11).
   Fluid sizes interpolate 390 -> 1440 and assume html font-size 100%. Colour tokens come from style.css
   (:root) with the live values as fallbacks. */

@layer components {

  :where(body) {
    --c-text: var(--text, #1b1e28);
    --c-heading: var(--heading, #3a3a3a);
    --c-link: var(--link, #1e73be);
    --c-link-hover: var(--link-hover, #000);
    --c-accent: var(--accent, #dd9933);
    --c-rule: var(--rule, #e5e5e5);
    --c-surface: var(--surface, #fff);
    --c-crumb: var(--breadcrumb, #ddd);
    --c-crumb-hover: var(--breadcrumb-hover, #efcaa6);

    --ff-body: "Libre Franklin", sans-serif;
    --ff-head: "Roboto Condensed", sans-serif;
    --ff-hero: Roboto, sans-serif;

    --fs-body: clamp(0.912rem, calc(0.8793rem + 0.1341vw), 1rem);
    --fs-h1: clamp(1.875rem, calc(1.596rem + 1.143vw), 2.625rem);
    --fs-h2: clamp(1.5625rem, calc(1.261rem + 1.238vw), 2.375rem);
    --fs-h3: clamp(1.25rem, calc(1.018rem + 0.9524vw), 1.875rem);
    --fs-card-title: clamp(1.459rem, calc(1.407rem + 0.2146vw), 1.6rem);
    --fs-card-meta: clamp(0.7752rem, calc(0.7474rem + 0.114vw), 0.85rem);
    --fs-hero-title: clamp(2.098rem, calc(1.057rem + 4.27vw), 4.9rem);
    --fs-caption: clamp(0.75rem, calc(0.7314rem + 0.07619vw), 0.8rem);
    --fs-toc-title: clamp(1.094rem, calc(1.055rem + 0.1609vw), 1.2rem);
    --fs-h4: clamp(1.368rem, calc(1.319rem + 0.2011vw), 1.5rem);
    --fs-404-sub: clamp(1.368rem, calc(1.319rem + 0.2011vw), 1.5rem);

    --sp-p: clamp(1.824rem, calc(1.759rem + 0.2682vw), 2rem);           /* 2em: p margin, card gaps */
    --sp-primary: clamp(3.648rem, calc(3.517rem + 0.5364vw), 4rem);     /* #primary margin-block */
    --sp-1em: var(--fs-body);
    --sp-15em: calc(var(--fs-body) * 1.5);
    --sp-card-x: clamp(0.912rem, calc(0.1365rem + 3.182vw), 3rem);
    --sp-card-y: clamp(1.368rem, calc(0.7618rem + 2.487vw), 3rem);
  }

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

  :where(.hero, .blog, .single, .page-wrap, .titlebar) :where(h1, h2, h3, h4) { text-wrap: balance; }
  :where(.blog, .single, .page-wrap) :where(p, li, figcaption) { text-wrap: pretty; }
  :where(.blog, .single, .page-wrap) :where(p, li, figcaption):has(br) { text-wrap: wrap; }

  /* ---------- Home hero (Elementor section 1739) ---------- */
  .hero {
    position: relative;
    isolation: isolate;
    color: #fff;
    padding-block: clamp(7.5rem, calc(6.339rem + 4.762vw), 10.625rem) clamp(3.069rem, calc(0.2156rem + 11.705vw), 10.75rem);
  }
  /* Photo is a responsive <img> (bf_cover_img, the mobile LCP) under the overlay. */
  .hero__bg {
    position: absolute; inset: 0; z-index: -2;
    inline-size: 100%; block-size: 100%;
    object-fit: cover;
    object-position: var(--hero-pos, center center);
    pointer-events: none;
  }
  .hero::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: var(--hero-overlay, #54595f);
    opacity: var(--hero-overlay-opacity, .5);
  }
  .hero__inner { max-inline-size: 1140px; margin-inline: auto; padding-inline: 10px; }
  .hero__col { inline-size: 52%; }
  .hero__kicker {
    margin: 0 0 20px;
    font: 600 var(--fs-h2)/1.3 var(--ff-hero);
    color: #fff;
  }
  .hero__title {
    margin: 0 0 20px -3px;
    font: 600 var(--fs-hero-title)/1.4 var(--ff-hero);
    color: #fff;
  }
  .hero__text p {
    margin: 0;
    font: 400 var(--fs-body)/1.5 var(--ff-hero);
    letter-spacing: -0.2px;
    color: #fff;
  }
  .hero__text strong { font-weight: 700; }
  @media (width >= 922px) { .hero .br-desk { display: none; } }
  @media (768px <= width <= 1024px) { .hero__col { inline-size: 60%; padding-inline: 20px; } }
  @media (width < 768px) {
    .hero__bg { object-position: var(--hero-pos-m, 34% 0%); }
    .hero__col { inline-size: 92%; padding: 0 10px 0 25px; }
    .hero__title { margin-inline-start: -1px; }
    .hero__text p { line-height: 1.3; }
  }

  /* ---------- Title bar content (inside THEME-CORE's .masthead) ---------- */
  .titlebar { text-align: center; }
  .titlebar__title {
    margin: 0;
    font: 700 var(--fs-h1)/1.2 var(--ff-head);
    color: #fff;
  }
  .titlebar__crumbs {
    margin-block-start: 15px;
    font: 400 var(--fs-body)/1.9 var(--ff-body);
    color: var(--c-crumb);
  }
  .titlebar__crumbs a { color: #fff; text-decoration: none; }
  @media (hover: hover) { .titlebar__crumbs a:hover { color: var(--c-crumb-hover); } }

  /* ---------- Blog grid + cards (home, categories, tags) ---------- */
  .blog {
    max-inline-size: 1100px;
    margin: var(--sp-primary) auto;
    padding-inline: 20px;
  }
  .blog__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-p) 40px;
    padding-block-end: var(--sp-p);
  }
  @media (width >= 922px) {
    .blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 4px; }
  }
  @media (width <= 921px) { .blog__grid { padding-block-end: 0; } }
  .card {
    display: flex;
    flex-direction: column;
    padding-block-end: var(--sp-p);
    border-block-end: 1px solid var(--c-rule);
    font: 400 var(--fs-body)/1.9 var(--ff-body);
    color: var(--c-text);
  }
  .card__media { display: block; }
  .card__media img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 506 / 285;
    object-fit: cover;
  }
  .card__title {
    margin: var(--sp-15em) 0 0.5em;
    font: 700 var(--fs-card-title)/1.23 var(--ff-head);
    color: var(--c-heading);
  }
  .card__title a { color: inherit; text-decoration: none; }
  .card__meta {
    margin: 0;
    font: 600 var(--fs-card-meta)/1.45 var(--ff-body);
    text-transform: uppercase;
    color: var(--c-text);
  }
  .card__meta a { color: var(--c-accent); text-decoration: none; }
  .card__excerpt { margin-block-start: calc(var(--fs-body) * 1.02); }
  .card__excerpt p { margin: 0; }
  .card__more { margin: var(--sp-15em) 0 0.8em; }
  .card__more a { color: var(--c-accent); text-decoration: none; }
  @media (hover: hover) {
    .card__meta a:hover, .card__more a:hover { color: var(--c-link-hover); }
  }
  .blog .pagination {
    display: flex; justify-content: center; gap: 1.5em;
    margin-block-start: var(--sp-p);
    font: 400 var(--fs-body)/1.9 var(--ff-body);
  }
  .blog .pagination a { color: var(--c-link); }

  /* ---------- Single post / page card ---------- */
  .single {
    max-inline-size: 1100px;
    margin: var(--sp-primary) auto;
    padding-inline: 20px;
  }
  .page-wrap {
    max-inline-size: 1240px;
    margin: var(--sp-primary) auto;
    padding-inline: 20px;
  }
  @media (width <= 921px) {
    .single, .page-wrap { padding-inline: calc(var(--fs-body) * 0.54); }
    .is-page .page-wrap { margin-block: 0; }
  }
  @media (545px <= width <= 921px) { .is-page .page-wrap { padding-inline: 20px; } }
  .single__card {
    background: var(--c-surface);
    padding: var(--sp-card-y) var(--sp-card-x);
    font: 400 var(--fs-body)/1.9 var(--ff-body);
    color: var(--c-text);
  }
  .entry-meta {
    font: 400 var(--fs-body)/1.45 var(--ff-body);
    color: var(--c-text);
  }
  .entry-meta a { color: var(--c-accent); text-decoration: none; }
  @media (hover: hover) { .entry-meta a:hover { color: var(--c-link-hover); } }

  .entry-content { display: flow-root; }
  .entry-content > :last-child { margin-block-end: 0; }
  .entry-content p { margin: 0 0 var(--sp-p); }
  .entry-content :where(h2, h3, h4) {
    clear: both;
    margin: 0 0 20px;
    font-family: var(--ff-head);
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-heading);
  }
  .entry-content h2 { font-size: var(--fs-h2); }
  .entry-content h3 { font-size: var(--fs-h3); }
  .entry-content h4 { font-size: var(--fs-h4); line-height: 1.2; }
  .entry-content :where(h2, h3) strong { font-weight: inherit; }
  .entry-content :where(h2, h3)[id] { scroll-margin-block-start: 30px; }
  .entry-content :where(ul, ol) { margin: 0 0 var(--sp-15em); padding: 0; }
  .entry-content ul { list-style: disc outside; }
  .entry-content li + li { margin-block-start: 0.35em; }
  .entry-content .toc__nav li + li { margin-block-start: 0; }
  .entry-content ol { list-style: decimal outside; }
  .entry-content li > :where(ul, ol) { margin-block-end: 0; padding-inline-start: 1.5em; }
  .entry-content strong { font-weight: 700; }
  .entry-content a { color: var(--c-link); text-decoration: underline; }
  @media (hover: hover) { .entry-content a:hover { color: var(--c-link-hover); } }
  .entry-content blockquote {
    margin: 0 0 var(--sp-p);
    padding: 1.2em 0 1.2em 2em;
    border-inline-start: 5px solid var(--c-rule);
    font-style: italic;
  }
  .entry-content hr { border: 0; border-block-start: 1px solid var(--c-rule); margin: var(--sp-p) 0; }
  .entry-content table { border-collapse: collapse; inline-size: 100%; margin: 0 0 var(--sp-p); }
  .entry-content :where(th, td) { border: 1px solid var(--c-rule); padding: 0.5em 0.75em; }

  /* Images and figures (WordPress block markup kept in the content). */
  .entry-content img {
    max-inline-size: min(100%, 1024px);
    block-size: auto;
    vertical-align: middle;
  }
  .entry-content figure { margin: 0 0 var(--sp-1em); }
  .entry-content .wp-block-image { display: table; }
  .entry-content .wp-block-image:not(.alignleft, .alignright) { max-inline-size: 100%; }
  .entry-content .wp-block-image figcaption { display: table-caption; caption-side: bottom; }
  .entry-content figcaption {
    margin: 0.5em 0 0;
    font-size: var(--fs-caption);
    line-height: 1.5;
    text-align: center;
  }
  .entry-content .alignleft { float: left; margin: 0.5em 1em 0.5em 0; }
  .entry-content .alignright { float: right; margin: 0.5em 0 0.5em 1em; }
  .entry-content .aligncenter { margin-inline: auto; }

  /* Legacy gallery (blocks-gallery-grid). */
  /* Live WP wraps the grid in a flex gallery, so the grid shrinks to the images' natural width (2 x 415 + 16 = 846 of 964). */
  .entry-content .wp-block-gallery { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 var(--sp-1em); }
  .entry-content .wp-block-gallery > .blocks-gallery-caption { flex-basis: 100%; }
  .entry-content .blocks-gallery-grid {
    display: flex; flex-wrap: wrap;
    margin: 0; padding: 0; list-style: none;
  }
  .entry-content .blocks-gallery-item {
    display: flex; flex-direction: column; justify-content: center; flex-grow: 1;
    inline-size: calc(50% - 8px);
    margin: 0 16px 16px 0;
    position: relative;
  }
  .entry-content .blocks-gallery-item:nth-of-type(2n) { margin-inline-end: 0; }
  @media (width >= 600px) {
    .entry-content .columns-3 .blocks-gallery-item { inline-size: calc((100% - 32px) / 3); }
    .entry-content .columns-3 .blocks-gallery-item:nth-of-type(2n) { margin-inline-end: 16px; }
    .entry-content .columns-3 .blocks-gallery-item:nth-of-type(3n) { margin-inline-end: 0; }
  }
  .entry-content .blocks-gallery-item:last-child { margin-inline-end: 0; }
  .entry-content .blocks-gallery-item figure {
    margin: 0; block-size: 100%;
    display: flex; align-items: flex-end; justify-content: flex-start;
  }
  .entry-content .blocks-gallery-item img { display: block; inline-size: auto; max-inline-size: 100%; }
  .entry-content .is-cropped .blocks-gallery-item img { block-size: 100%; flex: 1; object-fit: cover; }
  .entry-content .blocks-gallery-caption { display: block; margin: 24px 0 0; }

  /* ---------- Easy TOC box ---------- */
  .toc {
    inline-size: fit-content;
    max-inline-size: 100%;
    margin: 0 auto var(--sp-1em);
    padding: 10px 15px; /* live 10/20/10/10: same 30px, kept symmetric (rhythm R2) */
    background: var(--toc-bg, #f9f9f9);
    border: 1px solid var(--toc-border, #aaa);
    border-radius: 4px;
    box-shadow: 0 1px 1px rgb(0 0 0 / .05);
    font-family: var(--ff-body);
  }
  .toc__head {
    display: block;
    padding-block-start: 0.17em; /* live title sits 2.7px lower in the box */
    list-style: none;
    cursor: pointer;
  }
  .toc__head::-webkit-details-marker { display: none; }
  .toc__title {
    display: block;
    font-size: var(--fs-toc-title);
    font-weight: 500;
    line-height: 1.45;
    color: var(--c-text);
  }
  .toc__icon {
    display: flex; align-items: center; gap: 1px;
    inline-size: fit-content;
    block-size: 30px;
    padding-inline-start: 5px;
    color: #999;
  }
  .toc__icon svg { display: block; }
  .toc__head:focus-visible { outline: 2px solid var(--c-link); outline-offset: 2px; border-radius: 2px; }
  .toc__nav ul { margin: 0; padding: 0; list-style: none; counter-reset: item; }
  .toc__nav ul ul { margin-inline-start: 1.5em; }
  .toc__nav li {
    margin: 0;
    font-size: calc(var(--fs-body) * .95);
    font-weight: 500;
    line-height: 1.6;
  }
  .toc__nav ul ul li { font-size: 90%; }
  .toc__nav a {
    font-size: 95%;
    color: var(--toc-link, #444);
    text-decoration: none;
  }
  .toc__nav a::before {
    content: counters(item, ".", decimal) ". ";
    counter-increment: item;
    display: inline-block;
    margin-inline-end: .2em;
  }
  @media (hover: hover) { .toc__nav a:hover { color: var(--c-link-hover); text-decoration: underline; } }

  /* ---------- Share row (Sassy Social Share) ---------- */
  .share { clear: both; text-align: center; }
  .share__title {
    margin: 0;
    font: 700 var(--fs-body)/1.9 var(--ff-body);
    color: var(--c-text);
  }
  .entry-content .share__title { margin: 0; }
  .share__list, .entry-content .share__list {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    margin: 1px 0; padding: 0; list-style: none;
  }
  .share__list li { margin: 0; display: flex; }
  .entry-content .share__list li + li { margin-block-start: 0; }
  .share__btn {
    display: flex; align-items: center; justify-content: center;
    flex: none;
    inline-size: 35px; block-size: 35px;
    margin: 2px;
    border-radius: 999px;
    overflow: hidden;
  }
  .share__btn svg { display: block; inline-size: 35px; block-size: 35px; border-radius: 999px; }
  .share__btn--facebook { background: #0765fe; }
  .share__btn--twitter { background: #55acee; }
  .share__btn--reddit { background: #ff5700; }
  .share__btn--gmail { background: #e5e5e5; }
  .share__btn--whatsapp { background: #55eb4c; }
  .share__btn:focus-visible { outline: 2px solid var(--c-link); outline-offset: 2px; }

  /* ---------- Post navigation ---------- */
  .post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-block-start: var(--sp-p);
    font: 400 var(--fs-body)/1.9 var(--ff-body);
  }
  .post-nav a { color: var(--c-link); text-decoration: none; }
  @media (hover: hover) { .post-nav a:hover { color: var(--c-link-hover); } }
  .post-nav__prev { grid-column: 1; }
  .post-nav__next { grid-column: 2; text-align: end; }
  @media (width <= 921px) {
    .post-nav {
      grid-template-columns: 1fr;
      gap: var(--sp-1em);
      padding-block-start: var(--sp-15em);
      text-align: center;
    }
    .post-nav__prev, .post-nav__next { grid-column: 1; text-align: center; }
    .post-nav__arrow { display: none; }
  }

  /* ---------- 404 ---------- */
  .error-404 { text-align: center; }
  .error-404__title {
    margin: 0 0 24px;
    font: 700 var(--fs-h1)/1.4 var(--ff-head);
    color: var(--c-heading);
  }
  .error-404__sub {
    margin: 0 0 32px;
    font: 700 var(--fs-404-sub)/1.3 var(--ff-head);
    color: var(--c-heading);
  }
  .search-form {
    position: relative;
    inline-size: min(100%, 370px);
    margin-inline: auto;
  }
  .search-form__field {
    display: block;
    inline-size: 100%;
    box-sizing: border-box;
    padding: 13px 45px 11px 15px;
    background: var(--search-bg, #fafafa);
    border: 1px solid var(--c-rule);
    border-radius: 2px;
    font: 400 max(1rem, 16px)/1.9 var(--ff-body);
    color: var(--search-text, #666);
    appearance: none;
  }
  .search-form__field::placeholder { color: var(--search-text, #666); opacity: 1; }
  .search-form__field::-webkit-search-cancel-button { appearance: none; }
  .search-form__field:focus { outline: none; border-color: var(--c-text); box-shadow: 0 0 0 1px var(--c-text); }
  .search-form__submit {
    position: absolute; inset-block: 0; inset-inline-end: 0;
    display: grid; place-items: center;
    inline-size: 45px;
    padding: 0; border: 0; border-radius: 2px;
    background: transparent;
    color: var(--c-text);
    cursor: pointer;
  }
  .search-form__submit:focus-visible { outline: 2px solid var(--c-link); outline-offset: -4px; }
}

/* Phone fix (live WP bug, SPEC D3): text beside a 300 to 415px float in a 345px column broke mid-word.
   Below 545px only the small floats (128 and 167px logos) keep wrapping text; wider floated figures stack centred. */
@layer components {
  @media (width <= 544px) {
    .entry-content :is(figure.alignleft, figure.alignright):not(:has(img[width="128"], img[width="167"])) {
      float: none;
      display: table;
      margin-inline: auto;
      max-inline-size: 100%;
    }
  }
}