/* 
  Custom styles for the college coach theme
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-black);
}

:root {
  --color-black: #000000;
  --color-light-gray: #f4f4f4;
  --color-base-500: #ff7648;
  --color-beige: #f4ece1;
  --color-gray: #808080;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
}

.max-w-4xl {
  max-width: 1024px !important;
}

@media (min-width: 768px) {
  .sidebar-profile {
    max-width: 35% !important;
  }
}

.pt-4 {
  padding-top: 1rem;
}

.pt-8 {
  padding-top: 2rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-8 {
  gap: 2rem;
}

.text-black {
  color: var(--color-black);
}

.text-base-500 {
  color: var(--color-base-500);
}

.text-beige {
  color: var(--color-beige);
}

.bg-base-500 {
  background-color: var(--color-base-500);
}

.bg-beige {
  background-color: var(--color-beige);
}

.w-full {
  width: 100%;
}

.base-cta {
  background-color: var(--color-base-500);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: background-color 0.3s ease;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.5;
}

.base-cta:hover {
  background-color: #e6693c;
}

.hover-base-500:hover {
  background-color: #e6693c;
}

.active-base-500 {
  background-color: #e6693c;
}

.cta-secondary {
  background-color: transparent;
  color: var(--color-base-500);
  border: 1px solid var(--color-base-500);
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: background-color 0.3s ease;
  cursor: pointer;
  font-size: 16px;
}

.cta-secondary:hover {
  background-color: var(--color-base-500);
  color: white;
}

/* Interest Form */

.input-base {
  border: 1px solid var(--color-gray);
  border-radius: 5px;
  padding: 10px;
  width: 100%;
  background-color: var(--color-light-gray);
}

.input-base:focus {
  outline: none;
}

.input-base::placeholder {
  color: var(--color-gray);
}

/* Custom checkbox styles for event selection */
.event-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-base-500);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
  vertical-align: middle;
  margin-right: 6px;
}
.event-checkbox:checked {
  background-color: var(--color-base-500);
  border-color: var(--color-base-500);
}
.event-checkbox:checked::after {
  content: '';
  display: block;
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.event-checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 2px #ffe2d6;
}

/* Messages */

.text-red-600 {
  color: #ff0000;
}

.text-green-600 {
  color: #00ff00;
}