/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* Open Atrium visual language (ROADMAP.md "Visual language"). Overrides Blocksy's
   Customizer palette and type variables; Customizer values stay untouched underneath. */
@font-face {
	font-family: "Young Serif";
	src: url("fonts/young-serif-400-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Russo One is the official logo font, self-hosted here and pinned on the site title below so it
   doesn't depend on a Customizer setting. */
@font-face {
	font-family: "Russo One";
	src: url("fonts/russo-one-400-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* "html" raises specificity: Blocksy prints its Customizer CSS after this file, so plain
   :root and h1 selectors would lose. */
html:root {
	--paletteColor1: #1e3a6e; /* links, focus: navy from the logo globe */
	--paletteColor2: #142950; /* link hover */
	--paletteColor3: #2b2622; /* body text, 14.0:1 on cream */
	--paletteColor4: #2b2622; /* headings */
	--paletteColor5: #dccbb3; /* borders */
	--paletteColor6: #f1e7d8; /* sand: tiles and cards */
	--paletteColor7: #fbf7f1; /* cream: page background */
	--atrium-secondary: #675d54; /* 6.0:1 on cream, 5.2:1 on sand */
	--atrium-red: #9e2a33; /* logo flame; actions only. White text 7.4:1 */
	--atrium-red-hover: #81222a;
	--atrium-heading-font: "Young Serif", "Palatino Linotype", Palatino, Georgia, serif;
	--buttonInitialColor: var(--atrium-red);
	--buttonHoverColor: var(--atrium-red-hover);
	--fontSize: 18px;
}

html [data-header*="type-1"] .ct-header [data-id="logo"] .site-title {
	--fontFamily: "Russo One", sans-serif;
	--fontWeight: 400;
	--fontSize: 25px;
}

html h1, html h2, html h3, html h4, html h5, html h6 {
	--fontFamily: var(--atrium-heading-font);
	--fontWeight: 400;
	--lineHeight: 1.2;
}

/* The footer stays dark (Customizer #050709). Its text uses the site text color, which Open
   Atrium made ink, so give the footer its own warm light text: 12.8:1 on #050709. */
html [data-footer] .ct-footer {
	--color: #d6cdc2;
	--linkHoverColor: #ffffff;
}

/* Broken Blocksy header element: "Item account not registered or doesn't have a view.php file." */
#header .ct-builder-no-item {
	display: none;
}

/* Contrast: these paragraphs carry the old body grey #828487 (3.6:1). Open Atrium body text, 14.0:1 on cream. */
.page-id-649 .entry-content > p.wp-block-paragraph,
.page-id-647 .entry-content p.wp-block-paragraph,
.page-id-647 .entry-content .stk-block-text__text {
	color: var(--paletteColor3) !important;
}

/* ---- Open Atrium homepage (page 649) and sticky phone bar ---- */
.atrium-section {
	max-width: 1100px;
	margin-inline: auto;
	padding-block: 48px;
}
.atrium-section h2 {
	margin-bottom: 20px;
}
/* Blocksy centers blocks nested in a group with auto margins, width: calc(100% - 60px) and a
   max-width (.entry-content [class*="_inner-container"] > :not(...)). These sections set their
   own width, so their children fill it. */
html .entry-content .atrium-section [class*="_inner-container"] > *,
html .entry-content .atrium-campaign [class*="_inner-container"] > * {
	margin-inline: 0;
	width: auto;
}
/* The grids use the full section; running text keeps a readable line length. */
html .entry-content .atrium-section [class*="_inner-container"] > .atrium-tiles,
html .entry-content .atrium-section [class*="_inner-container"] > .atrium-cards {
	max-width: none;
}
html .entry-content .atrium-section [class*="_inner-container"] > p:not(.alignwide),
html .entry-content .atrium-campaign [class*="_inner-container"] > p:not(.alignwide) {
	max-width: 68ch;
}

.atrium-hero {
	padding-block: 40px 32px;
}
.atrium-hero h1 {
	font-size: clamp(36px, 7vw, 58px);
	line-height: 1.08;
	margin-block: 8px 20px;
	text-wrap: balance;
}
.atrium-label {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--atrium-secondary) !important;
	margin: 0;
}
.atrium-times {
	font-size: 20px;
	line-height: 1.4;
	margin-bottom: 4px;
}
.atrium-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
	margin-top: 20px;
}
.atrium-actions .wp-element-button,
.atrium-bar a {
	background: var(--atrium-red);
	color: #fff;
	border-radius: 10px;
	min-height: 48px;
	padding: 12px 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	text-decoration: none;
}
.atrium-actions .wp-element-button:hover,
.atrium-bar a:hover {
	background: var(--atrium-red-hover);
	color: #fff;
}
.atrium-link {
	font-weight: 700;
	color: var(--paletteColor1);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The one hand-drawn underline, in logo red */
.atrium-underline {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 20 2, 35 9, 55 5 S 95 2, 118 6' fill='none' stroke='%239E2A33' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 0.22em;
	background-position: 0 88%;
}

.atrium-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.atrium-tile {
	display: grid;
	gap: 6px;
	align-content: start;
	background: var(--paletteColor6);
	border-radius: 16px;
	padding: 18px;
	color: var(--paletteColor3);
	text-decoration: none;
	transition: transform 150ms ease-out;
}
.atrium-tile:hover {
	transform: translateY(-2px);
	color: var(--paletteColor3);
}
.atrium-tile strong {
	font-family: var(--atrium-heading-font);
	font-weight: 400;
	font-size: 21px;
	line-height: 1.2;
}
.atrium-tile span {
	font-size: 16px;
	line-height: 1.45;
}
.atrium-tile--wide {
	grid-column: 1 / -1;
}
@media (max-width: 479px) {
	.atrium-tiles {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Groups render an inner container on this theme; the grid goes on it. */
.atrium-cards,
.atrium-cards > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}
.atrium-card {
	border: 1px solid var(--paletteColor5);
	border-radius: 16px;
	padding: 20px;
	background: var(--paletteColor7);
}
.atrium-card h3 {
	margin: 0 0 6px;
	font-size: 24px;
}
.atrium-card p {
	margin: 0;
}

/* Blocksy's quote rule is .wp-block-quote:not(...):not(...) with a navy border; match and beat it. */
html .wp-block-quote.atrium-verse:not(.has-text-align-center):not(.has-text-align-right) {
	--padding: 0 0 0 18px;
	border-left: 3px solid var(--atrium-red);
	margin-top: 24px;
	max-width: 60ch;
}
.atrium-verse p {
	font-family: var(--atrium-heading-font);
	font-size: 22px;
	line-height: 1.35;
}
.atrium-verse cite {
	font-style: normal;
	font-size: 15px;
	color: var(--atrium-secondary);
}

.atrium-campaign {
	background: var(--paletteColor6);
	border-radius: 16px;
	padding: 32px 24px;
	max-width: 1100px;
	margin-inline: auto;
}
.atrium-campaign h2 {
	margin-top: 0;
}

@media (min-width: 768px) {
	.atrium-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.atrium-tile--wide {
		grid-column: span 2;
	}
	.atrium-cards > .wp-block-group__inner-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.atrium-campaign {
		padding: 40px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.atrium-tile {
		transition: none;
	}
}

/* Photos (Unsplash, hotlinked): rounded, fixed 3:2 frame so nothing shifts while they load,
   credit line under each. The band under the first screen is wider and shorter on desktop. */
html .entry-content .atrium-section [class*="_inner-container"] > .atrium-photo:not(.alignwide) {
	max-width: 720px;
	margin-block: 24px;
}
html .entry-content .atrium-photo-band [class*="_inner-container"] > .atrium-photo:not(.alignwide) {
	max-width: 1080px;
	margin-block: 0;
}
.atrium-photo-band {
	padding-block: 0 8px;
}
.atrium-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 16px;
}
/* "html" beats Blocksy's .entry-content figcaption (centered, auto margins, capped width),
   which loads after this file. */
html .atrium-photo figcaption {
	margin: 6px 0 0;
	max-width: none;
	font-size: 13px;
	color: var(--atrium-secondary);
	text-align: left;
}
.atrium-photo figcaption a {
	color: inherit;
}
@media (min-width: 768px) {
	.atrium-photo-band .atrium-photo img {
		aspect-ratio: 16 / 7;
	}
}

/* Sticky Plan a Visit / Directions bar, phones only (markup from functions.php) */
.atrium-bar {
	display: none;
}
@media (max-width: 767px) {
	.atrium-bar {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 8px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
		background: var(--paletteColor7);
		border-top: 1px solid var(--paletteColor5);
	}
	.atrium-bar a.atrium-bar__alt {
		background: transparent;
		color: var(--paletteColor1);
		border: 2px solid var(--paletteColor1);
	}
	body {
		padding-bottom: 72px;
	}
	/* Nothing but text above the fold on phones: the homepage hero fills the screen between
	   the header (67px) and the sticky bar (79px plus the safe area), so the photo starts below. */
	.home .atrium-hero {
		min-height: calc(100svh - 146px - env(safe-area-inset-bottom, 0px));
	}
}

/* ---- A6 brand cleanup: leftovers from the old design (audit 2026-10-10) ---- */

/* Header rows were pure white (Customizer #ffffff / palette 8): cream, with a sand line. */
html [data-header*="type-1"] .ct-header [data-row] {
	background-color: var(--paletteColor7);
}
html [data-header*="type-1"] .ct-header [data-row*="bottom"] {
	--borderBottom: 1px solid var(--paletteColor5);
}
/* Header "Get Directions" was navy, 5 px, 34 px tall: an action, so logo red like every button. */
html [data-header*="type-1"] .ct-header [data-id="button"] {
	--buttonInitialColor: var(--atrium-red);
	--buttonHoverColor: var(--atrium-red-hover);
	--buttonBorderRadius: 10px;
}
html [data-header*="type-1"] .ct-header [data-id="button"] .ct-button {
	min-height: 46px;
}
/* Phone menu and search panels were white. The search panel also typed white text on it
   (Customizer --form-text-initial-color #ffffff), so typed words were invisible. Its submit
   button was a 40 px navy circle. */
html [data-header*="type-1"] #offcanvas {
	background-color: rgba(251, 247, 241, 0.98);
}
html [data-header*="type-1"] #search-modal {
	background-color: rgba(251, 247, 241, 0.97);
	--form-text-initial-color: var(--paletteColor3);
	--form-text-focus-color: var(--paletteColor3);
}
html #search-modal input {
	--form-field-border-initial-color: var(--paletteColor5);
}
html #search-modal form button {
	--search-button-background: var(--atrium-red);
	--search-button-hover-background: var(--atrium-red-hover);
	--icon-color: #fff;
	min-width: 46px;
	min-height: 46px;
}
/* Search and menu icons were 15-18 px targets on phones; same icons, 46 px hit area. */
.ct-header .ct-header-search,
.ct-header .ct-header-trigger {
	min-width: 46px;
	min-height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Page title (L1): opens like the homepage instead of Blocksy's 350 px centered band. Plain
   cream, no breadcrumb (a two-level site doesn't need one), the H1 left-aligned in the
   homepage H1 size and on the same width as the content below (Blocksy's own container
   variables, 88vw on phones, 90vw up to 1290 px on desktop). */
html [data-prefix="single_page"] .hero-section[data-type="type-2"] {
	--min-height: 0px;
	--container-padding: 0;
	min-height: 0;
	background-image: none;
	background-color: var(--paletteColor7);
}
html .hero-section[data-type="type-2"] .entry-header {
	width: var(--container-width);
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding: 48px 0 16px;
	text-align: left;
}
html .hero-section[data-type="type-2"] .entry-header .page-title {
	--fontSize: clamp(36px, 7vw, 58px);
	line-height: 1.08;
	margin: 0;
}
html .hero-section .ct-breadcrumbs {
	display: none;
}
/* About's Stackable columns put an 8 px margin on every column (the gap between them), and
   the single-column rows add 12 px of their own (!important from the block settings), so the
   text sat 8-12 px right of the page title. Outer edges flush with the title; the gap between
   side-by-side columns stays; stacked columns on phones are all flush. */
html .page-id-644 .stk-block.stk-block-column.stk-column:first-child > .stk-column-wrapper {
	margin-left: 0 !important;
}
html .page-id-644 .stk-block.stk-block-column.stk-column:last-child > .stk-column-wrapper {
	margin-right: 0 !important;
}
@media (max-width: 767px) {
	html .page-id-644 .stk-block.stk-block-column.stk-column > .stk-column-wrapper {
		margin-inline: 0 !important;
	}
}

/* Plain WordPress buttons (e.g. /events/) took core's grey square default. */
html .entry-content .wp-element-button,
html .entry-content .wp-block-button__link {
	background-color: var(--atrium-red);
	color: #fff;
	border-radius: 10px;
	min-height: 46px;
	padding: 12px 22px;
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	text-decoration: none;
}
html .entry-content .wp-element-button:hover,
html .entry-content .wp-block-button__link:hover {
	background-color: var(--atrium-red-hover);
	color: #fff;
}

/* Contact cards were white, 12 px, shadowed (Stackable inline !important rules): sand tiles. */
html .page-id-647 .stk-block-column.stk-block-background,
html .page-id-647 .stk-block-column.stk-block-background:before {
	background-color: var(--paletteColor6) !important;
	border-radius: 16px !important;
	box-shadow: none !important;
}
/* WPForms marks required fields in pure red; red is for actions only. */
html .wpforms-container .wpforms-required-label {
	color: var(--atrium-secondary);
}

/* About: pull quote in the heading serif (Customizer had Georgia 600), with a sand frame and
   quote mark instead of Blocksy's navy at 30% opacity. (The pastor photo is a circle from
   the image block's Rounded style; core sets it with zero specificity, so add no img radius here.) */
html .wp-block-pullquote p {
	--fontFamily: var(--atrium-heading-font);
	--fontWeight: 400;
}
html .wp-block-pullquote:not(.is-style-solid-color) {
	border-color: var(--paletteColor5);
}
html .wp-block-pullquote:not(.is-style-solid-color)::after {
	opacity: 1;
}
html .wp-block-pullquote blockquote::before {
	color: var(--paletteColor5);
}

/* ---- L3 / L4: one sand footer block (markup from functions.php); the old dark widget footer
   and the social strip above the header are hidden. Content lost from the old footer is in the
   LOG.md L3 entry. ---- */
html footer.ct-footer,
html [data-header*="type-1"] .ct-header [data-row="top"] {
	display: none;
}
.atrium-footer {
	background: var(--paletteColor6);
	color: var(--paletteColor3);
	border-top: 1px solid var(--paletteColor5);
	padding: 48px 20px 40px;
}
.atrium-footer__inner {
	max-width: 1100px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}
.atrium-footer__h {
	font-family: var(--atrium-heading-font);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.2;
	margin: 0 0 12px;
	color: var(--paletteColor4);
}
.atrium-footer p {
	margin: 0 0 12px;
	font-size: 17px;
	line-height: 1.5;
}
.atrium-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.atrium-footer a {
	color: var(--paletteColor1);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	display: inline-block;
	padding-block: 10px;
}
.atrium-footer a:hover {
	color: var(--paletteColor2);
}
.atrium-footer p:has(> a) {
	margin: 0;
}
.atrium-footer__inner .atrium-footer__legal {
	grid-column: 1 / -1;
	margin: 8px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--paletteColor5);
	font-size: 15px;
	color: var(--atrium-secondary);
}
@media (max-width: 767px) {
	.atrium-footer__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}