/*
Theme Name: Owg2026
Author: Johan 
Version: 1.0
*/

/* Border
 * ----------------------*/
.right-menu a {
	border-radius: 30px;
	padding: 15px;
/*	box-shadow: 3px 3px 0px 0px var(--bg), 6px 6px 0px 0px var(--bgbuttons); */
}

@media (min-width: 850px) {
	.right-menu a {
		border-radius: 50px;
		padding: 20px;
/*		box-shadow: 8px 8px 0px 0px var(--bg), 13px 13px 0px 0px var(--bgbuttons); */
	}
}

.right-menu ul { 
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
}

.top-menu .current-menu-item a {
	border-bottom: 5px solid var(--greenline);
}

/* Color
 * --------------------- */
body {
  --bgheader: #f6f3ed;
  --bg: #A5c8cd; /*#87a5a8;*/
  --links: #014160;
  --bgbuttons: #e28e03;
  --greenline: #708721;
  --rtl: #73a4a9;
  --rtr: #ecf0f1;
  --rbr: #f4f8e7;
  --rbl: #617a01;
  --ltl: #a5c8cc;
  --ltr: #89a2a7;
  --lbr: #6f8520;
  --lbl: #89a328;
  --news: #526607;
  --bottom: #51660b;
  --blue: #005176;
}

body { color: #222222 }
a, a:visited, a:hover { color: var(--links) }

.header { background: var(--rtr); }
.content { background: var(--bg); }
.footer { background: var(--bottom); color: white; }
.footer a, .footer a:visited, .footer a:hover { color: white; }

.top-menu ul.menu, .top-menu ul.sub-menu { background: var(--rtr); }
.right-menu a { background: var(--bgbuttons) }

h1 { color: var(--blue) }
h2 { color: var(--blue) }
h3 { color: var(--blue) }
h4 { color: var(--blue) }

/* Font
 * --------------------- */
body {
  font-family: 'Poppins Regular', sans-serif;
  font-size: 18px;
  font-weight: 400; 
  line-height: 1.6;
}

h1 { font-size: 40px; line-height: 1.15; font-weight: 700; }
h2 { font-size: 32px; line-height: 1.25; font-weight: 600; }
h3 { font-size: 26px; line-height: 1.3; font-weight: 600; }
h4 { font-size: 22px; line-height: 1.4; font-weight: 600; }
p { font-size: 1rem; line-height: 1.6; }

.top-menu a { 
	font-size: clamp(14px, 4vw, 24px);
	white-space: nowrap; 
}
.top-menu ul.sub-menu a { font-size: clamp(16px, 2vw, 20px); }

.right-menu a {
	font-size: clamp(16px, 2.5vw, 28px);
	font-weight: bold;
	white-space: nowrap;
}

/* Layout
 * --------------------- */
* { box-sizing: border-box }

body { overflow-x: hidden } /* no horizontal scrollbar */

/* standard menu layout */
ul.menu a, ul.menu a:visited { text-decoration: none; }
ul.menu a:hover { text-decoration: underline }
ul.menu { padding: 0; margin: 0; list-style: none; }
ul.sub-menu { list-style: none; padding: 0; margin: 0 }

li.menu-header > a, li.menu-header > a:hover { text-decoration: none }

.top-menu ul.menu a, .top-menu ul.menu a:hover { text-decoration: none; }

.header { 
  height: 200px; 
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 2; /* so that video in iframe scroll underneath the header */
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.hicle-logo-wrapper { position: relative; width: 110px; height: 110px; }
.logo-menu { position: absolute; top: 0px; }
.logo-menu a { 
  width: 110px; 
  height: 110px;
  color: transparent; 
  background-image: url('owglogo.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  line-height: 0px;
  display: block;
}

body.home .logo-menu a { background-image: none }

a#menu-toggle { position: absolute; top: 20px; right: 20px; width: 50px; height: 50px; }
a#menu-toggle #menu-toggle-cross { display: none }
a#menu-toggle.opened #menu-toggle-bars { display: none }
a#menu-toggle.opened #menu-toggle-cross { display: block }

@keyframes menu-open {
  from { left: 100% }
  to   { left: 20% }
}

.header .top-menu { 
  position: absolute; 
  top: 200px;
  left: 100%; 
}

.header.opened .top-menu {
  animation-name: menu-open;
  animation-duration: 0.3s;
  left: 20%;
  width: 60%;
}

.header.opened { height: auto; bottom: 0; position: fixed; width: 100% }

.top-menu a { 
  display: block; 
  padding: 5px 1vw 5px 1vw;
  font-weight: bold;
}
.top-menu a:hover { background: var(--bg) }

.top-menu ul.sub-menu { padding: 0 0 20px 40px; display: inline-block; }
.top-menu ul.sub-menu a { display: block; }
.top-menu ul.sub-menu ul.sub-menu { padding-bottom: 0px; padding-left: 30px }

.content { min-height: 400px }

.footer { padding: 20px; font-size: clamp(16px, 3vw, 24px); }
.footer { display: flex; flex-flow: row wrap; }

/* min-width: 0 overrides the default min-width: auto. this way, the
 * content of the div has no influence anymore on its width. Only the
 * flex-grow value will determine the width. Both have flex-flow=1, so
 * the first and third column will have equal widths. */
.footer .col-1, .footer .col-3 { flex: 1; min-width: 0 } 
.footer .hicle-logo { padding-right: 40px; }
.footer .hicle-logo > p { font-size: 60%; text-align: center; }
.footer .bottom-menu > p { font-size: 60%; text-align:center; padding-top: 20px; }
.footer img { max-width: 110px; height: auto; margin: 0 auto; display: block; }

.footer ul.menu { display: flex; flex-flow: row wrap; gap: 40px; justify-content: center; }
.footer ul.menu a { font-size: clamp(14px, 2vw, 16px); }
.footer ul.sub-menu { padding-top: 10px; margin: 0; font-size: 80% }

@media (min-width: 850px) {
  .header { justify-content: center; height: 80px; }
  .header-left { flex: 1; }
  .top-menu-holder { flex: 3; }
  .header-right { flex: 1; }
  .header .top-menu { position: relative; top: 20px; left: 0%; }
  .header-left, .header-right { display: flex; flex-flow: row nowrap; justify-content: center; }

  #menu-toggle { display: none; }
  .top-menu > div > ul { max-width: 800px; margin: 0 auto }
  .top-menu ul.menu { display: flex; flex-flow: row nowrap; }
  .top-menu ul.sub-menu { display: none; position: absolute; top: 100%; padding: 0; }
  .top-menu li { position: relative }
  .top-menu li:hover > ul.sub-menu,
  .top-menu li:hover > ul.sub-menu ul.sub-menu { display: block }
  .top-menu ul.sub-menu a { text-align: left; }

  .wp-block-columns { gap: 2em!important; }

  .content { 
    display: flex; 
    flex-flow: row nowrap; 
    justify-content: space-between;
	justify-content: center;
  }

  .wp-block-columns.is-layout-flex { justify-content: space-around; }
  .footer .col-2 { width: 800px; }*/
}

/* Margin
 * --------------------------------------*/
.content-wrapper > *:first-child { margin-top: 50px; }
.content-wrapper > figure:first-child { margin-top: inherit; margin-bottom: 0 }

.wp-block-columns { margin-bottom: 0px!important }

p { margin-bottom: 17px; }

/* Padding
 * --------------------------------------*/
.header-left { padding: 20px 1vw 0 1vw }
.header-right { padding: 120px 1vw 0 1vw }
@media (min-width: 850px) {
	.header-right { padding-top: 320px; }
}

.wp-block-columns.has-background { padding: 2.375em; }

.wp-block-columns { gap: 10px!important }

.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before { display: none; }

figure.wp-block-gallery { margin: 0; }