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

/*------------------------*/
/* theme fonts overrides
/*------------------------*/
@font-face {
    font-display: swap;
    font-family: 'Signika';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/signika-v28-latin-ext-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/merriweather-sans-v27-latin-ext-regular.woff2') format('woff2');
}

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

/*------------------------*/
/* theme colors
/*------------------------*/
:root {
    --textDarker: #1e282d;
    --textDark: rgba(38, 50, 56, 1);
    --textMedium: rgba(38, 50, 56, 0.7);
    --borderMedium: rgba(38, 50, 56, 0.2);
    --borderLight: rgba(38, 50, 56, 0.075);
    --accent: #fc8e7b;
    --accentDarker: #ff735b;
    --light: rgba(38, 50, 56, 0.035);
}
/*------------------------*/
/* turn grayscale off
/*------------------------*/
img {filter: grayscale(0);}

/*------------------------*/
/* colorize_image - turned off
/*------------------------*/
.colorize_image {filter: none!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 ------------------------*/

/*------------------------*/
/* change header paddings to reduce overall size
/*------------------------*/
header > .container {padding-top: 1rem; padding-bottom: 1rem; position: relative;}

/*------------------------*/
/* adjust the background and positioning of the main intro section on homepage
/*------------------------*/
section.intro {
    position: relative;
    text-align: center;
    background: #ffd2a3;
    min-height: 68vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*------------------------*/
/* change dark footer background shade
/*------------------------*/
footer.dark {background: #222222;}

/*------------------------*/
/* make two logos in the footer side by side and adjust their sizes
/*------------------------*/
footer.dark .footer-logos {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 350px;
}

footer.dark .footer-logos a.logo:nth-child(1) img {
    width: 250px;
    height: auto;
}

footer.dark .footer-logos a.logo:nth-child(2) img {
    width: 150px;
    height: auto;
}

/*------------------------*/
/* custom css to frame the text in pink thick border
/*------------------------*/
.text-frame {
  border: 25px solid #fde3de; /* thick opaque pink border */
  padding: 2rem;             /* space inside */
  text-align: center;        /* center all text */
  justify-items: center;
  max-width: 800px;          /* keeps it from stretching too wide */
  margin: 0 auto;            /* center horizontally */
}

/*------------------------*/
/* custom css to frame the text in pink thick border
/*------------------------*/
section.image .twocols .image img {
    max-width: 450px;
    width: 100%;
    height: auto;
    margin: auto;
}

/*------------------------*/
/* make the wide brick a bit wider
/*------------------------*/
section.wide {max-width: 85rem; margin-left: auto; margin-right: auto;}

/*------------------------*/
/* change avatar size and name font sizein reviews section
/*------------------------*/
ul.reviews li div.box .avatar {height: 6rem; width: 6em;}
ul.reviews li div.box h3 {margin: 0; line-height: 1.45; font-size: 1.1rem; padding: 0;}

/*------------------------*/
/* services grid add image filter
/*------------------------*/
ul.blocks li.hasimage div.img {filter: opacity(60%)}

/*------------------------*/
/* add accents to social buttons outside of footer
/*------------------------*/
ul.buttons.social .button {background: var(--accent); justify-items: center ;}

/*------------------------*/
/* adjust the elements in contact section
/*------------------------*/
header + section:not(.bgimage) {
    padding-top: 8rem !important;
}

section.title:not(.bgimage)  {
    padding-bottom: 2rem;
}

section.contact div.container.twocols  {
    gap: 2.5rem;
    text-align: left;
    text-justify: distribute;
}

section.contact div.container.twocols div.box {
    padding: 2rem;
}

section.contact div.container.twocols div.text  {
    max-width: 35rem;
    margin-left: 2rem;
    margin-right: 2rem;
}

/* section.contact div.container.twocols ul.buttons.social {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
} */

/*------------------------*/
/* change background on the about page
/*------------------------*/
section.image.alt {
    background: #ffffff;
    border-bottom: none;
}

html, body {
  height: 100%;
  margin: 0;
}

.innerbody {
  min-height: 100%;            /* take full viewport height */
  display: flex;
  flex-direction: column;
}

.innerbody section {
  flex: 1;                     /* grow to push footer down */
}

body.mobilemenu header > div.container > div.nav {
    grid-area: menu;
    position: fixed;
    background: rgb(34 34 34);
    transform: translateX(100%);
    width: 60%;
}

/*------------------------*/
/* override the behaviour of language selector - requires editing baseof.html as well
/*------------------------*/


body.mobilemenu header > div.container > div:nth-child(3) {
    padding-top: 0.19rem;
}

/* Flatten languages list */
header .navnav.languages.inline ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;       /* smaller gap between items */
    margin: 0;
}

/* Links and current language styling */
header .navnav.languages.inline ul li a,
header .navnav.languages.inline ul li span {
    font-size: 1rem;
    color: inherit;
    display: inline-block;
    padding: 0 0.3rem;      /* minimal padding */
    margin: 0;               /* remove any theme margin */
}

/* Optional: differentiate active language */
header .navnav.languages.inline ul li.active span {
    font-weight: bold;
    color: var(--accent);  /* or whatever color you want */
}

/* Ensure visibility on mobile */
body.mobilemenu header .navnav.languages.inline {
    display: flex !important;
}




/*------------------------*/
/* change size of the checkbox in contact form
/*------------------------*/

#contactform .checkbox label {
  font-size: 10px;
  text-align: justify;
}