/* ==========================================================================
   FILE: assets/css/04-layout.css
   PURPOSE: Site Layout & Structural Patterns

   CONTENTS:
   - Layout primitives (container, rules, utility spacing helpers)
   - Header + navigation layout (sticky header, nav pill layout)
   - Panel system (base/alt/emphasis/special panels, eyebrow, decorative bar)
   - Accessibility polish for navigation focus

   RULE:
   This file controls site STRUCTURE and layout.
   It should NOT contain:
   - design tokens (01-config.css)
   - global typography defaults (02-base.css)
   - component styling (03-components.css)
   - page-specific layouts (05-pages.css)
   - one-off feature sections (06-features.css)

   LOAD ORDER:
   Loaded after 03-components.css.
   ========================================================================= */

/* ============================================================
   LAYOUT PRIMITIVES (HCC)
   ============================================================ */

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.soft-rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1rem 0;
}

.toplink {
  clear: both;
  margin-top: var(--space-md);
  font-size: 0.95rem;
}

/* ============================================================
   HEADER + NAV (HCC)
   ============================================================ */

/* Header row: logo left, nav centre, toggle right */
.site-header .wp-block-group,
header .wp-block-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-header .wp-block-navigation {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.site-header .theme-toggle-slot {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
}

/* Style the site header area created in the Site Editor */
.wp-site-blocks > header,
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Remove horizontal padding from header container */
.wp-site-blocks > header,
.wp-block-template-part > header,
header.wp-block-template-part {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* If header content is inside a constrained group */
header .wp-block-group {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Let header stretch full width */
.wp-site-blocks > header .wp-block-group {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Header bar shell */
.hcc-header-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: inherit;
}

/* The visible inner row */
.hcc-header-bar > .wp-block-group {
  min-height: 0 !important;
  transition:
    padding-top 0.25s ease,
    padding-bottom 0.25s ease,
    min-height 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* Scrolled state: tighten the row */
.hcc-header-bar.is-scrolled > .wp-block-group {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  min-height: 0 !important;
}

/* Header: safe left/right padding */
.wp-site-blocks > header.wp-block-template-part > .wp-block-group.alignwide {
  padding-left: clamp(16px, 3vw, 40px) !important;
  padding-right: clamp(16px, 3vw, 40px) !important;
}

/* Navigation pills */
.wp-block-navigation-item__content,
.menu a {
  display: inline-block;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
}

.wp-block-navigation-item__content:hover,
.menu a:hover {
  background: var(--surface-2);
}

/* Keep spacing calm */
.wp-block-navigation__container {
  gap: 0.6rem;
  justify-content: center;
}

/* Tighten header items during shrink */
.hcc-header-bar .wp-block-navigation,
.hcc-header-bar .wp-block-social-links,
.hcc-header-bar .wp-block-buttons {
  transition: transform 0.25s ease;
}

.hcc-header-bar.is-scrolled .wp-block-navigation,
.hcc-header-bar.is-scrolled .wp-block-social-links,
.hcc-header-bar.is-scrolled .wp-block-buttons {
  transform: scale(0.96);
  transform-origin: center right;
}

.hcc-header-bar .wp-block-navigation,
.hcc-header-bar .wp-block-social-links,
.hcc-header-bar .wp-block-buttons,
.hcc-header-bar p,
.hcc-header-bar .wp-block-heading {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.hcc-header-bar.is-scrolled .wp-block-navigation {
  line-height: 1.1;
}

.hcc-header-bar.is-scrolled .wp-block-social-links {
  gap: 0.4rem;
}

/* Navigation focus */
.wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.menu a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hcc-header-bar > .wp-block-group,
  .hcc-logo-link,
  .hcc-logo,
  .social-link,
  .social-link svg,
  .hcc-header-bar .wp-block-navigation,
  .hcc-header-bar .wp-block-social-links,
  .hcc-header-bar .wp-block-buttons {
    transition: none !important;
  }
}

/* Mobile: calmer header */
@media (max-width: 781px) {
  .wp-site-blocks > header.wp-block-template-part > .wp-block-group.alignwide {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .hcc-header-bar.is-scrolled > .wp-block-group {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .wp-site-blocks > header.wp-block-template-part .social-link {
    width: 52px;
    height: 52px;
  }

  .wp-site-blocks > header.wp-block-template-part .social-link svg {
    width: 26px;
    height: 26px;
  }
}

/* ============================================================
   BACK TO TOP (HCC)
   ============================================================ */

html {
    scroll-behavior: smooth;
}

.hcc-back-to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}

.hcc-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hcc-back-to-top__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 3.5rem;
    height: 3rem;
    padding: 0 0.85rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.hcc-back-to-top__icon {
    font-size: 1.1rem;
    line-height: 1;
}

.hcc-back-to-top__text {
    line-height: 1;
}

.hcc-back-to-top__link:hover {
    transform: translateY(-2px);
    background: var(--surface-2);
}

.hcc-back-to-top__link:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}

@media (max-width: 781px) {
    .hcc-back-to-top {
        right: 0.75rem;
        bottom: 0.75rem;
    }

    .hcc-back-to-top__link {
        min-width: 3.25rem;
        height: 2.75rem;
        padding: 0 0.75rem;
        font-size: 0.95rem;
    }
}

/* ============================================================
   PANELS (HCC - WordPress)
   ============================================================ */

/* Base panel */
.panel,
.is-style-hcc-panel-base {
  position: relative;
  margin: var(--space-lg) 0;
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
}

/* Alternate surface */
.panel--alt,
.is-style-hcc-panel-alt {
  background: var(--surface-2);
}

/* Emphasis */
.panel--emphasis,
.is-style-hcc-panel-emphasis {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Special panel */
.panel--special,
.is-style-hcc-panel-special {
  background: linear-gradient(
    135deg,
    var(--surface-2),
    var(--accent-panel)
  );
  border-left: 8px solid var(--olive-warm);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

/* Eyebrow text */
.panel--eyebrow {
  text-transform: uppercase;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0;
}

/* Decorative left bar */
.panel::before,
.is-style-hcc-panel-base::before,
.is-style-hcc-panel-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  bottom: 1rem;
  width: 4px;
  border-radius: 4px;
  background: var(--olive-dark);
  opacity: 0.15;
}

/* ===============================
   HOMEPAGE PANEL SPACING TESTS
   =============================== */

/* More breathing room between homepage panels */
.home .wp-site-blocks .is-style-hcc-panel-base,
.home .wp-site-blocks .is-style-hcc-panel-alt,
.home .wp-site-blocks .is-style-hcc-panel-emphasis,
.home .wp-site-blocks .is-style-hcc-panel-special,
.home .wp-site-blocks .is-style-hcc-panel-motto,
.home .wp-site-blocks .is-style-hcc-safeguarding {
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 2rem;
}

/* Better spacing between items inside each panel */
.home .wp-site-blocks .is-style-hcc-panel-base > * + *,
.home .wp-site-blocks .is-style-hcc-panel-alt > * + *,
.home .wp-site-blocks .is-style-hcc-panel-emphasis > * + *,
.home .wp-site-blocks .is-style-hcc-panel-special > * + *,
.home .wp-site-blocks .is-style-hcc-panel-motto > * + *,
.home .wp-site-blocks .is-style-hcc-safeguarding > * + * {
    margin-top: 1.25rem;
}

/* Headings should not crash into following text */
.home .wp-site-blocks .is-style-hcc-panel-base h2,
.home .wp-site-blocks .is-style-hcc-panel-alt h2,
.home .wp-site-blocks .is-style-hcc-panel-emphasis h2,
.home .wp-site-blocks .is-style-hcc-panel-special h2,
.home .wp-site-blocks .is-style-hcc-panel-motto h2,
.home .wp-site-blocks .is-style-hcc-safeguarding h2 {
    margin-bottom: 1rem;
}

/* Paragraph rhythm */
.home .wp-site-blocks .is-style-hcc-panel-base p,
.home .wp-site-blocks .is-style-hcc-panel-alt p,
.home .wp-site-blocks .is-style-hcc-panel-emphasis p,
.home .wp-site-blocks .is-style-hcc-panel-special p,
.home .wp-site-blocks .is-style-hcc-panel-motto p,
.home .wp-site-blocks .is-style-hcc-safeguarding p {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Images need breathing room */
.home .wp-site-blocks .is-style-hcc-panel-base .wp-block-image,
.home .wp-site-blocks .is-style-hcc-panel-alt .wp-block-image,
.home .wp-site-blocks .is-style-hcc-panel-emphasis .wp-block-image,
.home .wp-site-blocks .is-style-hcc-panel-special .wp-block-image,
.home .wp-site-blocks .is-style-hcc-panel-motto .wp-block-image,
.home .wp-site-blocks .is-style-hcc-safeguarding .wp-block-image {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

/* Buttons / CTA spacing */
.home .wp-site-blocks .wp-block-buttons {
    margin-top: 1.5rem;
}

/* Mobile: reduce padding slightly */
@media (max-width: 781px) {
    .home .wp-site-blocks .is-style-hcc-panel-base,
    .home .wp-site-blocks .is-style-hcc-panel-alt,
    .home .wp-site-blocks .is-style-hcc-panel-emphasis,
    .home .wp-site-blocks .is-style-hcc-panel-special,
    .home .wp-site-blocks .is-style-hcc-panel-motto,
    .home .wp-site-blocks .is-style-hcc-safeguarding {
        padding: 1.25rem;
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
    }
}

/* Hero panel needs more internal breathing room at the top */
.home .hero {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.home .hero .wp-block-buttons {
    margin-top: 1.5rem;
}

/* ===============================
   HERO CTA TESTS
   =============================== */

.home .hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.home .hero-cta .wp-block-button__link {
    min-width: 11rem;
    text-align: center;
}

.home .hero p + .hero-cta-group {
    margin-top: 1rem;
}