/* ==========================================================================
   Charles and Lois Home — Components
   Reusable patterns referenced across every page. Page-specific layout
   (homepage sections, property grid, etc.) belongs in stage-specific files
   added later, not here.
   ========================================================================== */

/* ---- Layout utilities ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--space-2xl);
}

.section--tight {
  padding-block: var(--space-xl);
}

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

.grid {
  display: grid;
  gap: var(--space-lg);
}

/* ---- Section heading pattern ----
   A small label above a display heading. Used sparingly, and only where the
   label genuinely adds wayfinding — not decoration on every block. */
.section-heading {
  max-width: 640px;
  margin-bottom: var(--space-lg);
}

.section-heading__label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-gold-text);
}

.section-heading__title {
  margin: 0;
}

.section-heading__body {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

/* ---- Buttons ----
   Two variants only. No pill shapes, no gradients — weight and contrast do
   the work instead. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.85em 1.75em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-sm);
  border: var(--border-width) solid transparent;
  transition: background-color var(--transition-base), color var(--transition-base),
    border-color var(--transition-base);
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--color-forest);
  color: var(--color-cream);
  border-color: var(--color-forest);
}

.btn--primary:hover {
  background-color: var(--color-green);
  border-color: var(--color-green);
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-forest);
  border-color: var(--color-forest);
}

.btn--secondary:hover {
  background-color: var(--color-forest);
  color: var(--color-cream);
}

.btn--on-dark {
  color: var(--color-cream);
  border-color: var(--color-border-dark);
}

.btn--on-dark:hover {
  background-color: var(--color-cream);
  color: var(--color-forest);
  border-color: var(--color-cream);
}

/* High-contrast variant for use as the primary action on dark/photo
   backgrounds (e.g. the homepage hero), where .btn--primary's forest fill
   would blend into the background instead of standing out. */
.btn--cream {
  background-color: var(--color-cream);
  color: var(--color-forest);
  border-color: var(--color-cream);
}

.btn--cream:hover {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-forest);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-forest);
  border-bottom: var(--border-width) solid var(--color-border-dark);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: var(--header-height);
}

/* Brand mark — the client's logo asset (images/logo/). .brand__name and
   .brand__tagline remain defined below because the footer still uses
   .brand__name as a text wordmark; the header no longer uses either. */
.brand {
  display: flex;
  align-items: center;
  line-height: 1;
  color: var(--color-cream);
}

.brand__logo {
  display: block;
  height: 40px;
  width: auto;
}

.brand__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
}

.brand__tagline {
  margin-top: 0.3em;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-gold);
}

/* ---- Desktop navigation ---- */
.nav-desktop {
  display: none;
}

.nav-desktop__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-desktop__link {
  position: relative;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-cream);
  padding-block: var(--space-2xs);
}

.nav-desktop__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.nav-desktop__link:hover::after,
.nav-desktop__link[aria-current='page']::after {
  transform: scaleX(1);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-header__cta {
  display: none;
}

/* ---- Mobile menu trigger ---- */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-cream);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Mobile navigation panel ---- */
.nav-mobile {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  z-index: 99;
  background-color: var(--color-forest);
  padding: var(--space-lg) var(--container-padding);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), transform var(--transition-base),
    visibility 0s linear var(--transition-base);
  overflow-y: auto;
}

.nav-mobile.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity var(--transition-base), transform var(--transition-base),
    visibility 0s linear 0s;
}

.nav-mobile__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  border-bottom: var(--border-width) solid var(--color-border-dark);
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.nav-mobile__link {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-cream);
}

.nav-mobile__cta {
  width: 100%;
}

/* Lock body scroll while the mobile panel is open (toggled via JS) */
.no-scroll {
  overflow: hidden;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background-color: var(--color-forest);
  color: var(--color-cream);
  padding-block: var(--space-2xl) var(--space-lg);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: var(--border-width) solid var(--color-border-dark);
}

.site-footer__brand .brand__name {
  font-size: var(--text-2xl);
}

.site-footer__description {
  margin-top: var(--space-sm);
  max-width: 36ch;
  color: rgba(247, 244, 238, 0.72);
  font-size: var(--text-sm);
}

.site-footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.site-footer__link {
  font-size: var(--text-sm);
  color: rgba(247, 244, 238, 0.85);
  transition: color var(--transition-fast);
}

.site-footer__link:hover {
  color: var(--color-gold);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-lg);
  font-size: var(--text-xs);
  color: rgba(247, 244, 238, 0.6);
}

.site-footer__legal-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.site-footer__legal-copy p + p {
  margin-top: 0;
}

.site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

@media (min-width: 480px) {
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---- Closing call to action band (shared: home page and About page) ---- */
.final-cta {
  background-color: var(--color-forest);
  border-bottom: var(--border-width) solid var(--color-border-dark);
  padding-block: var(--space-3xl);
}

.final-cta__inner {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.final-cta__heading {
  margin-top: var(--space-2xs);
  color: var(--color-cream);
}

.final-cta__lead {
  margin-top: var(--space-sm);
  font-size: var(--text-lg);
  color: rgba(247, 244, 238, 0.8);
}

.final-cta__actions {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.final-cta__actions .btn {
  width: 100%;
  max-width: 320px;
}

@media (min-width: 480px) {
  .final-cta__actions {
    flex-direction: row;
    justify-content: center;
  }

  .final-cta__actions .btn {
    width: auto;
  }
}

/* ---- Split layout (shared) ----
   Title on the left, text on the right, so every block starts from the same
   left edge as the header and footer. On small screens the two parts stack.
   Used on the About, Contact (FAQ), Privacy and Terms pages and the property
   booking band. */
.split {
  display: grid;
  gap: var(--space-md);
}

.split__body {
  max-width: 640px;
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}