/*
Theme Name: ACTS Canada
Template: twentytwentyfive
Version: 0.3.24
Text Domain: acts-canada
*/

/* Supplementary CSS: only what theme.json cannot express (theme-selection §4).
   Form controls (labels, inputs): PT Serif 16px, boundary border neutral-700 (§4.2, §4.4, 2026-09-19 amendment). */
label {
	font-family: var(--wp--preset--font-family--pt-serif);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select {
	font-family: var(--wp--preset--font-family--pt-serif);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	color: var(--wp--preset--color--neutral-900);
	background: var(--wp--preset--color--neutral-100);
	border: 1px solid var(--wp--preset--color--neutral-700);
	border-radius: 2px;
	padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--xs);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--wp--preset--color--neutral-700);
	outline-offset: 2px;
}

/* Block style "CTA link": Nunito 400 15px uppercase (§4.2 CTA-styled link). Registered in functions.php. */
.is-style-cta-link,
.is-style-cta-link a {
	font-family: var(--wp--preset--font-family--nunito);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 400;
	text-transform: uppercase;
}

/* Header chrome. */
.acts-utility a { text-decoration: none; }
.acts-utility a:hover { text-decoration: underline; }
.acts-header .wp-block-navigation .current-menu-item > a,
.acts-header .wp-block-navigation a[aria-current="page"] {
	color: var(--wp--preset--color--brand-primary);
	text-decoration: underline;
	text-underline-offset: 6px;
}
.acts-footer { background: var(--wp--preset--color--neutral-100); }
.acts-footer .acts-footer-heading {
	font-family: var(--wp--preset--font-family--nunito);
	font-weight: 800;
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--xxs);
}
/* Search: compact box with inner padding; icon-only button has no background (as the source). */
.wp-block-search .wp-block-search__input {
	border-radius: 2px;
	min-height: 36px;
	padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--xs);
}
.wp-block-search .wp-block-search__button { border-radius: 2px; }
.wp-block-search .wp-block-search__button.has-icon {
	background: transparent;
	color: var(--wp--preset--color--neutral-900);
	border: 0;
	padding: var(--wp--preset--spacing--xxs);
	min-height: 36px;
}
.wp-block-search .wp-block-search__button.has-icon:hover,
.wp-block-search .wp-block-search__button.has-icon:focus-visible { color: var(--wp--preset--color--brand-primary); }
.acts-utility .wp-block-search { width: 200px; max-width: 100%; }
.acts-utility .wp-block-search .wp-block-search__inside-wrapper { min-height: 0; }

/* Primary nav hover: colour only, no underline (the active item keeps its underline above). */
.acts-header .wp-block-navigation a:hover { text-decoration: none; color: var(--wp--preset--color--brand-primary); }

/* Dropdown items: Nunito 400 16px, normal case (Review 1: lighter than the h3 weight); hover moves the text over and
   shows a bold arrow to its right (drawn as a mask so the stroke weight does not depend on a font glyph). */
.acts-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	position: relative;
	font-family: var(--wp--preset--font-family--nunito);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	text-decoration: none;
}
.acts-header .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	display: inline-block;
	transition: transform 0.15s ease;
}
.acts-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 16px;
	height: 16px;
	margin-left: var(--wp--preset--spacing--s);
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M8.5 3 13.5 8l-5 5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M8.5 3 13.5 8l-5 5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.acts-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.acts-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	text-decoration: none;
	color: var(--wp--preset--color--brand-primary);
}
.acts-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::after,
.acts-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible::after { opacity: 1; transform: none; }
.acts-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
.acts-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label { transform: translateX(var(--wp--preset--spacing--xxs)); }
@media (prefers-reduced-motion: reduce) {
	.acts-header .wp-block-navigation__submenu-container .wp-block-navigation-item__label,
	.acts-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { transition: none; }
}

/* Footer: links not underlined at rest (underline on hover and focus). */
.acts-footer a { text-decoration: none; }
.acts-footer a:hover,
.acts-footer a:focus-visible { text-decoration: underline; }
.acts-footer ul.acts-footer-links { list-style: none; margin: 0; padding: 0; }
.acts-footer .acts-footer-links li { margin: 0 0 var(--wp--preset--spacing--xxs); }
.wp-block-image img { height: auto; max-width: 100%; }

/* The last top-level item (About) sits at the right edge: open its panel leftward so it stays inside the page. */
@media (min-width: 600px) {
	.acts-header .wp-block-navigation__container > li.wp-block-navigation-item.has-child:last-child > ul.wp-block-navigation__submenu-container {
		left: auto;
		right: 0;
	}
}

/* Keep dropdown labels on one line. */
@media (min-width: 600px) {
	.acts-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { white-space: nowrap; }
}

/* Dropdown panels: neutral-100 fill (brand-primary on it is 5.47:1, neutral-900 13.44:1). */
.acts-header .wp-block-navigation__container .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--neutral-100);
}

/* Event and location singles (B4a). Retreat images stay at or under about 500 px wide in every context (the sources are that small). */
/* The retreat portraits (Christ, Madonna) show at one width on the retreat detail and sign-up pages whatever the file's own size (operator 2026-10-07:
   320 px on desktop, 260 px centred on mobile). Both source files are wider than that, so nothing is enlarged. */
.acts-event-image img, .acts-signup-portrait img { display: block; width: min(320px, 100%); max-width: 100%; height: auto; }
@media (max-width: 781px) { .acts-event-image img, .acts-signup-portrait img { width: min(260px, 100%); margin-inline: auto; } }
.acts-event-columns { gap: var(--wp--preset--spacing--l); }
.acts-signup-notes > :first-child { margin-top: 0; }
.acts-event-director h2 { margin-top: 0; } /* one form, on the left (operator 2026-10-07): the callback checkbox and Best Time to Call share a line */
.acts-director-form { max-width: 36rem; }
.acts-event-list { margin: 0 0 var(--wp--preset--spacing--s); padding-left: var(--wp--preset--spacing--m); }
.acts-past-events summary { cursor: pointer; font-family: var(--wp--preset--font-family--nunito); }
.acts-location-image img { width: auto; max-width: 100%; height: auto; }

/* Interior hero band (B4b): brand-primary field, white title (white on #a74141 is 6.2:1). Full width, content centred. */
.acts-hero {
	padding-top: var(--wp--preset--spacing--l); padding-bottom: var(--wp--preset--spacing--l); color: #fff;
	/* The Sacred Heart image (operator-supplied, translucent) sits at the left, as on the source. */
	background-image: linear-gradient(rgba(167, 65, 65, 0.6), rgba(167, 65, 65, 0.6)), url("assets/images/sacred-heart.png"); /* 60% brand-primary wash (operator): keeps the white title readable on every width */
	background-repeat: no-repeat, no-repeat; background-position: left center, left center; background-size: auto, auto 100%;
	min-height: 190px; display: flex; flex-direction: column; justify-content: center;
}
.acts-hero > * { width: 100%; }
.acts-hero h1, .acts-hero p, .acts-hero .wp-block-post-title { color: #fff; margin: 0; }
.acts-hero p { margin-top: var(--wp--preset--spacing--xxs); }
/* Home hero slideshow (B7 addendum, operator 2026-10-14; layout from the source home page, 1911 px wide: the red band is 380 px tall with the
   Sacred Heart image at its left, the slideshow is 860 x 450 px, right-aligned with the 1040 px content column and standing 10 px above and
   60 px below the band; Previous / Stop / Next sit at the image's bottom right, shown on hover). The band reuses the interior hero's wash and Sacred Heart image
   (sacred-heart.png is 1920 x 380: exactly the band). Below 782 px the image is full width and the band is a thin strip.
   Four slides share one grid cell (nothing shifts); without the script only the first shows. --acts-hero-fade is the crossfade (the
   script's dwell is 6 s). */
.acts-home-hero {
	--acts-hero-fade: 1s; color: #fff;
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 860px); align-items: start;
	padding: var(--wp--preset--spacing--xs) max(var(--wp--style--root--padding-left, 0px), calc((100% - 1040px) / 2 + var(--wp--style--root--padding-left, 0px))); /* the band is full width (alignfull); the content sits in the 1040 px column */
	background-image: linear-gradient(rgba(167, 65, 65, 0.6), rgba(167, 65, 65, 0.6)), url("assets/images/sacred-heart.png");
	background-repeat: no-repeat, no-repeat; background-position: left center, left center; background-size: auto, auto 100%;
}
.acts-home-hero > * { max-width: none; margin: 0; }
.acts-home-hero > .acts-hero-slide, .acts-home-hero > .acts-hero-controls { grid-column: 2; grid-row: 1; }
.acts-home-hero .acts-hero-slide a { display: block; }
.acts-home-hero .acts-hero-slide img { display: block; width: 100%; height: auto; aspect-ratio: 860 / 450; object-fit: cover; border-radius: 2px; }
.acts-home-hero:not(.is-enhanced) .acts-hero-slide:not(:first-of-type) { display: none; }
.acts-home-hero.is-enhanced > .acts-hero-slide { opacity: 0; transition: opacity 0s linear var(--acts-hero-fade); }
.acts-home-hero.is-enhanced > .acts-hero-slide.is-active { opacity: 1; z-index: 1; transition: opacity var(--acts-hero-fade) ease; }
@media (min-width: 782px) {
	.acts-home-hero { height: 380px; padding-top: 0; padding-bottom: 0; margin-top: 10px; margin-bottom: 70px; }
	.acts-home-hero > .acts-hero-slide { margin-top: -10px; }
	/* the image is 450 px tall and starts 10 px above the band: its bottom is 440 px below the band's top; the controls (64 px with padding) end there */
	.acts-home-hero > .acts-hero-controls { align-self: start; margin-top: 376px; }
}
/* Previous / Stop (Play) / Next: icon buttons at the image's bottom right (operator 2026-10-14), faint, and shown only while the pointer is over the
   hero or keyboard focus is inside it (always shown on a device that cannot hover, so a touch visitor can still reach the pause control, WCAG 2.2.2).
   Each is a 44 x 44 px target; a faint dark disc and a small shadow keep the white shapes visible on a bright picture. */
.acts-home-hero > .acts-hero-controls { margin-left: auto !important; margin-right: 0 !important; } /* the constrained layout centres its children with !important; these sit at the right */
.acts-home-hero .acts-hero-controls { z-index: 2; justify-self: end; align-self: end; display: flex; gap: 6px; padding: 10px 12px; opacity: 0; transition: opacity 0.2s ease; }
.acts-home-hero:hover .acts-hero-controls, .acts-home-hero:focus-within .acts-hero-controls { opacity: 1; }
@media (hover: none) { .acts-home-hero .acts-hero-controls { opacity: 1; } }
.acts-home-hero .acts-hero-button {
	display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(0, 0, 0, 0.18); color: rgba(255, 255, 255, 0.9); cursor: pointer;
}
.acts-home-hero .acts-hero-button svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.55)); }
.acts-home-hero .acts-hero-button svg .acts-fill { fill: currentColor; stroke: none; }
.acts-home-hero .acts-hero-button:hover { background: rgba(0, 0, 0, 0.4); color: #fff; }
.acts-home-hero .acts-hero-button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.6); }
@media (prefers-reduced-motion: reduce) {
	.acts-home-hero.is-enhanced > .acts-hero-slide, .acts-home-hero.is-enhanced > .acts-hero-slide.is-active { transition: none; }
}

/* Archive filter bar: "Upcoming | Past events" links and the Search & Filter select. */
.acts-filter-bar { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--s); align-items: center; justify-content: space-between; margin-bottom: var(--wp--preset--spacing--m); }
.acts-filter-when { display: flex; gap: var(--wp--preset--spacing--m); font-family: var(--wp--preset--font-family--nunito); font-size: var(--wp--preset--font-size--ui); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.acts-filter-when a { text-decoration: none; color: var(--wp--preset--color--neutral-900); padding-bottom: 4px; }
.acts-filter-when a[aria-current="page"] { color: var(--wp--preset--color--brand-primary); border-bottom: 2px solid var(--wp--preset--color--brand-primary); }
.acts-filter-when a:hover { color: var(--wp--preset--color--brand-primary); }
.searchandfilter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--xs); align-items: center; }
.searchandfilter ul li { margin: 0; padding: 0; }
.searchandfilter input[type="submit"] {
	font-family: var(--wp--preset--font-family--nunito); font-size: var(--wp--preset--font-size--ui); text-transform: uppercase;
	background: var(--wp--preset--color--brand-primary); color: #fff; border: 0; border-radius: 2px;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m); cursor: pointer;
}
.searchandfilter input[type="submit"]:hover { background: var(--wp--preset--color--neutral-800); }
.searchandfilter input[type="submit"]:focus-visible { outline: 2px solid var(--wp--preset--color--neutral-700); outline-offset: 2px; }

/* Cards (event and location archives, home). Event image treatment (operator, Review 2): "contain", the whole portrait on a
   neutral-100 tint in a 4:3 box. The alternatives stay available in the lab only: ?cards=tall (5:7 box, image fills it) and
   ?cards=crop (4:3 hard crop) via scripts/lab/mu-plugins/lab-card-options.php. Images are never enlarged past their own width. */
.acts-card { height: 100%; }
.acts-card .acts-card-image { margin: 0; }
.acts-card .acts-card-image img { display: block; width: 100%; height: auto; max-width: 100%; }
.acts-event-card .acts-card-image img { aspect-ratio: 4 / 3; object-fit: contain !important; background: var(--wp--preset--color--neutral-100); } /* the Featured Image block sets object-fit: cover inline */
body.acts-cards-tall .acts-event-card .acts-card-image img { aspect-ratio: 5 / 7; object-fit: cover !important; }
body.acts-cards-crop .acts-event-card .acts-card-image img { aspect-ratio: 4 / 3; object-fit: cover !important; }
.acts-location-card .acts-card-image img { aspect-ratio: 4 / 3; object-fit: cover; }
.acts-card .acts-card-title { margin: 0; font-family: var(--wp--preset--font-family--nunito); font-size: var(--wp--preset--font-size--large); font-weight: 800; text-transform: none; }
.acts-card .acts-card-title a { text-decoration: none; }
.acts-card .acts-card-title a:hover { text-decoration: underline; }
.acts-card .acts-card-dates { margin: 0; font-size: var(--wp--preset--font-size--small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--wp--preset--color--neutral-800); }
.acts-card .acts-card-meta { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--neutral-800); }
.acts-card .acts-card-type a { color: inherit; }
.acts-event-card .acts-card-dates, .acts-event-card .acts-card-title, .acts-event-card .acts-card-status { text-align: center; } /* operator 2026-10-06 */
.acts-card .acts-card-status:has(.acts-card-signup) { text-align: center; }
.acts-card .acts-card-signup { display: inline-block; } /* colours, type and hover come from the theme's button element styles (.wp-element-button) */
.acts-card .acts-card-status { margin: 0; font-family: var(--wp--preset--font-family--nunito); font-size: var(--wp--preset--font-size--small); font-weight: 800; text-transform: uppercase; color: var(--wp--preset--color--brand-primary); }
.acts-card p:empty { display: none; }
.acts-event-cards .wp-block-post-template, .acts-location-cards .wp-block-post-template { gap: var(--wp--preset--spacing--l) var(--wp--preset--spacing--m); }
@media (max-width: 781px) {
	.acts-event-cards .wp-block-post-template.is-layout-grid, .acts-location-cards .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; }
}
@media (min-width: 782px) and (max-width: 1000px) {
	.acts-event-cards .wp-block-post-template.is-layout-grid, .acts-location-cards .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Home callout and sign-up template. */
.acts-callout-columns { gap: var(--wp--preset--spacing--l); }
.acts-callout .wp-block-image img { height: auto; width: 100%; max-width: 100%; }
.acts-callout figcaption { text-align: center; color: var(--wp--preset--color--neutral-800); }
.acts-signup-columns, .acts-page-columns { gap: var(--wp--preset--spacing--l); }
.acts-page-columns .wp-block-image img { height: auto; max-width: 100%; }
.acts-page-columns .wp-block-image figcaption { color: var(--wp--preset--color--neutral-800); }
@media (max-width: 781px) { .acts-signup-portrait { order: -1; } }

/* Templates with a full-width band keep the main group at 0 side padding (so the band reaches the edges); their content sections
   restore the root gutter themselves. */
.acts-archive-main, .acts-coming-up-section, .acts-callout { padding-left: var(--wp--preset--spacing--s); padding-right: var(--wp--preset--spacing--s); }

/* Forms (B6a): Fluent Forms uses the site's tokens; the submit button is the brand button, errors keep contrast. */
.frm-fluent-form .ff-el-input--label label { color: var(--wp--preset--color--neutral-900); font-weight: 700; }
/* Operator 2026-10-07: typed text and placeholders in the body font (PT Serif); the consent paragraph is regular weight (the labels and the other option labels stay bold). */
.frm-fluent-form .ff-el-form-control { font-family: var(--wp--preset--font-family--pt-serif); }
.frm-fluent-form .ff_t_c { font-weight: 400; }
.frm-fluent-form .ff-el-is-required.asterisk-right label::after { color: var(--wp--preset--color--brand-primary); }
.frm-fluent-form .ff-el-section-title { color: var(--wp--preset--color--neutral-900); margin-top: var(--wp--preset--spacing--m); }
.frm-fluent-form .ff-btn-submit,
.frm-fluent-form .ff-btn-submit.ff_btn_style {
	background: var(--wp--preset--color--brand-primary) !important; color: #fff !important; opacity: 1 !important; transition: none !important; border: 0; border-radius: 2px;
	padding: 0.7em 1.8em; font-family: var(--wp--preset--font-family--nunito, inherit); font-weight: 800; text-transform: uppercase; cursor: pointer;
}
.frm-fluent-form .ff-btn-submit:hover,
.frm-fluent-form .ff-btn-submit:focus-visible { background: var(--wp--preset--color--neutral-900) !important; color: #fff !important; }
.frm-fluent-form .ff-el-is-error .text-danger,
.frm-fluent-form .error.text-danger,
.frm-fluent-form .ff-el-is-error .ff_t_c,
.frm-fluent-form .ff-el-is-error .ff_t_c a,
.frm-fluent-form .ff-el-is-error .ff-el-form-check-label { color: #a30000 !important; }
.frm-fluent-form .ff-message-success { background: var(--wp--preset--color--neutral-100); border: 1px solid var(--wp--preset--color--neutral-700); color: var(--wp--preset--color--neutral-900); padding: var(--wp--preset--spacing--s); }
.acts-retreat-notes { background: var(--wp--preset--color--neutral-100); padding: var(--wp--preset--spacing--s); margin-bottom: var(--wp--preset--spacing--s); }
.acts-retreat-notes p { margin: 0 0 0.6em; }
.acts-retreat-notes > :last-child { margin-bottom: 0; }
.acts-form-notice { background: var(--wp--preset--color--neutral-100); border-left: 4px solid var(--wp--preset--color--brand-primary); padding: var(--wp--preset--spacing--s); }
.acts-form-failure { color: #a30000; font-weight: 700; margin: 0 0 var(--wp--preset--spacing--s); }
.ff-message-success .acts-form-success-buttons { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--s); margin-top: var(--wp--preset--spacing--s); }
.ff-message-success .wp-element-button { background: var(--wp--preset--color--brand-primary); color: #fff; padding: 0.7em 1.8em; border-radius: 2px; text-decoration: none; font-weight: 800; text-transform: uppercase; }
.ff-message-success .wp-element-button:hover, .ff-message-success .wp-element-button:focus-visible { background: var(--wp--preset--color--neutral-900); }