/* CSS Variables for easy modification */
:root {
  /* WADHAM VARS FROM DESIGN */
  --twe-1: #c7d8d2;
  --twe-2: #819097;
  --twe-3: #e4603b;
  --twe-4: #a82c24;
  --twe-5: #222222;
  --twe-6: #ffffff;
  --twe-7: #f0f4f3;
  /* 
  CLIENT BRAND VARS
  > Modify these to fit your needs
  */
  --cb-primary: #819097;
  --cb-primary-0: #c7d8d2;
  --cb-primary-1: #c9cddd;
  --cb-primary-2: #f0f4f3;
  --cb-featured: #a82c24;
  --cb-featured-0: #e4603b;
  --cb-featured-1: #ff9440;
  --cb-featured-2: #ffb780;
  --cb-featured-3: #ffc599;
  --cb-featured-4: #ffdbbf;
  --cb-red: #da627d;
  --cb-white: var(--twe-6);
  --cb-text-color: var(--twe-5);
  /* CB VARS */
  --cb-featured-color: var(--cb-featured);
  --cb-primary-color: var(--cb-primary);
  --cb-secondary-color: var(--cb-primary);
  --cb-link-color: var(--cb-featured-0);
  --cb-button-padding: 8px 16px 8px 16px;
  --cb-font-size: clamp(16px, 2vw, 18px);
  --cb-button-font-size: clamp(16px, 2vw, 18px);
  --cb-button-border-radius: 2px;
  --cb-grid-gap: 16px;
  --cb-grid-min-width: 250px;
  --cb-section-padding: 16px;
}
*,
*::before,
*::after {
  box-sizing: border-box !important;
}
/* Grid System */
.cb-grid {
  display: grid;
  grid-gap: var(--cb-grid-gap);
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--cb-grid-min-width), 1fr)
  );
}
/* style="--cb-grid-columns:4" */
.cb-grid.cb-grid-columns {
  grid-template-columns: repeat(
    var(--cb-grid-columns),
    minmax(var(--cb-grid-min-width), 1fr)
  );
}
/* helpers */
.cb-d-none {
  display: none;
}
/* Button Styles */
.nav__list li .cb-button,
.mobile-heading-extra .cb-button,
input[type="submit"].cb-button,
.cb-button {
  padding: var(--cb-button-padding);
  font-size: var(--cb-button-font-size);
  border-radius: var(--cb-button-border-radius);
  cursor: pointer;
  text-align: center;
  text-decoration: none !important;
  display: inline-block;
  /* border: 1px solid; */
  border-radius: 80px;
  min-width: 145px;
  color: var(--cb-text-color);
  transition: all 0.3s ease;
  font-weight: 500;
}
.nav__list li .cb-button:hover,
.mobile-heading-extra .cb-button:hover,
input[type="submit"].cb-button:hover,
.cb-button:hover {
  box-shadow: var(--twe-4) 5px 5px;
}
.nav__list li .cb-button.cb-button-featured,
.mobile-heading-extra .cb-button.cb-button-featured,
input[type="submit"].cb-button-featured,
.cb-button.cb-button-featured {
  background-color: var(--twe-5);
  color: var(--twe-6);
}
.cb-button.cb-button-primary {
  background-color: var(--twe-1);
  color: var(--twe-5);
}
.cb-button.cb-button-primary:hover {
  background-color: var(--twe-1);
}
.cb-button.cb-button-secondary {
  background-color: white;
  color: var(--twe-5);
}
.cb-button.cb-button-secondary:hover {
  background-color: white;
}
.cb-button.cb-button-link {
  background-color: transparent;
  color: var(--twe-5);
  text-decoration: underline;
  border: none;
}
.cb-button.cb-button-link:hover {
  color: black;
}
/* arrow button */
.cb-button.twe-button {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
/* CONTAINER */
.cb-container {
  max-width: var(--cb-container-width);
  margin: 0 auto;
}
/* FONTS */
.twe-slogan {
  font-family: "Anton", serif;
  font-size: clamp(40px, 8vw, 120px);
  font-weight: 400;
  line-height: clamp(60px, 10vw, 180px);
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  text-transform: uppercase;
}
/* INPUTS */
input[type="radio"] {
  accent-color: var(--twe-4); 
}