/* =============================================================================
   CityNord — Global CSS
   Loaded on every page. Contains design tokens, reset, and base typography.
   Tokens align with Figma (RE.Studio — Strevis Projects).
   ============================================================================= */

/* ---- Web fonts ---------------------------------------------------------- */
@font-face {
    font-family: 'Parkinsans';
    src: url('../fonts/Parkinsans/Parkinsans-VariableFont_wght.ttf') format('truetype');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ---- Design tokens ------------------------------------------------------ */
:root {
    /* Palette */
    --color-surface:       var(--wp--preset--color--surface, #FCFCFC);
    --color-surface-muted: var(--wp--preset--color--surface-muted, #F5F5F5);
    --color-brand-soft:    var(--wp--preset--color--brand-soft, #F4F5EB);
    --color-accent:        var(--wp--preset--color--accent, #FFEC8E);
    --color-border-soft:   var(--wp--preset--color--border-soft, #E0E4E0);
    --color-sage-soft:     var(--wp--preset--color--sage-soft, #DCE5D6);
    --color-sage:          var(--wp--preset--color--sage, #7E9F68);
    --color-brand:         var(--wp--preset--color--brand, #185F57);
    --color-brand-soft:    var(--wp--preset--color--brand-soft, #F4F5EB);
    --color-ink:           var(--wp--preset--color--ink, #031C19);

    /* Existing aliases used across classic CSS templates */
    --color-brand-hover:  var(--color-ink);
    --color-page-bg:      var(--color-surface);
    --color-white:        var(--color-surface);
    --color-black:        var(--color-ink);
    --color-gray-strong:  var(--color-ink);
    --color-gray:         var(--color-brand);
    --color-gray-muted:   var(--color-sage);
    --color-gray-line:    rgba(3, 28, 25, 0.1);
    --color-text-muted:   rgba(3, 28, 25, 0.6);

    /* Legacy aliases retained for older partials */
    --color-primary:      var(--color-brand);
    --color-secondary:    var(--color-brand);
    --color-bg:           var(--color-page-bg);
    --color-text:         var(--color-black);
    --color-text-strong:  var(--color-black);
    --color-border:       var(--color-gray-line);
    --color-link:         var(--color-black);
    --color-link-hover:   var(--color-brand);
    --color-focus:        var(--color-brand);
    --color-gray-50:      var(--color-surface-muted);
    --color-gray-100:     var(--color-surface-muted);
    --color-gray-200:     var(--color-border-soft);
    --color-gray-300:     var(--color-sage-soft);
    --color-gray-400:     var(--color-sage);
    --color-gray-500:     var(--color-gray-muted);
    --color-gray-600:     var(--color-gray);
    --color-gray-700:     var(--color-gray-strong);
    --color-gray-800:     var(--color-ink);
    --color-gray-900:     var(--color-black);

    /* Typography */
    --font-display:   var(--wp--preset--font-family--primary, 'Parkinsans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif);
    --font-body:      var(--wp--preset--font-family--secondary, 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif);
    /* Legacy aliases */
    --font-primary:   var(--font-display);
    --font-secondary: var(--font-body);

    /* Font sizes (matched against Figma values) */
    --fs-xs:    0.75rem;    /* 12px */
    --fs-sm:    0.875rem;   /* 14px */
    --fs-base:  1rem;       /* 16px — Inter body */
    --fs-md:    1.125rem;   /* 18px — Parkinsans nav + buttons */
    --fs-lg:    1.25rem;    /* 20px — agent name */
    --fs-xl:    1.5rem;     /* 24px */
    --fs-2xl:   1.75rem;    /* 28px — section headings */
    --fs-3xl:   2.25rem;    /* 36px */
    --fs-price: 2.6875rem;  /* 43px — sidebar price */
    --fs-h1:    clamp(2.25rem, 3vw + 1rem, 3.25rem);

    /* Line heights */
    --lh-tight:   1;
    --lh-snug:    1.2;
    --lh-base:    1.5;
    --lh-relaxed: 1.6;

    /* Tracking (letter-spacing) — Figma uses negative for display */
    --ls-tighter: -0.8px;   /* price */
    --ls-tight:   -0.56px;  /* H2 */
    --ls-tightish: -0.48px; /* amenity text */
    --ls-snug:    -0.54px;  /* nav 18px */
    --ls-snug-sm: -0.4px;   /* agent name 20px */
    --ls-normal:   0;

    /* Font weights */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* Spacing scale (4px base) */
    --space-0:   0;
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.5rem;
    --space-6:   2rem;
    --space-7:   3rem;
    --space-8:   4rem;
    --space-9:   6rem;
    --space-10:  8rem;

    /* Layout */
    --container-max:    1300px;  /* Default site rail. */
    --container-wide:   1400px;  /* Explicit exception only. */
    --container-narrow: 800px;
    --container-px:     clamp(1rem, 4vw, 2.1875rem); /* up to 35px @ 1440 */

    /* Borders & radii (Figma uses sharp corners — radius 0 default) */
    --radius-none: 0;
    --radius-sm:   2px;
    --radius-md:   4px;
    --radius-lg:   8px;
    --radius-pill: 999px;

    /* Borders */
    --border-card:  0.7px solid var(--color-border-soft);
    --border-line:  1px solid var(--color-gray-line);

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(3, 28, 25, 0.04);
    --shadow-sm: 0 1px 3px rgba(3, 28, 25, 0.06);
    --shadow-md: 0 4px 12px rgba(3, 28, 25, 0.08);
    --shadow-lg: 0 20px 40px rgba(3, 28, 25, 0.10);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Z-index */
    --z-base:     1;
    --z-dropdown: 50;
    --z-sticky:   75;
    --z-header:   100;
    --z-overlay:  150;
    --z-modal:    200;
    --z-toast:    300;

    /* Header */
    --header-height: 66px;
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-page-bg);
    color: var(--color-black);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* -----------------------------------------------------------------------
   Site background — 4 vertical column guides aligned to the 1300px content
   rail. Sections with opaque backgrounds cover them; they bleed through any
   exposed page-bg.
   ----------------------------------------------------------------------- */
.site-bg-lines {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(1300px - 70px);
    pointer-events: none;
    z-index: 1;
}

.site-bg-lines > span {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #E3E3E3;
}

/* Equally distributed: 0%, 33.33%, 66.66%, 100% of the 1300px rail. */
.site-bg-lines > span:nth-child(1) { left: 0; }
.site-bg-lines > span:nth-child(2) { left: 33.3333%; }
.site-bg-lines > span:nth-child(3) { left: 66.6666%; }
.site-bg-lines > span:nth-child(4) { left: 100%; transform: translateX(-1px); }

/* Content must stack above the guides. */
.site-container { position: relative; z-index: 1; }

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

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

button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover,
a:focus-visible { color: var(--color-brand); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--color-black);
}

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

/* ---- Layout primitives -------------------------------------------------- */
.wrap,
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-px);
}

.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }
.container--flush  { padding-inline: 0; }

/* ---- Reusable components ----------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding-inline: var(--space-5);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    line-height: 1;
    letter-spacing: var(--ls-snug);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast);
}

.btn--primary {
    background: var(--color-brand);
    color: var(--color-white);
    border: 1px solid var(--color-brand);
}
.btn--primary:hover,
.btn--primary:focus-visible {
    background: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
    color: var(--color-white);
}

.btn--outline {
    background: transparent;
    color: var(--color-gray-strong);
    border: 1px solid var(--color-gray-strong);
}
.btn--outline:hover,
.btn--outline:focus-visible {
    background: var(--color-gray-strong);
    color: var(--color-white);
}

.btn--block { width: 100%; }

/* Accessibility helpers ---------------------------------------------------- */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--color-white);
    clip: auto !important;
    clip-path: none;
    color: var(--color-black);
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: var(--z-toast);
}

.skip-link {
    position: absolute;
    left: 0;
    top: 0;
    z-index: var(--z-toast);
    transform: translateY(-100%);
    transition: transform var(--transition-fast);
}

.skip-link:focus { transform: translateY(0); }

body.has-overlay { overflow: hidden; }

@media screen and (max-width: 900px) {
	body{
		background: var(--color-white);
	}
}