/* Font */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
@font-face {
   font-family: cmu; /* set name */
   src: url(../fonts/cmunrm.woff2);
}

@font-face {
   font-family: cmu;
   src: url(../fonts/cmunbx.woff2);
   font-weight: bold;
}

/* Colour Palette */
:root {
   --heading-font: "cmu", sans-serif;
   --primary-font: "Source Sans 3", Sans;
   --white-color: #fffef6;
   --primary-color: #2b2724;
   --secondary-color: #37353b;
   --highlight-color: #a0c9c0;
   --highlight-color-light: #dafffd;
   font-size: 1.2rem;
}

body {
   font-family: var(--primary-font), "Fira Sans", sans-serif;
   background-color: white;
   margin: 0;
   padding: 0;
}

h1,
h2,
h3,
h4 {
   font-family: var(--heading-font);
}

p {
   font: var(--primary-font);
}

a {
   color: teal;
}

/* Heading styling */
/* Media query: only activate for >= md screens (768px+) */
@media (min-width: 768px) {
   h1 {
      text-align: center;
      display: flex;
      flex-direction: row;
      justify-content: center;
   }

   h1:before,
   h1:after {
      flex-grow: 1;
      height: 1px;
      content: "\a0";
      background-color: var(--white-color);
      position: relative;
      top: 0.55em;
   }

   h1:before {
      margin-right: 10px;
   }

   h1:after {
      margin-left: 10px;
   }
}

.subheading-color {
   color: var(--secondary-color);
}

/* Messages container and alert styling */
.site-messages {
   position: relative;
   z-index: 1056;
   pointer-events: none;
}
.site-messages--side {
   right: 1rem;
   left: auto;
   width: min(380px, 90vw);
}
.site-messages--side .alert {
   pointer-events: auto;
   margin-top: 0.5rem;
}
.alert {
   border: 1px solid rgba(0, 0, 0, 0.08);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
   border-radius: 10px;
}
.alert i {
   color: inherit;
}

/* Palette-aligned variants. Adjust to your variables. */
.alert-success {
   background-color: rgba(160, 201, 192, 0.18); /* uses highlight */
   border-color: rgba(160, 201, 192, 0.45);
   color: var(--highlight-color, #a0c9c0);
}
.alert-warning {
   background-color: rgba(255, 193, 7, 0.15);
   border-color: rgba(255, 193, 7, 0.45);
   color: #b88700;
}
.alert-info {
   background-color: rgba(55, 53, 59, 0.1);
   border-color: rgba(55, 53, 59, 0.25);
   color: var(--secondary-color, #37353b);
}
.alert-danger,
.alert-error {
   background-color: rgba(220, 53, 69, 0.12);
   border-color: rgba(220, 53, 69, 0.35);
   color: #dc3545;
}

/* Button styling */

.btn {
   border-radius: 1rem;
   transition: transform 0.2s ease;
   color: var(--highlight-color);
   border: #a0c9c0;
   text-transform: lowercase;
}

.frost-btn {
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: var(--highlight-color);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.frost-btn:hover {
   background: rgba(255, 255, 255, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.3);
   color: var(--highlight-color-light);
}

.accordion-button:not(.collapsed) {
   background-color: var(--highlight-color-light);
}

.accordion-button {
   background-color: var(--white-color);
}

/* Navbar */
.logo {
   max-width: 50px;
   max-height: 50px;
}

.navbar {
   background: var(--primary-color);
   border-bottom: 1px solid var(--secondary-color);
}

.navbar a {
   color: var(--white-color);
}

/* Navbar dropdown */
.navbar .dropdown-menu {
   background-color: var(--primary-color);
   border: 1px solid var(--secondary-color);
}

.navbar .dropdown-item:hover {
   color: var(--white-color);
   background-color: var(--secondary-color);
}

.btn:hover {
   transform: scale(1.05);
}

/* Add active state */
.navbar .nav-link.active {
   color: var(--highlight-color) !important;
   font-weight: 600;
}

/* Enhance hover effects */
.navbar .nav-link:hover {
   color: var(--highlight-color-light) !important;
   transition: color 0.3s ease;
}

/* Hero section */

#hero {
   background: linear-gradient(
      to bottom,
      var(--primary-color),
      var(--secondary-color)
   );
   color: var(--white-color);
   min-height: 85vh;
   border-bottom: 3px solid var(--primary-color);
}

/* Features Section */
/* #features {
} */

/* CTA Section */
#cta {
   border: 3px solid var(--primary-color);
   border-left: 0px;
   border-right: 0px;
   background-color: var(--secondary-color);
   color: var(--white-color);
}

/* FAQ Section */

#faq h3 {
   font-family: var(--primary-font);
   color: var(--primary-color);
}

/* #faq .accordion-body {
    background-color: var(--white-color);
} */

.frost-btn-dark {
   background: rgba(0, 0, 0, 0.45);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(0, 0, 0, 0.4);
   color: var(--white-color);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.frost-btn-dark:hover {
   background: rgba(0, 0, 0, 0.5);
   border: 1px solid rgba(0, 0, 0, 0.6);
   color: var(--highlight-color-light);
}

/* Features Section */
.feature-icon i {
   color: var(--highlight-color);
}

/* Footer */
footer {
   background-color: var(--primary-color);
   color: var(--white-color);
}

footer a {
   color: #a0c9c0;
}

/* Pagination */
.pagination .page-link {
   color: var(--highlight-color);
   border-color: var(--highlight-color);
}

.pagination .page-item.active .page-link {
   background-color: var(--highlight-color);
   border-color: var(--highlight-color);
   color: white;
}

.pagination .page-link:hover {
   background-color: var(--highlight-color-light);
   border-color: var(--highlight-color);
   color: var(--primary-color);
}

.pagination .page-item.disabled .page-link {
   color: #6c757d;
   border-color: #dee2e6;
}

/* Search and Filter Section */
.form-control:focus {
   border-color: var(--highlight-color);
   box-shadow: 0 0 0 0.2rem rgba(160, 201, 192, 0.25);
}

.form-select:focus {
   border-color: var(--highlight-color);
   box-shadow: 0 0 0 0.2rem rgba(160, 201, 192, 0.25);
}

.input-group-text {
   background-color: var(--highlight-color-light);
   border-color: var(--highlight-color);
   color: var(--primary-color);
}

/* Club Cards */
.card-body {
   display: flex;
   flex-direction: column;
}

.card-body .btn {
   margin-top: auto;
}

/* Custom Guidelines Card */
.custom-guidelines-card {
   background: linear-gradient(
      135deg,
      var(--highlight-color-light),
      var(--white-color)
   );
   border: 2px solid var(--highlight-color);
   border-radius: 12px;
   padding: 1.5rem;
   box-shadow: 0 4px 6px rgba(160, 201, 192, 0.1);
   position: relative;
   overflow: hidden;
}

.custom-guidelines-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
}

.guidelines-heading {
   color: var(--primary-color);
   font-family: var(--heading-font);
   font-weight: bold;
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
}

.guidelines-heading i {
   color: var(--highlight-color);
   font-size: 1.2em;
}

.custom-guidelines-card p {
   color: var(--secondary-color);
   margin-bottom: 1rem;
}

.custom-guidelines-card ul {
   color: var(--secondary-color);
}

.custom-guidelines-card li {
   margin-bottom: 0.5rem;
   position: relative;
   padding-left: 0.5rem;
}

.custom-guidelines-card li::marker {
   color: var(--highlight-color);
}

/* Custom icon styling */
.text-highlight {
   color: var(--highlight-color) !important;
}

/* Custom checkbox styling */
.form-check-input:checked {
   background-color: var(--highlight-color);
   border-color: var(--highlight-color);
}

.form-check-input:focus {
   border-color: var(--highlight-color);
   box-shadow: 0 0 0 0.25rem rgba(160, 201, 192, 0.25);
}

.form-check-input:checked:focus {
   box-shadow: 0 0 0 0.25rem rgba(160, 201, 192, 0.25);
}