/**
 * base.css — La capa comuna de TOTES les plantilles token-first.
 * ============================================================================
 *
 * QUI POSA QUE
 *   base.css        (aquest)  → tokens, tipografia de l'HTML corrent, enllaços,
 *                               accessibilitat, formularis, calaix de mòbil,
 *                               impressió. El que ha de ser igual de sòlid a
 *                               les tres plantilles.
 *   <slug>/style.css          → la PERSONALITAT: amplada, capçalera, escala de
 *                               títols, pell dels botons, peu.
 *   contingut.css             → el vocabulari del CONTINGUT d'una pàgina
 *                               (heros, seccions, targetes, bandes).
 *   L'estil triat a Websfera  → els colors, les tipografies i la densitat, via
 *                               les variables --wsf-* de wsf_theme_head().
 *
 * Ordre al <head>: base.css → contingut.css → <slug>/style.css → <style> del
 * tema. La plantilla va DESPRÉS del vocabulari compartit perquè el que és
 * específic ha de guanyar el que és general.
 *
 * ELS VALORS NEUTRES VAN A :where(:root)
 * Amb `:root` a seques i el tema imprès abans, els neutres el trepitjaven i cap
 * web mostrava mai l'estil triat. Amb `:where(:root)` l'especificitat és 0 i
 * qualsevol bloc de tema guanya, vingui abans o després. 19/08/2026
 */

/* ==================================================================== *
 * 1. TOKENS
 * ==================================================================== */

/* Valors neutres de partida. Especificitat 0: el tema triat sempre mana. */
:where(:root) {
    --wsf-bg: #ffffff;
    --wsf-surface: #f4f4f5;
    --wsf-text: #1c1c1e;
    --wsf-accent: #2f6df4;
    --wsf-accent2: #6b8afd;
    --wsf-on-accent: #ffffff;
    --wsf-line: rgba(28, 28, 30, 0.14);
    --wsf-sp: 14px;
    --wsf-radius: 8px;
    --wsf-font-heading: system-ui, sans-serif;
    --wsf-font-body: system-ui, sans-serif;
    --wsf-heading-weight: 700;
}

body.wsf-tpl {
    /* Cada plantilla els redefineix: aquests són els de partida. */
    --wsf-ample: 1120px;      /* amplada del marc (capçalera, contingut, peu) */
    --wsf-marge: clamp(20px, 5vw, 44px);
    --wsf-mesura: 68ch;       /* columna de lectura del text corrent */
    --wsf-barra: 68px;        /* alçada de la barra, per als ancoratges */
    /* El menú passa a calaix per sota de 900px. No hi ha token: una @media
       no pot llegir una variable CSS, o sigui que el número viu escrit a
       cada style.css. Si es canvia, s'ha de canviar a les tres. */

    /* Ritme vertical: cinc graons derivats de la densitat del tema, perquè
       Nocturne (sp 8,4px) quedi compacte i Broadsheet (15px) respiri. */
    --wsf-r1: calc(var(--wsf-sp) * 0.5);
    --wsf-r2: var(--wsf-sp);
    --wsf-r3: calc(var(--wsf-sp) * 2);
    --wsf-r4: calc(var(--wsf-sp) * 3.5);
    --wsf-r5: clamp(48px, calc(var(--wsf-sp) * 5), 112px);
}

/* El contenidor de consulta: fa que les regles @container device d'aquest
   fitxer, de contingut.css i de les plantilles entrin en joc. En públic val
   tota l'amplada útil (com el viewport però SENSE la barra de scroll, que és
   el que feia que els blocs a tota amplada provoquessin barra horitzontal); a
   l'editor val l'amplada del marc de previsualització, i per això la vista de
   mòbil del llapis reflueix de debò. */
body.wsf-tpl #device-wrapper {
    container-type: inline-size;
    container-name: device;
}

/* ---------- El <section> d'una plantilla NO és una pantalla ----------
   websfera-global.css fa que, en un dispositiu tàctil, cada <section> ocupi
   100svh: és el sistema d'enganxada dels webs artesanals, on una secció ÉS una
   pantalla. A les plantilles <section> és un bloc de contingut corrent, i el
   resultat al telèfon era una portada de 4.700px amb forats enormes. La part
   de JS del snap es desactiva amb WEBSFERA_DISABLE_SNAP. 19/08/2026 */
html.touch-device body.wsf-tpl #device-wrapper section {
    min-height: 0;
    scroll-margin-top: 0;
}

/* ==================================================================== *
 * 2. BASE
 * ==================================================================== */

body.wsf-tpl {
    margin: 0;
    padding: 0;
    background: var(--wsf-bg);
    color: var(--wsf-text);
    font-family: var(--wsf-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body.wsf-tpl * { box-sizing: border-box; }
body.wsf-tpl img,
body.wsf-tpl svg,
body.wsf-tpl video { max-width: 100%; height: auto; }
body.wsf-tpl .wsf-main { overflow-wrap: break-word; }
body.wsf-tpl [id] { scroll-margin-top: calc(var(--wsf-barra) + var(--wsf-r2)); }

body.wsf-tpl ::selection {
    background: color-mix(in srgb, var(--wsf-accent) 22%, transparent);
    color: var(--wsf-text);
}

/* ---------- Enllaços ----------------------------------------------------
   Això anava escopat a `#device-wrapper a` per una raó bona: la barra lateral
   d'edició viu dins del mateix <body> i, sense escopar, els seus ítems sortien
   pintats amb l'accent del client. Però un selector amb ID guanya a QUALSEVOL
   classe i es menjava tots els colors de després: els botons plens de
   contingut.css sortien amb el text del color del fons — botons BUITS — i el
   menú, la marca i el peu sortien tots de color accent.
   El lloc correcte no és l'ID: és el CONTINGUT. Els enllaços que han de dur
   l'accent són els del text de la pàgina, i viuen sempre dins de .wsf-main; la
   barra lateral d'edició no hi és mai. 19/08/2026 */
body.wsf-tpl a { text-decoration: none; }
body.wsf-tpl .wsf-main a { color: var(--wsf-accent); }
body.wsf-tpl .wsf-main a:hover { color: var(--wsf-accent2); }
/* El color del text del botó ple el decideix CADA plantilla (Essencial el vol
   sobre l'accent, Estudi sobre la tinta, Revista de contorn): si es decidís
   aquí, la base es menjaria la pell de dues de les tres. */
body.wsf-tpl .wsf-main a.wsf-btn-alt,
body.wsf-tpl .wsf-main .wsf-banda-forta a { color: inherit; }

/* Dins d'un paràgraf, el color sol no distingeix prou l'enllaç (i amb
   daltonisme, gens): hi va subratllat. */
body.wsf-tpl .wsf-main p > a,
body.wsf-tpl .wsf-main li > a {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

/* Un anell de focus visible i igual a tot arreu: és el que separa un web
   acabat d'un web a mitges per a qui navega amb teclat. */
body.wsf-tpl a:focus-visible,
body.wsf-tpl button:focus-visible,
body.wsf-tpl input:focus-visible,
body.wsf-tpl textarea:focus-visible,
body.wsf-tpl select:focus-visible,
body.wsf-tpl summary:focus-visible {
    outline: 2px solid var(--wsf-accent);
    outline-offset: 3px;
    border-radius: calc(var(--wsf-radius) * 0.4);
}

/* Salt al contingut: el primer tabulador de la pàgina. */
body.wsf-tpl .wsf-salta {
    position: absolute;
    left: var(--wsf-marge);
    top: 0;
    z-index: 200;
    transform: translateY(-140%);
    background: var(--wsf-accent);
    color: var(--wsf-on-accent);
    padding: 0.7em 1.2em;
    border-radius: 0 0 var(--wsf-radius) var(--wsf-radius);
    font-family: var(--wsf-font-heading);
    font-size: 0.9rem;
    transition: transform .18s ease;
}
body.wsf-tpl .wsf-salta:focus { transform: translateY(0); color: var(--wsf-on-accent); }

/* ==================================================================== *
 * 3. L'HTML CORRENT
 * ==================================================================== *
 * Una plantilla generica ha de tenir estil per a TOT el que pot escriure algu
 * des de l'editor, no nomes per als blocs del vocabulari: taules de preus,
 * llistes, codi, definicions, notes al peu. El que no te estil, canta. */

body.wsf-tpl h1, body.wsf-tpl h2, body.wsf-tpl h3,
body.wsf-tpl h4, body.wsf-tpl h5, body.wsf-tpl h6 {
    font-family: var(--wsf-font-heading);
    font-weight: var(--wsf-heading-weight);
    color: var(--wsf-text);
    margin: var(--wsf-r4) 0 var(--wsf-r2);
    text-wrap: balance;
}
body.wsf-tpl h1 { margin-top: 0; }
body.wsf-tpl h5, body.wsf-tpl h6 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.7;
}

body.wsf-tpl p { margin: 0 0 var(--wsf-r2); text-wrap: pretty; }
body.wsf-tpl .wsf-main ul,
body.wsf-tpl .wsf-main ol { margin: 0 0 var(--wsf-r2); padding-left: 1.35em; }
body.wsf-tpl .wsf-main li { margin-bottom: var(--wsf-r1); }
body.wsf-tpl .wsf-main li::marker { color: var(--wsf-accent); }
body.wsf-tpl .wsf-main dl { margin: var(--wsf-r3) 0 var(--wsf-r2); }
body.wsf-tpl .wsf-main dt { font-family: var(--wsf-font-heading); font-weight: var(--wsf-heading-weight); }
body.wsf-tpl .wsf-main dd { margin: 0 0 var(--wsf-r2); opacity: 0.85; }

body.wsf-tpl hr { border: none; height: 1px; background: var(--wsf-line); margin: var(--wsf-r4) 0; }
body.wsf-tpl blockquote > :last-child { margin-bottom: 0; }

body.wsf-tpl small { font-size: 0.85em; opacity: 0.75; }
body.wsf-tpl mark {
    background: color-mix(in srgb, var(--wsf-accent) 20%, transparent);
    color: inherit;
    padding: 0.1em 0.25em;
    border-radius: calc(var(--wsf-radius) * 0.3);
}
body.wsf-tpl .wsf-main code,
body.wsf-tpl .wsf-main kbd,
body.wsf-tpl .wsf-main samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: var(--wsf-surface);
    padding: 0.15em 0.4em;
    border-radius: calc(var(--wsf-radius) * 0.4);
}
body.wsf-tpl .wsf-main pre {
    background: var(--wsf-surface);
    border-radius: var(--wsf-radius);
    padding: var(--wsf-r2);
    overflow-x: auto;
    margin: 0 0 var(--wsf-r2);
}
body.wsf-tpl .wsf-main pre code { background: none; padding: 0; }

body.wsf-tpl .wsf-main table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--wsf-r2);
    font-size: 0.95rem;
}
body.wsf-tpl .wsf-main th,
body.wsf-tpl .wsf-main td {
    text-align: left;
    padding: calc(var(--wsf-sp) * 0.75) var(--wsf-sp);
    border-bottom: 1px solid var(--wsf-line);
}
body.wsf-tpl .wsf-main th {
    font-family: var(--wsf-font-heading);
    font-weight: var(--wsf-heading-weight);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
body.wsf-tpl .wsf-main tbody tr:hover { background: var(--wsf-surface); }
body.wsf-tpl .wsf-taula-scroll { overflow-x: auto; margin: 0 0 var(--wsf-r2); }

/* ==================================================================== *
 * 4. FORMULARIS — comportament i mides (la pell, cada plantilla)
 * ==================================================================== */

body.wsf-tpl .wsf-main button,
body.wsf-tpl .wsf-main input[type="submit"],
body.wsf-tpl .wsf-main input[type="button"],
body.wsf-tpl .wsf-main .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-family: var(--wsf-font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    /* Objectiu de toc: mai per sota dels 44px que demana una pantalla tàctil. */
    min-height: 44px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity .16s ease, transform .16s ease, background-color .16s ease;
}
body.wsf-tpl .wsf-main label {
    display: block;
    font-family: var(--wsf-font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: calc(var(--wsf-sp) * 0.4);
}
body.wsf-tpl .wsf-main input[type="text"],
body.wsf-tpl .wsf-main input[type="email"],
body.wsf-tpl .wsf-main input[type="tel"],
body.wsf-tpl .wsf-main input[type="url"],
body.wsf-tpl .wsf-main input[type="number"],
body.wsf-tpl .wsf-main input[type="date"],
body.wsf-tpl .wsf-main input[type="search"],
body.wsf-tpl .wsf-main input[type="password"],
body.wsf-tpl .wsf-main textarea,
body.wsf-tpl .wsf-main select {
    width: 100%;
    color: var(--wsf-text);
    min-height: 44px;
    font-family: var(--wsf-font-body);
    font-size: 1rem;   /* 16px: per sota, l'iPhone fa zoom sol en enfocar */
    margin-bottom: var(--wsf-r2);
    transition: border-color .16s ease;
}
body.wsf-tpl .wsf-main textarea { min-height: 140px; resize: vertical; }
body.wsf-tpl .wsf-main input::placeholder,
body.wsf-tpl .wsf-main textarea::placeholder { color: var(--wsf-text); opacity: 0.45; }

/* ==================================================================== *
 * 5. CONTINGUT: mesura de lectura i encaix amb contingut.css
 * ==================================================================== */

/* El text solt (una pàgina escrita a pel des de l'editor, sense cap classe del
   vocabulari) es queda a mesura de lectura; les peces maquetades — seccions,
   graelles, bandes — poden fer servir tota l'amplada. */
body.wsf-tpl .wsf-main > p,
body.wsf-tpl .wsf-main > ul,
body.wsf-tpl .wsf-main > ol,
body.wsf-tpl .wsf-main > dl,
body.wsf-tpl .wsf-main > h2,
body.wsf-tpl .wsf-main > h3,
body.wsf-tpl .wsf-main > h4,
body.wsf-tpl .wsf-main > blockquote,
body.wsf-tpl .wsf-main > table,
body.wsf-tpl .wsf-main > pre,
body.wsf-tpl .wsf-main > figure,
body.wsf-tpl .wsf-main > form { max-width: var(--wsf-mesura); }
body.wsf-tpl .wsf-main > h2,
body.wsf-tpl .wsf-main > h3 { max-width: 26ch; }

/* ---------- La col·lisió de noms amb la .wsf-seccio de l'editor ----------
   websfera-global.css dona padding i un fons alternat a `.wsf-seccio` per a
   les seccions que es creen des del botó «Afegir nova secció» dels webs
   artesanals. Però contingut.css fa servir el MATEIX nom de classe per als
   blocs de pàgina de les plantilles, i el resultat era que, dins la plantilla,
   totes les seccions menys la primera sortien damunt d'un gris del 3% que
   ningú no havia demanat. Aquí es neutralitza i el ritme el posa la plantilla.
   Cal l'ID perquè la regla global va escopada a #device-wrapper. 19/08/2026 */
body.wsf-tpl #device-wrapper .wsf-main .wsf-seccio {
    padding: 0;
    background: none;
    margin-block: var(--wsf-r5);
}
body.wsf-tpl #device-wrapper .wsf-main > :first-child { margin-top: 0; }
body.wsf-tpl #device-wrapper .wsf-main > :last-child { margin-bottom: 0; }

/* Els blocs a tota amplada de contingut.css sortien de la columna amb 50vw,
   que compta la barra de scroll i provoca barra horitzontal. Amb el contenidor
   declarat, 50cqw és exactament l'amplada útil. Cal l'ID per guanyar a
   contingut.css, que es carrega després amb la mateixa especificitat. */
body.wsf-tpl #device-wrapper .wsf-main .wsf-banda {
    margin-inline: calc(50% - 50cqw);
    padding-inline: calc(50cqw - 50% + var(--wsf-marge));
}
body.wsf-tpl #device-wrapper .wsf-main .wsf-imatge.wsf-plena { margin-inline: calc(50% - 50cqw); }

/* El testimoni ja porta el seu filet vertical: la citació de dins no ha de
   tornar a dur la caixa del blockquote base. */
body.wsf-tpl .wsf-main .wsf-testimoni blockquote {
    background: none;
    border-left: none;
    border-radius: 0;
    padding: 0;
}

/* ==================================================================== *
 * 6. CALAIX DE MENÚ EN PANTALLES ESTRETES
 * ==================================================================== *
 * Mecànica compartida per les tres plantilles (el marcatge i el JS també ho
 * són: tpl/plantilla-menu.php). Cada plantilla només en pinta la pell. */

body.wsf-tpl .wsf-nav-toggle {
    display: none;   /* només surt per sota del punt de ruptura */
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 1px solid var(--wsf-line);
    border-radius: calc(var(--wsf-radius) * 0.8);
    color: var(--wsf-text);
    cursor: pointer;
}
body.wsf-tpl .wsf-nav-toggle-icona {
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: background-color .16s ease;
}
body.wsf-tpl .wsf-nav-toggle-icona::before,
body.wsf-tpl .wsf-nav-toggle-icona::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: transform .2s ease;
}
body.wsf-tpl .wsf-nav-toggle-icona::before { top: -6px; }
body.wsf-tpl .wsf-nav-toggle-icona::after { top: 6px; }
body.wsf-nav-obert .wsf-nav-toggle-icona { background: transparent; }
body.wsf-nav-obert .wsf-nav-toggle-icona::before { transform: translateY(6px) rotate(45deg); }
body.wsf-nav-obert .wsf-nav-toggle-icona::after { transform: translateY(-6px) rotate(-45deg); }

/* ==================================================================== *
 * 7. LA MARCA QUAN ENCARA NO HI HA LOGO
 * ==================================================================== *
 * Editant, un requadre clicable que obre el gestor del logo; en públic, el nom
 * del web fa de marca tipogràfica. Veure lib/marca.php. */

body.wsf-tpl .wsf-marca-buida {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    padding: 0.55em 0.9em;
    border: 1px dashed currentColor;
    border-radius: var(--wsf-radius);
    opacity: 0.5;
    font-family: var(--wsf-font-heading), sans-serif;
    font-size: 0.8rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: opacity .16s ease, border-color .16s ease;
}
body.wsf-tpl .wsf-marca-buida:hover { opacity: 0.9; border-color: var(--wsf-accent); }
body.wsf-tpl .wsf-marca-buida:focus-visible { outline: 2px solid var(--wsf-accent); outline-offset: 3px; opacity: 0.9; }
body.wsf-tpl .wsf-marca-creu { font-size: 1.15em; font-weight: 700; line-height: 1; }
body.wsf-tpl .wsf-marca-nom {
    font-family: var(--wsf-font-heading), sans-serif;
    font-weight: var(--wsf-heading-weight, 700);
    line-height: 1.1;
}

/* ==================================================================== *
 * 8. PEU: peces compartides
 * ==================================================================== */

body.wsf-tpl .wsf-footer-titol {
    margin: 0 0 var(--wsf-r1);
    font-family: var(--wsf-font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.55;
}
body.wsf-tpl .wsf-footer-meta { margin: 0; font-size: 0.82rem; opacity: 0.6; }
/* Enllacos legals al peu (18/09/2026). El bloc .wsf-footer-baix el disposa cada plantilla. */
body.wsf-tpl .wsf-footer-legal { display: flex; flex-wrap: wrap; gap: 0.35em 1.25em; font-size: 0.82rem; }
body.wsf-tpl .wsf-footer-legal a { color: inherit; opacity: 0.6; text-decoration: none; }
body.wsf-tpl .wsf-footer-legal a:hover,
body.wsf-tpl .wsf-footer-legal a:focus-visible { opacity: 1; text-decoration: underline; }
body.wsf-tpl .wsf-footer-org { font-size: 0.9rem; opacity: 0.7; max-width: 40ch; }

/* ==================================================================== *
 * 9. MOVIMENT I IMPRESSIÓ
 * ==================================================================== */

@media (prefers-reduced-motion: reduce) {
    body.wsf-tpl *,
    body.wsf-tpl *::before,
    body.wsf-tpl *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    body.wsf-tpl .wsf-main button:hover,
    body.wsf-tpl .wsf-main .btn:hover,
    body.wsf-tpl .wsf-main .wsf-btn:hover { transform: none; }
}

@media print {
    body.wsf-tpl .wsf-header,
    body.wsf-tpl .wsf-footer,
    body.wsf-tpl .wsf-salta,
    body.wsf-tpl .wsf-nav-toggle { display: none !important; }
    body.wsf-tpl { background: #fff; color: #000; }
    body.wsf-tpl .wsf-main { max-width: none; padding: 0; }
    body.wsf-tpl .wsf-main a { color: #000; text-decoration: underline; }
}
