/* Styles */
:root {


  --color-white: white;
  --color-black: black;
  --color-darker-blue: #243041;
  --color-dark-blue: #39485D;
  --color-light-blue: #D2E0F2;
  --color-lighter-blue: #E2EDFC; 
  --color-lightest-blue: #F2F8FF;
  --color-orange: #FF5800;
  --color-orange-dark: #993600;
  --color-gray: #A7A7A7;
  --color-light-gray: #F7F7F7;

  --color-text: var(--color-dark-blue);

  color: var(--color-text);
  background: var(--white);
  --selection-color: var(--color-text);
  --placeholder-color: var(--color-gray);


  --font-family-serif: "Merriweather", "Heebo", "times new roman", serif;
  --font-family-sans-serif: "Montserrat", "Heebo", arial, sans-serif;
  --font-family-hebrew: "Heebo", "Montserrat", arial, sans-serif;
  --font-family-futura: futura-pt, sans-serif;

  font-family: var(--font-family-sans-serif);

  --base-size: 20;
  font-size: 20px;

  --font-size-100: calc(100rem / var(--base-size));
  --font-size-90: calc(90rem / var(--base-size));
  --font-size-70: calc(70rem / var(--base-size));
  --font-size-66: calc(66rem / var(--base-size));
  --font-size-60: calc(60rem / var(--base-size));
  --font-size-50: calc(50rem / var(--base-size));
  --font-size-42: calc(42rem / var(--base-size));
  --font-size-40: calc(40rem / var(--base-size));
  --font-size-39: calc(39rem / var(--base-size));
  --font-size-38: calc(38rem / var(--base-size));
  --font-size-34: calc(34rem / var(--base-size));
  --font-size-32: calc(32rem / var(--base-size));
  --font-size-31: calc(31rem / var(--base-size));
  --font-size-30: calc(30rem / var(--base-size));
  --font-size-28: calc(28rem / var(--base-size));
  --font-size-27: calc(27rem / var(--base-size));
  --font-size-26: calc(26rem / var(--base-size));
  --font-size-24: calc(24rem / var(--base-size));
  --font-size-22: calc(22rem / var(--base-size));
  --font-size-21: calc(21rem / var(--base-size));
  --font-size-20: calc(20rem / var(--base-size));
  --font-size-19: calc(19rem / var(--base-size));
  --font-size-18: calc(18rem / var(--base-size));
  --font-size-16: calc(16rem / var(--base-size));
  --font-size-17: calc(17rem / var(--base-size));
  --font-size-15: calc(15rem / var(--base-size));
  --font-size-14: calc(14rem / var(--base-size));
  --font-size-12: calc(12rem / var(--base-size));
  --font-size-10: calc(10rem / var(--base-size));

  --side-padding: 63px;
  --column-width: 1920px;
  --text-column-width: 1024px;
  --gap: 50px;


  --long-transition: 0.35s cubic-bezier(0.42, 0, 0.07, 1.01);
}

.content {
  min-height: var(--no-footer-height);
}

.bookmark {
  position: relative;
  top: -220px;
}

.hebrew {
  font-size: 115%;
}

/* Main title */
.main-title {
  font-family: var(--font-family-futura);
  font-size: clamp(20px, 5.2vw, 100px);
  text-transform: uppercase;
  color: white;
  font-weight: 600;
  line-height: 1.05;
}

.main-title strong {
  color: var(--color-orange);
  font-weight: inherit;;
}

/* Button */
.button {
  font-size: var(--font-size-22);
  font-weight: 500;
  padding: 14px 40px;
  color: var(--color-white);
  background: var(--color-orange);
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  transition: 0.2s all;
  position: relative;
  text-decoration: none;
}

.button--small {
  font-size: var(--font-size-20);
}

@media (pointer: fine) {
  .button:hover:not(:active) {
    background-color: var(--color-orange-dark);
    box-shadow: none;
    text-decoration: none;
  }
}

/* Overlay */
.bg-overlay {
  background: transparent linear-gradient(180deg, #1A2B43CE 0%, #1B25348B 100%) 0% 0% no-repeat padding-box;  
}


/* Line after */
.line-after:after {
  content: ''; display: block;
  border-top: 3px solid var(--line-color, var(--color-orange));
  margin: 16px 0;
  width: 53px;
  border-radius: 15px;
}

/* Forms */
input, select, textarea {
  border-radius: 10px;
  padding: 12px 28px;
  background: white;
  border: 1px solid white;
}

input:invalid:not(:placeholder-shown), 
select:invalid:not(:placeholder-shown), 
textarea:invalid:not(:placeholder-shown),
input[aria-invalid="true"], 
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--color-orange);
}

input[type="search"] {
  background: white url('../images/search.svg') right 20px top 50% no-repeat;

  [dir="rtl"] & {
    background-position: left 20px top 50%;
    background-image: url('../images/search-he.svg');

    &::placeholder {
      font-style: normal;
    }
  }  

  &::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }
  
}

select {
  background: white url('../images/down.svg') right 24px top 50% no-repeat;  

  [dir="rtl"] & {
    background-position: left 24px top 50%;
  }
}

*::placeholder {
  font-style: italic;
}

/* Tags */
.tags {
  display: flex; gap: 13px 9px;
  flex-wrap: wrap;
}


.tag {
  padding: 10px 25px;
  font-size: var(--font-size-16);
  font-weight: 500;
  color: var(--color, var(--color-text));
  border: 2px solid var(--color, var(--color-text));
  border-radius: 50px;
  white-space: nowrap;
  display: block;
  transition: 0.15s all;
}

.tag__wrapper input {
  position: absolute;
}

input:focus-visible ~ .tag {
  outline: 2px solid outset;  
}

.tag__wrapper {
  position: relative;
}

input:checked + .tag,
.tag[aria-selected="true"] {
  background: var(--color, var(--color-text));
  color: white;
}

input:not(:checked) ~ .uncheck {
  display: none;
}

@media (pointer: fine) {
  a.tag:hover {
    background: var(--color, var(--color-text));
    color: white;
  }
}

/* HTMX */
.htmx-request {
  cursor: wait;  
}

.htmx-request * {
  pointer-events: none;
}

/* Hebrew */
[dir="rtl"], [dir="rtl"] * {
  font-family: var(--font-family-hebrew);
}

[dir="ltr"], [dir="ltr"] * {
  font-family: var(--font-family-sans-serif);
}


/* Responsive version hide */
@media (max-width: 1000px) { #body .desktop { display: none } }
@media (min-width: 1000px) { #body .not-desktop { display: none } }
@media (max-width: 768px), (min-width: 1000px) { #body .tablet { display: none } }
@media (min-width: 769px) { #body .mobile { display: none; } }




/* General */
.serif { font-family: var(--font-family-serif); font-weight: 300; }
.sans-serif { font-family: var(--font-family-sans-serif); }
.futura { font-family: var(--font-family-futura); }
.light { font-weight: 300 }
.normal { font-weight: 400 }
.medium { font-weight: 500 }
.semibold {font-weight: 600;}
.bold { font-weight: 700 }
.underline {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.uppercase { text-transform: uppercase; }
.white-text {
  --color-text: white;
  color: var(--color-text);
}
.orange-text {
  --color-text: var(--color-orange);
  color: var(--color-text);
}

.size-100 { font-size: var(--font-size-100); }
.size-90 { font-size: var(--font-size-90); }
.size-70 { font-size: var(--font-size-70); }
.size-66 { font-size: var(--font-size-66); }
.size-60 { font-size: var(--font-size-60); }
.size-50 { font-size: var(--font-size-50); }
.size-40 { font-size: var(--font-size-40); }
.size-34 { font-size: var(--font-size-34); }
.size-30 { font-size: var(--font-size-30); }
.size-26 { font-size: var(--font-size-26); }
.size-24 { font-size: var(--font-size-24); }
.size-22 { font-size: var(--font-size-22); }
.size-21 { font-size: var(--font-size-21); }
.size-20 { font-size: var(--font-size-20); }
.size-18 {font-size: var(--font-size-18);}
.size-16 {font-size: var(--font-size-16);}
.size-14 {font-size: var(--font-size-14);}
.size-12 {font-size: var(--font-size-12);}


/* Mobile */
@media (max-width: 1000px) {
  :root {
    --side-padding: 25px;
  }

  .mobile-size-100 { font-size: var(--font-size-100); }
  .mobile-size-90 { font-size: var(--font-size-90); }
  .mobile-size-70 { font-size: var(--font-size-70); }
  .mobile-size-66 { font-size: var(--font-size-66); }
  .mobile-size-50 { font-size: var(--font-size-50); }
  .mobile-size-40 { font-size: var(--font-size-40); }
  .mobile-size-38 { font-size: var(--font-size-38); }
  .mobile-size-34 { font-size: var(--font-size-34); }
  .mobile-size-31 { font-size: var(--font-size-31); }
  .mobile-size-30 { font-size: var(--font-size-30); }
  .mobile-size-27 { font-size: var(--font-size-27); }
  .mobile-size-24 { font-size: var(--font-size-24); }
  .mobile-size-22 { font-size: var(--font-size-22); }
  .mobile-size-21 { font-size: var(--font-size-21); }
  .mobile-size-20 { font-size: var(--font-size-20); }
  .mobile-size-19 { font-size: var(--font-size-19); }
  .mobile-size-18 { font-size: var(--font-size-18); }
  .mobile-size-16 { font-size: var(--font-size-16); }
  .mobile-size-14 { font-size: var(--font-size-14); }
  .mobile-size-12 { font-size: var(--font-size-12); }
  .mobile-size-10 { font-size: var(--font-size-10); }

  .mobile-light { font-weight: 300 }
  .mobile-normal { font-weight: 400 }
  .mobile-medium { font-weight: 500 }
  .mobile-semibold {font-weight: 600;}
  .mobile-bold { font-weight: 700 }


  /* Forms */
  input, select, textarea {
    padding: 14px;
  }

  /* Tags */
  .tag {
    padding: 10px 17px;
    font-size: var(--font-size-14);
  }

  .tags {
    gap: 8px 3px;
  }

  /* Main title */
  .main-title {
    font-size: var(--font-size-42);
    font-weight: 600;
    line-height: 1.166666667;
    text-transform: none;
    font-family: var(--font-family-sans-serif);
  }
}