/* ==========================================================================
   BASE.CSS
   Global styles for niki-rajter.sk
   Contains: CSS reset, font loading, design tokens (variables), base typography.
   This file should NOT contain any section-specific styles.
   ========================================================================== */


/* ==========================================================================
   1. CSS RESET
   Remove default browser styling for a consistent starting point.
   ========================================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* box-sizing: border-box makes padding/border count INSIDE the element's
       width, not outside. Without this, a 300px div with 20px padding becomes
       340px wide. With border-box, it stays 300px. */
}

/* Remove default list bullets and padding */
ul, ol {
    list-style: none;
}

/* Make images behave: block-level, max-width 100% so they don't overflow */
img {
    display: block;
    max-width: 100%;
}

/* Remove default link underline and color inheritance */
a {
    text-decoration: none;
    color: inherit;
}

/* Remove default button styling */
button {
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
}


/* ==========================================================================
   2. FONT LOADING
   ========================================================================== */

/* --- Erotique Alternate (Heading font) ---
   Licensed: Desktop + Web Font License (10,000 pageviews/month)
   Purchased from Fontspring by Lenka Sturmankinova, Jan 7, 2026.
   Font by Zetafonts. */

@font-face {
    font-family: 'Erotique Alternate';
    src: url('/static/fonts/erotiquealternate-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* --- DM Sans (Body font) ---
   Loaded from Google Fonts via <link> in base.html.
   Weights needed: 400 (Regular), 500 (Medium), 700 (Bold), 400 Italic.
   No @font-face needed here — Google Fonts handles it. */


/* ==========================================================================
   3. DESIGN TOKENS (CSS Custom Properties)
   All values from Lenka's Figma design (colour_styles_Niki.pdf).
   Change a value here → it changes everywhere on the site.
   ========================================================================== */

:root {
    /* --- Colors: Dark / Text --- */
    --color-primary-dark: #320100;      /* Primary text, logo */
    --color-dark-bordeaux: #630200;     /* Buttons, CTA */
    --color-dark-red: #800100;          /* Button hover / variant */

    /* --- Colors: Pink / English section --- */
    --color-pink-light: #E6CCCC;        /* Navbar bg, hero heading text */
    --color-pink-medium: #D5AAAA;       /* English section bg */
    --color-pink-dark: #AA5655;         /* Decorative elements (leaves) */
    --color-pink-accent: #E160B1;       /* Scrolling banner, accents */

    /* --- Colors: Mint / Coaching section --- */
    --color-mint-light: #95EBD8;        /* Coaching section bg */
    --color-mint-medium: #50BBA4;       /* Coaching cards / accents */
    --color-mint-dark: #409683;         /* Coaching darker elements */

    /* --- Colors: Neutral --- */
    --color-black: #000000;             /* Subheadings */
    --color-white: #FFFFFF;

    /* --- Fonts --- */
    /* Fallback to serif until web license for Erotique Alternate is resolved */
    --font-heading: 'Erotique Alternate', serif;
    --font-body: 'DM Sans', sans-serif;

    /* --- Font Sizes (mobile-first, from Figma mobile design) ---
       Desktop sizes will be added via media query when we have desktop Figma. */
    --text-h1: 2.25rem;                /* 36px */
    --text-h3: 1.4375rem;             /* 23px */
    --text-body: 1.1875rem;           /* 19px */
    --text-body-small: 1rem;           /* 16px */
    --text-caption: 0.8125rem;         /* 13px */
    --text-small: 0.6875rem;           /* 11px */

    /* --- Line Heights --- */
    --lh-h1: 1;                        /* 36px/36px = 1 (tight for headings) */
    --lh-h3: 1.39;                     /* 32px/23px ≈ 1.39 */
    --lh-body: 1.26;                   /* 24px/19px ≈ 1.26 */

    /* --- Spacing ---
       Consistent spacing scale. Used for padding, margins, gaps.
       Based on 8px grid system (common in UI design). */
    --space-xs: 0.5rem;                /* 8px */
    --space-sm: 1rem;                  /* 16px */
    --space-md: 1.5rem;                /* 24px */
    --space-lg: 2rem;                  /* 32px */
    --space-xl: 3rem;                  /* 48px */
    --space-2xl: 4rem;                 /* 64px */

    /* --- Layout --- */
    --max-width: 1200px;               /* Max content width on desktop */
}


/* ==========================================================================
   4. BASE TYPOGRAPHY
   Default styles for body and common HTML elements.
   Sections override these via BEM classes.
   ========================================================================== */

body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: var(--lh-body);
    color: var(--color-primary-dark);
    background-color: var(--color-white);
    /* Smooth font rendering on macOS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 72px;
    background-color: var(--color-primary-dark);
}

/* Main content area: flex column so sections stack vertically
   and individual sections can grow to fill space via flex: 1 */
main {
    display: flex;
    flex-direction: column;
}

/* Desktop only: main fills full viewport height minus navbar,
   so above-the-fold content (hero + services + cta banner)
   covers the entire screen without white gaps */
@media (min-width: 768px) {
    main {
        min-height: calc(100vh - 72px);
    }

    /* Viewport area: exactly fills first viewport */
    .viewport-area {
        height: calc(100vh - 72px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
}


/* Headings: visual defaults. Actual usage controlled by BEM classes. */
h1, h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-h1);
    line-height: var(--lh-h1);
    color: var(--color-primary-dark);
}

h3 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-h3);
    line-height: var(--lh-h3);
    color: var(--color-black);
}

p {
    margin-bottom: var(--space-sm);
}

/* Last paragraph in a container shouldn't have bottom margin */
p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   5. UTILITY CLASSES
   Reusable layout helpers. Keep this section minimal.
   ========================================================================== */

/* Centered content container with max-width */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}

/* ==========================================================================
   6. BASE BUTTON STYLES
   Shared class for all clickable buttons/CTA links.
   Add class="btn" to any button element alongside its BEM class.
   Sections override specifics (color, size) via their own BEM classes.
   ========================================================================== */

.btn {
    display: inline-block;
    padding: 10px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-body);
    cursor: pointer;
    transition: box-shadow 0.2s ease, color 0.2s ease;
}

.btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}