/* ==========================================================================
   layout.css  containers, sections, grids, site header, drawer, footer
   Mobile-first: every media query is a min-width upgrade.
   ========================================================================== */

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

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

/* A narrow container is still 780px  too wide for body prose. Direct
   paragraphs are capped to a readable measure so a single sentence cannot
   run to ~90 characters a line. Tables and grids keep the full width. */
.container--narrow > p {
  max-width: 64ch;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--section-y);
}

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

.section--navy {
  background-color: var(--color-primary-dark);
  color: var(--color-on-dark);
}

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

.section--flush {
  padding-top: 0;
}

.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4 {
  color: var(--color-on-dark);
}

.section--navy p {
  color: var(--color-on-dark-muted);
}

.section--navy a {
  color: var(--color-on-dark);
}

/* --------------------------------------------------------------------------
   Section heading
   -------------------------------------------------------------------------- */
.section-heading {
  max-width: 64ch;
  margin-bottom: var(--space-7);
}

.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.section-heading__lead {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

/* Small uppercase label. Maroon is spent here and almost nowhere else 
   it is the accent, not a theme. */
.eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.section--navy .eyebrow {
  color: var(--color-on-dark);
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Grids
   auto-fit + minmax instead of breakpoint rules: the track count falls out of
   the available width, which is exactly the brief's 3-4 / 2 / 1 requirement
   at desktop / tablet / mobile without a single media query to maintain.
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-5);
}

.grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.grid--halves {
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

@media (min-width: 900px) {
  .grid--halves {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* ==========================================================================
   SITE HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}

.site-header.is-condensed {
  box-shadow: var(--shadow-md);
  border-bottom-color: var(--color-border-strong);
}

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

/* The condensed header changes min-height only. Animating it would thrash
   layout on every frame; the shadow and border on .site-header still carry
   the transition, so the condense reads as a quiet state change, not a jump. */
.site-header.is-condensed .site-header__inner {
  min-height: var(--header-height-condensed);
}

/* --------------------------------------------------------------------------
   Brand  colour logo mark + live text on a white ground.
   The header surface is light because the client's full-colour mark is the
   authority and it fails contrast on navy (maroon wordmark on #252847 is
   2.1:1). White is the one ground the mark is drawn for, so the header moved
   to it rather than the mark being swapped for the mono cut.
   The mark is still square-portrait and its internal wordmark is illegible
   below ~200px tall, so the name travels as live text beside it. The logo is
   never redrawn, only placed.
   -------------------------------------------------------------------------- */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 1;
  min-width: 0;
  color: var(--color-text);
  text-decoration: none;
}

.brand:hover {
  color: var(--color-accent);
}

.brand__mark {
  height: 34px;
  width: auto;
  flex-shrink: 0;
}

.brand__name {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-wrap: balance;
}

.brand__tag {
  display: none;
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--color-text-muted);
}

@media (min-width: 480px) {
  .brand__mark { height: 40px; }
  .brand__name { font-size: var(--text-base); }
}

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

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

.site-nav__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.site-nav__link:hover {
  background-color: var(--color-primary-tint);
  color: var(--color-accent);
}

/* Current page. Maroon now reads at 8.17:1 on the white header, so the active
   marker is the accent rule itself  the one loud thing in the chrome. */
.site-nav__link[aria-current="page"] {
  color: var(--color-accent);
  box-shadow: inset 0 -2px 0 0 var(--color-accent);
}

/* Mobile conversion fallback. Below 900px the inline nav is a drawer, so the
   header keeps a direct route to the contact page instead of leaving a
   phone with no visible action. It yields to the full nav with no scripting. */
.site-header__contact {
  display: none;
}

@media (max-width: 899px) {
  .site-header__contact {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--space-2);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--radius-sm);
  }

  .site-header__contact:hover {
    background-color: var(--color-primary-tint);
    color: var(--color-accent);
  }
}

.no-js .site-header__contact {
  display: none;
}

/* --------------------------------------------------------------------------
   Language switch — live ID / EN toggle.
   A real control pair, not a link out to a second page: state lives on
   aria-pressed and the whole site re-renders in place. Hidden below 480px in
   the header where it would crowd the brand, contact link and hamburger;
   the drawer always carries it, so the control stays reachable.
   -------------------------------------------------------------------------- */
.lang-switch {
  display: none;
  align-items: center;
  gap: var(--space-1);
}

.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 34px;
  min-height: 34px;
  padding: 0 var(--space-1);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.lang-switch__btn:hover {
  color: var(--color-text);
  background-color: var(--color-primary-tint);
}

.lang-switch__btn[aria-pressed="true"] {
  color: var(--color-accent);
  box-shadow: inset 0 -2px 0 0 var(--color-accent);
}

/* The flags are drawn, not emoji. Windows ships no colour flag glyphs, so
   U+1F1EE U+1F1E9 renders as the letters "ID" on the exact platform a large
   share of this audience uses. Both flags carry a hairline because the
   Indonesian and English fields are white and the header ground is white. */
.lang-switch__flag {
  display: block;
  width: 18px;
  height: 12px;
  flex-shrink: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 1px;
}

.lang-switch__sep {
  color: var(--color-border-strong);
  font-size: var(--text-xs);
}

@media (min-width: 480px) {
  .lang-switch {
    display: inline-flex;
  }
}

/* The drawer version is a full-width, larger-target row. */
.drawer .lang-switch {
  display: inline-flex;
  margin-bottom: var(--space-5);
}

.drawer .lang-switch__btn {
  min-width: 44px;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   Hamburger
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  padding: 0;
  flex-shrink: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
}

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

.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);
}

@media (min-width: 900px) {
  .site-nav { display: block; }
  .nav-toggle { display: none; }
  .brand__tag { display: block; }
  .site-header__inner { justify-content: flex-start; }
  .site-nav { margin-left: auto; }
}

/* Once the container can seat the full desktop header, stop the longer
   Indonesian labels ("Tentang Kami", "Cara Sewa") from breaking onto two
   lines. Below this the nav legitimately wraps rather than overflow. */
@media (min-width: 1024px) {
  .site-nav__link {
    white-space: nowrap;
  }
}

/* ==========================================================================
   MOBILE DRAWER
   ========================================================================== */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--container-pad) var(--space-7);
  background-color: var(--color-background);
  overflow-y: auto;
  /* Hidden from the accessibility tree and from tab order when closed. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  /* `visibility` is delayed to the END of the close transition so the panel
     stays painted while it fades, and switched immediately on open. Without
     this the drawer is still `visibility: hidden` at the instant nav.js calls
     focus(), and the focus call is silently dropped. */
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              visibility 0s linear var(--dur-base);
}

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

.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
  margin-bottom: var(--space-6);
}

.drawer__nav {
  margin-bottom: var(--space-6);
}

.drawer__list {
  border-top: 1px solid var(--color-border);
}

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.drawer__link:hover {
  color: var(--color-accent);
  background-color: var(--color-primary-tint);
}

/* Current page in the drawer. A filled row plus maroon and a weight step 
   no side-tab rule, which the quality floor bans on list items, and the state
   is carried by weight and fill as well as hue so it is never colour-only. */
.drawer__link[aria-current="page"] {
  background-color: var(--color-primary-tint);
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

.drawer__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-6);
}

/* The drawer is a mobile affordance only; at desktop the header nav takes over. */
@media (min-width: 900px) {
  .drawer {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   No-JS fallback.
   Without script nothing can open the drawer, so a hamburger would be a dead
   control standing between the visitor and every page. The navigation instead
   renders as a plain visible list, and the WhatsApp CTA is promoted into the
   header so the primary conversion survives too.
   -------------------------------------------------------------------------- */
.no-js .nav-toggle,
.no-js .drawer {
  display: none;
}

.no-js .site-nav {
  display: block;
}

.no-js .site-header__inner {
  flex-wrap: wrap;
  padding-block: var(--space-3);
}

@media (max-width: 899px) {
  .no-js .site-nav {
    width: 100%;
    order: 3;
  }

  .no-js .site-nav__list {
    flex-direction: column;
    align-items: stretch;
  }

  .no-js .site-nav__link {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
  }

  .no-js .site-nav__link[aria-current="page"] {
    box-shadow: none;
    background-color: var(--color-primary-tint);
    color: var(--color-accent);
    font-weight: var(--weight-semibold);
  }
}

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */
.site-footer {
  background-color: var(--color-primary-dark);
  color: var(--color-on-dark-muted);
  padding-block: var(--space-8) var(--space-5);
  font-size: var(--text-sm);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .site-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: var(--space-6);
  }
}

.site-footer__brand {
  max-width: 34ch;
}

.site-footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  color: var(--color-on-dark);
}

.site-footer__logo img {
  height: 44px;
  width: auto;
}

.site-footer__name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.site-footer__tag {
  font-size: var(--text-xs);
  color: var(--color-on-dark-muted);
}

.site-footer__title {
  margin-bottom: var(--space-4);
  color: var(--color-on-dark);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

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

.site-footer a {
  color: var(--color-on-dark-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-on-dark);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.site-footer__rule {
  margin-block: var(--space-7) var(--space-5);
  border-top: 1px solid var(--color-on-dark-line);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-xs);
}

@media (min-width: 700px) {
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* The floating WhatsApp button is fixed to the bottom-right of the
       viewport; this keeps the trailing tagline out from under it. */
    padding-right: 200px;
  }
}