/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* =========================================================================
   INNHOLD
   1. CTA-video          – fjern padding på heldekkende video-cover
   2. Utilities          – gjenbrukbare klasser
   3. Navigasjon         – Kontakt-menypunkt (aktiv-farge)
   4. Meny-knapp         – «Meld deg på» (desktop, mobil-header, slideout)
   5. Mobilmeny          – slideout-justeringer (bredde, luft)
   ========================================================================= */


/* 1. CTA-video ============================================================
   Nullstiller padding på de heldekkende «CTA-video»-coverne.
   Treffer alle cover med klassen .hero-cover – ingen page-id-vedlikehold.
   ========================================================================= */
.wp-block-cover.hero-cover {
	padding: 0;
}


/* 2. Utilities ============================================================
   Utility-klasser som brukes på tvers av sidene.
   ========================================================================= */

/* Runde videoer (1:1-bannere ved siden av tekst) */
.video-rund {
	border-radius: 100%;
	overflow: hidden;
}

/* Balansert linjebryting på overskrifter */
.balansert-tekst {
	text-wrap: balance;
}


/* 3. Navigasjon – Kontakt-menypunkt =======================================
   Kontakt er en anker-lenke til footeren (/#kontakt). Fordi stien «/»
   matcher forside-URL-en, stempler WordPress den som aktiv på forsiden.
   Vi overstyrer fargen tilbake til hvit, men beholder blå på hover/focus.
   ========================================================================= */
.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li.menu-item-369[class*="current-menu-"] > a {
	color: #fff;
}

.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li.menu-item-369[class*="current-menu-"]:hover > a,
.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li.menu-item-369[class*="current-menu-"]:focus > a {
	color: var(--accent);
}


/* 4. Meny-knapp «Meld deg på» =============================================
   Klassen .knapp-1-meny på menypunktet gjør det til en knapp lik .knapp-1
   (oransje med løpe-ikon). Virker i desktop-nav, mobil-header og slideout.
   ========================================================================= */

/* 4a. Grunnutseende (alle tre menyflater) */
.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li.knapp-1-meny > a,
.header-wrap #mobile-header:not(.toggled) .main-nav > ul > li.knapp-1-meny > a,
.slideout-navigation .slideout-menu > li.knapp-1-meny > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--global-color-10);
	color: var(--base-3);
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
	border-top: 1px solid var(--global-color-10);
	border-right: 3px solid var(--global-color-10);
	border-bottom: 3px solid var(--global-color-10);
	border-left: 1px solid var(--global-color-10);
	padding: 8px 20px;
}

/* 4b. Dobbel luft på venstresiden (kun desktop-nav) */
.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li.knapp-1-meny {
	margin-left: 20px;
}

/* 4c. Løpe-ikon etter teksten (mask arver knappens farge) */
.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li.knapp-1-meny > a::after,
.header-wrap #mobile-header:not(.toggled) .main-nav > ul > li.knapp-1-meny > a::after,
.slideout-navigation .slideout-menu > li.knapp-1-meny > a::after {
	content: "";
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	margin-left: 0.5em;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20256%20256%27%3E%3Cpath%20d%3D%27M152%2092a36%2036%200%201%200-36-36a36%2036%200%200%200%2036%2036m0-48a12%2012%200%201%201-12%2012a12%2012%200%200%201%2012-12m76%2093.4a12%2012%200%200%201-7%2010.91a66%2066%200%200%201-21.47%203.78c-14%200-34.25-3.82-59.77-19a177%20177%200%200%201-10.27%2021C153.12%20162.83%20188%20183.8%20188%20232a12%2012%200%200%201-24%200c0-18.69-6.95-33.06-21.26-43.94c-9.16-7-19.55-11-27.43-13.34c-.81%201-1.64%202-2.5%202.95c-20%2022.87-44.82%2034.76-72.25%2034.76a97%2097%200%200%201-9.75-.49a12%2012%200%201%201%202.39-23.88c52.3%205.22%2077.48-45.92%2085.79-67.75c-34.19-17.85-55.25-1.53-55.48-1.31a12%2012%200%200%201-15-18.72C50.08%2099%2088%2069.44%20142.75%20106.62c43.1%2029.31%2068.1%2019.92%2068.5%2019.76a12%2012%200%200%201%2016.75%2011Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20256%20256%27%3E%3Cpath%20d%3D%27M152%2092a36%2036%200%201%200-36-36a36%2036%200%200%200%2036%2036m0-48a12%2012%200%201%201-12%2012a12%2012%200%200%201%2012-12m76%2093.4a12%2012%200%200%201-7%2010.91a66%2066%200%200%201-21.47%203.78c-14%200-34.25-3.82-59.77-19a177%20177%200%200%201-10.27%2021C153.12%20162.83%20188%20183.8%20188%20232a12%2012%200%200%201-24%200c0-18.69-6.95-33.06-21.26-43.94c-9.16-7-19.55-11-27.43-13.34c-.81%201-1.64%202-2.5%202.95c-20%2022.87-44.82%2034.76-72.25%2034.76a97%2097%200%200%201-9.75-.49a12%2012%200%201%201%202.39-23.88c52.3%205.22%2077.48-45.92%2085.79-67.75c-34.19-17.85-55.25-1.53-55.48-1.31a12%2012%200%200%201-15-18.72C50.08%2099%2088%2069.44%20142.75%20106.62c43.1%2029.31%2068.1%2019.92%2068.5%2019.76a12%2012%200%200%201%2016.75%2011Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* 4d. Hover/focus – bytt farger, som .knapp-1 */
.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li.knapp-1-meny > a:hover,
.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li.knapp-1-meny > a:focus,
.header-wrap #mobile-header:not(.toggled) .main-nav > ul > li.knapp-1-meny > a:hover,
.header-wrap #mobile-header:not(.toggled) .main-nav > ul > li.knapp-1-meny > a:focus,
.slideout-navigation .slideout-menu > li.knapp-1-meny > a:hover,
.slideout-navigation .slideout-menu > li.knapp-1-meny > a:focus {
	background-color: var(--base-3);
	color: var(--global-color-10);
}


/* 5. Mobilmeny (slideout) =================================================
   Justeringer som kun gjelder off-canvas-menyen.
   ========================================================================= */

/* 5a. Knappen: full bredde, kompakt høyde (mindre luft topp/bunn enn 4a),
       med luft rundt. */
.slideout-navigation .slideout-menu > li.knapp-1-meny > a {
	display: flex;
	padding-top: 0;
	padding-bottom: 0;
	margin: 12px 20px;
}

/* 5b. Luft på toppen av menyen (matcher pluginets 40px i bunn) */
.slideout-navigation .main-nav {
	margin-top: 40px;
}