/**
* Theme Name: PCHS2026
* Template: blankslate
*/

/* Design system webfonts (Oswald for display, Work Sans for body,
   Roboto for labels). The @import has to be the first thing after
   the theme header, before any other rules. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* ============================================================
   Tokens
   ============================================================
   Two layers live here:

   1. The PCHS design-system tokens (--color-*, --font-*) — these
      mirror the dsysten.css spec from the design team and are the
      source of truth for colors/typography across the site.
      The inline "base" comments next to each shade mark the
      default value for that color family (e.g.
      --color-primary-blue500); use those as defaults and pick a
      lighter/darker step only when you specifically need it.

   2. Legacy theme aliases (--pchs-*) — kept for backwards
      compatibility with the header/footer rules below. Each one is
      now just a pointer at the design-system token it represents,
      so changing a base color in step 1 cascades everywhere.
   ============================================================ */
:root {
	/* ---------- Design system fonts ---------- */
	--font-display: "Oswald", sans-serif;
	--font-body:    "Work Sans", sans-serif;
	--font-label:   "Roboto", sans-serif;

	/* ---------- Design system colors — Primary Blue ---------- */
	--color-primary-blue100: #83B9D8;
	--color-primary-blue200: #4E98BC;
	--color-primary-blue300: #13608b;
	--color-primary-blue400: #064E73;
	--color-primary-blue500: #003B5c; /* base */
	--color-primary-blue600: #00324E;
	--color-primary-blue700: #002940;
	--color-primary-blue800: #002033;
	--color-primary-blue900: #001726;

	/* ---------- Design system colors — Primary Yellow ---------- */
	--color-primary-yellow100: #F7F1D7;
	--color-primary-yellow200: #F0E3C1;
	--color-primary-yellow300: #E8D6AA;
	--color-primary-yellow400: #E0C894;
	--color-primary-yellow500: #D7BA7D; /* base */
	--color-primary-yellow600: #C2A76F;
	--color-primary-yellow700: #AD9461;
	--color-primary-yellow800: #988153;
	--color-primary-yellow900: #836E45;

	/* ---------- Design system colors — Secondary Gray ---------- */
	--color-secondary-gray100: #F8FBFC;
	--color-secondary-gray200: #F1F6F9;
	--color-secondary-gray300: #EAF0F5;
	--color-secondary-gray400: #E3E9F0;
	--color-secondary-gray500: #DCE3EB; /* base */
	--color-secondary-gray600: #D3DCE6;
	--color-secondary-gray700: #C9D6E1;
	--color-secondary-gray800: #C1D8E4;
	--color-secondary-gray900: #B7CDD9;

	/* ---------- Design system colors — Secondary Red ---------- */
	--color-secondary-red100: #F09096;
	--color-secondary-red200: #E0747A;
	--color-secondary-red300: #D1575E;
	--color-secondary-red400: #C13A42;
	--color-secondary-red500: #B12028; /* base */
	--color-secondary-red600: #991B22;
	--color-secondary-red700: #82171D;
	--color-secondary-red800: #6A1217;
	--color-secondary-red900: #530E12;

	/* ---------- Design system colors — Secondary Gold ---------- */
	--color-secondary-gold100: #FCE5BA;
	--color-secondary-gold200: #F9DB9D;
	--color-secondary-gold300: #F7D181;
	--color-secondary-gold400: #F3BD48;
	--color-secondary-gold500: #C99700; /* base */
	--color-secondary-gold600: #B38600;
	--color-secondary-gold700: #9C7500;
	--color-secondary-gold800: #866400;
	--color-secondary-gold900: #705300;

	/* ---------- Design system colors — Secondary Tan ---------- */
	--color-secondary-tan100: #FBF9F8;
	--color-secondary-tan200: #F6F3F1;
	--color-secondary-tan300: #F1EDEA;
	--color-secondary-tan400: #ECE7E2;
	--color-secondary-tan500: #E7E1DB; /* base */
	--color-secondary-tan600: #D1CCC7;
	--color-secondary-tan700: #BBB6B2;
	--color-secondary-tan800: #A59F9C;
	--color-secondary-tan900: #8F8A87;

	/* ---------- Design system colors — Neutral ----------
	   --color-neutral800 is the default text color for non-header
	   body copy across the site (applied on `body` below). */
	--color-neutral100: #F5F6F8;
	--color-neutral200: #E6E8EC;
	--color-neutral300: #D1D5DB;
	--color-neutral400: #9CA3AF;
	--color-neutral500: #6B7280;
	--color-neutral600: #4B5563;
	--color-neutral700: #374151;
	--color-neutral800: #1F2937; /* default text color */
	--color-neutral900: #111827;

	/* ---------- Legacy theme aliases ----------
	   These map the older --pchs-* variable names used in the
	   header/footer rules to the corresponding design-system tokens
	   above, so we don't have to chase every reference downstream. */
	--pchs-navy:       var(--color-primary-blue500);
	--pchs-navy-dark:  var(--color-primary-blue700);
	--pchs-gold:       var(--color-primary-yellow500);
	--pchs-gold-soft:  var(--color-primary-yellow400);
	--pchs-red:        var(--color-secondary-red500);
	--pchs-red-dark:   var(--color-secondary-red700);
	--pchs-ink:        var(--color-neutral800);
	--pchs-line:       var(--color-secondary-gray500);
	--pchs-bg:         #ffffff;
	--pchs-bg-soft:    var(--color-neutral100);

	/* ---------- Layout tokens ---------- */
	--pchs-header-max: 100%;
	--pchs-pad-x:      24px;
	--pchs-font:       var(--font-body);
}

/* ============================================================
   Base reset (parent BlankSlate ships its own; child overrides only what we need)
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--pchs-font);
	color: var(--pchs-ink);
	background: var(--pchs-bg);
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* Screen-reader-only utility (parent already defines, but be safe in child) */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}


/* ============================================================
   Design system — typography utilities
   ============================================================
   These utility classes mirror the PCHS design team's dsysten.css
   spec. Apply them by stacking the words as classes on an element,
   e.g.   <p class="text body md">Paragraph text.</p>
          <h3 class="text label sm">CATEGORY</h3>
   The element-level rules below (h1–h6) also apply automatically
   when those elements are used in markup.
   ============================================================ */

/* Display — Oswald, uppercase, tight leading. For hero-scale type
   that's bigger than h1. */
.text.display {
	font-family: var(--font-display);
	line-height: 100%;
	letter-spacing: 2%;
	text-transform: uppercase;
}

/* Font-weight utilities (apply to any text element). */
.light    { font-weight: 300; }
.regular  { font-weight: 400; }
.medium   { font-weight: 500; }
.semibold { font-weight: 600; }
.bold     { font-weight: 700; }

.text.display.lg { font-size: 72px; }
.text.display.sm { font-size: 64px; }

/* Headings. Element-level rules apply automatically to <h1>–<h5>;
   the matching .h1–.h5 class variants let you visually demote a
   heavier element to a smaller size class. */
.text.heading {
	line-height: 116%;
	letter-spacing: 2%;
	font-family: var(--font-display);
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
	text-transform: uppercase;
	font-family: var(--font-display);
}

h1, .h1 { font-size: 56px; }
h2, .h2 { font-size: 48px; }
h3, .h3 { font-size: 40px; }
h4, .h4 { font-size: 32px; letter-spacing: 0%; }
h5, .h5 { font-size: 24px; letter-spacing: 0%; }
h6, .h6 { font-size: 24px; line-height: 120%; letter-spacing: 0%; font-family: var(--font-display); }

/* Body — Work Sans (also set on `body` above so the document
   inherits it). The `.text.body.X` modifiers tune size and leading. */
p, body, .text.body { font-family: var(--font-body); }

.text.body.xlg      { font-size: 24px; line-height: 132%; letter-spacing: -2%; }
.text.body.lg.rg    { font-size: 20px; line-height: 150%; letter-spacing: -2%; }
.text.body.lg.short { font-size: 20px; line-height: 136%; letter-spacing: -2%; }
.text.body.md       { font-size: 16px; line-height: 150%; letter-spacing: 0%; }
.text.body.md.short { line-height: 132%; }
.text.body.sm       { font-size: 14px; line-height: 150%; }
.text.body.xs       { font-size: 14px; line-height: 150%; }

/* Labels — Roboto. For small caps-style metadata and form labels. */
label, .label { font-family: var(--font-label); }

.text.label.xlg          { font-size: 24px; line-height: 132%; font-weight: 500; }
.text.label.lg           { font-size: 20px; line-height: 120%; font-weight: 500; }
.text.label.md           { font-size: 20px; line-height: 140%; font-weight: 500; }
.text.label.sm           { font-size: 14px; font-weight: 700; letter-spacing: 8%; text-transform: uppercase; }
.text.label.sm.regular   { font-size: 14px; font-weight: 700; letter-spacing: 2%; text-transform: uppercase; }
.text.label.xs           { font-size: 12px; font-weight: 700; letter-spacing: 8%; text-transform: uppercase; }
.text.label.xs.regular   { font-size: 12px; font-weight: 700; letter-spacing: 2%; line-height: 120%; text-transform: uppercase; }


/* ============================================================
   Design system — color utilities
   ============================================================
   Apply to set the foreground (text) color of any element, e.g.
       <span class="color primary blue500">Navy text</span>
   Each token resolves to the corresponding --color-* variable
   defined in :root, so global color tweaks happen in one place.
   ============================================================ */

/* Primary — Blue */
.color.primary.blue100 { color: var(--color-primary-blue100); }
.color.primary.blue200 { color: var(--color-primary-blue200); }
.color.primary.blue300 { color: var(--color-primary-blue300); }
.color.primary.blue400 { color: var(--color-primary-blue400); }
.color.primary.blue500 { color: var(--color-primary-blue500); }
.color.primary.blue600 { color: var(--color-primary-blue600); }
.color.primary.blue700 { color: var(--color-primary-blue700); }
.color.primary.blue800 { color: var(--color-primary-blue800); }
.color.primary.blue900 { color: var(--color-primary-blue900); }

/* Primary — Yellow */
.color.primary.yellow100 { color: var(--color-primary-yellow100); }
.color.primary.yellow200 { color: var(--color-primary-yellow200); }
.color.primary.yellow300 { color: var(--color-primary-yellow300); }
.color.primary.yellow400 { color: var(--color-primary-yellow400); }
.color.primary.yellow500 { color: var(--color-primary-yellow500); }
.color.primary.yellow600 { color: var(--color-primary-yellow600); }
.color.primary.yellow700 { color: var(--color-primary-yellow700); }
.color.primary.yellow800 { color: var(--color-primary-yellow800); }
.color.primary.yellow900 { color: var(--color-primary-yellow900); }

/* Secondary — Gray */
.color.secondary.gray100 { color: var(--color-secondary-gray100); }
.color.secondary.gray200 { color: var(--color-secondary-gray200); }
.color.secondary.gray300 { color: var(--color-secondary-gray300); }
.color.secondary.gray400 { color: var(--color-secondary-gray400); }
.color.secondary.gray500 { color: var(--color-secondary-gray500); }
.color.secondary.gray600 { color: var(--color-secondary-gray600); }
.color.secondary.gray700 { color: var(--color-secondary-gray700); }
.color.secondary.gray800 { color: var(--color-secondary-gray800); }
.color.secondary.gray900 { color: var(--color-secondary-gray900); }

/* Secondary — Red */
.color.secondary.red100 { color: var(--color-secondary-red100); }
.color.secondary.red200 { color: var(--color-secondary-red200); }
.color.secondary.red300 { color: var(--color-secondary-red300); }
.color.secondary.red400 { color: var(--color-secondary-red400); }
.color.secondary.red500 { color: var(--color-secondary-red500); }
.color.secondary.red600 { color: var(--color-secondary-red600); }
.color.secondary.red700 { color: var(--color-secondary-red700); }
.color.secondary.red800 { color: var(--color-secondary-red800); }
.color.secondary.red900 { color: var(--color-secondary-red900); }

/* Secondary — Gold */
.color.secondary.gold100 { color: var(--color-secondary-gold100); }
.color.secondary.gold200 { color: var(--color-secondary-gold200); }
.color.secondary.gold300 { color: var(--color-secondary-gold300); }
.color.secondary.gold400 { color: var(--color-secondary-gold400); }
.color.secondary.gold500 { color: var(--color-secondary-gold500); }
.color.secondary.gold600 { color: var(--color-secondary-gold600); }
.color.secondary.gold700 { color: var(--color-secondary-gold700); }
.color.secondary.gold800 { color: var(--color-secondary-gold800); }
.color.secondary.gold900 { color: var(--color-secondary-gold900); }

/* Secondary — Tan */
.color.secondary.tan100 { color: var(--color-secondary-tan100); }
.color.secondary.tan200 { color: var(--color-secondary-tan200); }
.color.secondary.tan300 { color: var(--color-secondary-tan300); }
.color.secondary.tan400 { color: var(--color-secondary-tan400); }
.color.secondary.tan500 { color: var(--color-secondary-tan500); }
.color.secondary.tan600 { color: var(--color-secondary-tan600); }
.color.secondary.tan700 { color: var(--color-secondary-tan700); }
.color.secondary.tan800 { color: var(--color-secondary-tan800); }
.color.secondary.tan900 { color: var(--color-secondary-tan900); }

/* Neutral */
.color.neutral100 { color: var(--color-neutral100); }
.color.neutral200 { color: var(--color-neutral200); }
.color.neutral300 { color: var(--color-neutral300); }
.color.neutral400 { color: var(--color-neutral400); }
.color.neutral500 { color: var(--color-neutral500); }
.color.neutral600 { color: var(--color-neutral600); }
.color.neutral700 { color: var(--color-neutral700); }
.color.neutral800 { color: var(--color-neutral800); }
.color.neutral900 { color: var(--color-neutral900); }


/* ============================================================
   Design system — spacing utilities
   ============================================================
   .spaceN applies an N-pixel LEFT margin (per the design team
   spec). Use these inline to push an element away from its
   left-hand sibling without touching the broader layout.
   ============================================================ */
.space4   { margin-left: 4px;   }
.space8   { margin-left: 8px;   }
.space12  { margin-left: 12px;  }
.space16  { margin-left: 16px;  }
.space20  { margin-left: 20px;  }
.space24  { margin-left: 24px;  }
.space32  { margin-left: 32px;  }
.space40  { margin-left: 40px;  }
.space60  { margin-left: 60px;  }
.space80  { margin-left: 80px;  }
.space100 { margin-left: 100px; }
.space120 { margin-left: 120px; }
.space140 { margin-left: 140px; }
.space160 { margin-left: 160px; }


/* ============================================================
   Design system — border-radius utilities
   ============================================================ */
.radius.xs   { border-radius: 4px;   }
.radius.sm   { border-radius: 8px;   }
.radius.md   { border-radius: 12px;  }
.radius.lg   { border-radius: 24px;  }
.radius.xl   { border-radius: 32px;  }
.radius.xxl  { border-radius: 40px;  }
.radius.full { border-radius: 999px; }


/* ============================================================
   Design system — shadow utilities
   ============================================================ */
.shadow1 { box-shadow: 0px 2px  8px rgba(0, 0, 0, 0.15); }
.shadow2 { box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.15); }
.shadow3 { box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.15); }


/* ============================================================
   Toggle checkboxes (CSS-only menu/search open state)
   ============================================================ */
.pchs-toggle-cb {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
	margin: 0;
}
/* ============================================================
   Design system - Buttons
   ============================================================ */
   .wp-block-button{
    border-radius: 999px;
    transition-duration: 0.3s;
   }
   .wp-block-button.small > a{
    padding: 12px 20px;
   }
   .wp-block-button.large > a{
    padding: 16px 20px;
   }
   .wp-block-button.blue{
    border: 2px solid var(--color-primary-blue300);
   }
   .wp-block-button.blue:hover{
    border: 2px solid white;
   }
   .wp-block-button.blue>a{
    background-color: white;
    color:var(--color-primary-blue300);
    transition-duration: 0.3s;
   }
   .wp-block-button.blue:hover > a{
    color: white;
    background-color: var(--color-primary-blue300);
   }

   .wp-block-button.red>a{
    border: 2px solid var(--color-secondary-red500);
    color:white;
    background-color:var(--color-secondary-red500);
    transition-duration: 0.3s;
   }
   .wp-block-button.red:hover > a{
    background-color: var(--color-secondary-red900);
    border: 2px solid var(--color-secondary-red900);
   }

    .wp-block-button.neutral>a{
    border: 2px solid var(--color-neutral500);
    color:var(--color-neutral200);
    background-color:var(--color-neutral500);
    transition-duration: 0.3s;
   }
   .wp-block-button.neutral:hover > a{
    background-color: var(--color-neutral200);
    border: 2px solid var(--color-neutral200);
	color:var(--color-neutral500);
   }

   .wp-block-button.bluegray>a{
    background-color: white;
    color: var(--color-primary-blue500);
	border: 2px solid white;
    transition-duration: 0.3s;
   }
   .wp-block-button.bluegray:hover > a{
    background-color: var(--color-secondary-gray900);
    border-color: var(--color-secondary-gray900);
	color:var(--color-primary-blue500);
   }

    .wp-block-button.darkgray>a{
    background-color: var(--color-primary-blue500);
	border: 2px solid var(--color-primary-blue500);
    color: white;
    transition-duration: 0.3s;
   }
   .wp-block-button.darkgray:hover > a{
    background-color: var(--color-primary-blue300);
	border-color: var(--color-primary-blue300);
   }

/* ============================================================
   Padding
   ============================================================ */
.padding80{
	padding: 80px 64px;
}
.padding64{
	padding: 64px 40px;
}
.padding24{
	padding: 24px;
}

/* ---------- ≤1024px ---------- */
@media (max-width: 1024px){
	.padding80{
		padding: 40px 20px
	}
}

/* ============================================================
   Icon Text
   ============================================================ */
   .icon-list .wp-block-media-text__media{
	grid-template-columns:8% auto;
   }
   .icon-list .wp-block-media-text__media figure{
	max-width: 80px;
}
.icon-list .wp-block-media-text__content{
	padding-left: 20px;
}

/* ============================================================
   Main Header Component
   ============================================================ */
.mobileheader{
	display: none !important;
}
.desktopheader{
		display: flex;
}
@media (max-width: 1024px){
	.desktopheader{
		display: none;
	}
	.mobileheader{
		display: flex !important;
	}
}

/* ============================================================
   Site header
   ============================================================ */
#site-header {
	position: relative;
	background: var(--pchs-bg);
	border-bottom: 1px solid var(--pchs-line);
	z-index: 100;
}

/* ----- Top utility bar (tan) ----- */
.top-bar {
	background: var(--pchs-gold);
	color: var(--pchs-navy);
	font-size: 0.875rem;
}

.top-bar-inner {
	max-width: var(--pchs-header-max);
	margin: 0 auto;
	padding: 8px var(--pchs-pad-x);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.top-bar-phone {
	color: var(--pchs-navy);
	text-decoration: none;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.top-bar-phone .icon-phone {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* "Info for" audience dropdown.
   The button sits in the top tan bar; hovering or keyboard-focusing
   anywhere inside .info-for-dropdown reveals the gold panel below
   (which is populated from the `header-info-for` WP menu). */
.info-for-dropdown { position: relative; }

.info-for-toggle {
	background: transparent;
	border: 0;
	color: var(--pchs-navy);
	font-weight: 700;
	font-size: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	/* Padding + radius give the hover background room to read as a
	   distinct chip on the gold top bar. */
	padding: 4px 12px;
	border-radius: 999px;
	transition: background-color .15s ease;
}

/* On hover (or while the dropdown is open via keyboard focus), the
   toggle gains a translucent dark overlay — a slightly darker shade
   of the gold top bar that signals interactivity. */
.info-for-dropdown:hover .info-for-toggle,
.info-for-dropdown:focus-within .info-for-toggle {
	background: rgba(0, 0, 0, 0.12);
}

.info-for-toggle .caret {
	display: inline-block;
	font-size: 0.8em;
	line-height: 1;
}

/* The caret glyph is generated via ::before so it can flip from
   ▾ (closed) to ▴ (open) when the dropdown is engaged. */
.info-for-toggle .caret::before { content: "\25BE"; }
.info-for-dropdown:hover .info-for-toggle .caret::before,
.info-for-dropdown:focus-within .info-for-toggle .caret::before { content: "\25B4"; }

/* Dropdown panel — same gold as the top utility bar so it visually
   "hangs" from it; only the bottom corners are rounded. */
.info-for-panel {
	position: absolute;
	top: 100%;
	right: 0;
	background: var(--pchs-gold);
	min-width: 220px;
	padding: 12px 0;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	transform: translateY(2px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 110;
}

.info-for-dropdown:hover .info-for-panel,
.info-for-dropdown:focus-within .info-for-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.info-for-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.info-for-list a {
	display: block;
	padding: 8px 28px;
	color: var(--pchs-navy);
	text-decoration: none;
	font-weight: 700;
	font-size: 1rem;
}

.info-for-list a:hover { background: rgba(255, 255, 255, 0.22); }

/* ----- Main header row ----- */
.main-header { position: relative; }

.main-header-inner {
	max-width: var(--pchs-header-max);
	margin: 0 auto;
	padding: 18px var(--pchs-pad-x);
	display: flex;
	align-items: center;
	gap: 32px;
}

/* Branding */
.site-branding { flex: 0 0 auto; }

.site-branding .custom-logo-link { display: inline-block; }

.site-branding img,
.site-branding .custom-logo {
	display: block;
	max-height: 56px;
	width: auto;
}

.site-title-link {
	text-decoration: none;
	color: var(--pchs-navy);
}

.site-title {
	font-weight: 800;
	font-size: 1.125rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Primary navigation.
   The nav and the inline search bar (.search-panel below) share the
   same flex slot — when the search is opened one collapses while the
   other expands, giving a smooth crossfade. To make that animatable
   we keep BOTH elements in flex flow at all times (no display:none
   switching) and drive the swap with max-width + opacity + margin.

   The negative margin in the :checked state absorbs the 32px flex
   gap to .search-panel so the collapsing nav doesn't leave behind a
   phantom gap in the row — see the matching trick on .search-panel
   below.

   IMPORTANT: do NOT add overflow:hidden here. The dropdown sub-menus
   live inside .menu-item-has-children > .sub-menu with position:
   absolute, and any overflow clip on an ancestor will clip those
   popups too. The opacity transition is purposely short (.15s) so
   the menu items become invisible quickly during the brief moment
   while max-width is still shrinking — i.e. they don't visually
   overflow past the nav box for long enough to be noticed. */
.primary-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	min-width: 0;
	max-width: 100%;
	opacity: 1;
	visibility: visible;
	margin-right: 0;
	transition: max-width .35s ease, opacity .15s ease, visibility .15s, margin-right .35s ease;
}

.primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	/* nowrap is important: during the search-bar animation .primary-nav's
	   max-width transitions from 100% to 0, and if items were allowed to
	   wrap they'd stack onto new lines and balloon the header height
	   mid-transition. Forcing one line keeps the row at a constant
	   height; the overflowing items are already being faded out by the
	   parent's opacity transition. */
	flex-wrap: nowrap;
	/* Items themselves carry horizontal padding for the pill hover
	   state, so the gap between them only needs to cover the visual
	   breathing room between adjacent pills. */
	gap: 6px;
	align-items: center;
}

.primary-menu > li { position: relative; }

.primary-menu > li > a {
	color: var(--pchs-navy);
	text-decoration: none;
	font-weight: 700;
	font-size: 1rem;
	padding: 10px 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border-radius: 999px;
	transition: background-color .15s ease, color .15s ease;
}

.primary-menu .menu-item-has-children > a::after {
	content: "\25BE";
	font-size: 0.7em;
}

/* Open state — top-level items get a navy pill background while
   hovered or while something inside them has keyboard focus.
   NOTE: .current-menu-item is intentionally NOT styled here — the
   active page should render the same as every other top-level item.
   :focus-within fires when something inside the item (the item
   itself or any submenu link) has keyboard focus, so the pill stays
   "on" while the user is interacting with the dropdown. */
.primary-menu > li:hover > a,
.primary-menu > li:focus-within > a {
	background: var(--pchs-navy);
	color: #fff;
}

/* The down arrow flips to an up arrow while the dropdown is open. */
.primary-menu > li.menu-item-has-children:hover > a::after,
.primary-menu > li.menu-item-has-children:focus-within > a::after {
	content: "\25B4";
}

/* Sticky-focus fix.
   After a user clicks a top-level link the link keeps focus, which
   keeps :focus-within active on its <li> and would leave the
   dropdown open. If the user then hovers a different top-level
   item we want THAT one to take over — i.e. the previously
   clicked-and-focused item should drop back to its idle state.
   These rules say: when any sibling <li> is being hovered, any
   other sibling that's only focus-within (not hovered) is reset. */
.primary-menu:has(> li:hover) > li:focus-within:not(:hover) > a {
	background: transparent;
	color: var(--pchs-navy);
}
.primary-menu:has(> li:hover) > li:focus-within:not(:hover) > .sub-menu {
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
}
.primary-menu:has(> li:hover) > li.menu-item-has-children:focus-within:not(:hover) > a::after {
	content: "\25BE";
}

/* Primary menu dropdown sub-menus.
   Two visual modes, switched automatically based on the menu's
   structure (via CSS :has()):
     - Single-level submenu (parent → children only): narrow dark-
       navy rounded panel with white links stacked vertically.
     - Multi-level submenu (parent → children → grandchildren): wider
       "mega" panel where each first-level child becomes a gold,
       UPPERCASE column heading and the nested grandchildren render
       as the link list beneath it.
   :has() is supported in Chrome 105+, Firefox 121+, Safari 15.4+.
   In older browsers the multi-level branch is ignored and the
   submenu falls back to the single-level styling — still readable,
   just without the column layout. */

.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--pchs-navy);
	color: #fff;
	min-width: 260px;
	margin: 8px 0 0;
	padding: 16px 0;
	list-style: none;
	border-radius: 18px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 60;
}

.primary-menu > li:hover > .sub-menu,
.primary-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-menu .sub-menu a {
	display: block;
	padding: 10px 28px;
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	font-size: 0.95rem;
}

.primary-menu .sub-menu a:hover { color: var(--pchs-gold-soft); }

/* --- Multi-level "mega" layout --------------------------------------
   When a top-level sub-menu contains a NESTED sub-menu, switch the
   parent submenu to a column layout. */
.primary-menu > li > .sub-menu:has(.sub-menu) {
	display: flex;
	gap: 44px;
	padding: 28px 32px;
	min-width: 720px;
	width: max-content;
}

.primary-menu > li > .sub-menu:has(.sub-menu) > li {
	flex: 1 1 auto;
	min-width: 160px;
	position: static; /* don't make grandchildren another popup. */
}

/* Top-level child link inside the mega menu = column heading.
   These items still carry .menu-item-has-children (they DO have
   children), so we explicitly suppress the down-arrow caret here —
   inside a mega menu they're acting as headings, not as parents
   pointing at a further popup. */
.primary-menu > li > .sub-menu:has(.sub-menu) > li > a {
	color: var(--pchs-gold);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 0 0 14px;
}

.primary-menu > li > .sub-menu:has(.sub-menu) > li.menu-item-has-children > a::after {
	content: none;
}

.primary-menu > li > .sub-menu:has(.sub-menu) > li > a:hover {
	background: transparent;
	color: var(--pchs-gold-soft);
}

/* Nested sub-menu inside the mega — render in normal flow under the
   gold heading instead of as its own absolutely-positioned popup. */
.primary-menu > li > .sub-menu:has(.sub-menu) .sub-menu {
	position: static;
	display: block;
	background: transparent;
	min-width: 0;
	margin: 0;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.primary-menu > li > .sub-menu:has(.sub-menu) .sub-menu a {
	padding: 6px 0;
	font-weight: 500;
}

.primary-menu > li > .sub-menu:has(.sub-menu) .sub-menu a:hover {
	color: var(--pchs-gold-soft);
}

/* Header action area (search + buttons + hamburger) */
.header-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

/* Search icon */
.search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--pchs-navy);
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 999px;
}

.search-toggle:hover { background: var(--pchs-bg-soft); }

.icon-search {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* CTA buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	padding: 10px 22px;
	border-radius: 999px;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.8125rem;
	letter-spacing: 0.6px;
	white-space: nowrap;
	border: 2px solid transparent;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
	line-height: 1;
}

.btn-apply {
	border-color: var(--pchs-navy);
	color: var(--pchs-navy);
	background: #fff;
}

.btn-apply:hover {
	background: var(--pchs-navy);
	color: #fff;
}

.btn-request {
	background: var(--pchs-red);
	color: #fff;
	border-color: var(--pchs-red);
}

.btn-request:hover {
	background: var(--pchs-red-dark);
	border-color: var(--pchs-red-dark);
}

/* Hamburger toggle */
.menu-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	background: transparent;
	border: 0;
	padding: 0;
}

.menu-toggle .bar {
	display: block;
	width: 26px;
	height: 3px;
	background: var(--pchs-navy);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

#pchs-menu-toggle:checked ~ .main-header .menu-toggle .bar:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
#pchs-menu-toggle:checked ~ .main-header .menu-toggle .bar:nth-child(2) {
	opacity: 0;
}
#pchs-menu-toggle:checked ~ .main-header .menu-toggle .bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* ----- Inline search bar (revealed by the search toggle) -----
   Lives between .primary-nav and .header-actions inside
   .main-header-inner. Hidden by default; appears as a pill-shape
   input when the search icon is clicked. At >=1200px the primary
   nav is hidden at the same time, so the search bar visually
   REPLACES the menu rather than sliding in below it. The X icon
   at the right edge of the bar closes it — it points at the same
   #pchs-search-toggle checkbox the icon button uses.

   Animation: the panel is always present in flex flow and crossfades
   with .primary-nav via max-width + opacity (display: none can't be
   transitioned, so neither element is ever removed from layout). */
.search-panel {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-width: 0; /* let the form shrink inside the flex parent. */
	overflow: hidden;
	max-width: 0;
	opacity: 0;
	visibility: hidden;
	/* -32px left margin cancels out the flex `gap: 32px` between
	   .primary-nav and .search-panel while the bar is collapsed,
	   so the rest of the row sits exactly where it did before this
	   element existed (no phantom gap). */
	margin: 0 0 0 -32px;
	pointer-events: none;
	transition: max-width .35s ease, opacity .25s ease, margin .35s ease, visibility .25s;
}

#pchs-search-toggle:checked ~ .main-header .search-panel {
	max-width: 100%;
	opacity: 1;
	visibility: visible;
	margin: 0;
	pointer-events: auto;
}

/* When the search bar is open, the primary nav fades/collapses out of
   the way (the bar takes its slot) and the outer search icon hides
   since the X inside the bar is the close affordance. The negative
   right margin here mirrors the trick on .search-panel — it absorbs
   the flex gap so the (now zero-width) primary nav doesn't leave a
   phantom space between the branding and the open search bar. */
#pchs-search-toggle:checked ~ .main-header .primary-nav {
	max-width: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	margin-right: -32px;
}
#pchs-search-toggle:checked ~ .main-header .header-actions .search-toggle { display: none; }

.search-form {
	display: flex;
	align-items: center;
	width: 100%;
	background: var(--pchs-bg-soft);
	border-radius: 999px;
	padding: 0 8px 0 4px;
	gap: 2px;
}

.search-field {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font: inherit;
	font-size: 1rem;
	color: var(--pchs-ink);
	padding: 12px 18px;
}

.search-field::placeholder { color: rgba(10, 58, 95, 0.6); }

.search-submit,
.search-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: transparent;
	border: 0;
	color: var(--pchs-navy);
	cursor: pointer;
	border-radius: 999px;
	padding: 0;
}

.search-submit:hover { color: var(--pchs-navy-dark); background: rgba(10, 58, 95, 0.06); }
.search-close:hover { color: var(--pchs-red); background: rgba(10, 58, 95, 0.06); }

.search-submit svg,
.search-close svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* ----- Mobile / collapsed menu panel (revealed by hamburger) -----
   Used at <1200px. The panel slides open from beneath the header and
   contains everything the desktop layout exposes outside the hamburger:
   the primary nav (as full-width pills), site search, the Apply Now /
   Request Info CTAs, and the utility row (phone + Info-for audience
   links).

   The accordion behavior (single-open per level) is wired up by the
   inline script at the bottom of header.php — that script adds/removes
   the `.is-open` class on .menu-item-has-children <li> elements; the
   open/close visuals below key off that class. */
.mobile-menu-panel {
	display: none;
	background: #fff;
	border-top: 1px solid var(--pchs-line);
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	padding-bottom: 0;
}

#pchs-menu-toggle:checked ~ .main-header .mobile-menu-panel { display: block; }

.mobile-nav { padding: 16px var(--pchs-pad-x); }

.mobile-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Each menu row (parent or child) is a full-width navy pill. Items
   that have children use flex to push the caret out to the right. */
.mobile-menu-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 24px;
	background: var(--pchs-navy);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.05rem;
	border-radius: 999px;
	transition: background-color .15s ease, color .15s ease;
}

.mobile-menu-list a:hover { background: var(--pchs-navy-dark); }

/* Caret indicator for items with children. GOLD at the top level —
   children/grandchildren override this color further below. */
.mobile-menu-list .menu-item-has-children > a::after {
	content: "\25BE";
	font-size: 0.85em;
	color: var(--pchs-gold);
	transition: transform .2s ease;
	line-height: 1;
}

.mobile-menu-list .menu-item-has-children.is-open > a::after {
	transform: rotate(180deg);
}

/* Sub-menu container — collapses with a max-height transition.
   200vh is a deliberately oversized cap so menus of any depth open
   cleanly; the transition still feels snappy because the *actual*
   rendered height stays much smaller. */
.mobile-menu-list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 0;
	overflow: hidden;
	transition: max-height .35s ease, margin .25s ease;
}

.mobile-menu-list .menu-item-has-children.is-open > .sub-menu {
	max-height: 200vh;
	margin-top: 8px;
	/* Horizontal padding insets the inner pills from the open .is-open
	   container's edges, so the navy frame defined below has a small
	   margin of "matte" around its contents. */
	padding: 0 8px;
}

/* Level 2 (children) — same navy pill as parents, but the caret
   switches from gold to white to differentiate the hierarchy. */
.mobile-menu-list .sub-menu .menu-item-has-children > a::after {
	color: #fff;
}

/* Level 3 (grandchildren) — invert the children's colors: white
   pill background with navy text. Carets (if any) match the navy. */
.mobile-menu-list .sub-menu .sub-menu > li > a {
	background: #fff;
	color: var(--pchs-navy);
	border: 1px solid var(--pchs-navy);
}

.mobile-menu-list .sub-menu .sub-menu > li > a:hover {
	background: var(--pchs-bg-soft);
}

.mobile-menu-list .sub-menu .sub-menu .menu-item-has-children > a::after {
	color: var(--pchs-navy);
}

/* ----- Open-state "frames" -----
   When a parent (level 1) or child (level 2) item is expanded, its
   <li> picks up a navy background + rounded corners so the parent's
   row and its expanded sub-items read as a single visual group. The
   level-2 frame also gains a white border — the "surround" called
   out in the spec — to set it apart from the outer level-1 frame. */

.mobile-menu-list > .menu-item-has-children.is-open {
	background: var(--pchs-navy);
	border-radius: 32px;
	padding-bottom: 8px;
}

.mobile-menu-list .sub-menu > .menu-item-has-children.is-open {
	background: var(--pchs-navy);
	border-radius: 32px;
	border: 1px solid #fff;
	padding-bottom: 8px;
}

/* Subtle white outline on level-2 children pills so their pill shape
   stays visible against the navy parent frame. Grandchildren are
   already inverted (white pill / navy text) by the rule above and so
   don't need this. Suppressed on the open child since its <li> is
   now the bordered container — a border on the inner <a> too would
   double up against the <li>'s border. */
.mobile-menu-list > .menu-item-has-children > .sub-menu > li > a {
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.mobile-menu-list .sub-menu > .menu-item-has-children.is-open > a {
	border-color: transparent;
}

/* ----- Mobile search form -----
   Sits between the primary nav and the CTA buttons. Reuses the
   .search-field / .search-submit visual treatment from the inline
   desktop search bar so the form reads the same way in both layouts. */
.mobile-search-form {
	display: flex;
	align-items: center;
	margin: 0 var(--pchs-pad-x) 16px;
	background: var(--pchs-bg-soft);
	border-radius: 999px;
	padding: 0 8px 0 4px;
}

.mobile-search-form .search-field { padding: 14px 18px; }

/* ----- Mobile Apply Now / Request Info -----
   Reuses .btn-apply / .btn-request from the rest of the theme; only
   the container's stacking and full-width sizing are new here. */
.mobile-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 var(--pchs-pad-x);
	margin-bottom: 20px;
}

.mobile-actions .btn {
	width: 100%;
	padding: 14px 22px;
	font-size: 0.95rem;
}

/* ----- Mobile utility section (phone + Info-for audience links) -----
   Mirrors the gold top utility bar shown at >=1200px, but laid out
   vertically. Phone number and audience menu use the SAME theme mod
   / WP menu as the desktop version (pchs_phone, header-info-for) so
   editors don't have two places to update. */
.mobile-utility {
	background: var(--pchs-gold);
	padding: 20px var(--pchs-pad-x);
}

.mobile-phone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px;
	background: rgba(255, 255, 255, 0.18);
	color: var(--pchs-navy);
	text-decoration: none;
	font-weight: 700;
	font-size: 1rem;
	border-radius: 10px;
	margin-bottom: 18px;
}

.mobile-phone .icon-phone {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.mobile-info-for-title {
	text-align: center;
	color: var(--pchs-navy);
	margin: 0 0 12px;
	/* Reset the design system's automatic h3 uppercasing — the
	   "Info for" label is title-cased to match its desktop twin. */
	text-transform: none;
	/* Size + weight come from the `text body md bold` design-system
	   classes applied on the element in header.php; this rule only
	   carries the bits the design system doesn't (alignment, color,
	   margin, and the uppercase override above). */
}

.mobile-info-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mobile-info-list a {
	display: block;
	padding: 12px 20px;
	background: rgba(255, 255, 255, 0.18);
	color: var(--pchs-navy);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.95rem;
	text-align: center;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	border-radius: 10px;
}

.mobile-info-list a:hover { background: rgba(255, 255, 255, 0.32); }

/* ============================================================
   Header responsive layouts
   Default base styles assume the largest layout (≥1200, full menu).
   Then override at narrower breakpoints.

   NOTE: .btn-apply / .btn-request / .search-toggle are scoped to
   .header-actions in these media queries so the same classes can be
   reused inside .cta-sticky (footer.php) without being hidden by the
   header's responsive rules.
   ============================================================ */

/* ---------- ≥1200px : Full menu + tan top bar ---------- */
@media (min-width: 1200px) {
	.top-bar { display: block; }
	.primary-nav { display: flex; }
	.header-actions .search-toggle { display: inline-flex; }
	.header-actions .btn-apply,
	.header-actions .btn-request { display: inline-flex; }
	.menu-toggle { display: none; }
	.mobile-menu-panel { display: none !important; }
}

/* ---------- 1025–1199px : Logo + search + buttons + hamburger ---------- */
@media (min-width: 1025px) and (max-width: 1199px) {
	.top-bar { display: none; }
	.primary-nav { display: none; }
	.header-actions .search-toggle { display: inline-flex; }
	.header-actions .btn-apply,
	.header-actions .btn-request { display: inline-flex; }
	.menu-toggle { display: inline-flex; }
}

/* ---------- ≤1024px : Logo + hamburger only ---------- */
@media (max-width: 1024px) {
	.top-bar { display: none; }
	.primary-nav { display: none; }
	.header-actions .search-toggle { display: none; }
	.header-actions .btn-apply,
	.header-actions .btn-request { display: none; }
	.menu-toggle { display: inline-flex; }

	.main-header-inner {
		padding: 14px var(--pchs-pad-x);
		gap: 16px;
	}

	.site-branding img,
	.site-branding .custom-logo { max-height: 48px; }

	/* At the smallest layout the search panel is unreachable via icon,
	   so keep its rules but the panel naturally stays hidden. */
}

/* Skip link override (parent provides) */
#wrapper > .skip-link:focus { z-index: 10000; }


/* ============================================================
   ============================================================
   FOOTER + STICKY CTA
   ============================================================
   ============================================================ */

/* ============================================================
   Sticky CTA band
   ============================================================
   `position: sticky; bottom: 0` keeps this docked to the bottom
   of the viewport while its natural DOM position is below the
   fold (which is most of the time, since it sits just above
   #site-footer). When the user scrolls to the very bottom of
   the page and the bar's natural position scrolls into view,
   the sticky positioning releases and the bar sits in normal
   flow above the footer — so footer content is never obscured.

   The bar starts hidden (translated down + opacity 0). A small
   inline script in footer.php adds .is-visible once the user
   has scrolled past #site-header, so the bar only appears after
   the user has actually started reading the page.
*/
.cta-sticky {
	position: sticky;
	bottom: 0;
	z-index: 60;
	background: var(--pchs-navy-dark);
	color: #fff;
	opacity: 0;
	transform: translateY(110%);
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
}

.cta-sticky.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.cta-sticky-inner {
	max-width: var(--pchs-header-max);
	margin: 0 auto;
	padding: 20px var(--pchs-pad-x);
	display: flex;
	align-items: center;
	gap: 24px;
}

.cta-sticky-text { flex: 1 1 auto; }

.cta-sticky-heading {
	margin: 0 0 6px;
	font-size: 1.25rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	line-height: 1.2;
	color: #fff;
}

.cta-sticky-desc {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.92);
	max-width: 60ch;
}

.cta-sticky-actions {
	display: flex;
	gap: 12px;
	flex-shrink: 0;
}

/* The CTA reuses the header's .btn-apply / .btn-request classes
   but the apply button needs a white outline on dark instead of
   navy on white. Scope the override to .cta-sticky so it doesn't
   leak into the header. */
.cta-sticky .btn-apply {
	background: transparent;
	border-color: #fff;
	color: #fff;
}
.cta-sticky .btn-apply:hover {
	background: #fff;
	color: var(--pchs-navy-dark);
}

/* At narrow widths the heading + description would push the buttons off
   screen, so we hide the text block and center what's left. The buttons
   themselves are unchanged — same size, same styling, just centered. */
@media (max-width: 767px) {
	.cta-sticky-text { display: none; }
	.cta-sticky-inner { justify-content: center; }
}


/* ============================================================
   Site footer — top band (logo + social icons)
   ============================================================ */
#site-footer {
	background: var(--pchs-navy-dark);
	color: #fff;
}

.footer-brand {
	background: var(--pchs-navy-dark);
	padding: 28px 0;
}

.footer-brand-inner {
	max-width: var(--pchs-header-max);
	margin: 0 auto;
	padding: 0 var(--pchs-pad-x);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.footer-logo { flex: 0 0 auto; }
.footer-logo-link { display: inline-block; }
.footer-logo img,
.footer-logo .custom-logo {
	display: block;
	max-height: 60px;
	width: auto;
}
.footer-logo-text {
	color: #fff;
	text-decoration: none;
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Social icons row. Each <li> is a circular hit target with the
   SVG glyph rendered inside. Color comes from currentColor so the
   icon SVGs only need fill="currentColor". */
.footer-socials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 18px;
	align-items: center;
}
.footer-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: #fff;
	text-decoration: none;
	transition: opacity .15s ease, transform .15s ease;
}
.footer-social-link:hover {
	opacity: 0.8;
	transform: translateY(-1px);
}
.footer-social-link .social-icon {
	width: 28px;
	height: 28px;
	fill: currentColor;
}


/* ============================================================
   Site footer — main band (link columns + copyright)
   ============================================================ */
.footer-main {
	/* Subtle gradient — lighter blue on the left fading to darker
	   navy on the right, matching the design comp. */
	background: linear-gradient(110deg, #114a76 0%, var(--pchs-navy) 45%, var(--pchs-navy-dark) 100%);
	color: #fff;
	padding: 48px 0 32px;
}

.footer-main-inner {
	max-width: var(--pchs-header-max);
	margin: 0 auto;
	padding: 0 var(--pchs-pad-x);
}

/* --- Column grid --------------------------------------------- */
.footer-cols {
	display: grid;
	grid-template-columns: 1.1fr 1fr 1fr 1fr 1.1fr;
	gap: 32px;
	margin-bottom: 40px;
}

.footer-col { min-width: 0; /* allow flexbox/grid children to shrink */ }

.footer-col-title {
	margin: 0 0 16px;
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: #fff;
}

/* Column links (cols 2–5 and the legal row). */
.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.footer-menu a,
.footer-menu-campus a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	font-weight: 500;
	font-size: 1rem;
}

.footer-menu a:hover,
.footer-menu-campus a:hover {
	color: var(--pchs-gold-soft);
}

/* --- Campus column (col 1) ----------------------------------- */
.footer-col-campus .footer-menu-campus {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.footer-campus-item { display: block; }

.footer-campus-item > a {
	font-weight: 700;
	font-size: 1.05rem;
}

.footer-campus-address {
	margin: 8px 0 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
}

/* --- Copyright + legal row ----------------------------------- */
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 24px;
}

.footer-bottom-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.footer-copyright {
	margin: 0;
	font-size: 0.95rem;
	color: #fff;
}

.footer-legal-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
}

.footer-legal-menu a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 700;
	font-size: 0.95rem;
}

.footer-legal-menu a:hover { color: var(--pchs-gold-soft); }

.footer-accreditation {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}

.footer-accreditation a {
	color: #fff;
	text-decoration: underline;
}

.footer-accreditation a:hover { color: var(--pchs-gold-soft); }


/* ============================================================
   Footer responsive layouts
   ============================================================
   >= 1024px  : five columns side-by-side (base rules above).
   768–1023px : campus column spans full width on top, with its
                links laid out horizontally; four menu columns
                below in a single row.
   <= 767px   : campus column on top (vertical), four menu
                columns in a 2×2 grid.
*/

/* ---------- 768–1023px ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
	.footer-cols {
		grid-template-columns: repeat(4, 1fr);
		gap: 28px 24px;
	}

	/* Campus column spans the full row across the top. */
	.footer-col-campus {
		grid-column: 1 / -1;
		margin-bottom: 8px;
	}

	/* Lay its links out horizontally instead of stacked. */
	.footer-col-campus .footer-menu-campus {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 16px 48px;
		align-items: flex-start;
	}

	.footer-campus-item { flex: 0 1 auto; }
}

/* ---------- ≤767px ---------- */
@media (max-width: 767px) {
	.footer-brand-inner {
		flex-direction: column;
		text-align: center;
	}

	.footer-cols {
		/* 2×2 grid for the four menu columns, campus spans both. */
		grid-template-columns: 1fr 1fr;
		gap: 28px 20px;
	}

	.footer-col-campus {
		grid-column: 1 / -1;
	}

	/* Keep campus links stacked vertically on mobile. */
	.footer-col-campus .footer-menu-campus {
		flex-direction: column;
		gap: 16px;
	}

	.footer-main { padding: 36px 0 28px; }

	.footer-bottom-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.footer-legal-menu { gap: 18px; }
}