/* ==========================================================================
   Room Wanted · public header on small screens
   The Room Wanted pages are responsive (tenants arrive from Facebook on their phone), but
   the public header was drawn for desktop only. Here, and only on .page--wanted, it
   becomes two rows: logo + "List your place", then the links (scrollable) + "Log in".
   Every other page keeps the header exactly as it was.
   ========================================================================== */

@media (max-width: 1024px) {
  .page--wanted .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    row-gap: 12px;
    padding: 12px var(--owner-gutter);
  }

  .page--wanted .site-header__actions { display: contents; }
  .page--wanted .site-header__brand { grid-column: 1; grid-row: 1; }
  .page--wanted .site-header__cta { grid-column: 2; grid-row: 1; justify-self: end; }

  .page--wanted .site-header__nav {
    grid-column: 1;
    grid-row: 2;
    gap: 22px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .page--wanted .site-header__nav::-webkit-scrollbar { display: none; }

  .page--wanted .site-header__actions > .site-header__link {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    white-space: nowrap;
  }
}

/* Phones: "☰" menu instead of the logo; the section links open as a drop-down (js/navigation.js).
   Same rules as css/mobile.css for the other public pages. */
@media (max-width: 600px) {
  /* Header: "☰" button (in place of the logo), "Log in" and "List your place".
     The four section links open as a drop-down under the header when "☰" is tapped. */
  .page--wanted .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    column-gap: 12px;
    row-gap: 0;
    padding: 10px var(--owner-gutter);
  }
  .page--wanted .site-header__brand { display: none; }
  .page--wanted .site-header__menu {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 11px;
    box-sizing: border-box;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-teal);
    cursor: pointer;
  }
  .page--wanted .site-header__menu-line {
    display: block;
    height: 2.5px;
    border-radius: 2px;
    background: var(--color-surface);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  /* Open: the three lines turn into an "X" */
  .page--wanted .site-header--open .site-header__menu-line:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .page--wanted .site-header--open .site-header__menu-line:nth-child(2) { opacity: 0; }
  .page--wanted .site-header--open .site-header__menu-line:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .page--wanted .site-header__actions > .site-header__link { grid-column: 3; grid-row: 1; justify-self: end; font-size: 15px; }
  .page--wanted .site-header__cta { grid-column: 4; grid-row: 1; font-size: 14px; padding: 10px 14px; }

  .page--wanted .site-header__nav {
    display: none;
    /* auto placement: the drop-down spans the whole header, not one grid cell */
    grid-column: auto;
    grid-row: auto;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0 10px;
    overflow: visible;
    white-space: normal;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 14px 28px rgba(10, 76, 75, 0.14);
  }
  .page--wanted .site-header--open .site-header__nav { display: flex; }
  .page--wanted .site-header__nav .site-header__link {
    font-size: 16px;
    padding: 14px var(--owner-gutter);
    border-bottom: 0;
    border-left: 3px solid transparent;
  }
  .page--wanted .site-header__nav .site-header__link--active {
    border-left-color: var(--color-teal);
    background: var(--color-teal-faint);
  }
}