/*
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/
}
.ast-container, .ast-container-fluid {
padding-left: 30px;
padding-right: 30px;
}
.astra-advanced-hook-598 {
display: none;
}
.home #primary .ast-article-single, .toppbilde #primary .ast-article-single{
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.toppbilde .ast-container h1.entry-title, .toppbilde .ast-container .ingress{
display: none;
}
.toppbilde #primary {
margin: 0 !important;
}
.toppbilde .ast-container #toppbilde{
display: none;
}
.toppbilde .ast-single-post-featured-section {
display: none; /*Skjuler fremhevet bilde, hvis toppbilde skal vises*/
}
.torader p{
font-size:21px;
line-height:1.4
}
.inline-search-form {
display: flex;
flex-wrap: nowrap;
gap: 10px;
max-width: 100%;
align-items: center;
}
.search-form .search-field{
min-width: 300px;
}
.inline-search-form .search-field {
flex: 1;
padding: 8px;
font-size: 16px;
}
.inline-search-form .search-submit {
padding: 8px 16px;
font-size: 16px;
cursor: pointer;
}
.custom-inline-search-form {
display: flex;
flex-wrap: nowrap;
gap: 10px;
margin-bottom: 20px;
max-width: 100%;
}
.custom-inline-search-form input.search-field {
flex: 1;
padding: 8px;
font-size: 16px;
}
.custom-inline-search-form button.search-submit {
padding: 8px 16px;
font-size: 16px;
cursor: pointer;
}
.ast-scroll-top{
bottom: 80px;
}
html {
scroll-behavior: smooth;
}
#primary{
margin-top: 50px !important;
}
#topp_innhold{
padding: 0px !important;
}
/* Fjernet 05.10.2026: overskrift-/tekststørrelse med !important – typografien styres nå fra Astra (Figma «Visuell profil»). */
figure.wp-block-image.alignfull figcaption{
padding: 2px 30px !important;
}
.ingress{ /* Figma «Ingress» 22/30 regular (endret 05.10.2026) */
font-size: 22px !important;
line-height: 30px !important;
font-weight: 400 !important;
}
.jet-listing-grid__item {
padding: 0px;
}
.jet-listing-grid__item .ingress{ /* Figma brødtekst i kort 18/24 (endret 05.10.2026) */
font-size: 18px !important;
line-height: 24px !important;
font-weight: 400 !important;
}
/* Zoom ut på hover – JetEngine listing grid (Kadence-bilde) */
.jet-listing-grid__item .kb-is-ratio-image {
overflow: hidden;
}
.jet-listing-grid__item .kb-is-ratio-image img.kb-img {
transform: scale(1.05);
transition: transform .6s cubic-bezier(.2, .6, .3, 1);
will-change: transform;
}
.jet-listing-grid__item:hover .kb-is-ratio-image img.kb-img {
transform: scale(1);
}
.kb-advanced-slide-inner h2{
font-size: 53px !important;
line-height: 64px !important;
}
/* Fjernet 05.10.2026: overskrift-/tekststørrelse med !important – typografien styres nå fra Astra (Figma «Visuell profil»). */
/* Fjernet 05.10.2026: h2 i listinger 28px !important – produktkortene bruker H2 60/62 fra Figma. */
body.menu-open {
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
}
/* Fjernet 05.10.2026: body 20/26 !important – brødtekst styres av Astra (Figma 18/24). */
.kategori_beskrivelse{
margin-left: 0px !important;
}
/*Gutenberg*/
/* Knappestil flyttet til FIGMA-MALER-seksjonen nederst (svart pille, hover #4E4E4E). */
p {
margin-bottom: 1.3em;
}
p:empty {
display: block;
min-height: 1em; /* optional: makes it visibly take up space */
}
.wp-block-kadence-advancedbtn .kb-button {
padding: 12px 30px !important;
}
.kt-btn-inner-text{
font-size: 17px !important;
line-height: 25px !important;
}
/* Reset native numbering */
.wp-block-list.punktliste {
counter-reset: punktliste-counter;
list-style: none;
padding-left: 0;
}
/* Style each */
.wp-block-list.punktliste li {
background-color: #E8F0FA;
padding: 0.75em 1em;
margin-bottom: 6px;
border-radius: 4px;
position: relative;
padding-left: 2.5em;
}
/* Custom blue number before each */
.wp-block-list.punktliste li::before {
counter-increment: punktliste-counter;
content: counter(punktliste-counter) ".";
color: #126EDB;
font-weight: bold;
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 22px;
}
.ast-custom-header a{
color: #000;
}
.ast-custom-header a:hover{
text-decoration: underline;
}
.kb-navigation .sub-menu{
margin-left: 0px !important;
}
.kb-nav-dropdown-toggle-btn .kb-nav-arrow-svg {
width: 32px !important;
height: 32px !important;
}
.ingress{
font-size: 21px;
font-weight: 400;
line-height: 27px;
max-width: 990px;
margin-bottom: 15px;
}
.kb-query-item .ingress, .jet-listing-grid__item .ingress{
font-size: 18px;
font-weight: 400;
line-height: 27px;
margin-bottom: 0px;
}
.jet-listing-grid--blocks{
width: 100%;
}
.home .entry-header{
/*display: none;*/
}
.home #primary{
margin-top: 0px !important;
}
.page .entry-header, .post .entry-header {
margin-bottom: 1.5em;
max-width: 990px;
margin-left: 0px;
margin-right: auto;
}
.my-category-button {
background: #000;
font-weight: bold;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
padding-top: 12px;
padding-right: 30px;
padding-bottom: 14px;
padding-left: 30px;
color: #fff;
/*text-transform: lowercase; */
font-size: 18px;
}
.my-category-button::first-letter {
text-transform: uppercase; /* make only the first letter uppercase */
}
.my-category-button:hover {
/*background-color: #000;*/
color: #fff;
}
.kb-button.knapp-hvit{
background-color: #fff !important;
padding: 15px 30px;
font-size: 18px;
color: #000;
border-radius: 5px !important;;
transition: background-color 0.4s ease, color 0.4s ease;
margin: 0px 10px 10px 0px;
}
.kb-button.knapp-hvit:hover{
background-color: #000 !important;
color: #fff !important;
}
.kb-button.kb-btn-global-outline{
background-color: transparent !important;
padding: 15px 30px !important;
font-size: 18px !important;
color: #fff !important;
border-radius: 5px !important;
border: 1px solid #fff !important;
transition: background-color 0.4s ease, color 0.4s ease;
backdrop-filter: blur(10px);
}
.kb-button.kb-btn-global-outline:hover{
background-color: #000 !important;
border: 1px solid #000 !important;
}
/*Google*/
.ti-inner {
background-color: #fff !important;
}
/*Card*/
.img_parent {
overflow: hidden;
border-radius: 8px;
}
.card{
border-radius: 8px;
}
.card .img_parent .kb-img {
transition: transform 0.3s ease;
}
.card:hover .img_parent .kb-img {
transform: scale(1.05);
}
.card .image-is-svg {
transition: transform 0.3s ease;
display: inline-block; /* or block, depending on layout */
}
/* On card hover, move arrow to the right */
.card:hover .image-is-svg {
transform: translateX(10px); /* adjust distance as needed */
}
figcaption{
font-size: 16px;
}
/* Fjernet 05.10.2026: footer border-top (ikke i Figma). */
footer a{
color: #fff;
text-decoration: underline;
text-decoration-thickness: 1px !important;
text-underline-offset: 3px !important;
}
footer a:hover{
color: #fff;
text-decoration: underline;
}
.kt-svg-icon-link {
display: flex;
align-items: flex-start; /* Align icon and text to top */
}
.kb-svg-icon-wrap {
display: inline-flex;
align-self: flex-start; /* Ensures icon aligns at the top within flex */
}
.entry-content iframe {
display: block;
}
#kontaktpersoner h4{
font-size: 23px !important;
}
#kontaktpersoner ul {
margin: 0 0 0 0;
list-style: none;
line-height: 1.4em;
}
.ansatt_info{
background-color: #fff;
padding: 15px 20px;
border-radius: 6px;
}
/* Hamburger Styles */
#hamburger-toggle{
margin-left: 30px;
}
.hamburger {
width: 30px;
height: 24px;
box-sizing: content-box; /* så padding legger seg utenpå de 24px */
padding: 10px; /* gjør hele flaten klikkbar, også mellom stripene */
margin: 0 0 12px; /* margin-bottom */
cursor: pointer;
position: relative;
z-index: 999;
}
.hamburger span {
pointer-events: none; /* klikk treffer alltid .hamburger, aldri en enkelt stripe */
display: block;
position: absolute;
left: 0;
width: 30px;
height: 4px;
border-radius: 4px;
background: #1E293B;
transition: top 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 10px; }
.hamburger span:nth-child(3) { top: 20px; }
/* Active = X */
.hamburger.active span:nth-child(1) {
top: 10px;
transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
top: 10px;
transform: rotate(-45deg);
}
button.hamburger {
all: unset;
box-sizing: content-box;
display: block;
width: 30px;
height: 24px;
padding: 0px;
margin: 0 0 12px;
cursor: pointer;
position: relative;
z-index: 999;
}
/* Custom visible focus only on keyboard navigation */
button.hamburger:focus-visible {
outline: 1px dotted #000; /* Customize color/thickness */
outline-offset: 4px;
border-radius: 4px;
}
/* Fjernet 05.10.2026: gammel megameny (27461). Ny mobilmeny ligger i FIGMA-MALER-seksjonen. */
/* ---- Nøstet alignwide / alignfull -------------------------------- */
:root {
--nested-wide: min(var(--wp--custom--ast-wide-width-size, 1360px), 100vw - 40px);
}
@media (min-width: 992px) {
/* alignwide inne i en annen rad (wide eller full — spiller ingen rolle) */
.kt-has-1-columns > .wp-block-kadence-column > .kt-inside-inner-col > .alignwide {
max-width: none !important;
width: var(--nested-wide) !important;
margin-left: calc(50% - var(--nested-wide) / 2) !important;
margin-right: 0 !important;
}
/* alignfull inne i en annen rad */
.kt-has-1-columns > .wp-block-kadence-column > .kt-inside-inner-col > .alignfull {
max-width: none !important;
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: 0 !important;
}
}
@media (max-width: 991.98px) {
.kt-inside-inner-col > .alignwide,
.kt-inside-inner-col > .alignfull {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
html { overflow-x: clip; }
/* Under 992px: følg foreldrerad */
@media (max-width: 991.98px) {
.kt-inside-inner-col > .wp-block-kadence-rowlayout.alignwide {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
}
}
@media (min-width: 1201px) {
.ast-container {
max-width: 1340px;
}
}
@media only screen and (min-width: 992px) {
.single .entry-content:not(.osk-innlegg-innhold) > *:not(.alignwide):not(.alignfull) { /* Figma-innleggsmaler styrer egen bredde */
max-width: 990px !important; /*Ønsket maksbredde på innhold, må være mindre enn innholdsbredde satt i Astra -> Tilpass -> Single Page, eller Astra -> Tilpass ▸ Enkeltinnlegg.*/
margin-left: auto !important; /*0px: innhold justeres til venstre, auto: innholdet sentreres*/
margin-right: auto !important;
}
.page .entry-content > *:not(.alignwide):not(.alignfull) {
max-width: 990px !important; /*Ønsket maksbredde på innhold, må være mindre enn innholdsbredde satt i Astra -> Tilpass -> Single Page, eller Astra -> Tilpass ▸ Enkeltinnlegg.*/
margin-left: 0 !important; /*0px: innhold justeres til venstre, auto: innholdet sentreres*/
margin-right: auto !important;
}
.alignwide{
max-width: 100% !important;
}
.alignfull {
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
max-width: 100vw !important;
width: 100vw !important;
}
.site .site-content #primary .ast-article-single, .ast-separate-container .site-content #secondary .widget {
padding-top: 50px;
/*padding-left: 30px;
padding-right: 30px;*/
}
}
/* =====================================================================
Synlig merke på AI-genererte bilder
---------------------------------------------------------------------
SLIK BRUKER DU DEN
Sett klassen rb-ai på blokken i editoren:
Blokk → Avansert → "Ekstra CSS-klasse(r)" → rb-ai
(IKKE i feltet "Egendefinert CSS" – da blir teksten tolket som en
CSS-erklæring, og elementet får aldri klassen.)
Klassen kan settes på ett enkelt bilde, eller på en beholder
(f.eks. bildekarusellen) – da merkes alle bildene inni.
VIKTIG
Dette merket ligger i CSS, ikke i bildefila. Lastes bildet ned eller
deles videre, følger merket ikke med. For innhold som må være merket
etter AI Act, bør merket i tillegg brennes inn i selve bildet.
Legg gjerne "AI-generert" i alt-teksten også, for skjermlesere.
===================================================================== */
/* --- Ankerpunkt ------------------------------------------------------ */
/* Bildeblokker: merket festes til boksen rundt bildet.
Karusellen står bevisst ikke her – dens indre slide-wrapper er
position:absolute fra Kadence, og overstyres den til relative,
kollapser hele karusellen. Slide-elementet er allerede relative. */
.rb-ai .kb-is-ratio-image,
.rb-ai figure:not(:has(.kb-is-ratio-image)),
figure.rb-ai:not(:has(.kb-is-ratio-image)){
position:relative;
}
/* --- Selve merket ---------------------------------------------------- */
.rb-ai .kb-is-ratio-image::after,
.rb-ai .kb-advanced-slide::after,
.rb-ai figure:not(:has(.kb-is-ratio-image))::after,
figure.rb-ai:not(:has(.kb-is-ratio-image))::after{
content:var(--rb-ai-tekst,"AI-generert");
position:absolute;
right:var(--rb-ai-avstand,12px);
bottom:var(--rb-ai-avstand,12px);
z-index:3;
padding:5px 11px;
border-radius:999px;
background:rgba(15,23,42,.6);
-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);
color:#fff;
font-family:"Mulish",system-ui,sans-serif;
font-size:11px;
font-weight:700;
letter-spacing:.08em;
line-height:1;
text-transform:uppercase;
white-space:nowrap;
pointer-events:none;
}
/* --- Varianter ------------------------------------------------------- */
/* Plassering – legg til ved siden av rb-ai */
.rb-ai--venstre .kb-is-ratio-image::after,
.rb-ai--venstre .kb-advanced-slide::after,
.rb-ai--venstre figure::after,
figure.rb-ai--venstre::after{
right:auto;
left:var(--rb-ai-avstand,12px);
}
.rb-ai--topp .kb-is-ratio-image::after,
.rb-ai--topp .kb-advanced-slide::after,
.rb-ai--topp figure::after,
figure.rb-ai--topp::after{
bottom:auto;
top:var(--rb-ai-avstand,12px);
}
/* Egen tekst eller avstand på ett enkelt bilde: sett variabelen i
blokkens egen stil, f.eks.
--rb-ai-tekst: "AI-illustrasjon";
--rb-ai-avstand: 20px; */
/* --- Mindre skjermer -------------------------------------------------- */
@media (max-width:600px){
.rb-ai .kb-is-ratio-image::after,
.rb-ai .kb-advanced-slide::after,
.rb-ai figure:not(:has(.kb-is-ratio-image))::after,
figure.rb-ai:not(:has(.kb-is-ratio-image))::after{
font-size:10px;
padding:4px 9px;
right:var(--rb-ai-avstand,8px);
bottom:var(--rb-ai-avstand,8px);
}
}
@media only screen and (max-width: 767px) {
/* Fjernet 05.10.2026: overskrift-/tekststørrelse med !important – typografien styres nå fra Astra (Figma «Visuell profil»). */
.kb-advanced-slide-inner h2, .toppbilde_innhold h2{
font-size: 53px !important;
line-height: 64px !important;
}
.site .site-content #primary .ast-article-single {
padding-left: 15px !important;
padding-right: 15px !important;
}
/*To rad kandence blokk*/
/* Fjernet 05.10.2026: overskrift-/tekststørrelse med !important – typografien styres nå fra Astra (Figma «Visuell profil»). */
/* Fjernet 05.10.2026: mobil knappe-padding – Figma bruker 15/20 overalt. */
.kt-btn-inner-text{
font-size: 15px !important;
line-height: 20px !important;
}
.with_frm_style input[type=text], .with_frm_style input[type=email], .with_frm_style input[type=number], .with_frm_style input[type=url], .with_frm_style input[type=tel], .with_frm_style input[type=phone], .with_frm_style select, .with_frm_style textarea, .frm_form_fields_style, input::placeholder, textarea::placeholder {
font-size: 16px !important;
line-height: 22px !important;
}
.frm_section_heading h3{
font-size: 24px !important;
border-bottom: 1px solid #000 !important;
}
.ingress p{
font-size: 18px !important;
line-height: 28px !important;
}
.site .site-content #primary .ast-article-single {
padding-left: 0px;
padding-right: 0px;
}
.ast-plain-container.ast-no-sidebar .entry-content > .alignfull,
.ast-page-builder-template .ast-no-sidebar .entry-content > .alignfull {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
max-width: calc(100vw);
width: calc(100vw);
}
}
@media only screen and (max-width: 1200px) {
#astra_megamenu{
border-radius:0;
box-shadow:none;
width: 100% !important;
}
.ast-separate-container .entry-content > .alignfull, .ast-separate-container .entry-content[data-ast-blocks-layout] > .alignwide, .ast-plain-container .entry-content[data-ast-blocks-layout] > .alignwide, .ast-plain-container .entry-content .alignfull {
margin-left: auto;
margin-right: auto;
}
.jet-container--content-justify-flex-start {
justify-content: flex-start;
width: 100% !important;
}
}
@media (min-width: 1200px) {
.ast-plain-container.ast-no-sidebar #primary {
margin-top: 0px;
margin-bottom: 0px;
}
}
/*
Kadence:
• Mobile: Screens less than 768 px wide
• Tablet: Screens 768 px to 1024 px wide.
• Desktop: Screens greater than 1024 px wide.
Astra
• 544px = covers all phones in portrait mode (including older devices).
• 545px–921px = covers nearly all tablets (portrait and landscape).
• 922px+ = treats larger screens as desktop/laptop.
Bootstrap 5 Breakpoints
• Extra small xs (implicit) < 576px col-12
• Small sm ≥ 576px col-sm-6
• Medium md ≥ 768px col-md-4
• Large lg ≥ 992px col-lg-3
• Extra large xl ≥ 1200px col-xl-2
• XXL (Extra-extra large) xxl ≥ 1400px col-xxl-1
*/
/* === FIGMA-MALER START (ikke rediger mellom markørene – genereres) === */
/* ---------------------------------------------------------------------
Globalt fra Figma «Visuell profil»
Knapp: svart pille (#000 → hover #4E4E4E), Inter 700 16/17, padding 15/20.
Kadence-knapper med «global fill» arver ellers Kadences egen blåfarge (#3633e1);
«body» foran fordi Kadence-CSS-en lastes etter style.css med samme spesifisitet.
--------------------------------------------------------------------- */
body .kb-button.kb-btn-global-fill,
body .kt-button {
background: var(--ast-global-color-3);
border: 0;
border-radius: 200px;
padding: 15px 20px;
color: #fff;
font-family: 'Mulish', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 17px;
transition: background-color .3s ease;
}
body .kb-button.kb-btn-global-fill:hover,
body .kb-button.kb-btn-global-fill:focus,
body .kt-button:hover,
body .kt-button:focus {
background: var(--ast-global-color-8);
color: #fff;
}
/* Tab-fokus på hele sida: 1 px stiplet strek i elementets farge (bare ved tastatur, ikke museklikk) */
body a:focus-visible,
body button:focus-visible,
body summary:focus-visible,
body .kb-button:focus-visible {
outline: 1px dashed currentColor;
outline-offset: 4px;
}
/* Knapper i innholdet (Kadence-knapper, skjemaknapper, «Se flere»): 1 px stiplet ramme ved tastaturfokus.
Hvit tekst på brun knapp gjør currentColor usynlig utenfor knappen – rammen bruker merkevarebrun, som syns
både på hvit, krem og toppbildet. Spesifisiteten må slå Kadence/Formidable sine egne :focus-regler. */
body .wp-block-kadence-advancedbtn .kb-button:focus-visible,
body .frm_forms .frm_button_submit:focus-visible,
body .jet-listing-grid__loader + * :focus-visible,
body .entry-content .wp-element-button:focus-visible {
outline: 1px dashed var(--ast-global-color-0) !important;
outline-offset: 4px !important;
box-shadow: none !important;
}
/* På brun tilbudsseksjon og blågrå footer: hvit ramme */
body .osk-tilbud .frm_button_submit:focus-visible,
body .osk-footer .kb-button:focus-visible { outline-color: #fff !important; }
/* Klikkbare kort (Kadence «section link overlay»: usynlig lenke over hele kortet, f.eks. referanse- og
artikkelkort). Lenken får avrundede hjørner så fokusrammen blir avrundet som i headeren – kortet selv
er uendret fordi lenken er gjennomsiktig. */
.kb-section-link-overlay { border-radius: 4px; }
body .kb-section-link-overlay:focus-visible {
outline: 1px dashed var(--ast-global-color-0) !important;
outline-offset: 8px;
border-radius: 8px;
}
/* Mobil: referansekortene går kant i kant – rammen legges innenfor kortet så den ikke klippes av skjermkanten */
@media (max-width: 767px) {
body .cb-osk-ref .kb-section-link-overlay:focus-visible { outline-offset: -8px; outline-color: #fff !important; }
}
/* ---------------------------------------------------------------------
Header (Site Builder «Topptekst (Figma)», 27906)
Figma: 1440 bred, padding 30, logo 144×60, menypunkt Inter 700 18/24,
60 px mellom punktene, søk 42 px etter menyen. Under 1300 px: søk + språk + hamburger (engelske menypunkter er lengre).
--------------------------------------------------------------------- */
.osh-header { position: relative; z-index: 1000; }
.osh-header .kt-row-column-wrap { align-items: center; }
.osh-header > .kt-row-column-wrap > .wp-block-kadence-column:last-child > .kt-inside-inner-col { flex-wrap: nowrap; align-items: center; }
.osh-header .logo { margin: 0; }
.osh-header .logo img { width: 260px; height: auto; display: block; }
.osh-header .logo-hvit { display: none; }
/* Desktopmeny */
.osh-header :is(.wp-block-kadence-navigation28005-cpt-id, .wp-block-kadence-navigation28165-cpt-id, .wp-block-kadence-navigation28180-cpt-id) .menu-container > ul.kb-navigation { gap: 0 clamp(24px, calc(12vw - 120px), 60px); flex-wrap: nowrap; } /* engelske menypunkter er lengre – mellomrommet krymper på smalere skjermer */
.osh-header :is(.wp-block-kadence-navigation28005-cpt-id, .wp-block-kadence-navigation28165-cpt-id, .wp-block-kadence-navigation28180-cpt-id) .menu-container > ul > li.menu-item > .kb-link-wrap > a.kb-nav-link-content {
padding: 0;
font-family: 'Mulish', sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 24px;
color: #000;
white-space: nowrap;
}
.osh-header :is(.wp-block-kadence-navigation28005-cpt-id, .wp-block-kadence-navigation28165-cpt-id, .wp-block-kadence-navigation28180-cpt-id) .menu-container > ul > li.menu-item > .kb-link-wrap > a.kb-nav-link-content:hover,
.osh-header :is(.wp-block-kadence-navigation28005-cpt-id, .wp-block-kadence-navigation28165-cpt-id, .wp-block-kadence-navigation28180-cpt-id) .menu-container > ul > li.current-menu-item > .kb-link-wrap > a.kb-nav-link-content { color: var(--ast-global-color-0); }
/* Søk (kjerneblokka, kun knapp som utvider feltet) */
.osh-header .osh-search { margin: 0 0 0 42px; }
.osh-header .osh-search .wp-block-search__button.wp-element-button {
/* !important: Astra setter knappestil på søkeknappen med svært spesifikke regler */
background: transparent !important;
color: #000 !important;
border: 0 !important;
border-radius: 0 !important;
padding: 4px !important;
margin: 0;
}
.osh-header .osh-search .wp-block-search__button svg { width: 28px; height: 28px; fill: currentColor; }
.osh-header .osh-search .wp-block-search__input { border-radius: 200px; padding: 8px 16px; font-size: 16px; }
/* Hamburger (acf/acf-hamburger + snippet 6) */
.osh-header #hamburger-toggle { margin: 0 0 0 24px; }
.osh-header button.hamburger { margin-bottom: 0; }
.osh-header .hamburger span { background: #000; }
@media (min-width: 1300px) {
.osh-header #hamburger-toggle { display: none; }
}
@media (max-width: 1299px) {
.osh-header :is(.wp-block-kadence-navigation28005-cpt-id, .wp-block-kadence-navigation28165-cpt-id, .wp-block-kadence-navigation28180-cpt-id) { display: none; }
.osh-header .osh-search { margin-left: 0; }
}
/* Hvit variant: toppbilde «Bak meny» (snippet 12) uten lys gradient, og åpen mobilmeny */
body.toppbilde-2:not(.overlegg-2) .osh-header .logo-mork,
.osh-header:has(.hamburger.active) .logo-mork { display: none; }
body.toppbilde-2:not(.overlegg-2) .osh-header .logo-hvit,
.osh-header:has(.hamburger.active) .logo-hvit { display: block; }
body.toppbilde-2:not(.overlegg-2) .osh-header :is(.wp-block-kadence-navigation28005-cpt-id, .wp-block-kadence-navigation28165-cpt-id, .wp-block-kadence-navigation28180-cpt-id) .menu-container > ul > li.menu-item > .kb-link-wrap > a.kb-nav-link-content,
body.toppbilde-2:not(.overlegg-2) .osh-header .osh-search .wp-block-search__button.wp-element-button,
.osh-header:has(.hamburger.active) .osh-search .wp-block-search__button.wp-element-button { color: #fff !important; }
body.toppbilde-2:not(.overlegg-2) .osh-header .hamburger span,
.osh-header:has(.hamburger.active) .hamburger span { background: #fff; }
/* Mobilmeny: mørkt panel over hele skjermen (Figma «menu», 390 bred, punktene midtstilt, 21 px mellom).
#astra_megamenu.osh-mobilmeny: ID + klasse trengs for å slå den gamle megameny-CSS-en lenger opp i fila. */
#astra_megamenu.osh-mobilmeny {
display: none; /* åpnes med slideDown av snippet 6 */
position: fixed;
inset: 0;
width: 100% !important;
height: 100vh;
z-index: 999;
background: rgba(0, 0, 0, .9) !important;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border-radius: 0;
box-shadow: none;
overflow-y: auto;
}
#astra_megamenu.osh-mobilmeny > .kt-row-column-wrap { padding: 170px 20px 60px; }
#astra_megamenu.osh-mobilmeny .menu-container > ul.kb-navigation { gap: 21px; }
#astra_megamenu.osh-mobilmeny .menu-item { border: 0; }
#astra_megamenu.osh-mobilmeny a.kb-nav-link-content {
justify-content: center !important;
/* Figma: 85 px fra punkt til punkt. Lenken er like bred som teksten (fokusrammen ligger tett rundt ordet
som på desktop); 10 px padding gir 44 px trykkflate, 10 px marg fyller ut til samme avstand som før. */
width: fit-content;
margin: 10px auto;
padding: 10px 8px !important;
border: 0;
font-family: 'Mulish', sans-serif;
font-weight: 700;
font-size: 22px !important;
line-height: 24px;
color: #fff;
text-align: center;
}
#astra_megamenu.osh-mobilmeny a.kb-nav-link-content::after { content: none; }
#astra_megamenu.osh-mobilmeny a.kb-nav-link-content:hover,
#astra_megamenu.osh-mobilmeny a.kb-nav-link-content:focus-visible { color: var(--ast-global-color-0); }
/* Første punkt får fokus programmatisk når menyen åpnes (snippet 6) – det skal ikke farges */
#astra_megamenu.osh-mobilmeny a.kb-nav-link-content:focus:not(:focus-visible):not(:hover) { color: #fff; }
/* Søkefeltet åpnes som et bredt felt under headeren (ikke inne i menylinja).
Kjerneblokka fjerner klassen wp-block-search__searchfield-hidden når ikonet klikkes. */
.osh-header .osh-search,
.osh-header .osh-search .wp-block-search__inside-wrapper { position: static; width: auto !important; }
/* Feltet skal henge på hele header-raden: kolonnene mellom må være static */
.osh-header > .kt-row-column-wrap,
.osh-header > .kt-row-column-wrap > .wp-block-kadence-column:last-child,
.osh-header > .kt-row-column-wrap > .wp-block-kadence-column:last-child > .kt-inside-inner-col { position: static; }
.osh-header .osh-search .wp-block-search__input {
position: absolute;
top: 100%;
right: 40px;
width: min(720px, calc(100% - 80px));
height: 56px;
margin: 0;
padding: 0 24px;
border: 0;
border-radius: 200px;
background: #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
color: #000;
font-size: 18px;
z-index: 5;
}
.osh-header .osh-search.wp-block-search__searchfield-hidden .wp-block-search__input {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
@media (max-width: 767px) {
.osh-header .osh-search .wp-block-search__input { right: 20px; width: calc(100% - 40px); }
}
/* body har overflow-x: hidden fra temaet; da scroller nettleseren body sidelengs når søkefeltet får fokus.
clip skjuler overløp på samme måte, men kan ikke scrolles. */
body { overflow-x: clip; }
/* Tastaturfokus (Tab) i headeren: 1 px stiplet strek i elementets farge (svart, eller hvit over
toppbilde / i åpen mobilmeny). :focus-visible = bare ved tastatur, ikke ved museklikk. */
.osh-header button.hamburger:focus-visible,
.osh-header .osh-search .wp-block-search__button:focus-visible,
.osh-header .logo a:focus-visible,
.osh-header a.kb-nav-link-content:focus-visible,
#astra_megamenu.osh-mobilmeny a.kb-nav-link-content:focus-visible,
.osk-sprak :is(summary, a):focus-visible {
outline: 1px dashed currentColor !important;
outline-offset: 6px;
border-radius: 4px;
}
.osh-header button.hamburger { color: #000; }
body.toppbilde-2:not(.overlegg-2) .osh-header button.hamburger,
.osh-header button.hamburger.active,
.osh-header:has(.hamburger.active) .logo a { color: #fff; }
body.toppbilde-2:not(.overlegg-2) .osh-header .logo a { color: #fff; }
/* Fokus etter museklikk skal ikke gi markering eller Astras grå knappebakgrunn */
.osh-header button.hamburger:focus:not(:focus-visible) { outline: none; background: transparent; }
/* Første lenke i mobilmenyen får fokus når menyen åpnes (snippet 6) – vis bare markering ved Tab */
#astra_megamenu.osh-mobilmeny a.kb-nav-link-content:focus:not(:focus-visible) { outline: none; border: 0; }
#astra_megamenu.osh-mobilmeny a.kb-nav-link-content:focus-visible { outline-offset: 0; }
/* Søkeskjemaet (kjerneblokka) har overflow: hidden som klipper fokusrammen – feltet skjules uansett med visibility */
.osh-header .osh-search,
.osh-header .osh-search .wp-block-search__inside-wrapper { overflow: visible !important; }
/* Logolenken er inline rundt et blokkbilde – gjør den til blokk så rammen følger logoen */
.osh-header .logo a { display: block; width: fit-content; }
.osh-header .logo a:focus-visible { outline-width: 1px !important; outline-offset: 6px !important; }
/* Avrundet fokusramme også på søkeikonet (knappen er nullstilt til border-radius 0 !important lenger opp) */
.osh-header .osh-search .wp-block-search__button.wp-element-button:focus-visible { border-radius: 4px !important; }
/* Språkvelger ([osk_sprak], snippet 20). Desktop: «NO ▾» ved søk som åpner en liten liste.
Mobilmeny: rad øverst med NO SV EN. */
.osk-sprak ul { list-style: none; margin: 0; padding: 0; }
.osk-sprak a { text-decoration: none; }
.osh-header .osk-sprak--nedtrekk { position: relative; margin: 0 0 0 24px; font: 700 16px/24px 'Mulish', sans-serif; color: #000; }
.osk-sprak--nedtrekk summary { display: flex; align-items: center; gap: 6px; padding: 4px; cursor: pointer; list-style: none; border-radius: 4px; }
.osk-sprak--nedtrekk summary::-webkit-details-marker { display: none; }
.osk-sprak--nedtrekk summary::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
.osk-sprak--nedtrekk[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.osk-sprak--nedtrekk ul {
position: absolute; top: calc(100% + 10px); right: 0; z-index: 10;
min-width: 150px; padding: 8px 0;
background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.osk-sprak--nedtrekk a { display: flex; gap: 10px; padding: 8px 18px; color: #000; font-weight: 400; }
.osk-sprak--nedtrekk a .osk-sprak-kort { width: 24px; font-weight: 700; }
.osk-sprak--nedtrekk a:hover, .osk-sprak--nedtrekk a.aktiv { color: var(--ast-global-color-0); }
.osk-sprak--nedtrekk a:focus-visible { outline-offset: -4px; }
body.toppbilde-2:not(.overlegg-2) .osh-header .osk-sprak--nedtrekk { color: #fff; }
.osh-header:has(.hamburger.active) .osk-sprak--nedtrekk { display: none; } /* mobilmenyen har sin egen rad */
@media (max-width: 1299px) {
.osh-header .osk-sprak--nedtrekk { margin-left: 12px; }
}
/* Mobil: ikke plass til både søk, språk og hamburger – språkvalget ligger øverst i mobilmenyen */
@media (max-width: 767px) {
.osh-header .osk-sprak--nedtrekk { display: none; }
}
#astra_megamenu.osh-mobilmeny .osk-sprak--liste { margin: 40px 0 0; } /* under menypunktene */
.osk-sprak--liste ul { display: flex; justify-content: center; gap: 8px; }
.osk-sprak--liste .osk-sprak-navn { display: none; }
.osk-sprak--liste a { display: block; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 200px; color: #fff; font: 700 16px/20px 'Mulish', sans-serif; }
.osk-sprak--liste a.aktiv { background: #fff; border-color: #fff; color: #000; }
.osk-sprak--liste a:hover { border-color: #fff; }
/* WPML sin egen språkvelger nederst på sida erstattes av [osk_sprak] i headeren.
(Kan også slås av i WPML → Språk → «Footer language switcher».) */
.wpml-ls-statics-footer { display: none !important; }
/* Søkeikon og hamburger som i Figma (header-komponenten, «Frame 77»):
søk = Material «search» i 38×38, hamburger = 64×64-flate med tre streker 38×4 (10 px fra topp til topp,
rette ender), 16 px mellom søkeboksen og hamburgerboksen. Krysset er samme animasjon som før (style.css lenger opp). */
.osh-header .osh-search .wp-block-search__button.wp-element-button { padding: 0 !important; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; }
.osh-header .osh-search .wp-block-search__button svg { display: none; }
.osh-header .osh-search .wp-block-search__button::before {
content: "";
width: 38px;
height: 38px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/%3E%3C/svg%3E") center / 38px 38px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/%3E%3C/svg%3E") center / 38px 38px no-repeat;
}
.osh-header #hamburger-toggle { margin-left: 16px; margin-right: 0; } /* ID-selektor: den eldre «margin: 0 0 0 24px» bruker også ID */
@media (max-width: 767px) {
.osh-header #hamburger-toggle { margin-right: -10px; } /* Figma mobil: strekene slutter 23 px fra kanten */
}
.osh-header button.hamburger {
position: relative;
box-sizing: content-box;
width: 38px;
height: 24px;
padding: 20px 13px; /* 64×64 trykkflate som Figma-boksen */
}
.osh-header button.hamburger span { left: 13px; width: 38px; border-radius: 0; }
.osh-header button.hamburger span:nth-child(1) { top: 20px; }
.osh-header button.hamburger span:nth-child(2) { top: 30px; }
.osh-header button.hamburger span:nth-child(3) { top: 40px; }
.osh-header button.hamburger.active span:nth-child(1),
.osh-header button.hamburger.active span:nth-child(3) { top: 30px; }
/* Kadence gir .wp-block-kadence-image:not(:last-child) 1em bunnmarg – den mørke logoen (før den hvite) fikk 17 px
og satt høyere enn søk/hamburger på sider med hvit header. Astra legger også en svak skygge på knapper. */
.osh-header figure.logo.wp-block-kadence-image { margin: 0 !important; }
.osh-header .osh-search .wp-block-search__button.wp-element-button { box-shadow: none !important; }
/* Optisk sentrering av elementene til høyre for logoen.
Elementene til høyre løftes 6 px så de står midt på logoteksten. Hvert element flyttes for seg
(ikke kolonnen), ellers ville søkefeltet som henger under headeren fått feil plassering. */
@media (max-width: 1299px) { /* Figma desktop har menyen sentrert på hele logoboksen – løftet gjelder nettbrett/mobil */
.osh-header .osh-search .wp-block-search__button.wp-element-button,
.osh-header .osk-sprak--nedtrekk,
.osh-header #hamburger-toggle { position: relative; top: -6px; }
}
/* Desktop (Figma «Meny»): søkeikonet er 26×26, ikke 38 som på mobil/nettbrett */
@media (min-width: 1300px) {
.osh-header .osh-search .wp-block-search__button.wp-element-button { width: 26px; height: 26px; }
.osh-header .osh-search .wp-block-search__button::before { width: 26px; height: 26px; -webkit-mask-size: 26px 26px; mask-size: 26px 26px; }
}
/* Den hvite logoen (SVG lagret i 128×54) ble vist 128 px bred mot 144 for den mørke – logoen «hoppet» når
mobilmenyen åpnes og var for liten på forsiden. Begge låses til Figmas 144 px. */
.osh-header figure.logo.wp-block-kadence-image { width: 260px; max-width: 260px !important; }
.osh-header figure.logo.wp-block-kadence-image img { width: 260px !important; max-width: none; height: auto; }
/* Toppmeny (desktop): enkel animert understrek på hover/tastaturfokus – en gradient som vokser fra venstre
(ikke ::after, som kolliderer med Kadence sine pseudo-elementer). Lenken får 6 px padding nederst til streken
og like mye negativ marg, så menyen står på samme sted. Fargen følger teksten (brun på hover, hvit/svart ellers). */
.osh-header :is(.wp-block-kadence-navigation28005-cpt-id, .wp-block-kadence-navigation28165-cpt-id, .wp-block-kadence-navigation28180-cpt-id) .menu-container > ul > li.menu-item > .kb-link-wrap > a.kb-nav-link-content {
padding-bottom: 6px;
margin-bottom: -6px;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 0 2px;
transition: background-size .35s cubic-bezier(.22, .61, .36, 1), color .2s;
}
.osh-header :is(.wp-block-kadence-navigation28005-cpt-id, .wp-block-kadence-navigation28165-cpt-id, .wp-block-kadence-navigation28180-cpt-id) .menu-container > ul > li.menu-item > .kb-link-wrap > a.kb-nav-link-content:hover,
.osh-header :is(.wp-block-kadence-navigation28005-cpt-id, .wp-block-kadence-navigation28165-cpt-id, .wp-block-kadence-navigation28180-cpt-id) .menu-container > ul > li.menu-item > .kb-link-wrap > a.kb-nav-link-content:focus-visible { background-size: 100% 2px; }
@media (prefers-reduced-motion: reduce) {
.osh-header a.kb-nav-link-content { transition: none !important; }
}
/* Astra/Kadence legger vanlig tekst-understrek på lenker ved hover – fjernes så det ikke blir dobbel strek */
.osh-header a.kb-nav-link-content,
.osh-header a.kb-nav-link-content:hover,
.osh-header a.kb-nav-link-content:focus { text-decoration: none !important; }
/* Understreken følger tekstfargen (hvit over toppbildet, svart på hvit header). Teksten skifter ikke farge ved
hover – bare streken markerer. Aktiv side beholder brun farge. */
.osh-header :is(.wp-block-kadence-navigation28005-cpt-id, .wp-block-kadence-navigation28165-cpt-id, .wp-block-kadence-navigation28180-cpt-id) .menu-container > ul > li.menu-item:not(.current-menu-item) > .kb-link-wrap > a.kb-nav-link-content:hover { color: #000; }
/* Streken sveiper inn fra venstre og ut mot høyre: forankret til høyre i hvile, til venstre ved hover */
.osh-header :is(.wp-block-kadence-navigation28005-cpt-id, .wp-block-kadence-navigation28165-cpt-id, .wp-block-kadence-navigation28180-cpt-id) .menu-container > ul > li.menu-item > .kb-link-wrap > a.kb-nav-link-content { background-position: right bottom; }
.osh-header :is(.wp-block-kadence-navigation28005-cpt-id, .wp-block-kadence-navigation28165-cpt-id, .wp-block-kadence-navigation28180-cpt-id) .menu-container > ul > li.menu-item > .kb-link-wrap > a.kb-nav-link-content:hover,
.osh-header :is(.wp-block-kadence-navigation28005-cpt-id, .wp-block-kadence-navigation28165-cpt-id, .wp-block-kadence-navigation28180-cpt-id) .menu-container > ul > li.menu-item > .kb-link-wrap > a.kb-nav-link-content:focus-visible { background-position: left bottom; }
/* ---------------------------------------------------------------------
Toppseksjon på forsiden (Kadence-rad med anker «Toppseksjon», klasse osk-topp)
Figma STARTSIDE: bilde 1440×1024, mørk toning øverst («Rectangle 6», 246 px),
H1 Cormorant 90/92 sentrert i hvitt (maks 1075), brødtekst 18/24 (maks 931),
30 px under H1, 48 px ned til to brune knapper med 20 px mellom.
Bilde, toning og tekst redigeres i Gutenberg; snippet 12 legger raden bak menyen.
--------------------------------------------------------------------- */
.osk-topp { position: relative; }
.osk-topp::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 246px;
z-index: 1;
background: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
pointer-events: none;
}
.osk-topp > .kt-row-column-wrap { position: relative; z-index: 2; }
.osk-topp .osk-topp-tittel { max-width: 1075px; margin: 0 auto 30px; }
.osk-topp .osk-topp-ingress { max-width: 931px; margin: 0 auto; font-size: 18px; line-height: 24px; font-family: 'Mulish', sans-serif; font-weight: 400; }
.osk-topp .osk-topp-knapper { margin-top: 48px; gap: 20px; }
/* Brun knapp (Figma «Knapp – brun»): #A3794C, hover #705131, Inter 700 16/17, pille, 15/20 */
body .wp-block-kadence-advancedbtn .kb-button.osk-knapp-brun {
background: var(--ast-global-color-0);
border: 0;
color: #fff;
border-radius: 200px;
padding: 15px 20px;
font-family: 'Mulish', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 17px;
}
body .wp-block-kadence-advancedbtn .kb-button.osk-knapp-brun:hover,
body .wp-block-kadence-advancedbtn .kb-button.osk-knapp-brun:focus { background: #705131; color: #fff; }
/* Designer: teksten i nedre del av toppbildet. Raden er min. 100vh og vokser med innholdet,
så teksten kan aldri klippes – den legges mot bunnen med en bunnmarg som følger skjermhøyden. */
.osk-topp > .kt-row-column-wrap {
align-items: flex-end !important;
align-content: flex-end !important;
padding-top: max(150px, 22vh) !important;
padding-bottom: clamp(48px, 11vh, 140px) !important;
}
.osk-topp .kadence-column27488_db1d09-3b > .kt-inside-inner-col { justify-content: flex-end; }
@media (max-width: 767px) {
.osk-topp > .kt-row-column-wrap { padding-top: 140px !important; padding-bottom: 48px !important; }
}
/* Høyden følger den synlige skjermen: svh tar hensyn til mobilens adresselinje,
og innlogget trekkes adminlinja fra så knappene ikke skyves under kanten. */
.osk-topp > .kt-row-column-wrap { min-height: 100vh !important; min-height: 100svh !important; }
.admin-bar .osk-topp > .kt-row-column-wrap { min-height: calc(100svh - var(--wp-admin--admin-bar--height, 32px)) !important; }
@media (max-width: 767px) {
.osk-topp > .kt-row-column-wrap { padding-bottom: 72px !important; }
}
/* iPad og mobil (Figma «iPad Pro 11"» og «iPhone 13 & 14»): bildet står alene øverst (834×520 / 390×309),
overskrift, tekst og knapper ligger under på hvit bakgrunn med svart tekst.
Radens bakgrunnsbilde beholdes, men skaleres til bildehøyden og legges øverst; tekstkolonnen får hvit
bakgrunn og dekker resten (også Kadence-toningen). Bildet er 2560×1706 (1,5:1). */
@media (max-width: 1024px) {
.osk-topp {
--bildeh: 62.35vw; /* 520 / 834 */
background-size: max(100%, calc(var(--bildeh) * 1.5)) auto !important;
background-position: 60% 0 !important;
background-color: #fff !important;
display: flow-root; /* hindrer at tekstkolonnens toppmarg kollapser ut av raden */
}
.osk-topp > .kt-row-column-wrap,
.admin-bar .osk-topp > .kt-row-column-wrap {
min-height: 0 !important;
margin-top: var(--bildeh);
padding: 55px 44px 40px !important;
background: #fff;
}
.osk-topp .osk-topp-tittel { font-size: 60px !important; line-height: 62px !important; max-width: 725px; color: #000 !important; }
.osk-topp .osk-topp-ingress { max-width: 746px; color: #000 !important; }
}
@media (max-width: 767px) {
.osk-topp { --bildeh: 79.2vw; } /* 309 / 390 */
.osk-topp > .kt-row-column-wrap,
.admin-bar .osk-topp > .kt-row-column-wrap { padding: 39px 20px 30px !important; }
.osk-topp .osk-topp-tittel { font-size: 44px !important; line-height: 46px !important; margin-bottom: 22px; }
.osk-topp .osk-topp-knapper { margin-top: 42px; }
}
/* Figma iPad/mobil: utsnitt inn mot hendene og toning på bildet – gjennomsiktig til 37,5 % av bildehøyden,
40 % svart fra 63,5 % og ned. Kadence-overlegget (flat 25 %) gjøres om til denne toningen og kortes ned til bildet. */
@media (max-width: 1024px) {
/* Bildet (Figmas original, media 28236) og toningen settes i Kadence-raden (nettbrett/mobil-bakgrunn og -overlegg).
CSS styrer bare utsnittet og at overlegget slutter der bildet slutter (raden er bilde + tekst). */
.osk-topp {
background-size: 159.79% auto !important; /* Figma iPad: bredde 159,79 %, venstre −46,53 % */
background-position: 77.8% 0 !important;
}
.osk-topp > .kt-row-layout-overlay {
bottom: auto !important;
height: var(--bildeh) !important;
}
}
@media (max-width: 767px) {
.osk-topp { background-size: 150.4% auto !important; background-position: 99.5% 0 !important; } /* Figma iPhone: 586,7 px bredt, venstre −195,7 px */
}
/* ---------------------------------------------------------------------
Forsiden under toppen (Figma STARTSIDE)
Referanser: 2×2 kort 660×385, 40 px mellom, etikett nede til venstre.
Artikler: kremfarget seksjon, 3 kort (bilde 427×252, 30 px, H3 24/32, 12 px, ingress, «Les mer»).
Kortene er JetEngine-listingene 27912 (referanse) og 27913 (artikkel).
--------------------------------------------------------------------- */
.osk-referanser .kt-inside-inner-col > .osk-seksjon-knapp { margin-top: 48px; }
.osk-artikler .kt-inside-inner-col > .osk-seksjon-knapp { margin-top: 30px; }
/* Referansekort */
.osk-refkort > .kt-inside-inner-col { position: relative; }
/* Bildet zoomes inne i sin egen ramme (figure = forelder med overflow: hidden),
så etiketten og lenkeflaten over ligger fast og ikke dekkes. */
.osk-refkort .osk-refkort-bilde,
.osk-artikkelkort .osk-artikkelkort-bilde {
position: relative;
z-index: 0;
overflow: hidden;
isolation: isolate;
}
/* figure foran: Kadence setter .wp-block-kadence-image:not(:last-child) { margin-bottom: 1em } og lastes etter style.css */
.osk-refkort figure.osk-refkort-bilde { margin: 0; aspect-ratio: 660 / 385; }
.osk-refkort .osk-refkort-bilde img,
.osk-artikkelkort .osk-artikkelkort-bilde img { transition: transform .4s ease; }
.osk-refkort .osk-refkort-bilde img { width: 100%; height: 100%; object-fit: cover; display: block; }
.osk-refkort:hover .osk-refkort-bilde img,
.osk-artikkelkort:hover .osk-artikkelkort-bilde img { transform: scale(1.04); }
.osk-refkort .osk-refkort-tag {
position: absolute;
left: 0;
bottom: 0;
z-index: 3;
margin: 0;
padding: 24px 27px 23px 22px;
background: var(--ast-global-color-7);
color: #000;
font-family: 'Mulish', sans-serif;
font-size: 18px;
line-height: 24px;
font-weight: 400;
}
/* Artikkelkort */
.osk-artikkelkort figure.osk-artikkelkort-bilde { margin: 0 0 30px; aspect-ratio: 427 / 252; }
.osk-artikkelkort .osk-artikkelkort-bilde img { width: 100%; height: 100%; object-fit: cover; display: block; }
.osk-artikkelkort .osk-artikkelkort-tittel { margin: 0 0 12px; font-family: 'Mulish', sans-serif; font-size: 24px; line-height: 32px; font-weight: 700; color: #000; }
.osk-artikkelkort .ingress,
.osk-artikkelkort .ingress p { margin: 0; font-size: 18px; line-height: 24px; color: #000; }
.osk-artikkelkort .osk-lesmer { margin: 19px 0 0; font-size: 18px; line-height: 24px; color: #000; }
.osk-artikkelkort:hover .osk-lesmer { text-decoration: underline; text-underline-offset: 4px; }
/* Mobil (Figma iPhone 390): referansekortene går kant i kant, bilde 390×288, 21 px mellom kortene.
Grid-wrapperen har margin 0 -20px mot radens 20 px sidepadding; kortene mister sin egen 20 px padding. */
@media (max-width: 767px) {
.cb-osk-ref .jet-listing-grid__items > .jet-listing-grid__item { padding: 0 0 21px !important; }
.cb-osk-ref .jet-listing-grid__items > .jet-listing-grid__item:last-child { padding-bottom: 0 !important; }
.osk-refkort figure.osk-refkort-bilde { aspect-ratio: 390 / 288; }
}
/* Seksjonstitler «Referanser» / «Artikler» – bare i iPad-skissen (Cormorant 700 44 px, sentrert, 92 px tekstboks).
Desktop- og mobilskissene har ingen titler, så de skjules der. */
.osk-seksjon-tittel { display: none; }
@media (min-width: 768px) and (max-width: 1024px) {
.osk-seksjon-tittel {
display: block;
margin: 0 0 14px;
font-family: 'yorkten-slab-normal', serif;
font-weight: 700;
font-size: 44px;
line-height: 92px;
color: #000;
text-align: center;
}
.osk-referanser > .kt-row-column-wrap { padding-top: 0 !important; }
}
/* ---------------------------------------------------------------------
«Be om tilbud» (Site Builder 30 «Få tilbud», anker #tilbud, Formidable-skjema 2)
Figma «Kontaktskjema» 1440×842: steintekstur med brun toning, H2 60/62 hvit,
skjema 788 bredt, felt 46 høye uten ramme, 24 px mellom, Melding 148 høy,
svart pilleknapp. Etikettene skjules visuelt – Figma viser kun plassholdertekst.
--------------------------------------------------------------------- */
.osk-tilbud .osk-tilbud-tittel { margin: 0 0 63px; }
.osk-tilbud .frm_forms .frm_form_fields > fieldset { border: 0; padding: 0; margin: 0; }
.osk-tilbud .frm_forms .frm_fields_container { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.osk-tilbud .frm_forms .frm_form_field { grid-column: 1 / -1; margin: 0; padding: 0; }
.osk-tilbud .frm_forms .frm_form_field.frm_third,
.osk-tilbud .frm_forms .frm_form_field.frm_two_thirds { grid-column: auto; } /* Postnummer + Poststed */
.osk-tilbud .frm_forms .frm_primary_label,
.osk-tilbud .frm_forms .frm_required {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.osk-tilbud .frm_forms input[type="text"],
.osk-tilbud .frm_forms input[type="email"],
.osk-tilbud .frm_forms input[type="tel"],
.osk-tilbud .frm_forms input[type="number"],
.osk-tilbud .frm_forms textarea {
width: 100%;
height: 46px;
padding: 11px 16px;
border: 0;
border-radius: 0;
background: #fff;
box-shadow: none;
color: #000;
font-family: 'Mulish', sans-serif;
font-size: 18px;
line-height: 24px;
}
.osk-tilbud .frm_forms textarea { height: 148px; resize: vertical; }
.osk-tilbud .frm_forms ::placeholder { color: #000; opacity: 1; font-size: 18px; font-family: 'Mulish', sans-serif; }
.osk-tilbud .frm_forms .frm_error,
.osk-tilbud .frm_forms .frm_description { color: #fff; }
.osk-tilbud .frm_forms .frm_submit { grid-column: 1 / -1; margin: 0; padding: 0; }
.osk-tilbud .frm_forms .frm_submit .frm_button_submit {
margin: 0;
padding: 15px 20px;
border: 0;
border-radius: 200px;
background: #000;
color: #fff;
font-family: 'Mulish', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 17px;
box-shadow: none;
}
.osk-tilbud .frm_forms .frm_submit .frm_button_submit:hover,
.osk-tilbud .frm_forms .frm_submit .frm_button_submit:focus { background: var(--ast-global-color-8); }
@media (max-width: 600px) {
.osk-tilbud .frm_forms .frm_fields_container { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------------------
Footer (Site Builder «Bunntekst», 27462)
Figma: #7487A0, 1440×230, padding 34/37/76/40, hvit logo 144, kontakt og lenker
Inter 18/24 hvitt med 8 px mellom linjene, lenkene høyrestilt.
--------------------------------------------------------------------- */
.osk-footer p,
.osk-footer-kreditt p { margin: 0; color: #fff; font-size: 18px; line-height: 24px; }
.osk-footer .kt-inside-inner-col > p + p { margin-top: 8px; }
.osk-footer a,
.osk-footer-kreditt a { color: #fff; text-decoration: none; }
.osk-footer a:hover,
.osk-footer a:focus,
.osk-footer-kreditt a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.osk-footer .osk-footer-logo { margin: 0; }
.osk-footer .osk-footer-logo img { width: 200px; height: auto; display: block; }
.osk-footer .osk-footer-lenker { text-align: right; }
.osk-footer-kreditt p { font-size: 13px; line-height: 18px; opacity: .75; }
@media (max-width: 1024px) {
.osk-footer .kt-row-column-wrap { row-gap: 28px; }
.osk-footer .osk-footer-lenker { text-align: left; }
}
/* ---------------------------------------------------------------------
Innleggsmaler (Site Builder «Referanse (Figma)» 27919 m.fl.)
Figma REFERANSER (innlegg): innhold 1128 bredt (x 156), H1 90/92, fakta 16/20 med fete etiketter,
hovedbilde i full bredde (1440×960), tekst maks 760, galleri i to kolonner med 40 px mellom.
--------------------------------------------------------------------- */
.osk-innlegg-topp .osk-innlegg-tittel { margin: 0 0 43px; }
.osk-innlegg-innhold { max-width: 1168px; margin: 0 auto; padding: 0 20px 120px; }
.osk-innlegg-innhold.entry-content > :where(:not(.alignfull):not(.wp-block-kadence-advancedgallery)) {
max-width: 760px;
margin-left: 0;
margin-right: 0;
}
.osk-innlegg-innhold > .alignfull,
.osk-innlegg-innhold > .wp-block-kadence-advancedgallery { max-width: none; }
.osk-innlegg-innhold.entry-content > .alignfull.alignfull { /* slår Astras .ast-separate-container .entry-content > .alignfull */
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.osk-referanse-innhold.entry-content > ul.wp-block-list:first-child { list-style: none; margin: 0 0 80px; padding: 0; font-size: 16px; line-height: 20px; }
.osk-innlegg-innhold figure.osk-hovedbilde { margin: 0 0 90px; }
.osk-innlegg-innhold figure.osk-hovedbilde img { width: 100%; max-height: 960px; object-fit: cover; display: block; }
.osk-innlegg-innhold h3 { margin: 0; }
.osk-innlegg-innhold p { margin: 0 0 24px; }
.osk-innlegg-innhold > .wp-block-kadence-advancedgallery { margin-top: 70px; }
@media (max-width: 767px) {
.osk-innlegg-innhold { padding-bottom: 60px; }
.osk-referanse-innhold.entry-content > ul.wp-block-list:first-child { margin-bottom: 40px; }
.osk-innlegg-innhold figure.osk-hovedbilde { margin-bottom: 40px; }
}
/* Arkivmaler (Referanser-arkiv 27934 m.fl.): tittel + kategoribeskrivelse som ingress (22/30, maks 777) */
.osk-arkiv-ingress,
.osk-arkiv-ingress p { max-width: 777px; margin: 0; font-size: 22px; line-height: 30px; }
@media (max-width: 767px) {
.osk-arkiv-ingress,
.osk-arkiv-ingress p { font-size: 18px; line-height: 26px; }
}
/* Artikkel (27935): H1, ingress (Utdrag-blokka), bilde 1124×664 i innholdsbredden, så innholdet.
Figma: 54 px fra ingress til bilde, 84 px fra bilde til brødtekst. */
.osk-artikkel-topp .osk-innlegg-tittel { margin-bottom: 30px; }
.osk-artikkel-topp .ingress,
.osk-produkt-topp .ingress { max-width: 777px; margin-bottom: 54px; }
.osk-artikkel-topp .ingress p,
.osk-produkt-topp .ingress p { margin: 0; }
.osk-artikkel-topp figure.osk-artikkel-bilde { margin: 0 0 84px; aspect-ratio: 1124 / 664; overflow: hidden; }
.osk-artikkel-topp figure.osk-artikkel-bilde img { width: 100%; height: 100%; object-fit: cover; display: block; }
.osk-artikkel-innhold.entry-content > .wp-block-video,
.osk-artikkel-innhold.entry-content > .wp-block-embed { max-width: 774px; margin: 60px 0; }
@media (max-width: 767px) {
.osk-artikkel-topp figure.osk-artikkel-bilde { margin-bottom: 40px; }
}
/* Uten fremhevet bilde viser Kadence «no-image-found.jpg» – skjul hele bildet da */
figure.wp-block-kadence-image:has(img[src*="no-image-found"]) { display: none; }
/* Nettbrett: Astra-containeren gir innholdet 30 px; tittelraden (Kadence) får samme, så venstrekanten stemmer */
@media (min-width: 768px) and (max-width: 1199px) {
.osk-innlegg-innhold { padding-left: 0; padding-right: 0; }
/* Raden er alignfull og bryter ut med negativ marg regnet uten rullefelt – la den følge containeren her */
.osk-innlegg-topp.alignfull { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: none !important; }
.osk-innlegg-topp > .kt-row-column-wrap { padding-left: 0 !important; padding-right: 0 !important; }
}
/* Mobil (< 768): Astra-containeren uten sidepadding – innholdet gir selv 20 px (flyttet fra gammel regel som gjaldt < 992) */
@media (max-width: 767.98px) {
.ast-container, .ast-container-fluid { padding-left: 0; padding-right: 0; }
}
/* Søk (Site Builder 1167): overskrift fra kortkoden [search_query_heading] som H1 + søkefelt i pilleform */
.osk-sok-topp h1 { margin: 0 0 40px; }
.osk-sok-topp .search-form { display: flex; gap: 12px; max-width: 560px; }
.osk-sok-topp .search-form label { flex: 1; margin: 0; }
.osk-sok-topp .search-form .search-field {
width: 100%;
height: 47px;
padding: 0 20px;
border: 1px solid #000;
border-radius: 200px;
font-size: 18px;
background: #fff;
}
.osk-sok-topp .search-form .search-submit {
height: 47px;
padding: 0 20px;
border: 0;
border-radius: 200px;
background: #000;
color: #fff;
font-weight: 700;
font-size: 16px;
}
.osk-sok-topp .search-form .search-submit:hover { background: var(--ast-global-color-8); }
.osk-sok-grid .osk-seksjon-knapp { margin-top: 48px; }
/* ---------------------------------------------------------------------
Produkter (Figma PRODUKTER): kort 1126×397 – tekstpanel 563 (padding 60) + bilde 563.
Brun/blå veksler via JetEngine listing injections: 27942 «Produktkort brun» (hovedlisting),
27943 «Produktkort blå» injiseres på hvert 2. element. Brun = rgba(163,121,76,.3), blå = rgba(116,135,160,.3).
--------------------------------------------------------------------- */
.osk-arkiv-undertittel { margin: 0 0 30px; font-size: 22px; line-height: 30px; }
.osk-arkiv-ingress--brod,
.osk-arkiv-ingress--brod p { font-size: 18px; line-height: 24px; }
.osk-produktkort > .kt-row-column-wrap { align-items: stretch; }
.osk-produktkort .osk-produktkort-panel > .kt-inside-inner-col {
height: 100%;
min-height: 397px;
padding: 60px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.osk-produktkort--brun .osk-produktkort-panel > .kt-inside-inner-col { background: rgba(163, 121, 76, .3); }
.osk-produktkort--blaa .osk-produktkort-panel > .kt-inside-inner-col { background: rgba(116, 135, 160, .3); }
.osk-produktkort .osk-produktkort-tittel { margin: 0 0 13px; }
.osk-produktkort .ingress,
.osk-produktkort .ingress p { margin: 0; font-size: 18px; line-height: 24px; color: #000; }
/* Pil (Figma «Arrow 1», 40 px) under teksten */
.osk-produktkort .osk-produktkort-panel > .kt-inside-inner-col::after {
content: "";
display: block;
width: 40px;
height: 16px;
margin-top: 42px;
background: no-repeat left center / 40px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41 16'%3E%3Cpath d='M0 8h39M32 1l7 7-7 7' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
transition: transform .3s ease;
}
.osk-produktkort:hover .osk-produktkort-panel > .kt-inside-inner-col::after { transform: translateX(8px); }
.osk-produktkort .osk-produktkort-bildekol > .kt-inside-inner-col { height: 100%; }
.osk-produktkort figure.osk-produktkort-bilde { position: relative; margin: 0; height: 100%; min-height: 397px; overflow: hidden; }
/* Bildet ligger absolutt, så det er tekstpanelet (min. 397) som bestemmer korthøyden, ikke bildets format */
.osk-produktkort figure.osk-produktkort-bilde img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.osk-produktkort:hover figure.osk-produktkort-bilde img { transform: scale(1.04); }
@media (max-width: 767px) {
.osk-produktkort .osk-produktkort-panel > .kt-inside-inner-col { min-height: 0; padding: 30px 24px; }
.osk-produktkort figure.osk-produktkort-bilde { min-height: 240px; height: 240px; }
/* Kolonnene stables: bildet øverst, teksten under */
.osk-produktkort .osk-produktkort-bildekol { order: -1; }
}
/* Malspesifikk regel (fra opprinnelig Site Builder-oppsett). */
.osk-produkt-innhold.entry-content > .osk-typer-grid,
.osk-produkt-innhold.entry-content > .osk-faktaboks-rad { max-width: none; }
.osk-produkt-innhold.entry-content > h2 { margin: 80px 0 24px; }
.osk-produkt-innhold.entry-content > .osk-typer-grid { margin: 60px 0 0; }
/* Typekort: H3 Inter 24/32, tekst 18/24, 42 px mellom, innholdet sentrert loddrett */
.osk-typekort .osk-produktkort-panel > .kt-inside-inner-col { justify-content: center; }
.osk-typekort .osk-typekort-tittel { margin: 0 0 42px; font-family: 'Mulish', sans-serif; font-size: 24px; line-height: 32px; font-weight: 700; }
/* Faktabokser (tidligere Kadence-rader med bakgrunnsbilde): Figma «Levetid og valg av materialer» */
.osk-faktaboks-rad { margin-top: 80px !important; }
.osk-faktaboks > .kt-inside-inner-col {
padding: 40px;
background: var(--ast-global-color-6);
color: #fff;
}
.osk-faktaboks h3,
.osk-faktaboks h5,
.osk-faktaboks p,
.osk-faktaboks a { color: #fff; }
.osk-faktaboks h3 { margin: 0 0 15px; font-family: 'Mulish', sans-serif; font-size: 24px; line-height: 32px; font-weight: 700; }
.osk-faktaboks p { margin: 0 0 24px; font-size: 18px; line-height: 24px; }
.osk-faktaboks p:last-child { margin-bottom: 0; }
.osk-faktaboks-rad .kt-row-column-wrap { align-items: flex-start; } /* Figma: boksene toppjustert med egen høyde */
/* Leggeanvisning: lenker understreket, uten «Last ned»-knapp; størrelsestabellen litt mindre */
.osk-leggeanvisning > .kt-inside-inner-col { padding-bottom: 60px; }
.osk-leggeanvisning .wp-block-file { margin: 0 0 15px; }
.osk-leggeanvisning .wp-block-file a:first-child { color: #fff; text-decoration: underline; font-size: 18px; line-height: 24px; }
.osk-leggeanvisning .wp-block-file__button { display: none; }
.osk-leggeanvisning h5 { margin: 30px 0 10px; font-size: 14px; letter-spacing: .08em; }
.osk-leggeanvisning p { font-size: 15px; line-height: 21px; margin-bottom: 12px; }
/* ---------------------------------------------------------------------
Sider med Site Builder «Side (Figma)»: Galleri og Produktinformasjon (Figma 100:2164 / 98:1607)
--------------------------------------------------------------------- */
.osk-side-innhold.entry-content > .wp-block-kadence-advancedgallery { margin-top: 0; }
.osk-side-topp .osk-innlegg-tittel { margin-bottom: 60px; }
/* Produktinformasjon: seksjoner med H3 24/32 og 60 px mellom.
Astra gir .wp-block-group 100/80 px padding, og blokkmellomrommet gir 24 px toppmarg på
alle unntatt første barn – begge nullstilles her så rutenettene står rett. */
.osk-side-innhold .wp-block-group { padding: 0; }
.osk-side-innhold .osk-overflater > *,
.osk-side-innhold .osk-dok-grid > *,
.osk-side-innhold .osk-overflate > *,
.osk-side-innhold .osk-dok-kort > * { margin-top: 0; margin-bottom: 0; }
.osk-side-innhold.entry-content > .osk-pinfo-bred { max-width: 1010px; }
.osk-side-innhold.entry-content > .osk-pinfo-seksjon { margin: 0 0 60px; }
.osk-pinfo-seksjon h3 { margin: 0 0 8px; }
.osk-pinfo-seksjon p { margin: 0; }
.osk-pinfo-seksjon figure { margin: 8px 0 0; }
.osk-pinfo-seksjon figcaption { margin-top: 16px; font-size: 18px; line-height: 24px; color: #000; text-align: left; }
.osk-kanter-bilde img { width: 543px; max-width: 100%; aspect-ratio: 543 / 350; object-fit: cover; }
.osk-overflater { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.osk-overflate figure { margin: 0; }
.osk-overflate figcaption { margin-top: 16px; }
.osk-overflate img { width: 100%; aspect-ratio: 783 / 834; object-fit: cover; display: block; }
/* Dokumentasjon: kremfargede kort 310 brede, 3 kolonner, 40/30 mellom, pil ned til høyre, hele kortet klikkbart */
.osk-dok-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 40px; margin-top: 16px; }
.osk-dok-kort,
.osk-side-innhold .osk-dok-kort { /* .osk-side-innhold .wp-block-group nullstiller ellers paddingen */
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 92px;
padding: 22px;
background: var(--ast-global-color-7);
}
.osk-dok-kort p { margin: 0; font-size: 18px; line-height: 24px; }
.osk-dok-kort a { color: #000; text-decoration: none !important; } /* Astra understreker lenker i innholdet */
.osk-dok-kort a::before { content: ""; position: absolute; inset: 0; }
.osk-dok-kort::after {
content: "";
flex: 0 0 16px;
height: 22px;
background: no-repeat center / 16px 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'%3E%3Cpath d='M8 0v20M1 13l7 7 7-7' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
transition: transform .3s ease;
}
.osk-dok-kort:hover::after { transform: translateY(4px); }
.osk-dok-kort:hover a strong { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
.osk-dok-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.osk-overflater { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.osk-dok-grid { grid-template-columns: 1fr; }
}
/* Malspesifikk regel (fra opprinnelig Site Builder-oppsett). */
.osk-side-innhold.entry-content > .osk-faktaboks-blokk {
max-width: 777px;
margin: 60px 0;
padding: 40px;
background: var(--ast-global-color-6);
color: #fff;
}
.osk-faktaboks-blokk > * { margin-top: 0; }
.osk-faktaboks-blokk h3 { margin: 0 0 15px; color: #fff; }
.osk-faktaboks-blokk .kt-svg-icon-list { margin: 0; padding-left: 20px; list-style: disc; }
.osk-faktaboks-blokk .kt-svg-icon-list-item-wrap { display: list-item; margin: 0; color: #fff; font-size: 16px; line-height: 22px; }
.osk-faktaboks-blokk .kt-svg-icon-list-single,
.osk-faktaboks-blokk .kb-svg-icon-wrap { display: none !important; } /* Kadence setter display per blokk */
.osk-faktaboks-blokk .kt-svg-icon-list-text { color: #fff; }
/* Kontakt oss (27784): kontaktlister uten ikoner, lenker understreket (Figma) */
.osk-side-innhold .wp-block-kadence-rowlayout h3 { margin: 40px 0 10px; }
/* Malspesifikk regel (fra opprinnelig Site Builder-oppsett). */
.osk-side-innhold.entry-content > .osk-kontakt-ordre { margin: 48px 0 0; }
.osk-side-innhold.entry-content > .osk-kontakt-adm-blokk { margin: 48px 0 0; max-width: 760px; }
.osk-kontakt-ordre h3,
.osk-kontakt-adm-blokk h3 { margin: 0 0 10px; }
.osk-kontakt-adm-blokk > .osk-kontakt-adm { margin-top: 0; }
.osk-kontakt-adm .kt-svg-icon-list-item-wrap:first-child .kt-svg-icon-list-text { font-weight: 700; }
.osk-side-innhold .wp-block-kadence-iconlist .kb-svg-icon-wrap,
.osk-side-innhold .wp-block-kadence-iconlist .kt-svg-icon-list-single { display: none !important; }
.osk-side-innhold .wp-block-kadence-iconlist .kt-svg-icon-list-item-wrap { margin: 0; font-size: 18px; line-height: 24px; }
.osk-side-innhold .wp-block-kadence-iconlist a { color: #000; text-decoration: underline; text-underline-offset: 3px; }
/* Rene tekstsider i Side-malen (Personvernerklæring, Leveringsbetingelser): luft over mellomtitler som står
direkte i innholdet (ikke i grupper/rader som har egne regler). */
.osk-side-innhold.entry-content > h3 { margin: 40px 0 10px; }
.osk-side-innhold.entry-content > h2.wp-block-heading { margin: 60px 0 16px; }
/* Malspesifikk regel (fra opprinnelig Site Builder-oppsett). */
.osc-compare img.osc-base[src*="Rustutvikling-tak"] { transform-origin: 0 0; transform: translate(-3.81%, -0.79%) scale(1.0505); }
.osc-compare .osc-clip img[src*="fasade-tak"] { transform-origin: 0 0; transform: translate(-1.5%, -1.5%) scale(1.03); }
/* =====================================================================
HEADER SOM DUKKER OPP VED SCROLL OPPOVER
---------------------------------------------------------------------
Slik virker det (skriptet ligger i Code Snippets: «Header ved scroll oppover»):
- Scroller man nedover, glir headeren bort (osk-hdr-fast + osk-hdr-skjult på body).
- Scroller man oppover lenger ned enn 1000 px (GRENSE i skriptet), glir den inn igjen
øverst som fast hvit header med mørk logo, svart meny og skygge (osk-hdr-fast).
- Begynner man å scrolle oppover nærmere toppen enn 1000 px, vises den ikke; den vanlige
headeren kommer til syne av seg selv.
- Er den hvite headeren synlig når man når toppen, tones den over til vanlig header på ca. 0,4 s
(osk-hdr-topp). Er den skjult, byttes det uten toning (osk-hdr-uten-anim slår av alle overganger).
- Mens mobilmenyen eller søkefeltet er åpent, rører skriptet ikke headeren.
- Logoen skaleres ned (til 110 px) og headeren er lavere mens den ligger fast; begge går tilbake til
full størrelse i overgangen på toppen.
Klassen osk-hdr-fast gjentas i selektorene for å slå forsidens hvite header-regler
(body.toppbilde-2 …), som er svært spesifikke. Kolonnene finnes etter plassering
(first-/last-child), ikke Kadence-ID-er, fordi ID-ene endres når headeren lagres i editoren.
===================================================================== */
body.osk-hdr-fast header.ast-custom-header {
position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000;
background-color: #fff !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
transform: none; /* ikke translateY(0): enhver transform gjør headeren til ramme for mobilmenyen (position: fixed) */
transition: transform .35s cubic-bezier(.22, .61, .36, 1), top .4s cubic-bezier(.22, .61, .36, 1), background-color .4s ease, box-shadow .4s ease;
}
body.admin-bar.osk-hdr-fast header.ast-custom-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 782px) { body.admin-bar.osk-hdr-fast header.ast-custom-header { top: 0; } }
body.osk-hdr-fast.osk-hdr-skjult header.ast-custom-header { transform: translateY(calc(-100% - 50px)); box-shadow: none; }
body.osk-hdr-uten-anim header.ast-custom-header,
body.osk-hdr-uten-anim header.ast-custom-header * { transition: none !important; }
/* Mørk variant når headeren ligger fast (klassen gjentas for å slå forsidens hvite regler, som er svært spesifikke). Begge logoene ligger oppå hverandre og tones med opacity. */
html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast .osh-header > .kt-row-column-wrap > .wp-block-kadence-column:first-child > .kt-inside-inner-col,
html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast .osh-header .logo-mork { position: relative; }
html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast .osh-header .logo-mork { display: block !important; opacity: 1; transition: opacity .4s ease; }
html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast .osh-header .logo-hvit { display: block !important; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity .4s ease; }
html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast .osh-header .menu-container > ul > li.menu-item:not(.current-menu-item) > .kb-link-wrap > a.kb-nav-link-content,
html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast .osh-header .osh-search .wp-block-search__button.wp-element-button,
html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast .osh-header .osk-sprak--nedtrekk,
html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast .osh-header button.hamburger:not(.active) { color: #000 !important; transition: color .4s ease, background-size .35s cubic-bezier(.22, .61, .36, 1); }
html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast .osh-header button.hamburger:not(.active) span { background: #000 !important; transition: background-color .4s ease, top .3s, transform .3s, opacity .3s; }
/* Overgang tilbake på toppen (forsiden med toppbilde bak menyen): hvit bakgrunn tones ut, lys variant tones inn */
body.osk-hdr-fast.osk-hdr-topp header.ast-custom-header { box-shadow: none; }
body.osk-hdr-fast.osk-hdr-topp.toppbilde-2:not(.overlegg-2) header.ast-custom-header { background-color: rgba(255, 255, 255, 0) !important; }
body.osk-hdr-fast.osk-hdr-topp.toppbilde-2:not(.overlegg-2) .osh-header .logo-mork { opacity: 0; }
body.osk-hdr-fast.osk-hdr-topp.toppbilde-2:not(.overlegg-2) .osh-header .logo-hvit { opacity: 1; }
body.osk-hdr-fast.osk-hdr-topp.toppbilde-2:not(.overlegg-2) .osh-header .menu-container > ul > li.menu-item:not(.current-menu-item) > .kb-link-wrap > a.kb-nav-link-content,
body.osk-hdr-fast.osk-hdr-topp.toppbilde-2:not(.overlegg-2) .osh-header .osh-search .wp-block-search__button.wp-element-button,
body.osk-hdr-fast.osk-hdr-topp.toppbilde-2:not(.overlegg-2) .osh-header .osk-sprak--nedtrekk,
body.osk-hdr-fast.osk-hdr-topp.toppbilde-2:not(.overlegg-2) .osh-header button.hamburger:not(.active) { color: #fff !important; }
body.osk-hdr-fast.osk-hdr-topp.toppbilde-2:not(.overlegg-2) .osh-header button.hamburger:not(.active) span { background: #fff !important; }
/* Sider der headeren står i flyten: holder av plassen så innholdet ikke hopper */
body.osk-hdr-fast:not(.toppbilde-2) #page { padding-top: var(--osk-hdr-h, 117px); }
@media (prefers-reduced-motion: reduce) {
body.osk-hdr-fast header.ast-custom-header, html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast .osh-header * { transition: none !important; }
}
/* Mindre logo i den faste headeren (110 av 144 px = scale .764); skaleres tilbake til full størrelse når den
tones over på toppen (osk-hdr-topp). transform – ikke width – så animasjonen går jevnt (ingen ny layout per bilde).
Begge logoene (mørk + hvit, som ligger oppå hverandre) skaleres fra venstre midt. */
html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast .osh-header figure.logo.wp-block-kadence-image {
transform: scale(.764);
transform-origin: left center;
transition: transform .4s cubic-bezier(.22, .61, .36, 1), opacity .4s ease;
will-change: transform;
}
html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast.osk-hdr-topp .osh-header figure.logo.wp-block-kadence-image { transform: none; }
/* Lavere fast header: headeren flyttes opp (top) så en del av luften over logoen havner utenfor skjermen,
og innholdet flyttes ned igjen (transform) så det står midt i den lavere headeren. Desktop: padding 30/20 →
synlig høyde ca. 84 px (fra 110). Mobil/nettbrett: 20/20 → ca. 88 px (fra 104). Tilbake til 0 på toppen.
top på et fast element og transform på innholdet gir ingen ny layout av headerinnholdet – jevn animasjon. */
html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast { --osk-hdr-opp: 26px; --osk-hdr-ned: 8px; }
@media (max-width: 1299px) {
html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast { --osk-hdr-opp: 16px; --osk-hdr-ned: 8px; }
}
html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast header.ast-custom-header { top: calc(0px - var(--osk-hdr-opp)); }
html body.admin-bar.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast header.ast-custom-header { top: calc(var(--wp-admin--admin-bar--height, 32px) - var(--osk-hdr-opp)); }
@media (max-width: 782px) {
html body.admin-bar.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast header.ast-custom-header { top: calc(0px - var(--osk-hdr-opp)); }
}
html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast .osh-header > .kt-row-column-wrap {
transform: translateY(var(--osk-hdr-ned));
transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
/* Overgangen på toppen: full høyde igjen */
html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast.osk-hdr-topp { --osk-hdr-opp: 0px; --osk-hdr-ned: 0px; }
/* Mobilmenyen åpnet mens den faste headeren vises: samme lyse variant som ellers når menyen er åpen –
gjennomsiktig header, hvit logo og hvite ikoner over det mørke menypanelet. */
html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast header.ast-custom-header:has(.hamburger.active) { background-color: transparent !important; box-shadow: none; }
html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast .osh-header:has(.hamburger.active) .logo-mork { opacity: 0; }
html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast .osh-header:has(.hamburger.active) .logo-hvit { opacity: 1; }
html body.osk-hdr-fast.osk-hdr-fast.osk-hdr-fast .osh-header:has(.hamburger.active) .osh-search .wp-block-search__button.wp-element-button { color: #fff !important; }
/* =====================================================================
FADE PÅ KORT (FORSIDEN OG ARKIVENE)
---------------------------------------------------------------------
Slik virker det (skriptet ligger i Code Snippets: «Fade på kort»):
- Skriptet legger klassen osk-fade-klar på html med en gang (i head), så kortene starter usynlige.
Uten JavaScript, eller med «Reduser bevegelse» slått på, settes ikke klassen, og kortene vises
som vanlig.
- Når et kort kommer inn i skjermbildet, får det klassen osk-fade-inn og tones inn (0,6 s), uten
bevegelse. Kort som kommer inn samtidig, får forsinkelse (--osk-fade-delay) 0, 150, 300 … ms;
et kort som kommer alene, kommer med en gang.
- Gjelder referanse- og artikkelkortene på forsiden og kortene i arkivene for referanser,
artikler og produkter – alle språk og alle skjermstørrelser.
===================================================================== */
html.osk-fade-klar :is(.cb-osk-ref, .cb-osk-refark, .osk-artikler, .cb-osk-artark, .cb-osk-prodark) .jet-listing-grid__item {
opacity: 0;
transition: opacity .6s ease;
transition-delay: var(--osk-fade-delay, 0ms);
}
html.osk-fade-klar :is(.cb-osk-ref, .cb-osk-refark, .osk-artikler, .cb-osk-artark, .cb-osk-prodark) .jet-listing-grid__item.osk-fade-inn { opacity: 1; }
/* === FIGMA-MALER SLUTT === */
/* =====================================================================
FS Energi – tilpasninger (oktober 2026)
===================================================================== */
/* Horisontal toppmeny på desktop, hamburger på nettbrett og mobil */
@media (min-width: 1025px) {
.osh-header #hamburger-toggle { display: none !important; }
.osh-header .wp-block-kadence-navigation28005-cpt-id { display: block !important; }
}
@media (max-width: 1024px) {
.osh-header .wp-block-kadence-navigation28005-cpt-id { display: none !important; }
.osh-header #hamburger-toggle { display: block !important; }
}
.osh-header #hamburger-toggle span { background: var(--ast-global-color-3); }
/* Header: hvit med tynn grønn linje under */
body:not(.toppbilde-2) .osh-header { background: var(--ast-global-color-5); border-bottom: 1px solid var(--ast-global-color-0); }
.osh-header .logo-hvit { display: none; }
/* Kontaktseksjon før footer */
.fs-kontakt h2 { margin-bottom: 12px; }
.fs-kontakt .fs-kontakt-navn { margin-top: 0; }
.fs-kontakt .kt-inside-inner-col p { margin-bottom: 6px; }
/* Footer: hvit med svart kredittlinje */
.osk-footer, .osk-footer a { color: var(--ast-global-color-3); }
.osk-footer-kreditt { font-size: 14px; }
/* Forside: toppseksjon */
.osk-topp .fs-topp-ingress { max-width: 760px; margin: 0 auto 30px; font-size: 19px; line-height: 1.55; font-weight: 400; }
.osk-topp h1 { margin-bottom: 20px; }
#Toppseksjon.osk-topp { position: relative; }
#Toppseksjon.osk-topp::before {
content: ""; display: block; position: absolute; inset: 0; width: auto; height: auto; z-index: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.50) 45%, rgba(0,0,0,.72) 100%) !important;
}
#Toppseksjon.osk-topp > .kt-row-column-wrap { position: relative; z-index: 2; }
/* Hvite pilleknapper på mørk/grønn bakgrunn */
.wp-block-kadence-advancedbtn .kb-button.fs-knapp-hvit {
background: transparent; color: #fff; border: 1px solid #fff; border-radius: 50px;
padding: 10px 30px; font: 500 18px/30px 'Mulish', sans-serif;
transition: background .2s, color .2s;
}
.wp-block-kadence-advancedbtn .kb-button.fs-knapp-hvit:hover,
.wp-block-kadence-advancedbtn .kb-button.fs-knapp-hvit:focus-visible { background: #fff; color: var(--ast-global-color-3); }
/* Grønn seksjon */
.fs-gronn p { font-size: 21px; line-height: 1.65; font-weight: 400; color: #fff; }
.fs-gronn h2 { margin-bottom: 24px; }
/* Aktuelt og referanser i sikk-sakk (JetEngine-listing 28010 + injeksjon 28011 på annenhver) */
.fs-sikksakk-kort .kt-row-column-wrap { align-items: center; }
.fs-kort-bilde, .fs-kort-bilde img { margin: 0; width: 100%; }
.fs-kort-bilde img { aspect-ratio: 1; object-fit: cover; display: block; }
.fs-kort-tittel { font-size: 32px; line-height: 1.3; margin: 0 0 16px; color: var(--ast-global-color-3); }
.fs-kort-ingress { font-size: 20px; line-height: 1.55; font-weight: 400; margin: 0; }
.fs-lesmer {
display: inline-block; margin: 32px 0 0; padding: 5px 20px; border: 1px solid var(--ast-global-color-3);
border-radius: 50px; background: #fff; color: var(--ast-global-color-3); font: 500 18px/30px 'Mulish', sans-serif;
transition: background .2s, color .2s, border-color .2s;
}
.fs-sikksakk-kort:hover .fs-kort-tittel { color: var(--ast-global-color-0); }
.fs-sikksakk-kort:hover .fs-lesmer { background: var(--ast-global-color-0); border-color: var(--ast-global-color-0); color: #fff; }
@media (max-width: 767px) {
.fs-kort-tittel { font-size: 26px; margin-top: 20px; }
.fs-lesmer { margin-top: 20px; }
}
/* Større FS Energi-logo */
.osh-header figure.logo.wp-block-kadence-image,
.osh-header figure.logo.wp-block-kadence-image img,
.osh-header .logo img { width: 260px !important; max-width: 260px !important; }
@media (max-width: 1024px) {
.osh-header figure.logo.wp-block-kadence-image,
.osh-header figure.logo.wp-block-kadence-image img,
.osh-header .logo img { width: 210px !important; max-width: 210px !important; }
}
@media (max-width: 767px) {
.osh-header figure.logo.wp-block-kadence-image,
.osh-header figure.logo.wp-block-kadence-image img,
.osh-header .logo img { width: 170px !important; max-width: 170px !important; }
}
/* Kadence-overskriftsblokker brukt som avsnitt: brødtekstfont */
p.wp-block-kadence-advancedheading { font-family: 'Mulish', sans-serif; }
p.wp-block-kadence-advancedheading.fs-topp-ingress { font-size: 19px; line-height: 1.55; font-weight: 400; color: #fff; }
p.wp-block-kadence-advancedheading.fs-kort-ingress { font-size: 20px; line-height: 1.55; font-weight: 400; color: var(--ast-global-color-3); }
p.wp-block-kadence-advancedheading.fs-lesmer {
display: inline-block; margin: 32px 0 0; padding: 5px 20px; border: 1px solid var(--ast-global-color-3);
border-radius: 50px; background: #fff; color: var(--ast-global-color-3); font: 500 18px/30px 'Mulish', sans-serif;
}
.fs-sikksakk-kort:hover p.wp-block-kadence-advancedheading.fs-lesmer { background: var(--ast-global-color-0); border-color: var(--ast-global-color-0); color: #fff; }
p.wp-block-kadence-advancedheading.fs-lesmer { align-self: flex-start; width: auto; }
/* Skillelinje (core/separator) i innhold: venstrejustert med teksten, tynn linje */
.entry-content hr.wp-block-separator,
.entry-content hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
width: 100%; max-width: 760px; height: 0;
margin: 48px 0 !important;
border: 0; border-top: 1px solid #c8c8c8;
background: none; opacity: 1;
}
.entry-content hr.wp-block-separator.has-text-color { border-top-color: currentColor; }
.entry-content hr.wp-block-separator + h2,
.entry-content hr.wp-block-separator + h3 { margin-top: 0; }
/* Brødtekst: normal vekt overalt (Otta-malene brukte 300) */
.entry-content p, .entry-content li, .ingress, .ingress p,
.osk-artikkelkort-ingress, .osk-artikkelkort-ingress p, .fs-kontakt p { font-weight: 400; }
.osk-artikkelkort .ingress, .osk-artikkelkort .ingress p { font-size: 19px; line-height: 1.55; }
/* =====================================================================
Kontaktseksjon før footer – tydeligere, moderne skjema
===================================================================== */
.fs-kontakt { background: var(--ast-global-color-7); }
.fs-kontakt h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.2; margin-bottom: 12px; }
.fs-kontakt h2 + p { margin-bottom: 28px; color: #333; }
/* Skjemaet som et hvitt kort */
.frm_forms.fs-kontakt-skjema {
background: #fff; border-radius: 16px; padding: 32px;
box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
}
.fs-kontakt-skjema .frm_form_fields > fieldset { margin: 0; padding: 0; border: 0; }
.fs-kontakt-skjema .frm_form_field { margin-bottom: 14px; }
/* Felter */
.fs-kontakt-skjema input[type=text],
.fs-kontakt-skjema input[type=email],
.fs-kontakt-skjema input[type=tel],
.fs-kontakt-skjema input[type=number],
.fs-kontakt-skjema textarea {
width: 100%; min-height: 54px; padding: 14px 16px !important;
background: #f6f7f6 !important; color: #111 !important;
border: 1px solid #cfd4d1 !important; border-radius: 10px !important;
font: 400 18px/1.4 'Mulish', sans-serif !important; box-shadow: none !important;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.fs-kontakt-skjema textarea { min-height: 150px; resize: vertical; }
.fs-kontakt-skjema input::placeholder,
.fs-kontakt-skjema textarea::placeholder { color: #5f6662 !important; opacity: 1; }
.fs-kontakt-skjema input:hover, .fs-kontakt-skjema textarea:hover { border-color: #9aa39e !important; }
.fs-kontakt-skjema input:focus, .fs-kontakt-skjema textarea:focus {
outline: none; background: #fff !important;
border-color: var(--ast-global-color-0) !important;
box-shadow: 0 0 0 4px rgba(1,102,58,.15) !important;
}
.fs-kontakt-skjema .frm_error_style, .fs-kontakt-skjema .frm_error { color: #b3261e; font-size: 15px; }
.fs-kontakt-skjema .frm_blank_field input, .fs-kontakt-skjema .frm_blank_field textarea { border-color: #b3261e !important; }
/* Send-knapp: fylt grønn pille */
.fs-kontakt-skjema .frm_submit { margin-top: 8px; }
.fs-kontakt-skjema .frm_submit button,
.fs-kontakt-skjema .frm_button_submit {
display: inline-flex; align-items: center; gap: 10px;
height: auto !important; padding: 14px 34px !important;
background: var(--ast-global-color-0) !important; color: #fff !important;
border: 0 !important; border-radius: 50px !important;
font: 600 18px/1.2 'Mulish', sans-serif !important; cursor: pointer;
box-shadow: 0 4px 14px rgba(1,102,58,.25) !important;
transition: background .15s, transform .15s, box-shadow .15s;
}
.fs-kontakt-skjema .frm_button_submit::after { content: "→"; font-size: 20px; line-height: 1; }
.fs-kontakt-skjema .frm_button_submit:hover { background: var(--ast-global-color-1) !important; transform: translateY(-1px); }
.fs-kontakt-skjema .frm_button_submit:focus-visible { outline: 3px solid rgba(1,102,58,.35); outline-offset: 3px; }
/* Kontaktperson som eget kort */
.fs-kontakt .wp-block-kadence-column:has(.fs-kontakt-navn) > .kt-inside-inner-col {
background: #fff; border-radius: 16px; padding: 28px 28px 22px;
box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
}
.fs-kontakt .fs-kontakt-navn { font-family: 'yorkten-slab-normal', serif; font-size: 24px; margin-bottom: 2px !important; }
.fs-kontakt .fs-kontakt-navn strong { font-weight: 500; }
.fs-kontakt .wp-block-kadence-column:has(.fs-kontakt-navn) p { margin-bottom: 8px; }
.fs-kontakt .wp-block-kadence-column:has(.fs-kontakt-navn) a {
color: var(--ast-global-color-0); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.fs-kontakt .wp-block-kadence-column:has(.fs-kontakt-navn) a:hover { color: var(--ast-global-color-1); }
@media (max-width: 767px) {
.frm_forms.fs-kontakt-skjema { padding: 20px; }
.fs-kontakt-skjema .frm_button_submit { width: 100%; justify-content: center; }
.fs-kontakt .wp-block-kadence-column:has(.fs-kontakt-navn) > .kt-inside-inner-col { margin-top: 24px; }
}
.fs-kontakt-skjema .frm_description, .fs-kontakt-skjema [class*="counter"] { font-size: 14px; color: #5f6662; margin-top: 6px; }
.frm_forms.fs-kontakt-skjema { margin-top: 24px; }
/* Kontakt oss: firmablokk + kart i full innholdsbredde (som fsenergi.no) */
.osk-innlegg-innhold.entry-content > .fs-kontaktside { max-width: none !important; width: 100%; }
.fs-kontaktside .kt-row-column-wrap { align-items: start; }
.fs-kontaktside h3 { font-size: 24px; margin: 0 0 16px; }
.fs-kontaktside p { margin-bottom: 16px; }
.fs-kontaktside a { color: var(--ast-global-color-3); text-decoration: underline; text-underline-offset: 3px; }
.fs-kontaktside a:hover { color: var(--ast-global-color-0); }
.fs-kart iframe { width: 100%; height: 450px; border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); }
@media (max-width: 767px) { .fs-kart iframe { height: 320px; } }