/*
Theme Name: Oil4
Theme URI: http://www.oil4.nl
Version: 1.0
Description: Child Theme
Author: Oil4
Author URI: http://www.oil4.nl
Template: enfold
*/

/* Baloo 2 font-fix weight */
@font-face {
  font-family: 'webfonts';
  src: url('https://cw.nogmeebezig.nl/wp-content/uploads/dynamic_avia/avia_type_fonts/webfonts/baloo-2-latin-400-normal.woff2') format('woff2'),
       url('https://cw.nogmeebezig.nl/wp-content/uploads/dynamic_avia/avia_type_fonts/webfonts/baloo-2-latin-400-normal.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'webfonts';
  src: url('https://cw.nogmeebezig.nl/wp-content/uploads/dynamic_avia/avia_type_fonts/webfonts/baloo-2-latin-500-normal.woff2') format('woff2'),
       url('https://cw.nogmeebezig.nl/wp-content/uploads/dynamic_avia/avia_type_fonts/webfonts/baloo-2-latin-500-normal.woff') format('woff');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'webfonts';
  src: url('https://cw.nogmeebezig.nl/wp-content/uploads/dynamic_avia/avia_type_fonts/webfonts/baloo-2-latin-600-normal.woff2') format('woff2'),
       url('https://cw.nogmeebezig.nl/wp-content/uploads/dynamic_avia/avia_type_fonts/webfonts/baloo-2-latin-600-normal.woff') format('woff');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'webfonts';
  src: url('https://cw.nogmeebezig.nl/wp-content/uploads/dynamic_avia/avia_type_fonts/webfonts/baloo-2-latin-700-normal.woff2') format('woff2'),
       url('https://cw.nogmeebezig.nl/wp-content/uploads/dynamic_avia/avia_type_fonts/webfonts/baloo-2-latin-700-normal.woff') format('woff');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'webfonts';
  src: url('https://cw.nogmeebezig.nl/wp-content/uploads/dynamic_avia/avia_type_fonts/webfonts/baloo-2-latin-800-normal.woff2') format('woff2'),
       url('https://cw.nogmeebezig.nl/wp-content/uploads/dynamic_avia/avia_type_fonts/webfonts/baloo-2-latin-800-normal.woff') format('woff');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

/* Koppen op SemiBold (600), conform ontwerp */
body#top #wrap_all .all_colors h1,
body#top #wrap_all .all_colors h2,
body#top #wrap_all .all_colors h3,
body#top #wrap_all .all_colors h4,
body#top #wrap_all .all_colors h5,
body#top #wrap_all .all_colors h6,
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

body#top #wrap_all .av-special-heading .av-special-heading-tag,
#top .av-special-heading .av-special-heading-tag {
  font-weight: 600;
}

/* Fotokolom: afgeronde hoeken, foto vult het vlak, vaste 3:2-verhouding */
#top .flex_column.cw-overlap-foto {
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
  position: relative;
  z-index: 2;
}

#top .flex_column.cw-overlap-foto .hr-invisible {
  display: none;
}

/* Desktop */
@media only screen and (min-width: 768px) {
  #top .entry-content-wrapper:has(> .flex_column.cw-overlap-foto) {
    display: flex;
    align-items: center;
  }

  #top .flex_column.cw-overlap-kaart {
    padding-right: calc(15.6% + 40px);
  }

  #top .flex_column.cw-overlap-foto {
    width: 49%;
    margin-left: -15.6%;
  }
}

/* Mobiel: kolommen stapelen, foto op volle breedte onder de kaart */
@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .flex_column.cw-overlap-kaart,
  .responsive #top #wrap_all .flex_column.cw-overlap-foto {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .responsive #top #wrap_all .flex_column.cw-overlap-foto {
    margin-top: 20px;
  }
}

/* ==========================================================================
   Hoofdmenu
   ========================================================================== */

#top #header .av-main-nav > li > a {
  font-weight: 400;
}

#top #header .main_menu ul:first-child > li > a {
  color: #252a2b;
}

#top #header .main_menu ul:first-child > li > a:hover,
#top #header .main_menu ul:first-child > li > a:focus {
  color: #58792a;
}

#top #header .main_menu ul:first-child > li.current-menu-item > a,
#top #header .main_menu ul:first-child > li.current_page_item > a,
#top #header .main_menu ul:first-child > li.active-parent-item > a {
  color: #252a2b;
}

/* Actieve lijn onder het woord in plaats van tegen de onderkant van de header
   (header is 88px hoog, de link heeft 13px horizontale padding) */
#top #header .av-main-nav > li > a .avia-menu-fx {
  bottom: 34px;
  left: 13px;
  width: calc(100% - 26px);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

body#top #wrap_all .avia-button[class*='avia-size-'] {
  padding: 16px 32px 14px;
  font-size: 16px;
  min-width: 0;
}

body#top #wrap_all .avia-button[class*='avia-size-']:hover,
body#top #wrap_all .avia-button[class*='avia-size-']:focus {
  background-color: #f8d663;
  border-color: #f8d663;
  color: #252a2b;
  opacity: 1;
}

/* ==========================================================================
   Links in content en footer
   ========================================================================== */

#top .avia_textblock a:not(.avia-button),
#top .av-special-heading a:not(.avia-button),
#top .entry-content-wrapper p a:not(.avia-button) {
  text-decoration: underline;
}

#top .avia_textblock a:not(.avia-button):hover,
#top .av-special-heading a:not(.avia-button):hover,
#top .entry-content-wrapper p a:not(.avia-button):hover {
  color: #58792a;
}

#top #footer-page .avia_textblock a:not(.avia-button):hover {
  color: #58792a !important;
}

/* Beeldlinks (o.a. het footerlogo) krijgen geen streep */
#top .avia_textblock a:has(img),
#top .entry-content-wrapper p a:has(img) {
  text-decoration: none;
}

/* ==========================================================================
   Vervolgpagina's: 1/1-kolommen op 10/12 van het grid
   Homepage en contact uitgesloten.
   ========================================================================== */

body#top:not(.home):not(.page-id-726) #main .av_default_container_wrap.main_color {
  background-color: transparent;
}

@media only screen and (min-width: 990px) {
  body#top:not(.home):not(.page-id-726) #wrap_all #main .av_default_container_wrap .flex_column_table.sc-av_one_full {
    display: block !important;
    float: none !important;
    width: 100% !important;
    min-width: 0;
    padding-left: calc(100% * 1 / 12);
    padding-right: calc(100% * 1 / 12);
    box-sizing: border-box;
  }

  body#top:not(.home):not(.page-id-726) #wrap_all #main .av_default_container_wrap .flex_column_table.sc-av_one_full > .flex_column {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100%;
    /* Zelfde ademruimte als zijkanten; post-CSS laadt ná child theme */
    padding-top: 80px !important;
    padding-left: 80px !important;
    padding-right: 80px !important;
  }

  body#top:not(.home):not(.page-id-726) #wrap_all #main .av_default_container_wrap .flex_column_table.sc-av_one_full img {
    max-width: 100%;
    height: auto;
  }
}

/* ==========================================================================
   Mobiel menu
   ========================================================================== */

.html_av-overlay-side #top .av-burger-overlay-scroll {
  background: linear-gradient(90deg, #e7eaac 0%, #c6e9f4 100%);
}

.html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul a {
  color: #252a2b;
  font-size: 24px;
  padding: 12px 32px;
}

.html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul li li a {
  padding-left: 52px;
}

.html_av-overlay-side #top #wrap_all div .av-burger-overlay-scroll #av-burger-menu-ul a:hover {
  background-color: transparent;
  color: #58792a;
  text-decoration: underline;
}

.html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul .current-menu-item > a,
.html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul .current_page_item > a {
  text-decoration: underline;
}

/* Hamburger- en kruisje-icoon even groot. Drechterkant van het icoon valt samen met de rand van de container, net als
   het logo aan de linkerkant. */
#top #header .av-burger-menu-main,
#top #header .av-burger-menu-main > a,
#top #header .av-burger-menu-main .av-hamburger,
#top #header .av-burger-menu-main .av-hamburger-box {
  transform: none;
}

#top #header .av-burger-menu-main .av-hamburger-box {
  width: 18px;
}

#top #header .av-burger-menu-main .av-hamburger-inner,
#top #header .av-burger-menu-main .av-hamburger-inner::before,
#top #header .av-burger-menu-main .av-hamburger-inner::after {
  width: 18px;
  height: 2px;
  border-radius: 2px;
}

#top #header .av-burger-menu-main .av-hamburger-inner {
  margin-top: -1px;
}

/* Alleen in gesloten stand uit elkaar; bij openen schuiven de balkjes van
   Enfold zelf op elkaar tot een kruisje */
#top #header .av-hamburger:not(.is-active) .av-hamburger-inner::before {
  top: -5px;
}

#top #header .av-hamburger:not(.is-active) .av-hamburger-inner::after {
  bottom: -5px;
}

@media only screen and (max-width: 767px) {
  .html_av-overlay-side .av-burger-overlay-scroll {
    width: 100%;
    transform: translateX(100%);
  }

  .html_av-overlay-side.av-burger-overlay-active-delayed .av-burger-overlay-scroll {
    transform: translateX(0);
  }

  /* Witte balk met logo bovenin, even hoog als de header (88px) zodat het
     kruisje er precies in valt */
  .html_av-overlay-side #top .av-burger-overlay-scroll::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88px;
    z-index: 20;
    background-color: #ffffff;
    background-image: url(img/comfortwoning-logo.svg);
    background-repeat: no-repeat;
    background-position: 32px center;
    background-size: 191px auto;
  }
}