/**
 * Gjefsjøen Fjellgård – visuell profil
 *
 * Bygget etter «Gjefsjøen designmanual», Smart Media, desember 2025.
 * Farger, typografi og logobruk er hentet direkte fra manualen.
 *
 * Innhold:
 *   1. Webfonter (selvhostet)
 *   2. Designtokens
 *   3. Typografi
 *   4. Komponenter
 *   5. Grafiske elementer og hjelpeklasser
 *
 * Merk: fargevalg på enkeltmoduler ligger i Beaver Builder-dataene, ikke her.
 * Profilen setter grunnlaget og lar modulen bestemme resten – med ett unntak:
 * overskrifter og stikktitler, som profilen styrer med !important. Se punkt 3.
 */

/* =========================================================================
   1. WEBFONTER
   PT Serif Bold  – overskrifter, underoverskrifter og annen uthevet tekst
   PT Sans        – brødtekst og all annen tekst
   Selvhostet framfor Google Fonts, slik at ingen data sendes til tredjepart
   før samtykke er gitt.
   ========================================================================= */

@font-face {
	font-family: 'PT Sans';
	src: url('../fonts/PTSans-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'PT Sans';
	src: url('../fonts/PTSans-Italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'PT Sans';
	src: url('../fonts/PTSans-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'PT Sans';
	src: url('../fonts/PTSans-BoldItalic.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* Profilen leverer kun Bold-snittet av PT Serif. Vektområdet 400–700 peker
   derfor på samme fil, slik at overskrifter aldri faller tilbake til et
   systemsnitt og aldri får syntetisk fete glyffer. */
@font-face {
	font-family: 'PT Serif';
	src: url('../fonts/PTSerif-Bold.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'PT Serif';
	src: url('../fonts/PTSerif-BoldItalic.woff2') format('woff2');
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}

/* =========================================================================
   2. DESIGNTOKENS
   ========================================================================= */

:root {
	/* Primærfarge */
	--gj-bla: #074051;

	/* Sekundærfarger */
	--gj-oransje: #ffb05a;
	--gj-lys-bla: #33b1ff;
	--gj-lys-gronn: #75ef7e;
	--gj-beige: #f7efe7;

	/* Avledede toner – ikke i manualen, men nødvendige for hover og dybde */
	--gj-bla-dyp: #052e3a;
	--gj-bla-lys: #0e5c73;
	--gj-oransje-dyp: #e39442;

	/* Nøytraler */
	--gj-hvit: #ffffff;
	--gj-sort: #1d1d1d;
	--gj-graa-100: #f4f2ef;
	--gj-graa-300: #d8d3cd;
	--gj-graa-500: #8b8580;

	/* Typografi */
	--gj-font-overskrift: 'PT Serif', Georgia, 'Times New Roman', serif;
	--gj-font-brodtekst: 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	/* Form – radien speiler den avrundede firkanten i logomerket */
	--gj-radius: 28px;
	--gj-radius-liten: 6px;

	/**
	 * Farger som avhenger av hvor lys flaten under dem er. Verdiene her
	 * gjelder lys bakgrunn; de mørke settes i blokka under.
	 *
	 * Manualen, side 3: blå «kan brukes som bakgrunnsfarge og tekstfarge på
	 * lys bakgrunn», mens oransje «er ment til bruk på grafiske elementer og
	 * som tekstfarge i overskrifter på mørk bakgrunn».
	 */
	--gj-aksent: var(--gj-bla);
	--gj-aksent-hover: var(--gj-bla-lys);
	--gj-overskrift: var(--gj-bla);
	--gj-stikktittel: var(--gj-bla);
}

/**
 * Lys og mørk flate.
 *
 * «gj-flate-mork» og «gj-flate-lys» settes automatisk på rader og kolonner
 * av FLChildTheme::mark_row_surface(). Klassen følger av hvilken av de to
 * overskriftsfargene som har best kontrast mot bakgrunnen noden faktisk
 * viser – også når bakgrunnen er et foto med et halvgjennomsiktig overlegg.
 *
 * Fordi CSS-variabler arves nedover, vinner den nærmeste flaten av seg selv:
 * et lyst kort i en fotorad får blå overskrift uten at rekkefølgen i filen
 * eller spesifisiteten trenger å si noe om det.
 *
 * «gj-mork» og «gj-lys» er den manuelle utgaven, til moduler og annet som
 * ikke er en rad eller kolonne.
 */
.gj-flate-mork,
.gj-mork,
.gj-bakgrunn-bla {
	--gj-aksent: var(--gj-oransje);
	--gj-aksent-hover: var(--gj-oransje-dyp);
	--gj-overskrift: var(--gj-hvit);
	--gj-stikktittel: var(--gj-oransje);
}

.gj-flate-lys,
.gj-lys,
.gj-bakgrunn-beige {
	--gj-aksent: var(--gj-bla);
	--gj-aksent-hover: var(--gj-bla-lys);
	--gj-overskrift: var(--gj-bla);
	--gj-stikktittel: var(--gj-bla);
}

/* =========================================================================
   3. TYPOGRAFI
   ========================================================================= */

body,
body .fl-builder-content {
	font-family: var(--gj-font-brodtekst);
}

h1, h2, h3, h4, h5, h6,
.fl-post-title,
.fl-post-grid-post .fl-post-title {
	font-family: var(--gj-font-overskrift);
	font-weight: 700;
}

/* PT Serif Bold har mye tyngde. Litt negativ knipning på de store gradene
   gir samme rytme som overskriftene i designmanualen. */
h1, h2, h3 {
	letter-spacing: -0.01em;
}

/**
 * Overskrifter: farge og gemener.
 *
 * Dette er det ene stedet profilen bruker !important, og grunnen er WPML.
 * Farge og versaler ligger på rundt 84 modulnoder i _fl_builder_data, og
 * hver oversettelse får egne nodenavn. En regel som skal gjelde alle språk
 * kan derfor ikke matche på node, og BBs egne selektorer er opptil (0,5,2)
 * – det er ikke noe å slå på spesifisitet alene.
 *
 * Følgen er at fargevelgeren og versalbryteren på overskriftsmoduler ikke
 * lenger slår gjennom. Skal en enkelt overskrift avvike, må den ha en egen
 * CSS-klasse som setter --gj-overskrift.
 *
 * Sperringen (2–5px) nullstilles sammen med versalene. Den er en
 * versalkonvensjon og gir feil rytme i gemener, så den ene endringen
 * forutsetter den andre.
 *
 * Treffer bevisst ikke knapper eller meny – der er versalene et bevisst valg
 * som holder seg innenfor profilen.
 */
.fl-builder-content .fl-heading .fl-heading-text,
.fl-builder-content .fl-heading .fl-heading-text *,
.fl-builder-content .fl-heading a,
.fl-builder-content .fl-callout-title,
.fl-builder-content .fl-callout-title-text,
.fl-builder-content .pp-heading .heading-title span.pp-primary-title,
.fl-builder-content .pp-heading .heading-title span.pp-secondary-title,
.fl-post-title,
.fl-post-title a {
	color: var(--gj-overskrift) !important;
}

.fl-builder-content .fl-heading,
.fl-builder-content .fl-heading .fl-heading-text,
.fl-builder-content .fl-callout-title,
.fl-builder-content .pp-heading .heading-title span.pp-primary-title,
.fl-builder-content .pp-heading .heading-title span.pp-secondary-title {
	text-transform: none !important;
	letter-spacing: -0.01em !important;
}

/**
 * Stikktittel («eyebrow»).
 *
 * Modulene har fra før klassen .subtitle. Skriftgrad, vekt og versaler ligger
 * på modulen i Beaver Builder; fargen styres herfra, av samme grunn som over.
 *
 * Manualen har ingen sekundærfarge på lys bakgrunn, så stikktittelen er blå
 * der og oransje på mørk flate.
 */
.fl-builder-content .fl-module.subtitle .fl-module-content .fl-rich-text,
.fl-builder-content .fl-module.subtitle .fl-module-content .fl-rich-text * {
	color: var(--gj-stikktittel) !important;
}

.fl-module.subtitle {
	margin-bottom: 8px;
}

.fl-module.subtitle .fl-rich-text p {
	margin: 0;
}

/* =========================================================================
   4. KOMPONENTER
   ========================================================================= */

/* ----- Header ----------------------------------------------------------- */

/* Bildelogoen erstatter ordmerket i tekst. Egen klasse framfor :has(),
   slik at tekstvarianten i Akevitt-headeren beholder sin styling. */
header.fl-builder-content .header-logo .header-logo__link {
	display: inline-block;
	line-height: 0;
	border-bottom: 0;
}

header.fl-builder-content .header-logo .header-logo__link img {
	display: block;
	width: auto;
	height: 96px;
	max-width: 100%;
}

@media (max-width: 1024px) {
	header.fl-builder-content .header-logo .header-logo__link img {
		height: 72px;
	}
}

@media (max-width: 440px) {
	header.fl-builder-content .header-logo .header-logo__link img {
		height: 48px;
	}
}

/* ----- Lenker ----------------------------------------------------------- */

body p a,
body .fl-page-content li a {
	color: var(--gj-aksent);
	text-underline-offset: 3px;
}

body p a:hover,
body .fl-page-content li a:hover {
	color: var(--gj-aksent-hover);
}

/* ----- Knapper ---------------------------------------------------------- */

.fl-button,
.fl-button:visited,
.gform_wrapper .gform_footer input[type='submit'] {
	font-family: var(--gj-font-brodtekst);
	font-weight: 700;
	border-radius: var(--gj-radius-liten);
	transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;
}

/* ----- Synlig tastaturfokus --------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.fl-button:focus-visible {
	outline: 3px solid var(--gj-oransje);
	outline-offset: 2px;
}

/* ----- Markering -------------------------------------------------------- */

::selection {
	background: var(--gj-bla);
	color: var(--gj-hvit);
}

/* ----- Skjema (Gravity Forms) ------------------------------------------- */

.gform_wrapper input[type='text'],
.gform_wrapper input[type='email'],
.gform_wrapper input[type='tel'],
.gform_wrapper input[type='number'],
.gform_wrapper textarea,
.gform_wrapper select {
	font-family: var(--gj-font-brodtekst);
	border: 1px solid var(--gj-graa-300);
	border-radius: var(--gj-radius-liten);
}

.gform_wrapper input[type='text']:focus,
.gform_wrapper input[type='email']:focus,
.gform_wrapper input[type='tel']:focus,
.gform_wrapper input[type='number']:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	border-color: var(--gj-bla);
}

.gform_wrapper .gfield_label {
	font-family: var(--gj-font-brodtekst);
	font-weight: 700;
	color: var(--gj-bla);
}

/* =========================================================================
   5. GRAFISKE ELEMENTER OG HJELPEKLASSER
   Opt-in – legges på rad, kolonne eller modul i Beaver Builder.
   ========================================================================= */

/* Bakgrunnsflater fra paletten. */
.gj-bakgrunn-beige > .fl-row-content-wrap,
.gj-bakgrunn-beige > .fl-col-content {
	background-color: var(--gj-beige);
}

.gj-bakgrunn-bla > .fl-row-content-wrap,
.gj-bakgrunn-bla > .fl-col-content {
	background-color: var(--gj-bla);
	color: var(--gj-hvit);
}

/* Bølgemønsteret fra logoen som seksjonsavslutning. */
.gj-bolger,
.gj-bolger--topp {
	position: relative;
}

/**
 * Begge variantene ligger på ::before.
 *
 * ::after på .fl-row-content-wrap er opptatt av Beaver Builders
 * bakgrunnsovelegg, og :before/:after på selve .fl-row er BBs clearfix.
 * .fl-row-content-wrap::before er den eneste ledige plassen, og elementet
 * har «position: relative» fra BB.
 *
 * Følgen er at gj-bolger og gj-bolger--topp utelukker hverandre: en rad kan
 * ha mønsteret enten øverst eller nederst, ikke begge.
 *
 * z-index 1 legger mønsteret over et eventuelt bakgrunnsovelegg (z-index 0),
 * men under radinnholdet, som kommer senere i dokumentet.
 */
.gj-bolger > .fl-row-content-wrap::before,
.gj-bolger--topp > .fl-row-content-wrap::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	height: 110px;
	background-image: url('../img/monster-bolger.png');
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% auto;
	pointer-events: none;
}

.gj-bolger > .fl-row-content-wrap::before {
	bottom: 0;
}

.gj-bolger--topp > .fl-row-content-wrap::before {
	top: 0;
	transform: scaleY(-1);
}

/**
 * Avrundet hjørne-motiv fra logomerket.
 *
 * Foto får radien som standard: logomerket bygger på en avrundet firkant, og
 * eksempelet på side 4 i manualen gjentar formen på bildene. Da slipper
 * hvert enkelt bilde å få klassen manuelt.
 *
 * Sirkelbeskjæringen i Beaver Builder holdes utenfor – den er et bevisst
 * valg på modulen, og radien ville firkantet den.
 */
.fl-builder-content .fl-photo:not(.fl-photo-crop-circle) .fl-photo-img {
	border-radius: var(--gj-radius);
}

/* Opt-in for kort, kolonner og annet som ikke er fotomoduler. */
.gj-avrundet img,
.gj-avrundet .fl-photo-img,
.gj-avrundet > .fl-col-content {
	border-radius: var(--gj-radius);
	overflow: hidden;
}