/*
    main.css
    Frostvind — stilark for nettsiden
*/


/* ─────────────────────────────────────────────
   CSS-variabler (settes av theme-engine.js)
───────────────────────────────────────────── */

:root
{
    --bg        : #F4F7FA;
    --surface   : #E8EEF4;
    --text      : #1A2433;
    --muted     : #5C7080;
    --accent    : #3A7BD5;
    --border    : #D0DCEA;

    --h-font    : "Cormorant", serif;
    --b-font    : "Jost", sans-serif;
    --h-weight  : 300;
    --h-spacing : 0.16em;
    --b-size    : 17px;
    --b-leading : 1.75;

    --texture-url     : none;
    --texture-opacity : 0;
}


/* ─────────────────────────────────────────────
   Reset
───────────────────────────────────────────── */

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


/* ─────────────────────────────────────────────
   Base — siden fyller hele høyden
───────────────────────────────────────────── */

html
{
    height: 100%;
}

body
{
    min-height : 100%;

    display        : flex;
    flex-direction : column;

    background : var(--bg);
    color      : var(--text);

    font-family : var(--b-font);
    font-size   : var(--b-size);
    line-height : var(--b-leading);

    position : relative;
}


/* Tekstur-lag */
body::before
{
    content  : "";
    position : fixed;
    inset    : 0;

    background-image  : var(--texture-url);
    background-repeat : repeat;
    opacity           : var(--texture-opacity);

    pointer-events : none;
    z-index        : 0;
}


/* ─────────────────────────────────────────────
   Main — vokser og skyver footer ned
───────────────────────────────────────────── */

main
{
    flex : 1;

    display        : flex;
    flex-direction : column;
    align-items    : center;

    width     : 100%;
    max-width : 720px;

    margin  : 0 auto;
    padding : 0 32px;

    position : relative;
    z-index  : 1;
}


/* ─────────────────────────────────────────────
   Hero — sentrert, vokser for å fylle rommet
───────────────────────────────────────────── */

#hero
{
    flex : 1;

    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;

    text-align : center;

    padding : 80px 0 48px;
}


#hero-logo
{
    width         : 320px;
    height        : auto;
    margin-bottom : 32px;

    opacity: 0.92;
}


#hero-title
{
    font-family    : var(--h-font);
    font-size      : 72px;
    font-weight    : var(--h-weight);
    letter-spacing : var(--h-spacing);
    line-height    : 1.0;

    margin-bottom : 20px;
}


#hero-tagline
{
    font-family    : var(--h-font);
    font-size      : 22px;
    font-weight    : var(--h-weight);
    letter-spacing : 0.06em;
    font-style     : italic;

    color         : var(--accent);
    margin-bottom : 24px;
}


#hero-ingress
{
    font-size   : calc(var(--b-size) * 1.0);
    color       : var(--muted);
    line-height : 1.8;
    max-width   : 480px;
}


/* ─────────────────────────────────────────────
   Kontaktknapp
───────────────────────────────────────────── */

#contact-area
{
    padding    : 48px 0 64px;
    text-align : center;
}


.btn-contact
{
    display : inline-block;

    padding : 14px 40px;

    background    : transparent;
    color         : var(--accent);
    border        : 1px solid var(--accent);
    border-radius : 4px;

    font-family    : var(--b-font);
    font-size      : calc(var(--b-size) * 0.9);
    font-weight    : 400;
    letter-spacing : 0.1em;
    text-transform : uppercase;
    text-decoration: none;

    transition : background 0.2s, color 0.2s;
}

.btn-contact:hover
{
    background : var(--accent);
    color      : #ffffff;
}


/* ─────────────────────────────────────────────
   Footer
───────────────────────────────────────────── */

footer
{
    padding    : 24px 32px;
    text-align : center;

    border-top : 1px solid var(--border);
    color      : var(--muted);
    font-size  : calc(var(--b-size) * 0.8);
    font-family: var(--b-font);

    position : relative;
    z-index  : 1;
}