/* =====================================================================
   COMPONENTS — reusable pieces: buttons, header, logo slot, cards,
   form controls, badges. Section-specific layout lives in sections.css.
   ===================================================================== */

/* ---------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.1;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-align: center;
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn__icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

/* Yellow accent — the primary "do this" action (WhatsApp) */
.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-ink-900);
  box-shadow: var(--shadow-accent);
}

.btn--accent:hover {
  background-color: var(--color-accent-hover);
  box-shadow: 0 16px 34px -8px rgba(255, 160, 0, 0.55);
}

/* Solid green — secondary action */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

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

/* Outlined — tertiary */
.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

.btn--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn--ghost-light {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
}

.btn--ghost-light:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.btn--lg {
  padding: var(--space-lg) var(--space-2xl);
  font-size: var(--text-md);
}

.btn--sm {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-sm);
}

.btn--block { width: 100%; }

/* Text link with a sliding arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  border-bottom: 2px solid transparent;
  transition: border-color var(--duration-base) var(--ease-out);
}

.link-arrow svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: transform var(--duration-base) var(--ease-out);
}

.link-arrow:hover { border-bottom-color: var(--color-accent); }
.link-arrow:hover svg { transform: translateX(5px); }

.link-arrow--on-dark { color: var(--color-accent); }

/* ---------------------------------------------------------------
   LOGO SLOT
   Placeholder until the real logo file is supplied. Swap the inner
   markup for <img src="assets/images/logo.svg" alt="Ceylon Uncovered">
   --------------------------------------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  flex: none;
}

.logo__slot {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--radius-md);
  background-color: var(--color-primary);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  letter-spacing: -0.04em;
  /* Dashed ring marks this as an unfilled placeholder */
  box-shadow: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-accent);
}

.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink-900);
}

.logo__tagline {
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.logo--on-dark .logo__name { color: var(--color-white); }
.logo--on-dark .logo__tagline { color: var(--color-green-200); }
.logo--on-dark .logo__slot {
  background-color: var(--color-accent);
  color: var(--color-green-900);
  box-shadow: 0 0 0 2px var(--color-green-900), 0 0 0 4px rgba(255, 193, 7, 0.4);
}

/* ---------------------------------------------------------------
   HEADER / NAV
   --------------------------------------------------------------- */

.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  display: flex;
  align-items: center;
  transition:
    background-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

/* Transparent over the hero photo, solid once scrolled */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13, 51, 17, 0.55), rgba(13, 51, 17, 0));
  opacity: 1;
  transition: opacity var(--duration-base) var(--ease-out);
}

.header.is-stuck {
  background-color: rgba(249, 251, 231, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}

.header.is-stuck::before { opacity: 0; }

.header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  width: 100%;
}

/* Header starts over dark photography, so its text is light */
.header .logo__name { color: var(--color-white); }
.header .logo__tagline { color: var(--color-green-200); }
.header .logo__slot {
  background-color: var(--color-accent);
  color: var(--color-green-900);
  box-shadow: 0 0 0 2px rgba(13, 51, 17, 0.5), 0 0 0 4px rgba(255, 193, 7, 0.35);
}

.header.is-stuck .logo__name { color: var(--color-ink-900); }
.header.is-stuck .logo__tagline { color: var(--color-text-subtle); }
.header.is-stuck .logo__slot {
  background-color: var(--color-primary);
  color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-accent);
}

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

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin: 0;
  list-style: none;
  padding: 0;
}

.nav__link {
  position: relative;
  padding-block: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--color-accent);
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

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

.header.is-stuck .nav__link { color: var(--color-ink-700); }
.header.is-stuck .nav__link:hover { color: var(--color-primary); }
.header.is-stuck .nav__link[aria-current="page"] { color: var(--color-primary); }

/* Hamburger */
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--color-white);
}

.header.is-stuck .nav-toggle { color: var(--color-ink-900); }

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 24px;
  height: 2.5px;
  background-color: currentColor;
  border-radius: var(--radius-pill);
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
}

.nav-toggle__bars::before { transform: translateY(-7px); }
.nav-toggle__bars::after  { transform: translateY(7px); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background-color: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: rotate(-45deg); }

/* ---------------------------------------------------------------
   PILL / BADGE
   --------------------------------------------------------------- */

.pill {
  display: inline-flex;
  /* A grid or flex parent blockifies inline-flex, which would stretch the
     pill across the whole column — keep it hugging its own text. */
  width: fit-content;
  justify-self: start;
  align-self: start;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary-soft);
  color: var(--color-green-800);
}

.pill--accent {
  background-color: var(--color-accent);
  color: var(--color-ink-900);
}

.pill--on-photo {
  background-color: rgba(13, 51, 17, 0.62);
  color: var(--color-accent);
  backdrop-filter: blur(8px);
}

/* ---------------------------------------------------------------
   FORM CONTROLS
   --------------------------------------------------------------- */

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

.field__label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-ink-800);
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.field__control {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.field__control::placeholder { color: var(--color-ink-400); }

.field__control:hover { border-color: var(--color-border-strong); }

.field__control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(27, 94, 32, 0.14);
}

textarea.field__control {
  min-height: 118px;
  resize: vertical;
  line-height: var(--leading-normal);
}

select.field__control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2365776a'%3E%3Cpath d='M12 15.5 5.5 9h13z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  background-size: 22px;
  padding-right: var(--space-2xl);
  cursor: pointer;
}

/* Interest chips — checkbox styled as a selectable pill */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.chip { position: relative; }

.chip__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.chip__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-700);
  cursor: pointer;
  user-select: none;
  transition: all var(--duration-fast) var(--ease-out);
}

.chip__label:hover { border-color: var(--color-primary); }

.chip__input:checked + .chip__label {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.chip__input:focus-visible + .chip__label {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}


/* ---------------------------------------------------------------
   FLOATING WHATSAPP BUTTON
   --------------------------------------------------------------- */

.whatsapp-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.94);
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-spring),
    visibility var(--duration-base),
    background-color var(--duration-base) var(--ease-out);
}

.whatsapp-float.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.whatsapp-float:hover { background-color: var(--color-green-800); }

.whatsapp-float svg {
  width: 22px;
  height: 22px;
  fill: var(--color-accent);
  flex: none;
}

@media (max-width: 560px) {
  .whatsapp-float__text { display: none; }
  .whatsapp-float { padding: var(--space-md); }
}

/* ---------------------------------------------------------------
   ICON SPRITE HELPERS
   The sprite is inlined at the top of <body> so <use> resolves even
   when the page is opened straight off disk (file://).
   --------------------------------------------------------------- */

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}

/* Anchor for the hamburger's rotating bars */
.nav-toggle__bars { position: relative; }

/* ---------------------------------------------------------------
   MOBILE NAVIGATION DRAWER
   Eight destinations in the menu is too many for a narrow bar, so it
   collapses early — at 1080px rather than a typical 768px.
   --------------------------------------------------------------- */

@media (max-width: 1080px) {
  .nav-toggle { display: grid; }

  .nav {
    position: fixed;
    inset-block-start: var(--header-height);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--gutter) var(--space-2xl);
    background-color: var(--color-canvas);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    max-height: calc(100svh - var(--header-height));
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
      opacity var(--duration-base) var(--ease-out),
      transform var(--duration-base) var(--ease-out),
      visibility var(--duration-base);
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link,
  .header.is-stuck .nav__link {
    display: block;
    padding-block: var(--space-md);
    font-size: var(--text-md);
    color: var(--color-ink-800);
    border-bottom: 1px solid var(--color-border);
  }

  .nav__link::after { display: none; }

  .nav__link:hover,
  .nav__link[aria-current="page"] { color: var(--color-primary); }

  .nav .btn { width: 100%; }
}