/*
 * Pieraksts — global stylesheet for the two hand-built screens.
 *
 * The tokens below are docs/DESIGN.md, read off the live melinda.lv. Every
 * later page adds its own file and reads these; none redefines them.
 * The admin side is Filament and keeps Filament's own look.
 */

/*
 * §3 Type — the three families that carry the design, served from this app.
 *
 * Google's stylesheet is deliberately NOT linked. It would hand every Client's
 * IP address to a third country before they had agreed to anything, which a
 * German court has already held unlawful under the GDPR, and it would put an
 * outside host on the critical path of the page that takes the bookings. The
 * files under `public/fonts` are Google's own OFL subsets, fetched once; the
 * notice they must travel with is `public/fonts/OFL.txt`.
 *
 * This sheet is served by StylesheetController at the URL /css/global.css, so
 * `../fonts/` resolves to `public/fonts` even though the source lives in
 * `resources/css`. Keep the paths relative: they survive a subdirectory install.
 *
 * Three subsets per family, split by `unicode-range` so a phone fetches only
 * what its page writes: `latin` for English, `latin-ext` for Latvian's
 * ā č ē ģ ī ķ ļ ņ š ū ž, `cyrillic` for Russian.
 *
 * Lora is 400 alone — DESIGN.md §3: headings are never bold. Nunito Sans is
 * 400 alone too, its one job being the calendar bar. Open Sans is a variable
 * file whose weight axis runs 300–800; the range below is narrowed to the 400
 * body, the 600 button and the 700 of melinda.lv/cenradis/'s card titles,
 * which the booking page's procedure list follows. A stray `font-weight: 800`
 * clamps to 700 rather than inventing a weight.
 *
 * DESIGN.md §3 names a fourth family, `arkhip`, the melinda.lv wordmark. It is
 * not an OFL face and is not shipped, which is why `--font-wordmark` falls
 * through to `--font-heading` rather than to a system serif.
 */
@font-face {
    font-family: "Lora";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/lora-400-latin.woff2") format("woff2");
    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: "Lora";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/lora-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Lora";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/lora-400-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/open-sans-var-latin.woff2") format("woff2");
    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: "Open Sans";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/open-sans-var-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/open-sans-var-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/nunito-sans-400-latin.woff2") format("woff2");
    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: "Nunito Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/nunito-sans-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/nunito-sans-400-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* §1 Every length below is a pixel value, as DESIGN.md reads them off the live
   site. The space scale was once written in rem against a 62.5% root, which is
   the same pixels by a longer road; the root rule is gone with it, because this
   sheet now also loads inside the Filament panel on the calendar page and a
   10px root shrinks every screen Filament draws. */

:root {
    /* §2 Colour — surface and text */
    --color-surface: #fff;
    --color-surface-dark: #1d1b1b;
    --color-surface-dark-alt: #333;
    --color-text-primary: #000;
    --color-text-body: #363131;
    --color-text-secondary: #666;
    --color-text-muted: #999;
    --color-text-inverse: var(--color-surface);
    --color-text-heading: var(--color-surface-dark);

    /* §2 Colour — accent, the whole personality of the brand */
    --color-accent: #f6c4b9;
    --color-accent-subtle: #f9c1b9;
    --color-accent-strong: #bb7f6e;
    --color-accent-glow: #db9f92;
    --color-accent-highlight: #f27572;
    --color-accent-gradient-end: #ff7272;
    --color-accent-menu: #c96;
    /* The live site's own name for it: /cenradis/'s column headers. */
    --color-accent-text: #966658;

    /* §2 Colour — lines, shadows, scrims */
    --color-border-divider: #d9d9d9;
    --color-border-title-rule: #b76e79;
    --color-shadow-card: rgba(0, 0, 0, .35);
    --color-scrim-light: rgba(255, 255, 255, .3);
    --color-overlay-dark: rgba(29, 27, 27, .74);
    --color-surface-transparent: rgba(255, 255, 255, 0);

    /* §3 Type — families */
    --font-heading: "Lora", Georgia, "Times New Roman", serif;
    --font-body: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;
    --font-nav: "Nunito Sans", "Segoe UI", Helvetica, Arial, sans-serif;
    --font-wordmark: "arkhip", var(--font-heading);

    /* §3 Type — the scale measured on the live pages */
    --font-size-h1: 70px;
    --line-height-h1: 70px;
    --letter-spacing-h1: -2.1px;
    --font-size-h2: 32px;
    --line-height-h2: 32px;
    --letter-spacing-h2: -.64px;
    --font-size-h3: 25px;
    --line-height-h3: 32px;
    --letter-spacing-h3: -.75px;
    --font-size-body: 16px;
    --line-height-body: 26px;
    --font-size-page-title: 20px;
    --line-height-page-title: 1.45;
    --letter-spacing-page-title: 3.6px;
    --font-size-nav: 12px;
    --line-height-nav: 24px;
    --font-size-button: 13px;
    --line-height-button: 1.2;
    --letter-spacing-button: .05em;
    --font-size-table-head: 12px;
    --font-size-table-cell: 14px;
    --font-weight-heading: 400;
    --font-weight-body: 400;
    --font-weight-button: 600;
    --color-heading-section: #d8615f;

    /* §4 Space */
    --space-2xs: 8px;
    --space-xs: 12px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 64px;
    --space-3xl: 80px;
    --section-gap: var(--space-2xl);

    /* §5 Width and radius. --content-width is the declared value; the live
       .container renders at --container-width, which is what to follow. */
    --content-width: 1240px;
    --container-width: 1200px;
    --container-padding: 15px;
    --header-height: 80px;
    --header-z-index: 1000;
    --radius-sm: 2.5px;
    --radius-md: 10px;
    --radius-card: 12px;
    --radius-control: 6px;

    /* §6 Buttons */
    --button-min-height: 50px;
    --button-padding-inline: var(--space-md);
    --button-radius: var(--radius-control);
    --button-gradient: linear-gradient(273.18deg, var(--color-accent-strong) 0, var(--color-accent-gradient-end) 99.94%);
    --button-text: #f4f3f1;
    --button-glow: 0 0 8px var(--color-accent-glow);
    --button-transition: .3s ease-in-out;

    /* §7 Form fields. 44px is the live site's; the booking page raises it to
       the 48px touch target, so the two are separate tokens. */
    --appointment-field-height: 44px;
    --appointment-field-radius: 6px;
    --appointment-field-gap: 10px;
    --appointment-field-padding: 10px;
    --appointment-field-font: 13px;
    --appointment-label-font: 13px;
    --appointment-border: #e0cec8;
    --appointment-border-filled: #cfb4ab;
    --appointment-label: #999;
    --appointment-label-active: #a06d5e;
    --appointment-text: #4b4b4b;
    --appointment-error: #d32f2f;

    /* §8 Cards — the newer, token-backed pair. The shadow is tinted warm. */
    --appointment-card-background: #fff;
    --appointment-card-background-tinted: #fdf8f6;
    --appointment-card-radius: 12px;
    --appointment-card-padding: 24px;
    --appointment-card-shadow:
        0 2px 4px rgba(187, 127, 110, .08),
        0 20px 44px -14px rgba(187, 127, 110, .3);

    /* §9 Tables */
    --table-head-color: #ce8c79;
    --table-cell-padding: 10px 8px;
    /* The hairline between /cenradis/'s rows. */
    --table-rule: #ececec;

    /* §10 The contact and social row */
    --appointment-soc-border: #f6c4b9;
    --appointment-soc-text: #8a6156;
    --appointment-soc-title: #8d7e79;
    --appointment-soc-hover: #fdf8f6;
    --appointment-social-radius: 6px;
    --appointment-soc-font-size: 13px;
    --appointment-soc-target: 48px;
    --appointment-rule: #f0e6e2;

    /* §11 The sticky booking bar on phones */
    --booking-bar-height: 64px;
    --booking-bar-bg: #fff;
    --booking-bar-shadow: 0 -2px 24px rgba(0, 0, 0, .14);
    --booking-bar-cta-from: #bb7f6e;
    --booking-bar-cta-to: #ff7272;
    --booking-bar-cta-text: #f4f3f1;
    --booking-bar-radius: 4px;
    --booking-bar-target: 48px;
    --booking-bar-safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

body,
h1,
h2,
h3,
p,
ul,
ol,
figure {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

body {
    background: var(--color-surface);
    color: var(--color-text-body);
    font: var(--font-weight-body) var(--font-size-body) / var(--line-height-body) var(--font-body);
}

h1,
h2,
h3 {
    color: var(--color-text-heading);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
}

h1 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
    letter-spacing: var(--letter-spacing-h1);
}

h2 {
    color: var(--color-heading-section);
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    letter-spacing: var(--letter-spacing-h2);
    text-transform: uppercase;
}

h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    letter-spacing: var(--letter-spacing-h3);
}

:focus-visible {
    outline: 2px solid var(--color-accent-highlight);
    outline-offset: 2px;
}

/* Layout */
.container {
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* §6 Buttons — these two, and no third */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--button-min-height);
    padding: 0 var(--button-padding-inline);
    border: 0;
    border-radius: var(--button-radius);
    background: var(--button-gradient);
    color: var(--button-text);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-button);
    line-height: var(--line-height-button);
    letter-spacing: var(--letter-spacing-button);
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--button-transition);
}

.btn:hover,
.btn:focus-visible {
    box-shadow: var(--button-glow);
}

.btn--quiet {
    background: none;
    border: 1px solid var(--color-accent);
    color: var(--color-text-primary);
}

.btn--quiet:hover,
.btn--quiet:focus-visible {
    background: var(--color-accent);
}

/* §8 Cards */
.card {
    background: var(--appointment-card-background);
    border-radius: var(--appointment-card-radius);
    box-shadow: var(--appointment-card-shadow);
    padding: var(--appointment-card-padding);
}

.card--tinted {
    background: var(--appointment-card-background-tinted);
}

/* §10 The contact block. Written once in settings, rendered by one partial. */
.contact-block {
    border-top: 1px solid var(--appointment-rule);
    padding-top: var(--space-sm);
}

.contact-block__title {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--appointment-soc-title);
    font-size: var(--appointment-label-font);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
}

/* A column, not a row of chips: without their borders these are lines of text,
   and lines of text sitting abreast read as one run-on sentence. */
.contact-block__list {
    display: grid;
    gap: var(--space-2xs);
}

/*
 * No border and no box. DESIGN.md §10 records the live site's outlined social
 * buttons; this page reads better as a plain list, and the glyph carries which
 * Channel a row is. The 48px target stays — R11.2 is about the finger, not the
 * frame.
 */
.contact-block__link {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    min-height: var(--appointment-soc-target);
    color: var(--appointment-soc-text);
    font-size: var(--appointment-soc-font-size);
    text-decoration: none;
    transition: var(--button-transition);
}

/* Read out, never drawn: the glyph beside it says nothing to a screen reader. */
.contact-block__kind {
    position: absolute;
    /* The standard hide-from-eyes-not-from-readers idiom, not a design value. */
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.contact-block__link:hover,
.contact-block__link:focus-visible {
    color: var(--color-accent-strong);
    text-decoration: underline;
}

/*
 * The Channels the Salon is found on: marks abreast, nothing written.
 *
 * DESIGN.md §10 has them as three outlined buttons with a word under each. The
 * word was the handle — `melinda.lv` three times over — which told a Client
 * nothing they were not about to see on the other side of the press. The marks
 * are melinda.lv's own, so the two pages carry the same Instagram.
 *
 * Outlined here where the lines above are not: with no words beside them,
 * three bare marks in a row read as decoration rather than as presses.
 */
.contact-block__socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-top: var(--space-xs);
}

.contact-block__social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--appointment-soc-target);
    height: var(--appointment-soc-target);
    border: 1px solid var(--appointment-soc-border);
    border-radius: var(--appointment-social-radius);
    color: var(--appointment-soc-text);
    text-decoration: none;
    transition: var(--button-transition);
}

.contact-block__social:hover,
.contact-block__social:focus-visible {
    border-color: var(--color-accent-strong);
    background: var(--appointment-soc-hover);
    color: var(--color-accent-strong);
}

/* Every glyph on these pages. It keeps its size when a row wraps, and takes
   its colour from whatever it sits in. */
.glyph {
    flex: none;
}

.contact-block__note {
    color: var(--color-text-secondary);
}

/* The only !important in the file: this has to beat every animation rule
   a later page writes, whatever its specificity. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}