/*
 * GMM template - core stylesheet (hand-authored, no build step).
 *
 * RULES OF THIS FILE
 *  - Literal values live ONLY in section 1 (:root). Every other rule uses var(--token).
 *  - Media queries redefine tokens; they never override properties.
 *  - Exception: @font-face descriptors (cannot read custom properties).
 *  - Site-specific tweaks go in css/local.css (loaded after this file, never replaced by an update).
 *  - Decorative styles are opt-in by class. No "all h3" or "all hr" site-wide looks.
 *
 * SECTIONS
 *   0 Fonts            1 Tokens          2 Base              3 Header and navigation
 *   4 Breadcrumb       5 Content pages   6 Home sections      7 Solo and Ensemble overview menu
 *   8 Catalog list     9 Song page      10 Composer pages    11 Search results
 *  12 Footer          13 Utilities      14 System messages and error page
 *  15 Account forms (com_users)
 */

/* ============================== 0. FONTS ============================== */
/* Self-hosted. The .woff2 files go in ../fonts/ (see fonts/README.txt). */
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/libre-baskerville-400.woff2") format("woff2")}
@font-face{font-family:"Libre Baskerville";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/libre-baskerville-400italic.woff2") format("woff2")}
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/libre-baskerville-700.woff2") format("woff2")}
@font-face{font-family:"Libre Baskerville";font-style:italic;font-weight:700;font-display:swap;src:url("../fonts/libre-baskerville-700italic.woff2") format("woff2")}
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/alegreya-sans-400.woff2") format("woff2")}
@font-face{font-family:"Alegreya Sans";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/alegreya-sans-400italic.woff2") format("woff2")}
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/alegreya-sans-500.woff2") format("woff2")}
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/alegreya-sans-700.woff2") format("woff2")}
@font-face{font-family:"Alegreya Sans";font-style:italic;font-weight:700;font-display:swap;src:url("../fonts/alegreya-sans-700italic.woff2") format("woff2")}

/* ============================== 1. TOKENS ============================== */
:root {
  /* --- Brand palette (brand-guides.md) --- */
  --color-primary: #416C41;
  --color-primary-light: #3E9B52;
  --color-primary-dark: #344E2C;
  --color-neutral: #E1E1E1;
  --color-light: #F0F0F0;
  --color-warm: #FEE9A6;
  --color-gold: #D7AD2E;
  --color-orange: #F36D38;
  --color-blue: #0D3A59;
  --color-gray: #535353;

  /* --- Derived surfaces --- */
  --color-wash: #E8F1E8;
  --color-wash-edge: #CBDACB;
  --color-surface: #FFFFFF;
  --color-black: #000000;

  /* --- Text-safe variants (WCAG 2.2 AA, approved) --- */
  --color-link: #276A37;
  --color-link-on-dark: #BFE6C8;
  --color-gold-on-dark: #E3BC4B;
  --color-text: #2B2B2B;
  --color-text-soft: #3A3A3A;
  --color-text-strong: #1A1A1A;
  --color-text-menu: #222222;
  --color-on-primary: #FFFFFF;
  --color-footer-text: #EEF5EE;
  --color-line-on-dark: #FFFFFF40;
  --color-notice-text: #2C3A22;
  --color-danger: #B3261E;
  --color-input-edge: #6B7B6B;
  --color-danger-wash: #FDECEA;

  /* --- Shadows --- */
  --shadow-card: 0 2px 10px #344E2C1A;
  --shadow-card-hover: 0 6px 18px #344E2C33;
  --shadow-se-card: 0 2px 10px #344E2C14;
  --shadow-chip: 0 2px 8px #344E2C14;
  --shadow-panel: 0 4px 18px #344E2C1A;
  --shadow-tile: 0 10px 30px #344E2C1F;
  --shadow-icon: 0 8px 24px #344E2C26;
  --shadow-cover: 0 4px 12px #0004;
  --shadow-cover-md: 0 5px 16px #0004;
  --shadow-cover-lg: 0 10px 30px #0006;
  --shadow-photo: 0 6px 18px #0003;
  --shadow-drop: 0 8px 24px #0002;
  --shadow-stuck: 0 4px 14px #0003;

  /* --- Gradients --- */
  --grad-dist: linear-gradient(var(--color-wash), var(--color-surface) 16rem);
  --grad-media: radial-gradient(circle at 30% 20%, var(--color-surface) 0, var(--color-wash) 70%);

  /* --- Font families --- */
  --font-body: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-head: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head-size: 1.12; /* Alegreya Sans runs small, so headings are scaled up */

  /* --- Font sizes (relative units throughout) --- */
  --fs-2xs: 0.8rem;
  --fs-xs: 0.875rem;
  --fs-inst: 0.9rem;
  --fs-eyebrow: 0.9rem;
  --fs-label: 0.9rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.05rem;
  --fs-lg: 1.1rem;
  --fs-credit: 1.125rem;
  --fs-btn: 1.15rem;
  --fs-xl: 1.2rem;
  --fs-price: 1.5rem;
  --fs-brand: clamp(1.4rem, 3.5vw, 2.1rem);
  --fs-h1: calc(var(--head-size) * clamp(2rem, 5vw, 3rem));
  --fs-h2: calc(var(--head-size) * clamp(1.6rem, 3.2vw, 2.2rem));
  --fs-h3: calc(var(--head-size) * clamp(1.25rem, 2.4vw, 1.6rem));
  --fs-h4: calc(var(--head-size) * 1.25rem);
  --fs-nav: calc(var(--head-size) * 1.1rem);
  --fs-block-title: calc(var(--head-size) * 1.2rem);
  --fs-dir-name: calc(var(--head-size) * 1.15rem);
  --fs-card-title: calc(var(--head-size) * 1.35rem);
  --fs-grade-big: calc(var(--head-size) * 1.5rem);
  --fs-result-title: calc(var(--head-size) * 1.6rem);
  --fs-se-head: calc(var(--head-size) * clamp(1.4rem, 2.6vw, 1.75rem));

  /* --- Line heights --- */
  --flh-none: 1;
  --flh-normal: normal;
  --flh-inherit: inherit;
  --flh-tight: 1.15;
  --flh-snug: 1.2;
  --flh-compact: 1.3;
  --flh-credit: 1.4;
  --flh-body: 1.65;

  /* --- Font weights --- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Letter spacing --- */
  --ls-normal: normal;
  --ls-brand: 0.04em;
  --ls-label: 0.08em;
  --ls-caps: 0.1em;
  --ls-wide: 0.12em;

  /* --- Border radius --- */
  --br-xs: 3px;
  --br-sm: 4px;
  --br-md: 6px;
  --br-input: 8px;
  --br-tile: 10px;
  --br-chip: 12px;
  --br-card: 14px;
  --br-lg: 18px;
  --br-xl: 22px;
  --br-pill: 999px;
  --br-round: 50%;
  --br-none: 0;

  /* --- Border widths --- */
  --bw-hair: 1px;
  --bw-thin: 2px;
  --bw-thick: 3px;
  --bw-accent: 5px;
  --bw-flag: 6px;

  /* --- Spacing scale --- */
  --sp-1: 0.125rem;
  --sp-2: 0.25rem;
  --sp-3: 0.375rem;
  --sp-4: 0.5rem;
  --sp-5: 0.625rem;
  --sp-6: 0.75rem;
  --sp-7: 0.875rem;
  --sp-8: 1rem;
  --sp-10: 1.25rem;
  --sp-12: 1.5rem;
  --sp-16: 2rem;
  --sp-20: 2.5rem;
  --sp-24: 3rem;
  --pad-se-card: 1.25rem 1.4rem;
  --sp-li: 0.35rem;
  --pad-btn: 0.7rem 1.5rem;
  --pad-input: 0.55rem 0.75rem;
  --pad-se-head: 0.7rem 1.25rem;
  --pad-se-row: 0.55rem 1.25rem;
  --sp-h3-tight: 0.4em;
  --sp-h3-callout: 0.3em;
  --sp-fluid-callout: clamp(2rem, 5vw, 3rem);
  --sp-fluid: clamp(2rem, 5vw, 3.5rem);
  --sp-fluid-sm: clamp(1.25rem, 4vw, 2.5rem);
  --sp-fluid-row: clamp(2rem, 5vw, 3.25rem);
  --sp-fluid-card: clamp(1.25rem, 4vw, 2rem);
  --sp-fluid-gap: clamp(2rem, 6vw, 5rem);
  --gutter: clamp(1rem, 4vw, 3rem);

  /* --- Widths and sizes --- */
  --w-measure: min(72rem, 100% - 2 * var(--gutter));
  --w-wide: min(100% - 2 * var(--gutter), 90rem);
  --w-prose: 46rem;
  --w-intro: 44rem;
  --w-fine: 52rem;
  --w-brand: 20rem;            /* header logo: was 26rem, about 23% smaller */
  --w-footer-logo: 19.5rem;    /* footer logo: was 26rem, 25% smaller */
  --w-dropdown: 17rem;
  --w-card-min: min(100%, 22rem);
  --w-footer-col: min(100%, 15rem);
  --w-callout-col: min(100%, 18rem);
  --w-callout-text: 14rem;
  --w-songrow-min: min(100%, 20rem);
  --w-dir-min: min(100%, 16rem);
  --w-score-min: 8rem;
  --w-search-input: 9rem;
  --w-meta-label: 5.5rem;
  --w-form: 30rem;
  --w-form-wide: 40rem;
  --w-meta-hang: calc(var(--w-meta-label) + var(--sp-4));
  --w-credit-label: 8rem;
  --w-photo: 13rem;
  --w-cover-song: 20rem;
  --size-touch: 2.75rem;
  --size-check: 1.375rem;
  --size-cover-sm: 5.5rem;
  --size-cover-md: 7.5rem;
  --size-cover-lg: 8rem;
  --size-icon: 1.5rem;
  --size-icon-sm: 1.4rem;
  --size-icon-pg: 1.25rem;
  --size-score-icon: 2.4rem;
  --size-callout-icon: 8rem;
  --size-callout-glyph: 4rem;
  --size-dist-media: 13rem;
  --size-chevron: 0.45em;
  --size-hidden: 1px;
  --size-skip-offset: -999px;
  --band-spread: 100vmax;
  --scroll-pad: 7rem;
  --ratio-cover: 3 / 4;
  --offset-chevron: -0.15em;

  /* --- Flex shorthands --- */
  --flex-brand: 0 1 var(--w-brand);
  --flex-song-main: 999 1 30rem;
  --flex-song-side: 1 1 20rem;
  --flex-bio-text: 1 1 20rem;
  --flex-photo: 0 0 var(--w-photo);
  --flex-dist-col: 1 1 21rem;
  --flex-field: 1 1 16rem;

  /* --- Layers --- */
  --z-drop: 10;
  --z-sticky: 50;
  --z-skip: 200;

  /* --- Motion --- */
  --tr-fast: 0.15s;
  --scroll-behavior: smooth;
  --anim-range-stuck: 60px 120px;
  --anim-range-shrink: 60px 220px;
  --brand-shrink-scale: 0.8;
  --lift-hover: -3px;
  --opacity-disabled: 0.45;

  /* --- Layout switches (redefined in media queries, never overridden property by property) --- */
  --burger-display: none;
  --nav-item-width: auto;
  --nav-display: block;
  --nav-flex: 0 1 auto;
  --menu-direction: row;
  --menu-align: center;
  --drop-position: absolute;
  --drop-display: none;
  --drop-shadow: var(--shadow-drop);
  --drop-border: var(--bw-hair) solid var(--color-neutral);
  --drop-border-top: var(--bw-thick) solid var(--color-primary);
  --drop-margin: 0;
  --se-col-break: auto;
  --se-col-min: 12rem;
  --se-max-cols: 3;
  --rot-chevron: 45deg;

  /* --- Set from template options (index.php) --- */
  --cards-width: 17rem;
  --cards-max-cols: 4;
}

/* The only breakpoints: the mobile menu switch and the S&E overview column breaks. They redefine tokens. */
@media (max-width: 52rem) {
  :root {
    --burger-display: block;
    --nav-item-width: 100%;
    --nav-display: none;
    --nav-flex: 1 0 100%;
    --menu-direction: column;
    --menu-align: stretch;
    --drop-position: static;
    --drop-display: block;
    --drop-shadow: none;
    --drop-border: 0;
    --drop-border-top: 0;
    --drop-margin: var(--sp-4);
  }
}
@media (min-width: 48rem) {
  :root { --se-col-break: column; }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --tr-fast: 0s;
    --scroll-behavior: auto;
  }
}

/* ============================== 2. BASE ============================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--scroll-pad); scroll-behavior: var(--scroll-behavior); }
body { margin: 0; font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--flh-body); color: var(--color-text); background: var(--color-surface); }
img, svg, video { max-width: 100%; height: auto; }
input, button, select, textarea { font-family: inherit; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-4); font-family: var(--font-head); font-weight: var(--fw-bold); line-height: var(--flh-tight); color: var(--color-primary-dark); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { margin: 0 0 var(--sp-10); }

a { color: var(--color-link); text-underline-offset: 0.2em; text-decoration-thickness: var(--bw-hair); }
a:hover { text-decoration-thickness: var(--bw-thick); }
:focus-visible { outline: var(--bw-thick) solid var(--color-blue); outline-offset: var(--bw-thin); }

.wrap { width: var(--w-measure); margin-inline: auto; }
.skip-link { position: absolute; left: var(--size-skip-offset); top: 0; z-index: var(--z-skip); padding: var(--sp-6) var(--sp-8); background: var(--color-surface); color: var(--color-black); }
.skip-link:focus { left: 0; }
.visually-hidden { position: absolute; width: var(--size-hidden); height: var(--size-hidden); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================== 3. HEADER AND NAVIGATION ============================== */
/* Utility bar (position topmenu + head-search). It scrolls away; only .sticky-top sticks. */
.util { background: var(--color-primary); color: var(--color-on-primary); }
.util__inner { width: var(--w-wide); margin-inline: auto; display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-12); justify-content: flex-end; align-items: center; padding-block: var(--sp-3); font-family: var(--font-head); font-size: var(--fs-base); font-weight: var(--fw-medium); }
.util a { color: var(--color-on-primary); text-decoration: none; }
.util a:hover { text-decoration: underline; }
.util .mod-menu { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-12); list-style: none; margin: 0; padding: 0; }
.util .moduletable, .util .mod-finder { margin: 0; }
.util .mod-finder__search { display: flex; }
.util .mod-finder__search input { min-width: var(--w-search-input); padding: var(--sp-3) var(--sp-5); border: 0; border-radius: var(--br-xs) 0 0 var(--br-xs); font-family: var(--font-body); font-size: var(--fs-base); }
.util .mod-finder__search .btn { border: 0; border-radius: 0 var(--br-xs) var(--br-xs) 0; padding: var(--sp-3) var(--sp-7); background: var(--color-primary-dark); color: var(--color-on-primary); font-family: var(--font-head); font-size: var(--fs-base); font-weight: var(--fw-semibold); cursor: pointer; }
.util .mod-finder__search .icon-search { display: none; }
.util .mod-finder label { position: absolute; width: var(--size-hidden); height: var(--size-hidden); overflow: hidden; clip: rect(0 0 0 0); }

/* Header row and breadcrumb line stick together as one block (pure CSS, no height guessing). */
.sticky-top { position: sticky; top: 0; z-index: var(--z-sticky); }
.site-header { background: var(--color-surface); border-bottom: var(--bw-hair) solid var(--color-neutral); }
.site-header__row { width: var(--w-wide); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-16); padding-block: var(--sp-6); }
.brand { display: block; flex: var(--flex-brand); color: var(--color-primary); text-decoration: none; }
.brand img, .brand__img { display: block; width: 100%; max-width: var(--w-brand); height: auto; }
.brand .moduletable, .brand p { margin: 0; }
.brand a { display: block; }
.brand__text { font-family: var(--font-head); font-size: var(--fs-brand); font-weight: var(--fw-bold); line-height: var(--flh-none); letter-spacing: var(--ls-brand); }

@supports (animation-timeline: scroll()) {
  .site-header { animation: gmm-stuck linear both; animation-timeline: scroll(root); animation-range: var(--anim-range-stuck); }
  .brand { transform-origin: left center; animation: gmm-shrink linear both; animation-timeline: scroll(root); animation-range: var(--anim-range-shrink); }
  @keyframes gmm-stuck { to { box-shadow: var(--shadow-stuck); } }
  @keyframes gmm-shrink { to { transform: scale(var(--brand-shrink-scale)); } }
}

/* Mega menu: standard Joomla Menu module (mod_menu) in position "navigation". Real markup (Joomla 6):
   a top-level item WITHOUT children is   li > a > img + span.image-title
   a top-level item WITH children is      li.deeper.parent > button.mod-menu__toggle-sub > span.mod-menu__heading|separator > img + span.image-title,
                                          followed by span.icon-chevron-down and ul.mod-menu__sub.
   The button and its inner span are made to look exactly like the link (font, weight, size, colour, line height, icon); the chevron is
   drawn by CSS (Joomla's icon font is not loaded). Dropdown opens on hover and focus-within, so it needs no script. */
.main-nav { display: var(--nav-display); flex: var(--nav-flex); }
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav .mod-menu { display: flex; flex-direction: var(--menu-direction); flex-wrap: wrap; gap: var(--sp-2) var(--sp-10); align-items: var(--menu-align); }
.main-nav .mod-menu > li { position: relative; }
.main-nav .mod-menu > li > a,
.main-nav .mod-menu > li > .mod-menu__toggle-sub,
.main-nav .mod-menu > li > .mod-menu__heading,
.main-nav .mod-menu > li > .mod-menu__separator {
  display: flex; align-items: center; gap: var(--sp-3); width: var(--nav-item-width); margin: 0; padding: var(--sp-5) var(--sp-3); border: 0; background: none; text-align: left;
  font-family: var(--font-head); font-size: var(--fs-nav); font-weight: var(--fw-bold); line-height: var(--flh-inherit); color: var(--color-text-strong); text-decoration: none; cursor: pointer;
}
.main-nav .mod-menu > li > .mod-menu__toggle-sub > :is(.mod-menu__heading, .mod-menu__separator) {
  display: flex; align-items: center; gap: var(--sp-3); font: inherit; line-height: var(--flh-inherit); color: inherit;
}
.main-nav .mod-menu > li > a img,
.main-nav .mod-menu > li > .mod-menu__toggle-sub img,
.main-nav .mod-menu > li > span img { height: var(--size-icon-sm); width: auto; }
.main-nav .mod-menu > li:hover > a,
.main-nav .mod-menu > li:focus-within > a,
.main-nav .mod-menu > li:hover > .mod-menu__toggle-sub,
.main-nav .mod-menu > li:focus-within > .mod-menu__toggle-sub,
.main-nav .mod-menu > li:hover > .mod-menu__heading,
.main-nav .mod-menu > li:hover > .mod-menu__separator { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: var(--bw-thin); }
.main-nav .mod-menu > li.current > a,
.main-nav .mod-menu > li.active > a { color: var(--color-primary); }
.main-nav .mod-menu [class*="icon-chevron"] { display: none; }
.main-nav .mod-menu > li > .mod-menu__toggle-sub::after {
  content: ""; flex: none; width: var(--size-chevron); height: var(--size-chevron); margin: var(--offset-chevron) 0 0 var(--sp-2);
  border: solid currentColor; border-width: 0 var(--bw-thin) var(--bw-thin) 0; transform: rotate(var(--rot-chevron));
}
/* Dropdown panel (level 2) */
.main-nav .mod-menu > li > ul {
  position: var(--drop-position); right: 0; top: 100%; z-index: var(--z-drop); display: var(--drop-display); min-width: var(--w-dropdown);
  margin-left: var(--drop-margin); background: var(--color-surface); border: var(--drop-border); border-top: var(--drop-border-top); box-shadow: var(--drop-shadow);
}
.main-nav .mod-menu > li:hover > ul,
.main-nav .mod-menu > li:focus-within > ul { display: block; }
.main-nav .mod-menu > li > ul a,
.main-nav .mod-menu > li > ul .mod-menu__heading,
.main-nav .mod-menu > li > ul .mod-menu__separator { display: block; padding: var(--sp-4) var(--sp-8); font-family: var(--font-head); font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--color-text-menu); text-decoration: none; }
.main-nav .mod-menu > li > ul a:hover { background: var(--color-light); color: var(--color-primary); }
/* A parent item inside the dropdown (level 3) is a section header with its children listed under it. */
.main-nav .mod-menu > li > ul > li.parent > .mod-menu__toggle-sub { display: block; width: 100%; margin: 0; padding: var(--sp-4) var(--sp-8); border: 0; background: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-head); font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: var(--flh-inherit); text-align: left; cursor: default; pointer-events: none; }
.main-nav .mod-menu > li > ul > li.parent > .mod-menu__toggle-sub > :is(.mod-menu__heading, .mod-menu__separator) { display: block; padding: 0; background: none; color: inherit; font: inherit; }
.main-nav .mod-menu > li > ul > li.parent > .mod-menu__heading,
.main-nav .mod-menu > li > ul > li.parent > .mod-menu__separator,
.main-nav .mod-menu > li > ul > li.parent > a { background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--fw-bold); }
.main-nav .mod-menu > li > ul > li.parent > ul { position: static; display: block; }
.main-nav .mod-menu > li > ul > li.parent > ul a { padding-left: var(--sp-16); font-size: var(--fs-sm); }

/* Menu toggle without JavaScript: a hidden checkbox plus a label. The label shows only on narrow screens. */
.nav-toggle { position: absolute; opacity: 0; width: var(--size-hidden); height: var(--size-hidden); }
.nav-burger { display: var(--burger-display); padding: var(--sp-4) var(--sp-8); border: var(--bw-thin) solid var(--color-primary); border-radius: var(--br-pill); cursor: pointer; font-family: var(--font-head); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-primary); }
.nav-toggle:focus-visible + .nav-burger { outline: var(--bw-thick) solid var(--color-blue); outline-offset: var(--bw-thin); }
.nav-toggle:checked ~ .main-nav { display: block; }

/* ============================== 4. BREADCRUMB ============================== */
/* Slim single line in the faint green. Position "breadcrumbs" (sticky together with the header by default). */
.page-head { background: var(--color-wash); border-bottom: var(--bw-hair) solid var(--color-wash-edge); padding-block: var(--sp-3); }
.page-head .moduletable, .page-head .mod-breadcrumbs__wrapper { margin: 0; }
.page-head .mod-breadcrumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-family: var(--font-head); font-size: var(--fs-base); font-weight: var(--fw-medium); background: none; }
.page-head .mod-breadcrumbs__here { display: none; }
.page-head .mod-breadcrumbs__item + .mod-breadcrumbs__item::before { content: "\203A"; margin-right: var(--sp-4); color: var(--color-gray); }
.page-head a { color: var(--color-link); }

/* ============================== 5. CONTENT PAGES ============================== */
.site-main { padding-bottom: var(--sp-16); }
.component-area { margin-top: var(--sp-16); }

/* Editor content: neutral base. Decorative styles are opt-in by class (see docs). */
.com-content-article__body p, .com-content-article__body ul, .com-content-article__body ol { margin: 0 0 var(--sp-10); }
.com-content-article__body ul, .com-content-article__body ol { padding-left: var(--sp-12); }
.com-content-article__body li { margin: var(--sp-2) 0; }
.com-content-article__body li::marker { color: var(--color-primary); }
.com-content-article__body img { border-radius: var(--br-md); }
.com-content-article__body blockquote { margin: var(--sp-12) 0; padding: var(--sp-6) var(--sp-10); border-left: var(--bw-accent) solid var(--color-primary); background: var(--color-wash); font-style: italic; }
.com-content-article__body table { border-collapse: collapse; width: 100%; margin: 0 0 var(--sp-10); }
.com-content-article__body th, .com-content-article__body td { border: var(--bw-hair) solid var(--color-wash-edge); padding: var(--sp-4) var(--sp-6); text-align: left; }
.com-content-article__body th { background: var(--color-wash); }
hr { border: 0; border-top: var(--bw-hair) solid var(--color-neutral); margin: var(--sp-12) 0; }
hr.section-rule { border-top: var(--bw-thin) solid var(--color-wash-edge); margin: var(--sp-16) 0 var(--sp-12); }

/* Standard content page: readable column. Add "wide" to the menu item Page Class for full width. */
.com-content-article:not(.wide) .com-content-article__body { max-width: var(--w-prose); }
/* Title band: faint green, full-bleed behind the article title (first .page-header only). */
.com-content-article > .page-header:first-of-type { margin-bottom: var(--sp-12); padding-block: var(--sp-10) var(--sp-8); background: var(--color-wash); box-shadow: 0 0 0 var(--band-spread) var(--color-wash); clip-path: inset(0 calc(-1 * var(--band-spread))); }
.com-content-article > .page-header h1, .com-content-article > .page-header h2 { margin: 0; }

/* ============================== 6. HOME SECTIONS ============================== */
/* Hero: dark green band. The cover-flow module (mod_jpc_coverflow) brings its own styles. */
.hero-band { background: var(--color-primary-dark); color: var(--color-on-primary); }
.hero-band .moduletable { margin: 0; }
.hero-band .block-title { margin: 0; padding-top: var(--sp-10); text-align: center; color: var(--color-on-primary); font-size: var(--fs-h2); }

/* Distributors: alternating rows. Each distributor is its own Phoca Particles module ("Image and Content") in position
   "distributors". The side is chosen per module with the Module Class: particle-image-left / particle-image-right.
   Phoca markup (verified from the rendered page): div.phModParticles.<suffix> > .phModParticlesImageContent >
   .phModParticlesItem > ( .phModParticlesItemImage.pmpw40 | .phModParticlesItemContent.pmpw60 >
   .phModParticlesItemContentIn + .phModParticlesButtonBox > a.phModParticlesButton ).
   The suffix lands on BOTH the Joomla wrapper (.moduletable) and Phoca's own div, so row decoration is scoped to the wrapper.

   Phoca's own stylesheets (media/mod_phocaparticles/css/common.css and type_image_content.css, supplied from the dev site)
   set, with these specificities:
     .phModParticles > div:not(...)                               padding-block 1em                  (0,2,1)
     .phModParticles .phModParticlesImageContent                  padding 2em                        (0,2,0)
     .phModParticlesImageContent .phModParticlesItem              flex, width 100%, justify center   (0,2,0)
     ...Item .phModParticlesItemImage / ItemContent               padding-left/right 1% / 5%         (0,3,0)
     ...Item .phModParticlesItemImage.pmpw40 / ItemContent.pmpw60 width 40% / 60%                    (0,4,0), also in a max-width 768px query
     ...ItemContent .phModParticlesButtonBox                      text-align center, margin 0 auto   (0,3,0)
     ...ItemContent .phModParticlesButtonBox .phModParticlesButton font-size 2vw, padding .8vw 1.2vw  (0,4,0)
   Every rule below starts with the suffix class plus .phModParticles and repeats the Phoca chain, so it has a higher
   specificity (0,3,0 to 0,6,1) and wins without !important. The flex-basis replaces the pmpw widths. */
.home-dist { background: var(--grad-dist); padding-block: var(--sp-fluid); }
.moduletable:is(.particle-image-left, .particle-image-right) { padding-block: var(--sp-fluid-row); border-bottom: var(--bw-hair) solid var(--color-wash-edge); }
.moduletable:is(.particle-image-left, .particle-image-right):last-child { border-bottom: 0; }
:is(.particle-image-left, .particle-image-right) .phModParticles > .phModParticlesImageContent { padding: 0; }
:is(.particle-image-left, .particle-image-right) .phModParticles .phModParticlesImageContent .phModParticlesItem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-16) var(--sp-fluid-gap); width: auto; float: none; }
.particle-image-left .phModParticles .phModParticlesImageContent .phModParticlesItem { flex-direction: row; }
.particle-image-right .phModParticles .phModParticlesImageContent .phModParticlesItem { flex-direction: row-reverse; }
:is(.particle-image-left, .particle-image-right) .phModParticles .phModParticlesImageContent .phModParticlesItem > :is(.phModParticlesItemImage, .phModParticlesItemContent) { flex: var(--flex-dist-col); width: auto; max-width: none; min-width: 0; padding: 0; float: none; }
:is(.particle-image-left, .particle-image-right) .phModParticles .phModParticlesImageContent .phModParticlesItem > .phModParticlesItemImage { display: grid; place-items: center; min-height: var(--size-dist-media); padding: var(--sp-12); border-radius: var(--br-xl); border: var(--bw-hair) solid var(--color-wash-edge); background: var(--grad-media); box-shadow: var(--shadow-tile); }
:is(.particle-image-left, .particle-image-right) .phModParticles .phModParticlesImageContent .phModParticlesItemImage a { display: block; }
:is(.particle-image-left, .particle-image-right) .phModParticles .phModParticlesImageContent .phModParticlesItemImage img { display: block; max-width: 100%; height: auto; border-radius: var(--br-md); }
:is(.particle-image-left, .particle-image-right) .phModParticles .phModParticlesItemContentIn h3 { margin-bottom: var(--sp-h3-tight); }
/* Button: mock-up .btn (padding .7rem 1.5rem, font 700 1.1rem, line-height normal because the mock-up uses the "font"
   shorthand, pill, centred in its column). Phoca also centres the box but sizes the font and padding in vw. */
:is(.particle-image-left, .particle-image-right) .phModParticles .phModParticlesItemContent .phModParticlesButtonBox { display: block; width: auto; margin: 0; padding: 0; text-align: center; }
:is(.particle-image-left, .particle-image-right) .phModParticles .phModParticlesItemContent .phModParticlesButtonBox a.phModParticlesButton.btn { display: inline-block; box-sizing: border-box; width: max-content; max-width: 100%; min-width: 0; height: auto; float: none; flex: none; margin: var(--sp-4) 0 0; padding: var(--pad-btn); border: 0; border-radius: var(--br-pill); background: var(--color-primary-dark); color: var(--color-on-primary); box-shadow: none; font-family: var(--font-head); font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--flh-normal); letter-spacing: var(--ls-normal); text-align: center; text-decoration: none; text-transform: none; }
:is(.particle-image-left, .particle-image-right) .phModParticles .phModParticlesItemContent .phModParticlesButtonBox a.phModParticlesButton.btn:hover { background: var(--color-primary); color: var(--color-on-primary); }
/* Opt-in content classes (inside a distributor's text, or anywhere): .eyebrow and .contact */
.eyebrow { margin: 0 0 var(--sp-4); font-family: var(--font-head); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-link); }
/* Contact lines: a hanging indent in normal text flow (not a grid), so a long value wraps inside its own column even if the
   editor strips the value <span> (bare text and <br> would each become a separate grid item and fall under the label). */
.contact { display: grid; gap: var(--sp-4); margin: var(--sp-8) 0; }
.contact > div { padding-left: var(--w-meta-hang); text-indent: calc(-1 * var(--w-meta-hang)); }
/* The same hanging indent keyed on the line itself, so it works without the div.contact wrapper (a line is any div whose first
   child is a .contact-label). Separate rule on purpose: one selector list would be dropped entirely by a browser without :has(). */
div:has(> .contact-label) { margin: 0 0 var(--sp-4); padding-left: var(--w-meta-hang); text-indent: calc(-1 * var(--w-meta-hang)); }
.contact > div { margin: 0; }
.contact dt, .contact-label, .contact > div > :first-child { display: inline-block; box-sizing: border-box; width: var(--w-meta-label); margin: 0 var(--sp-4) 0 0; text-indent: 0; vertical-align: baseline; font-family: var(--font-head); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-primary); }
.contact dd { display: inline; margin: 0; text-indent: 0; }
/* Intro heading module (Custom HTML, Module Class gmm-dist-intro) */
.moduletable.gmm-dist-intro { padding-block: 0 var(--sp-8); text-align: center; }
.gmm-dist-intro p { max-width: var(--w-intro); margin-inline: auto; }
/* Closing callout: markup is in the module body (see the guide). The icon is a CSS class, because editors strip inline SVG. */
/* The icon sits to the LEFT of the text inside the panel and drops above it only when the panel is too narrow for both.
   Two markups are supported: (1) the icon div inside div.gmm-callout (the guide's recipe); (2) the icon div as the sibling right after
   div.gmm-callout, in which case the module's own wrapper becomes the panel. Separate rules: a selector list containing :has() would be
   dropped whole by a browser without :has(). */
.gmm-callout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12) var(--sp-20); margin-top: var(--sp-fluid-callout); padding: var(--sp-fluid-sm); background: var(--color-wash); border: var(--bw-hair) solid var(--color-wash-edge); border-radius: var(--br-xl); }
.gmm-callout > :not(.gmm-callout__icon) { flex: 1 1 var(--w-callout-text); min-width: 0; }
.mod-custom:has(> .gmm-callout__icon) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12) var(--sp-20); margin-top: var(--sp-fluid-callout); padding: var(--sp-fluid-sm); background: var(--color-wash); border: var(--bw-hair) solid var(--color-wash-edge); border-radius: var(--br-xl); }
.gmm-callout:has(+ .gmm-callout__icon) { flex: 1 1 var(--w-callout-text); min-width: 0; margin: 0; padding: 0; background: none; border: 0; border-radius: var(--br-none); }
.gmm-callout h3 { margin-bottom: var(--sp-h3-callout); }
.gmm-callout p { margin: 0; }
.gmm-callout__icon { order: -1; flex: none; display: grid; place-items: center; width: var(--size-callout-icon); height: var(--size-callout-icon); border-radius: var(--br-round); background: var(--color-surface); box-shadow: var(--shadow-icon); }
.gmm-callout__icon::before { content: ""; width: var(--size-callout-glyph); height: var(--size-callout-glyph); background: var(--color-primary); -webkit-mask: url("../images/icons/cart.svg") center / contain no-repeat; mask: url("../images/icons/cart.svg") center / contain no-repeat; }
.gmm-fine:empty { display: none; }
.gmm-fine { margin: var(--sp-12) auto 0; max-width: var(--w-fine); text-align: center; font-size: var(--fs-xs); line-height: var(--flh-credit); color: var(--color-gray); }
/* In the mock-up .fine is centred under the callout panel. Inside a distributor's text (Phoca content column) it is left aligned. */
:is(.particle-image-left, .particle-image-right) .phModParticlesItemContentIn .gmm-fine { margin: var(--sp-12) 0 0; max-width: none; text-align: left; }
/* JPC Feature Image and Text (mod_jpc_feature_imagetext) in position "distributors": its own CSS draws the row; the template only
   removes the divider under the last row of the position and left-aligns the small print inside the row's text. */
.distributors.moduletable:last-child > .jpc-fit { border-bottom: 0; }
.jpc-fit__text .gmm-fine { margin: var(--sp-12) 0 0; max-width: none; text-align: left; }

/* Solo and Ensemble cards: one module per card in position se-cards (chrome "card"), laid out as a masonry.
   Width and max columns come from the template options (--cards-width, --cards-max-cols). */
.home-se { background: var(--color-wash); padding-block: var(--sp-fluid); }
.home-se__grid { columns: var(--cards-width) var(--cards-max-cols); column-gap: var(--sp-10); }
/* A heading module in this position carries the Module Class "se-heading": it spans all columns and drops the card look.
   (Cards carry .moduletable too, so the span rule cannot be keyed to .moduletable alone.) */
.home-se__grid > .se-heading { column-span: all; margin-bottom: var(--sp-12); }
.se-card.se-heading { padding: 0; border: 0; border-radius: var(--br-none); background: none; box-shadow: none; }
.se-heading .se-card__title { margin: 0; font-size: var(--fs-h2); }
.se-card { display: block; break-inside: avoid; margin: 0 0 var(--sp-10); padding: var(--pad-se-card); background: var(--color-surface); border: var(--bw-hair) solid var(--color-wash-edge); border-radius: var(--br-card); box-shadow: var(--shadow-se-card); }
.se-card__icon { display: none; width: var(--size-touch); height: var(--size-touch); margin-bottom: var(--sp-6); border-radius: var(--br-tile); background: var(--color-wash); place-items: center; }
.se-card__icon::before { content: ""; width: var(--size-icon); height: var(--size-icon); background: var(--color-primary); mask: var(--icon, none) center / contain no-repeat; -webkit-mask: var(--icon, none) center / contain no-repeat; }
.se-card[class*="icon-"] .se-card__icon { display: grid; }
.icon-brass { --icon: url("../images/icons/brass.svg"); }
.icon-mallet { --icon: url("../images/icons/mallet.svg"); }
.icon-timpani { --icon: url("../images/icons/timpani.svg"); }
.icon-note { --icon: url("../images/icons/note.svg"); }
.icon-notes { --icon: url("../images/icons/notes.svg"); }
.se-card__title { margin: 0 0 var(--sp-4); font-size: var(--fs-h4); }
.se-card ul { list-style: none; margin: 0; padding: 0; }
.se-card li { padding: var(--sp-li) 0; }
.se-card .inst { display: block; font-size: var(--fs-inst); color: var(--color-gray); }

/* ======================= 7. SOLO AND ENSEMBLE OVERVIEW (Menu module, Module Class se-categories) ======================= */
/* The overview article embeds a Menu module (Modules Anywhere). Real markup (Joomla 6 mod_menu, default layout):
   ul.mod-menu.nav.se-categories > li.deeper.parent > button.mod-menu__toggle-sub > span.mod-menu__separator|heading + span.icon-chevron-down,
   then ul.mod-menu__sub > li > a. The scope class comes from the menu module's Module Class (it lands on the ul), or from a
   <div class="se-categories"> around it. Joomla's menu script sets aria-hidden on the sub lists and aria-expanded on the buttons; the
   cards here always show all links, so display is forced and the toggle button is inert (see the guide). */
:is(.se-categories .mod-menu, .mod-menu.se-categories) { columns: var(--se-col-min) var(--se-max-cols); column-gap: var(--sp-10); list-style: none; margin: 0; padding: 0; }
:is(.se-categories .mod-menu, .mod-menu.se-categories) > li { display: block; break-inside: avoid; margin: 0 0 var(--sp-10); padding: 0; background: var(--color-surface); border: var(--bw-hair) solid var(--color-wash-edge); border-radius: var(--br-lg); overflow: hidden; box-shadow: var(--shadow-panel); }
/* Browsers balance very uneven unbreakable cards unpredictably. Where there is room, the 2nd and 3rd family start a new column. */
:is(.se-categories .mod-menu, .mod-menu.se-categories) > li:nth-child(2),
:is(.se-categories .mod-menu, .mod-menu.se-categories) > li:nth-child(3) { break-before: var(--se-col-break); }
/* Header strip: the toggle button (real markup) or a bare heading / separator span (older markup). */
:is(.se-categories .mod-menu, .mod-menu.se-categories) > li > .mod-menu__toggle-sub,
:is(.se-categories .mod-menu, .mod-menu.se-categories) > li > :is(.mod-menu__heading, .mod-menu__separator) { display: flex; align-items: center; justify-content: flex-start; width: 100%; margin: 0; padding: var(--pad-se-head); border: 0; border-radius: var(--br-none); background: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-head); font-size: var(--fs-se-head); font-weight: var(--fw-bold); line-height: var(--flh-tight); text-align: left; cursor: default; }
:is(.se-categories .mod-menu, .mod-menu.se-categories) > li > .mod-menu__toggle-sub { pointer-events: none; }
:is(.se-categories .mod-menu, .mod-menu.se-categories) > li > .mod-menu__toggle-sub > :is(.mod-menu__heading, .mod-menu__separator) { margin: 0; padding: 0; background: none; color: inherit; font: inherit; }
:is(.se-categories .mod-menu, .mod-menu.se-categories) > li > .mod-menu__toggle-sub > [class*="icon-"] { display: none; }
:is(.se-categories .mod-menu, .mod-menu.se-categories) .mod-menu__sub { display: block; list-style: none; margin: 0; padding: 0; }
:is(.se-categories .mod-menu, .mod-menu.se-categories) .mod-menu__sub > li { margin: 0; padding: 0; }
:is(.se-categories .mod-menu, .mod-menu.se-categories) .mod-menu__sub > li + li { border-top: var(--bw-hair) solid var(--color-wash-edge); }
:is(.se-categories .mod-menu, .mod-menu.se-categories) .mod-menu__sub a { display: flex; justify-content: space-between; gap: var(--sp-6); padding: var(--pad-se-row); text-decoration: none; }
:is(.se-categories .mod-menu, .mod-menu.se-categories) .mod-menu__sub a::after { content: "\203A"; color: var(--color-primary); font-weight: var(--fw-bold); }
:is(.se-categories .mod-menu, .mod-menu.se-categories) .mod-menu__sub a:hover { background: var(--color-wash); }

/* ============================== 8. CATALOG LIST (category/blog + blog_item) ============================== */
.blog-music-catalog .page-header h1 { margin-bottom: var(--sp-8); }
.catalog-grid { display: grid; gap: var(--sp-10); grid-template-columns: repeat(auto-fill, minmax(var(--w-card-min), 1fr)); }
.catalog-card { display: grid; grid-template-columns: var(--size-cover-md) minmax(0, 1fr); gap: var(--sp-8); padding: var(--sp-8); background: var(--color-surface); border: var(--bw-hair) solid var(--color-wash-edge); border-radius: var(--br-card); box-shadow: var(--shadow-card); transition: box-shadow var(--tr-fast), border-color var(--tr-fast); }
.catalog-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--color-primary); }
.card-left a { display: block; aspect-ratio: var(--ratio-cover); overflow: hidden; border-radius: var(--br-sm); box-shadow: var(--shadow-cover); }
.card-left img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-right { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
/* Tags: every applied tag is shown, in a fixed order, on a wrapping line above the song type (never beside the title). */
.catalog-tags { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); margin: 0; padding: 0; list-style: none; }
.tag { padding: var(--sp-1) var(--sp-5); border-radius: var(--br-pill); font-family: var(--font-head); font-size: var(--fs-2xs); font-weight: var(--fw-bold); line-height: var(--flh-compact); text-transform: uppercase; letter-spacing: var(--ls-label); white-space: nowrap; }
.tag-bestseller { background: var(--color-blue); color: var(--color-on-primary); }
.tag-featured { background: var(--color-gold); color: var(--color-text); }
.tag-master { background: var(--color-primary); color: var(--color-on-primary); }
.tag-pathfinder { background: var(--color-orange); color: var(--color-text); }
.tag-new { background: var(--color-surface); color: var(--color-blue); box-shadow: inset 0 0 0 var(--bw-thin) var(--color-blue); }
.song-type { font-family: var(--font-head); font-size: var(--fs-xs); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--color-gray); }
.song-title { margin: 0; font-size: var(--fs-card-title); }
.song-title a { color: var(--color-link); text-decoration: none; }
.song-title a:hover { text-decoration: underline; }
.creator-line { font-size: var(--fs-sm); line-height: var(--flh-credit); }
.grade-line { align-self: flex-start; margin-top: var(--sp-4); padding: var(--sp-1) var(--sp-6); border-radius: var(--br-pill); background: var(--color-primary-dark); color: var(--color-on-primary); font-family: var(--font-head); font-size: var(--fs-sm); font-weight: var(--fw-bold); }

/* Core Joomla pagination (used by the catalog and the search results) */
.pagination__wrapper, .pagination-wrapper { margin-top: var(--sp-20); }
.pagination { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: center; margin: 0; padding: 0; list-style: none; font-family: var(--font-head); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.pagination .page-link { display: grid; place-items: center; min-width: var(--size-touch); height: var(--size-touch); padding: 0 var(--sp-5); border: var(--bw-hair) solid var(--color-wash-edge); border-radius: var(--br-tile); text-decoration: none; background: var(--color-surface); }
.pagination a.page-link:hover { background: var(--color-wash); }
.pagination .active .page-link, .pagination .page-link[aria-current] { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-on-primary); }
.pagination .disabled .page-link { color: var(--color-gray); }
/* Arrow buttons: Joomla's icon font is not loaded, so the four arrows are drawn with CSS masks in the text colour (page-number green). */
.pagination .page-link [class^="icon-angle"] { display: block; width: var(--size-icon-pg); height: var(--size-icon-pg); background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.pagination .icon-angle-left { --ico: url("../images/icons/angle-left.svg"); }
.pagination .icon-angle-right { --ico: url("../images/icons/angle-right.svg"); }
.pagination .icon-angle-double-left { --ico: url("../images/icons/angle-double-left.svg"); }
.pagination .icon-angle-double-right { --ico: url("../images/icons/angle-double-right.svg"); }
.pagination .disabled .page-link { color: var(--color-link); opacity: var(--opacity-disabled); }
.pagination-counter, .pagination__wrapper + p { margin: var(--sp-4) 0 0; text-align: center; color: var(--color-gray); font-size: var(--fs-sm); }

/* ============================== 9. SONG PAGE (article/gmm-songs) ============================== */
/* Layout B: main column (info, Listen/Download/View) plus a sidebar (cover, details and buy). The sidebar wraps below on narrow screens. */
.song_view { display: flex; flex-wrap: wrap; gap: var(--sp-16) var(--sp-20); align-items: flex-start; }
.song_view__main { flex: var(--flex-song-main); min-width: 0; display: grid; gap: var(--sp-16); }
.song_view__side { flex: var(--flex-song-side); min-width: 0; display: grid; gap: var(--sp-12); }
.song_view__cover { margin: 0 auto; max-width: var(--w-cover-song); width: 100%; }
.song_view__cover img { display: block; width: 100%; border-radius: var(--br-md); box-shadow: var(--shadow-cover-lg); }
.song_view__cover figure { margin: 0; }
.song_view__grade { display: inline-flex; align-items: center; margin-bottom: var(--sp-8); padding: var(--sp-3) var(--sp-10) var(--sp-3) var(--sp-7); border: var(--bw-thin) solid var(--color-primary); border-radius: var(--br-pill); background: var(--color-wash); color: var(--color-primary-dark); font-family: var(--font-head); font-size: var(--fs-grade-big); font-weight: var(--fw-bold); line-height: var(--flh-snug); }
.song_view__badges { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.song_view__badge { padding: var(--sp-2) var(--sp-6); border-radius: var(--br-pill); font-family: var(--font-head); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.song_view__badge--best { background: var(--color-blue); color: var(--color-on-primary); }
.song_view__badge--new { background: var(--color-gold); color: var(--color-text); }
.song-View__song_type { margin: 0 0 var(--sp-2); font-family: var(--font-head); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-gray); }
.song_view__title { margin-bottom: var(--sp-4); }
.song_view__credits { margin: 0 0 var(--sp-10); display: grid; gap: var(--sp-3); }
.song_view__credit { display: flex; flex-wrap: wrap; gap: 0 var(--sp-6); align-items: baseline; }
.song_view__credit dt { min-width: var(--w-credit-label); font-family: var(--font-head); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-primary); }
.song_view__credit dd { margin: 0; font-size: var(--fs-credit); }
.data_basic__song_description p { max-width: var(--w-prose); margin: 0 0 var(--sp-8); }
.song_view__related { margin-top: var(--sp-12); padding: var(--sp-8) var(--sp-10); background: var(--color-wash); border: var(--bw-hair) solid var(--color-wash-edge); border-radius: var(--br-card); }
.song_view__unpublished { margin: 0 0 var(--sp-8); padding: var(--sp-4) var(--sp-8); background: var(--color-warm); border-radius: var(--br-chip); font-family: var(--font-head); font-weight: var(--fw-bold); }

/* Cards */
.song_card { background: var(--color-surface); border: var(--bw-hair) solid var(--color-wash-edge); border-radius: var(--br-lg); overflow: hidden; box-shadow: var(--shadow-panel); }
.song_card__title { margin: 0; padding: var(--sp-6) var(--sp-10); color: var(--color-on-primary); font-size: var(--fs-card-title); }
.song_view__song_details .song_card__title { background: var(--color-primary); }
.song_view__song_listen .song_card__title { background: var(--color-blue); }
.song_card__body { padding: var(--sp-10); }
.song_specs { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-8); margin: 0 0 var(--sp-10); }
.song_specs dt { align-self: baseline; font-family: var(--font-head); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-primary); }
.song_specs dd { margin: 0; }
.song_offer { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-8); align-items: center; padding: var(--sp-7) 0; border-top: var(--bw-hair) solid var(--color-wash-edge); }
.song_offer__name { margin: 0; font-family: var(--font-head); font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.song_offer__meta { margin: 0; font-size: var(--fs-xs); color: var(--color-gray); }
.song_offer__price { margin: 0; text-align: right; font-family: var(--font-head); font-size: var(--fs-price); font-weight: var(--fw-bold); color: var(--color-primary-dark); }
.song_offer .btn { grid-column: 1 / -1; display: block; }

/* Listen / Download / View */
.song_listen__block + .song_listen__block { margin-top: var(--sp-12); padding-top: var(--sp-10); border-top: var(--bw-hair) solid var(--color-wash-edge); }
.song_listen__head { margin-bottom: var(--sp-5); font-size: var(--fs-block-title); }
.musicpub_songs_playback_player { margin-bottom: var(--sp-7); }
.musicpub_songs_playback_player audio { width: 100%; }
.musicpub_songs_playback_caption { margin: 0 0 var(--sp-2); font-family: var(--font-head); font-size: var(--fs-base); font-weight: var(--fw-bold); }
.song_listen__downloads { display: grid; gap: var(--sp-5); }
.login_alert { padding: var(--sp-7) var(--sp-8); background: var(--color-warm); border: var(--bw-hair) solid var(--color-gold); border-radius: var(--br-chip); color: var(--color-notice-text); }
.login_alert p { margin: 0 0 var(--sp-4); }
.login_alert p:last-child { margin: 0; }
.song_listen__scores { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--w-score-min), 1fr)); gap: var(--sp-6); }
.song_listen__score { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-7) var(--sp-4); border: var(--bw-hair) solid var(--color-wash-edge); border-radius: var(--br-chip); background: var(--color-wash); text-align: center; text-decoration: none; font-family: var(--font-head); font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--color-link); }
.song_listen__score:hover { background: var(--color-surface); border-color: var(--color-primary); }
.song_listen__score img { width: var(--size-score-icon); height: var(--size-score-icon); }
.song_listen_score__instruction { margin: var(--sp-5) 0 0; font-size: var(--fs-xs); color: var(--color-gray); }
/* Small notice shown instead of a hidden section ("No recording available", "No score available"). */
.song_notice { margin: 0; padding: var(--sp-4) var(--sp-7); border: var(--bw-hair) dashed var(--color-wash-edge); border-radius: var(--br-chip); background: var(--color-wash); font-family: var(--font-head); font-size: var(--fs-sm); color: var(--color-gray); }

/* ============================== 10. COMPOSER PAGES ============================== */
/* Profile (article/composer): photo left, name (H1) and bio to its right; wraps to photo-above-text on narrow screens. */
.composer__bio-content { display: flex; flex-wrap: wrap; gap: var(--sp-12) var(--sp-20); align-items: flex-start; }
.composer__image-wrapper { flex: var(--flex-photo); max-width: 100%; margin: 0; }
.composer__image-wrapper img { display: block; width: 100%; aspect-ratio: var(--ratio-cover); object-fit: cover; border-radius: var(--br-card); box-shadow: var(--shadow-photo); }
.composer__bio-text { flex: var(--flex-bio-text); min-width: 0; max-width: var(--w-prose); }
.composer__bio-text h1 { margin: 0 0 var(--sp-4); }
.composer__songs { clear: both; margin-top: var(--sp-20); padding: var(--sp-fluid-sm); background: var(--color-wash); border: var(--bw-hair) solid var(--color-wash-edge); border-radius: var(--br-lg); }
.composer__songs-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-8); margin-bottom: var(--sp-10); }
.composer__songs-title { margin: 0; }
.composer__songs-count { font-family: var(--font-head); font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--color-gray); }
/* Approved: compact rows, cover thumbnail left. Title, grade pill and type each sit on their own line. */
.composer_songs__song_list { display: grid; gap: var(--sp-8) var(--sp-10); grid-template-columns: repeat(auto-fill, minmax(var(--w-songrow-min), 1fr)); }
.composer_songs__song_entry { display: grid; grid-template-columns: var(--size-cover-sm) 1fr; gap: var(--sp-2) var(--sp-8); align-items: center; padding: var(--sp-6); background: var(--color-surface); border: var(--bw-hair) solid var(--color-wash-edge); border-radius: var(--br-card); }
.song-card__image-link { display: block; aspect-ratio: var(--ratio-cover); overflow: hidden; border-radius: var(--br-sm); box-shadow: var(--shadow-cover-md); transition: transform var(--tr-fast); }
.composer_songs__song_entry:hover .song-card__image-link { transform: translateY(var(--lift-hover)); }
.song-card__image-link img { display: block; width: 100%; height: 100%; object-fit: cover; }
.no-img-placeholder { display: grid; place-items: center; width: 100%; height: 100%; padding: var(--sp-4); background: var(--color-surface); border: var(--bw-hair) solid var(--color-wash-edge); color: var(--color-gray); font-family: var(--font-head); font-size: var(--fs-xs); font-weight: var(--fw-medium); text-align: center; }
.composer_songs__meta { display: grid; gap: var(--sp-3); justify-items: start; min-width: 0; }
.song-card__title { margin: 0; font-family: var(--font-head); font-size: var(--fs-nav); font-weight: var(--fw-bold); line-height: var(--flh-snug); }
.song-card__title a { text-decoration: none; }
.song-card__title a:hover { text-decoration: underline; }
.composer_songs__meta .song_grade { margin: 0; padding: var(--sp-1) var(--sp-6); border-radius: var(--br-pill); background: var(--color-primary-dark); color: var(--color-on-primary); font-family: var(--font-head); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.composer_songs__meta .song_type { margin: 0; font-family: var(--font-head); font-size: var(--fs-xs); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--color-gray); }

/* Directory (category/composer): one flat grid of name cards, A to Z by last name, no pagination. */
.composer-directory__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--w-dir-min), 1fr)); gap: var(--sp-8); list-style: none; margin: 0; padding: 0; }
.composer-directory__link { display: flex; align-items: center; gap: var(--sp-7); padding: var(--sp-6) var(--sp-8); border: var(--bw-hair) solid var(--color-wash-edge); border-radius: var(--br-card); background: var(--color-surface); text-decoration: none; color: var(--color-primary-dark); font-family: var(--font-head); font-size: var(--fs-dir-name); font-weight: var(--fw-bold); box-shadow: var(--shadow-chip); }
.composer-directory__link:hover { border-color: var(--color-primary); background: var(--color-wash); }
.composer-directory__initial { flex: none; display: grid; place-items: center; width: var(--size-touch); height: var(--size-touch); border-radius: var(--br-round); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--fs-xl); font-weight: var(--fw-bold); }

/* ============================== 11. SEARCH RESULTS (com_finder) ============================== */
.com-finder #finder-search, .com-finder .com-finder__search { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); align-items: end; margin-bottom: var(--sp-10); padding: var(--sp-8) var(--sp-10); background: var(--color-wash); border: var(--bw-hair) solid var(--color-wash-edge); border-radius: var(--br-card); }
.com-finder .com-finder__search .awesomplete, .com-finder .com-finder__search .input-group { flex: var(--flex-field); }
.com-finder label { display: block; margin-bottom: var(--sp-2); font-family: var(--font-head); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-primary-dark); }
.com-finder input[type="text"], .com-finder input[type="search"] { width: 100%; padding: var(--sp-4) var(--sp-6); border: var(--bw-hair) solid var(--color-wash-edge); border-radius: var(--br-input); font-family: var(--font-body); font-size: var(--fs-base); }
.com-finder .btn { padding: var(--sp-5) var(--sp-12); }
.com-finder .icon-search { display: none; }
#search-query-explained, .com-finder__explained { margin: 0 0 var(--sp-12); color: var(--color-gray); }
.js-finder-results, #search-result-list { display: grid; gap: var(--sp-10); list-style: none; margin: 0; padding: 0; }
.js-finder-results > li, #search-result-list > li { margin: 0; }
.search-result-item { padding: var(--sp-8); background: var(--color-surface); border: var(--bw-hair) solid var(--color-wash-edge); border-radius: var(--br-card); box-shadow: var(--shadow-card); transition: box-shadow var(--tr-fast), border-color var(--tr-fast); }
.search-result-item:hover { box-shadow: var(--shadow-card-hover); border-color: var(--color-primary); }
.search-result-inner { display: grid; grid-template-columns: var(--size-cover-lg) minmax(0, 1fr); gap: var(--sp-10); }
.search-result-image a { display: block; aspect-ratio: var(--ratio-cover); overflow: hidden; border-radius: var(--br-sm); box-shadow: var(--shadow-cover); }
.search-result-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.search-result-content { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
.search-result-song-type { font-family: var(--font-head); font-size: var(--fs-xs); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--color-gray); }
.search-result-title { font-family: var(--font-head); font-size: var(--fs-result-title); font-weight: var(--fw-bold); line-height: var(--flh-tight); }
.search-result-title a { text-decoration: none; }
.search-result-title a:hover { text-decoration: underline; }
.search-result-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-6); }
.search-result-grade { padding: var(--sp-1) var(--sp-6); border-radius: var(--br-pill); background: var(--color-primary-dark); color: var(--color-on-primary); font-family: var(--font-head); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.search-result-instrumentation { font-family: var(--font-head); font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--color-gray); }
.search-result-creators { display: grid; gap: var(--sp-1); font-size: var(--fs-sm); }
.creator-label { margin-right: var(--sp-3); font-family: var(--font-head); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--color-primary); }
.search-result-description { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--color-text-soft); }
.com-finder__counter, .com-finder .search-pages-counter { margin: var(--sp-16) 0 0; text-align: center; color: var(--color-gray); font-size: var(--fs-sm); }

/* ============================== 12. FOOTER ============================== */
.site-footer { margin-top: var(--sp-24); padding-block: var(--sp-20) var(--sp-16); background: var(--color-primary-dark); color: var(--color-footer-text); }
.site-footer a { color: var(--color-link-on-dark); }
.site-footer__logo { margin-bottom: var(--sp-12); }
.site-footer__logo img { max-width: var(--w-footer-logo); }
.f-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--w-footer-col), 1fr)); gap: var(--sp-12) var(--sp-24); }
.f-cols .block-title, .f-cols h3 { margin-bottom: var(--sp-4); color: var(--color-gold-on-dark); font-size: var(--fs-base); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.f-cols ul { list-style: none; margin: 0; padding: 0; }
.f-cols li { margin: var(--sp-3) 0; }
.f-cols p { margin: 0 0 var(--sp-6); }
.f-base { display: flex; flex-wrap: wrap; gap: var(--sp-8); justify-content: space-between; align-items: center; margin-top: var(--sp-16); padding-top: var(--sp-10); border-top: var(--bw-hair) solid var(--color-line-on-dark); font-size: var(--fs-sm); }

/* ============================== 13. UTILITIES ============================== */
.btn, .btn-primary { display: inline-block; padding: var(--sp-6) var(--sp-12); border: var(--bw-thin) solid var(--color-link); border-radius: var(--br-pill); background: var(--color-link); color: var(--color-on-primary); font-family: var(--font-head); font-size: var(--fs-lg); font-weight: var(--fw-bold); text-align: center; text-decoration: none; cursor: pointer; }
.btn:hover, .btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-on-primary); }
.btn-secondary { background: var(--color-surface); color: var(--color-link); }
.btn-secondary:hover { background: var(--color-wash); color: var(--color-link); border-color: var(--color-link); }
.pill { display: inline-block; padding: var(--sp-1) var(--sp-6); border-radius: var(--br-pill); background: var(--color-primary-dark); color: var(--color-on-primary); font-family: var(--font-head); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
mark, .highlight { padding: 0 var(--sp-1); border-radius: var(--br-xs); background: var(--color-warm); color: var(--color-text); }

/* ============================== 14. SYSTEM MESSAGES AND ERROR PAGE ============================== */
.site-main > .wrap > #system-message-container:not(:empty) { margin-top: var(--sp-8); }
joomla-alert, .alert { display: block; margin: 0 0 var(--sp-8); padding: var(--sp-7) var(--sp-10); border: var(--bw-hair) solid var(--color-wash-edge); border-left: var(--bw-flag) solid var(--color-primary); border-radius: var(--br-chip); background: var(--color-wash); color: var(--color-text); }
.alert-danger, .alert-error { border-left-color: var(--color-danger); background: var(--color-danger-wash); }
.alert-warning, .alert-notice { border-left-color: var(--color-gold); background: var(--color-warm); }
joomla-alert[type="danger"], joomla-alert[type="error"] { border-left-color: var(--color-danger); background: var(--color-danger-wash); color: var(--color-text); }
joomla-alert[type="warning"] { border-left-color: var(--color-gold); background: var(--color-warm); color: var(--color-text); }
joomla-alert[type="danger"] .alert-heading::before { content: "!"; display: grid; place-items: center; float: left; margin-right: var(--sp-6); width: var(--size-icon); height: var(--size-icon); border-radius: var(--br-round); background: var(--color-danger); color: var(--color-on-primary); font-family: var(--font-head); font-weight: var(--fw-bold); font-size: var(--fs-base); line-height: var(--flh-none); }
joomla-alert .alert-heading > [class]:not(.visually-hidden) { display: none; }
.error-page__body { padding-block: var(--sp-24); }

/* ============================== 15. ACCOUNT FORMS (com_users) ============================== */
/* Log in, register, reset password (+ confirm / complete), remind username, log out, profile (view and edit).
   One design for all: the page heading becomes the title band, the form becomes a rounded card, controls are 44px,
   the "show password" button draws an eye (Joomla's icon font is not loaded), links become one soft panel of rows.
   Real markup (Joomla 6.1.3): div.com-users-<page> > div.page-header > h1 (only when the menu item's "Show Page Heading" is Yes),
   then form.com-users-<page>__form (.well on most pages), fieldset > legend, div.control-group > .control-label + .controls. */
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) > .page-header { position: relative; margin: calc(-1 * var(--sp-16)) 0 var(--sp-16); padding-block: var(--sp-16) var(--sp-12); clip-path: inset(0 calc(-1 * var(--band-spread))); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) > .page-header::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--band-spread)); background: linear-gradient(var(--color-wash), var(--color-surface)); border-bottom: var(--bw-hair) solid var(--color-wash-edge); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) > .page-header h1 { margin: 0; }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) > form { max-width: var(--w-form); margin: 0 auto; padding: var(--sp-fluid-card); background: var(--color-surface); border: var(--bw-hair) solid var(--color-wash-edge); border-radius: var(--br-lg); box-shadow: var(--shadow-panel); }
:is(.com-users-registration, .com-users-profile__edit, .com-users-profile) > form { max-width: var(--w-form-wide); }
.site-main:has(.component-area > :is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit)) #system-message-container { max-width: var(--w-form); margin-inline: auto; }
.site-main:has(.component-area > :is(.com-users-registration, .com-users-profile__edit, .com-users-profile)) #system-message-container { max-width: var(--w-form-wide); }

:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) fieldset + fieldset { margin-top: var(--sp-16); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) fieldset > legend:not(.visually-hidden) { display: block; width: 100%; margin: 0 0 var(--sp-8); padding: 0 0 var(--sp-4); border-bottom: var(--bw-hair) solid var(--color-wash-edge); font-family: var(--font-head); font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--flh-tight); color: var(--color-primary-dark); }
.com-users-remind__form fieldset > legend { border: 0; font-family: var(--font-body); font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: var(--flh-body); color: var(--color-text); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .control-group { margin-bottom: var(--sp-10); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .control-label label { display: block; margin: 0 0 var(--sp-3); font-family: var(--font-head); font-size: var(--fs-label); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-primary-dark); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .star, :is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .red { color: var(--color-danger); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .field-spacer .control-label label { text-transform: none; letter-spacing: var(--ls-normal); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--color-text); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .form-control, :is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .form-select { display: block; width: 100%; min-height: var(--size-touch); padding: var(--pad-input); border: var(--bw-hair) solid var(--color-input-edge); border-radius: var(--br-input); background: var(--color-surface); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--flh-compact); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) textarea.form-control { min-height: 7rem; }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .form-control:focus, :is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .form-select:focus { outline: var(--bw-thick) solid var(--color-blue); outline-offset: var(--bw-thin); border-color: var(--color-blue); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .form-text, :is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .small.text-muted { display: block; margin-top: var(--sp-3); font-family: var(--font-body); font-size: var(--fs-xs); line-height: var(--flh-credit); color: var(--color-gray); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .h-captcha { max-width: 100%; overflow-x: auto; }

/* password + show password */
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .input-group { display: flex; }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .input-group .form-control { border-top-right-radius: var(--br-none); border-bottom-right-radius: var(--br-none); border-right-width: 0; }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .input-group .input-password-toggle { display: grid; place-items: center; flex: none; width: auto; min-width: var(--size-touch); min-height: var(--size-touch); padding: 0; border: var(--bw-hair) solid var(--color-input-edge); border-radius: 0 var(--br-input) var(--br-input) 0; background: var(--color-light); color: var(--color-primary-dark); cursor: pointer; }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .input-group .input-password-toggle:hover { background: var(--color-wash); color: var(--color-primary-dark); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .input-password-toggle .icon-eye, :is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .input-password-toggle .icon-eye-slash { display: block; margin: 0; width: var(--size-icon); height: var(--size-icon); background: currentColor; mask: var(--ico) center / contain no-repeat; -webkit-mask: var(--ico) center / contain no-repeat; }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .input-password-toggle .icon-eye { --ico: url("../images/icons/eye.svg"); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .input-password-toggle .icon-eye-slash { --ico: url("../images/icons/eye-slash.svg"); }

/* checkboxes and radios (remember me, role lists) */
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .form-check { display: flex; align-items: center; gap: var(--sp-5); min-height: var(--size-touch); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .form-check-inline { display: inline-flex; margin-right: var(--sp-10); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .form-check-input { flex: none; width: var(--size-check); height: var(--size-check); margin: 0; accent-color: var(--color-link); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .form-check-label { display: block; margin: 0; font-family: var(--font-body); font-size: var(--fs-base); font-weight: var(--fw-regular); text-transform: none; letter-spacing: var(--ls-normal); color: var(--color-text); cursor: pointer; }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) .form-check-input:focus-visible { outline: var(--bw-thick) solid var(--color-blue); outline-offset: var(--bw-thin); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) fieldset.checkboxes { margin: 0; }

/* buttons: the site's pill buttons; the passkey button is outlined with a sized icon */
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) form .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-5); min-height: var(--size-touch); padding: var(--pad-btn); border: var(--bw-thin) solid var(--color-link); border-radius: var(--br-pill); background: var(--color-link); color: var(--color-on-primary); font-family: var(--font-head); font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--flh-normal); text-decoration: none; cursor: pointer; }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) form .btn:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-on-primary); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) form .btn-secondary { background: var(--color-surface); color: var(--color-link); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) form .btn-secondary:hover { background: var(--color-wash); border-color: var(--color-link); color: var(--color-link); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) form .btn-danger { background: var(--color-surface); border-color: var(--color-danger); color: var(--color-danger); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) form .btn-danger:hover { background: var(--color-danger-wash); border-color: var(--color-danger); color: var(--color-danger); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) form .btn:focus-visible { outline: var(--bw-thick) solid var(--color-blue); outline-offset: var(--bw-thick); }
:is(.com-users-login, .com-users-registration, .com-users-reset, .com-users-reset-confirm, .com-users-reset-complete, .com-users-remind, .com-users-logout, .com-users-profile, .com-users-profile__edit) form .btn:not(.input-password-toggle) > [class*="icon-"] { display: none; }
.com-users-login__submit .btn, .com-users-login .w-100 { width: 100%; }
.com-users-login__submit { margin-bottom: var(--sp-6); }
.com-users-login__remember { margin-bottom: var(--sp-6); }
.plg_system_webauthn_login_button svg { flex: none; width: var(--size-icon); height: var(--size-icon); fill: currentColor; }
.com-users-profile__edit-submit .controls { display: flex; flex-wrap: wrap; gap: var(--sp-6); }

/* the three links under the login form */
.com-users-login__options { max-width: var(--w-form); margin: var(--sp-10) auto 0; background: var(--color-wash); border: var(--bw-hair) solid var(--color-wash-edge); border-radius: var(--br-card); overflow: hidden; }
.com-users-login__options .list-group-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); min-height: var(--size-touch); padding: var(--sp-4) var(--sp-10); font-family: var(--font-head); font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--color-link); text-decoration: none; }
.com-users-login__options .list-group-item + .list-group-item { border-top: var(--bw-hair) solid var(--color-wash-edge); }
.com-users-login__options .list-group-item::after { content: "\203A"; color: var(--color-primary); font-weight: var(--fw-bold); }
.com-users-login__options .list-group-item:hover { background: var(--color-surface); text-decoration: underline; text-decoration-thickness: var(--bw-thin); }
.com-users-login__options .list-group-item:focus-visible { outline: var(--bw-thick) solid var(--color-blue); outline-offset: calc(-1 * var(--bw-thick)); }

/* logout and profile (view): description text, edit button, definition lists as label / value rows */
.com-users-logout__description { max-width: var(--w-form); margin: 0 auto var(--sp-10); }
.com-users-profile > .com-users-profile__edit { display: flex; justify-content: flex-end; margin: 0 0 var(--sp-10); padding: 0; list-style: none; float: none; }
.com-users-profile > .com-users-profile__edit .btn-group { display: block; }
.com-users-profile > .com-users-profile__edit .btn { display: inline-flex; align-items: center; min-height: var(--size-touch); padding: var(--pad-btn); border: var(--bw-thin) solid var(--color-link); border-radius: var(--br-pill); background: var(--color-link); color: var(--color-on-primary); font-family: var(--font-head); font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--flh-normal); text-decoration: none; }
.com-users-profile > .com-users-profile__edit .btn:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.com-users-profile > .com-users-profile__edit .btn > [class*="icon-"] { display: none; }
.com-users-profile > fieldset { max-width: var(--w-form-wide); margin: 0 auto var(--sp-10); padding: var(--sp-fluid-card); background: var(--color-surface); border: var(--bw-hair) solid var(--color-wash-edge); border-radius: var(--br-lg); box-shadow: var(--shadow-panel); }
.com-users-profile > fieldset > legend { float: left; width: 100%; margin: 0 0 var(--sp-8); padding: 0 0 var(--sp-4); border-bottom: var(--bw-hair) solid var(--color-wash-edge); font-family: var(--font-head); font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--flh-tight); color: var(--color-primary-dark); }
.com-users-profile > fieldset > legend + * { clear: both; }
.com-users-profile .dl-horizontal { display: grid; grid-template-columns: minmax(var(--w-meta-label), max-content) 1fr; gap: var(--sp-4) var(--sp-10); margin: 0; }
.com-users-profile .dl-horizontal dt { font-family: var(--font-head); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-primary); }
.com-users-profile .dl-horizontal dd { margin: 0; }

/* passkey management (plugin layout plugins.system.webauthn.manage, shown in the profile edit form) */
.plg_system_webauthn table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-8); }
.plg_system_webauthn thead th { padding: var(--sp-4) var(--sp-6); background: var(--color-primary-dark); color: var(--color-on-primary); font-family: var(--font-head); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-align: left; }
.plg_system_webauthn tbody th, .plg_system_webauthn tbody td { padding: var(--sp-4) var(--sp-6); border-bottom: var(--bw-hair) solid var(--color-wash-edge); text-align: left; font-weight: var(--fw-regular); }
.plg_system_webauthn tbody td:last-child { white-space: nowrap; }
.plg_system_webauthn .btn-success { width: 100%; }
.plg_system_webauthn .btn-success:not(:hover) { background: var(--color-link); }
.com-users-profile__edit-form .plg_system_webauthn .btn { min-height: var(--size-touch); }