/* =========================================================
   S & I DENTAL CLINIC — CONTACT

   contact.css → contact-specific styling

   (Homepage "Location / Visit Us" section; contact.html
   will extend this file with the full contact form later.)

   ========================================================= */

/* =========================================================
   LOCATION
   ========================================================= */
.si-location {
  position: relative;
}

/* ---------- Main Layout ---------- */
.si-location .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: stretch;
}

/* ---------- Location Information ---------- */
.si-location__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---------- Eyebrow ---------- */
.si-location__info .eyebrow {
  margin-top: 0;
  font-size: 1rem;
}

/* ---------- Information Blocks ---------- */
.si-location__block {
  display: flex;
  gap: 1rem;
  margin-top: var(--space-md);
}

.si-location__block .icon-badge {
  background-color: rgba(var(--rgb-gold), 0.14);
  color: var(--color-gold);
}

.si-location__block h4 {
  color: var(--color-warm-white);
  margin-bottom: 0.3rem;
}

.si-location__block p {
  margin: 0;
  font-size: 0.95rem;
}

/* ---------- Buttons ---------- */
.si-location .btn-group {
  margin-top: var(--space-lg);
}

/* ---------- Map ---------- */
.si-location__map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  min-height: 340px;
  border: 1px solid rgba(247, 243, 234, 0.15);
}

.si-location__map iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  display: block;
  filter: grayscale(0.15) contrast(1.02);
}

/* =========================================================
   SECTION DIVIDER
   ========================================================= */

/* One single golden divider separates the complete
   Location section from the section below it. */
.si-location::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: var(--space-2xl);
  background-color: rgba(var(--rgb-gold), 0.65);
}

/* =========================================================
   TABLET / SMALL DESKTOP
   ========================================================= */
@media (max-width: 900px) {
  /* ---------- Main Layout ---------- */
  .si-location .container {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* ---------- Information Wrapper ---------- */
  .si-location__info {
    display: contents;
  }

  /* ---------- Eyebrow ---------- */
  .si-location__info .eyebrow {
    order: 1;
    margin-top: 0;
    font-size: 1rem;
  }

  /* ---------- Heading ---------- */
  .si-location__info h2 {
    order: 2;
    margin-bottom: var(--space-lg);
  }

  /* ---------- Map ---------- */
  .si-location__map {
    order: 3;
    width: 100%;
    min-height: 280px;
    margin-bottom: var(--space-lg);
  }

  .si-location__map iframe {
    min-height: 280px;
  }

  /* ---------- Location Details ---------- */
  .si-location__block {
    order: 4;
  }

  /* ---------- Buttons ---------- */
  .si-location .btn-group {
    order: 5;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin-top: var(--space-lg);
  }

  .si-location .btn-group .btn-si {
    width: auto;
    max-width: fit-content;
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  /* ---------- Section Divider ---------- */
  .si-location::after {
    margin-top: var(--space-lg);
  }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 575px) {
  /* ---------- Location Layout ---------- */
  .si-location .container {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* =======================================================
     INFORMATION
     ======================================================= */
  .si-location__info {
    display: contents;
  }

  /* ---------- Eyebrow ---------- */
  .si-location__info .eyebrow {
    order: 1;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1rem;
  }

  /* ---------- Heading ---------- */
  .si-location__info h2 {
    order: 2;
    margin-bottom: var(--space-lg);
  }

  /* =======================================================
     MAP
     ======================================================= */
  .si-location__map {
    order: 3;
    width: 100%;
    min-height: 250px;
    margin-bottom: var(--space-md);
  }

  .si-location__map iframe {
    min-height: 250px;
  }

  /* =======================================================
     LOCATION DETAILS
     ======================================================= */
  .si-location__block {
    order: 4;
  }

  /* =======================================================
     BUTTONS
     ======================================================= */
  .si-location .btn-group {
    order: 5;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin-top: var(--space-md);
  }

  .si-location .btn-group .btn-si {
    flex: 0 0 auto;
    width: auto;
    max-width: fit-content;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    white-space: nowrap;
  }

  /* =======================================================
     SECTION DIVIDER
     ======================================================= */
  .si-location::after {
    margin-top: var(--space-md);
  }
}

/* =========================================================
   CONTACT PAGE — SCOPED VISIT US SPACING FIXES
   Scoped under .page-contact (set on <body> in contact.html
   only) so these never affect the homepage's own instance of
   the shared .si-location / .si-location__info classes.
   ========================================================= */
.page-contact .si-location__info h2 {
  margin-top: 0.75rem;
}

.page-contact .si-location__info .lede {
  margin-top: var(--space-sm);
}

/* Trim the divider gap before "Book Online" — the base 6rem
   value (meant for the homepage, where this is the last
   section before the footer) stacks with this section's own
   bottom padding and made the Contact page's Visit Us → Book
   Online transition excessively long. */
.page-contact .si-location::after {
  margin-top: var(--space-xl);
}

/* =========================================================
   CONTACT PAGE — ADDITIONS
   Everything below extends the Contact page only. The
   Location styles above (used by the homepage's "Visit Us"
   section) are reused as-is by the Contact page's own
   Visit Us section and are left untouched.
   ========================================================= */

/* =========================================================
   CONTACT HERO
   ========================================================= */
.si-contact-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Keep all actual hero content above decoration */
.si-contact-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: var(--space-2xl);
  align-items: center;
}

/* =========================================================
   DECORATIVE BACKGROUND
   ========================================================= */
.si-contact-hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Soft forest ambient glow */
.si-contact-hero__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(10px);
}

.si-contact-hero__glow--one {
  width: 38rem;
  height: 38rem;
  top: -20rem;
  left: -16rem;
  background: radial-gradient(circle, rgba(var(--rgb-forest), 0.14) 0%, rgba(var(--rgb-forest), 0.06) 40%, transparent 72%);
}

/* Soft gold glow on opposite side */
.si-contact-hero__glow--two {
  width: 34rem;
  height: 34rem;
  right: -16rem;
  bottom: -20rem;
  background: radial-gradient(circle, rgba(var(--rgb-gold), 0.15) 0%, rgba(var(--rgb-gold), 0.06) 45%, transparent 72%);
}

/* =========================================================
   TOOTH WATERMARK
   ========================================================= */
.si-contact-hero__tooth {
  position: absolute;
  width: clamp(28rem, 42vw, 42rem);
  height: auto;
  left: -6rem;
  right: auto;
  top: 50%;
  transform: translateY(-50%) rotate(12deg);
  color: var(--color-forest);
  opacity: 0.07;
  pointer-events: none;
  filter: drop-shadow(0 20px 40px rgba(var(--rgb-forest), 0.05));
  transform-origin: center;
}

/* =========================================================
   SUBTLE FLOATING ANIMATION
   ========================================================= */
@keyframes si-contact-hero-float {
  0%, 100% {
    transform: translateY(-50%) rotate(-12deg);
  }

  50% {
    transform: translateY(calc(-50% - 12px)) rotate(-8deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .si-contact-hero__tooth {
    animation: si-contact-hero-float 10s ease-in-out infinite;
  }
}

/* =========================================================
   HERO CONTENT
   ========================================================= */
.si-contact-hero__content .eyebrow {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.si-contact-hero__content h1 {
  margin-bottom: var(--space-sm);
}

.si-contact-hero__content .lede {
  max-width: 46ch;
}

.si-contact-hero__cta {
  margin-top: var(--space-lg);
  margin-bottom: -4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
}

.si-contact-hero__cta-note {
  font-size: 0.85rem;
  color: var(--color-muted);
  max-width: 22ch;
}

/* =========================================================
   CONTACT CARDS
   ========================================================= */
.si-contact-hero__cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
  margin-bottom: -4rem;
}

.si-contact-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background-color: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(var(--rgb-forest), 0.08);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base),
    border-color var(--transition-base),
    background-color var(--transition-base);
}

a.si-contact-card {
  cursor: pointer;
}

/* Premium hover */
.si-contact-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(var(--rgb-gold), 0.45);
  background-color: var(--color-white);
}

/* Icon interaction */
.si-contact-card .icon-badge {
  background-color: rgba(var(--rgb-gold), 0.12);
  color: var(--color-gold);
  transition: transform var(--transition-base), background-color var(--transition-base);
}

.si-contact-card:hover .icon-badge {
  transform: translateY(-2px) scale(1.06);
  background-color: rgba(var(--rgb-gold), 0.2);
}

/* =========================================================
   CARD CONTENT
   ========================================================= */
.si-contact-card__body {
  flex: 1;
  min-width: 0;
}

.si-contact-card__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.3rem;
}

.si-contact-card__value {
  display: block;
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--color-forest);
  line-height: 1.3;
}

a.si-contact-card__value {
  transition: color var(--transition-fast);
}

a.si-contact-card__value:hover {
  color: var(--color-gold);
}

.si-contact-card__hint {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--color-muted);
}

/* =========================================================
   CARD ARROW
   ========================================================= */
.si-contact-card__arrow {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--color-forest);
  opacity: 0.55;
  transition:
    transform var(--transition-fast),
    opacity var(--transition-fast),
    color var(--transition-fast);
}

.si-contact-card__arrow svg {
  width: 18px;
  height: 18px;
}

.si-contact-card:hover .si-contact-card__arrow {
  transform: translateX(5px);
  opacity: 1;
  color: var(--color-gold);
}

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 900px) {
  .si-contact-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .si-contact-hero__tooth {
    width: 32rem;
    right: -10rem;
    top: 38%;
    opacity: 0.055;
  }

  .si-contact-hero__glow--one {
    width: 30rem;
    height: 30rem;
    top: -15rem;
    left: -15rem;
  }

  .si-contact-hero__glow--two {
    width: 28rem;
    height: 28rem;
    right: -15rem;
    bottom: -15rem;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 575px) {
  /* HERO CONTENT — CENTER EVERYTHING */
  .si-contact-hero__content {
    text-align: center;
  }

  .si-contact-hero__content .eyebrow {
    display: inline-block;
  }

  .si-contact-hero__cta {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
  }

  /* Hide only the CTA note */
  .si-contact-hero__cta-note {
    display: none;
  }

  /* CONTACT CARDS */
  .si-contact-card {
    padding: 1.05rem 1.15rem;
    gap: 0.85rem;
  }

  /* Add space below the final Email Us card */
  .si-contact-hero__cards {
    margin-top: 3rem;
    margin-bottom: 0.2rem;
  }

  /* BACKGROUND TOOTH */
  .si-contact-hero__tooth {
    width: 24rem;
    left: 42%;
    right: auto;
    transform: translateX(-50%) rotate(-18deg);
    opacity: 0.045;
  }

  .si-contact-hero__glow--one {
    width: 24rem;
    height: 24rem;
    top: -12rem;
    left: -13rem;
  }

  .si-contact-hero__glow--two {
    width: 23rem;
    height: 23rem;
    right: -12rem;
    bottom: -14rem;
  }
}

/* =========================================================
   VISIT US — CONTACT PAGE EXTRAS
   ========================================================= */
.si-location__info .eyebrow {
  font-size: 1rem;
  margin-top: -2rem;
}

.si-location__block {
  margin-top: var(--space-md);
  background-color: rgba(247, 243, 234, 0.06);
  border: 1px solid rgba(247, 243, 234, 0.14);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
}

.si-contact-hours {
  margin-top: var(--space-md);
  background-color: rgba(247, 243, 234, 0.06);
  border: 1px solid rgba(247, 243, 234, 0.14);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
}

.si-contact-hours__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.si-contact-hours__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-warm-white);
  font-size: 0.95rem;
}

.si-contact-hours__title svg {
  width: 18px;
  height: 18px;
  color: var(--color-soft-gold);
  flex-shrink: 0;
}

.si-contact-hours__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background-color: rgba(168, 189, 175, 0.18);
  color: var(--color-soft-sage);
  white-space: nowrap;
}

.si-contact-hours__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.si-contact-hours__status.is-closed {
  background-color: rgba(199, 164, 90, 0.16);
  color: var(--color-soft-gold);
}

.si-contact-hours__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.si-contact-hours__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0;
  font-size: 0.9rem;
  border-top: 1px solid rgba(247, 243, 234, 0.1);
}

.si-contact-hours__row:first-child {
  border-top: 0;
}

.si-contact-hours__row span:first-child {
  color: rgba(247, 243, 234, 0.85);
  font-weight: 600;
}

.si-contact-hours__row span:last-child {
  color: rgba(247, 243, 234, 0.65);
}

.si-contact-hours__row.is-closed span:last-child {
  color: var(--color-soft-gold);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.si-contact-hours__row.is-today {
  border-radius: var(--radius-sm);
  background-color: rgba(199, 164, 90, 0.08);
  padding-inline: 0.6rem;
  margin-inline: -0.6rem;
}

.si-location__map {
  width: 100%;
  max-width: 600px;
  height: 580px;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.si-location__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* =========================================================
   VISIT US — MOBILE
   ========================================================= */
@media (max-width: 575px) {
  .si-location .container {
    display: flex;
    flex-direction: column;
  }

  /* Visit Us heading first */
  .si-location__info {
    display: contents;
  }

  .si-location__info .eyebrow {
    order: 1;
    margin-top: -1rem;
  }

  /* Map second */
  .si-location__map {
    order: 2;
    width: 100%;
    max-width: none;
    height: 280px;
    margin-top: 0.5rem;
    margin-bottom: -1rem;
  }

  /* Remaining information third */
  .si-location__details {
    order: 3;
  }
}

/* =========================================================
   BOOK ONLINE / APPOINTMENT FORM
   ========================================================= */
.section-header .eyebrow {
  font-size: 1.2rem;
}

.si-book {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
}

.si-book__form-wrap {
  max-width: 760px;
  margin-inline: auto;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(var(--rgb-forest), 0.06);
  padding: var(--space-lg);
}

.si-appointment-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-md);
}

.si-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.si-field--full {
  grid-column: 1 / -1;
}

.si-field__label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-forest);
}

.si-field__label .req {
  color: var(--color-gold);
  margin-left: 0.15em;
}

.si-field__label .opt {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-muted);
  font-size: 0.78rem;
}

.si-field input[type="text"],
.si-field input[type="tel"],
.si-field input[type="date"],
.si-field select,
.si-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-charcoal);
  background-color: var(--color-cream);
  border: 1px solid rgba(var(--rgb-forest), 0.14);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.si-field textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

.si-field input::placeholder, .si-field textarea::placeholder {
  color: rgba(109, 114, 107, 0.65);
}

.si-field input:focus, .si-field select:focus, .si-field textarea:focus {
  outline: none;
  background-color: var(--color-white);
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(var(--rgb-gold), 0.16);
}

.si-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D726B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-right: 2.6rem;
}

.si-field__phone {
  display: flex;
  align-items: stretch;
}

.si-field__phone-prefix {
  display: inline-flex;
  align-items: center;
  padding-inline: 0.9rem;
  font-weight: 700;
  color: var(--color-forest);
  background-color: rgba(var(--rgb-forest), 0.06);
  border: 1px solid rgba(var(--rgb-forest), 0.14);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  flex-shrink: 0;
}

.si-field__phone input {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.si-field__hint {
  font-size: 0.78rem;
  color: var(--color-muted);
}

.si-field__error {
  display: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-error, #A6503A);
}

.si-field.is-invalid input, .si-field.is-invalid select, .si-field.is-invalid textarea {
  border-color: var(--color-error, #A6503A);
  background-color: var(--color-white);
}

.si-field.is-invalid .si-field__error {
  display: block;
}

.si-appointment-form__submit {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  width: 100%;
}

.si-appointment-form__note {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.82rem;
  color: var(--color-muted);
  margin-top: var(--space-xs);
}

.si-appointment-form__status {
  grid-column: 1 / -1;
  display: none;
  align-items: center;
  gap: 0.6em;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-forest);
  background-color: rgba(var(--rgb-forest), 0.06);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
}

.si-appointment-form__status.is-visible {
  display: flex;
}

.si-appointment-form__status svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---------- Trust row ---------- */
.si-trust-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
  margin-top: 0.75rem;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(var(--rgb-forest), 0.08);
}

.si-trust-row__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-muted);
}

.si-trust-row__item svg {
  width: 17px;
  height: 17px;
  color: var(--color-gold);
  flex-shrink: 0;
}

@media (max-width: 575px) {
  .si-book__form-wrap {
    padding: var(--space-md);
  }

  .si-appointment-form__grid {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .si-trust-row {
    gap: 1rem 1.5rem;
  }
}

/* =========================================================
   FAQ
   ========================================================= */
.si-faq {
  padding-top: var(--space-lg);
}

.si-faq .section-header {
  margin-bottom: var(--space-lg);
}

.si-faq__list {
  max-width: 820px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.si-faq-item {
  background-color: var(--color-white);
  border: 1px solid rgba(var(--rgb-forest), 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.si-faq-item.is-open {
  box-shadow: var(--shadow-md);
  border-color: rgba(var(--rgb-gold), 0.3);
}

.si-faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  padding: 1.25rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-forest);
}

.si-faq-item__icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--color-gold);
  transition: transform var(--transition-base);
}

.si-faq-item__icon svg {
  width: 20px;
  height: 20px;
}

.si-faq-item.is-open .si-faq-item__icon {
  transform: rotate(180deg);
}

.si-faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-slow);
}

.si-faq-item.is-open .si-faq-item__panel {
  grid-template-rows: 1fr;
}

.si-faq-item__panel-inner {
  overflow: hidden;
}

.si-faq-item__panel p {
  margin: 0;
  padding: 0 1.5rem 1.25rem;
  font-size: 0.92rem;
  line-height: 1.7;
}

@media (max-width: 575px) {
  .si-faq-item__question {
    padding: 1.1rem 1.25rem;
    font-size: 0.95rem;
  }

  .si-faq-item__panel p {
    padding: 0 1.25rem 1.1rem;
  }
}

/* =========================================================
   FOOTER
   ========================================================= */
.si-footer {
  background-color: var(--color-forest);
  color: rgba(247, 243, 234, 0.8);
  padding-top: var(--space-xl);
}

.si-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(247, 243, 234, 0.12);
}

.si-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: var(--space-sm);
}

.si-footer__brand img {
  height: 42px;
  width: auto;
}

.si-footer__brand span {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-warm-white);
}

.si-footer p {
  color: rgba(247, 243, 234, 0.7);
  font-size: 1.02rem;
}

.si-footer__tagline {
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-soft-gold);
  font-size: 1.18rem;
}

.si-footer__social {
  display: flex;
  gap: 0.65rem;
  margin-top: var(--space-md);
}

.si-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(247, 243, 234, 0.2);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.si-footer__social a svg {
  width: 18px;
  height: 18px;
  color: var(--color-warm-white);
}

.si-footer__social a:hover {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  transform: translateY(-3px);
}

.si-footer h4 {
  color: var(--color-warm-white);
  font-size: 1.1rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.si-footer__links {
  display: grid;
  gap: 0.8rem;
  font-size: 1.02rem;
}

.si-footer__links a:hover {
  color: var(--color-soft-gold);
}

.si-footer__contact {
  display: grid;
  gap: 0.9rem;
}

.si-footer__contact li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 1.02rem;
}

.si-footer__contact li svg {
  width: 18px;
  height: 18px;
  color: var(--color-soft-gold);
  flex-shrink: 0;
  margin-top: 0.2em;
}

.si-footer__contact a:hover {
  color: var(--color-soft-gold);
}

.si-footer__hours-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1rem;
  padding-block: 0.4rem;
}

.si-footer__hours-row span:first-child {
  color: rgba(247, 243, 243, 0.6);
}

.si-footer__hours-row span:last-child {
  color: var(--color-warm-white);
  font-weight: 600;
}

.si-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: var(--space-md);
  font-size: 0.9rem;
  color: rgba(247, 243, 243, 0.55);
}

/* =========================================================
   FOOTER — TABLET (≤ 900px)
   ========================================================= */
@media (max-width: 900px) {
  .si-footer__grid {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-xl);
  }

  .si-footer__grid > div:first-child {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   FOOTER — MOBILE (≤ 575px)
   ========================================================= */
@media (max-width: 575px) {
  .si-footer {
    padding-top: var(--space-lg);
    text-align: center;
  }

  .si-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .si-footer__grid > div:first-child {
    grid-column: 1;
  }

  .si-footer__brand {
    justify-content: center;
  }

  .si-footer__social {
    justify-content: center;
    gap: 0.9rem;
  }

  /* Explore links laid out horizontally instead of stacked */
  .si-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.1rem;
  }

  .si-footer__contact {
    justify-items: center;
  }

  .si-footer__contact li {
    align-items: center;
    text-align: center;
  }

  .si-footer__contact li:first-child {
    flex-direction: column;
    gap: 0.3rem;
  }

  .si-footer__hours-row {
    justify-content: center;
    gap: 0.5rem;
    padding-block: 0;
    margin-bottom: 0;
  }

  /* Kill the leftover space below the hours row before the divider */
  .si-footer__grid > div:last-child {
    margin-bottom: calc(var(--space-lg) * -1);
  }

  .si-footer__bottom {
    flex-direction: column;
    gap: 0.4rem;
    text-align: center;
  }
}