/**
 * layout.css — page chrome (Phase 1).
 *
 * Header bar, primary navigation, auth actions, and footer. Targets the
 * live block IDs in this theme:
 *   #block-cwq-theme-branding      -> site logo
 *   #block-cwq-theme-main-menu     -> main navigation
 *   #block-cwq-theme-account-menu  -> Log in / Sign up / account links
 *   #block-cwq-theme-footer        -> footer menu
 *
 * NOTE: this theme is based on stable9, which (unlike Classy) does NOT add a
 * `.menu` class to menu <ul>s. So we target `> ul` on each menu block's <nav>
 * rather than `ul.menu`.
 *
 * Header collapses to a hamburger panel below 900px. (The content two-column
 * breakpoint stays at 767px, handled in style.css.)
 */

/* ===================================================================
   Sticky header bar
   =================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--surface-variant);
}

.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  min-height: var(--header-h);
  padding: 0 var(--margin-desktop);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gutter);
}

/* Dissolve the header region's box so its two blocks (branding + account)
   become direct flex items, letting us sit them at opposite ends with the
   nav floating between. */
.site-header .region-header { display: contents; }

/* ---- Logo (left) — scoped to the header region so it works regardless of
   the branding block's wrapper id/classes (this theme has a custom
   block.html.twig). Branding keeps the default flex order (0). ------- */
.site-header .region-header img {
  height: 34px;
  width: auto;
  display: block;
}

.site-logo { display: inline-flex; align-items: center; }
/* text fallback if no logo.svg is configured */
.site-header .region-header .site-name {
  font-size: var(--fs-headline-md);
  font-weight: 700;
}
.site-header .region-header .site-name a { color: var(--ink); }

/* ---- Primary navigation (centre) ---------------------------------- */
.site-header .region-primary-nav {
  order: 1;
  margin-left: auto;
}
#block-cwq-theme-main-menu > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(1.0rem, 2.5vw, 1.5rem);
}
#block-cwq-theme-main-menu > ul > li { margin: 0; padding: 0; }
#block-cwq-theme-main-menu a {
  display: inline-block;
  padding: 0.4rem 0;
  color: var(--secondary);
  font-size: var(--fs-body);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
#block-cwq-theme-main-menu a:hover {
  color: var(--ink);
  text-decoration: none;
}
#block-cwq-theme-main-menu a.is-active,
#block-cwq-theme-main-menu .menu-item--active-trail > a {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* ---- Account / auth actions (right) ------------------------------- */
#block-cwq-theme-account-menu { order: 2; }
#block-cwq-theme-account-menu > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--element-gap);
}
#block-cwq-theme-account-menu > ul > li { margin: 0; padding: 0; }
#block-cwq-theme-account-menu a {
  color: var(--secondary);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
#block-cwq-theme-account-menu a:hover {
  color: var(--ink);
  text-decoration: none;
}

/* "Sign up" as the primary button (in the main menu, matched by path) */
#block-cwq-theme-main-menu a[href*="/user/register"] {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.5rem 1.25rem;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--r-lg);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background var(--transition);
}
#block-cwq-theme-main-menu a[href*="/user/register"]:hover {
  background: var(--brand-hover);
  color: var(--on-brand);
}

/* Sign up shows to anonymous visitors only */
body.user-logged-in #block-cwq-theme-main-menu a[href*="/user/register"] {
  display: none;
}

/* ---- Hamburger toggle (mobile only) ------------------------------- */
.menu-btn {
  order: 3;
  display: none;
  margin-left: auto;
  padding: 0.5rem;
  background: none;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}


@media (min-width: 901px) and (max-width: 1050px) { 
  .site-header .region-header img {
    height: 18px;
  }
}

/* ===================================================================
   Responsive: collapse the bar below 900px
   =================================================================== */
@media (max-width: 900px) {
  .site-header__inner { padding: 0 var(--margin-mobile); }
  .menu-btn { display: inline-flex; }
  #block-cwq-theme-branding img,
  .site-header .region-header img { height: 28px; }

  /* nav + account drop into a full-width panel beneath the bar */
  .site-header .region-primary-nav { order: 4; flex-basis: 100%; margin-inline: 0; }
  #block-cwq-theme-account-menu   { order: 5; flex-basis: 100%; }

  .site-header:not(.is-nav-open) .region-primary-nav,
  .site-header:not(.is-nav-open) #block-cwq-theme-account-menu {
    display: none;
  }

  #block-cwq-theme-main-menu > ul,
  #block-cwq-theme-account-menu > ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding-bottom: 0.75rem;
  }
  #block-cwq-theme-main-menu a { display: block; width: 100%; }
  #block-cwq-theme-account-menu a[href*="/user/register"] {
    display: inline-block;
    margin-top: 0.5rem;
  }
}

/* ===================================================================
   Footer
   =================================================================== */
.site-footer {
  background: var(--surface-low);
  border-top: 1px solid var(--surface-variant);
  margin-top: var(--section-gap);
  margin-bottom: var(--section-gap);
}
.site-footer .region-footer {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--gutter) var(--margin-desktop);
  color: var(--secondary);
  font-size: var(--fs-label);
}
.site-footer a { color: var(--secondary); }
.site-footer a:hover { color: var(--ink); text-decoration: none; }
#block-cwq-theme-footer > ul {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
#block-cwq-theme-footer > ul > li { margin: 0; }

@media (max-width: 900px) {
  .site-footer .region-footer { padding: var(--gutter) var(--margin-mobile); }
}