/***************************************
*
*___TRIPLEPRO CUSTOM_______________
*
*   Gordijnen aan huis (Algros)
*   www.gordijnenaanhuis.com
*
***************************************/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root
{
  --font-size             : 16px;
  /*--font-size               : clamp(12px, 0.73vw, 28px);*/
  --font-text             : Montserrat, sans-serif;
  --font-header           : Montserrat, sans-serif;

  --website-content-width : 81em;
  --element-padding       : calc(calc(100vw - var(--website-content-width)) / 2);

  --color-dark            : hsl(0 0% 12%);
  --color-text            : hsl(145deg 7.5% 40%);
  --color-light           : hsl(145deg 25% 97.5%);

  --color-link            : hsl(145deg 25% 55%);
  --color-link-hover      : hsl(15deg 65% 50%);

  --color-button          : hsl(15deg 65% 50%);
  --color-button-hover    : hsl(0 0% 100%);

  --color-1               : hsl(0 0% 0%);
  --color-2               : hsl(145deg 25% 55%);
  --color-3               : hsl(15deg 65% 50%);

  --color-transparent-1   : hsl(0 0% 0% / 70%);

  --shadow-s              : inset 0 1px 2px oklch(1 0 0 / 0.19), 0 1px 2px oklch(0 0 0 / 0.19), 0 2px 4px oklch(0 0 0 / 0.08);
  --shadow-m              : inset 0 1px 2px oklch(1 0 0 / 0.31), 0 2px 4px oklch(0 0 0 / 0.19), 0 4px 8px oklch(0 0 0 / 0.08);
}

/** BASE
 ***********************************************/

html
{
  color           : var(--color-dark);
  font-size       : var(--font-size);
  font-family     : var(--font-text);
  line-height     : 1.7;

  scroll-behavior : smooth;
}

h1
{
  color       : var(--color-light);
  font-size   : 2.25rem;
  font-weight : 700;
  font-family : var(--font-header);

  line-height : 1;
  margin      : 0 0 0.25em;
  @media (max-width : 48em)
  {
    font-size : 1.75rem;
  }
}

h2
{
  color       : var(--color-dark);
  font-size   : 1.25rem;
  font-weight : 600;
  font-family : var(--font-header);

  line-height : 1;
  margin      : 0 0 0.25em;
}

h3
{
  color       : var(--color-dark);
  font-size   : 1.25rem;
  font-weight : 500;
  font-family : var(--font-header);

  margin      : 0 0 0.25em;
}

p:last-of-type
{
  margin : 0;
}

a
{
  color : var(--color-link);
}

a:hover
{
  color      : var(--color-link-hover);
  transition : color 0.2s;
}

a.button
{
  color           : var(--color-light);
  font-weight     : 700;
  text-align      : center;
  text-decoration : none;
  text-transform  : uppercase;

  display         : inline-flex;
  align-items     : center;

  width           : max-content;
  padding         : 0.5em 2.5em;

  border          : 0.1em solid var(--color-button);
  background      : var(--color-button);

  border-radius   : 0.2em;

  transition      : 0.2s;
}

a.button:hover
{
  color      : var(--color-button);
  background : var(--color-button-hover);
}

/** MODULES
 ***********************************************/

/** ZOEKEN
 ***************************/

.module.zoeken
{
  font-size : 0.75em;
  width     : 25em;
}

.module.zoeken .search #input
{
  height       : 2.75em;
  margin       : 0.1em 0 0.2em;
  border-color : hsl(from var(--color-2) h s calc(l - 20));
}

.module.zoeken .search #input #search
{
  color            : var(--color-light);
  background-color : var(--color-2);
}

.module.zoeken .search #input:after
{
  background-color : hsl(from var(--color-2) h s calc(l - 20));
}

.module.zoeken .search #input:before
{
  color       : var(--color-2);
  line-height : 2em;
}

.module.zoeken .search output
{
  background-color : var(--color-dark);
}

.module.zoeken .search output
{
  background-color : var(--color-dark);
  border           : none;
}

.module.zoeken .search output ul li,
.module.zoeken .search output ul li .text
{
  color : var(--color-light);
}

.module.zoeken .search output ul li:focus,
.module.zoeken .search output ul li:hover
{
  color            : var(--color-light);
  background-image : linear-gradient(90deg, var(--color-2), transparent);
}

.module.zoeken .search output ul li em
{
  color : var(--color-2);
}

.module.zoeken .search output ul li:focus em,
.module.zoeken .search output ul li:hover em
{
  color : var(--color-dark);
}

/** ELEMENTEN
 ***********************************************/

[data-responsive] #hoofd > .element.text:empty
{
  margin  : 0;
  padding : 0;
}

.columns
{
  display   : flex;
  flex-flow : row wrap;
  gap       : 2em;
}

.column
{
  flex : 1 1 45%;
}

.columns img
{
  height     : 100%;
  object-fit : cover;
}

@media (min-width : 48em)
{
  .float_right
  {
    float         : right;
    width         : 22.5em;
    margin-left   : 2em;
    margin-bottom : 2em;
  }
}

/** BACKGROUND COLOR
 *************************************/

#hoofd > .element.menu.top
{
  color            : var(--color-light);
  background-color : var(--color-dark);
}

#hoofd > .element.text.contact
{
  color            : var(--color-light);
  background-color : var(--color-1);
}

#hoofd > .element.text.search
{
  background-color : var(--color-1);
}

#hoofd > .element.text.header_tekst:has(h1)
{
  color            : var(--color-light);
  background-color : var(--color-transparent-1);
  @media (max-width : 85em)
  {
    background-color : var(--color-dark);
  }
}

#hoofd > .element.text.afspraak
{
  color            : var(--color-light);
  background-color : var(--color-2);
}

#hoofd > .element.text.usp
{
  color            : var(--color-light);
  background-color : var(--color-1);
}

#hoofd > .element.text.main
{
  color            : var(--color-text);
  background-color : var(--color-light);
}

#hoofd > .element.text.main a
{
  color : var(--color-link-hover);
}

#hoofd > .element.text.main a:hover
{
  color : var(--color-link);
}

#hoofd > .element.text.main a.button
{
  color : var(--color-light);
}

#hoofd > .element.text.main a.button:hover
{
  color      : var(--color-link-hover);
  background : transparent;
}

#hoofd > .element.text.stappen
{
  color            : var(--color-light);
  background-color : var(--color-dark);
}

#hoofd > .element.text.advies_op_maat
{
  color            : var(--color-light);
  background-color : var(--color-2);
}

#hoofd > .element.text.footer
{
  color            : var(--color-light);
  background-color : var(--color-dark);
}

#hoofd > .element.text.footer h2
{
  color : var(--color-light);
}

#website_footer
{
  color            : var(--color-light);
  background-color : var(--color-dark);
}

/** CONTACT
 ***************************/

#hoofd > .element.text.contact
{
  text-align : right;
  position   : sticky !important;
  top        : 0 !important;

  height     : 3.5em !important;
  z-index    : 1001;
  @media (max-width : 48em)
  {
    text-align : center;
  }
}

#hoofd > .element.text.contact .button
{
  color            : var(--color-light);
  padding          : 0.25em 1.5em;
  margin           : 0.5em 0 0 1em;

  background-color : hsl(0deg 0% 12.5%);
  border           : 2px solid hsl(15deg 65% 50%)
}

#hoofd > .element.text.contact .button:hover
{
  border-color: var(--color-2);
}

/** CONTACT ZOEKEN
 ***************************/

#hoofd > .element.text.contact .module.zoeken
{
  display : inline-block;
  margin  : 0.7em 1em;
}

/** CONTACT ZOEKEN STRUCTURE
 ***************************/

#hoofd > .element.text.contact
{
  display               : inline-grid;
  grid-template-columns : auto 22.5em 27.5em;

  @media (max-width : 48em)
  {
    grid-template-columns : auto;
  }
}

/** MENU
 ***************************/

#hoofd > .element.menu
{
  top    : 3.5em !important;
  height : auto;
}

#hoofd > .element.menu .menu
{
  font-size : 1.2rem;
}

#hoofd > .element.menu ul ul
{
  background-color : var(--color-dark);
}

#hoofd > .element.menu ul a
{
  color          : var(--color-light);
  text-transform : uppercase;
}

#hoofd > .element.menu ul.responsive > li:not(.active) > a:hover
{
  color : var(--color-2);
}

#hoofd > .element.menu ul.responsive > li > a
{
  border : 1px solid transparent;
}

#hoofd > .element.menu ul.responsive > li.active > a
{
  border : 1px solid var(--color-light);
}

#hoofd > .element.menu ul ul li > a:hover,
#hoofd > .element.menu ul ul li.active > a
{
  color            : var(--color-light);
  background-color : var(--color-2);
  transition       : 0.3s;
}

#hoofd > .element.menu .bar_label
{
  font-size : 1em;
}

#hoofd > .element.menu label
{
  color     : var(--color-light);
  font-size : 0.7em;
}

@media (max-width : 85em)
{
  #hoofd > .element.menu ul.responsive
  {
    background-color : var(--color-dark);
  }
}

/** MENU|LOGO|PHONE
 ***************************/

#hoofd > .element.menu.top .website-menu-logo img
{
  object-fit : contain;
}

@media (min-width : 85em)
{
  #hoofd > .element.menu.top
  {
    place-items : center end;
  }

  #hoofd > .element.menu.top .website-menu-logo
  {
    position : relative;
    width    : 100%;
    height   : 100%;
  }

  #hoofd > .element.menu.top .website-menu-logo img
  {
    display  : block;

    position : absolute;
    top      : -1em;
    left     : 0;
    right    : 0;
    margin   : auto;
    height   : 5em;
  }
}

@media (max-width : 85em)
{
  #hoofd > .element.menu.top
  {
    padding-right : 0.5em;
  }

  #hoofd > .element.menu.top .website-menu-logo
  {
    text-align : center;
  }

  #hoofd > .element.menu.top .website-menu-logo img
  {
    margin-top : 0.5em;
    height     : 5em;
  }
}

/** MENU STRUCTURE
 ***************************/

@media (min-width : 85em)
{
  .element.menu.top
  {
    grid-template-columns : 5em 15em auto;
    grid-template-areas   : ". top_logo top_menu";
  }
}

@media (max-width : 85em)
{
  .element.menu.top
  {
    grid-template-columns : 5em auto 5em;
    grid-template-areas   : "top_menu top_logo .";
  }
}

.element.menu
{
  display : grid;
}

.element.menu.top .website-menu-logo
{
  grid-area : top_logo;
}

.element.menu.top .website-menu-menu
{
  grid-area : top_menu;
}

/** HEADER
 ***************************/
@media (min-width : 48em)
{
  #hoofd > .element.text.header
  {
    height : 70vh !important;
  }
}

/** HEADER_BLOCK
 ***************************/

@media (min-width : 85em)
{
  #hoofd > .element.text.header_tekst
  {
    text-align    : center;

    margin-top    : 55vh;
    margin-bottom : -100%;

    width         : max-content;
    height        : max-content !important;

    margin-left   : auto;
    margin-right  : auto;
  }
}

/** ADVIES OP MAAT
 ***************************/

#hoofd > .element.text.afspraak
{
  font-size  : 1.25em;
  text-align : center;
  min-height : 5.5em;
}

#hoofd > .element.text.afspraak a.button
{
  padding     : 0.4em 1.8em;
  margin-left : 0.5em;
  @media (max-width : 25em)
  {
    margin-left : 0;
  }
}

img.gordijnenbus
{
  position  : absolute;
  left      : calc(50% - 25px);
  bottom    : -0.45em;

  animation : drive 15s ease-in-out infinite;
}

@keyframes drive
{
  0%
  {
    left      : -10%;
    transform : rotateY(0deg);
  }
  25%
  {
    left      : 45%;
    transform : rotateY(0deg);
  }
  35%
  {
    left      : 45%;
    transform : rotateY(0deg);
  }
  49%
  {
    left      : 110%;
    transform : rotateY(0deg);
  }
  50%
  {
    left      : 110%;
    transform : rotateY(180deg);
  }
  98%
  {
    left      : -10%;
    transform : rotateY(180deg);
  }
  99%
  {
    left      : -10%;
    transform : rotateY(360deg);
  }
  100%
  {
    left      : -10%;
    transform : rotateY(0deg);
  }
}

/** UNIQUE-SELLING-POINTS
 ***************************/

#hoofd > .element.text.usp
{
  position : sticky !important;
  top      : 0 !important;

  z-index  : 500;
}

.unique-selling-points
{
  padding : 0 10em;
}

.unique-selling-points ol
{
  display         : flex;
  height          : 2em;
  margin          : 0;

  justify-content : space-between;
  flex-flow       : row;

  align-items     : center;

  overflow        : hidden;

  list-style-type : none;
}

.unique-selling-points ol li
{
  display         : flex;
  margin          : 0;
  padding         : 0;

  white-space     : nowrap;
  justify-content : center;
  align-items     : center;
}

.unique-selling-points ol li:before
{
  content     : "\e5ca";

  font-family : 'Material Symbols Outlined', sans-serif;
  font-size   : 1.5em;

  position    : relative;
  left        : -0.5rem;
}

@media (max-width : 85em)
{
  .unique-selling-points
  {
    position : absolute;
    padding  : 0;
  }

  .unique-selling-points ol
  {
    flex-flow       : column wrap;
    justify-content : center;
  }

  .unique-selling-points ol li
  {
    width           : 100%;
    justify-content : center;
    align-items     : center;
    animation       : scroll-horizontal 20s ease-out infinite alternate;
  }
}

@keyframes scroll-horizontal
{
  0%,
  20%
  {
    transform : translateX(0);
  }
  25%,
  45%
  {
    transform : translateX(-100%);
  }
  50%,
  70%
  {
    transform : translateX(-200%);
  }
  75%,
  100%
  {
    transform : translateX(-300%);
  }
}

/** HEADER
 ***************************/

#hoofd > .element.text.header img
{
  display : block;
  @media (min-width : 48em)
  {
    height     : 100%;
    width      : 100%;
    object-fit : cover;
  }
}

/** STAPPEN
 ***************************/

#hoofd > .element.text.stappen
{
  display               : grid;
  grid-template-columns : 1fr 1fr 1fr 1fr;
  @media (max-width : 48em)
  {
    grid-template-columns : auto;
  }
}

#hoofd > .element.text.stappen .stap
{
  text-align : center;
}

/** ADVIES OP MAAT
 ***************************/

#hoofd > .element.text.advies_op_maat
{
  text-align : center;
}

/** FOOTER
 ***************************/

#hoofd > .element.text.footer
{
  display               : grid;
  grid-template-columns : 1fr 1fr 1fr;
  @media (max-width : 48em)
  {
    grid-template-columns : auto;
  }
}

@media (min-width : 48em)
{
  #hoofd > .element.text.footer > div > div
  {
    place-self : center;
    width      : max-content;
  }
}

/** SCROLLBAR
 ***************************/

body[data-responsive] #hoofd > .element.text.scrollbar
{
  position : fixed !important;
  bottom   : 0;

  padding  : 0;

  z-index  : 1000;
}

.element.text.scrollbar .luna-scrollbar-track
{
  background-color : var(--color-dark);
}

.element.text.scrollbar .luna-scrollbar-thumb
{
  background-color : var(--color-link);
}

/** COPYRIGHT
 ***************************/

#website_footer
{
  left     : 0;
  bottom   : 1rem;
  width    : 100%;
  padding  : 0 2em;
  
  @media(max-width: 85em)
  {
    bottom : 0;
  }
}

#copyright
{
  --color-copyright : var(--color-link);
}

/** BLOKKEN
 ***************************/

.raambekledingen
{
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(17.5em, 1fr));
  grid-gap              : 1em;

  @media (max-width : 48em)
  {
    grid-template-columns : auto;
  }
}

.raambekledingen a
{
  text-align    : center;

  padding       : 1em;
  border-radius : 0.25em;

  box-shadow    : 0.1em 0.1em 0.5em hsl(0deg 0% 50% / 20%);
}

.raambekledingen a img
{
  width      : 100%;
  object-fit : cover;
}

.raambekledingen .title
{
  color           : var(--color-light);
  font-size       : 0.85em;
  font-weight     : 700;
  text-decoration : none;
  text-transform  : uppercase;
  text-align      : center;

  width           : 100%;
  padding         : 0.5em 2.5em;

  border          : 0.1em solid var(--color-button);
  background      : var(--color-button);

  border-radius   : 0.2em;

  transition      : 0.2s;
}

.raambekledingen a:hover .title
{
  color      : var(--color-button);
  background : transparent;
}

/** FORM
 *************************************/

form
{
  font-size : 0.8em;
}

form > ul > li
{
  margin-top    : 2em;
  margin-bottom : 2em;
}

form > ul > li > label
{
  font-size : 1.5em;
}

form input[type=submit]
{
  color      : var(--color-light);
  background : var(--color-link);
  box-shadow : var(--shadow-s);
}

form input[type=submit]:hover
{
  box-shadow : var(--shadow-m);
}

/** STRUCTURE
 ***********************************************/

/** PADDING
 *************************************/

#hoofd > .element.text.search,
#hoofd > .element.text.contact,
#hoofd > .element.text.header,
#hoofd > .element.text.usp,
#hoofd > .element.text.stappen,
#hoofd > .element.text.scrollbar
{
  padding : 0;
}

@media (min-width : 85em)
{
  #hoofd > .element.menu.top
  {
    padding : 1.25em 0;
  }
}

#hoofd > .element.text.usp
{
  padding : 0.25em 0 0.2em;
}

#hoofd > .element.text.header_tekst
{
  padding : 1em 2em;
  @media (max-width : 48em)
  {
    padding : 2em;
  }
}

#hoofd > .element.text.afspraak,
#hoofd > .element.text.advies_op_maat
{
  padding : 1em 2em 2.25em;
}

#hoofd > .element.text.main,
#hoofd > .element.text.stappen,
#hoofd > .element.text.footer
{
  padding : 2em;
}

@media (min-width : 85em)
{
  #hoofd > .element.text.search,
  #hoofd > .element.menu.top,
  #hoofd > .element.text.afspraak,
  #hoofd > .element.text.main,
  #hoofd > .element.text.advies_op_maat,
  #hoofd > .element.text.footer
  {
    padding-left : var(--element-padding);
  }

  #hoofd > .element.text.contact,
  #hoofd > .element.menu.top,
  #hoofd > .element.text.afspraak,
  #hoofd > .element.text.main,
  #hoofd > .element.text.advies_op_maat,
  #hoofd > .element.text.footer
  {
    padding-right : var(--element-padding);
  }
}

/** GRID
 ***************************/

@media (min-width : 85em)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : var(--element-padding) auto var(--element-padding);
    grid-template-areas   :
      "contact contact contact"
      "menu menu menu"
      "header_tekst header_tekst header_tekst"
      "header header header"
      "afspraak afspraak afspraak"
      "usp usp usp"
      "main main main"
      "stappen stappen stappen"
      "advies_op_maat advies_op_maat advies_op_maat"
      "footer footer footer"
      "scrollbar scrollbar scrollbar";
  }
}

@media (max-width : 85em)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : auto;
    grid-template-areas   :
      "contact"
      "menu"
      "header"
      "header_tekst"
      "afspraak"
      "usp"
      "main"
      "stappen"
      "advies_op_maat"
      "footer"
      "scrollbar";
  }
}

.element.menu.top
{
  grid-area : menu;
}

.element.text.contact
{
  grid-area : contact;
}

.element.text.header
{
  grid-area : header;
}

.element.text.header_tekst
{
  grid-area : header_tekst;
}

.element.text.afspraak
{
  grid-area : afspraak;
}

.element.text.usp
{
  grid-area : usp;
}

.element.text.main
{
  grid-area : main;
}

.element.text.stappen
{
  grid-area : stappen;
}

.element.text.advies_op_maat
{
  grid-area : advies_op_maat;
}

.element.text.footer
{
  grid-area : footer;
}

.element.text.scrollbar
{
  grid-area : scrollbar;
}