/* help *
article { border:1px solid red; }
div { border:1px solid pink; }
ul { border:1px solid orange; }
li { border:1px solid yellow; }
a { border:1px solid blue; }
p { border:1px solid brown; }


/********************************************************************/
/*                       GLOBAL SETTINGS                            */
/********************************************************************/

/* GENERAL */
:root {
    --bgdark:#000;
    --pdark:#ccc;
    --adark:#fff;
    --logodark:yellow;
  
    --bgbright:white;
    --pbright:#444;
    --abright:#222;
    --logobright:magenta;
    
    --brightgray:#eee;
    --lightgray:#999;
    --gray:#666;
    --darkgray:#333;
    
    --tr0:rgba(255,255,255,0);
    --tr10:rgba(255,255,255,0.1);
    --tr25:rgba(255,255,255,0.25);
    --tr50:rgba(255,255,255,0.50);
    --tr75:rgba(255,255,255,0.75);
    --tr1:rgba(255,255,255,1);
  
    --black01:rgba(0,0,0,0.1);
    --black15:rgba(0,0,0,0.15);
    --black25:rgba(0,0,0,0.25);
    --black35:rgba(0,0,0,0.35);
    --black50:rgba(0,0,0,0.5);
    --black75:rgba(0,0,0,0.75);
    --black1:rgba(0,0,0,1);
  
    --gray01:rgba(128, 128, 128, 0.1);
    --gray25:rgba(128, 128, 128, 0.25);
    --gray50:rgba(128, 128, 128, 0.5);
    --gray75:rgba(128, 128, 128, 0.75);
    --gray1:rgba(128, 128, 128, 1);
  }

/********************************************************************/
/* basics */

body { color: var(--pbright); font-family: "Roboto", sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI"; line-height: normal; margin: 0px auto;  padding: 0px 0px; }
h1,h2,h3,h4 {margin:0px;}
h1 { font-size: 110px;font-weight: 400;}
h2 { font-size: 40px;font-weight: 400;}
h3 { font-size: 28px;font-weight: 500;}
p { margin:0px 0px 20px 0px; line-height: 1.5em;}
a { text-decoration: none; color:var(--abright);}
a:hover { text-decoration: underline; }
ul { line-height: 1.5em; }
li { }

/* Themes */
body.dark-mode { background-color: var(--bgdark); color: var(--pdark);}
body.dark-mode a { color: var(--adark);}


/********************************************************************/
/* footer */
footer {padding:40px 40px; margin: top 100px !important;}
footer .container {padding-top:60px;}
footer .container p {display:inline-block;margin:10px 20px 10px 0px;}


/********************************************************************/
/* SIDETOPP */

/* header */
header { padding: 0px 0px; margin-bottom: 0px;  border-bottom:2px solid var(--gray01);}
header a { display:block; font-weight: 500; padding:60px 10px; }
header a:hover { text-decoration: none;}
header .container { display: block; position: relative; }
header .container .logo { display: inline-block; margin: 0px; padding-left:30px;}
header .container .logo a { font-size: 1.4em;padding:58px 10px;}
header .container .logo a sup { font-size: .7em;}

/* Header NAV */
header .burger,
header nav.mobile-overlay {display: none;}
header nav.screen { vertical-align: top; margin: 0px auto; width: 62%; text-align: center; margin-top: 0px; position: absolute; top: 0; right: 10%; left: 10%;}
header nav.screen ul { list-style: none; padding: 0; margin: 0; }
header nav.screen ul li { display: inline-block; vertical-align: top; margin: 0px -2px;}
header nav.screen ul li a { text-decoration: none; color: var(--abright); width:120px; border-bottom:2px solid rgba(0,0,0,0); position: relative;}
header nav.screen ul li a:hover { color:var(--bgdark); border-bottom:2px solid var(--gray);}
header nav.screen ul li a.current { background:var(--darkgray); color:var(--bgbright);border-bottom:2px solid var(--gray01);}
header nav.screen ul li a[href*="lofotfisk"],
header nav.screen ul li a[href*="habygg"],
header nav.screen ul li a[href*="markedsforing"],
header nav.screen ul li a[href*="salg"] {display:none;}
header nav.screen ul li a[href*="arbeider"]:before,
header nav.screen ul li a[href*="kompetanse"]:before {content:'3';position:absolute; font-size: 12px; bottom:10px; left:10px;}

/* Header DARK */
body.dark-mode header { border-bottom:2px solid var(--tr10);}
body.dark-mode header .container .logo a { color: var(--adark); }
body.dark-mode header nav ul li a { color: var(--adark); border-bottom:2px solid var(--gray01);}
body.dark-mode header nav ul li a:hover { color:var(--bgbright); border-bottom:2px solid var(--gray);}
body.dark-mode header nav ul li a.current { background:var(--adark); color:var(--abright);border-bottom:2px solid var(--gray01);}

/* Switch */
.theme-toggle-btn { display: inline-block; position: absolute; top:60px; right:40px;cursor: pointer;transition: background-color 0.2s ease; border-radius: 50%;overflow: hidden; border:2px solid var(--brightgray);}
.theme-toggle-btn:hover {border:2px solid var(--lightgray); }

/* Selve ikonet */
.switch-icon {width: 14px;  height: 14px; display: block; transition: transform 0.25s; transform: rotate(0deg); }
body.dark-mode .switch-icon {transform: rotate(180deg);}

/* --- Rotasjons-logikken --- */
.switch-icon:hover  {  }
body.dark-mode .switch-icon { }

/* --- Breadcrumbs --- */
.breadcrumb-container {display:block; width: 100%; max-width: 2000px; margin:0px auto; }
.breadcrumb-container nav {vertical-align: top;}
.breadcrumbs { display: inline-block;padding: 0px 40px; margin:0px 0px; }
.breadcrumb-container a,
.breadcrumb-container span { display:inline-block; padding: 20px 0px 18px 0px; margin:0px 40px 0px 0px; line-height: normal; vertical-align:top; border-bottom: 2px solid rgba(0,0,0,0); transition:0.2s;}
.breadcrumb-container a:hover { text-decoration: none; border-bottom: 2px solid var(--gray); }
.breadcrumb-container a.active.current { text-decoration: none; border-bottom: 2px solid var(--gray); }

/* --- SubNAV --- */
nav.sub-navigation { display:inline-block; padding: 0px 0px; margin:0px 0px; }
nav.sub-navigation ul { display:block; padding: 0px; margin:0px;}
nav.sub-navigation ul li { display:inline-block; padding: 0px 0px; margin-right: 40px;}

/********************************************************************/
/* INNHOLD */

/* container*/
main.container { display:block; padding: 0px 40px 40px 40px; margin:0px 0px; }
h1 { padding:20px 0px 40px 0px; }
h2 { padding:20px 0px 40px 0px; }
h3 { padding:20px 0px;}

/* container dark mode*/
body.dark-mode .breadcrumb-container { border-bottom:2px solid var(--tr10);}
body.dark-mode h1 { border-bottom: 2px solid var(--tr10);}
body.dark-mode h2 { border-bottom: 2px solid var(--tr10); }

/* forside */
.welcome-section,
.sanity-content,
footer .container {display:block; width: 100%; max-width: 2000px; margin:0px auto;}
div.three {columns: 3;gap: 60px; padding: 50px 0px; border-top:1px solid var(--gray01); }
.welcome-section h2 { margin-bottom: 0px;}


/********************************************************************/
/* CSS Pynt*/


/* CSS Pynt forside*/
.element-wrapper {margin-bottom:-1px;position: relative; border-top:1px solid var(--gray01);  vertical-align: top; break-inside: avoid; transition:.2s;}
/* .element-wrapper:hover {border-top:1px solid var(--gray); border-bottom:1px solid var(--gray);} */
.element-wrapper span {display: inline-block; opacity:0; position:relative;width:auto;font-size:10px;margin:10px;transition: .2s;}
.element-wrapper span:before {content:'►';display: inline-block; font-size:7px; margin-right:5px; color:var(--gray50);}
.element-wrapper:hover span { opacity:1;}
.element-wrapper span::first-letter {text-transform: uppercase;}
.element-wrapper:before {content:'CSS stiler:';display: inline-block;margin:0px 10px;font-size:10px; opacity: 0.5;transition: .2s;}
.element-wrapper:hover:before { opacity:1;}
.element-wrapper span.css-tag-font-weight {position: absolute; right: 0px;}
.element-wrapper span.css-tag-line-height {position: absolute;bottom: 0px; left: 0px;}
.element-wrapper span.css-tag-display {position: absolute;bottom: 0px; right: 0px;}


div.body-text { columns:2; gap:60px; padding: 30px 0px; border-top:1px solid var(--gray01); }
div.body-text p {margin:0px 0% 0px 0%; padding:10px 0px; margin:0px 0px; vertical-align: top;list-style: none;  break-inside: avoid;}
div.body-text ul { padding: 10px 0px; margin:0px; vertical-align: top; list-style: none; break-inside: avoid;}
div.body-text ul li { padding: 16px 0px; border-bottom: 1px solid var(--gray25);}
div.body-text ul li em { font-style: normal; font-weight: 600; width: 40%;}
div.body-text ul li:first-of-type { padding: 0px 0px; } 
div.body-text ul strong:first-of-type, 
div.body-text p strong:first-of-type,
div.body-text ul a:first-of-type {display:block; font-size:1.2em; padding:10px 0px; font-weight: normal;}
div.body-text .element-wrapper:before,
div.body-text .element-wrapper span {display:none;}
div.body-text .element-wrapper ul {display:block;width:auto; padding: 10px 0px; }

main.container div.three span,
footer div span {display: none;}


/********************************************************************/
/* Pad */

@media (max-width:960px) {

h1 { font-size:80px;}
h2 { font-size:40px;}

/* BURGER */
header .burger {display: inline-block; width: 40px; height:21px;position: absolute; right: 100px; top: 60px; cursor:pointer; }
header .burger div {display:block; width:auto; height:4px;margin-bottom:3px; background: var(--abright);}
.burger.active .line-one {transform: rotate(-45deg) translate(-4px, 6px);}
.burger.active .line-two {opacity: 0;}
.burger.active .line-three {transform: rotate(45deg) translate(-3px, -6px);}
body.dark-mode header .burger div { background: var(--adark);}

/* NAV */
.screen,
.breadcrumb-container {display: none;}
header nav.mobile-overlay { display:block; top:140px; opacity:1; position: fixed; padding: 40px 40px; width: auto; height: 100vh; right: 0px; left: 0px; background: var(--darkgray);z-index: 2; transition:0.2s; }
header nav.mobile-overlay.hidden { top:160px; opacity:0; z-index:0;}
header nav.mobile-overlay ul,
header nav.mobile-overlay ul li {display:block; padding:0px;margin:0px;}
header nav.mobile-overlay ul li a { display:block; padding: 10px 0px; font-size: 24px; color: var(--lightgray); border-bottom:2px solid var(--gray01); }
header nav.mobile-overlay ul li a:hover,
header nav.mobile-overlay ul li a.current { background:transparent; color:var(--bgbright); border-bottom:2px solid var(--gray50);}
header nav.mobile-overlay ul.mobile-submenu {padding:0px 20px;}

/* Header DARK */

/* content */
div.three { columns: 2; } 

}


/********************************************************************/
/* Phone */

@media (max-width:580px) {

/* Basics */
h1 { font-size:60px;}
h2 { font-size:30px;}

/* footer */
footer .container p {display:block;margin:10px 10px 10px 0px;}

/* content */
div.three { columns: 1; } 
div.body-text { columns:1; }

}