/* City of Grace — supporting styles.
   Design tokens live in theme.json. This file carries what theme.json cannot
   express: the sticky header, hero scrim, card grid behaviour, and focus. */

/* ---------- Base ---------- */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 4px;
}

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: .85rem 1.25rem;
	background: var(--wp--preset--color--primary); color: var(--wp--preset--color--contrast); font-weight: 900; }
.skip-link:focus { left: 0; }

/* ---------- Header ---------- */

.cog-header { position: sticky; top: 0; z-index: 50; }
.cog-header .wp-block-site-logo img { height: 62px; width: auto; max-width: 245px; display: block; }

.cog-header .wp-block-navigation { font-weight: 700; font-size: 14px; }

/* The block library colours nav links from the global link colour, which is
   orange on white. Inside the dark header they must be white, so these rules
   target the anchor and its content class directly. */
.cog-header .wp-block-navigation a,
.cog-header .wp-block-navigation a:visited,
.cog-header .wp-block-navigation .wp-block-navigation-item__content,
.cog-header .wp-block-navigation .wp-block-navigation-item__content:visited {
	color: #fff;
	text-decoration: none;
	padding-block: 4px;
	border-bottom: 2px solid transparent;
	font-weight: 700;
}

.cog-header .wp-block-navigation a:hover,
.cog-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.cog-header .wp-block-navigation .current-menu-item > a {
	color: #fff;
	border-bottom-color: var(--wp--preset--color--primary);
}

/* The mobile overlay reverses onto a dark panel, so keep links readable there. */
.cog-header .wp-block-navigation__responsive-container.is-menu-open a,
.cog-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #fff;
	font-size: 1.25rem;
}
.cog-header .wp-block-navigation__responsive-container-open,
.cog-header .wp-block-navigation__responsive-container-close { color: #fff; }

.cog-give-button .wp-block-button__link { white-space: nowrap; }

/* ---------- Hero ---------- */

.cog-hero { min-height: 660px; }

.cog-hero .wp-block-cover__inner-container { width: 100%; }
.cog-hero-inner { max-width: 760px; margin-inline: 0; }
.cog-hero .wp-block-buttons { gap: 14px; }

/* ---------- Cards ---------- */

.cog-grid { gap: 20px; }

.cog-card {
	background: #fff;
	border-radius: 24px;
	padding: 30px;
	box-shadow: 0 12px 35px rgba(15,24,32,.08);
	border-top: 5px solid var(--wp--preset--color--primary);
	transition: transform 180ms ease, box-shadow 180ms ease;
}
.cog-card:hover { transform: translateY(-4px); box-shadow: 0 18px 45px rgba(15,24,32,.14); }
.cog-card h3 { font-size: 24px; margin: 8px 0 12px; }
.cog-card p { margin-block: 0 12px; }
.cog-card a { color: var(--wp--preset--color--primary-deep); font-weight: 900; }

/* ---------- Visit split ---------- */

.cog-visit { min-height: 480px; gap: 0 !important; }
.cog-visit-img {
	background: linear-gradient(200deg, #1B2530 0%, #3A2E20 55%, #D97708 100%);
	min-height: 480px;
}

/* ---------- Pastors ---------- */

.cog-pastors-photo { width: min(680px, 100%); margin-inline: auto; overflow: hidden; border-radius: 24px; box-shadow: 0 18px 45px rgba(10,18,25,.18); }
.cog-pastors-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

/* ---------- Footer ---------- */

.cog-footer .wp-block-columns { gap: 2.5rem; }
.cog-footer .wp-block-column { min-width: 180px; }

/* Long addresses must break at spaces, never mid-word — an email split across
   two lines reads as a typo. */
.cog-footer p { overflow-wrap: break-word; }
.cog-footer a[href^="mailto:"] { overflow-wrap: anywhere; }

.cog-footer a { color: #fff; text-decoration: none; font-weight: 400; opacity: .85; }
.cog-footer a:hover { opacity: 1; text-decoration: underline; }
.cog-footer strong { color: var(--wp--preset--color--primary); }

/* ---------- Content ---------- */

.entry-content > * + * { margin-top: 1.5rem; }
.entry-content p { max-width: 68ch; }
.wp-block-post-title a { text-decoration: none; color: inherit; }
.wp-block-post-title a:hover { color: var(--wp--preset--color--primary-deep); }

/* ---------- Responsive ---------- */

/* Keep the four cards side by side until the layout genuinely needs to break,
   rather than at the WordPress default of 781px. */
@media (min-width: 901px) {
	.cog-grid { flex-wrap: nowrap !important; }
	.cog-grid > .wp-block-column { flex-basis: 25% !important; }
}

@media (max-width: 900px) {
	.cog-grid { flex-wrap: wrap !important; }
	.cog-grid > .wp-block-column { flex-basis: calc(50% - 10px) !important; flex-grow: 0; }
	.cog-visit { flex-wrap: wrap !important; }
	.cog-visit > .wp-block-column { flex-basis: 100% !important; }
	.cog-visit-img { min-height: 320px; }
}

@media (max-width: 600px) {
	.cog-grid > .wp-block-column { flex-basis: 100% !important; }
	.cog-hero { min-height: 600px; }
	.cog-header .wp-block-site-logo img { height: 46px; }
}

/* ---------- Print ---------- */

@media print {
	.cog-header, .cog-footer, .cog-hero, .cog-bottom { display: none !important; }
	body { color: #000; background: #fff; }
}

/* ---------------------------------------------------------------------------
   Interior pages — hero, soft cards, dark panel, orange band.
   Shared by Plan Your Visit, Prayer, Serve and Give.
   --------------------------------------------------------------------------- */

.cog-page-hero { min-height: 520px; display: flex; align-items: center; }
.cog-page-hero .wp-block-cover__inner-container { width: 100%; }

/* The scrim applies only to heroes that carry a photograph. Gradient heroes
   paint their own background, so forcing a scrim over them would double it. */
/* The cover block's own scrim is switched off. Darkening happens once, in the
   ::after veil below, so the two cannot compound. Stacking them put roughly
   96% darkness over the photographs. */
.cog-page-hero--photo .wp-block-cover__background,
.cog-hero--photo .wp-block-cover__background {
	background: transparent !important;
	opacity: 0 !important;
}

.cog-card-soft {
	background: #F4F5F6;
	border-radius: 22px;
	padding: 28px;
	border-top: 5px solid var(--wp--preset--color--primary);
}
.cog-card-soft h3 { font-size: 22px; margin: 8px 0 10px; }
.cog-card-soft p { margin: 0; }

.cog-grid-soft { gap: 20px; }

.cog-panel {
	border-radius: 26px;
	padding: 40px;
}
.cog-panel h3 { color: #fff; font-size: 30px; margin: 0 0 12px; }
.cog-panel p { color: #D8E0E6; }
.cog-panel a { color: var(--wp--preset--color--primary-light); font-weight: 900; }
.cog-panel .wp-block-button__link { color: var(--wp--preset--color--contrast); }

.cog-band .wp-block-heading { margin-top: 0; }

/* A notice marking work still to be wired up. Visible in the editor and on the
   page so an unfinished section is never mistaken for a finished one. */
.cog-todo {
	border: 2px dashed var(--wp--preset--color--primary-deep);
	border-radius: 14px;
	padding: 20px 24px;
	background: #FFF8F0;
	color: #7A4A08;
	font-size: 0.95rem;
}
.cog-todo strong { color: var(--wp--preset--color--primary-deep); }

@media (min-width: 901px) {
	.cog-grid-soft { flex-wrap: nowrap !important; }
}
@media (max-width: 900px) {
	.cog-grid-soft { flex-wrap: wrap !important; }
	.cog-grid-soft > .wp-block-column { flex-basis: calc(50% - 10px) !important; flex-grow: 0; }
}
@media (max-width: 760px) {
	.cog-grid-soft > .wp-block-column { flex-basis: 100% !important; }
	.cog-page-hero { min-height: 440px; }
	.cog-panel { padding: 28px; }
}

/* ---------------------------------------------------------------------------
   Hero legibility veil.
   The brand gradients run from charcoal to orange. White text over the orange
   end falls near 3:1, under the 4.5:1 needed for body copy, so a dark veil sits
   between the background and the text. This holds whatever background is used
   later — gradient or photograph — so contrast cannot silently regress.
   --------------------------------------------------------------------------- */

.cog-hero, .cog-page-hero { position: relative; }

/* Sized from the photographs themselves. The brightest image needs 0.60 for
   white text at 6:1; the darkest needs 0.33. These gradients stay at or above
   0.64 wherever text sits and open up elsewhere so the picture is visible. */
.cog-hero::after,
.cog-page-hero--left::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(8,13,18,.74) 0%, rgba(8,13,18,.66) 50%, rgba(8,13,18,.30) 100%);
}

.cog-page-hero--center::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(8,13,18,.64) 0%, rgba(8,13,18,.68) 50%, rgba(8,13,18,.64) 100%);
}

.cog-hero > .wp-block-cover__inner-container,
.cog-page-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* The hero photograph's subject sits left of centre, which is where the
   headline sits. Shifting the framing right keeps the two from fighting. */
.cog-hero--photo img.wp-block-cover__image-background { object-position: center center; }

/* Compact header band for pages without a hero of their own. */
.cog-page-hero--compact { min-height: 300px; }
.cog-page-hero--compact .wp-block-post-title { margin: 0; }
@media (max-width: 760px) { .cog-page-hero--compact { min-height: 220px; } }

/* ---------------------------------------------------------------------------
   Buttons must read as buttons.
   A button is a filled shape that contrasts with whatever sits behind it.
   On the orange band an orange button measured 1.0:1 against its background —
   the text was readable but the button itself was invisible. These rules give
   every call to action a fill that differs from its surface.
   --------------------------------------------------------------------------- */

/* On the orange band: solid ink. */
.cog-band .wp-block-button__link,
.cog-band .wp-element-button,
.cog-bottom .wp-block-button__link,
.cog-bottom .wp-element-button {
	background-color: var(--wp--preset--color--contrast) !important;
	background-image: none !important;
	color: #FFFFFF !important;
	border: 2px solid var(--wp--preset--color--contrast) !important;
}
.cog-band .wp-block-button__link:hover,
.cog-band .wp-element-button:hover,
.cog-bottom .wp-block-button__link:hover,
.cog-bottom .wp-element-button:hover {
	background-color: var(--wp--preset--color--contrast-deep) !important;
	border-color: var(--wp--preset--color--contrast-deep) !important;
	color: #FFFFFF !important;
}

/* Secondary action over a dark photograph: solid white, not a hairline outline. */
.cog-hero .is-style-outline .wp-block-button__link,
.cog-page-hero .is-style-outline .wp-block-button__link,
.cog-hero .cog-btn-alt .wp-block-button__link,
.cog-page-hero .cog-btn-alt .wp-block-button__link {
	background-color: #FFFFFF !important;
	background-image: none !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 2px solid #FFFFFF !important;
}
.cog-hero .is-style-outline .wp-block-button__link:hover,
.cog-page-hero .is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* Card calls to action are buttons, not underlined text. */
.cog-card .wp-block-button__link,
.cog-card-soft .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	font-size: 0.875rem;
	padding: 11px 20px;
	/* Brand orange on a white card is only 2.21:1, below the 3:1 a control's
	   edge needs to be discernible. The deeper orange border supplies that
	   without altering the brand fill. */
	border: 2px solid var(--wp--preset--color--primary-deep);
}
.cog-card .wp-block-button__link:hover,
.cog-card-soft .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-deep);
	border-color: var(--wp--preset--color--primary-deep);
	color: #FFFFFF;
}
.cog-card .wp-block-buttons,
.cog-card-soft .wp-block-buttons { margin-top: 18px; }

/* ---------------------------------------------------------------------------
   Sermon video embeds
   --------------------------------------------------------------------------- */

.cog-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 12px 35px rgba(15,24,32,.10);
}
.cog-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cog-video-title { font-weight: 800; margin: 14px 0 0; font-size: 1.125rem; }

/* ---------------------------------------------------------------------------
   Social links
   --------------------------------------------------------------------------- */

.cog-social { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1rem; }
.cog-social a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.28);
	color: #fff !important;
	font-weight: 700;
	font-size: 0.875rem;
	opacity: 1 !important;
	text-decoration: none !important;
}
.cog-social a:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast) !important;
}
.cog-social svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* ---------------------------------------------------------------------------
   Instagram strip (News page)
   The feed plugin renders its own grid inside .cog-social-strip. These rules
   only set the band and round the tiles, so a third-party grid still reads as
   part of the site rather than an embed dropped on top of it.
   --------------------------------------------------------------------------- */
.cog-social-strip { text-align: center; }
.cog-social-strip .cog-todo { text-align: left; max-width: 46rem; margin-inline: auto; }
.cog-social-strip .cog-form-button {
	display: flex;
	justify-content: center;
	margin-top: 1.25rem;
}

/* Matches the verified card button: 8.1:1 ink on orange, and a primary-deep
   edge at 3.42:1 against the surface behind it. */
.cog-social-strip .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	border: 2px solid var(--wp--preset--color--primary-deep);
}
.cog-social-strip .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-deep);
	border-color: var(--wp--preset--color--primary-deep);
	color: #FFFFFF;
}

/* Smash Balloon and Spotlight both emit square tiles with sharp corners. */
.cog-social-strip #sb_instagram .sbi_photo,
.cog-social-strip #sb_instagram .sbi_photo_wrap,
.cog-social-strip .spotlight-media,
.cog-social-strip .spotlight-item {
	border-radius: 14px;
	overflow: hidden;
}
.cog-social-strip #sb_instagram { padding-bottom: 0 !important; }

/* ---------------------------------------------------------------------------
   Series box, appended to any post in a series category.
   --------------------------------------------------------------------------- */
.cog-series {
	margin-top: 3rem;
	padding: 28px 30px;
	background: var(--wp--preset--color--surface);
	border-radius: 20px;
	border-left: 5px solid var(--wp--preset--color--primary);
}
.cog-series .cog-kicker { margin: 0 0 4px; }
.cog-series-title { margin: 0 0 6px; font-size: 1.5rem; }
.cog-series-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.cog-series-title a:hover { text-decoration: underline; }
.cog-series-desc {
	margin: 0 0 18px;
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
}
.cog-series-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.cog-series-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	padding: 10px 0;
	border-top: 1px solid rgba(16,24,32,.10);
}
.cog-series-list li:first-child { border-top: 0; }
.cog-series-n {
	flex: none;
	min-width: 4.5rem;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-deep);
}
.cog-series-t { color: var(--wp--preset--color--body); font-weight: 700; }
a.cog-series-t { color: var(--wp--preset--color--contrast); }
a.cog-series-t:hover { color: var(--wp--preset--color--primary-deep); }
.cog-series-list .is-current .cog-series-t { color: var(--wp--preset--color--contrast); }
/* Ink rather than orange, matching the band buttons. White on primary-deep
   measured 3.42:1, short of the 4.5:1 this 11.5px label needs; this is
   17.89:1. */
.cog-series-here {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #FFFFFF;
	background: var(--wp--preset--color--contrast);
	border-radius: 999px;
	padding: 3px 10px;
}
@media (max-width: 600px) {
	.cog-series { padding: 22px; }
	.cog-series-n { min-width: 100%; }
}

/* Scripture permission notice in the footer. Dimmer than the nav links but
   still readable; measured at 4.6:1 on the footer's dark field. */
.cog-scripture-credit { color: #93A3B0; max-width: 62ch; }

/* Scripture quotations inside post content. */
.entry-content .cog-scripture {
	border-left: 4px solid var(--wp--preset--color--primary);
	padding: 4px 0 4px 22px;
	margin: 1.9rem 0;
}
.entry-content .cog-scripture p {
	font-size: 1.15rem;
	line-height: 1.65;
	font-style: normal;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}
.entry-content .cog-scripture cite {
	display: block;
	margin-top: 10px;
	font-style: normal;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-deep);
}

/* ---------------------------------------------------------------------------
   Comments
   --------------------------------------------------------------------------- */
.cog-comments { border-top: 1px solid rgba(16,24,32,.12); padding-top: var(--wp--preset--spacing--50); }
.cog-comment {
	padding: 20px 22px;
	background: var(--wp--preset--color--surface);
	border-radius: 16px;
	margin-bottom: 14px;
}
.cog-comment .wp-block-avatar img { border-radius: 999px; }
.cog-comment .wp-block-comment-content p { margin: 0 0 .6rem; }
.cog-comment .wp-block-comment-content p:last-child { margin-bottom: 0; }
.cog-comments .wp-block-post-comments-form { margin-top: var(--wp--preset--spacing--50); }
.cog-comments .comment-form textarea,
.cog-comments .comment-form input[type="text"],
.cog-comments .comment-form input[type="email"],
.cog-comments .comment-form input[type="url"] {
	width: 100%;
	border: 2px solid rgba(16,24,32,.18);
	border-radius: 12px;
	padding: 12px 14px;
	font: inherit;
	background: #fff;
	color: var(--wp--preset--color--body);
}
.cog-comments .comment-form textarea:focus,
.cog-comments .comment-form input:focus {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--primary-deep);
}
.cog-comments .comment-form label { font-weight: 700; font-size: .9rem; display: block; margin-bottom: 5px; }
.cog-comments .comment-form p { margin-bottom: 1rem; }
.cog-comments .comment-form .form-submit input[type="submit"] {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	border: 2px solid var(--wp--preset--color--primary-deep);
	border-radius: 999px;
	padding: 12px 26px;
	font-weight: 800;
	cursor: pointer;
}
.cog-comments .comment-form .form-submit input[type="submit"]:hover {
	background: var(--wp--preset--color--primary-deep);
	border-color: var(--wp--preset--color--primary-deep);
	color: #fff;
}
.cog-comment-note {
	font-size: .85rem;
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--surface);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 0 10px 10px 0;
	padding: 12px 16px;
	margin: 0 0 1.2rem;
}