/*
 * header.css — Sticky Header + Desktop Navigation + Mobile Overlay Navigation
 * CRCKC Child Theme
 * Covers:
 *   1. Sticky header positioning
 *   2. Outer flex row (.kc-header layout)
 *   3. Left group — logo + title/tagline horizontal stack
 *   4. Title + tagline vertical stack
 *   5. Logo image
 *   6. Desktop navigation links & active-item pill
 *   7. Hamburger open button
 *   8. Mobile overlay — full viewport container
 *   9. Mobile overlay — nav items
 *  10. Mobile overlay — close button
 */

/* ─────────────────────────────────────────────────────────────
   1. STICKY HEADER
───────────────────────────────────────────────────────────── */
header.wp-block-template-part {
  position: sticky;
  top:      0;
  z-index:  99;
  width:    100%;
}

/* ─────────────────────────────────────────────────────────────
   2. OUTER FLEX ROW
───────────────────────────────────────────────────────────── */
.kc-header > .wp-block-group,
.kc-header .alignwide {
  display:         flex        !important;
  flex-wrap:       nowrap      !important;
  align-items:     center      !important;
  justify-content: space-between !important;
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────
   3. LEFT GROUP — LOGO + TEXT HORIZONTAL
───────────────────────────────────────────────────────────── */
.kc-header .alignwide > .wp-block-group:first-child {
  display:        flex    !important;
  flex-direction: row     !important;
  flex-wrap:      nowrap  !important;
  align-items:    center  !important;
  gap:            0.5rem;
  flex-shrink:    0;
}

/* ─────────────────────────────────────────────────────────────
   4. TITLE + TAGLINE VERTICAL STACK
   Do NOT use margin-top/bottom — use gap:0 on the parent group
   and remove all default block margins from the children.
───────────────────────────────────────────────────────────── */

/* The inner group holding title + tagline */
.kc-header .alignwide > .wp-block-group:first-child > .wp-block-group {
  display:        flex        !important;
  flex-direction: column      !important;
  gap:            0           !important;
  align-items:    flex-start  !important;
}

.kc-header .wp-block-site-title,
.kc-header .wp-block-site-tagline {
  margin:      0 !important;
  padding:     0 !important;
  line-height: 1.2;
  display:     block;
}

.kc-header .wp-block-site-title {
  font-size:   1rem;
  font-weight: 700;
}

.kc-header .wp-block-site-title a,
.kc-header .wp-block-site-title p {
  margin:          0       !important;
  padding:         0       !important;
  font-size:       1rem;
  font-weight:     700;
  color:           #1a1a2e;
  text-decoration: none;
  white-space:     nowrap;
  line-height:     1.2;
  /* Prevent active-page pill bleeding onto site title */
  background:    none !important;
  border-radius: 0    !important;
}

.kc-header .wp-block-site-tagline {
  font-size:      0.72rem;
  color:          #555555;
  letter-spacing: 0.04em;
  line-height:    1.2;
  white-space:    nowrap;
  /* Small visual gap below title — use padding-top only, no margin */
  padding-top: 0.15rem;
}

/* ─────────────────────────────────────────────────────────────
   5. LOGO
───────────────────────────────────────────────────────────── */
.kc-header .wp-block-site-logo img {
  object-fit: contain;
  display:    block;
  padding:    10px 0 10px 10px !important;
}

/* ─────────────────────────────────────────────────────────────
   6. DESKTOP NAVIGATION LINKS
───────────────────────────────────────────────────────────── */
.wp-block-navigation {
  white-space: nowrap;
  flex-shrink: 0;
}

.wp-block-navigation-item__content {
  font-size:       0.9rem;
  font-weight:     600;
  color:           #1a1a2e;
  text-decoration: none;
  padding:         0.3rem 0.6rem;
  border-radius:   999px;
  transition:      background 0.2s ease, color 0.2s ease;
}

.wp-block-navigation-item__content:hover {
  background: rgba(11, 106, 166, 0.10);
  color:      #0b6aa6;
}

/* Active / current page pill */
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current-menu-ancestor > a,
.wp-block-navigation a[aria-current="page"] {
  color:         #ffffff   !important;
  background:    #0b6aa6   !important;
  border-radius: 999px;
  padding:       0.35rem 0.7rem;
}

/* ─────────────────────────────────────────────────────────────
   7. HAMBURGER OPEN BUTTON
───────────────────────────────────────────────────────────── */
.wp-block-navigation__responsive-container-open {
  padding:    0.4rem;
  background: none;
  border:     none;
  cursor:     pointer;
  position:   relative;
  z-index:    10001;
}

.wp-block-navigation__responsive-container-open svg {
  fill:    #1a1a2e;
  display: block;
}

/* ─────────────────────────────────────────────────────────────
   8. MOBILE OVERLAY — FULL VIEWPORT
───────────────────────────────────────────────────────────── */
.wp-block-navigation__responsive-container.is-menu-open {
  position:        fixed           !important;
  top:             0;
  left:            0;
  inset:           0               !important;
  width:           100vw           !important;
  height:          100dvh          !important;
  max-height:      none            !important;
  overflow-y:      auto            !important;
  z-index:         99999999        !important; /* must exceed ALL page stacking contexts */
  display:         flex            !important;
  flex-direction:  column          !important;
  justify-content: center          !important;
  align-items:     center          !important;
  background:      rgba(11, 106, 166, 0.8) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.wp-block-navigation__responsive-dialog {
  width:           100%;
  height:          100%;
  display:         flex    !important;
  flex-direction:  column  !important;
  justify-content: center  !important;
  align-items:     center  !important;
}

.wp-block-navigation__responsive-container-content {
  display:        flex    !important;
  flex-direction: column  !important;
  align-items:    center  !important;
  width:          100%;
}

/* ─────────────────────────────────────────────────────────────
   9. MOBILE OVERLAY — NAV ITEMS
───────────────────────────────────────────────────────────── */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container {
  flex-direction: column  !important;
  align-items:    center  !important;
  gap:            0.25rem;
  width:          100%;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
  font-size:     1rem       !important;
  font-weight:   600        !important;
  color:         #ffffff    !important;
  padding:       0.65rem    !important;
  border-radius: 999px      !important;
  border:        none       !important;
  box-shadow:    none       !important;
  outline:       none       !important;
  display:       block;
  text-align:    center;
  min-width:     100px;
  transition:    background 0.2s ease;
  background:    none       !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Active item inside overlay */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation a[aria-current="page"] {
  background:    #ffffff  !important;
  color:         #0b6aa6  !important;
  border-radius: 999px;
  padding:       0.65rem  !important;
}

/* ─────────────────────────────────────────────────────────────
   10. MOBILE OVERLAY — CLOSE BUTTON
───────────────────────────────────────────────────────────── */
.wp-block-navigation__responsive-container-close {
  position:      absolute !important;
  top:           1rem     !important;
  right:         2.5rem   !important;
  background:    #000000  !important;
  font-weight:   bolder;
  border-radius: 50%;
  border:        1px solid;
  padding:       8px;
  cursor:        pointer;
}

.wp-block-navigation__responsive-container-close svg {
  fill:    #ffffff !important;
  display: block;
}