@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* theme colors
/*------------------------*/

:root {
    --textDarker: #1e282d;
    --textDark: rgba(38, 50, 56, 1);
    --textMedium: rgba(38, 50, 56, 0.8);
    --borderMedium: rgba(38, 50, 56, 0.2);
    --borderLight: rgba(38, 50, 56, 0.075);
    --accent: #f4b500;
    --accentDarker: #e6ac00;
    --light: rgba(38, 50, 56, 0.035);
}
/*------------------------*/
/* turn grayscale off
/*------------------------*/

img {filter: grayscale(0);}

/*------------------------*/
/* colorize_image
/*------------------------*/

.colorize_image {filter: contrast(1) sepia(1) hue-rotate(160deg) grayscale(0.8)!important;}

/*------------------------*/
/* black_2_textDark
/*------------------------*/

.map::after, .black_2_textDark {filter: contrast(0.7) sepia(1) hue-rotate(160deg)!important;}

/*------------------------*/
/* black_2_textMedium
/*------------------------*/

.black_2_textMedium {filter: contrast(0.3) sepia(0.3) hue-rotate(160deg) brightness(1.4)!important;}

/*------------------------*/
/* black_2_accent
/*------------------------*/

.black_2_accent {filter: contrast(0.11) sepia(1) hue-rotate(340deg) contrast(13)!important;}


/*------------------------ CSS overrides below ------------------------*/
/*------------------------*/
/* base - general
/*------------------------*/
* {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: clamp(14px, 2vw, 16px); line-height: 1.7; height: 100%; scroll-behavior: smooth; background: var(--light); scroll-padding-top: 10rem;}
body {font-size: 1rem; background: var(--light);}
.innerbody {margin: 0 auto; background: white; }
.innerbody, .innerbody header {max-width: 100%;}
.container {margin: 0 auto; max-width: 84rem; padding: 0 clamp(1rem,4vw,3rem);}
img, figure, video, audio {max-width: 100%; display: block;}
a {color: var(--textMedium);}
h1, h2 {line-height: 1.1; color: var(--textDark);}
a.logo {line-height: 1.15; color: var(--textDark);}
h1 {font-size: 3.25rem; margin-bottom: 1rem;}
h1 + p {padding-top: 0.5rem;}
h2 {font-size: 2.4rem; margin-top: 2rem; margin-bottom: 1.25rem;}
h2:first-child {margin-top: 0;}
section.docs h2,
.container.post h2,
h3 {color: var(--textDark); line-height: 1.3; font-size: 1.7rem; margin-top: 0; margin-bottom: 0.4rem; padding-top: 1rem; font-weight: bold;}
h2 + h3 {padding-top: 0;}
section.docs h3,
.container.post h3,
h4 {color: var(--textDark); line-height: 1.3; font-size: 1.25rem; margin-top: 0; margin-bottom: 0.4rem; padding-top: 1rem; font-weight: bold;}
h5 {color: var(--textDark); line-height: 1.4; font-size: 1.1rem; margin-bottom: 0.2rem; padding-top: 1rem;}
div + h3 {padding-top: 3rem;}
p, ul, ol, blockquote, pre, .box.map, figure, details {margin-bottom: 1em;}
ul {margin-left: 2rem;}
ol {margin-left: 2rem;}
hr {margin: 3.5rem 0; height: 1px; background: rgba(0,0,0,0.1); border: 0;}
p img, p img:last-child {border-radius: 1rem; overflow: hidden; margin-block: 2.25rem;}
pre {
    overflow: auto; 
    background: var(--light); 
    padding: 0.75rem 1rem; 
    border: 0.1rem solid var(--light); 
    border-radius: 0.25rem; 
    font-size: 0.95rem;
    white-space: pre-wrap; 
}
blockquote {font-style: italic; border-left: 0.25rem solid var(--borderMedium); padding-left: 1.25rem;}
video, audio {width: 100%;}
.sr-only {display: none!important;}
:not(pre) > code {
    background: var(--light);
    padding: 0.15rem 0.3rem;
    border: 0.1rem solid var(--light);
    border-radius: 0.25rem;
}

/*------------------------*/
/* Fonts
/*------------------------*/

:root {
    --fontTitles: 'DM Sans', sans-serif;
    --fontBody: 'DM Sans', sans-serif;
}

/*------------------------*/
/* buttons
/*------------------------*/

.button, button {background: var(--textDark);}

.button.secondary {
  background: white;
  color: var(--textDark);
}

/*------------------------*/
/* header
/*------------------------*/
/*------------------------*/
/* bgimage
/*------------------------*/
header + section:not(.bgimage) {padding-top: 9rem!important;}
section.bgimage .container h3 {color: white;}
section.bgimage .container h4 {color: white;}

.container {margin: 0 auto; max-width: 84rem; padding: 0 clamp(1rem,4vw,3rem);}

/*------------------------*/
/* Reviews
/*------------------------*/
.company-image {
  width: 100px;          /* adjust to taste */
  height: 50px;          /* adjust to taste */
  object-fit: contain; /* cover, contain, fill, or none */
  border-radius: 0.5rem; /* optional rounding */
  display: block;        /* remove inline-img gaps */
}

/*------------------------*/
/* Posts
/*------------------------*/
/*------------------------*/
/* brick post
/*------------------------*/
section.post .container {max-width: 80rem;}
section.post .container h1 {text-align: center;}
section.post .container h1:last-child {margin-bottom: 3rem;}
section.post .container .featuredimage {border-radius: 1rem; margin-bottom: 3rem; object-fit: contain;}
section.post .container.wide {max-width: 62rem;}
section.post .container.post p:first-child,
section.post .container.post p:first-child a {color: var(--textMedium); font-size: 1rem; line-height: 1.7;}
section.post .container .meta {justify-content: center; margin-bottom: 2rem; margin-top: -0.75rem;}

/*---------------------------*/
/* Services
/*---------------------------*/
section.service .container {max-width: 100%;}
section.service .container h1 {text-align: center;}
section.service .container h1:last-child {margin-bottom: 3rem;}
section.service .container .featuredimage {border-radius: 1rem; margin-bottom: 3rem; object-fit: contain;}
section.service .container.wide {max-width: 62rem;}
section.service .container.service p:first-child,
section.service .container.service p:first-child a {color: var(--textDark); font-size: 1.52rem; line-height: 1.4;}
section.service .container .meta {justify-content: center; margin-bottom: 2rem; margin-top: -0.75rem;}

/*------------------------*/
/* brick contact
/*------------------------*/
section.contact .container {
  max-width: 50rem;
}

/*------------------------*/
/* brick blocks
/*------------------------*/
ul.blocks li.hasimage div.img {
  margin-top: -1.5rem;
  margin-bottom: -1.5rem;
  margin-left: -1.5rem;
  margin-right: 0rem;
  position: absolute; 
  z-index: -2;
}

/*------------------------*/
/* brick title
/*------------------------*/
section.title .container h1,
section.title .container h2,
section.title .container h3,
section.title .container h4 {
  margin-bottom: 2rem;
}
section.title .container p a.button.secondary {
  margin-top: 2rem;
  margin-bottom: 0rem;
}
section.title:not(.bgimage) {padding-bottom: 0rem;}

/*------------------------*/
/* mobile menu
/*------------------------*/
body.mobilemenu header + section:not(.bgimage) {padding-top: 7rem!important;}
body.mobilemenu header > div.container > div.nav {
    grid-area: menu; 
    position: fixed;
    background: var(--textDark);
    color: white;
    transform: translateX(100%);
    width: 70%;
    right: 0;
    max-width: 20rem;
    transition: all 0.2s ease-in-out;
    z-index: 2;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

header .navnav.languages-mobile {display: none;}
body.mobilemenu header .navnav.languages-mobile {display: inline-block;}

/* Container positioning */
body.mobilemenu header .navnav.languages-mobile {
  position: relative;
  display: inline-block;
  max-width: 70px; /* adjust as needed */
  width: 100%;
}

/* Hide native arrow, add custom styling */
body.mobilemenu header .navnav.languages-mobile .styled-select {
  /* Remove native styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Box model & typography */
  width: 100%;
  padding: 0.5rem 1.5rem 0.5rem 0.8rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--textDarker);

  /* Background & border */
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 0.3rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);

  /* Smooth transitions */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Custom dropdown arrow */
body.mobilemenu header .navnav.languages-mobile::after {
  content: '▾';
  position: absolute;
  top: 50%;
  right: 0.8rem;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 1rem;
  color: var(--textDarker);
}