/* tipografia */
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2");
}

@font-face {
    font-family: "Anybody";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 50% 150%;
    font-display: swap;
    src: url("../fonts/Anybody-Variable.woff") format("woff");
}


::selection {
  color: #444CF7;       /* Text color */
  background-color: #FFFF00; /* Highlight background color */
}


/* :root */
:root {
    /* colors */
    --ap-blue:        #444CF7;
    --ap-lavender:    #E5E5F7;

    /* colors semàntics */
    --ap-fg:          var(--ap-blue);        /* text, logo, línies i icones */
    --ap-page:        var(--ap-lavender);    /* fons de la pàgina */
    --ap-cta-bg:      var(--ap-blue);        /* fons del botó */
    --ap-cta-fg:      var(--ap-lavender);    /* text del botó */
    --ap-cta-hover-alpha: 20%;               /* opacitat del fons del botó en passar-hi (20% = 80% transparent) */
    --ap-cta-hover-fg:    var(--ap-blue);    /* text del botó en passar-hi */
    --ap-footer-bg:   var(--ap-blue);        /* fons del peu */
    --ap-footer-fg:   var(--ap-lavender);    /* text i logos del peu */

    /* fons quadriculat */
    --ap-cell:          36px;                /* mida de la quadrícula: tot s'hi alinea */
    --ap-grid-line:     var(--ap-fg);        /* color de les línies */
    --ap-grid-weight:   0.5px;              /* gruix de les línies */
    --ap-bg-opacity:    70%;                 /* opacitat del fons (sobre blanc) */
    --ap-bg-base:       #ffffff;             /* el que hi ha "darrere" el fons */
    /* colors del fons amb l'opacitat ja aplicada (equival a opacity: 0.8 només al fons) */
    --ap-bg-color:      color-mix(in srgb, var(--ap-page) var(--ap-bg-opacity), var(--ap-bg-base));
    --ap-grid-color:    color-mix(in srgb, var(--ap-grid-line) var(--ap-bg-opacity), var(--ap-bg-base));

    /* topografia (per sota de la quadrícula) */
    --ap-topo-image:    url("../img/topography.svg");   /* forma del dibuix (el color no importa) */
    --ap-topo-color:    var(--ap-fg);                  /* color corporatiu */
    --ap-topo-opacity:  0%;                           /* intensitat del dibuix */
    --ap-topo-size:     600px;                         /* mida de cada repetició */

    /* logo APPunts */
    --ap-logo-font:        "Anybody", system-ui, sans-serif;
    --ap-logo-width:       66.667%;
    --ap-logo-min-width:   500px;
    --ap-logo-size:        clamp(4rem, 16vw, 14rem);  /* mida provisional / sense JS */
    --ap-logo-weight:      800;
    --ap-logo-tracking:    0;
    --ap-logo-wdth:        50;                /* amplada de la lletra en repòs (50 = més condensada) */
    --ap-logo-hover-wdth:  150;               /* amplada de la lletra sota el ratolí (150 = més ampla) */
    --ap-logo-dot:         var(--ap-fg);      /* color del punt quadrat final */
    --ap-logo-dot-size:    0.1em;             /* costat del quadrat */
    --ap-logo-dot-gap:     0.04em;            /* espai abans del quadrat */
    --ap-logo-trim:        0.2;               /* retalla l'espai buit de sota la línia base (en em) */

    /* text descriptiu */
    --ap-desc-size:     1rem;
    --ap-desc-leading:  1.5;
    --ap-desc-width:    46ch;                 /* amplada del text (encaixa a la quadrícula) */
    --ap-desc-weight:   400;
    --ap-desc-padding:  1rem;
    --ap-desc-margin:   2px;                 /* marge entre les línies del fons i el fons llis */
    --ap-desc-bg:       var(--ap-bg-color);   /* fons llis: el mateix color del fons, sense línies */
    --ap-desc-fg:       var(--ap-fg);

    /* botó CTA */
    --ap-cta-size:      1rem;
    --ap-cta-height:    calc(var(--ap-cell) * 2);
    --ap-cta-padding-x: var(--ap-cell);

    /* botó de mode clar/fosc */
    --ap-toggle-size:   var(--ap-cell);
    --ap-toggle-icon:   1.375rem;

    /* footer */
    --ap-footer-logo-width:  100px;           /* amplada de cada logo */
    --ap-footer-text-size:   0.8rem;
    --ap-footer-gap:         var(--ap-cell);  /* espai entre columnes i entre logos */
    --ap-footer-padding:     var(--ap-cell);  /* espai vertical del peu */

    /* popup de sol·licitud d'accés */
    --ap-modal-width:     calc(var(--ap-cell) * 14);   /* 504px */
    --ap-modal-padding:   var(--ap-cell);
    --ap-modal-bg:        var(--ap-bg-color);
    --ap-modal-backdrop:  color-mix(in srgb, var(--ap-blue) 60%, transparent);
    --ap-field-height:    calc(var(--ap-cell) * 1.5);  /* 54px */
    --ap-field-border:    1px;

    /* general */
    --ap-font:          "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --ap-gutter:        var(--ap-cell);             /* marge lateral: 1 quadre */
    --ap-top:           calc(var(--ap-cell) * 2);   /* espai a dalt */
    --ap-space:         var(--ap-cell);             /* espai entre logo, text i botó */
    --ap-radius:        0;
    --ap-transition:    200ms ease;
}

/* mode fosc canvien els colors */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ap-fg:          var(--ap-lavender);
        --ap-page:        var(--ap-blue);
        --ap-cta-bg:      var(--ap-lavender);
        --ap-cta-fg:      var(--ap-blue);
        --ap-cta-hover-fg: var(--ap-lavender);
        --ap-footer-bg:   var(--ap-lavender);
        --ap-footer-fg:   var(--ap-blue);
        --ap-bg-base:     var(--ap-blue);
        --ap-modal-backdrop: color-mix(in srgb, var(--ap-lavender) 35%, transparent);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --ap-fg:          var(--ap-lavender);
    --ap-page:        var(--ap-blue);
    --ap-cta-bg:      var(--ap-lavender);
    --ap-cta-fg:      var(--ap-blue);
    --ap-cta-hover-fg: var(--ap-lavender);
    --ap-footer-bg:   var(--ap-lavender);
    --ap-footer-fg:   var(--ap-blue);
    --ap-bg-base:     var(--ap-blue);
    --ap-modal-backdrop: color-mix(in srgb, var(--ap-lavender) 35%, transparent);
    color-scheme: dark;
}


/* base i estructura */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    --_bg:   var(--ap-bg-color);
    --_line: var(--ap-grid-color);

    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: minmax(0, 1fr);
    color: var(--ap-fg);
    font-family: var(--ap-font);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;

    /* fons en tres capes: color (aquí) → topografia (::before) → quadrícula (::after) */
    position: relative;
    isolation: isolate;
    background-color: var(--_bg);
}

:focus-visible {
    outline: 2px solid var(--ap-fg);
    outline-offset: 3px;
}

.ap-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    row-gap: var(--ap-space);
    padding: var(--ap-top) var(--ap-gutter) calc(var(--ap-cell) * 2);
    overflow-x: clip;
}


/* capa 2: topografia, pintada amb el color corporatiu (el SVG fa de màscara) */
body::before,
body::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

body::before {
    z-index: -2;
    background-color: color-mix(in srgb, var(--ap-topo-color) var(--ap-topo-opacity), transparent);
    -webkit-mask: var(--ap-topo-image) 0 0 / var(--ap-topo-size) repeat;
            mask: var(--ap-topo-image) 0 0 / var(--ap-topo-size) repeat;
}

/* capa 3: quadrícula. Les línies es tallen amb una màscara (no tapen la topografia) */
body::after {
    z-index: -1;
    background-image:
        linear-gradient(to bottom, var(--_line) var(--ap-grid-weight), transparent var(--ap-grid-weight)),
        linear-gradient(to right,  var(--_line) var(--ap-grid-weight), transparent var(--ap-grid-weight));
    background-size: var(--ap-cell) var(--ap-cell);
    background-position: 0 calc(var(--ap-grid-weight) / -3), calc(var(--ap-grid-weight) / -3) 0;
    -webkit-mask:
        repeating-linear-gradient(to right,  #000 0, #000 3px, transparent 3px, transparent 9px, #000 9px, #000 12px),
        repeating-linear-gradient(to bottom, #000 0, #000 3px, transparent 3px, transparent 9px, #000 9px, #000 12px);
    -webkit-mask-composite: source-in;
            mask:
        repeating-linear-gradient(to right,  #000 0, #000 3px, transparent 3px, transparent 9px, #000 9px, #000 12px),
        repeating-linear-gradient(to bottom, #000 0, #000 3px, transparent 3px, transparent 9px, #000 9px, #000 12px);
            mask-composite: intersect;
}

/* botó de tema clar / fosc */
.ap-theme {
    position: relative;
    top: var(--ap-cell);
    right: var(--ap-cell); /* js/appunts.js l'encaixa a la quadrícula */
    z-index: 10;
    display: grid;
    place-items: center;
    width: var(--ap-toggle-size);
    height: var(--ap-toggle-size);
    padding: 0;
    background: transparent;
    color: var(--ap-fg);
    border: 0;
    border-radius: var(--ap-radius);
    cursor: pointer;
}

.ap-theme svg {
    grid-area: 1 / 1;
    width: var(--ap-toggle-icon);
    height: var(--ap-toggle-icon);
    transition: opacity var(--ap-transition), transform var(--ap-transition);
}

/* icones mode clar/fosc */
.ap-theme .ap-theme__sun  { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.ap-theme .ap-theme__moon { opacity: 1; }
:root[data-theme="dark"] .ap-theme .ap-theme__sun  { opacity: 1; transform: none; }
:root[data-theme="dark"] .ap-theme .ap-theme__moon { opacity: 0; transform: rotate(90deg) scale(0.6); }

/* logo APPunts */
.ap-logo {
    margin: 0;
    width: max(var(--ap-logo-min-width), var(--ap-logo-width));
    max-width: 100%;
    font-family: var(--ap-logo-font);
    font-size: var(--ap-logo-size);
    font-weight: var(--ap-logo-weight);
    line-height: 1;
    letter-spacing: var(--ap-logo-tracking);
    display: grid;
    align-items: end;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.ap-logo__word {
    display: flex;
    align-items: baseline;
    width: max-content;
    white-space: nowrap;
    margin-bottom: calc(-1em * var(--ap-logo-trim));
}

.ap-logo__char {
    --w: var(--ap-logo-wdth);
    display: inline-block;
    font-variation-settings: "wdth" var(--w);
    cursor: default;
}

/* punt final */
.ap-logo__char--dot {
    width: calc(var(--ap-logo-dot-size) * var(--w) / var(--ap-logo-wdth));
    height: var(--ap-logo-dot-size);
    margin-left: var(--ap-logo-dot-gap);
    background: var(--ap-logo-dot);
}


/* text descriptiu */

.ap-desc {
    margin: 0;
    max-width: calc(var(--ap-desc-width) + 2 * (var(--ap-desc-padding) + var(--ap-desc-margin)));
    padding: var(--ap-desc-padding);
    border: var(--ap-desc-margin) solid transparent;
    background: var(--ap-desc-bg) padding-box;
    color: var(--ap-desc-fg);
    font-size: var(--ap-desc-size);
    font-weight: var(--ap-desc-weight);
    line-height: var(--ap-desc-leading);
    perspective: 500px;
}

.js .ap-desc { visibility: hidden; }


/* CTA */
.ap-cta {
    justify-self: start;
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    height: var(--ap-cta-height);
    padding: 0 var(--ap-cta-padding-x);
    font-family: var(--ap-font);
    font-size: var(--ap-cta-size);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ap-cta-fg);
    background: var(--ap-cta-bg);
    border: 0;
    border-radius: var(--ap-radius);
    cursor: pointer;
    transition: background var(--ap-transition), color var(--ap-transition);
}

.ap-cta svg {
    width: 1.1em;
    height: 1.1em;
    transition: transform var(--ap-transition);
}

.ap-cta:hover,
.ap-cta:focus-visible {
    background: color-mix(in srgb, var(--ap-cta-bg) var(--ap-cta-hover-alpha), transparent);
    color: var(--ap-cta-hover-fg);
}

.ap-cta:hover svg { transform: translateX(4px); }


/* footer */

.ap-footer {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    align-content: start;
    column-gap: var(--ap-footer-gap);
    row-gap: var(--ap-cell);
    padding: var(--ap-footer-padding) var(--ap-gutter);
    background: var(--ap-footer-bg);
    color: var(--ap-footer-fg);
}

.ap-footer__text {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--ap-footer-text-size);
    line-height: 1.5;
	border-top: 1px dashed;
	padding-top: 1rem;
}

.ap-footer__text a {
    color: var(--ap-footer-fg) !important;
}
.ap-footer__partners {
    display: grid;
    grid-template-columns: repeat(2, var(--ap-footer-logo-width));
    justify-self: end;
    align-items: center;
    gap: var(--ap-footer-gap);
}

.ap-footer__logo {
    display: block;
    width: var(--ap-footer-logo-width);
    height: auto;
    color: var(--ap-footer-fg);
}

/* popup de sol·licitud d'accés */

html:has(.ap-modal[open]) { overflow: hidden; }   /* no es desplaça la pàgina de sota */

.ap-modal {
    width: min(var(--ap-modal-width), calc(100vw - 2 * var(--ap-gutter)));
    max-height: calc(100svh - 2 * var(--ap-gutter));
    padding: var(--ap-modal-padding);
    border: 0;
    border-radius: var(--ap-radius);
    background: var(--ap-modal-bg);
    color: var(--ap-fg);
    font-family: var(--ap-font);
    overflow: auto;
}

.ap-modal::backdrop {
    background: var(--ap-modal-backdrop, rgb(68 76 247 / 0.6));
}

.ap-modal__close {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: var(--ap-cell);
    height: var(--ap-cell);
    padding: 0;
    background: transparent;
    color: var(--ap-fg);
    border: 0;
    cursor: pointer;
}

.ap-modal__close svg { width: 1.25rem; height: 1.25rem; }

.ap-modal__title {
    margin: 0 var(--ap-cell) var(--ap-cell) 0;
    font-family: var(--ap-font);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.15;
}

.ap-form {
    display: grid;
    row-gap: 1.25rem;
}

.ap-form[hidden] { display: none; }

.ap-field {
    display: grid;
    row-gap: 0.4rem;
}

.ap-field__label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ap-field__input {
    width: 100%;
    height: var(--ap-field-height);
    padding: 0 1rem;
    font: inherit;
    font-size: 1rem;                       /* 16px: evita el zoom automàtic a l'iPhone */
    color: var(--ap-fg);
    background: var(--ap-page);
    border: var(--ap-field-border) solid var(--ap-fg);
    border-radius: var(--ap-radius);
}

.ap-field__input:focus-visible {
    outline: 2px solid var(--ap-fg);
    outline-offset: 2px;
}

.ap-field__input[aria-invalid="true"] {
    border-width: 3px;
}

.ap-field__error {
    margin: 0;
    min-height: 0;
    font-size: 0.8rem;
    font-weight: 700;
}

.ap-field__error:empty { display: none; }

/* Casella d'acceptació de condicions */
.ap-check {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    cursor: pointer;
}

.ap-check__input {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    place-content: center;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0;
    background: var(--ap-page);
    border: var(--ap-field-border) solid var(--ap-fg);
    border-radius: var(--ap-radius);
    cursor: pointer;
}

/* Marca de selecció: un quadrat ple, com el punt del logo */
.ap-check__input::before {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    background: var(--ap-fg);
    transform: scale(0);
    transition: transform var(--ap-transition);
}

.ap-check__input:checked::before { transform: scale(1); }

.ap-check__input:focus-visible {
    outline: 2px solid var(--ap-fg);
    outline-offset: 2px;
}

.ap-check__input[aria-invalid="true"] { border-width: 3px; }

.ap-check__text a { color: inherit; }

.ap-field__error::before { content: "↳ "; }

/* Camp parany: fora de la pantalla (no display:none, que alguns robots detecten) */
.ap-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ap-form__note {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
}

.ap-form__submit {
    justify-self: stretch;
    height: var(--ap-cta-height);
}

.ap-form__submit[disabled] {
    cursor: progress;
    opacity: 0.6;
}

.ap-form__status {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
}

.ap-form__status:empty { display: none; }

.ap-modal__done {
    display: grid;
    row-gap: 1rem;
}

.ap-modal__done[hidden] { display: none; }

.ap-modal__done p { margin: 0; }

.ap-modal__done-title {
    font-weight: 700;
    font-size: 1.125rem;
}

.ap-modal__done .ap-cta { margin-top: 1rem; }

/* pàgina de condicions d'ús i privacitat (condicions.html) */

/* a condicions.html no hi ha JS que el col·loqui: a dalt a la dreta */
.ap-theme--legal {
    position: absolute;
    left: auto;
    right: var(--ap-cell);
}

.ap-legal__brand {
    justify-self: start;
    display: inline-flex;
    align-items: baseline;
    font-family: var(--ap-logo-font);
    font-variation-settings: "wdth" var(--ap-logo-wdth);
    font-weight: var(--ap-logo-weight);
    font-size: calc(var(--ap-cell) * 2);
    line-height: 1;
    color: var(--ap-fg);
    text-decoration: none;
}

.ap-legal__dot {
    width: var(--ap-logo-dot-size);
    height: var(--ap-logo-dot-size);
    margin-left: var(--ap-logo-dot-gap);
    background: var(--ap-logo-dot);
}

.ap-legal {
    max-width: calc(72ch + 2 * (var(--ap-cell) + var(--ap-desc-margin)));
    padding: var(--ap-cell);
    border: var(--ap-desc-margin) solid transparent;
    background: var(--ap-desc-bg) padding-box;
    color: var(--ap-fg);
    font-size: 0.95rem;
    line-height: 1.6;
}

.ap-legal h1 {
    margin: 0 0 0.5rem;
    font-size: 1.8rem;
    line-height: 1.15;
}

.ap-legal h2 {
    margin: 2.5rem 0 1rem;
    font-size: 1.25rem;
    line-height: 1.3;
}

.ap-legal h3 {
    margin: 1.75rem 0 0.5rem;
    font-size: 1rem;
}

.ap-legal p,
.ap-legal ul { margin: 0 0 1rem; }

.ap-legal ul { padding-left: 1.25rem; }
.ap-legal li { margin-bottom: 0.35rem; }
.ap-legal a  { color: inherit; }

.ap-legal__updated { font-size: 0.8rem; }

/* dades provisionals per omplir */
.ap-todo {
    background: #FFFF00;
    color: #444CF7;
    padding: 0 0.2em;
}

/* mòbil i accessibilitat */

@media (max-width: 760px) {
    .ap-footer { grid-template-columns: minmax(0, 1fr); }
    .ap-footer__partners { justify-self: start; }
}

@media (max-width: 480px) {
    :root {
        --ap-cta-padding-x: calc(var(--ap-cell) / 2);
        --ap-modal-padding: calc(var(--ap-cell) / 2);
    }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}