/* -----------------------------------------------------------------
   header.css  (alignment + no 1023/1024 jump)
   ----------------------------------------------------------------- */

/* Site is designed for light only. Opt every page that loads this
   stylesheet out of browser/OS forced dark mode, so the white-background
   logo keeps blending into the white header instead of clashing.
   'only light' is the explicit opt-out from automatic dark adjustments. */
:root { color-scheme: only light; }

header {
  display: flex;
  align-items: center;         /* baseline align logo + heading */
  gap: 16px;                   /* space between logo and heading */
  padding: 20px 10%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  position: relative;          /* anchor point for the absolutely-positioned hamburger */
}

/* left: logo */
.logo a {
  position: static;            /* was absolute */
  text-decoration: none;
  font: bold 40px 'Quicksand', sans-serif;
  color: #ff5a5f;
  letter-spacing: 1px;
}
.logo a:hover { text-shadow: 2px 2px 8px rgba(255,90,95,.4); }

/* center-left: heading (now sits right next to the logo) */
.heading {
  position: static;            /* was absolute */
  margin-left: 1px;            /* small gap from the logo */
  margin-right: auto;          /* pushes everything else to the right */
  font-family: 'Nunito Sans', sans-serif;
  color: #000;
  font-weight: 700;
  line-height: 1.1;
  font-size: clamp(36px, 6.5vw, 66px);  /* fluid size */
}

/* tiny phones: just reposition if needed (size handled by clamp) */
@media (max-width: 480px) {
  .heading { margin-left: 6px; }
}

/* lock sizes to avoid the 1023/1024px jump (optional hard stop) */
@media (max-width: 1023.98px) { .heading { font-size: 36px !important; } }
@media (min-width: 1024px) {
  header { padding: 40px 10%; }
  .heading { font-size: 36px !important; }
}

/* keep the right-most block (e.g., sign-up/login) on the far right even
   if you don't know its class name */
header > :last-child { margin-left: auto; }

/* -----------------------------------------------------------------
   Brand block: logo on the LEFT, slogan stacked UNDER the logo
   ----------------------------------------------------------------- */
header .brand {
  display: flex;
  flex-direction: column;     /* logo on top, slogan below */
  align-items: flex-start;    /* keep both flush-left */
  gap: 4px;
  margin-right: auto;         /* hold brand on the left, push nav/login right */
  padding-left: 60px;         /* clear the absolutely-positioned hamburger (44px + gap) */
}

header .brand .logo a {
  font-size: 40px;
  line-height: 1;
}

/* slogan now reads as a subordinate tagline beneath the wordmark */
header .brand .heading {
  margin: 0;
  font-size: clamp(13px, 1.5vw, 18px) !important;  /* overrides old desktop sizes */
  font-weight: 600;
  color: #555;
  line-height: 1.2;
  text-align: left;
  white-space: normal;
}

/* keep the slogan subordinate at the breakpoints that previously forced it large */
@media (min-width: 1024px)    { header .brand .heading { font-size: 18px !important; } }
@media (max-width: 1023.98px) { header .brand .heading { font-size: 15px !important; } }
/* -----------------------------------------------------------------
   ✅ FIX: slogan ("Curiocity. Adventure. Learning.") didn't fit on
   one line on mobile. Root cause was the inline style="margin-right:
   -30px" on the heading div in includes/header.php — a leftover from
   an earlier layout where heading sat beside a wider logo, not below
   it in a column. That negative margin shrank the available width
   just enough to force an awkward wrap on narrow phones.
   This override neutralises it and gives the slogan its own
   well-behaved wrapping rules on small screens.
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
  header .brand .heading {
    margin-right: 0 !important;
    max-width: 92vw;
    white-space: nowrap;          /* force one line */
    overflow: hidden;
    text-overflow: ellipsis;      /* gracefully truncate on truly tiny screens */
    font-size: clamp(10px, 3.6vw, 14px) !important;  /* shrink to fit width */
    line-height: 1.3;
  }
}

/* On mobile, keep the hamburger and .brand side by side (header stays
   row), and clear the hamburger with left padding on .brand instead of
   stacking .brand underneath it. */
@media (max-width: 768px) {
  header {
    flex-direction: row;
    align-items: flex-start;
  }
  header .brand {
    padding-left: 56px; /* clears the 44px hamburger (left:5%) + a small gap */
    padding-top: 0;
  }
}
/* -----------------------------------------------------------------
   FIX (mobile): the "F" logo image and the "ieldtrips" wordmark were
   wrapping onto two separate lines on narrow screens. The wordmark is
   an <img> immediately followed by the text "ieldtrips" inside ONE <a>;
   as a plain inline anchor the browser was free to break between the
   image and the text once width got tight. Make the anchor a single
   inline-flex unit that never wraps, and scale it down on phones so it
   fits beside the hamburger without overflowing.
   ----------------------------------------------------------------- */
header .brand .logo a {
  display: inline-flex;
  align-items: center;          /* vertically centre the F image with the text */
  white-space: nowrap;          /* never break the image away from "ieldtrips" */
}

@media (max-width: 768px) {
  header .brand .logo a { font-size: 32px; line-height: 1; }
  header .brand .logo a img {
    height: 50px !important;     /* override the inline height:65px so it fits */
    margin-right: -10px !important;
  }
}

@media (max-width: 380px) {
  header .brand .logo a { font-size: 27px; }
  header .brand .logo a img { height: 42px !important; }
}

/* -----------------------------------------------------------------
   Centered-brand header variant.
   Opt-in via $headerCentered = true in includes/header.php (account +
   profile pages). On desktop the nav is position:fixed (top-right) via
   nav.css and the hamburger is hidden here, so the brand is the ONLY
   in-flow header item — a plain margin:0 auto centres it while it stays
   in normal flow. Keeping it in flow preserves the header's natural
   height and the whitespace above/below the logo, and the nav is left
   completely untouched. Home never sets the flag, so it is unaffected.
   ----------------------------------------------------------------- */
.header--centered .hamburger { display: none; }

.header--centered .brand {
  margin: 0 auto;          /* centre the only in-flow item */
  padding-left: 0;         /* no hamburger to clear anymore */
  align-items: center;     /* centre the logo + tagline */
  text-align: center;
}
.header--centered .brand .heading { text-align: center; }

/* phones: nav is in normal flow (<769px), so stack it neatly under the
   centred logo, matching the profile page's existing mobile layout. */
@media (max-width: 768px) {
  .header--centered { flex-direction: column; align-items: center; }
}