/*!
Theme Name:         MOOS Tech
Theme URI:          https://www.moos-tech.be/
Description:        Custom thema voor MOOS Tech, door Redduck
Version:            1.0.0
Author:             Redduck
Author URI:         https://www.redduck.nl
Tags: 				editor-style, featured-images,post-formats, translation-ready
License:            MIT License
License URI:        https://www.opensource.org/licenses/mit-license.php
Template:     		redduck-2cv
Text Domain:  		redduck-redduck-moos-tech
*/



:root {
  --moosorange: #f26522;
  --moosorange-darker: #e45817;
  --moosgray: #20282c;
  --mooslight: #f7f7f6;

  --base-font-family: "Raleway", sans-serif;
  --header-font-family: var(--base-font-family);

  --bs-body-font-size: 1.125rem;
  --bs-body-font-weight: 500;

  /* Base */
  --body-bg: #ffffff;
  --text-color: #444;
  --text-color-light: #777;
  --title-color: #000;

  --link-color: var(--moosorange);
  --link-color-hover: var(--text-color);

  --border-color: #e7e9ea;
  --section-padding: clamp(3.5rem, 6vw, 5.5rem);

  --rd-h1-min: 1.8rem;  --rd-h1-max: 2.5rem;
  --rd-h2-min: 1.5rem;  --rd-h2-max: 2rem;
  --rd-h3-min: 1.25rem; --rd-h3-max: 1.375rem;
  --rd-h4: 1.2rem;
  --rd-h5: 1.1rem;
  --rd-h6: 1rem;


  /* Header */
  --header-bg: #FFF;
  --header-color: #000;
  --header-accent-color: var(--moosorange);
  --header-height: 4rem;
  --header-accent-color: var(--moosorange);
  --header-font-size: .925rem;
  --header-letter-spacing: 1px;
  --header-text-transform: none;
  --header-font-weight: 600;

  /* Footer */
  --footer-bg: var(--moosgray);
  --footer-border-color: var(--moosgray);
  --footer-title-color: var(--moosorange);
  --footer-text-color: #FFF;
  --footer-link-color: #FFF;
  --footer-button-bg: var(--moosorange);
  --footer-button-text: #FFF;


  /* Brand */
  --accent-color: #f26522;
  
  /* Buttons */
  --button-bg: var(--moosorange);
  --button-bg-hover: var(--moosorange-darker);
  --button-text: #fff;
  --button-text-transform: none;
  --button-text-hover: #fff;
  --button-font-weight: 600;
  --button-alt-text-color: var(--moosorange);
  --button-alt-border-color: var(--button-alt-text-color);
  --button-alt-text-color-hover: var(--moosorange-darker);
  --button-alt-border-color-hover: var(--button-alt-text-color-hover);

}



h1,
h2,
h3 {
  font-weight: 600;
}
h4,
h5 {
  font-weight: 700;
}

.site-header .main-navigation ul li.cta {
  border-bottom: none;
}

.site-header a.custom-logo-link {
  width: 150px;
}

.site-header .main-navigation ul li.cta a {
  background: var(--button-bg);
  color: var(--button-text);
  padding: .67rem 1rem;
  border-radius: var(--button-border-radius);
  margin: 2rem 0 0;
}

.site-header .main-navigation ul li.cta a:hover {
  background: var(--button-bg-hover);
  color: var(--button-text-hover);
}

.site-header .main-navigation ul li.cta a::after {
  display: none;
}


.hero {
  position: relative;
  display: block;
  overflow: hidden;
  padding-block: calc(12vh + 5rem) 12vh;
  padding-block: calc(12svh + 5rem) 12svh;
}
.hero .post-thumbnail,
.hero .post-thumbnail::after,
.hero .post-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

.hero .post-thumbnail::after {
  content: "";
  background: rgba(0,0,0,.5);
}

.hero .hero-inner {
  position: relative;
  color: #FFF;
  font-size: 1.5rem;
  width: min(768px, 100%);
  text-shadow: 1px 1px 0 rgba(0,0,0,.1);
}
.hero .hero-inner h1 {
  color: #FFF;
  font-weight: 700;
}
.hero .hero-inner {
  --button-alt-text-color: #FFF;
  --button-alt-border-color: #FFF;
  --button-alt-text-color-hover: #FFF;
  --button-alt-border-color-hover: #FFF;
}


body:not(.has-blocks):not(.home) .site-content {
  padding-top: 12rem;
}

body.home .entry-content,
body.has-blocks .entry-content {
  width: min(768px, 100%);
  padding-block: calc(var(--section-padding) / 2) var(--section-padding);
  margin-inline: auto;
}

body.home section.alignfull {
  padding-block: var(--section-padding);
}

section.home-services,
section.blocks:nth-child(even) {
  background: var(--mooslight);
}

.section-intro {
  margin-bottom: 3rem;
}

.section-label {
  color: var(--moosorange);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .925rem;
}

.service-card {
  background: #FFF;
  padding: 1.5rem;
  min-height: calc(100% - 1.5rem);
  margin-bottom: 1.5rem;
  box-shadow: 0 2px .75rem rgba(0,0,0,.1);
  display: flex;
  flex-direction: column;  
}

.service-card .icon {
  color: var(--accent-color);
  font-size: 3rem;
}

.service-card-link {
  margin-top:auto;
}


.home-about {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--section-padding) * 1.5);
}


.home-about .post-thumbnail,
.home-about .post-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-about .post-thumbnail img {
  opacity: .3;
}

.home-about .row {
  position: relative;
}

body.page-id-25 .wp-block-media-text {
  margin-block: var(--section-padding);
}

section.blocks {
  padding-block: var(--section-padding);
}

section.blocks.type-1 .row {
  align-items: center;
}

section.blocks.type-1.no-thumbnail .row,
section.blocks.type-3 .row {
  width: min(768px, 100%);
  margin-inline: auto;
}


  section.blocks .post-thumbnail img {
    aspect-ratio: 2 / 1;
    inline-size: 100%;
    object-fit: cover;
    margin-bottom: 1rem;
  }

.service-card,
article.subscription,
section.blocks .post-thumbnail img {
  border-radius: var(--border-radius);
}


@media screen and (min-width: 992px) {
  body:not(.sticky) .site-header .row {
    padding-block: 1rem;
  }
  .site-header .main-navigation ul li.cta a {
    margin: 0 0 0 2rem;
  }
  section.blocks.type-1 .row {
    --bs-gutter-x: 3rem;
  }

  section.blocks.type-1:nth-child(odd) .row .col {
    order: -1;
  }

  section.blocks .post-thumbnail img {
    aspect-ratio: 1 / 1;
    margin-bottom: 0;
  }
}




section.blocks.type-2 h2 {
  margin-bottom: 2rem;
  text-align: center;
}

section.blocks.type-2 .subscription {
  padding: 2rem;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px .75rem rgba(0,0,0,.1);
}
section.blocks.type-2 .subscription h3 {
  color: var(--accent-color);
  font-size: 2rem;
}
section.blocks.type-2 .subscription .text {
  font-weight: 700;
  margin-bottom: 2rem;
}
section.blocks.type-2 .subscription .extra {
  margin-bottom: 2rem;
}



.cta-contact {
  padding-top: var(--section-padding);
}


@media screen and (min-width:1200px) {
  section.alignfull > .container {
    --bs-gutter-x: .75rem;
  }
}