/* Padelgáva – global styles.
   Tokens follow padelmidstodin.fo (PRD section 4.1). Mobile first: base rules are for phones,
   min-width queries add tablet (40rem/48rem) and desktop (64rem/80rem) layouts, matching the main site. */

/* ---------- Fonts (self-hosted, OFL; Latin subset incl. á í ó ú ý ø æ ð) ---------- */

@font-face {
    font-family: "Saira";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    font-stretch: 50% 125%;
    src: url("/fonts/saira-latin-wdth-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Saira";
    font-style: italic;
    font-display: swap;
    font-weight: 100 900;
    font-stretch: 50% 125%;
    src: url("/fonts/saira-latin-wdth-italic.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    src: url("/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Archivo";
    font-style: italic;
    font-display: swap;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    src: url("/fonts/archivo-latin-wdth-italic.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
    --pm-abyss: #060c1a;
    --pm-navy: #0f1e35;
    --pm-water: #1d3056;
    --pm-steel: #31537c;
    --pm-slate: #35435c;
    --pm-fog: #8ea3bf;
    --pm-blue: #9ec2e8;
    --pm-frost: #c9d4e4;
    --pm-ice: #dde6f2;
    --pm-panel: #e9f1fb;
    --pm-ink: #131111;
    --pm-white: #ffffff;

    --font-display: "Saira", "Archivo", "Segoe UI", Tahoma, sans-serif;
    --font-sans: "Archivo", "Segoe UI", Tahoma, sans-serif;

    --text-display: clamp(2.75rem, 1.821rem + 3.81vw, 5.25rem);
    --text-h2: clamp(1.75rem, 1.611rem + 0.571vw, 2.125rem);
    --text-h3: clamp(1.375rem, 1.282rem + 0.381vw, 1.625rem);
    --text-kicker: 0.875rem;
    --text-body: 1rem;
    --text-body-lg: 1.0625rem;

    --radius-sm: 0.5rem;
    --radius-brand-sm: 0.875rem;
    --radius-brand: 1.125rem;
    --radius-brand-md: 1.375rem;
    --radius-brand-lg: 1.625rem;
    --radius-brand-xl: 2.25rem;

    --spacing-band: clamp(3.5rem, 2.943rem + 2.286vw, 5rem);
    --spacing-band-lg: clamp(4rem, 2.7rem + 5.333vw, 7.5rem);

    --ease-brand: cubic-bezier(0.2, 0.75, 0.2, 1);
    --tap-min: 2.75rem; /* 44px minimum tap target (PRD 4.4.1) */

    /* Focus ring: steel on light surfaces, blue on dark ones (set per section below). */
    --focus-ring: var(--pm-steel);
}

/* ---------- Base ---------- */

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

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

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--pm-white);
    color: var(--pm-slate);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: 1.625;
    overflow-wrap: break-word;
}

main {
    flex: 1 0 auto;
}

/* FocusOnNavigate moves focus to the page heading for screen readers; no ring needed there. */
main:focus,
h1:focus {
    outline: none;
}

img,
svg {
    max-width: 100%;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--pm-ink);
}

h1 {
    font-size: var(--text-h2);
    line-height: 1.2;
}

h2 {
    font-size: var(--text-h2);
    line-height: 1.2;
}

h3 {
    font-size: var(--text-h3);
    line-height: 1.25;
}

a {
    color: var(--pm-steel);
}

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

.site-header,
.site-footer,
.hero,
.mobile-menu {
    --focus-ring: var(--pm-blue);
}

/* ---------- Layout ---------- */

.container {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: max(1.25rem, env(safe-area-inset-left)) max(1.25rem, env(safe-area-inset-right));
}

@media (min-width: 48rem) {
    .container {
        padding-inline: max(2.5rem, env(safe-area-inset-left)) max(2.5rem, env(safe-area-inset-right));
    }
}

.section {
    padding-block: var(--spacing-band);
}

.prose {
    max-width: 48rem;
}

.muted {
    color: var(--pm-slate);
    font-size: 0.875rem;
}

/* ---------- Type helpers ---------- */

.kicker {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-kicker);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Display line: light and bold italic mixed, as on the main site. */
.display {
    font-family: var(--font-display);
    font-size: var(--text-display);
    line-height: 1.05;
    color: inherit;
}

.display-light,
.display-bold {
    display: block;
}

.display-light {
    font-weight: 300;
}

.display-bold {
    font-weight: 700;
    font-style: italic;
}

/* ---------- Buttons ---------- */
/* Uppercase, semibold, widened; only the top-right corner is rounded (the brand's signature). */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    min-height: var(--tap-min);
    min-width: 9rem;
    padding: 0.625rem 1.25rem;
    border: 1.5px solid transparent;
    border-radius: 0 var(--radius-brand) 0 0;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    font-stretch: 112%;
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s var(--ease-brand), box-shadow 0.3s var(--ease-brand);
}

.btn-lg {
    min-height: 3.25rem;
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    border-radius: 0 var(--radius-brand-lg) 0 0;
}

.btn-block {
    width: 100%;
}

.btn-primary {
    background: var(--pm-blue);
    color: var(--pm-ink);
}

.btn-on-dark {
    background: var(--pm-white);
    color: var(--pm-ink);
}

.btn-outline-on-dark {
    background: transparent;
    color: var(--pm-white);
    border-color: rgb(255 255 255 / 0.85);
}

.btn-accent {
    color: var(--pm-steel);
    font-weight: 700;
}

/* Hover is an extra only (PRD 4.4.1): no hover effects on touch screens. */
@media (hover: hover) {
    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 26px rgb(15 30 53 / 0.22);
    }

    .btn-on-dark:hover,
    .btn-outline-on-dark:hover {
        box-shadow: none;
    }
}

.btn:active {
    transform: translateY(0);
    transition-duration: 0.1s;
}

/* ---------- Header helpers (rendered by child components, so styled globally) ---------- */

.language-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    padding-inline: 0.5rem;
    color: var(--pm-white);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-decoration: none;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -10rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--pm-white);
    color: var(--pm-ink);
    font-weight: 600;
}

.skip-link:focus {
    top: calc(1rem + env(safe-area-inset-top));
}

/* ---------- Blazor error UI ---------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1000;
    width: 100%;
    padding: 0.75rem 3rem calc(0.75rem + env(safe-area-inset-bottom)) 1.25rem;
    background: var(--pm-panel);
    color: var(--pm-ink);
    box-shadow: 0 -1px 2px rgb(0 0 0 / 0.2);
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    cursor: pointer;
}

/* ---------- Motion ---------- */

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