/*
Theme Name: Sejlklubben Sundet
Author: Anders Warming
Version: 1.0
*/

























/* ---------------------------------- */




* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}





@font-face {
  font-family: WF Visual Sans Variable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/wp-content/themes/sejlklubbensundet/assets/fonts/wf-visual-sans-vf.woff2") format("woff2");
}


@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/wp-content/themes/sejlklubbensundet/assets/fonts/inter-vf.woff2") format("woff2");
}





:root {
  --custom--js--sub-menu-height: 0px; /* default value */
  --site-global-padding: 2.5rem;
}


@media (max-width: 62.5em) {
  :root {
    --site-global-padding: 1.5rem;
  }
}


@media (max-width: 45rem) {
  :root {
    --site-global-padding: 1rem;
  }
}





body {
  background-color: white;
  color: hwb(0 13% 87%);
  overflow-x: hidden; /* Hides scrollbar compensation overflow */
  overflow-y: scroll; /* Forces scrollbar on all pages so layout shift is prevented on shorter pages */
}















/**
 * Content
 *
 *
 */





/* "(.lightbox-trigger)" was added because "* + *" affected the lighbox trigger, placing it wrong inside images */
.custom-content * + *:not(.lightbox-trigger) { 
  margin-block-start: 1.3rem;
}


/* "z-index" was added because the lightbox trigger-button was displayed above the sticky header */
.lightbox-trigger {
	z-index: 1 !important;
}





.custom-content {
  font-family: Inter Variable;
  font-size: 1.125rem;
  font-weight: 350; 
  line-height: 1.5;
}


.custom-content a {
  color: inherit;
}





/* --- --- --- */





.custom-content :where(h1, h2, h3, h4, h5, h6) {
  font-family: WF Visual Sans Variable;
}


.custom-content h2 {
  margin-block-start: 2.5rem;
  font-size: 1.313rem;
  font-weight: 575;
}


.custom-content h2 + * {
  margin-block-start: 0.6rem;
}





 /* --- --- --- */





.custom-content .wp-block-image {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}


.custom-content .wp-block-image .wp-element-caption {
  margin-top: 0.375rem;
  font-family: WF Visual Sans Variable;
  font-size: 0.75rem;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.6);
}


.custom-content .wp-block-image.alignwide {
  position: relative;
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 62.5rem;
}


@media (max-width: 75rem) {
  .custom-content .wp-block-image.alignwide {
    position: unset;
    width: unset;
    left: unset;
    transform: unset;
  }
}


.custom-content .wp-block-image.alignfull {
  position: relative;
  margin-top: 3.75rem;
  margin-bottom: 3.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - var(--custom--js--scrollbar-width));
}


.custom-content .wp-block-image.alignfull .wp-element-caption {
  margin-left: 0.625rem;
}





 /* --- --- --- */





.custom-content ul {
  padding-inline-start: 1.1rem;
  list-style: square;
}


.custom-content li {
  padding-left: 0.1em;
}


.custom-content li:not(:first-child) {
  margin-top: 0.5rem;
}


.custom-content li ul {
  margin-top: 0.5rem; 
}















/**
 * Header
 *
 *
 */


/* notice bar */
/* .header-notice-bar {
  padding-top: 1px;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #2375CE;
  height: 29px;
  color: white;
  font-family: WF Visual Sans Variable;
  font-size: 11.5px;
  font-weight: 575;
  text-transform: uppercase;
  letter-spacing: 0.0rem;

  display: flex;
  justify-content: center;
  align-items: center;

  padding-left: var(--site-global-padding);
  padding-right: var(--site-global-padding);
}

.header-notice-bar a {
  text-decoration: none;
  color: white;
} */


.custom-header {
  z-index: 100;
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  margin-right: calc(-1 * (100vw - 100%)); /* pull it out the with of scrollbar */
  padding-left: var(--site-global-padding);
  padding-right: calc(var(--site-global-padding) + (100vw - 100%)); /* then add the padding back */
  box-shadow: 0 .0625rem 0 rgba(0, 0, 0, .1);
  background-color: white;
  height: 4.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


@media (max-width: 75rem) {
  .custom-header {
    height: 4rem;
  }
}


@media (max-width: 45rem) {
  .custom-header {
    /* overrides right global padding for easier access to burger icon */
    padding-right: calc(1.5rem + (100vw - 100%)); 
  }
}


/* this is to compensate for wordpress admin bar shown when logged in */
/* on desktop that admin bar is sticky, but not on phones */
/* wordpress is in px, so this is in px and not rem */
@media (max-width: 600px) {
  .custom-header {
    top: 0;
  }
}


.custom-header a {
  text-decoration: none;
}





 /* --- --- --- */





.custom-header-left {
  margin-top: 1px;
  width: 22rem;
}


@media (max-width: 46.875rem) {
  .custom-header-left {
    width: unset;
  }
}


.custom-header-logo-wrapper {
  align-items: center;
  display: flex;
}


.custom-header-logo svg {
  height: 2.2rem;
  width: auto;
  display: block;
}

@media (max-width: 75rem) {
  .custom-header-logo svg {
    height: 2rem;
  }
}





 /* --- --- --- */





.custom-header-center {
  width: 21.5rem;
}


@media (max-width: 75rem) {
  .custom-header-center {
    display: none;
  }
}


.top-menu {
  display: flex;
  justify-content: space-between;

}

.top-menu li {
  list-style: none; 
}

.top-menu a {    
  font-size: 17.5px;  
  text-transform: uppercase;
  font-weight: 450;
  font-family: WF Visual Sans Variable;
  color: rgb(34, 34, 34);
  height: 4.5rem;
  display: flex;
  align-items: center;
}

.top-menu .current-menu-item {
  position: relative;
}

.top-menu .current-menu-item::after {
  position: absolute;
  content: "";
  background-color: rgb(34, 34, 34);
  left: 0;
  right: 0;
  bottom: 0;
  height: .25rem;
}

@media (max-width: 75rem) {
  .top-menu a {
    height: 4rem;
  }
}















/* HEADER - RIGHT */

.custom-header-right {
  display: flex;
  justify-content: right;  
  align-items: center;

  width: 22rem;


}

@media (max-width: 45rem) {

  .custom-header-right {
    width: unset;
  }

}

.custom-header-button-membership {
  display: flex;
  justify-content: center;
  align-items: center;

  text-transform: uppercase;
  letter-spacing: 0.01rem;

  background-color: #FF001F;
  /* god grøn */
  /* background-color: #4C9C7C;  */
  color: white;
  font-weight: 550;
  font-size: 12px;
  padding: 7px 19px;



  font-family: WF Visual Sans Variable;
  /* font-family: Inter Variable; */


}


@media (max-width: 45rem) {

  .custom-header-button-membership {
    display: none;
  }

}

.custom-header-button-contact {
  display: flex;
  justify-content: center;
  align-items: center;


  text-transform: uppercase;
  letter-spacing: 0.02rem;

  font-weight: 490;
  font-size: 0.75rem;
  color: black;
  font-size: 12px;

  margin-left: 1.25rem;

  font-family: WF Visual Sans Variable;
  /* font-family: Inter Variable; */
}

@media (max-width: 45rem) {

  .custom-header-button-contact {
    display: none;
  }

}



.custom-header-button-search {
  margin-left: 2rem;
}

.custom-header-button-search-icon {
  margin-top: 5px;
  display: inline-flex;
  width: 26px;
  height: 26px;
  fill: black;
}










/* HEADER - BURGER */


.custom-header-menu-toggle {
  cursor: pointer;
  border: 0;
  background-color: transparent;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 3rem;

  /* align for button */
  margin-right: -0.813rem; 

  margin-left: 1rem;
}

@media (max-width: 45rem) {

  .custom-header-menu-toggle {
    margin-left: 0.75rem;
  }

}


.custom-header-menu-toggle-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 2.8rem;
  width: 1.5rem;

  /* background-color: pink; */
}


.custom-header-menu-toggle-icon {
  position: relative; 
  height: 1rem;
  width: 1.375rem;
}




.custom-header-menu-toggle-icon div {
	background-color: black;
    height: 0.125rem;
    left: 50%;
    margin-left: -.6875rem;
    margin-top: -.0625rem;
    position: absolute;
    top: 50%;
    transform-origin: center center;
    transition: transform 400ms;
    width: 1.375rem;
}

.custom-header-menu-toggle-icon div:nth-child(1) {
	transform: translateY(-.4375rem);
}

.custom-header-menu-toggle-icon div:nth-child(3) {
	transform: translateY(.4375rem);
}

.custom-header-menu-toggle-icon.open div:nth-child(1) {
	transform: rotate(-45deg);
}

.custom-header-menu-toggle-icon.open div:nth-child(2) {
	transform: scaleX(0);
}

.custom-header-menu-toggle-icon.open div:nth-child(3) {
	transform: rotate(45deg);
}



















/**
 * MAIN MENU
 *
 *
 */

/* showing become member */
 .custom-in-menu-login-button-wrapper {

    display: none;
 }


 @media (max-width: 45rem) {

  .custom-in-menu-login-button-wrapper {

    display: block;
 }

}


 .custom-in-menu-login-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.01rem;
  background-color: #FF001F;
  color: white;
  font-weight: 550;
  font-size: 13px;
  padding: 7px 19px;
  font-family: WF Visual Sans Variable;

  margin-top: 1rem;
  margin-left: 40px;
  margin-right: 3rem;
  margin-bottom: 1rem;


  font-family: WF Visual Sans Variable;

  

}

.custom-in-menu-login-button {
  text-decoration: none;
}







/*
Opens active sub-menus (wrapper) on page load
Allows javascript to later close the menu by overridding this class via inline styling
*/
.sub-menu-wrap:has(.current-menu-item, .current-page-ancestor) {
  grid-template-rows: 1fr;
}



.custom-menu {
	z-index: 999;
	position: fixed;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 4.5rem);

	right: 0;
	height: calc(100% - 4.5rem);

  width: 100%;
	max-width: 375px;

	background-color: white;
	overflow-y: auto;
  transform: translateX(375px);
  transition: transform 400ms;
  will-change: transform;
  overscroll-behavior: contain;

  border-top: 1px solid #E5E5E5;
}


@media (max-width: 75rem) {

  .custom-menu {
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 4rem);
    height: calc(100% - 4rem);
  }

}

/* @media (max-width: 45rem) {

  .custom-menu {
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 3rem);
    height: calc(100% - 3rem);
  }

} */






.custom-menu-active {
	transform: translateX(0);
}

/* this is the original small size for links in the menu */
/* .custom-menu a {
  font-size: 14px;
  font-weight: 360;
} */














.right-slide-in-menu {
  border-bottom: 1px solid #E5E5E5;
  list-style: none;
  text-transform: uppercase;
  /* font-size: 14px; */
  color: black; /* Just for overwriting the click style */

  /* pulls whole menu up, so the first menu items top border is under the wrapping container border */
  margin-top: -1px;
}


.right-slide-in-menu .sub-menu-wrap {
  display: grid;
  overflow: hidden;
  grid-template-rows: 0fr;
  transition: grid-template-rows 400ms;
  will-change: grid-template-rows;
  /* background-color: #F8F5EF; */
}


.right-slide-in-menu .sub-menu {
  min-height: 0;
  list-style: none;
}


/* 2nd level menu deep styling */
.right-slide-in-menu li ul.sub-menu li a {
  /* padding-left: 64px; */
  background-color: rgb(245, 245, 245);
  /* text-transform: capitalize; */

  /* font-weight: 400; */
}

/* 3rd level menu deep styling */
.right-slide-in-menu li ul.sub-menu > li ul.sub-menu li a {
 /* padding-left: 88px; */
padding-left: 64px;
 background-color: rgb(235, 235, 235);
 border-top: 1px solid rgb(220, 220, 220);
}





/* 4th level menu deep styling */
.right-slide-in-menu li ul.sub-menu > li ul.sub-menu > li ul.sub-menu li a {
 padding-left: 88px;
 background-color: rgb(225, 225, 225);
 border-top: 1px solid rgb(210, 210, 210); /* making borders darker so they are visible against the darker background --- the difference between border and background is the same as 3rd level menu (css above) */
}

/* 4th level menu ---- setting first line to same border color as everything else (ie not darker) */
.right-slide-in-menu li ul.sub-menu > li ul.sub-menu > li ul.sub-menu > li:first-of-type > a {
    border-top: 1px solid rgb(220, 220, 220);
}








.right-slide-in-menu .menu-item a {
  position: relative; /* establish containing block for absolute positioning */
}

.right-slide-in-menu .current-menu-item > a {
  /* background-color: rgba(0, 0, 0, 0.100) !important; */
}

.right-slide-in-menu .current-menu-item > a::before {

  content: ""; 

  /* content: url("assets/icons/eye (1).svg"); */

  position: absolute;


  /* margin-left: -22px;

  margin-top: 0.035rem;


  
  top: 50%;
  transform: translateY(-50%);


  background-color: rgba(0, 0, 0, 0.900);
  width: .45rem;
  height: .45rem;
  border-radius: 0px; */


  
  /* THIS IS THE ACTIVE HIGH-LIGHT */
  top: 0;
  left: 0;
  /* right: 0; */
  bottom: 0;

  width: 0.25rem;;

  background-color: rgb(34, 34, 34);


}



.right-slide-in-menu .menu-item a {
  border-top: 1px solid #E5E5E5;
  display: block;
  text-decoration: none;

  /* padding-top: 1.15rem;
  padding-bottom: 1.05rem; */


  padding-top: 1.35rem;
  padding-bottom: 1.25rem;

  /* padding-left: 2.5rem; */
  padding-left: 40px;
  padding-right: 3rem;

  color: hsl(0, 0%, 25%);


  font-weight: 475;
  font-size: 16.5px;
  font-family: WF Visual Sans Variable;
  /* font-feature-settings: "ss01" 0; */
  /* font-optical-sizing: none; */

  /* font-family: Inter Variable; */
  /* font-family: DM Sans VF; */
  /* font-family: Google Sans VF; */

  /* THIS WAS USED FOR A WHILE */
  /* font-family: Roboto Flex VF; */

  /* AND THIS WAS USED FOR A WHILE */
  /* letter-spacing: -0.01rem; */

}



.right-slide-in-menu .menu-item-has-children > a::after {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border-top: 2px solid rgb(50, 50, 50);
  border-right: 2px solid rgb(50, 50, 50);
  float: right;
  margin-top: 4px;
  transform-origin: 60% 40%;
  transition: transform 400ms;
  transform: rotate(45deg); /* arrow pointing right */
}

.right-slide-in-menu .menu-item-has-children.arrow-down > a::after {
  transform: rotate(135deg); /* arrow pointing down */
}



















.right-slide-in-menu .has-scrollbar {
  padding-right: calc(3rem - var(--custom--js--scrollbar-width)) !important;
}







/* this is under the normal menu items ... in the right slide in menu */


.custom-menu-custom-links {
  margin-top: 2rem;
  margin-left: 2.5rem;

  display: flex;
  flex-direction: column;



  font-size: 16.5px;
  font-family: WF Visual Sans Variable;
  /* font-family: Inter Variable; */

  letter-spacing: 0.03rem;

}

.custom-menu-custom-links a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-weight: 410;
}

.custom-menu-custom-links span {
  display: flex;
  align-items: center; /* Vertically centers icon and text */
  gap: 0.75rem; /* Optional: adds spacing between icon and text */
  margin-bottom: 1.35rem;
}

.custom-menu-custom-links span:last-of-type {
  margin-bottom: 5rem;
}













 















/**
 * Sub header -- might not need it
 *
 *
 */


.custom-sub-header {
  position: sticky;
	z-index: 60;
	top: 4.563rem;
  height: 3.188rem;
  border-bottom: 1px solid #E5E5E5;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: var(--site-global-padding);
  margin-right: calc(-1 * (100vw - 100%)); /* pull it out the with of scrollbar */
  padding-right: calc(var(--site-global-padding) + (100vw - 100%)); /* then add the padding back */
  cursor: pointer;

  display: none;
}

.custom-sub-menu-toggle {
  border: 1px solid red;
  cursor: pointer;

}

























.custom-menu-overlay {
  z-index: 70;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%; 
	width: 100%; 
	background: rgba(0, 0, 0, 0.4); /* background: rgba(0, 0, 0, 0.4);  */
	opacity: 0; 
  visibility: hidden;
  transition: opacity 400ms, visibility 0ms 400ms;
  will-change: opacity;
}

.custom-menu-overlay-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 400ms;
} 










.custom-sub-menu {
	z-index: 50;
	background-color: white;
	position: fixed;
	top: 7.751rem;
	right: 0;
	max-height: calc(100% - 150px);
	width: 100%;
	transform: translateY(calc(var(--custom--js--sub-menu-height) * -1));
	transition: transform 400ms, visibility 0ms 400ms;
  will-change: transform;
	visibility: hidden;
	overflow-y: auto;
}

.custom-sub-menu-active {
  visibility: visible;
	transform: translateY(0);
  transition: transform 400ms;
}










.custom-sub-menu-overlay {
	position: fixed;
	top: 150px; 
	left: 0;
	height: 100%; 
	width: 100%; 
	background: rgba(0, 0, 0, 0.4); 
	opacity: 0; 
  visibility: hidden;
  transition: opacity 400ms, visibility 0ms 400ms;
  will-change: opacity;
}

.custom-sub-menu-overlay-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 400ms;
}



/** 

Submenu and submenu overlay media query

*/

@media screen and (min-width: 75.001rem) {

  .custom-sub-menu, .custom-sub-menu-overlay, .custom-sub-header {
    display: none;
  }


}













.custom-scroll-lock-and-scrollbar-compensation {
	overflow: hidden;
	padding-right: var(--custom--js--scrollbar-width);
}





















/**
 * FOOTER.PHP
 *
 *
 */





.custom-global-footer {
  padding-left: var(--site-global-padding);
  padding-right: var(--site-global-padding);
  border-top: 1px solid #E5E5E5;
  font-family: WF Visual Sans Variable;
}


.custom-global-footer-container {
  margin-left: 6.25rem;
  margin-right: 6.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  column-gap: 3.125rem;
}


@media (max-width: 71.875rem) {

 .custom-global-footer-container {
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 1fr auto;
    max-width: 600px;
  }

}


@media (max-width: 34.375rem) {

  .custom-global-footer-container {
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 1fr;
    max-width: 600px;
  }
 
}


.custom-global-footer-branding {
  grid-column: 1 / 5;
  grid-row: 1 / 2;
  margin-top: 1rem;
  margin-bottom: 3.5rem;
  visibility: hidden;
}


@media (max-width: 71.875rem) {

  .custom-global-footer-branding {
    grid-column: 1 / 3;
  }

}


 @media (max-width: 34.375rem) {

  .custom-global-footer-branding {
    grid-column: 1 / 2;
  }
 
}


.custom-global-footer-container h2 {
  margin-bottom: 1rem;
  font-size: 0.938rem;
  font-weight: 600;
  text-transform: uppercase;
}


.custom-global-footer-container ul {
  list-style: none;
  display: grid;
  row-gap: 0.625rem;
}


.custom-global-footer-container a {
  text-decoration: none;
  color: inherit;
  text-transform: uppercase;
  font-size: 0.875rem;
}


.custom-global-footer-column-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}


.custom-global-footer-column-b {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}


@media (max-width: 71.875rem) {

  .custom-global-footer-column-b {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    margin-top: 3rem;
  }

}


.custom-global-footer-column-c {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}


@media (max-width: 71.875rem) {

  .custom-global-footer-column-c {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

}


@media (max-width: 34.375rem) {

  .custom-global-footer-column-c {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    margin-top: 3rem;
  }
 
}


.custom-global-footer-column-d {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}


@media (max-width: 71.875rem) {

  .custom-global-footer-column-d {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    margin-top: 3rem;
  }

}


@media (max-width: 34.375rem) {

  .custom-global-footer-column-d {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
  }
 
}


.custom-global-footer-address {
  text-decoration: none;
  color: inherit;
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 1.425;
}


.custom-global-footer-bottom {

  border-top: 1px solid #E5E5E5;

  height: 4rem;

  margin-left: calc(var(--site-global-padding) * -1);
  margin-right: calc(var(--site-global-padding) * -1);

  padding-left: var(--site-global-padding);
  padding-right: var(--site-global-padding);

  margin-top: 7rem;

  display: flex;
  justify-content: space-between;

  padding-top: 1.4rem;

  font-size: 0.75rem;
}

/* .custom-news-calendar-weather-main {
  margin-left: var(--site-global-padding);
  margin-right: var(--site-global-padding);
  font-family: WF Visual Sans Variable;
} */



















/**
 * UTILITIES
 *
 *
 */







 /**
 * Hiding menu items on desktop
 *
 *
 */


/* hide nyheder og kalender */
#menu-item-39, #menu-item-47 {
  display: none;
}


@media (max-width: 75rem) {
  #menu-item-39, #menu-item-47 {
    display: unset;
  }
}











 /**
 * pinned (sticky) post label
 *
 *
 */


/* pinned label containers */
 .custom-frontpage-slide-figure, .custom-news-calendar-weather-figure {
  position: relative;
}

/* pinned label */
.sticky-label {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 0; /* adjust size */
  border-color: transparent #FF001F transparent transparent; /* triangle color */
  position: absolute;
  top: 0;
  right: 0;
}

/* pinned label icon */
.sticky-label-icon {
  position: absolute;
  top: 9px;
  right: 11px;
  transform: rotate(45deg);

}













 /**
 * Fixing screen reader text showing in lightbox
 *
 *
 */


/* Skjul WordPress screen-reader-tekst permanent */
.screen-reader-text {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}