/**
Theme Name: NASID 2026 Redesign
Author: Beekeeper Group
Author URI: https://beekeepergroup.com/
Description: Child theme for development of the redesigned NASID site. 
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nasid-2026-redesign
Template: astra
*/
/* ---------------------------------------------------------------------------
   The Events Calendar — events list widget
   ---------------------------------------------------------------------------
   The [tribe_events_list] widget renders its own markup and has no Customizer
   controls, so it inherits the theme's h3 size (36px) for event titles, which
   overwhelms the surrounding content. These rules only bring the widget back to
   the site's existing type scale and colour tokens — no new design values.
   -------------------------------------------------------------------------- */
.tribe-events-widget .tribe-events-widget-events-list__event-title {
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: 0;
	margin-bottom: 0.25em;
}

.tribe-events-widget .tribe-events-widget-events-list__event-title a {
	color: var(--ast-global-color-2);
	text-decoration: none;
}

.tribe-events-widget .tribe-events-widget-events-list__event-title a:hover,
.tribe-events-widget .tribe-events-widget-events-list__event-title a:focus {
	color: var(--ast-global-color-3);
	text-decoration: underline;
}

.tribe-events-widget .tribe-events-widget-events-list__event-row {
	padding-bottom: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--ast-global-color-7);
}

.tribe-events-widget .tribe-events-widget-events-list__event-row:last-of-type {
	border-bottom: 0;
}

/* "View all events" already sits above this block as a themed button. */
.tribe-events-widget .tribe-events-widget-events-list__view-more {
	display: none;
}

/* ---------------------------------------------------------------------------
   Goal lists inside Strategic Plan / Solutions accordions
   ---------------------------------------------------------------------------
   Core list blocks are used here rather than spectra/list: Spectra emits a
   per-block CSS rule at three breakpoints for every list, item, icon and
   content block, which on a 366-entry page produced ~1.5MB of inline CSS.
   These rules reproduce the same yellow bullet the Spectra icon lists use.
   -------------------------------------------------------------------------- */
.nasid-goal-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.nasid-goal-list > li {
	position: relative;
	padding-left: 1.75em;
	margin-bottom: var(--wp--preset--spacing--40);
}

.nasid-goal-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ast-global-color-0);
}

.nasid-goal-list > li:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Mobile tap targets
   ---------------------------------------------------------------------------
   Spectra renders the accordion header as a bare <button> sized to its text
   (~21px tall), which is below the 44px minimum for comfortable tapping. The
   panel padding already provides the visual spacing, so we only need to grow
   the button's own hit area — nothing moves visually.
   -------------------------------------------------------------------------- */
@media (max-width: 921px) {

	.wp-block-spectra-accordion-child-header {
		min-height: 44px;
		align-items: center;
	}

	/* The Events Calendar's list navigation and subscribe controls */
	.tribe-events-c-nav__list-item button,
	.tribe-events-c-nav__list-item a,
	.tribe-events-c-subscribe-dropdown__button {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}


	/* Events Calendar list-widget titles and view controls */
	.tribe-events-widget-events-list__event-title-link,
	.tribe-events-c-view-selector__button,
	.tribe-events-c-subscribe-dropdown__button-text {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* Resource links styled as buttons (Working Group pages) */
	.wp-block-button__link {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* Astra's previous/next links on single team members */
	.ast-single-post .post-navigation a {
		display: inline-block;
		padding-block: 10px;
	}
}

/* ---------------------------------------------------------------------------
   Scroll animations on small screens
   ---------------------------------------------------------------------------
   AOS starts fade-left / fade-right elements 100px off to the side and slides
   them in. On a narrow viewport that starting offset pushes wide blocks past
   the right edge, so the page can be scrolled sideways until the element
   animates. Dropping the horizontal travel below the tablet breakpoint keeps
   the fade (the site's animation vocabulary) without the overflow.
   -------------------------------------------------------------------------- */
@media (max-width: 921px) {
	[data-aos="fade-left"],
	[data-aos="fade-right"] {
		transform: none !important;
	}
}

/* ---------------------------------------------------------------------------
   Headshot framing (Our Mission leadership)
   ---------------------------------------------------------------------------
   The leadership photos are circular (aspect-ratio 1 + object-fit: cover), but
   the source files are landscape or tall portraits, so the default centre crop
   cuts heads off — Chris Konschak's was sliced in half. WordPress has no focal
   point control for the image block, and Spectra only exposes object-position
   on containers/sliders, not on core/image (it strips the inline style and
   re-emits width / aspect-ratio / object-fit as CSS). So there is no Customizer
   or block setting that can do this.

   Keyed on the attachment class, not the block, so the offset travels with the
   photograph: replace a photo and the rule simply stops matching and falls back
   to a centre crop. New square headshots need no rule at all.
   -------------------------------------------------------------------------- */
.wp-image-5260 { object-position: 62% 50%; } /* Darrin Grondel   — 3:2 landscape */
.wp-image-5902 { object-position: 50% 22%; } /* Christiana Falcon — tall portrait */
.wp-image-5901 { object-position: 50% 8%;  } /* Chris Konschak    — head high in frame */
.wp-image-5559 { object-position: 50% 18%; } /* Ryan C. Smith     — tall portrait */
.wp-image-5903 { object-position: 50% 12%; } /* Joey Ford         — tall portrait */

/* ---------------------------------------------------------------------------
   Hover lift on clickable cards
   ---------------------------------------------------------------------------
   Spectra containers expose hover controls for background, gradient, border and
   box-shadow, but not for transform — so the "grows slightly when you can click
   it" affordance has no block or Customizer equivalent. The class is applied
   through the block's own Additional CSS Class field, so the client can add or
   remove the effect per card without touching this file.

   Kept deliberately small (2%) and paired with the shadow recipe already in the
   style guide. Honours prefers-reduced-motion.
   -------------------------------------------------------------------------- */
.nasid-hover-lift {
	transition: transform 0.25s ease-out, box-shadow 0.25s ease-out,
		border-color 0.25s ease-out, background-color 0.25s ease-out;
}

.nasid-hover-lift:hover,
.nasid-hover-lift:focus-within {
	transform: translateY(-4px) scale(1.02);
	box-shadow: 0px 30px 30px -30px var(--ast-global-color-2);
}

@media (prefers-reduced-motion: reduce) {

	.nasid-hover-lift,
	.nasid-hover-lift:hover,
	.nasid-hover-lift:focus-within {
		transition: none;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Card links
   ---------------------------------------------------------------------------
   Astra's "underline content links" is a single global switch — it has no
   per-block control, and turning it off site-wide would also strip the
   underlines from links in body copy, where they earn their keep. These two
   cases are cards: the card itself is the click affordance, so the underline
   on the label is noise.

   Specificity is deliberate. Astra's rule is
   `.ast-single-post .entry-content a` (0,2,1), so a two-class selector would
   only tie and leave the result down to stylesheet order.
   -------------------------------------------------------------------------- */
.entry-content .wp-block-spectra-pro-loop-builder-child-template .spectra-block-post a,
.entry-content a.wp-block-spectra-container.nasid-hover-lift {
	text-decoration: none;
}

.entry-content .wp-block-spectra-pro-loop-builder-child-template .spectra-block-post a:hover,
.entry-content a.wp-block-spectra-container.nasid-hover-lift:hover {
	color: var(--ast-global-color-3);
}

/* ---------------------------------------------------------------------------
   Single team member: photo column beside the bio
   ---------------------------------------------------------------------------
   The headshot and organisation come from the "Team Bio Photo" Site Builder
   hook, which Astra injects *before* the entry content — a hook can insert
   blocks but cannot wrap the post content, so there is no block or Customizer
   way to put the bio in a second column beside it. Laying the entry content out
   as a two-column grid and pinning the hook to the first column does it without
   touching the template.
   -------------------------------------------------------------------------- */
@media (min-width: 922px) {

	.single-team .entry-content {
		display: grid;
		grid-template-columns: 220px 1fr;
		column-gap: var(--wp--preset--spacing--60);
		align-items: start;
	}

	.single-team .entry-content > * {
		grid-column: 2;
		min-width: 0;
	}

	.single-team .entry-content > .astra-advanced-hook-6954 {
		grid-column: 1;
		grid-row: 1 / span 999;
	}
}

/* ---------------------------------------------------------------------------
   Relative crash risk table (The Issue)
   ---------------------------------------------------------------------------
   Replaces Visualizer chart 6608, which drew this same three-column table in
   D3 but rendered nothing (verified: the block alone at the top of an empty
   page produces a 1200x0 container with no <svg> and no <table>).

   The core table block has no per-row or per-cell colour controls — the header
   band and the severity dot have no block or Customizer equivalent — so they
   live here. Everything uses existing palette tokens; the original chart's
   #7FB3D5 / #F5B041 / #E67E22 / #C0392B were off the style guide.

   The dot is keyed by row position, so reordering rows in the editor would
   reorder the colours. It is decoration — the "Relative Risk" column carries
   the actual meaning.
   -------------------------------------------------------------------------- */
.nasid-risk-table table {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--ast-global-color-7);
	border-radius: 12px;
	overflow: hidden;
}

.nasid-risk-table thead th {
	background: var(--ast-global-color-2);
	color: var(--ast-global-color-4);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: left;
	border: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.nasid-risk-table tbody td {
	border: 0;
	border-top: 1px solid var(--ast-global-color-7);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	color: var(--ast-global-color-3);
	vertical-align: middle;
}

.nasid-risk-table tbody td:first-child {
	color: var(--ast-global-color-2);
	font-weight: 600;
	white-space: nowrap;
}

.nasid-risk-table tbody td:nth-child(2) {
	color: var(--ast-global-color-2);
	font-weight: 600;
	white-space: nowrap;
}

/* severity dot, escalating through the palette */
.nasid-risk-table tbody td:first-child::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 10px;
	border-radius: 50%;
	vertical-align: baseline;
	background: var(--ast-global-color-7);
}

.nasid-risk-table tbody tr:nth-child(2) td:first-child::before { background: var(--ast-global-color-0); }
.nasid-risk-table tbody tr:nth-child(3) td:first-child::before { background: var(--ast-global-color-1); }
.nasid-risk-table tbody tr:nth-child(4) td:first-child::before { background: var(--ast-global-color-2); }

/* WP's stripe style paints its own alternating rows; keep it in the palette */
.nasid-risk-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--ast-global-color-5);
}

.nasid-risk-table.is-style-stripes tbody tr:nth-child(even) {
	background-color: var(--ast-global-color-4);
}

@media (max-width: 544px) {

	.nasid-risk-table thead th,
	.nasid-risk-table tbody td {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}

	.nasid-risk-table tbody td:first-child {
		white-space: normal;
	}
}

/* ---------------------------------------------------------------------------
   Interior pages: a standard 80px between the page title and the content
   ---------------------------------------------------------------------------
   The gap was made of three separate pieces and came out anywhere between
   106px and 218px depending on the page:

     46px  the title band's own bottom padding (36px inner + Spectra's 10px)
     60px  Astra's #primary top margin
     0-112px  whatever top padding the page's first block happened to carry

   Only the first is a Customizer/block value; the other two are theme CSS and a
   per-page block attribute, so there is no single setting that can hold all
   three to one number. These rules keep the 46px inside the band (the title
   should not sit flush against the band's edge), remove the other two, and add
   back a fixed 34px — 80px in total, on every interior page.

   Scoped by the adjacent sibling: the hook only renders on pages that have the
   title band, so the front page and the events pages keep Astra's own spacing.

   The 34px sits on #primary rather than on the hook wrapper. It used to be
   padding-bottom on the wrapper, but the wrapper is now the element that paints
   the band (see "Page header" below) and padding there would have stretched the
   band's background 34px past the bottom of the title band. The total is
   unchanged. -------------------------------------------------------------- */
.astra-advanced-hook-6700 + .site-content #primary {
	margin-top: 34px;
}

.astra-advanced-hook-6700 + .site-content .entry-content > *:first-child {
	padding-top: 0;
}

/* Spectra emits its own per-block padding as
   `.wp-block-spectra-container` repeated three times plus a [data-spectra-id]
   attribute — specificity (0,4,0), which exactly ties the rule above and wins
   on source order because its <style> block comes later in the document.
   Repeating one class here takes this to (0,5,0). */
.astra-advanced-hook-6700 + .site-content .entry-content
> .wp-block-spectra-container.wp-block-spectra-container:first-child {
	padding-top: 0;
}

@media (max-width: 544px) {

	/* the band's inner padding drops to 24px + 10px on mobile, so the
	   remainder has to grow to keep the total at 80px */
	.astra-advanced-hook-6700 + .site-content #primary {
		margin-top: 46px;
	}
}

/* ---------------------------------------------------------------------------
   Page header
   ---------------------------------------------------------------------------
   Two treatments for the interior page title band, both on the one Astra Site
   Builder hook (6700) that every interior page shares:

     default   cream band, the brand colour rule across the top, and the NASID
               mark at the right of the content column.
     photo     a page with an image in its "Page Header" field gets that photo
               full-bleed under a near-black scrim, with the title reversed out.
               The rule and the mark step aside — the photograph is the design.

   Why this is CSS and not blocks. The band is a single shared hook, so its
   appearance cannot vary per page from block attributes alone. Beyond that,
   Spectra has no control that places a decorative layer behind a heading: the
   only background controls it offers paint the container itself, which sits
   under the title but cannot be positioned, sized or cropped independently of
   it. The colour rule, the mark and the scrim are all such layers.

   The hook's own gradient has been removed in the block, so the band's
   background is owned here in one place rather than split between two.

   Layering: Spectra already gives the band's inner container and the <h1>
   z-index 2, so the pseudo-elements below sit at z-index 1 and are always
   behind the title without touching Spectra's own values.
   -------------------------------------------------------------------------- */
.astra-advanced-hook-6700 {
	position: relative;
	overflow: hidden;
	background-color: var(--ast-global-color-5);
}

/* The brand rule. Segments are the proportions used on NASID's own conference
   collateral - red 22%, yellow 23%, green 55% - in the palette's own red and
   yellow. The green is the logo mark's green (#78d64b); it is the one colour
   here that is not in the Customizer palette, because the mark uses it. */
.astra-advanced-hook-6700::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	left: 0;
	height: 5px;
	background: linear-gradient(
		90deg,
		var(--ast-global-color-1) 0 22%,
		var(--ast-global-color-0) 22% 45%,
		#78d64b 45% 100%
	);
}

/* The NASID mark, aligned to the right edge of the 1200px content column so it
   sits with the title rather than floating at the window edge. */
.astra-advanced-hook-6700::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 50%;
	right: max(20px, calc(50% - 600px));
	width: 69px;   /* the mark is 820x1383 - this holds its aspect ratio */
	height: 116px;
	transform: translateY(-50%);
	background: url("../../uploads/2026/09/NASID-mark.png") no-repeat center / contain;
}

/* Long titles must wrap before they reach the mark. */
.astra-advanced-hook-6700 h1 {
	padding-right: 104px;
}

/* --- the photographic treatment ---------------------------------------- */

/* The band grows upward: the extra room is added above the title, so the
   distance from the title to the content below stays at the standard 80px and
   nothing else on the page moves. */
.nasid-header-has-photo .astra-advanced-hook-6700 {
	background-color: var(--ast-global-color-6);
	background-image: var(--nasid-page-header-photo);
	background-repeat: no-repeat;
	background-position: center 38%;
	background-size: cover;
	padding-top: 70px;
}

/* The scrim replaces the colour rule. It is heaviest on the left, where the
   title sits, and lifts towards the right so the photograph still reads.

   0.72 on the left is not a guess: measured against the darkest and the
   brightest candidate photographs in the library, the brightest 0.5% of pixels
   behind the title still leave white type at 7.4:1 or better, so any photograph
   the client picks clears WCAG AA with room to spare. */
.nasid-header-has-photo .astra-advanced-hook-6700::before {
	top: 0;
	bottom: 0;
	height: auto;
	background: linear-gradient(
		90deg,
		rgba(22, 20, 15, 0.72) 0%,
		rgba(22, 20, 15, 0.62) 46%,
		rgba(22, 20, 15, 0.34) 100%
	);
}

.nasid-header-has-photo .astra-advanced-hook-6700::after {
	content: none;
}

.nasid-header-has-photo .astra-advanced-hook-6700 h1 {
	padding-right: 0;
	color: var(--ast-global-color-4);
}

@media (max-width: 921px) {

	.astra-advanced-hook-6700::after {
		width: 51px;
		height: 86px;
	}

	.astra-advanced-hook-6700 h1 {
		padding-right: 76px;
	}

	.nasid-header-has-photo .astra-advanced-hook-6700 {
		padding-top: 48px;
	}
}

@media (max-width: 544px) {

	/* No room for the mark beside a title that is already wrapping to three
	   lines on the longest pages, so the rule carries the branding alone. */
	.astra-advanced-hook-6700::after {
		content: none;
	}

	.astra-advanced-hook-6700 h1 {
		padding-right: 0;
	}

	.nasid-header-has-photo .astra-advanced-hook-6700 {
		padding-top: 32px;
		background-position: center 42%;
	}

	/* A shallow band on a phone crops the photograph hard, so the scrim goes
	   vertical - dark at the bottom where the title is, lighter at the top. */
	.nasid-header-has-photo .astra-advanced-hook-6700::before {
		background: linear-gradient(
			0deg,
			rgba(22, 20, 15, 0.82) 0%,
			rgba(22, 20, 15, 0.46) 100%
		);
	}
}

/* ---------------------------------------------------------------------------
   Motion effects — respect "reduce motion"
   ---------------------------------------------------------------------------
   The homepage "Conference 2027" band uses Spectra Pro's scroll motion effects
   for its parallax. That extension ships no prefers-reduced-motion handling:
   scroll-effects.js writes the travel distance straight into an inline
   --spectra-scroll-y on the element, and the block panel has no control for it,
   so there is no Customizer or block route to opt out.

   Zeroing the custom property leaves the plugin's own transform in place and
   simply gives it nothing to move. !important is needed only because the value
   is an inline style written by that script; there is no selector that can
   outrank it.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	[data-spectra-motion-effects] {
		--spectra-scroll-y: 0px !important;
	}
}

/* ---------------------------------------------------------------------------
   Homepage hero — the conference call-to-action buttons
   ---------------------------------------------------------------------------
   The two hero buttons carry a soft lift so they read as the primary action
   over the video. Spectra's button block has no shadow control that renders:
   `style.shadow` accepts only a WordPress shadow *preset* reference, and a raw
   CSS value is silently replaced by WP's own default (a hard 1px 2px). None of
   the core presets match the site's "lifted" recipe (0 Npx Npx -Npx), so this
   is the only route.

   Applied through each button's Additional CSS Class field, so the client can
   remove it in the editor without touching code — the same pattern as
   .nasid-hover-lift.
   -------------------------------------------------------------------------- */
.wp-block-spectra-button.nasid-btn-lift {
	box-shadow: 0 10px 24px -10px rgba(22, 20, 15, 0.55);
}