/*
Theme Name: OBJECT etc Atelier Tema
Version: 0.2.0
Text Domain: objectetc-atelier-tema
Update URI: false
*/
/* ===== Logoen ( Object ) – navbar/logo.css ===== */
:root {
	--logo-apne: 0.6s;                                /* parentesene åpner seg når siden lastes */
	--logo-start: 0.15s;                              /* venter litt før de åpner seg */
	--logo-kurve: cubic-bezier(0.65, 0, 0.35, 1);     /* sakte–raskt–sakte, som i videoen */
	--logo-luft: 0.06em;                              /* parentes → ordet */
	--logo-etc-fart: 60ms;                            /* «etc» skrives bokstav for bokstav (hover) */
	--logo-etc-farge: rgba(0, 0, 0, 0.5);
}

/* ===== Passordsiden (passord/) – tallene gjelder på 1366 px ===== */
:root {
	--pw-marg: calc(66 * var(--obj-enhet));          /* forsiden synlig rundt det hvite feltet */
	--pw-slor: rgba(0, 0, 0, 0.18);                  /* mørkt slør over forsiden · 0 = av */
	--pw-blur: 6px;                                  /* hvor uskarp forsiden er bak · 0px = skarp */
	--pw-hoyde: calc(708 * var(--obj-enhet));        /* høyden på det hvite feltet */
	--pw-hoyde-mobil: 560px;
	--pw-luft: calc(38 * var(--obj-enhet));          /* kant → logo, etikett og slagord */
	--pw-innrykk: calc(111 * var(--obj-enhet));      /* høyre kant → dato og pil */
	--pw-linje-ende: calc(32 * var(--obj-enhet));    /* høyre kant → enden av linjen */
	--pw-linje-luft: calc(10 * var(--obj-enhet));    /* teksten → linjen */
	--pw-feil-luft: calc(14 * var(--obj-enhet));     /* linjen → «Feil passord.» */
	--pw-str-logo: calc(20 * var(--obj-enhet));      /* «Object» */
	--pw-str-liten: calc(16 * var(--obj-enhet));     /* etikett, dato, slagord */
	--pw-str-felt: calc(53 * var(--obj-enhet));      /* «Password» */
	--pw-pil: calc(38 * var(--obj-enhet));           /* pilens bredde */
	--pw-panel: #ffffff;
	--pw-tekst: #000000;
	--pw-gra: rgba(0, 0, 0, 0.5);
	--pw-linje: rgba(0, 0, 0, 0.3);
	--pw-glid: calc(16 * var(--obj-enhet));          /* hvor langt feltet glir opp */
	--pw-kurve: cubic-bezier(0.22, 0.61, 0.36, 1);
	--pw-klammer-start: 1.05s;                       /* når «()» åpner seg rundt feltet */
	--pw-klammer-apne: 0.8s;
	--pw-klammer-lukk: 0.55s;                        /* lukker seg ved riktig passord */
	--pw-klammer-kurve: cubic-bezier(0.65, 0, 0.35, 1);
	--pw-klammer-luft: 0.12em;                       /* parentes → feltet */
	--pw-bject-fart: 70;                             /* ms per bokstav i «bject» */
	--pw-inn-skala: 1.08;                            /* feltet vokser mot deg når du går inn · 1 = av */
	--pw-inn-kurve: cubic-bezier(0.16, 1, 0.3, 1);   /* raskt ut, mykt inn i siden */
}
@media (max-width: 767px) {
	:root { --pw-marg: 16px; --pw-luft: 20px; --pw-innrykk: 20px; --pw-linje-ende: 20px; --pw-linje-luft: 8px; --pw-feil-luft: 12px;
		--pw-str-logo: 18px; --pw-str-liten: 14px; --pw-str-felt: 40px; --pw-pil: 30px; --pw-glid: 12px; }
}
/* ===== OBJECT etc katalog og produktside: mål, farger, fonter =====
   Bygger på --grid-variablene lenger ned. Tallene gjelder på 1366 px og skalerer med skjermen. */
:root {
	/* Katalog */
	--kat-luft-topp: calc(240 * var(--grid-enhet));      /* navbar → introteksten */
	--kat-str-intro: calc(40 * var(--grid-enhet));       /* «Ha noe her kort.» */
	--kat-str-verktoy: calc(18 * var(--grid-enhet));     /* antall, filtre, Sorter */
	--kat-str-liste: calc(16 * var(--grid-enhet));       /* valgene i nedtrekkslistene */
	--kat-verktoy-luft: calc(25 * var(--grid-enhet));    /* mellom filtrene */

	/* Produktside */
	--ps-bilde-bredde: 55.86%;                           /* bildeflaten (763 av 1366 px) */
	--ps-bilde-bakgrunn: var(--grid-farge-produkt);      /* samme grå som produktrutene */
	--ps-bilde-luft-x: 17.4%;                            /* luft rundt produktbildet i flaten */
	--ps-bilde-luft-y: 8%;
	--ps-info-luft: calc(135 * var(--grid-enhet));       /* bildeflaten → teksten til høyre */
	--ps-info-bredde: calc(324 * var(--grid-enhet));     /* bredden på teksten til høyre */
	--ps-str-liten: calc(14 * var(--grid-enhet));        /* sti, designer, nedtrekkstekst */
	--ps-str-navn: calc(12 * var(--grid-enhet));         /* produktnavnet */
	--ps-str-tekst: calc(16 * var(--grid-enhet));        /* nedtrekk, knapper */
	--ps-str-stor: calc(20 * var(--grid-enhet));         /* pris, kort beskrivelse */
	--ps-knapp-hoyde: calc(32 * var(--grid-enhet));
	--ps-knapp-farge: #000000;
	--ps-knapp-tekst: #ffffff;
	--ps-linje: rgba(112, 112, 112, 0.5);

	/* Designersiden */
	--des-luft-topp: calc(60 * var(--grid-enhet));       /* hero → bokstavlinjen */
	--des-str-alfabet: calc(14 * var(--grid-enhet));     /* A B C … */
	--des-alfabet-luft: calc(22 * var(--grid-enhet));    /* mellom bokstavene */
	--des-alfabet-under: calc(60 * var(--grid-enhet));   /* bokstavlinjen → første gruppe */
	--des-str-bokstav: calc(16 * var(--grid-enhet));     /* A, B, C over hver gruppe */
	--des-bokstav-under: calc(16 * var(--grid-enhet));   /* bokstav → navnene */
	--des-str-navn: calc(14 * var(--grid-enhet));        /* designernavn */
	--des-rad-luft: calc(6 * var(--grid-enhet));         /* mellom navnelinjene */
	--des-gruppe-luft: calc(36 * var(--grid-enhet));     /* mellom bokstavgruppene */
	--des-kolonner: 6;                                   /* navnekolonner på PC (3 tablet, 2 mobil) */

	/* Én designer (/designer/navn/) */
	--dp-topp-rader: 1;                                  /* toppbildets høyde i grid-ruter (1 = én rute, 2 = to) */
	--dp-topp-fokus: center 30%;                         /* hvilken del av bildet som vises når det beskjæres */
	--dp-tekst-over: calc(36 * var(--grid-enhet));       /* toppbilde → teksten */
	--dp-luft-ned: calc(120 * var(--grid-enhet));        /* teksten → seksjonene og → produktene */
	--dp-str-tekst: calc(30 * var(--grid-enhet));        /* teksten om designeren */
	--dp-tekst-bredde: calc(657 * var(--grid-enhet));    /* ca. to ruter bred */

	/* Profil og favoritter */
	--pr-str-liten: calc(14 * var(--grid-enhet));        /* Endre navn, Logg ut, beskjeder */
	--pr-faner-over: calc(60 * var(--grid-enhet));       /* navnet → fanene */
	--pr-skjema-bredde: calc(324 * var(--grid-enhet));   /* innlogging og ny konto */
	--hjerte-str: 19px;                                  /* hjertet på bildene */
	--hjerte-luft: 10px;                                 /* hjertet → bildekanten */
	--hjerte-farge: #000000;                             /* omrisset */
	--hjerte-fyll: #000000;                              /* fyllet når det er valgt */
	--hjerte-synlighet: 1;                               /* hele hjertet (1 = helt synlig) */

	/* Artikkel */
	--art-luft-topp: calc(50svh - var(--nav-topbar-height) - var(--nav-main-height) + 10vh); /* hvit luft øverst: halve første skjermbilde */
	--art-luft-ned: calc(120 * var(--grid-enhet));       /* ingress → seksjonene, seksjonene → produktene */
	--art-tekst-bredde: calc(657 * var(--grid-enhet));   /* tittel, ingress og brødtekst: ca. to ruter bred */
	--art-str-meta: calc(13 * var(--grid-enhet));        /* MAGASIN · KATEGORI · DATO */
	--art-str-tittel: calc(48 * var(--grid-enhet));
	--art-str-ingress: calc(22 * var(--grid-enhet));
	--art-str-brodtekst: calc(18 * var(--grid-enhet));

	/* Nyhetsbrev-båndet og footeren */
	--fot-luft-over: calc(60 * var(--grid-enhet));       /* innholdet → nyhetsbrev-båndet */
	--fot-gra: #f5f5f5;                                  /* båndets farge */
	--fot-band-hoyde: calc(348 * var(--grid-enhet));
	--fot-bilde-str: calc(509 * var(--grid-enhet));      /* stolen */
	--fot-bilde-over: calc(132 * var(--grid-enhet));     /* hvor mye bildet stikker opp over båndet */
	--fot-bilde-under: calc(29 * var(--grid-enhet));     /* hvor mye det går under båndet */
	--fot-str-tittel: calc(20 * var(--grid-enhet));      /* NYHETSBREV */
	--fot-str-tekst: calc(20 * var(--grid-enhet));       /* tekstene i båndet */
	--fot-str-lenke: calc(15 * var(--grid-enhet));       /* lenkene i footeren */
	--fot-str-liten: calc(12 * var(--grid-enhet));       /* samtykke, ©, Cookies */
	--fot-felt-hoyde: calc(40 * var(--grid-enhet));      /* e-postfelt og knapp */
}
:root {
  /* FONT */
  --hand-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* FARGER */
  --hand-black: #000000;
  --hand-white: #ffffff;
  --hand-line: #e5e5e5;
  --nav-topbar-bg: #000000;
  --nav-topbar-text: #ffffff;

  /* NAVBAR: mål */
  --nav-topbar-height: clamp(38px, calc(40 * var(--grid-enhet)), 47px);
  --nav-main-height: clamp(56px, calc(62 * var(--grid-enhet)), 70px);
  --nav-pad-left: clamp(26px, calc(34 * var(--grid-enhet)), 34px);
  --nav-pad-right: clamp(24px, calc(30 * var(--grid-enhet)), 30px);
  --nav-font-size: clamp(14px, calc(15 * var(--grid-enhet)), 16px);
  --nav-topbar-font-size: clamp(13px, calc(14 * var(--grid-enhet)), 15px);
  --nav-small-font-size: clamp(12px, calc(12.5 * var(--grid-enhet)), 13px);
  --nav-sok-str: calc(20 * var(--grid-enhet)); /* teksten i søkefeltet (som seksjonstitlene, men tynnere) */
  --nav-logo-height: clamp(14px, calc(15 * var(--grid-enhet)), 16.4px);
  --nav-logo-gap: clamp(32px, 5.8vw, 79px);
  --nav-item-gap: clamp(18px, 2vw, 27px);

  /* NAVBAR: dropdown */
  --nav-card-pad: 30px;
  --nav-card-pad-bottom: 16px;
  --nav-card-ratio: 213 / 141;

  /* NAVBAR: animasjon */
  --nav-anim-duration: 0.35s;
  --nav-anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* HERO: mål, farger, font */
  --hero-bilde: 32vw;                           /* 438 px på 1366 px skjerm */
  --hero-bilde-maks: 560px;                     /* blir ikke større enn dette */
  --hero-topp: clamp(32px, 5.7vw, 96px);        /* luft over bildet */
  --hero-avstand: clamp(18px, 2.6vw, 44px);     /* bilde → tekst */
  --hero-bunn: clamp(24px, 3.3vw, 56px);        /* luft under teksten */
  --hero-tekst-str: clamp(22px, 2.9vw, 48px);
  --hero-tekst-farge: var(--hand-black);
  --hero-bakgrunn: var(--hand-white);
  --hero-font: var(--hand-font);

  /* GRID: skala
     Alle grid-mål under er skrevet som «tall × enhet». Enheten er 1 px på en 1366 px skjerm
     (Figma-størrelsen), og vokser/krymper med skjermen: minst 0.75 px, maks 1.2 px. */
  --grid-enhet: clamp(0.75px, calc(100vw / 1366), 1.2px);
  --grid-maks: 1600px;             /* gridet blir ikke bredere enn dette */

  /* GRID: mål (tallene gjelder på 1366 px) */
  --grid-gap: 0px;                                      /* rutene står kant i kant */
  --grid-kant: calc(10 * var(--grid-enhet));            /* kant inni hver rute: bilder 20 px fra hverandre */
  --grid-sidemarg: calc(var(--nav-pad-left) - var(--grid-kant)); /* bildekanten på linje med logoen */
  --grid-forste-luft: calc(14 * var(--grid-enhet));     /* hero → første seksjonstittel (i tillegg til heroens egen luft) */
  --grid-seksjon-luft: calc(60 * var(--grid-enhet));    /* nederste bilde eller bildetekst → neste seksjonstittel */
  --grid-tittel-luft: calc(8 * var(--grid-enhet));      /* seksjonstittel → rutekant (+ kanten = til bildet) */
  --grid-tekst-mellomrom: calc(20 * var(--grid-enhet)); /* tittel → undertekst i tekstruter */
  --grid-bildetekst-luft: calc(11 * var(--grid-enhet)); /* bilde → bildetekst */
  --grid-tekstlinje: calc(30 * var(--grid-enhet));      /* tablet/mobil: ekstra luft mellom rader med bildetekst */

  /* GRID: produktruter (luft rundt produktbildet på den grå flaten) */
  --grid-produkt-luft-x: 12.5%;    /* 1 rute */
  --grid-produkt-luft-y: 10%;
  --grid-produkt-luft-x-stor: 10%; /* større ruter */
  --grid-produkt-luft-y-stor: 8.7%;

  /* GRID: farger */
  --grid-farge-tekst: var(--hand-black);
  --grid-farge-gra-tekst: rgba(0, 0, 0, 0.6);
  --grid-farge-produkt: #fafafa;
  --grid-farge-tom: var(--hand-white);
  --grid-farge-laster: #f4f4f2;    /* bildefeltet mens bildet lastes */

  /* GRID: font og størrelser (tallene gjelder på 1366 px)
     Seksjonstittel = Medium (500), titler = Regular (400), undertekst = Light (300) */
  --grid-font: var(--hand-font);
  --grid-str-seksjonstittel: calc(20 * var(--grid-enhet));
  --grid-str-tittel: calc(18 * var(--grid-enhet));          /* bildetekster og titler i tekstruter */
  --grid-str-produkttekst: calc(14 * var(--grid-enhet));    /* bildetekst under produktruter */
  --grid-str-undertekst-stor: calc(20 * var(--grid-enhet));
  --grid-str-undertekst-liten: calc(16 * var(--grid-enhet));
  
  /* HOVER på ruter med lenke (bare med mus) */
  --grid-hover-farge: rgba(242, 242, 240, 0.6);           /* flaten over bildet */
  --grid-hover-varighet: 0.5s;
  --grid-str-hover: calc(14 * var(--grid-enhet));          /* teksten, f.eks. «Utforsk» */

   /* BEVEGELSE (inntoning ved scroll og lasting) */
  --bev-varighet: 1s;            /* hvor lang tid en rute bruker på å tone inn */
  --bev-avstand: 0;             /* hvor langt rutene glir opp */
  --bev-forsinkelse: 0s;        /* forsinkelse mellom rutene i samme rad */
  --bev-bilde-varighet: 1.2s;      /* bildenes inntoning når de er lastet */
  --bev-kurve: cubic-bezier(0.22, 0.61, 0.36, 1); /* myk start og slutt */
  --bev-gjenta: 1;                 /* 1 = glir inn hver gang (ned og opp) · 0 = bare første gang */

  /* BEVEGELSE: ekstra (1 = på, 0 = av) */
  --bev-avdekk: 0;                 /* bildene avdekkes nedenfra i rammen */
  --bev-avdekk-varighet: 0.7s;
  --bev-parallakse: 0;           /* hvor mye bildet beveger seg i rammen · 0px = av */
  --bev-myk-scroll: 1;             /* myk scrolling med mus/styreplate (ikke mobil) */
  --bev-myk-styrke: 0.2;           /* høyere = lettere (0.1–0.3) */
  --bev-overgang-varighet: 0.5s;   /* sideoverganger og logoen som lukker seg · 0s = av */
  --bev-hero: 0;                   /* hero-teksten bokstav for bokstav · 0 = av */
  --bev-hero-varighet: 1.1s;
  --bev-hero-forsinkelse: 0.035s;  /* tid mellom hver bokstav */
  --bev-hero-start: 0.2s;          /* venter litt før teksten starter */
}
@media (max-width: 1023px) { /* tablet */
  :root { --hero-bilde: 45vw; }
}
@media (max-width: 767px) { /* mobil */
  :root { --hero-bilde: 72vw; }
}
@media (max-width: 767px) and (orientation: portrait) { /* stående telefon: mindre stol, like mye luft rundt (hero-høyden er den samme) */
  :root { --hero-bilde-innhold: 80%; } /* bildets størrelse inni feltet · 100% = som før */
}

@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

body {
  margin: 0;
  font-family: var(--hand-font);
  color: var(--hand-black);
  background: var(--hand-white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

/* ===== HERO ===== */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Landing: heroen fyller første skjermbilde, så bare toppen av neste seksjon titter frem nederst */
  min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - var(--hero-navbar-hoyde) - var(--hero-titt));
  padding: var(--hero-topp) 16px var(--hero-bunn);
  background: var(--hero-bakgrunn);
  text-align: center;
}
.hero__bilde {
  position: relative;
  margin: 0;
  width: min(var(--hero-bilde), var(--hero-bilde-maks));
  aspect-ratio: 1 / 1;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}
.hero__img.er-aktiv {
  opacity: 1;
}
.hero__tekst {
  margin: var(--hero-avstand) 0 0;
  font-family: var(--hero-font);
  font-weight: 400;
  font-size: var(--hero-tekst-str);
  line-height: 1.2;
  color: var(--hero-tekst-farge);
}

/* Navbaren skalerer litt ned på mindre skjermer (og ved 100 % zoom på bærbare med skjermskalering),
   men blir aldri større enn målene i Figma. Mobil og tablet (≤ 900 px) bruker de faste målene som før. */
@media (max-width: 900px) {
  :root {
    --nav-topbar-height: 47px;
    --nav-main-height: 70px;
    --nav-pad-left: 34px;
    --nav-pad-right: 30px;
    --nav-font-size: 16px;
    --nav-topbar-font-size: 15px;
    --nav-small-font-size: 13px;
    --nav-logo-height: 16.4px;
  }
}

/* Hero: bildet kan være mindre enn feltet sitt, så luften rundt blir større uten at høyden endres */
.hero__img {
  inset: calc((100% - var(--hero-bilde-innhold, 100%)) / 2);
  width: var(--hero-bilde-innhold, 100%);
  height: var(--hero-bilde-innhold, 100%);
}

/* Hero som landing: hvor mye av neste seksjon (f.eks. tittelen «Nyheter») som titter frem nederst */
:root {
  --hero-titt: clamp(85px, 11svh, 125px); /* tittelen og litt av neste seksjon */
  --hero-navbar-hoyde: calc(var(--nav-topbar-height) + var(--nav-main-height));
}
@media (max-width: 900px) {
  :root { --hero-navbar-hoyde: var(--nav-main-height); } /* nyhetsbrev-stripa er skjult her */
}

/* Største bredde på sidene: samme som gridet og navbaren. På store skjermer står alt midt på. */
:root {
  --side-maks: calc(var(--grid-maks) + 2 * var(--grid-sidemarg));
}

/* ===== OBJECT etc (Figma: Web 1366) =====
   Enheten er 1 px på en 1366 px skjerm og følger skjermbredden, men stopper ved 1600 px. */
:root {
  --obj-enhet: calc(min(100vw, 1600px) / 1366);

  /* Navbar */
  --nav-topbar-height: 0px;                       /* stripa er skjult */
  --nav-logo-str: 20px;                           /* «Object» */
  --nav-lenke-farge: rgba(0, 0, 0, 0.5);          /* menypunktene */
}
@media (min-width: 901px) {
  :root {
    --nav-main-height: calc(66 * var(--obj-enhet));
    --nav-pad-left: calc(17 * var(--obj-enhet));
    --nav-pad-right: calc(21 * var(--obj-enhet));
    --nav-font-size: calc(18 * var(--obj-enhet));
    --nav-logo-str: calc(20 * var(--obj-enhet));
    --nav-logo-gap: calc(51 * var(--obj-enhet));   /* «Object» → Journal */
    --nav-item-gap: calc(31.5 * var(--obj-enhet));   /* mellom menypunktene */
  }
}