/* ============================================================
   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; }
