/*
 * The theme's only stylesheet.
 *
 * Before adding anything here, check the two rules in CLAUDE.md:
 *   1. can theme.json express it? Then it goes there, not here.
 *   2. does a current core block support already do it? Then use that.
 *
 * What is left for this file: pseudo elements, media queries, sibling and descendant
 * combinators, third-party plugin selectors, and block style variation internals.
 *
 * Keep the section order below and add to the matching section rather than appending to
 * the bottom. Keep the banner comments.
 *
 * This file is loaded into the block editor too, so every rule has to look right inside
 * `.editor-styles-wrapper` as well as on the front end.
 *
 * Why this design needs more CSS than usual: the comp separates sections with hairline
 * rules that change which edge they sit on at narrow widths. A border set as a block
 * attribute serializes as an INLINE style, which beats any media query without
 * `!important`, so every divider that has to move at a breakpoint is written here rather
 * than on the block. See the padding trap in CLAUDE.md, which is the same failure.
 */


/*--- Global and editor parity ---*/

/* Body colour comes from the palette. Always use a real slug: a typo'd slug is an invalid
   declaration, so the text silently falls back to the inherited default and nothing warns
   you. */
body,
.editor-styles-wrapper {
	color: var(--wp--preset--color--charcoal);
}

/* Remove the gap WordPress drops between the top level parts of the page. It shows up as
   white space above the footer that is in no design. Core emits it from
   styles.spacing.blockGap (class-wp-theme-json.php):

     :where(.wp-site-blocks) > *            { margin-block-start: <blockGap> }
     :where(.wp-site-blocks) > :first-child { margin-block-start: 0 }

   Core wraps the selector in :where(), so it has zero specificity and any real selector
   beats it. No !important needed.

   Do NOT fix this by zeroing styles.spacing.blockGap in theme.json: that value is also the
   fallback gap for every block that does not set its own, so zeroing it collapses vertical
   rhythm inside groups site wide. The root layout gap cannot be expressed separately in
   theme.json, which is the entire reason this is CSS. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* `strong` and `b` carry no weight of their own: the HTML rendering spec gives them
   `font-weight: bolder`, which resolves against the PARENT's computed weight through a
   lookup table rather than landing on 700. Body copy here is 400, where bolder does resolve
   to 700, but the comp uses Work Sans at 300 in several places and any of those would render
   its bold runs at 400, which reads as no emphasis at all. State it.

   This has to be CSS: WP_Theme_JSON::ELEMENTS has no `strong` or `b`, so theme.json cannot
   express it. */
strong,
b {
	font-weight: 700;
}

/* The comp's focus ring. Two rings rather than one, because a single colour cannot serve
   both grounds: sage-dark measures 3.57:1 on the dark sections, below the 3:1 the ring needs
   against adjacent colour once the surrounding text is also low contrast. Sage is 7.37:1
   there. Recorded in ACCESSIBILITY.md. */
a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--sage-dark);
	outline-offset: 3px;
}

.has-deep-dark-background-color a:focus-visible,
.has-deep-dark-background-color button:focus-visible,
.has-deep-dark-background-color .wp-element-button:focus-visible {
	outline-color: var(--wp--preset--color--sage);
}

/* Anchor navigation. Every in-page link on this site is a jump link, so the smooth scroll is
   part of how the page reads, not decoration. Honour a reduced-motion preference. */
html {
	scroll-behavior: smooth;
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}
}

/* Links take the accent on hover only, never at rest (house standard). theme.json carries
   the light-ground case on core/paragraph. The dark sections need their own, because
   sage-dark on deep-dark is 3.57:1 and unreadable as a hover state. Keyed on the background
   class so it reaches any block given that colour rather than naming each section.

   `:not(.wp-element-button)` because a button is a link too and has its own states. */
.has-deep-dark-background-color a:not(.wp-element-button):hover,
.has-deep-dark-background-color a:not(.wp-element-button):focus {
	color: var(--wp--preset--color--sage);
}


/*--- Gravity Forms ---*/

/* -none- This site has no form: the comp's only contact routes are a mailto and a tel link.
   Gravity Forms is installed but deactivated. The house baseline for form styling is in the
   starter kit at intergetik-starter-theme-kit/assets/css/styles.css, so copy it back in if a
   form is ever added rather than writing it fresh. */


/*--- Components and features ---*/

/*--- Hero ---*/

/* The comp pins a location and service-times row to the bottom edge of a full-viewport hero,
   with the copy centred independently above it.

   The comp does that with `position: absolute`, and copying it directly does not survive.
   An absolutely positioned element contributes nothing to its parent's height, so the hero
   cannot know the row is there: measured across a width and height sweep, the copy ran through
   the row at 390x780, 601x700 and 1024x768. Reserving a fixed padding instead only moves the
   problem, because the amount needed depends on whether the row has wrapped, and any value big
   enough for the worst case pushes the copy visibly off centre everywhere else.

   So the row stays in normal flow and the copy takes `margin-block: auto`. An auto margin on a
   flex item absorbs exactly the free space that is left, which centres the copy in whatever the
   row does not use, and collapses to nothing when there is no free space rather than
   overlapping. The hero then grows past 100vh on a short screen, which is correct: min-height
   is a floor, not a ceiling.

   Cost, stated because it is a real difference from the comp: the copy centres in the hero
   minus the row rather than in the whole hero, so it sits about 37px high at desktop. That is
   imperceptible next to a collision.

   Stretching the inner container is what gives the column its full height. Do NOT reach for
   `position: static` on it, which is the obvious move and is wrong: core gives it `z-index: 1`
   and a static element ignores z-index, so the whole hero would paint UNDER the scrim span. */
.wp-block-cover.haven-hero .wp-block-cover__inner-container {
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

.wp-block-cover.haven-hero .wp-block-cover__inner-container > .wp-block-group:first-child {
	margin-block: auto;
}

/* The top padding is the minimum gap to the copy once the auto margins have collapsed. */
.haven-hero-meta {
	padding: 34px 40px;
}

@media ( max-width: 781px ) {

	.haven-hero-meta {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* The comp drops the hero mark from 150px to 120px on a phone, where it would otherwise eat a
   fifth of the viewport. core/site-logo writes its size as HTML width and height ATTRIBUTES
   rather than an inline style, so an ordinary rule reaches it. */
@media ( max-width: 600px ) {

	.haven-hero .custom-logo {
		height: 120px;
		width: auto;
	}
}

/*--- Service times ---*/

/* Hairline rules between the two service cards, and along the top and bottom of the pair.
   The right hand rule becomes a horizontal one once the columns stack, which is why none of
   this is on the blocks. 782px is the WordPress column stacking boundary, so the rules have
   to change on the same pixel core changes the layout. */
.haven-times-grid {
	border-top: 1px solid rgba( 247, 244, 236, 0.16 );
}

.haven-times-grid .wp-block-column {
	border-bottom: 1px solid rgba( 247, 244, 236, 0.16 );
	padding: 52px 8px 52px 0;
}

.haven-times-grid .wp-block-column:first-child {
	border-right: 1px solid rgba( 247, 244, 236, 0.16 );
	padding-right: 56px;
}

.haven-times-grid .wp-block-column:last-child {
	padding-left: 56px;
}

.haven-location {
	border-top: 1px solid rgba( 247, 244, 236, 0.16 );
	padding-top: 34px;
}

/* The venue name is the first line of a single link, so the whole row is one target. A block
   level `strong` inside an inline `a` is the only way to get that and two type treatments. */
.haven-location a strong {
	color: var(--wp--preset--color--cream);
	display: block;
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	margin-bottom: 6px;
}

@media ( max-width: 781px ) {

	.haven-times-grid .wp-block-column:first-child {
		border-right: 0;
		padding-right: 8px;
	}

	.haven-times-grid .wp-block-column:last-child {
		padding-left: 0;
	}

	.haven-location {
		padding-top: 26px;
	}
}

/*--- Beliefs ---*/

/* Four pillars over a rule, then a two column creed. Both are core grid layouts with a fixed
   `columnCount`, which the comp's 4-to-2 step requires: `minimumColumnWidth` resolves through
   auto-fill, and auto-fill with four items passes through a three track stage that leaves the
   fourth pillar alone on a second row, indented, which reads as broken.

   A fixed count needs a media query to collapse, and that works here only because layout CSS
   is emitted as a GENERATED CLASS rule rather than inline, unlike every other block support.
   The selector core generates is a single class, so ours has to be two to win the cascade
   without depending on stylesheet order. `!important` is not needed and is not used.

   The pillar rules sit on the right of each item and disappear on the last one. */
.haven-pillars {
	border-top: 1px solid rgba( 35, 39, 31, 0.12 );
}

.haven-pillars > .wp-block-group {
	border-right: 1px solid rgba( 35, 39, 31, 0.12 );
	padding: 30px 32px;
}

.haven-pillars > .wp-block-group:first-child {
	padding-left: 0;
}

.haven-pillars > .wp-block-group:last-child {
	border-right: 0;
	padding-right: 0;
}

.haven-creed {
	border-top: 1px solid rgba( 35, 39, 31, 0.12 );
}

.haven-creed > .wp-block-group {
	border-bottom: 1px solid rgba( 35, 39, 31, 0.12 );
	padding: 26px 40px 26px 0;
}

.haven-creed > .wp-block-group:nth-child( odd ) {
	border-right: 1px solid rgba( 35, 39, 31, 0.12 );
}

.haven-creed > .wp-block-group:nth-child( even ) {
	padding-left: 40px;
	padding-right: 0;
}

.haven-creed > .wp-block-group:nth-last-child( -n + 2 ) {
	border-bottom: 0;
}

/* The pillars collapse at 900px rather than the WordPress 781px boundary the rest of the page
   uses, and that is deliberate. Four tracks inside the 782px content box leaves 118px of text
   per pillar, which wraps "Support each other" onto three lines. 900px is the narrowest width
   where four still reads, so it is where the comp's four-to-two step goes. The creed's two
   columns are wide enough to hold to 781px, so they do.

   Two classes on the selector, to beat core's generated single-class layout rule regardless of
   the order the two stylesheets happen to print in. */
@media ( max-width: 900px ) {

	/* `row-gap: 0` with symmetric padding, rather than a 26px row gap and no top padding. The
	   gap only sits BETWEEN rows, so it gave 03 and 04 room under the first row's rule while
	   01 and 02 started hard against the group's own `border-top`. Letting each pillar own
	   26px above and below its text spaces every row against the rule above it, including the
	   first, and the distance between the rule and row two is unchanged. */
	.wp-block-group.haven-pillars {
		column-gap: 28px;
		grid-template-columns: 1fr 1fr;
		row-gap: 0;
	}

	.haven-pillars > .wp-block-group,
	.haven-pillars > .wp-block-group:first-child,
	.haven-pillars > .wp-block-group:last-child {
		border-bottom: 1px solid rgba( 35, 39, 31, 0.12 );
		border-right: 0;
		padding: 26px 0;
	}

	/* Two per row, so the whole last ROW loses its rule, not just the last item. Dropping it
	   from `:last-child` only would leave the bottom left pillar underlined and the bottom
	   right one not. */
	.haven-pillars > .wp-block-group:nth-last-child( -n + 2 ) {
		border-bottom: 0;
		padding-bottom: 0;
	}

}

/* The creed keeps two columns down to the WordPress boundary, then becomes one list. Once it
   is one column the "last row" is a single item, so the rule that was dropped from the last
   two comes back on all but the final one. */
@media ( max-width: 781px ) {

	.wp-block-group.haven-creed {
		grid-template-columns: 1fr;
	}

	.haven-creed > .wp-block-group,
	.haven-creed > .wp-block-group:nth-child( odd ),
	.haven-creed > .wp-block-group:nth-child( even ) {
		border-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.haven-creed > .wp-block-group:nth-last-child( -n + 2 ) {
		border-bottom: 1px solid rgba( 35, 39, 31, 0.12 );
	}

	.haven-creed > .wp-block-group:last-child {
		border-bottom: 0;
	}
}


/* The footer bottom bar keeps the logo and the venue on one row at every width, and lets only
   the copyright drop to a second line.

   `flex-wrap` places items at their natural size BEFORE any shrinking, and shrink then applies
   only within a line that is already settled. So a full measure paragraph next to a 79px logo
   claims its own line and never gets the chance to shrink, which is why all three stacked at
   390px. Giving the venue `flex-basis: 0` makes its hypothetical size zero, so it always fits
   beside the logo and takes the remaining width. */
@media ( max-width: 781px ) {

	/* The logo is the rigid element, so it is the one that gets pinned. */
	.haven-footer-bottom > .wp-block-site-logo {
		flex-shrink: 0;
	}

	/* First paragraph in the bar is the venue. */
	.haven-footer-bottom > p:first-of-type {
		flex: 1 1 0;
	}

	/* Last child is the copyright. A full basis is what forces the line break, rather than a
	   `<br>` or a second wrapper. */
	.haven-footer-bottom > :last-child {
		flex-basis: 100%;
	}
}

/*--- Block style variations (.is-style-*) ---*/

/* Every `.is-style-*` rule here must have a matching register_block_style() call in
   functions.php, and vice versa.

   Prefer styling a variation in theme.json under
   `styles.blocks.{block}.variations.{name}` instead. That is the modern mechanism and it
   keeps the CSS off pages that do not use the block. `ghost`, `eyebrow` and the typography
   half of `text-link` are done that way and deliberately have no rule here. Reach for this
   section only for what theme.json cannot express: pseudo elements, media queries,
   combinators.

   Note WordPress appends a per-instance class (`is-style-ghost--2`) alongside the plain one
   for variations containing nested styles such as `:hover`, and the emitted selectors use
   the numbered form. Both classes are on the element. That is normal. */

/* The underline lands on the <a> inside the paragraph, not on the paragraph, so this half
   cannot live in theme.json. `currentColor` is what lets it follow the hover colour without
   restating it per ground. */
.is-style-text-link a {
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
	text-decoration: none;
}

.is-style-text-link a:hover,
.is-style-text-link a:focus {
	text-decoration: none;
}

/* Social icons as outlined circles. Every declaration targets `.wp-social-link` descendants
   of the wrapper, which a theme.json block style variation cannot reach. */
.wp-block-social-links.is-style-outline-circle {
	gap: 16px;
}

.wp-block-social-links.is-style-outline-circle .wp-social-link {
	align-items: center;
	background-color: transparent;
	border: 1px solid rgba( 247, 244, 236, 0.3 );
	border-radius: 50%;
	color: var(--wp--preset--color--cream);
	display: flex;
	height: 52px;
	justify-content: center;
	margin: 0;
	padding: 0;
	transition: border-color 0.25s ease, color 0.25s ease;
	width: 52px;
}

.wp-block-social-links.is-style-outline-circle .wp-social-link svg {
	fill: currentColor;
	height: 24px;
	width: 24px;
}

.wp-block-social-links.is-style-outline-circle .wp-social-link:hover,
.wp-block-social-links.is-style-outline-circle .wp-social-link:focus-within {
	border-color: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--sage);
}


/*--- Custom block overrides ---*/
/* -none- */


/*--- Custom shortcode overrides ---*/
/* -none- */