/*
 * TRIWAS – CENTRAL DESIGN / TOKENS
 *
 * Här kan Daniel manuellt ändra:
 * - fonter och fontstorlekar
 * - line-height
 * - färger
 * - bredder och sidmarginal/gutter
 * - spacing och sektionsavstånd
 * - knappar och knapp-padding
 *
 * CODEX:
 * - Bevara manuellt ändrade värden i denna fil.
 * - Ändra inte tokens om uppgiften inte uttryckligen gäller designen.
 * - Nya Triwas-komponenter ska använda dessa variabler där det är rimligt.
 * - Hårdkoda inte samma färg/fontstorlek/spacing lokalt om central token finns.
 *
 * Komponentreglerna är avgränsade till .tw-editorial; inga globala
 * Enfold-element ändras. Befintliga fontimporter behålls.
 */
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');
@font-face {
    font-family: "Josefin Sans";
    src: url("fonts/JosefinSans.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
}
:root {
    /* FONTER */
    --triwas-font-heading: "Josefin Sans", sans-serif;

    /* ÄNDRA DENNA ENDA RAD FÖR ATT TESTA NY SERIF-FONT */
    --triwas-font-serif: "Montserrat", Georgia, serif;

    --triwas-font-body: var(--triwas-font-serif);
    --triwas-font-button: var(--triwas-font-heading);
    --triwas-font-accordion: var(--triwas-font-serif);
    --triwas-font-quote: var(--triwas-font-heading);

    /* FONTSTORLEKAR */
    --triwas-size-body: 16px;
    --triwas-size-button: 15px;
    --triwas-size-section-heading: clamp(26px, 2.3vw, 34px);
    --triwas-size-h2: clamp(30px, 3.25vw, 46px);
    --triwas-size-quote: clamp(22px, 2vw, 30px);

    /* LINE HEIGHT */
    --triwas-line-body: 1.55;
    --triwas-line-heading: 1.15;
    --triwas-line-button: 1.2;
    --triwas-line-quote: 1.4;

    /* FÄRGER */
    --triwas-color-background: #EEE8E1;
    --triwas-color-surface: #F3F0EA;
    --triwas-color-accent: #727361;
    --triwas-color-button: #736657;
    --triwas-quote-color: var(--triwas-color-button);
    --triwas-color-text: #454746;
    --triwas-color-white: #fff;

    /* BREDDER */
    --triwas-content-max: 1200px;
    --triwas-wide-max: 1440px;
    --triwas-gutter: clamp(20px, 3vw, 48px);

    /* SPACING */
    --triwas-section-space: clamp(48px, 6vw, 88px);
    --triwas-button-padding: 14px 26px;
}
/* STARTSIDAN: ändra hero-storlek och citatfont här. Citatfärgen finns bland färgtokens ovan. */
#top #wrap_all .tw-editorial.tw-home {
    --triwas-home-hero-size: clamp(32px, 3.4vw, 46px);
    --triwas-quote-font: var(--triwas-font-heading);
}
/* Approved public-page rhythm; lead and the separate property magazine keep their tokens. */
#top #wrap_all .tw-editorial:is(.tw-home, .tw-pages) {
    --triwas-size-body: 14px;
    --triwas-line-body: 1.6;
    --triwas-size-h2: 28px;
    --triwas-size-quote: 24px;
    --triwas-section-space: 40px;
    --triwas-copy-padding: 24px;
    --triwas-copy-measure: 640px;
    --triwas-copy-inset: 24px;
    --triwas-heading-space: 12px;
    --triwas-paragraph-space: 10px;
    --triwas-interlude-space: 24px;
    --triwas-size-statement: 22px;
}
#top #wrap_all .tw-editorial:is(.tw-home, .tw-pages) :is(.tw-pages-split, .tw-home-about, .tw-home-valuation) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}
/* The copy alone sizes the row. Photos fill it without adding intrinsic image height. */
#top #wrap_all .tw-editorial:is(.tw-home, .tw-pages) :is(.tw-pages-media, .tw-home-about-image, .tw-home-team-image) {
    position: relative;
    min-width: 0;
    min-height: 0;
}
#top #wrap_all .tw-editorial:is(.tw-home, .tw-pages) :is(.tw-pages-media, .tw-home-about-image, .tw-home-team-image) img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}
#top #wrap_all .tw-editorial .tw-pages-split--missing .tw-pages-copy {
    padding-inline: max(var(--triwas-copy-inset), calc((100% - var(--triwas-copy-measure)) / 2));
}
@media (max-width: 1100px) {
    #top #wrap_all .tw-editorial:is(.tw-home, .tw-pages) {
        --triwas-gutter: 32px;
        --triwas-copy-padding: 20px;
        --triwas-copy-inset: 20px;
        --triwas-size-h2: 25px;
        --triwas-size-quote: 23px;
        --triwas-size-statement: 21px;
    }
}
@media (max-width: 767px) {
    #top #wrap_all .tw-editorial:is(.tw-home, .tw-pages) {
        --triwas-gutter: 16px;
        --triwas-size-body: 15px;
        --triwas-size-h2: 23px;
        --triwas-size-quote: 21px;
        --triwas-section-space: 32px;
        --triwas-copy-padding: 18px;
        --triwas-copy-inset: 18px;
        --triwas-size-statement: 20px;
    }
    #top #wrap_all .tw-editorial:is(.tw-home, .tw-pages) :is(.tw-pages-split, .tw-home-about, .tw-home-valuation) {
        grid-template-columns: minmax(0, 1fr);
    }
    #top #wrap_all .tw-editorial:is(.tw-home, .tw-pages) :is(.tw-pages-media, .tw-home-about-image, .tw-home-team-image) img {
        position: static;
        height: auto;
    }
}
#top #wrap_all .tw-editorial {
    color: var(--triwas-color-text);
    font-family: var(--triwas-font-body);
    font-size: var(--triwas-size-body);
    line-height: var(--triwas-line-body);
    font-weight: 400;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
#top #wrap_all .tw-editorial *,
#top #wrap_all .tw-editorial *::before,
#top #wrap_all .tw-editorial *::after { box-sizing: border-box; }
#top #wrap_all .tw-editorial :is(h1, h2, h3) {
    font-family: var(--triwas-font-heading);
    color: var(--triwas-color-text);
    font-weight: 400;
    line-height: var(--triwas-line-heading);
    letter-spacing: -.025em;
    text-transform: none;
    margin: 0 0 var(--triwas-heading-space, 24px);
    padding: 0;
}
#top #wrap_all .tw-editorial h2 { font-size: var(--triwas-size-h2); }
#top #wrap_all .tw-editorial p { margin: 0 0 var(--triwas-paragraph-space, 20px); font: inherit; color: inherit; }
#top #wrap_all .tw-editorial figure { margin: 0; }
#top #wrap_all .tw-editorial img { display: block; max-width: 100%; height: auto; border: 0; }
#top #wrap_all .tw-editorial .tw-container {
    width: calc(100% - var(--triwas-gutter) * 2);
    max-width: var(--triwas-content-max);
    margin-inline: auto;
}
#top #wrap_all .tw-editorial .tw-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: var(--triwas-button-padding);
    border: 1px solid var(--triwas-color-button);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--triwas-font-button);
    font-size: var(--triwas-size-button);
    font-weight: 500;
    line-height: var(--triwas-line-button);
    letter-spacing: .01em;
    background: var(--triwas-color-button);
    color: var(--triwas-color-white);
    text-decoration: none;
    text-align: center;
    transition: background-color 180ms ease, color 180ms ease;
}
#top #wrap_all .tw-editorial .tw-button:hover { background: var(--triwas-color-text); }
#top #wrap_all .tw-editorial a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
}
#top #wrap_all .tw-editorial .tw-button-outline {
    border-color: var(--triwas-color-white);
    background: rgba(0, 0, 0, .06);
    color: var(--triwas-color-white);
}
#top #wrap_all .tw-editorial .tw-button-outline:hover {
    background: var(--triwas-color-white);
    color: var(--triwas-color-text);
}
@media (prefers-reduced-motion: reduce) {
    #top #wrap_all .tw-editorial .tw-button { transition: none; }
}