/*
Theme Name: Sentinel
Author: Enterprise Risk Magazine
Description: The 2026 theme for the Enterprise Risk website
Version: 1.0.0
Tested up to: 6.4
Requires at least: 5.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sentinel
Domain Path: /languages

This theme is designed to be lightweight and get out of the way for page builders.
*/

/* Keep the header (and its nav dropdowns) above in-page content like the
   single-post hero band, which is position:relative and otherwise paints
   over the header's absolutely-positioned submenu popouts. */
header.wp-block-template-part {
	position: relative;
	z-index: 100;
}

/* Global horizontal content gutter — theme.json only, nothing in this file.
   Without it, ordinary (non-full-width) blocks span 100% of the viewport
   with zero side margin below ~1200px, so headlines/body text/cards sit
   flush against the screen edge on mobile — that's what was happening
   before this was added.
   Set via two theme.json fields working together:
     settings.useRootPaddingAwareAlignments: true
     styles.spacing.padding: { left: small (16px), right: small (16px) }
   That combination is WordPress's built-in mechanism for a sitewide
   gutter: the padding lands on the root .wp-site-blocks wrapper (so every
   template — front page, single post, archive, etc. — gets it
   automatically, with nothing to repeat per-template), and because it's
   "root padding AWARE", alignfull sections (the purple Pull Quote band,
   .hubs-section, the footer) automatically get a matching negative inset
   so they still bleed to the true edge instead of being squeezed by the
   same padding. Adjust the gutter width by changing that one padding
   value in theme.json — no CSS changes needed. */

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Numbered lists reset padding-left to 0 above, which pushes the
   list-style-position:outside marker to hang left of the surrounding
   text instead of lining up with it. This restores enough padding for
   the numbers to sit flush with the text above/below, sitewide. */
ol {
  padding-left: 1.3em;
}

html, body {
  height: 100%;
}

body {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
}

.montserrat, body {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.oswald, h1, h2, h3, .stat-number {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
/* Links */
a {
  color: #3fb9e7;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

/* h2 headlines were falling back to body's line-height: 1.5 (headings don't
   set their own line-height above, so it inherits) — this brings h2 in line
   with the 1.25em standard already used on headline-style text elsewhere
   (e.g. .hub-card-title in the Hubs carousel). */
h2 {
  line-height: 1.25em;
}

/* Headline links default to black rather than the standard link blue (a { color:
   #3fb9e7 } above) -- this is the sitewide standard for any headline sitting on a
   light/white background: the hero story, every card in the Latest grid, and the
   Hubs carousel cards (whose pale-blue background is light enough for this to still
   read fine) all wrap their title text in a link via the Post Title block, so
   without this override they'd inherit the generic blue link color instead of
   reading as a normal dark headline. h1-h6 are included too for any other
   headline-style link outside of Post Title blocks. If a headline is ever placed on
   a genuinely dark background, it will need its own more specific color override on
   top of this. */
.wp-block-post-title a,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: var(--wp--preset--color--black);
  font-family: inherit;
}

/* Post Title blocks default to the body's 1.5 line-height, same root cause as the
   h2 fix above (headings don't set their own line-height, so it's inherited) --
   this covers h3-level post titles too (e.g. the Latest grid on the front page),
   which the h2-only rule above doesn't reach, bringing them in line with the same
   1.25em standard already used for h2 and for .hub-card-title. */
.wp-block-post-title {
  line-height: 1.25em;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Typography */
.featured-text {
	font-size: 1.2em;
}

/* Featured story image (front-page template, .featured-story Query block) — the column
   itself is already set to verticalAlignment: top, which lines its box up with the eyebrow
   label (BLOG) at the very top of the text column, but the eyebrow only takes ~20px and
   sits ~24px above the headline (this theme's standard block-gap), so the image still read
   as noticeably higher than the headline it's next to. Nudging it down by that same 44px
   (eyebrow height + gap — both fixed px/rem values, not viewport-dependent, so this holds
   at any screen size) lines the image's top edge up with the headline's top edge instead. */
.featured-story .wp-block-post-featured-image {
	margin-top: 44px;
}

/* "LATEST | OPINION" section (front page) — at cramped tablet widths the
   4-post LATEST grid and the OPINION stat column feel too tight side by side
   in a 50/50 split, well before WP core's own 782px columns-stacking
   breakpoint kicks in. This row (className "latest-opinion-row", added to the
   front-page template's wp:columns block) is forced to stack full-width
   across the same 782-1024px tablet range used elsewhere in this file.
   Stacking OPINION to full width would leave a lot of empty space around its
   narrow stat content, so its two .stat-block callouts (wrapped in a new
   wp:group with className "opinion-stats-row" in the template) are put side
   by side instead of stacked, to fill that width. Below 782px core already
   stacks the row and the stats stay in their normal stacked mobile layout;
   above 1024px the row returns to its normal 50/50 desktop split. */
@media (min-width: 782px) and (max-width: 1024px) {
	.latest-opinion-row {
		flex-wrap: wrap !important;
	}
	.latest-opinion-row > .wp-block-column {
		flex-basis: 100% !important;
	}
	.opinion-stats-row {
		display: flex;
		gap: 24px;
	}
	.opinion-stats-row .wp-block-columns {
		display: flex;
		align-items: flex-start;
		gap: 24px;
		flex: 1;
	}
	.opinion-stats-row .wp-block-column {
		flex: 1;
		min-width: 0;
		margin-top: 0;
		margin-bottom: 0;
	}
}

/* Feature image corner accent — every Post Featured Image block gets a
   rounded top-right corner, all other corners stay square. Scoped to the
   img itself (not the wrapper) so it works the same whether the block is
   in a query loop grid (LATEST) or a single large image (the top story).
   The top story's image renders roughly twice as wide as the LATEST grid
   thumbnails, so .featured-story gets a proportionally larger radius
   (44px vs 20px) to keep the same visual curve at both sizes.
   !important is needed because some Featured Image blocks already carry
   an inline border-radius (set per-image via the block's own Border
   panel in the editor, inconsistently applied), which otherwise beats
   any external rule regardless of selector specificity. */
.wp-block-post-featured-image img {
	border-top-right-radius: 20px !important;
}
.featured-story .wp-block-post-featured-image img {
	border-top-right-radius: 44px !important;
}


/* LATEST grid (front page) — the 4 post thumbnails have wildly different
   natural aspect ratios (portrait office photo vs. wide desert/ship shots),
   so at a fixed column width they were rendering at very different heights
   and the grid looked misaligned. Locking every thumbnail in this specific
   query loop (className "latest-grid-query", added to the front-page
   template's wp:query block) to the same 3:2 aspect ratio keeps all four
   the same height regardless of the source image's proportions. object-fit
   is already set inline per-image by the Featured Image block, so this
   only needs to fix the box's aspect ratio. */
.latest-grid-query .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2;
	height: auto;
}


/* Footer navigation (middle column) — the vertical menu's item spacing
   comes from the Navigation block's own flex gap (24px), which reads as
   generous touch-friendly spacing on mobile but too loose on desktop
   where there's no finger-target need. Tightened only at/above the same
   782px breakpoint WordPress itself uses to un-stack columns; below that
   the original 24px gap is left alone. !important is needed because the
   block's own auto-generated layout class (wp-container-core-navigation-
   is-layout-*) sets this gap at equal selector specificity, and source
   order isn't reliable enough to win otherwise. */
@media (min-width: 782px) {
	footer .wp-block-navigation__container {
		gap: 12px !important;
	}
}

/* WordPress Classes */
.wp-block-image {
  margin: 0;
}

.alignleft {
  float: left;
  margin-right: 1.5em;
}

.alignright {
  float: right;
  margin-left: 1.5em;
}

.aligncenter {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/*
 * Header, nav, hamburger menu, and footer layout/typography are now handled
 * by theme.json (colors, fonts, spacing) plus the core Navigation, Site
 * Logo, and Search blocks in parts/header.html and parts/footer.html — the
 * core Navigation block ships its own built-in responsive overlay menu and
 * submenu dropdowns, so the old .site-header/.site-navigation/.menu-toggle/
 * .site-footer rules and the 1024px hamburger media query are no longer
 * needed and have been removed. What remains below is the styling the core
 * blocks don't already provide: the header search field's pill appearance.
 */

/* Header search — targets the core Search block via the className set on
   the wp:search block in parts/header.html (buttonPosition: button-inside) */
/* .nav-mobile-search (the Search block nested in the mobile overlay, added below) shares
   every one of these selectors with .sentinel-header-search (the desktop top-bar search) so
   the two are styled identically by construction rather than by two separately maintained
   rules that could drift apart. */
.sentinel-header-search .wp-block-search__inside-wrapper,
.nav-mobile-search .wp-block-search__inside-wrapper {
	border: 1px solid #f0d9e0;
	background: #fdf6f8;
	border-radius: 4px;
}

.sentinel-header-search .wp-block-search__input,
.nav-mobile-search .wp-block-search__input {
	border: none;
	background: transparent;
	font-size: 0.85rem;
	letter-spacing: 0.4px;
	color: #b98a9a;
}

.sentinel-header-search .wp-block-search__input::placeholder,
.nav-mobile-search .wp-block-search__input::placeholder {
	color: #cba3ae;
}

.sentinel-header-search .wp-block-search__button,
.nav-mobile-search .wp-block-search__button {
	background: none;
	border: none;
	color: #cba3ae;
}

/* Mobile header — reuses the theme's existing 782px breakpoint (see .border-left.border-L
   above and the WP Columns block's own stacking point) as the cutoff for the header's
   "mobile" treatment. Below it: the logo shrinks so it doesn't crowd the hamburger button,
   the standalone search field in the top bar hides (a second Search block lives inside the
   nav menu itself instead — see .nav-mobile-search below — so it still shows up, just inside
   the slide-out panel), and the WP core toggle button's default icon (Gutenberg ships it with
   only two bars, not three) is swapped for a proper 3-line hamburger drawn in CSS: its own
   svg is hidden, and a ::before bar plus its box-shadow duplicate stand in for all three lines.
   Hiding the search field leaves the toggle button as the only item left in its row, so it
   naturally lands flush against the header's own right padding edge via that row's existing
   space-between layout — no separate alignment rule needed. */
@media (max-width: 781px) {
	.wp-block-site-logo {
		max-width: 100px;
		width: 100px;
	}

	/* !important needed here — WP core injects a per-instance inline <style> tag
	   (.wp-block-site-logo img { max-width: 180px }, from the Site Logo block's own
	   "width" attribute) that lands later in <head> than this stylesheet, so at equal
	   specificity it wins the cascade by source order alone. */
	.wp-block-site-logo img {
		max-width: 100px !important;
		width: 100px !important;
		height: auto !important;
	}

	.sentinel-header-search {
		display: none;
	}

	.wp-block-navigation__responsive-container-open {
		position: relative;
		width: 24px;
		height: 24px;
	}

	.wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	.wp-block-navigation__responsive-container-open::before {
		content: "";
		position: absolute;
		left: 2px;
		right: 2px;
		top: 50%;
		height: 1.5px;
		background: currentColor;
		box-shadow: 0 -6.5px 0 currentColor, 0 6.5px 0 currentColor;
	}
}

/* Mobile nav overlay — the panel WP core opens when the hamburger toggle is clicked.
   Matches the Hubs carousel section's light blue (#dcf5ff) rather than the default white,
   left-aligns everything (core's own "items justified right" layout attribute — used for
   the desktop inline row's vertical centering — otherwise carries over into the overlay and
   flips its cross-axis alignment to the right), adds side padding so items aren't flush
   against the panel edges, and drops the submenu's default 32px left indent so sub-items
   line up with their parents instead of stepping in from them. Submenu links also get real
   vertical padding — on desktop, spacing between them comes from a row-gap on the menu list,
   which doesn't give the links themselves any padding, so on a touchscreen the tappable area
   was only as tall as the text itself.
   Every declaration below is !important: WordPress core ships its own inline-CSS-variable-
   driven rules for this exact panel (e.g. a `.has-child .wp-block-navigation__submenu-container`
   rule at (0,5,0) specificity for the indent, an `align-items: var(--navigation-layout-
   justification-setting,initial)` rule for the alignment), all more specific than a plain
   override here could reasonably match without turning every selector into a specificity
   arms race — !important is the simpler, more maintainable fix and core doesn't use it
   itself, so there's nothing competing for these particular properties. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: #dcf5ff !important;
}

.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-left: 24px;
	padding-right: 24px;
	/* Bottom padding so the search field (the last thing in this list) isn't flush
	   against the bottom of the overlay/viewport -- matches the 24px used for the
	   left/right inset above for a consistent gutter on all sides. */
	padding-bottom: 24px;
	/* Core sets align-items: flex-end on this element too (its own column-flex cross axis),
	   which is what was actually pushing the top-level menu items — not just their text — over
	   to the right; overriding align-items on the .wp-block-navigation__container below isn't
	   enough on its own since that UL is itself a flex item being shoved rightward here first. */
	align-items: flex-start !important;
}

.is-menu-open .wp-block-navigation__container,
.is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
}

/* Submenu-parent items (News, Hubs, About — anything with a dropdown arrow) are their own
   flex container (column direction, laying the label + toggle arrow + submenu list on top of
   each other) with the SAME core align-items: flex-end problem as the two containers above,
   just one level deeper — the .wp-block-navigation__container fix doesn't reach inside it. */
.is-menu-open .wp-block-navigation-item.has-child {
	align-items: flex-start !important;
}

.is-menu-open .wp-block-navigation__submenu-container {
	padding-left: 0 !important;
}

.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

/* Close (X) button sits flush against the overlay's right edge by default — this pulls
   it in by the same 24px used for the content's own left inset above, so the X lines
   up with the menu items instead of sitting closer to the edge than they do. */
.wp-block-navigation__responsive-container-close {
	margin-right: 24px;
	/* Nudge down from the dialog's top edge (core defaults to top: 0) so it
	   doesn't sit flush against the very top of the overlay. */
	top: 16px;
}

/* Overlay-menu open/close animation. WordPress core fades + slides in the whole
   overlay on open (its own @keyframes overlay-menu__fade-in-animation), but closing
   is instant: the close button removes the .is-menu-open class, which flips the
   container straight from display:flex to display:none in the same instant — and
   display can't be transitioned/animated, so nothing has time to play. Fixed by
   moving off display entirely for showing/hiding this container: it now stays
   display:flex at all times (invisible + non-interactive when "closed" via opacity/
   visibility/pointer-events instead), so opacity can transition smoothly in BOTH
   directions. transition-property is doubled up on visibility with a 0s duration and
   opposite delays so it switches to hidden only once the fade-out finishes (avoiding
   an invisible-but-still-in-the-way overlay) while switching to visible immediately
   on open (so the fade-in isn't hidden behind visibility:hidden while it plays).
   !important on display is needed to beat core's own same-specificity display:none
   rule on this selector. */
/* Scoped to the mobile/tablet breakpoint only -- this used to apply
   unconditionally, which set opacity:0/visibility:hidden on the container
   that also holds the DESKTOP nav links (WP reuses the same
   .wp-block-navigation__responsive-container element for both the always-
   visible desktop bar and the collapsible mobile overlay), silently hiding
   the entire desktop navigation sitewide. Fixed 2026-07-28. */
@media (max-width: 781px) {
	.wp-block-navigation__responsive-container {
		display: flex !important;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.35s ease-out, visibility 0s linear 0.35s;
	}
	.wp-block-navigation__responsive-container.is-menu-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity 0.35s ease-out, visibility 0s linear 0s;
		/* Core still has its own animation: 0.1s ... overlay-menu__fade-in-animation
		   declared on this exact selector -- CSS animations take precedence over plain
		   (non-important) declarations for the same property, so left alone it would
		   silently win over the opacity transition above for the open direction. It is
		   fully retired here since the transition now handles both open and close. */
		animation: none !important;
	}
}

/* Apple-style staggered reveal on open: each top-level nav item (and the search
   field) fades and slides in slightly after the one before it, instead of all
   appearing at once with the overlay background. This stays a one-shot @keyframes
   animation (rather than a transition like the container above) because there's no
   need to mirror it on close — the items simply fade out together with the
   container's own opacity transition, which reads as a single smooth close rather
   than a second reverse-stagger. Scoped to direct children of the top-level menu
   list (not just any .wp-block-navigation-item) so nested submenu links, which share
   the same class but stay hidden until their parent is expanded, don't also get set
   to opacity:0 and end up invisible once revealed. Wrapped in the same
   prefers-reduced-motion check core itself uses, so motion-sensitive users still get
   an instant, non-animated open/close (the transition above still applies, but 0.35s
   is short enough that browsers respecting prefers-reduced-motion mainly lose the
   staggered item reveal here, which is the more decorative part). */
@media not (prefers-reduced-motion) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item,
	.wp-block-navigation__responsive-container.is-menu-open .nav-mobile-search {
		opacity: 0;
		animation: sentinel-overlay-item-fade-in 0.35s ease-out forwards;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) { animation-delay: 0.08s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: 0.13s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: 0.18s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: 0.23s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: 0.28s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(6) { animation-delay: 0.33s; }
	.wp-block-navigation__responsive-container.is-menu-open .nav-mobile-search { animation-delay: 0.38s; }

	@keyframes sentinel-overlay-item-fade-in {
		from { opacity: 0; transform: translateY(8px); }
		to { opacity: 1; transform: translateY(0); }
	}
}

/* Extends the hamburger/overlay-menu breakpoint from WordPress core's default 600px up
   to 1024px (a conventional tablet cutoff). Above 600px core switches from the toggle
   button to the full inline row on its own (two of its own `@media (min-width:600px)`
   rules — one hides the toggle, one shows the row) — but at tablet widths there isn't
   enough room for the whole row (logo, NEWS/HUBS/JOBS/CONTACT/ABOUT, the Subscribe
   button, and the search field) to fit without wrapping onto a second line, which is
   what was happening before this was added — including at exactly 1024px (iPad Pro
   portrait), which is why the upper bound below is inclusive. Both of core's rules are
   overridden here, with !important since they share the same 600px breakpoint tier, for
   the 600–1024px slice specifically, so phones (<600px) and real desktop widths
   (>1024px) keep core's own defaults untouched. The toggle button and the inline row are siblings (not nested)
   under the nav element, so hiding one never affects the other. */
@media (min-width: 600px) and (max-width: 1024px) {
	.wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

/* Search block nested inside the Primary menu itself (last item, className nav-mobile-search)
   so it appears inside the mobile overlay — core Navigation renders its children inline in the
   desktop menu row and inside the slide-out panel once collapsed, so nesting a Search block
   there is what puts it "inside the hamburger menu" instead of the top bar. Hidden above the
   breakpoint so it doesn't also show a second time in the desktop menu row. */
@media (min-width: 782px) {
	.nav-mobile-search {
		display: none;
	}
}

.nav-mobile-search {
	margin-top: 16px;
	width: 100%;
}

/* Top-level nav menu items — bold + all caps. Scoped to direct children of
   the nav container so dropdown/submenu items keep their normal weight and
   case. */
.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

/* Subscribe button — the btn_subscribe class is applied by the nav editor
   to the <li> (.wp-block-navigation-item), not the link itself, so the
   pill's background/padding/radius have to target the <a> inside it —
   those box properties don't render on the <li> the way font-weight/color
   do (which are inherited).
   The selector repeats .wp-block-navigation-item__content on purpose. Two
   different built-in stylesheets both fight for this element's color:
     1. WordPress core's own navigation stylesheet:
        ".wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content { color: inherit }"
     2. A GoDaddy-injected contrast rule (present on this hosting) that forces
        link color to inherit inside any color-classed group:
        "body .wp-site-blocks .wp-block-group:is(...background classes...) a:where(:not(.wp-element-button)):not(.has-text-color):where(...) { color: var(--dsgo-text-color,inherit) }"
        — it explicitly excludes .wp-element-button links, which is why the
        generic Button block default below doesn't need this treatment.
   That GoDaddy rule turned out to carry !important on its color
   declaration, which beats any amount of specificity stacking — the
   5-class selector above still lost to it. !important is the only thing
   that outranks another !important rule, so the color declarations below
   use it too. This is the one place in this file !important is used, and
   it's used because the host, not another theme rule, is what's being
   overridden. */
.wp-block-navigation .wp-block-navigation-item.btn_subscribe > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: inline-block;
	background-color: #3fb9e7;
	color: #dcf5ff !important;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	border-radius: 10px;
	padding: 18px 40px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-navigation .wp-block-navigation-item.btn_subscribe > .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	background-color: #2ba9e0;
	color: #ffffff !important;
	text-decoration: none;
}

/* Default Button block style — the same treatment as the nav bar's
   Subscribe button above, generalized as the sitewide default. Targets
   .wp-block-button__link, the class WordPress applies to every core Button
   block automatically, so any Button block dropped in anywhere on the site
   picks this up without needing a manual class. */
.wp-block-button__link {
	display: inline-block;
	background-color: #3fb9e7;
	color: #dcf5ff;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	border-radius: 10px;
	padding: 18px 40px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-button__link:hover {
	background-color: #2ba9e0;
	color: #ffffff;
	text-decoration: none;
}

/* Column divider utilities.
   .border-left — draws a vertical rule on the block's left edge. Add this
   alone if you want the rule to show at every screen size.
   .border-L    — add together with .border-left to make the rule
   desktop-only. It's hidden below 782px, which is the same breakpoint
   WordPress's own Columns block uses to stack columns into a single
   column — below that width the columns are no longer side-by-side, so a
   vertical rule wouldn't make sense between them.
   Apply both via the block's Advanced panel > "Additional CSS class(es)":
   border-left border-L */
.border-left {
	border-left: 1px solid var(--wp--preset--color--border-gray);
}

@media (max-width: 781px) {
	.border-left.border-L {
		border-left: none;
	}
}

/* Columns using .border-left.border-L (see above) are usually also given their own
   left/right/bottom padding via the block's Dimensions panel — inline styles, e.g.
   padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) — to open up
   a gutter from the column next to them on desktop. Below 782px the Columns block stacks
   to a single column (same breakpoint as the border-hide rule above) and there's no
   longer a neighbouring column to gutter against, so that left/right padding just adds an
   extra, inconsistent indent on top of the page's own root padding — this column's content
   ends up sitting further from the edge than every other block on the page. !important is
   needed to beat the inline style itself (inline always wins over an ordinary external
   rule; only !important in the stylesheet can override it). Bottom padding is left alone
   since it's vertical spacing, not the horizontal misalignment this is fixing. */
@media (max-width: 781px) {
	.wp-block-column.border-left.border-L {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Bottom rule — draws a horizontal rule under a block, matching the same
   color/weight as .border-left above. Useful for separating stacked
   sections (e.g. under a group before the next one starts) rather than
   dividing side-by-side columns, so there's no responsive on/off variant
   like .border-L — a bottom rule reads fine at any width.
   Apply via the block's Advanced panel > "Additional CSS class(es)":
   border-bottom */
.border-bottom {
	border-bottom: 1px solid var(--wp--preset--color--border-gray);
}

/* Tight top spacing — halves the default block-gap top margin (24px, from
   WordPress core's ".is-layout-flow > *" fallback, driven by theme.json's
   spacing.blockGap) down to 12px. An opt-in utility rather than a global
   change: the 24px default gap is the right call in most contexts, but
   short stacked lines in a compact pattern (e.g. a "Date" line and a
   one-line description under an "Event" heading) can look loose with a
   full block-gap between them. Apply via the block's Advanced panel >
   "Additional CSS class(es)": tight-top */
.tight-top {
	margin-top: 12px;
}

/* Eyebrow block style — running head/category label used above headlines
   and section titles (e.g. "LATEST", "OPINION"). Registered as a Heading
   and Paragraph block style in functions.php, so it's applied via a
   one-click style-picker option, not a manually typed class. */
.is-style-eyebrow {
	font-family: "Montserrat", sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #a877a1;
}

/* Grey eyebrow label for use above ad units (.ad-area). Manually typed
   as an Additional CSS Class on a Paragraph block -- not every instance
   sits inside .ad-area, so this is a standalone class rather than a
   descendant selector scoped to that container. */
.eyebrow-grey {
	font-family: "Montserrat", sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #b0b0b0;
}

/* Pull Quote section — full-width purple band with an SVG quote mark,
   a large bold quote line, and a plain-text "read more" link. The Group
   itself carries no custom class — background/padding are set per-instance
   via the block's own Color and Dimensions panels, using the custom
   #a877a1 brand purple (the same accent already used unnamed elsewhere in
   this file, e.g. .is-style-eyebrow and .hub-card-label, so it's applied
   here as a plain custom color rather than a new palette swatch) and the
   theme's spacing presets — only the two inner text treatments below need
   dedicated styles, since font-size/weight/color aren't things the
   block's built-in panels combine into one click.
   Because the background is a custom color (not a theme.json palette
   class), the GoDaddy-injected contrast rule that forces link/paragraph
   color inside *preset*-background-colored groups doesn't match this
   block at all — so, unlike the nav Subscribe button above, the
   !important here is just normal defensive styling, not a fight against
   a competing !important rule. The class is still repeated 5x in the
   selector below as a harmless specificity margin in case this section is
   ever switched back to a palette background color. */
.is-style-pullquote-text.is-style-pullquote-text.is-style-pullquote-text.is-style-pullquote-text.is-style-pullquote-text {
	/* The actual white color is now set directly on the block (a "has-text-color"
	   class + inline style, the same markup WordPress itself generates when an
	   editor uses the Text Color popover) rather than relying on this rule —
	   that class presence is what makes GoDaddy's two contrast-override rules
	   (one for preset background classes, one for any other .has-background
	   group) skip this paragraph entirely, since both end their selector with
	   :not(.has-text-color). This declaration is kept only as a fallback in
	   case that inline style is ever stripped. */
	color: #ffffff !important;
	font-family: "Oswald", sans-serif;
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.35;
	max-width: 46ch;
	/* Inside a constrained-layout Group, WordPress core auto-centers any
	   non-full-width child that's narrower than the container by giving it
	   margin-inline: auto !important (the same mechanism documented on
	   .hubs-carousel below) — that's what was pulling this paragraph to the
	   right of the quote-mark image and the "read the full story" link.
	   Overriding back to 0 anchors it at the Group's own left padding edge
	   instead — see .pullquote-section below, which pulls the image and
	   button back to that same edge so all three line up. */
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* The quote-mark image and the "read the full story" button are core Image/
   Buttons blocks with no max-width of their own, so inside the constrained-
   layout Group they get stretched to the theme's full 1200px content width
   and then centered within the (wider, full-bleed) purple band — landing
   ~183px in from the Group's own padding edge on a typical desktop viewport,
   not flush against it. The quote text above is deliberately narrower
   (max-width: 46ch, for a readable line length) and is anchored at margin: 0
   instead, so without this rule the two would sit at different left
   positions. Forcing the same margin: 0 !important here (identical
   reasoning to .is-style-pullquote-text and to .hubs-carousel below) removes
   that centering and lines all three up against the Group's padding edge.
   Scoped to .pullquote-section (set on the Group's own Advanced > "Additional
   CSS class(es)" field) so it can't affect images/buttons used elsewhere. */
.pullquote-section {
	/* The Group's own left/right padding above (spacing.padding, the "large"
	   preset -- 40px) is a fixed value, but the rest of the page's content lines up
	   via WordPress's contentSize centering (1200px, auto margins), which produces a
	   much bigger inset than 40px on wide viewports (e.g. ~156px at 1512px wide).
	   Since the image/text/button below are all deliberately anchored to this
	   Group's own padding edge (see the margin:0 overrides above and below) rather
	   than being independently centered, that fixed 40px was leaving the whole
	   purple band's content sitting well left of the page's actual content column.
	   This makes the padding grow to match that same centered inset once the
	   viewport is wide enough to need it, while still falling back to the original
	   40px "large" spacing as a floor on narrower screens. !important is needed to
	   beat the inline style WordPress renders from the block's own padding
	   attribute. */
	padding-left: max(var(--wp--preset--spacing--large), calc((100% - var(--wp--style--global--content-size, 1200px)) / 2)) !important;
	padding-right: max(var(--wp--preset--spacing--large), calc((100% - var(--wp--style--global--content-size, 1200px)) / 2)) !important;
}

.pullquote-section .wp-block-image,
.pullquote-section .wp-block-buttons {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
}

/* The is-style-X className Gutenberg adds for a block style variation
   lands on the outer .wp-block-button wrapper, not the inner element
   that's actually painted with the default fill/padding/radius
   (.wp-block-button__link) — so the override has to target that
   descendant directly, or the sitewide pill-button default below wins. */
.is-style-text-link .wp-block-button__link {
	display: inline-block;
	background: none;
	border: none;
	padding: 0;
	color: #ffffff;
	font-family: "Montserrat", sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
}

.is-style-text-link .wp-block-button__link:hover {
	color: #ffffff;
	text-decoration: underline;
}

/* Stat callout number + supporting line, paired with the "Stat Callout"
   pattern (functions.php). Size comes from the xx-large font-size preset
   (theme.json) so it stays adjustable from the block's own Typography
   panel — these classes carry the weight/color/line-height a font-size
   preset alone can't. */
.stat-number {
	font-weight: 800;
	line-height: 1;
	margin-bottom: .25em;
}

.stat-legend {
	font-size:16px;
	font-weight: 600;
	line-height: 1.4;
}

/* Stat Callout pattern (.stat-block — icon + big number + supporting line, e.g. the
   "68%" callouts) — a Media & Text block using WordPress's own is-stacked-on-mobile
   behaviour. Below 600px (core's own breakpoint for that class, matched exactly here so
   this doesn't kick in early while the block is still in its side-by-side 15%/85% grid),
   the media half becomes a full-width row on its own, and its <img> — width:100% of that
   row by default, core's own rule — blows up to the full card width. Shrinking just the
   image keeps the icon small without touching the grid/stacking core already handles.
   The content half also keeps its desktop-only "padding: 0 8%" once stacked (core's
   is-stacked-on-mobile query only repositions the grid rows/columns, it doesn't reset
   that), which is why the stat number/legend text sat indented from the now-smaller
   icon above it — dropping it to 0 lines the text back up with the icon's left edge.
   Scoped to .stat-block so this doesn't affect any other Media & Text block on the site. */
@media (max-width: 600px) {
	.stat-block .wp-block-media-text__media img {
		width: 25%;
		margin-bottom: 18px;
	}

	.stat-block .wp-block-media-text__content {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Hubs carousel — full-width section with a horizontally scrolling row of
   tag-driven story cards (one Query Loop block per tag, each pulling its
   single latest post). The carousel itself is a plain Group; overflow-x
   plus scroll-snap here does the sliding, so it works with the arrow
   buttons below AND with a finger/trackpad swipe with no extra JS needed
   for the swipe itself — the buttons just call scrollBy(). */
.hubs-section {
	background-color: #fdf6f8;
	padding: 60px 0;
}

.hubs-heading {
	color: var(--wp--preset--color--black);
}

/* Breaks the carousel out of the theme's 1200px contentSize container
   (set in theme.json) so cards can scroll edge-to-edge instead of being
   clipped mid-card at that inner boundary — the "HUBS" heading above stays
   at the normal centered/constrained width; only this row goes full-bleed.
   This is the standard "break out of a centered container" trick: the
   parent is horizontally centered on the page, so margin-left/right of
   calc(50% - 50vw) (with width:100vw) pulls this element out to the true
   viewport edges regardless of the parent's own width.
   !important is needed here because WordPress's own constrained-layout
   support (theme.json contentSize) applies "max-width: 1200px" plus
   "margin-left/right: auto !important" to any non-aligned direct child of
   a constrained group — a plain override loses to that !important. */
.hubs-carousel {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 8px;
	margin-top: 32px;
	-ms-overflow-style: none;
	scrollbar-width: none;
	max-width: none !important;
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	box-sizing: border-box;
	scroll-padding-left: 40px;
	scroll-padding-right: 40px;
}

/* Container padding doesn't reliably reserve visual space before the first
   flex item at scrollLeft:0 (the leading edge of a scrolling flex row is a
   known cross-browser inconsistency — this is why the first card sat flush
   against the true viewport edge on initial load) — margin on the first/
   last card itself is the version that always renders correctly.
   scroll-padding-left/right above (on .hubs-carousel) is the second half of
   this fix: with scroll-snap-type:mandatory, the browser can otherwise
   "correct" scrollLeft back toward 0 in a way that eats into this margin
   the moment anything nudges the scroller (e.g. the section scrolling into
   view) — scroll-padding tells the snap calculation itself to treat the
   scrollport as inset by 40px, so the snapped rest position matches the
   margin instead of fighting it. */
.hub-card-query:first-child {
	margin-left: 40px;
}

.hub-card-query:last-child {
	margin-right: 40px;
}

/* Mobile alignment — the Hubs heading, the nav arrow row, and the carousel's own lead-in
   gap before the first/last card were all sitting flush against the screen edge (0px)
   instead of matching the 16px root gutter every other section uses (theme.json's
   useRootPaddingAwareAlignments), since .hubs-section itself never had side padding —
   only the vertical 60px above, plus the 40px card lead-in tuned for desktop. Below 1025px
   (matching the tablet cutoff used for the header's hamburger breakpoint — this section
   showed the same flush-left problem at iPad Pro's 1024px, not just phone widths) all
   three are brought down to the same 16px so the section lines up with the content above
   and below it; scroll-padding-left/right on
   .hubs-carousel has to move with the card margin since the two are a matched pair (see
   the comment above that fixes the scroll-snap leading-edge bug) — changing one without
   the other would reintroduce it. Desktop keeps the original 40px lead-in, since it isn't
   tied to the root gutter the way the heading/nav are. */
@media (max-width: 1024px) {
	.hubs-section {
		padding-left: 16px;
		padding-right: 16px;
	}

	.hubs-carousel {
		scroll-padding-left: 16px;
		scroll-padding-right: 16px;
	}

	.hub-card-query:first-child {
		margin-left: 16px;
	}

	.hub-card-query:last-child {
		margin-right: 16px;
	}
}

.hubs-carousel::-webkit-scrollbar {
	display: none;
}

/* Each card is a Query Loop wrapper (.wp-block-query); the flex-basis lives
   here so the carousel can size cards without touching core block markup. */
.hub-card-query {
	flex: 0 0 300px;
	scroll-snap-align: start;
}

/* WordPress core's default block-gap fallback (".is-layout-flow > *")
   still applies to these Query Loop blocks since the carousel Group keeps
   its auto-added is-layout-flow class even though it's actually styled as
   a flex row above — that rule was adding a 24px top margin to every card
   after the first, so the first card sat 24px higher than the rest. This
   neutralizes it in favor of the flex gap, which already spaces cards
   horizontally. */
.hubs-carousel > .hub-card-query {
	margin-top: 0;
	margin-block-start: 0;
}

.hub-card {
	display: flex;
	flex-direction: column;
	position: relative;
}

/* Category label now sits above the image in normal flow (moved there in
   the block editor) instead of overlaid on the gradient, so it needs its
   own readable color against the section's light background rather than
   the white-on-dark-gradient color it had before — this is also why it had
   disappeared: it was still rendering, just fully covered by the image,
   since .hub-card-media was position:absolute;inset:0 and stacked above it
   regardless of DOM order. */
.hub-card-label {
	color: #a877a1;
	font-family: "Montserrat", sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}

.hub-card-media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	margin: 0;
	border-radius: 12px;
}

/* Image is oversized horizontally (130% width, centered with left:-15%) so
   there's real room to move within its box — hubs-carousel.js sets
   translateX on it as you scroll across the carousel (drag/swipe or the
   prev/next buttons), giving a subtle same-axis parallax drift: the photo
   moves slightly slower than its card as the row scrolls past.
   overflow:hidden on .hub-card-media (above) clips the extra 15% left/right
   so nothing outside the card is ever visible, and the transform never
   moves it more than that 15%, so the crop never reveals empty space.
   max-width: none overrides the sitewide "img { max-width: 100% }" reset
   near the top of this file — without it, that rule silently caps this
   image back down to 100% (300px) regardless of the 130% set here, which
   is what caused a gap of uncovered background to show on one edge once
   the parallax shifted the image toward the other edge. */
.hub-card-media img {
	position: absolute;
	top: 0;
	left: -15%;
	width: 130%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: center;
	will-change: transform;
}

.hub-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0) 70%);
}

.hub-card-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 20px;
}

/* Fixed line-clamp + min-height on both the title and excerpt keeps every
   card's content block the same total height, so the title's top edge (its
   "hangline") lines up across all cards regardless of how many words the
   headline or snippet actually has. */
.hub-card-title {
	margin-bottom: 8px;
	font-size: 1.25rem;
	line-height: 1.25em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
}

.hub-card-title a {
	color: #ffffff;
}

.hub-card-excerpt {
	color: #e6e6e6;
	font-size: 0.85rem;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.8em;
}

.hubs-carousel-wrap {
	position: relative;
}

.hubs-nav {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	z-index: 5;
}

.hubs-nav button {
	pointer-events: auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 3px solid #ffffff;
	background: #2ba9e0;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.hubs-nav button:hover {
	background: #228bbf;
}

@media (max-width: 1024px) {
	/* Overlay arrows would straddle the seam between peeking cards below
	   this breakpoint (cards don't shrink to one-per-viewport), so revert to
	   the original below-carousel row -- touch/swipe is the primary way to
	   move the carousel here anyway. Placed after the base .hubs-nav rule
	   (not in the earlier shared @media block) so it wins the cascade. */
	.hubs-nav {
		position: static;
		transform: none;
		justify-content: flex-start;
		gap: 16px;
		margin-top: 24px;
	}
}

/* Material Symbols Rounded boilerplate — required for the ligature font
   (enqueued in functions.php) to render icon names as glyphs instead of
   literal text. This is the theme's single Material Symbols style/family —
   also used by the Hubs carousel's prev/next arrows. */
.material-symbols-rounded {
	font-family: "Material Symbols Rounded";
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}

/* Utility modifier classes for icon spans, e.g.
   <span class="material-symbols-rounded icon-large icon-purple">star</span> */
.icon-large {
	font-size: 50px !important;
}

.icon-purple {
	color: #a877a1 !important;
}

.icon-xl {
	font-size: 120px !important;
}
}


/* ============================================================
   Single Post template (2026-07-28)
   ============================================================ */

/* ---- Hero band ---- */
.single-hero-band {
	overflow: visible;
}
.single-hero-columns {
	align-items: flex-start;
	gap: 40px;
}
.single-hero-image-col {
	position: relative;
}
.single-hero-image {
	/* Overflow is now clipped (was visible) so the parallax translation on
	   the img below doesn't reveal its edges as it shifts. The radius is
	   duplicated here (matching the img's own) so the clip mask itself is
	   rounded -- without this, the image's rounded corners would get cut
	   off square by this element's rectangular overflow clip. */
	overflow: hidden;
	border-radius: 5px;
	border-top-right-radius: 44px;
}
.single-hero-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	max-height: 460px;
	object-fit: cover;
	border-radius: 5px !important;
	border-top-right-radius: 44px !important;
	/* Base scale(1.15) gives ~35px of vertical slack on each edge so the
	   parallax script (functions.php, hooked to prefers-reduced-motion) can
	   translate the image up to +/-24px without ever revealing a gap. */
	transform: scale(1.15);
	will-change: transform;
}
.single-category-terms {
	font-family: var(--wp--preset--font-family--montserrat);
	color: var(--wp--preset--color--purple-text);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}
.single-category-terms a {
text-decoration: none;
}
.single-category-terms a:hover {
	text-decoration: underline;
}
.single-hero-title {
	color: var(--wp--preset--color--black);
	line-height: 1.15;
	margin-bottom: 1rem;
}
.single-hero-dek p {
	font-style: italic;
	color: var(--wp--preset--color--body-text);
	font-size: 1.05rem;
	line-height: 1.5;
	margin-bottom: 1.5rem;
}
.single-byline-row {
	align-items: center;
	gap: 12px;
	margin-bottom: 1.25rem;
}
.single-byline-row .wp-block-avatar {
	flex-shrink: 0;
}
.single-byline-row .wp-block-avatar img {
	border-radius: 999px;
	display: block;
}
.single-byline-text {
	gap: 2px;
}
.single-byline-name {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--wp--preset--color--black);
}
.single-byline-name p,
.single-byline-name a {
	margin: 0;
	color: inherit;
}
.single-byline-meta {
	gap: 6px;
	font-size: 0.85rem;
	color: var(--wp--preset--color--footer-text);
}
.single-byline-meta p {
	margin: 0;
}

.single-share-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 0.5rem;
	padding-bottom: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--rose-border);
}
.share-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--rose-border);
	color: var(--wp--preset--color--purple-text);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.share-icon:hover {
	background-color: var(--wp--preset--color--purple-text);
	color: var(--wp--preset--color--white);
}
.single-comment-count {
	margin-left: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--footer-text);
	text-decoration: none;
}
.single-comment-count:hover {
	text-decoration: underline;
}

/* ---- Body columns (main + sidebar) ---- */
.single-body-columns {
	gap: 64px;
	margin-top: 3rem;
}
.single-main-col {
	min-width: 0;
}

/* Slight desktop-only left indent on the body copy, distinguishing it
   from the hero band content above (which sits flush with the page's
   normal content edge). */
@media (min-width: 1025px) {
	.single-post-content {
		padding-left: 24px;
	}
}
.single-post-content p,
.single-post-content li {
	font-size: 1.2em;
	line-height: 1.5em;
}
.single-post-content img {
	border-radius: 5px;
}

.single-tags {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--border-gray);
	font-size: 0.85rem;
}
.single-tags a {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 4px 12px;
	background: var(--wp--preset--color--rose-bg);
	border: 1px solid var(--wp--preset--color--rose-border);
	border-radius: 999px;
	color: var(--wp--preset--color--body-text);
	text-decoration: none;
	font-size: 0.8rem;
}
.single-tags a:hover {
	border-color: var(--wp--preset--color--purple-text);
	color: var(--wp--preset--color--purple-text);
}

.single-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-top: 2.5rem;
	border-top: 1px solid var(--wp--preset--color--border-gray);
}
.post-nav-card {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 0;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}
.post-nav-card--next {
	flex-direction: row-reverse;
	text-align: right;
}
.post-nav-card-thumb {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	display: block;
}
.post-nav-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 5px;
}
.post-nav-card-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.post-nav-card-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--purple-text);
}
.post-nav-card-title {
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--black);
}
.post-nav-card-excerpt {
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--wp--preset--color--footer-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.post-nav-card--empty {
	flex: 1 1 0;
}
@media (max-width: 600px) {
	.single-post-nav {
		flex-direction: column;
		gap: 16px;
	}
	.post-nav-card--next {
		flex-direction: row;
		text-align: left;
	}
}

/* ---- Inline pull quote (auto-injected into post content) ---- */
.pullquote-inline {
	clear: both;
	margin: 2.5rem 0;
}
.pullquote-inline blockquote {
	margin: 0;
	padding: 0;
	position: relative;
}
.pullquote-inline-mark {
	display: block;
	width: 90px;
	height: auto;
	margin-bottom: 0.25rem;
}
.pullquote-inline p {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.35;
	color: #a877a1;
	margin: 0;
}

/* ---- Home page ad banners ---- */
/* .ad-area wraps the two ad images on the front page. Breaks out to the
 *    true viewport edge (same calc(50% - 50vw) trick as .hubs-carousel above)
 *    so the grey band matches the footer's full-bleed band, regardless of how
 *    deeply the block happens to be nested -- one of the two front-page
 *    instances sits inside an extra wrapping group, the other doesn't, so a
 *    nesting-agnostic technique is needed rather than a fixed negative margin.
 *    !important is required for the same reason documented on .hubs-carousel:
 *    WordPress's constrained-layout support applies max-width:1200px plus
 *    margin-left/right:auto !important to any non-aligned child of a
 *    constrained group, which a plain override can't beat.
 *    The ad image itself stays capped and centered automatically via the
 *    block's own is-layout-constrained class (already present in the markup)
 *    once the outer band is freed to full width -- no extra centering CSS
 *    needed, same as any other full-bleed section on the site. */
.ad-area {
	max-width: none !important;
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	background-color: var(--wp--preset--color--footer-gray);
	padding: 2.5rem 16px;
	box-sizing: border-box;
}
/* The ad plugin's own wrapper (.myftp-highlight-wrapper) IS correctly
 *    centered by the block's is-layout-constrained max-width/auto-margins --
 *    but the <img> inside it is narrower than the wrapper (1140px image in a
 *    1200px wrapper) and, being a plain block-level img with no margin of its
 *    own, sits flush against the wrapper's left edge instead of centering
 *    within it. That's the leftover "slightly left of center" gap. Centering
 *    the image itself fixes it regardless of how the surrounding wrapper
 *    widths resolve at a given viewport. */
.ad-area img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

}


}'/* ---- Ad slots ---- */
.ad-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background-color: var(--wp--preset--color--footer-gray);
	border: 1px dashed var(--wp--preset--color--footer-text);
	text-align: center;
	padding: 2rem 1rem;
}
.ad-slot-label {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--footer-text);
}
.ad-slot-size {
	margin: 0;
	font-size: 0.75rem;
	color: var(--wp--preset--color--footer-text);
}
.ad-slot--sidebar {
	aspect-ratio: 1 / 1;
	max-width: 300px;
	margin-bottom: 2rem;
}
.ad-slot--in-article {
	min-height: 120px;
	margin: 2.5rem 0;
}

/* ---- Sidebar: shared heading + Recommended Stories + Events ---- */
.single-sidebar-col .sidebar-heading {
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--black);
	padding-bottom: 0.5rem;
	margin: 0 0 1rem 0;
	border-bottom: 2px solid var(--wp--preset--color--black);
}

.sidebar-recommended {
	margin-bottom: 2.5rem;
}
.sidebar-story-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sidebar-story-list li {
	padding: 1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border-gray);
}
.sidebar-story-list li:first-child {
	padding-top: 0;
}
.sidebar-story-eyebrow {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--purple-text);
	margin-bottom: 4px;
}
.sidebar-story-title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
}
.sidebar-story-list a {
	color: var(--wp--preset--color--black);
	text-decoration: none;
}
.sidebar-story-list a:hover .sidebar-story-title {
	text-decoration: underline;
}

/* Events widget area — editors paste per-event HTML matching this markup
   (documented in the functions.php Events Sidebar registration comment):
   .event-item > .event-date, h3 > a, a.find-out-more */
.single-sidebar-col .widget {
	margin-bottom: 2.5rem;
}
.event-item {
	padding: 1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border-gray);
}
.event-item:first-child {
	padding-top: 0;
}
.event-date {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--purple-text);
	margin-bottom: 4px;
}
.event-item h3 {
	margin: 0 0 4px 0;
	font-size: 1rem;
	line-height: 1.3;
}
.event-item h3 a {
	color: var(--wp--preset--color--black);
	text-decoration: none;
}
.event-item .find-out-more {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-blue);
	text-decoration: underline;
}

.event-item .event-description {
	margin: 0 0 6px 0;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--wp--preset--color--body-text);
}

/* ---- Responsive: stack hero image above the meta/headline column, and
   stack the sidebar below main content. WP core only auto-stacks columns
   below ~781px, which left a gap at typical tablet widths (782-1024px)
   where the hero image and headline stayed side by side. This forces
   the same stacked behavior all the way up to the 1025px desktop
   breakpoint used elsewhere on this template. ---- */
@media (max-width: 1024px) {
	.single-hero-columns {
		flex-wrap: wrap !important;
	}
	.single-hero-image-col,
	.single-hero-meta-col {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.single-body-columns {
		flex-wrap: wrap !important;
		gap: 32px;
	}
	.single-main-col,
	.single-sidebar-col {
		flex-basis: 100% !important;
		width: 100% !important;
	}
	.single-post-content {
		padding-left: 0;
	}
	.single-hero-image {
		margin-bottom: 0;
	}
}

@media (max-width: 600px) {
	.single-hero-band {
		padding-top: var(--wp--preset--spacing--medium) !important;
	}
	.single-hero-columns {
		gap: 24px;
	}
	.pullquote-inline p {
		font-size: 2rem;
	}
}


/* Robust hero bleed: pin the image absolutely so its height is fully
   independent of the meta column's text length (byline/dek length varies
   a lot post-to-post). Without this, the flex row's height matched
   whichever column was taller, so short image + long byline meant the
   image never reached the band's bottom edge at all. */
@media (min-width: 1025px) {
	.single-hero-band {
		position: relative;
		/* The image column below is taken out of flow (position: absolute) so its
		   height doesn't affect this row. Without a min-height, the row (and the
		   .single-body-columns margin-top that follows it) is only as tall as the
		   meta column's text, so the taller image can spill past the row into the
		   body copy below. Reserve room for the image's top offset + its capped
		   height (40px + 460px) so the row always clears it. */
		min-height: 500px;
	}
	.single-hero-columns {
		display: block;
	}
	.single-hero-image-col {
		position: absolute !important;
		top: var(--wp--preset--spacing--large) !important;
		left: 0 !important;
		width: 45% !important;
		max-width: 45% !important;
		z-index: 2;
	}
	.single-hero-meta-col {
		width: auto !important;
		max-width: none !important;
		flex-basis: auto !important;
		margin-left: calc(45% + 40px) !important;
	}
	.single-body-columns {
		margin-top: 4rem;
	}
}


/* ============================================================
   Search Results template
   ============================================================ */
.search-page-header {
	margin-top: 4rem !important;
	margin-bottom: 2.5rem;
}
.search-page-title {
	font-size: 3rem;
	line-height: 1;
	color: var(--wp--preset--color--black);
	text-transform: uppercase;
	margin: 0 0 1.5rem 0;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border-gray);
}

.search-results-columns {
	display: flex;
	gap: 64px;
	margin-bottom: 4rem;
}
.search-results-main {
	flex: 1 1 68%;
	min-width: 0;
}
.search-filter-sidebar {
	flex: 1 1 28%;
	max-width: 280px;
}

.search-result-item {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding: 2rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border-gray);
}
.search-result-item:first-child {
	padding-top: 0;
}
.search-result-text {
	flex: 1 1 auto;
	min-width: 0;
}
.search-result-eyebrow {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--purple-text);
	margin-bottom: 0.5rem;
}
.search-result-eyebrow a {
	color: inherit;
	text-decoration: none;
}
.search-result-eyebrow a:hover {
	text-decoration: underline;
}
.search-result-title {
	margin: 0 0 0.5rem 0;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.3rem;
	line-height: 1.3;
}
.search-result-title a {
	font-family: var(--wp--preset--font-family--oswald);
}
.search-result-title a {
	color: var(--wp--preset--color--black);
	text-decoration: none;
}
.search-result-title a:hover {
	text-decoration: underline;
}
.search-result-excerpt {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--wp--preset--color--body-text);
}
.search-result-more {
	margin-left: 4px;
	font-weight: 700;
	font-size: 0.85rem;
	color: #3fb9e7;
	text-decoration: none;
	white-space: nowrap;
}
.search-result-more:hover {
	text-decoration: underline;
}
.search-result-thumb {
	flex-shrink: 0;
	width: 200px;
	height: 130px;
	display: block;
}
.search-result-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
	display: block;
}
.search-no-results {
	font-size: 1rem;
	color: var(--wp--preset--color--footer-text);
}

.search-filter-form {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.search-filter-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0.3rem 0;
	cursor: pointer;
	font-size: 0.9rem;
}
.search-filter-option input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--wp--preset--color--purple-text);
	flex-shrink: 0;
}
.search-filter-label {
	flex: 1 1 auto;
	color: var(--wp--preset--color--black);
}
.search-filter-count {
	color: var(--wp--preset--color--footer-text);
	font-size: 0.85rem;
}
.search-filter-form noscript button {
	margin-top: 0.75rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--black);
	background: none;
	cursor: pointer;
}

/* Filter by sidebar: on desktop it's a normal always-visible sidebar
   (details/summary is neutralised below); on mobile/tablet it moves
   above the results and becomes a collapsible accordion, since sitting
   at the very bottom of the results list made it easy to miss. */
@media (min-width: 1025px) {
	.search-filter-accordion > .search-filter-form {
		display: flex !important;
	}
	.search-filter-summary {
		pointer-events: none;
		cursor: default;
		display: block;
		font-size: 1.4rem;
		font-family: var(--wp--preset--font-family--oswald);
		text-transform: none;
		letter-spacing: normal;
	}
	.search-filter-summary::after {
		display: none;
	}
	.search-filter-summary::marker,
	.search-filter-summary::-webkit-details-marker {
		display: none;
	}
}
@media (max-width: 1024px) {
	.search-results-columns {
		flex-wrap: wrap;
		gap: 32px;
	}
	.search-results-main,
	.search-filter-sidebar {
		flex-basis: 100%;
		max-width: none;
	}
	.search-filter-sidebar {
		order: -1;
		background-color: #EDF9FD;
		border-radius: 5px;
		padding: 20px 20px 12px;
		margin-bottom: 0.5rem;
		border-bottom: 1px solid var(--wp--preset--color--border-gray);
	}
	.search-filter-summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
		list-style: none;
		font-weight: 700;
	}
	.search-filter-summary::-webkit-details-marker {
		display: none;
	}
	.search-filter-summary::after {
		content: '+';
		font-size: 1.3rem;
		font-weight: 700;
		line-height: 1;
	}
	.search-filter-accordion[open] .search-filter-summary::after {
		content: '\2212';
	}
	.search-filter-form {
		margin-top: 1rem;
	}
	.search-filter-accordion:not([open]) .search-filter-form {
		display: none;
	}
	.search-page-header {
		margin-top: 32px !important;
		margin-bottom: 32px !important;
	}
}
@media (max-width: 600px) {
	.search-page-title {
		font-size: 2rem;
	}
	.search-result-item {
		flex-wrap: wrap;
	}
	.search-result-thumb {
		width: 100%;
		height: 180px;
	}
}


/* ============================================================
   Category Index template (2026-07-29)
   ============================================================ */
.category-page-header {
	margin-top: 4rem !important;
	margin-bottom: 2.5rem;
}
.category-page-title {
	font-size: 3rem;
	line-height: 1;
	color: var(--wp--preset--color--black);
	text-transform: uppercase;
	margin: 0;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border-gray);
}
.category-eyebrow {
	display: inline-block;
	margin: 0 0 0.5rem 0;
}
.category-eyebrow a {
	color: inherit;
	text-decoration: none;
}
.category-eyebrow a:hover {
	text-decoration: underline;
}
.category-lead {
	display: flex;
	gap: 48px;
	padding-bottom: 2.5rem;
	margin-bottom: 2.5rem;
	border-bottom: 2px solid var(--wp--preset--color--black);
}
.category-lead-text {
	flex: 1 1 55%;
	min-width: 0;
}
.category-lead-image {
	flex: 1 1 45%;
	display: block;
}
.category-lead-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
	border-top-right-radius: 44px;
}
.category-lead-title {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 2.25rem;
	line-height: 1.15;
	margin: 0 0 1rem 0;
}
.category-lead-title a {
	font-family: var(--wp--preset--font-family--oswald);
	color: var(--wp--preset--color--black);
	text-decoration: none;
}
.category-lead-excerpt {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--body-text);
	margin: 0 0 1rem 0;
}
.category-lead-date {
	display: block;
	font-size: 0.85rem;
	color: var(--wp--preset--color--footer-text);
}
.category-list-item {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	padding: 2rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border-gray);
}
.category-list-image {
	flex: 0 0 220px;
	display: block;
}
.category-list-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0;
	border-top-right-radius: 20px;
}
.category-list-text {
	flex: 1 1 32%;
	min-width: 0;
}
.category-list-title {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.3rem;
	line-height: 1.25;
	margin: 0 0 0.5rem 0;
}
.category-list-title a {
	font-family: var(--wp--preset--font-family--oswald);
	color: var(--wp--preset--color--black);
	text-decoration: none;
}
.category-list-date {
	display: block;
	font-size: 0.8rem;
	color: var(--wp--preset--color--footer-text);
}
.category-list-excerpt {
	flex: 1 1 32%;
	min-width: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--wp--preset--color--body-text);
	margin: 0;
}
.category-no-results {
	padding: 2rem 0;
}
.category-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 3rem 0 0 0;
	padding: 0;
}
.category-pagination a,
.category-pagination span {
	display: inline-block;
	padding: 0.5rem 0.9rem;
	font-family: "Montserrat", sans-serif;
	font-size: 0.9rem;
	color: var(--wp--preset--color--black);
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--border-gray);
	border-radius: 4px;
}
.category-pagination a:hover {
	border-color: var(--wp--preset--color--black);
}
.category-pagination .current {
	background: var(--wp--preset--color--black);
	color: #fff;
	border-color: var(--wp--preset--color--black);
}
.category-pagination {
	padding-bottom: 1rem;
}
@media (max-width: 1024px) {
	.category-page-header {
		margin-top: 32px !important;
		margin-bottom: 32px !important;
	}
	.category-lead {
		flex-direction: column-reverse;
		gap: 24px;
	}
	.category-lead-title {
		font-size: 1.75rem;
	}
	.category-list-item {
		display: grid;
		grid-template-columns: 160px 1fr;
		grid-template-rows: auto auto;
		column-gap: 32px;
		row-gap: 4px;
	}
	.category-list-image {
		grid-column: 1;
		grid-row: 1 / 3;
	}
	.category-list-text {
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
	}
	.category-list-excerpt {
		grid-column: 2;
		grid-row: 2;
		margin-top: 0.25rem;
		margin-left: 0;
	}
}
@media (max-width: 600px) {
	.category-list-item {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.category-list-image {
		grid-column: unset;
		grid-row: unset;
		flex: 0 0 auto;
		width: 100%;
	}
	.category-list-image img {
		aspect-ratio: auto;
		height: 140px;
	}
	.category-list-text {
		grid-column: unset;
		grid-row: unset;
		flex: 0 0 auto;
		width: 100%;
	}
	.category-list-excerpt {
		grid-column: unset;
		grid-row: unset;
		margin-left: 0;
	}
	.category-page-title {
		font-size: 2rem;
	}
	.category-lead-title {
		font-size: 1.5rem;
	}
}

/* Single Job Opening template (2026-07-29) */
.job-header {
	margin-top: 3rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border-gray);
}
.job-eyebrow {
	display: block;
	margin: 0 0 0.5rem 0;
}
.job-title {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 3rem;
	line-height: 1.1;
	color: var(--wp--preset--color--black);
	margin: 0;
}
.job-meta-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(200px, 300px));
	gap: 1.5rem 3rem;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border-gray);
}
.job-meta-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.job-meta-label {
	font-family: "Montserrat", sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--footer-text);
}
.job-meta-value {
	font-family: "Montserrat", sans-serif;
	font-size: 1rem;
	color: var(--wp--preset--color--black);
}
.job-apply-wrap {
	margin-bottom: 2.5rem;
}
.job-apply-button {
	display: inline-block;
	background-color: #3fb9e7;
	color: #dcf5ff !important;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	border-radius: 10px;
	padding: 16px 28px;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.job-apply-button:hover {
	background-color: #2ba9e0;
	color: #ffffff !important;
	text-decoration: none;
}
.job-columns {
	gap: 3rem;
	align-items: flex-start;
	margin-bottom: 4rem;
}
.job-single-content {
	font-family: "Montserrat", sans-serif;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--wp--preset--color--body-text);
}
.job-single-content h2 {
	font-family: "Montserrat", sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wp--preset--color--black);
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}
.job-single-content h3 {
	font-family: "Montserrat", sans-serif;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--wp--preset--color--black);
	margin-top: 1.5rem;
	margin-bottom: 0.75rem;
}
.job-single-content ul,
.job-single-content ol {
	padding-left: 1.5rem;
	margin-bottom: 1rem;
}
.job-single-content li {
	margin-bottom: 0.5rem;
}
.job-single-content p {
	margin-bottom: 1rem;
}
.job-ad-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 300px;
	height: 300px;
	max-width: 100%;
	background-color: #eeeeee;
	color: var(--wp--preset--color--footer-text);
	font-family: "Montserrat", sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-align: center;
}
.job-ad-label {
	margin-bottom: 4px;
}
/* Hide the plugin's auto-injected inline application form; we use our own Apply button instead */
.job-single-content .awsm-job-form {
	display: none;
}
.job-single-content .awsm-job-single-wrap.awsm-col-2 {
	display: block;
}
.job-single-content .awsm-job-content {
	width: 100% !important;
	flex-basis: 100% !important;
	float: none !important;
}
@media (max-width: 1024px) {
	.job-title {
		font-size: 2.25rem;
	}
	.job-columns {
		flex-direction: column;
	}
	.job-sidebar-col {
		width: 100% !important;
		flex-basis: 100% !important;
	}
	.job-ad-placeholder {
		margin: 0 auto !important;
		margin-bottom: 3rem !important;
	}
}
@media (max-width: 600px) {
	.job-header {
		margin-top: 2rem;
	}
	.job-title {
		font-size: 1.75rem;
	}
	.job-meta-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
		max-width: 100%;
	}
	.job-apply-button {
		width: 100%;
	}
}

/* Job Index (Jobs listing page) template additions (2026-07-29) */
.job-list {
	margin-top: 1rem;
}
.job-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 2rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border-gray);
}
.job-list-item:first-child {
	border-top: 2px solid var(--wp--preset--color--black);
}
.job-list-text {
	flex: 1 1 0;
	min-width: 0;
}
.job-list-title {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.5rem;
	line-height: 1.2;
	margin: 0 0 0.5rem 0;
}
.job-list-title a {
	color: var(--wp--preset--color--black);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--oswald);
}
.job-list-title a:hover {
	text-decoration: underline;
}
.job-list-meta {
	font-family: "Montserrat", sans-serif;
	font-size: 0.85rem;
	color: var(--wp--preset--color--footer-text);
	margin: 0 0 0.5rem 0;
}
.job-list-excerpt {
	font-family: "Montserrat", sans-serif;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--wp--preset--color--body-text);
	margin: 0;
}
.job-list-button-wrap {
	flex: 0 0 auto;
}
.job-list-button {
	display: inline-block;
	background-color: #3fb9e7;
	color: #dcf5ff !important;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	border-radius: 10px;
	padding: 14px 24px;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.job-list-button:hover {
	background-color: #2ba9e0;
	color: #ffffff !important;
	text-decoration: none;
}
.job-list-empty {
	font-family: "Montserrat", sans-serif;
	color: var(--wp--preset--color--footer-text);
	padding: 2rem 0;
}
.job-list-pagination {
	padding-top: 0.5rem;
}
@media (max-width: 1024px) {
	.job-list-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	.job-list-button-wrap {
		width: 100%;
	}
	.job-list-button {
		display: block;
		width: 100%;
	}
}
@media (max-width: 600px) {
	.job-list-item {
		padding: 1.5rem 0;
	}
	.job-list-title {
		font-size: 1.25rem;
	}
}

/* Jobs page intro text (post-content) — match single post body copy size (2026-07-30) */
.job-index-intro p,
.job-index-intro li {
	font-size: 1.2em;
}

/* Desktop nav submenu popouts — nicer default appearance (2026-07-30).
   WordPress core ships these with a plain white background, a thin gray border, zero
   padding on the box or its items, and a snappy opacity-only 0.1s linear fade. This
   restyles them to match the mobile overlay's light blue tint (#dcf5ff), adds real
   breathing room around the text and between items, a soft drop shadow instead of the
   flat border, and a gentler ease-in-out fade. Scoped to min-width: 1025px -- the theme's real desktop
   breakpoint (see the "@media (min-width: 782px) and (max-width: 1024px)" toggle-
   visibility rule below): the tablet/mobile overlay's inline expandable submenus
   (782-1024px included) reuse these same core class names and should stay flat/
   borderless like the rest of the overlay, not get the desktop dropdown's shadow. */
@media (min-width: 1025px) {
	.wp-block-navigation__submenu-container {
		background-color: #dcf5ff !important;
		border: none !important;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
		padding: 12px 0 !important;
		row-gap: 6px;
		transition: opacity 0.3s ease-in-out !important;
	}

	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 8px 22px !important;
	}
}

/* Desktop nav submenu polish round 2 (2026-07-30): rounded corners matching the header
   search box (4px), a touch more weight on sub-item text, and hover states that shift
   text to the same muted gray used for .job-list-meta instead of underlining -- applied
   to both the sub-menu items and the top-level nav labels themselves (overriding the
   sitewide "a:hover { text-decoration: underline }" rule for nav links specifically).
   Scoped to min-width: 782px, same as the rest of this submenu styling. */
@media (min-width: 782px) {
	.wp-block-navigation__submenu-container {
		border-radius: 4px;
	}

	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-weight: 500;
	}

	.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--footer-text) !important;
		text-decoration: none !important;
	}

	.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--footer-text) !important;
		text-decoration: none !important;
	}
}

/* Header search box (desktop top bar + mobile overlay share this selector pair by
   design -- see the comment above .sentinel-header-search .wp-block-search__input)
   -- indent the placeholder/typed text a little further from the left edge than the
   button-inside search block's cramped 4px default. */
.sentinel-header-search .wp-block-search__input,
.nav-mobile-search .wp-block-search__input {
	padding-left: 12px;
}


/* ==============================================================
   Default Pages template (2026-08-01)
   Narrow, single-column layout for plain text pages (Terms &
   Conditions, Privacy Policy, etc.) built from templates/page.html:
   post title, an optional featured image + caption, then post
   content. No sidebar -- this is the site's plain-content template.
   ============================================================== */
.default-page-main .wp-block-post-title {
	margin-bottom: 0;
}

/* default-page-content-col is a plain group nested directly inside main. As
   a direct child of main's "constrained" layout, it automatically inherits
   the site's standard 1200px-centered position -- the same math that lines
   the header's logo up at the page's content edge (see templates/page.html).
   Its own children (title, image, content) are then forced narrower and
   flush-left *within* that already-correctly-positioned 1200px box, so the
   720px reading column starts at the same x-position as the header logo
   instead of being re-centered inside the 1200px area. */
.default-page-content-col .wp-block-post-title,
.default-page-content-col .default-page-featured-image,
.default-page-content-col .entry-content.wp-block-post-content {
	max-width: 720px !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Featured image + caption, output by the [sentinel_page_featured_image]
   shortcode. Only renders when the page has a featured image set. */
.default-page-featured-image {
	margin: 1.5rem 0 2rem;
}
.default-page-featured-image img {
	display: block;
	width: 100%;
	border-radius: 5px;
}
.default-page-image-caption {
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.8rem;
	color: var(--wp--preset--color--footer-text);
}

/* "Highlight" Group block style (registered in functions.php) -- a
   light-blue callout box editors can apply to any Group block on any
   page, e.g. a "Why these terms matter" aside. Reuses the same soft
   blue tint as the search filter sidebar for a consistent "info box"
   look across the site. */
.wp-block-group.is-style-highlight-box {
	background-color: #edf9fd;
	border-radius: 8px;
	padding: 1.75rem 2rem;
	margin: 2rem 0;
}
.wp-block-group.is-style-highlight-box > *:first-child {
	margin-top: 0;
}
.wp-block-group.is-style-highlight-box > *:last-child {
	margin-bottom: 0;
}


/* Default Pages template body copy: matches the Post template's paragraph
   sizing (.single-post-content p, li is 1.2em/1.5em against a 14px base =
   16.8px/25.2px) so plain content pages (Webinars, Terms & Conditions, etc.
   -- anything using templates/page.html) read the same size as Posts
   instead of the smaller 14px base body text. */
.default-page-main .entry-content p,
.default-page-main .entry-content li {
	font-size: 1.2em;
	line-height: 1.5em;
}


/* Category Feed template intro copy (2026-07-30, renamed 2026-07-31 from
   "Profiles page intro copy" -- this template is no longer specific to the
   Profiles page/category, see functions.php): a Page's own editor content
   (templates/page-category-feed.html adds wp:post-content between the
   category-style header and the [sentinel_category_feed] list) -- sized to
   match the site's standard body copy (see .single-post-content p). A
   horizontal rule below it (matching .category-lead's border-bottom, the
   same heavy black line that closes out the lead story further down the
   page) separates it from the list of posts that follows. */
.category-feed-intro p {
	font-size: 1.2em;
	line-height: 1.5em;
	margin-bottom: 0;
}
.category-feed-intro {
	padding-bottom: 2.5rem;
	margin-bottom: 2.5rem;
	border-bottom: 2px solid var(--wp--preset--color--black);
}


/* Sitewide Contact Form 7 styling (2026-08-03, made universal 2026-08-04):
   originally scoped to just the /contact-2/ page, now applies to every CF7
   form on the site (current and future) so any new form -- e.g. /subscribe/
   -- picks up the same look with zero extra work. Fields are matched to the
   nav search box's pill treatment (border/background/radius/font -- see
   .sentinel-header-search above) and made a uniform full width; the submit
   button is matched to the sitewide button style (.wp-block-button__link /
   nav Subscribe button above). No special classes needed in the form
   builder -- CF7 already gives every field type a consistent class
   (wpcf7-form-control, plus wpcf7-text/wpcf7-select/wpcf7-textarea/
   wpcf7-submit/wpcf7-checkbox). !important is required throughout:
   WordPress's core global-styles sheet ships a higher-specificity
   ".wp-site-blocks input:not([type=...])..." rule (many chained :not()
   clauses) that otherwise wins the cascade over these single-class
   selectors -- same root cause documented above for .icon-large/
   .icon-purple. */
.wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

input.wpcf7-form-control:not([type="checkbox"]):not([type="radio"]):not(.wpcf7-submit),
select.wpcf7-form-control,
textarea.wpcf7-form-control {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	border: 1px solid #f0d9e0 !important;
	background: #fdf6f8 !important;
	border-radius: 4px !important;
	font-size: 0.85rem !important;
	letter-spacing: 0.4px !important;
	color: #333333 !important;
	padding: 12px 16px !important;
	margin-top: 4px !important;
}

input.wpcf7-form-control::placeholder,
textarea.wpcf7-form-control::placeholder {
	color: #cba3ae !important;
}

input.wpcf7-form-control:not([type="checkbox"]):not([type="radio"]):focus,
select.wpcf7-form-control:focus,
textarea.wpcf7-form-control:focus {
	outline: none !important;
	border-color: #cba3ae !important;
}

textarea.wpcf7-form-control {
	min-height: 160px !important;
	resize: vertical;
}

.wpcf7-form p {
	margin-bottom: 20px;
}

input.wpcf7-submit {
	display: inline-block !important;
	width: auto !important;
	background-color: #3fb9e7 !important;
	color: #dcf5ff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.3px !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 18px 40px !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}

input.wpcf7-submit:hover {
	background-color: #2ba9e0 !important;
	color: #ffffff !important;
}

/* "Page with Sidebar" template (templates/page-two-column.html, 2026-08-03):
   a default Page layout (title, optional featured image, post content --
   same as the plain Pages template) but WITHOUT the plain template's 720px
   content-width cap, so a core Columns block placed inside the page's own
   content has room to form a right-hand sidebar. Reuses the same 68%/32%
   split, 64px desktop gap, and <=1024px stacking behavior as the single-
   post body columns above (.single-body-columns) for visual consistency
   sitewide. Unlike that one, the right column here isn't template-
   generated -- it's just wherever the editor places the Columns block in
   the page content, so both columns stay freely editable, per page, with
   any WordPress blocks. Give the Columns block this class to opt in. */
.page-two-col-main .wp-block-post-title {
	margin-bottom: 1.5rem;
}
.page-sidebar-columns {
	gap: 64px;
	margin-top: 1rem;
}
@media (max-width: 1024px) {
	.page-sidebar-columns {
		flex-wrap: wrap !important;
		gap: 32px;
	}
	.page-sidebar-columns > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}


/* Education page (2026-08-03): rebuilt from the old Nicepage-built /education/
   page (which rendered outside this theme entirely, with its own legacy
   header/footer) as native blocks on the default Pages template, so it now
   gets the site's real nav/footer. The three intro cards (Qualifications /
   Training / Events) reuse the sitewide black preset color for the caption
   box, matching the original's dark-box treatment. */
.education-cards {
	margin-top: 0.5rem;
	margin-bottom: 2.5rem;
}
.education-card {
	background-color: var(--wp--preset--color--black);
	border-radius: 5px;
	overflow: hidden;
	height: 100%;
}
.education-card img {
	display: block;
	width: 100%;
	height: auto;
}
.education-card-body {
	padding: 20px 24px 28px;
}
.education-card-title {
	color: #ffffff;
	text-transform: uppercase;
	font-size: 1.1rem;
	letter-spacing: 0.5px;
	margin: 0 0 12px;
}
.education-card-text {
	color: #dddddd;
	font-size: 0.9rem;
	line-height: 1.6em;
	margin-bottom: 0;
}
.education-banner-image img {
	border-radius: 5px;
}


/* "is-style-quote" paragraph style (2026-08-04): gives an editor a way to
   add the same pull-quote look used in single-post body copy
   (.pullquote-inline, added via the post's Pull Quote meta box) on any
   page -- Pages don't have that meta box, so this is the block-editor-only
   equivalent. Apply by adding "is-style-quote" as an Additional CSS Class
   on a Paragraph block. Text treatment (font/size/weight/color) matches
   .pullquote-inline p exactly; the mark above it reuses the same
   open-quote.svg asset via a CSS mask (rather than an <img>) so it can be
   tinted to the same #a877a1 purple -- the uploaded file itself is a much
   lighter lavender, used elsewhere at low opacity. */
p.is-style-quote {
	clear: both;
	margin: 2.5rem 0;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 2rem !important;
	font-weight: 700;
	line-height: 1.35 !important;
	color: #a877a1;
}
p.is-style-quote::before {
	content: "";
	display: block;
	width: 90px;
	aspect-ratio: 80.6 / 61.4;
	margin-bottom: 0.25rem;
	background-color: #a877a1;
	-webkit-mask: url("https://1203048.eu13.myftpupload.com/wp-content/uploads/2026/07/open-quote.svg") no-repeat center / contain;
	mask: url("https://1203048.eu13.myftpupload.com/wp-content/uploads/2026/07/open-quote.svg") no-repeat center / contain;
}


/* Linked headline hover state (2026-08-04): avoid the sitewide
   underline-on-hover link behavior (a:hover above) for headline links,
   using a subtle color shift instead. Black headlines (post titles
   sitewide -- home page, single posts, search results, etc.) shift to
   the existing body-text dark grey; white headlines (Hubs carousel
   cards, set on a dark background via .hub-card-title a above) shift to
   the existing border-gray light grey. */
.wp-block-post-title a:hover,
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
	color: var(--wp--preset--color--body-text);
	text-decoration: none;
}

.hub-card-title a:hover {
	color: var(--wp--preset--color--border-gray);
	text-decoration: none;
}

/* Eyebrow category/tag links (homepage "Latest" feed and Hubs section) render
   as <a> tags, which would otherwise pick up the sitewide blue link color
   and underline-on-hover. Force them to match the .is-style-eyebrow /
   .hub-card-label purple in both states. */
.is-style-eyebrow a,
.is-style-eyebrow a:hover,
.hub-card-label a,
.hub-card-label a:hover {
	color: #a877a1;
	text-decoration: none;
}

/* "Wide Feature" card -- reuses the Hub cards' image + dark gradient +
   white overlaid title/excerpt treatment, but full-width and landscape
   instead of part of a horizontal scroller. Built for single-card
   placements like the second-latest "featured-story" post under the
   Opinion stat block on the home page, filling the empty space left below
   the shorter stat/button column. */
.wide-feature-card {
	display: flex;
	flex-direction: column;
	position: relative;
}

.wide-feature-media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin: 0;
	border-radius: 0;
	border-top-right-radius: 20px;
}

.wide-feature-media img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.wide-feature-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0) 70%);
}

.wide-feature-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 20px;
}

.wide-feature-title {
	margin-bottom: 8px;
	font-size: 1.4rem;
	line-height: 1.25em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wide-feature-title a {
	color: #ffffff;
}
.wide-feature-title a:hover {
	color: var(--wp--preset--color--border-gray);
	text-decoration: none;
}

.wide-feature-excerpt {
	color: #e6e6e6;
	font-size: 0.9rem;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


main.not-found-page .not-found-hero {
	text-align: center;
	border-radius: 12px;
	margin-top: 20px;
}
.not-found-hero .is-style-eyebrow {
	justify-content: center;
}
.not-found-hero .wp-block-buttons {
	margin-top: 1.5rem;
}
.not-found-latest .is-style-eyebrow {
	margin-bottom: 1rem;
}

.not-found-latest .wp-block-post-featured-image {
	margin-bottom: 14px;
}
.not-found-latest .wp-block-post-template h3 {
	margin-bottom: 8px;
}

/* "Hubs" top-level nav item has no href (it's a dropdown-only trigger --
   there's no single "all hubs" landing page to link to), so the browser
   doesn't treat it as a real link. Chrome then shows the text-selection
   cursor over its label instead of a pointer (Firefox happens not to);
   this restores the expected pointer cursor without inventing a fake URL. */
.wp-block-navigation-item__content:not([href]) {
	cursor: pointer;
}

/* The new "Events" heading on the single-post sidebar is a separate block
   sibling to the [sentinel_events_widget] shortcode's raw output, which
   makes the first .event-item the *second* flow child rather than the
   first -- so it misses the .event-item:first-child padding-top reset
   below, and picks up WordPress's automatic block-gap margin on top of
   that. Zero both explicitly for the item right after the heading. */
.single-sidebar-col .sidebar-heading + .event-item {
	margin-top: 0;
	padding-top: 0;
}
.single-sidebar-col .event-item,
.wp-block-column .event-item {
	margin-top: 0;
}