/**
 * Seachickens — site header styles.
 * Padding, border, and position come from the header pattern (outer Group).
 * Use body prefix for specificity; !important only where block inline styles win.
 */

/* ─── Base header ────────────────────────────────────────────────────────── */

body .seachickens-header.wp-block-group {
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* ─── Logo + site title group ────────────────────────────────────────────── */

/* Override block inline styles so header title matches design. */
body .seachickens-header .wp-block-site-title {
  line-height: 1 !important;
}

body .seachickens-header .wp-block-site-title a {
  color: var(--wp--preset--color--white);
  text-decoration: none !important;
  transition: color 0.2s ease;
}

body .seachickens-header .wp-block-site-title a:hover {
  color: var(--sc-green) !important;
}

/* ─── Desktop: push nav + subscribe to the right ────────────────────────── */

/* nav and subscribe are now direct children of the header; auto margin
   absorbs all free space and keeps them flush to the right edge. */
body .seachickens-header > .wp-block-navigation {
  margin-left: auto;
}


/* Subscribe button alignment and full overlay styles are in the overlay section below. */

/* ─── Navigation links ───────────────────────────────────────────────────── */

/* Override block inline styles so nav matches design. */
body .seachickens-header .wp-block-navigation {
  font-family: var(--sc-condensed-font);
}

body .seachickens-header .wp-block-navigation .wp-block-navigation-item a {
  color: var(--sc-silver);
  text-decoration: none;
  transition: color 0.2s ease;
}

body .seachickens-header .wp-block-navigation .wp-block-navigation-item a:hover {
  color: #fff;
}

/* ─── SUBSCRIBE button ───────────────────────────────────────────────────── */

body .seachickens-header .wp-block-button__link {
  font-family: var(--sc-condensed-font);
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

body .seachickens-header .wp-block-button__link:hover {
  transform: none;
  box-shadow: none;
  background-color: var(--wp--preset--color--primary-dark) !important;
}

/* ─── Mobile (≤600px) ────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  body .seachickens-header.wp-block-group {
    column-gap: 0 !important; /* WordPress generates 19.2px gap; zero it so logo+hamburger fit row 1 */
    padding-left: var(--wp--preset--spacing--20) !important;
    padding-right: var(--wp--preset--spacing--20) !important;
  }

  /* Logo+title group: flex-basis:0 so its hypothetical line-fitting size is 0,
     guaranteeing it and the hamburger both land on row 1 during flex wrapping.
     flex-grow:1 then fills all remaining space after the 44px nav cap. */
  body .seachickens-header > .wp-block-group:first-child {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Constrain nav overlay modal to layout viewport (Chrome can size it to visual
     viewport/window and exceed the visible area; 100svw = small viewport width). */
  body .seachickens-header .wp-block-navigation__responsive-container.is-menu-open {
    width: 100svw;
    max-width: 100%;
    box-sizing: border-box;
    left: 0;
    right: 0;
  }



  /* Scale logo and title proportionally across 320–390px so the hamburger
     always stays on row 1. clamp(min, preferred-vw, max):
       390px → logo≈70px, font≈1.95rem  (slight reduction from design target, imperceptible)
       375px → logo≈68px, font≈1.88rem
       320px → logo≈58px, font≈1.60rem  */
  body .seachickens-header .wp-block-site-logo,
  body .seachickens-header .wp-block-site-logo img {
    width: clamp(52px, 18vw, 76px) !important;
  }

  body .seachickens-header .wp-block-site-title {
    font-size: clamp(0.95rem, 4.2vw, 1.125rem) !important;
  }
}