/* @import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"); */
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  height: 100%;
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}

:root {
  /* Color Variables */
  --white: rgb(255, 255, 255);
  --primary-01: rgba(102, 73, 20, 1); /* Dark Primary */
  --primary-02: rgba(144, 110, 49, 1); /* Medium Primary */
  --primary-03: rgba(243, 211, 96, 1); /* Light Primary/Accent */
  --gray-800: rgba(28, 25, 23, 1);
  --gray-700: rgba(68, 64, 60, 1);
  --gray-600: rgba(87, 83, 78, 1);
  --gray-500: rgba(121, 113, 107, 1);
  --gray-400: rgba(169, 162, 157, 1);
  --gray-300: rgba(215, 211, 208, 1);
  --gray-200: rgba(231, 229, 228, 1);
  --gray-100: rgba(245, 245, 244, 1);
  --gray-50: rgba(250, 250, 249, 1);
  --background-01: #f5f5f5;

  /* Typography Variables */
  --font-family-header: "Abhaya Libre", serif;
  --font-family-body: "Figtree-Regular", serif;
  --font-family-body-medium: "Figtree-Medium", serif;
  --font-family-body-semibold: "Figtree-SemiBold", helvetica;
  
  /* Heading sizes (example, can be expanded) */
  --h1-size: 96px;
  --h2-size: 72px;
  --h3-size: 56px;
  --body-xl-size: 20px;
  --body-lg-size: 18px;
  --body-md-size: 16px;
}

:root {
  --max-width-container: 1664px;
  --nav-height: 100px;
}

/* RESET & ACCESSIBILITY */
/* Enforce Header Font on all headings explicitly */
h1, h2, h3, h4, h5, h6,
.text-heading-large,
.text-heading-medium,
.text-card-title {
  font-family: var(--font-family-header);
  font-weight: 400;
}

p, a, li, span, label, input, select, button, textarea, td, th {
  font-family: var(--font-family-body);
}

/* Screen Reader Only Class */
.sr-only {
    position: absolute;
    width: 1px; 
    height:1px; 
    padding: 0; 
    margin: -1px;
    overflow: hidden; 
    clip: rect(0, 0, 0, 0); 
    white-space: nowrap; 
    border: 0;
}

/* Skip Link (Requirement: WCAG) */
.skip-link {
    position: absolute; 
    top: -40px; 
    left: 0; 
    background: var(--primary-01); 
    color: white;
    padding: 12px 20px; 
    z-index: 2000; 
    transition: top 0.3s;
    font-family: var(--font-family-body-medium); 
    text-decoration: underline;
}
.skip-link:focus { top: 0; }

/*  LAYOUT UTILITIES */
.layout-frame {
  display: flex; 
  flex-direction: column; 
  width: 100%; 
  min-height: 100vh;
  background-color: var(--background-01);
}

.container {
  width: 100%; 
  max-width: 1568px; 
  padding: 0 20px; 
  margin: 0 auto;
}
@media (min-width: 768px) { 
  .container { 
    padding: 0 32px; } 
  }

.section {
  padding: 60px 0; 
  display: flex; 
  flex-direction: column; 
  align-items: center;
}
@media (min-width: 1024px) { 
  .section { 
    padding: 120px 0; } 
  }

.section-fullwidth { 
  width: 100%; 
  padding: 60px 0;
 }
@media (min-width: 1024px) { 
  .section-fullwidth { 
    padding: 96px 0; 
  } 
}

.centered { text-align: center; }
.primary-color { color: var(--primary-01); }
.white-color { color: var(--white); }
.gray-color { color: var(--gray-600); }

/*  STUDENT BANNER */
.student-banner {
    background-color: var(--gray-800); 
    color: var(--white);
    text-align: center; 
    padding: 10px; 
    font-size: 12px;
    font-family: var(--font-family-body-medium); 
    letter-spacing: 1px;
    position: relative; 
    z-index: 300;
}

/*  HERO & NAV */
.hero {
  position: relative; 
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid; 
  grid-template-rows: auto 1fr;
}
@media (min-width: 1024px) { 
  .hero { 
    display: block; 
    height: 100vh; 
  } 
}

.hero__bg-wrapper { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  z-index: 0; 
}
.hero__bg-image { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

.navbar {
  width: 100%; 
  padding: 24px 0; 
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.3); 
  backdrop-filter: blur(10px); 
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (min-width: 1024px) { 
  .navbar { 
    position: absolute; 
    /* top: 40px;  */
    background: transparent; 
    border: none; 
  } 
}

.navbar__container {
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  max-width: var(--max-width-container); 
  margin: 0 auto; 
  padding: 0 32px;
}

.navbar__menu { 
  display: none; 
  gap: 32px; 
  list-style: none; 
}
@media (min-width: 1024px) { 
  .navbar__menu { 
    display: flex; 
    align-items: center; 
    gap: 32px; 
  } 
}

.navbar__link {
  color: var(--white); 
  font-family: var(--font-family-body-medium);
  font-size: 18px; 
  text-decoration: none; 
  padding-bottom: 4px;
  border-bottom: 2px solid transparent; 
  transition: border-color 0.3s;
}
.navbar__link:hover, .navbar__link.active { border-color: var(--primary-02); }

.mobile-menu-toggle { 
  display: block; 
  background: none; 
  border: none; 
  cursor: pointer; 
}

.mobile-menu-toggle span { 
  display: block; 
  width: 25px; 
  height: 3px; 
  background: white; 
  margin: 5px 0; 
}

@media (min-width: 1024px) { .mobile-menu-toggle { display: none; } }

.hero__content {
  position: relative; 
  z-index: 10; 
  padding: 60px 20px;
  display: flex; 
  flex-direction: column; 
  align-items: center;
  text-align: center; 
  justify-content: center; 
  gap: 32px;
}

@media (min-width: 1024px) {
    .hero__content {
        position: absolute; 
        top: 50%; 
        left: 50%;
        transform: translate(-50%, -50%); 
        width: 100%; 
        max-width: 960px;
    }
}
.hero__title { 
  font-size: 48px; 
  color: var(--white); 
  line-height: 1.1; 
  text-shadow: 0 2px 10px rgba(0,0,0,0.3); 
}

@media (min-width: 1024px) { .hero__title { font-size: 96px; } }

.hero__subtitle { 
  color: var(--white); 
  letter-spacing: 2px; 
  text-transform: uppercase; 
  font-size: 14px; 
}

.hero__scroll-indicator { 
  display: none; 
  margin-top: 40px; 
}

@media (min-width: 320px) { .hero__scroll-indicator { display: block; } } 

.hero__cta-circle { display: none; }

@media (min-width: 1024px) {
    .hero__cta-circle {
        display: flex; 
        justify-content: center; 
        align-items: center;
        position: absolute; 
        right: 80px; 
        bottom: 80px;
        width: 160px; 
        height: 160px; 
        background-color: var(--primary-03);
        border-radius: 50%; 
        z-index: 20; 
        transition: transform 0.3s ease;
    }
    .hero__cta-circle:hover { transform: scale(1.1); }
}

/*  BUTTONS & ICONS */
.button-outline {
    display: inline-flex; 
    align-items: center; 
    gap: 12px; 
    padding: 16px 32px;
    border: 1px solid var(--primary-02); 
    border-radius: 50px;
    background: transparent; 
    color: var(--primary-02); 
    font-weight: 600;
    transition: all 0.3s; 
    cursor: pointer;
}

.button-outline:hover { background: var(--primary-02); color: white; }
.button-outline:hover .button-text { color: white; }

.button-filled {
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 12px;
    padding: 16px 32px; 
    background: var(--white); 
    color: var(--primary-01);
    border-radius: 5px; 
    border: none; 
    font-weight: 700; 
    cursor: pointer;
    transition: transform 0.2s;
}
.button-filled:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
}

.button-text-dark { 
  color: var(--primary-01); 
  font-weight: 600; 
}

.icon-small { width: 24px; height: 24px; }
.icon-arrow { width: 16px; height: 16px; }

/* OVERVIEW SECTION */
.overview__text-row {
  display: flex; 
  flex-direction: column; 
  gap: 40px; 
  margin-bottom: 60px;
}
@media (min-width: 1024px) { 
  .overview__text-row { 
    flex-direction: row; 
    align-items: flex-start; 
    gap: 80px; 
  } 
}

.overview__image-grid {
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 24px; 
  justify-items: center;
}

@media (min-width: 768px) { .overview__image-grid { grid-template-columns: 1fr 1fr; } }

.overview__img { 
  width: 100%; 
  max-width: 480px; 
  height: auto; 
  object-fit: cover; 
  border-radius: 4px; 
}

@media (min-width: 1024px) { .img-offset { margin-top: 120px; } }

/* WELLNESS */
.wellness__grid {
    display: grid; 
    grid-template-columns: 1fr; 
    background: var(--white);
}
@media (min-width: 1024px) {
    .wellness__grid {
        grid-template-columns: 1fr 400px 1fr; 
        grid-template-rows: 1fr auto 1fr;
        height: 900px;
    }
}
.wellness__bg-area { 
  height: 400px; 
  position: relative; 
  z-index: 1; 
}

@media (min-width: 1024px) {
    .wellness__bg-area { 
      grid-column: 1 / -1; 
      grid-row: 1 / -1; 
      height: 100%; }
}
.wellness__bg-image { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

.wellness__card {
    background: var(--white); 
    padding: 40px; 
    z-index: 2;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 24px;
}
@media (min-width: 1024px) {
    .wellness__card {
        grid-column: 2; 
        grid-row: 2; 
        background: transparent; 
        padding: 0; 
        text-align: center;
    }
}
.wellness__card-img {
   width: 100%; 
   max-width: 350px; 
   height: auto; 
   object-fit: cover; 
  }


.wellness__card h2 { font-family: var(--font-family-header); }

/*  DINING */
.dining__content { 
  margin-bottom: 48px; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 24px;
}

.dining__image-row { 
  display: flex; 
  flex-direction: column; 
  gap: 24px; 
  width: 100%; 
  align-items: center; 
}

.dining__img-wrapper img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  border-radius: 4px; 
}

.dining__text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 726px;
    gap: 24px;
    text-align: center; 
    margin: 0 auto;   
}

@media (min-width: 1024px) {
    .dining__image-row {
        flex-direction: row; 
        align-items: center; 
        justify-content: center; 
        height: 600px;
    }

    .dining__img-wrapper.small { 
      width: 300px; 
      height: 300px; 
      opacity: 0.9; 
    }

    .dining__img-wrapper.large { 
      width: 450px; 
      height: 550px; 
      z-index: 2; 
      box-shadow: 0 20px 40px rgba(0,0,0,0.15); 
    }
}

/*  BOOKING FORM  */
.booking__wrapper {
  position: relative; 
  padding: 80px 20px; 
  display: flex; 
  justify-content: center; 
  align-items: center;
  min-height: 500px; 
  background: #222;
}

.booking__bg-image { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  opacity: 0.7; 
}

.booking__content { 
  position: relative; 
  z-index: 2; 
  width: 100%; 
  max-width: 1000px; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 40px; 
}

.booking-bar {
  background: rgba(255, 255, 255, 0.2); 
  backdrop-filter: blur(12px); 
  border-radius: 8px; 
  padding: 24px;
  display: flex; 
  flex-direction: column; 
  gap: 16px; 
  width: 100%;
}
@media (min-width: 768px) { 
    .booking-bar { 
      flex-direction: row; 
      gap: 0; 
      padding: 0; 
      align-items: stretch; 
    } 
}

.booking-bar__item { 
    flex: 1; padding: 16px 24px; 
    border-bottom: 1px solid rgba(255,255,255,0.3);
    display: flex; 
    flex-direction: column; 
    gap: 8px;
}
@media (min-width: 768px) {
    .booking-bar__item { border-bottom: none; 
      border-right: 1px solid rgba(255,255,255,0.3); 
    }
    .booking-bar__item:last-child { border-right: none; }
}

.label-small { 
  font-size: 12px; 
  text-transform: uppercase; 
  letter-spacing: 1px; 
  opacity: 0.9; 
}

.booking-bar__input-group { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 8px; 
}
.input-text {
    background: transparent; 
    border: none; 
    color: white; 
    font-size: 18px; 
    width: 100%; 
    outline: none;
}

.input-text::placeholder { color: rgba(255,255,255,0.7); }
.select-reset { -webkit-appearance: none; appearance: none; }
.select-reset option { color: black; }

/*RECREATION & GALLERY */
.recreation__header { 
  display: flex; 
  flex-direction: column; 
  gap: 32px; 
  margin-bottom: 40px; 
}

@media (min-width: 1024px) {
   .recreation__header { 
    flex-direction: row; 
    justify-content: space-between; 
  } 
}

.recreation__intro { 
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 480px;
  align-items: flex-start;
}

.gallery__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 726px;
    gap: 24px;
    text-align: center;
    margin: 0 auto 60px auto;
}

.recreation__cards { 
  display: flex; 
  flex-direction: column; 
  gap: 32px; 
}

@media (min-width: 1024px) { .recreation__cards { flex-direction: row; } }

.card { 
  display: flex; 
  flex-direction: column; 
  gap: 20px; 
  flex: 1; 
}

.card__thumb { 
  overflow: hidden; 
  border-radius: 4px; 
}

.card__img { 
  width: 100%; 
  aspect-ratio: 4/5; 
  object-fit: cover; 
  transition: transform 0.5s; 
}

.card:hover .card__img { transform: scale(1.05); }

.card h3 { font-size: 20px; 
  font-family: var(--font-family-header); 
  color: var(--gray-800); 
}

/* Gallery Scroll */
.gallery__scroll-wrapper {
    width: 100%; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
    margin-top: 60px;
}
.gallery__track {
    display: flex; 
    gap: 24px; 
    width: max-content;
    animation: scrollGallery 60s linear infinite;
}
.gallery__track.reverse { animation-direction: reverse; }
.gallery__track img {
    height: 240px; 
    aspect-ratio: 4/3; 
    object-fit: cover; 
    border-radius: 4px;
}
@media (min-width: 1024px) { 
  .gallery__track img { 
    height: 320px; 
  }
 }
@keyframes scrollGallery { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.gallery__scroll-wrapper:hover .gallery__track { animation-play-state: paused; }


/* FOOTER */
.footer { 
  background: var(--gray-50); 
  padding-top: 80px; 
}

.footer__top-row { 
  display: flex; 
  flex-direction: column; 
  gap: 40px; 
}

@media (min-width: 1024px) {
   .footer__top-row { 
    flex-direction: row; gap: 0; 
  } 
}

.footer__logo-area, .footer__nav-wrapper { 
  flex: 1; 
  padding: 0 20px; 
}

@media (min-width: 768px) { 
    .footer__nav-wrapper { 
      display: flex; 
      flex: 2;
    } 
    .footer__col, .footer__col-contact { 
      flex: 1; 
      padding: 40px; 
      border-left: 1px solid var(--gray-300);
    }
}

.footer__link-large { 
  font-family: var(--font-family-header); 
  font-size: 32px; 
  color: var(--gray-800); 
}

@media (min-width: 1024px) {
   .footer__link-large { 
    font-size: 48px; 
  }
 }

.footer__bottom-row { 
  border-top: 1px solid var(--gray-300); 
  padding: 40px 20px; 
  margin-top: 40px; 
}

/* TYPOGRAPHY UTILITY CLASSES */
.text-heading-large { 
  font-family: var(--font-family-header); 
  font-size: 40px; 
  line-height: 1.1; 
}

@media (min-width: 1024px) { 
  .text-heading-large { 
    font-size: 72px; 
  } 
}

.text-heading-medium { 
  font-family: var(--font-family-header); 
  font-size: 32px; 
}

@media (min-width: 1024px) { 
  .text-heading-medium { 
    font-size: 56px; 
  } 
}

.text-body-large { 
  font-family: var(--font-family-body); 
  font-size: 18px; 
  line-height: 1.5; 
  color: var(--gray-700); 
}

.text-body-small { 
  font-family: var(--font-family-body); 
  font-size: 16px; 
  line-height: 1.5; 
  /* color: var(--gray-600);  */
}

/* SUBPAGE SPECIFIC STYLES  */
.feature-row {
    display: flex; 
    flex-direction: column; 
    gap: 40px; 
    margin-bottom: 80px;
    align-items: center;
}

@media (min-width: 1024px) {
    .feature-row { 
      flex-direction: row; 
      gap: 80px; 
    }

    .feature-row:nth-child(even) { flex-direction: row-reverse; }
}

.feature-row__img { 
  flex: 1; 
  width: 100%; 
  height: 400px; 
  object-fit: cover; 
  border-radius: 8px; 
}

.feature-row__content { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 24px;
    align-items: flex-start;
}

.price-table {
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 32px;
}
.price-table caption {
    text-align: left; 
    margin-bottom: 16px; 
    font-size: 14px; 
    color: var(--gray-600);
}
.price-table th, .price-table td {
    text-align: left; 
    padding: 20px; 
    border-bottom: 1px solid var(--gray-300);
}

.price-table th { 
  font-size: 24px; 
  color: var(--primary-01); 
}

.price-table td { 
  font-size: 18px; 
  color: var(--gray-700); 
}

.price-tag { 
  font-weight: 700; 
  color: var(--gray-800); 
}

/* Amenities Grid */
.amenities-grid {
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 24px; 
    width: 100%; 
    margin: 40px 0;
}

@media (min-width: 768px) { .amenities-grid { grid-template-columns: repeat(4, 1fr); } }

.amenity-item {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 16px;
    text-align: center; 
    padding: 24px; 
    background: var(--gray-50); 
    border-radius: 8px;
}

/* TYPOGRAPHY UTILITY CLASSES */
.text-heading-large { 
  font-family: var(--font-family-header); 
  font-size: 40px; 
  line-height: 1.1; 
}

@media (min-width: 1024px) { .text-heading-large { font-size: 72px; } }

.text-heading-medium { 
  font-family: var(--font-family-header); 
  font-size: 32px; 
}

@media (min-width: 1024px) { .text-heading-medium { font-size: 56px; } }

.text-body-large { 
  font-family: var(--font-family-body); 
  font-size: 18px; 
  line-height: 1.5; 
  color: var(--gray-700); 
}

.text-body-small { 
  font-family: var(--font-family-body); 
  font-size: 16px; 
  line-height: 1.5; 
  /* color: var(--gray-600);  */
}

.rooms-header {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
    margin-bottom: 40px;
}

.rooms-nav { 
  display: flex; 
  gap: 16px; 
}

.nav-btn {
    width: 48px; 
    height: 48px; 
    border-radius: 50%; 
    border: 1px solid var(--gray-400);
    background: transparent; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer; 
    transition: all 0.3s ease;
}

.nav-btn:hover { 
  border-color: var(--primary-01); 
  background: var(--gray-50); 
}

.rooms-track {
    display: flex; 
    gap: 32px; 
    overflow-x: auto; 
    scroll-behavior: smooth; 
    width: 100%; 
    padding-bottom: 20px;
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

.rooms-track::-webkit-scrollbar { display: none; }

.room-card {
    flex: 0 0 300px; 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
    scroll-snap-align: start;
}

@media (min-width: 768px) { .room-card { flex: 0 0 400px; } }

.room-card__img-wrapper { 
  width: 100%; 
  aspect-ratio: 1/1; 
  overflow: hidden; 
}

.room-card__img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transition: transform 0.5s ease; 
}

.room-card:hover .room-card__img { transform: scale(1.05); }

.room-card__content { 
  display: flex; 
  flex-direction: column; 
  align-items: flex-start; 
}

@media (max-width: 1023px) {
    .navbar__menu.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%; 
        left: 0;
        width: 100%;
        background-color: rgba(28, 25, 23, 0.98); 
        backdrop-filter: blur(10px);
        padding: 24px;
        align-items: center;
        gap: 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        z-index: 1000;
    }
}

.footer__text-small {
    display: inline-block; 
    padding: 12px 16px;    
    margin-bottom: 8px;    
    font-size: 14px;       
    color: var(--gray-600);
    text-decoration: none;
    transition: color 0.3s ease;
}


.footer__social, 
.footer__legal {
    display: flex;
    gap: 24px; 
    align-items: center;
    flex-wrap: wrap; 
}

@media (max-width: 768px) {
    .footer__bottom-links {
        flex-direction: column;
        gap: 16px;
        align-items: center;
        width: 100%;
    }
    
    .footer__text-small {
        padding: 14px 20px;
        width: 100%; 
        text-align: center;
    }
}

.footer__text-small:hover {
    color: var(--primary-01);
    background-color: rgba(0,0,0,0.05); 
    border-radius: 4px;
}


.navbar {
    background-color: rgba(0, 0, 0, 0.6); 
}


.booking-bar {
    background: rgba(0, 0, 0, 0.7); 
}


.button-outline {
    border: 2px solid var(--primary-02); 
    color: var(--primary-01);
    font-weight: 700; 
}

.hero .button-outline {
    background: rgba(0,0,0,0.4); 
    color: var(--white);
    border-color: var(--white);
}

.hero .button-outline:hover {
    background: var(--white);
    color: var(--primary-01);
}

.hero__title, 
.hero__subtitle {
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.footer__text-small {
    color: var(--gray-700);
}

.footer__list {
    list-style: none; 
    padding: 0;
}
.footer__logo {
    width: 100%;
    max-width: 800px;
}