/* Shared components: header/nav, footer, buttons, cards, form, placeholders,
   testimonials. Authored once against role tokens (--accent, --link, --section-tint). */

/* Header + primary nav */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-4);
  border-bottom: 2px solid var(--accent);
}

.site-header__brand {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--heading);
  text-decoration: none;
}

.primary-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-nav__item {
  position: relative;
}

.primary-nav__item > a {
  display: inline-block;
  padding: var(--space-2) 0;
  color: var(--heading);
  text-decoration: none;
  font-weight: 600;
}

.primary-nav__item > a:hover,
.primary-nav__item > a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
}

.submenu-toggle {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  background-color: var(--color-white);
  color: var(--heading);
  font: inherit;
  cursor: pointer;
}

.submenu {
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
}

.submenu a {
  display: block;
  padding: var(--space-1) 0;
}

/* Collapsed by default (no layout shift when nav.js loads). Revealed by focus
   within the group (tapping the disclosure button focuses it, so this works with
   no JavaScript on touch and keyboard), by hover on pointer devices, or by the
   .is-open class that nav.js toggles. */
.has-submenu .submenu {
  display: none;
}

.has-submenu:focus-within .submenu,
.has-submenu:hover .submenu,
.has-submenu .submenu.is-open {
  display: block;
}

@media (min-width: 48rem) {
  .has-submenu .submenu.is-open,
  .has-submenu:focus-within .submenu,
  .has-submenu:hover .submenu {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 20;
    min-width: 12rem;
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgb(34 48 63 / 12%);
  }
}

/* Language switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.lang-switcher__list {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lang-switcher__label {
  font-size: var(--text-sm);
  color: var(--text);
}

/* Buttons + CTA */
.button,
button.button {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background-color: var(--accent);
  color: var(--color-warm-white);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--color-warm-white);
}

.button--ghost {
  background-color: transparent;
  color: var(--link);
}

.cta {
  margin-block: var(--space-8);
  padding: var(--space-6);
  background-color: var(--section-tint);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
}

/* Cards */
.card {
  padding: var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-hairline);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
}

.card h2,
.card h3 {
  margin-top: 0;
}

/* Placeholder images */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-4);
  background-color: var(--color-sand);
  border: 1px dashed var(--color-harbor-blue);
  border-radius: var(--radius);
  color: var(--color-slate-navy);
  text-align: center;
}

.img-placeholder__note {
  font-size: var(--text-sm);
  font-style: italic;
}

/* Inquiry form */
.inquiry-form {
  display: grid;
  gap: var(--space-4);
  max-width: 36rem;
}

.inquiry-form label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 600;
}

.inquiry-form input,
.inquiry-form textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-slate-navy);
  border-radius: var(--radius);
  font: inherit;
}

.inquiry-form__status {
  padding: var(--space-4);
  border-radius: var(--radius);
  background-color: var(--section-tint);
  border: 1px solid var(--color-hairline);
}

/* Testimonials */
.testimonial {
  padding: var(--space-5);
  border-left: 4px solid var(--accent);
  background-color: var(--color-white);
}

.testimonial__tag {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-slate-navy);
}

/* Footer */
.site-footer {
  margin-top: var(--space-10);
  padding-block: var(--space-8);
  background-color: var(--color-slate-navy);
  color: var(--color-warm-white);
}

.site-footer a {
  color: var(--color-warm-white);
}

.site-footer__tagline {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
}

.site-footer__links ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__copy {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}

/* Track filter (CSS-only, Testimonials page). Radio inputs + :checked sibling
   selectors hide non-matching entries. No JavaScript. */
.track-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.track-filter__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.track-filter__label {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-slate-navy);
  border-radius: var(--radius);
  cursor: pointer;
}

#tf-all:checked ~ .track-filter label[for="tf-all"],
#tf-settle:checked ~ .track-filter label[for="tf-settle"],
#tf-study:checked ~ .track-filter label[for="tf-study"],
#tf-travel:checked ~ .track-filter label[for="tf-travel"] {
  background-color: var(--accent);
  color: var(--color-warm-white);
  border-color: var(--accent);
}

.track-filter__input:focus-visible ~ .track-filter .track-filter__label {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.testimonial-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

#tf-settle:checked ~ .testimonial-list li:not([data-tracks~="settle"]),
#tf-study:checked ~ .testimonial-list li:not([data-tracks~="study"]),
#tf-travel:checked ~ .testimonial-list li:not([data-tracks~="travel"]) {
  display: none;
}

/* Blog lists */
.post-list {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-card__meta,
.post__meta {
  font-size: var(--text-sm);
  color: var(--color-charcoal);
}

.tag {
  display: inline-block;
  margin-right: var(--space-2);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  border: 1px solid var(--color-harbor-blue);
  border-radius: var(--radius);
}

.tag--track {
  border-color: var(--accent);
}

.steps {
  padding-left: var(--space-5);
}

.track__travel-angle {
  border-left: 4px solid var(--color-harbor-blue);
  padding-left: var(--space-4);
}