/* ============================================================
   Websfera — CSS global aplicat a tots els clients
   Carregat des de /usr/share/kms/websfera/tpl/websfera-scripts.php
   ============================================================ */

/* Reset margin per defecte del navegador */
body {
    margin: 0;
}

/* ------------------------------------------------------------
   SCROLL-SNAP global per a <section> en mòbil/tablet
   Cada <section> s'enganxa al scroll i ocupa tota la pantalla.
   ------------------------------------------------------------ */

/* Detecció de touch via JS (classe .touch-device a <html>)
   Més fiable que @media (pointer: coarse) o max-width per a iPadOS Safari,
   que des d'iPadOS 13 sovint es reporta com a desktop independentment de
   la resolució o l'orientació. */

/* Per touch-devices, NO usem scroll-snap CSS natiu: interfereix amb el JS de
   snap (a websfera-scripts.php) i causa comportaments imprevisibles, sobretot
   a iPad landscape. El JS implementa tot el snap de forma controlada. */
html.touch-device {
    scroll-behavior: smooth;
    scroll-padding-top: var(--websfera-header-h, 0px);
}
html.touch-device body section {
    /* scroll-margin-top respectat per scrollIntoView: deixa espai pel sticky header */
    scroll-margin-top: var(--websfera-header-h, 0px);
    min-height: 100vh;  /* fallback */
    min-height: 100svh;
    box-sizing: border-box;
}

/* Editor preview: quan #device-wrapper té responsive-mobile/responsive-tablet */
#device-wrapper.responsive-mobile,
#device-wrapper.responsive-tablet {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}
#device-wrapper.responsive-mobile section,
#device-wrapper.responsive-tablet section {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    min-height: 700px;
    box-sizing: border-box;
}

/* ------------------------------------------------------------
   Peu sempre enganxat a la part inferior de la finestra (17/08/2026)
   A les pagines curtes (404, legals, contacte...) el peu quedava a mitja
   pantalla. El llenc es una columna flex i el <footer> fill directe del
   #device-wrapper s'empeny cap avall; si el contingut es mes alt que la
   finestra, tot segueix igual (scroll normal). Val per al web public
   (min-height:100vh a device-wrapper.css) i per al marc de l'editor
   (alcada fixa). Els fills que no son el peu no canvien d'amplada
   (align-items:stretch = block normal).
   ------------------------------------------------------------ */
#device-wrapper { display: flex; flex-direction: column; }
#device-wrapper > footer { margin-top: auto; }

/* ------------------------------------------------------------
   SECCIO NOVA DE L'EDITOR (.wsf-seccio) — plantilla minima
   ------------------------------------------------------------
   Les seccions que es creen des de l'editor (requadre «Afegir nova seccio»,
   js/modules/27-spacing-editor.js -> createSectionAtPhantom) sortien sense cap
   estil: un <section> nu amb un h2 i un <p> enganxats a la vora, que no semblava
   un bloc de res. Aquestes regles els donen el minim per veure's com un bloc:
   respiracio vertical, un contenidor centrat d'amplada llegible i espaiat entre
   titol i text. Tot en variables --wsf-seccio-* perque cada client (o una
   plantilla) ho pugui ajustar des del seu CSS sense tocar aixo, i amb pes baix
   (:where) perque qualsevol regla del client guanyi. 18/08/2026 */
#device-wrapper :where(.wsf-seccio) {
    padding: var(--wsf-seccio-pad-y, clamp(48px, 8vw, 96px)) var(--wsf-seccio-pad-x, 24px);
    box-sizing: border-box;
}
#device-wrapper :where(.wsf-seccio-cont) {
    max-width: var(--wsf-seccio-max, 1080px);
    margin-inline: auto;
}
#device-wrapper :where(.wsf-seccio) :where(.wsf-seccio-titol) {
    margin: 0 0 var(--wsf-seccio-gap, 20px);
    font-size: var(--wsf-seccio-titol-mida, clamp(1.6rem, 3vw, 2.4rem));
    line-height: 1.15;
}
#device-wrapper :where(.wsf-seccio) :where(.wsf-seccio-text) {
    margin: 0;
    max-width: var(--wsf-seccio-text-max, 68ch);
    font-size: var(--wsf-seccio-text-mida, 1.05rem);
    line-height: 1.6;
}
/* Una seccio nova darrere d'una altra de nova: fons alternat suau perque es
   distingeixin els blocs sense que el client hagi de triar cap color. */
#device-wrapper :where(.wsf-seccio + .wsf-seccio) {
    background: var(--wsf-seccio-alt-bg, rgba(0, 0, 0, 0.03));
}
