/*
Theme Name:   Hello Chapter
Template:     hello-elementor
Description:  SAR chapter child theme. Colours and fonts come from Elementor ▸ Site Settings (the kit); this file only styles the pieces Elementor free has no widget for — the menu, the brand block, the events list — and dresses The Events Calendar, WooCommerce and Fluent Forms in the same kit tokens.
Version:      1.0.0
Text Domain:  hello-chapter
*/

/* Every colour below is an Elementor global, so changing Site Settings re-themes all of it. */
:root {
	--ch-primary: var(--e-global-color-primary, #1F3A8A);
	--ch-secondary: var(--e-global-color-secondary, #C9A45C);
	--ch-text: var(--e-global-color-text, #1E2430);
	--ch-accent: var(--e-global-color-accent, #BF1E2E);
	--ch-ink: var(--e-global-color-chink, #101A33);
	--ch-parchment: var(--e-global-color-chparch, #FBF3EA);
	--ch-line: var(--e-global-color-chline, #EAD8C6);
	--ch-muted: var(--e-global-color-chmuted, #5A6372);
	--ch-radius: 10px;
	--ch-heading-font: var(--e-global-typography-primary-font-family, "Alegreya SC"), Georgia, serif;
	--ch-body-font: var(--e-global-typography-text-font-family, "Alegreya Sans"), system-ui, sans-serif;
}

body.hello-chapter { color: var(--ch-text); background: #fff; }
.hello-chapter a { color: var(--ch-primary); }
.hello-chapter :focus-visible { outline: 3px solid var(--ch-secondary); outline-offset: 2px; }

/* ---------- Brand block ---------- */
.chapter-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.chapter-brand__logo { width: 64px; height: 64px; object-fit: contain; flex: none; }
.chapter-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.chapter-brand__name { font-family: var(--ch-heading-font); font-weight: 700; font-size: 1.2rem; color: var(--ch-primary); }
.chapter-brand__tagline { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ch-muted); margin-top: 4px; }
.chapter-brand--footer .chapter-brand__name { color: #fff; }
.chapter-brand--footer .chapter-brand__tagline { color: var(--ch-secondary); }
@media (max-width: 767px) {
	.chapter-brand__logo { width: 48px; height: 48px; }
	.chapter-brand__name { font-size: 1.02rem; }
	.chapter-brand__tagline { display: none; }
}

/* ---------- Menus ---------- */
.chapter-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.chapter-nav__list > li { position: relative; }
.chapter-nav__list a { display: block; padding: 10px 12px; border-radius: 6px; font-weight: 600; text-decoration: none; color: var(--ch-ink); }
.chapter-nav__list a:hover,
.chapter-nav__list .current-menu-item > a,
.chapter-nav__list .current_page_item > a { color: var(--ch-primary); background: var(--ch-parchment); }
.chapter-nav__list .sub-menu { list-style: none; margin: 0; padding: 8px; position: absolute; left: 0; top: 100%; min-width: 220px; background: #fff; border: 1px solid var(--ch-line); border-radius: var(--ch-radius); box-shadow: 0 12px 30px rgba(15, 27, 61, .12); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .15s ease; z-index: 50; }
.chapter-nav__list li:hover > .sub-menu,
.chapter-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.chapter-nav__toggle { display: none; }

.chapter-nav--small .chapter-nav__list a { padding: 4px 10px; font-size: .88rem; font-weight: 500; color: rgba(255, 255, 255, .88); background: none; }
.chapter-nav--small .chapter-nav__list a:hover { color: #fff; background: none; text-decoration: underline; }

@media (max-width: 1024px) {
	.chapter-nav__toggle { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--ch-line); border-radius: 8px; background: #fff; color: var(--ch-ink); font-weight: 600; cursor: pointer; }
	.chapter-nav__bars, .chapter-nav__bars::before, .chapter-nav__bars::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; content: ""; }
	.chapter-nav__bars::before { position: absolute; top: -6px; }
	.chapter-nav__bars::after { position: absolute; top: 6px; }
	.chapter-nav__panel { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--ch-line); box-shadow: 0 16px 30px rgba(15, 27, 61, .12); padding: 12px 16px 20px; z-index: 60; }
	.chapter-nav.is-open .chapter-nav__panel { display: block; }
	.chapter-nav__panel .chapter-nav__list { flex-direction: column; align-items: stretch; }
	.chapter-nav__panel .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 14px; }
	.chapter-header .e-con { position: static; }
	.chapter-header { position: relative; }
}

/* ---------- Header / footer frames ---------- */
.chapter-header { position: relative; z-index: 40; }
.chapter-footer a { color: rgba(255, 255, 255, .86); text-decoration: none; }
.chapter-footer a:hover { color: #fff; text-decoration: underline; }
.chapter-footer .elementor-icon-list-text { color: rgba(255, 255, 255, .86); }

/* ---------- Upcoming events cards ---------- */
.chapter-events { display: grid; gap: 14px; }
.chapter-event { display: flex; gap: 18px; align-items: center; padding: 16px 18px; background: #fff; border: 1px solid var(--ch-line); border-radius: var(--ch-radius); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.chapter-event:hover { border-color: var(--ch-secondary); box-shadow: 0 10px 24px rgba(15, 27, 61, .08); transform: translateY(-1px); }
.chapter-event__date { flex: none; width: 64px; height: 64px; border-radius: 8px; background: var(--ch-primary); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.chapter-event__month { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ch-secondary); font-weight: 700; }
.chapter-event__day { font-family: var(--ch-heading-font); font-size: 1.6rem; font-weight: 700; margin-top: 4px; }
.chapter-event__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chapter-event__title { font-family: var(--ch-heading-font); font-weight: 700; color: var(--ch-ink); font-size: 1.05rem; }
.chapter-event__meta { color: var(--ch-muted); font-size: .92rem; }
.chapter-events__empty { color: var(--ch-muted); font-style: italic; }
.chapter-events--grid .chapter-events { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ---------- Cards built in Elementor (class: chapter-card) ---------- */
.chapter-card { transition: box-shadow .2s, transform .2s; }
.chapter-card:hover { box-shadow: 0 16px 36px rgba(15, 27, 61, .10); transform: translateY(-2px); }
.chapter-eyebrow .elementor-heading-title { letter-spacing: .16em; text-transform: uppercase; }

/* ---------- The Events Calendar ---------- */
.hello-chapter .tribe-common { --tec-color-accent-primary: var(--ch-primary); --tec-color-accent-primary-hover: var(--ch-ink); --tec-color-button-primary: var(--ch-primary); --tec-color-link-accent: var(--ch-primary); --tec-font-family-sans-serif: var(--ch-body-font); }
.hello-chapter .tribe-events .tribe-events-calendar-list__event-title,
.hello-chapter .tribe-events-single-event-title,
.hello-chapter .tribe-events .tribe-events-c-top-bar__datepicker-desktop { font-family: var(--ch-heading-font); }
.hello-chapter .tribe-events-pg-template,
.hello-chapter #tribe-events-pg-template { max-width: 1200px; padding: 48px 20px 72px; }

/* ---------- WooCommerce ---------- */
.hello-chapter.woocommerce-page .site-main,
.hello-chapter.woocommerce .site-main { max-width: 1200px; margin: 0 auto; padding: 48px 20px 72px; }
.hello-chapter .woocommerce ul.products li.product,
.hello-chapter.woocommerce ul.products li.product { background: #fff; border: 1px solid var(--ch-line); border-radius: var(--ch-radius); padding: 14px 14px 18px; text-align: left; }
.hello-chapter .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--ch-heading-font); color: var(--ch-ink); font-size: 1.02rem; }
.hello-chapter .woocommerce ul.products li.product .price { color: var(--ch-primary); font-weight: 700; }
.hello-chapter .woocommerce a.button,
.hello-chapter .woocommerce button.button,
.hello-chapter .woocommerce input.button,
.hello-chapter.woocommerce a.button,
.hello-chapter.woocommerce button.button,
.hello-chapter .woocommerce #respond input#submit { background: var(--ch-primary); color: #fff; border-radius: 8px; font-weight: 600; padding: 12px 20px; border: 0; }
.hello-chapter .woocommerce a.button:hover,
.hello-chapter .woocommerce button.button:hover,
.hello-chapter.woocommerce a.button:hover,
.hello-chapter.woocommerce button.button:hover { background: var(--ch-ink); color: #fff; }
.hello-chapter .woocommerce a.button.alt,
.hello-chapter .woocommerce button.button.alt { background: var(--ch-accent); }

/* ---------- Fluent Forms ---------- */
.hello-chapter .fluentform .ff-el-form-control { border: 1px solid var(--ch-line); border-radius: 8px; padding: 12px 14px; font-size: 1rem; }
.hello-chapter .fluentform .ff-el-form-control:focus { border-color: var(--ch-primary); box-shadow: 0 0 0 3px rgba(27, 47, 110, .12); }
.hello-chapter .fluentform .ff-el-input--label label { font-weight: 600; color: var(--ch-ink); }
.hello-chapter .fluentform .ff-btn-submit { background: var(--ch-primary) !important; color: #fff !important; border-radius: 8px; padding: 13px 26px; font-weight: 700; border: 0; }
.hello-chapter .fluentform .ff-btn-submit:hover { background: var(--ch-ink) !important; }

/* ---------- Donation campaign panel ([ssl_appeal_hero]) in the kit's colours ---------- */
.hello-chapter .ssl-appeal-hero { --ssl-accent: var(--ch-primary) !important; background: var(--ch-parchment); border-radius: 14px; overflow: hidden; border: 1px solid var(--ch-line); }
.hello-chapter .ssl-appeal-hero .ssl-hero-panel { background: #fff; border-left: 1px solid var(--ch-line); }
.hello-chapter .ssl-appeal-hero .ssl-hero-heading { font-family: var(--ch-heading-font); color: var(--ch-ink); font-weight: 700; letter-spacing: 0; line-height: 1.15; margin: 10px 0 14px; }
.hello-chapter .ssl-appeal-hero .ssl-hero-eyebrow { color: var(--ch-accent); }
.hello-chapter .ssl-appeal-hero .ssl-hero-cta { border-radius: 8px; }
.hello-chapter .ssl-appeal-hero .ssl-hero-alt { border-radius: 8px; }
.hello-chapter .ssl-appeal-hero .ssl-hero-img { border-radius: 10px; border-color: var(--ch-line); }
@media (max-width: 900px) {
	.hello-chapter .ssl-appeal-hero { grid-template-columns: 1fr; }
	.hello-chapter .ssl-appeal-hero .ssl-hero-panel { border-left: 0; border-top: 1px solid var(--ch-line); }
}

/* Columns that should be as wide as their content (logo, button groups) — Elementor's default is 100%. */
.e-con.chapter-auto { --width: auto; width: auto; flex: 0 0 auto; }
.e-con.chapter-auto > .elementor-widget-button { width: auto; }
.e-con.chapter-grow { --width: auto; width: auto; flex: 1 1 0; min-width: 0; }
.e-con.chapter-fixed { flex: 0 0 auto; }
@media (max-width: 1024px) { .chapter-row-t > .e-con { flex: 1 1 auto; width: 100%; --width: 100%; } }
@media (max-width: 767px) { .chapter-row-m > .e-con { flex: 1 1 auto; width: 100%; --width: 100%; } }
.chapter-topbar p { margin: 0; }
.chapter-topbar .elementor-widget-text-editor { display: flex; align-items: center; }

/* The Events Calendar's buttons and accents in kit colours. */
.hello-chapter .tribe-common .tribe-common-c-btn,
.hello-chapter .tribe-common a.tribe-common-c-btn,
.hello-chapter .tribe-events .tribe-events-c-search__button { background-color: var(--ch-primary) !important; border-radius: 8px; font-family: var(--ch-body-font); letter-spacing: 1px; text-transform: uppercase; }
.hello-chapter .tribe-common .tribe-common-c-btn:hover,
.hello-chapter .tribe-events .tribe-events-c-search__button:hover { background-color: var(--ch-ink) !important; }
.hello-chapter .tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date,
.hello-chapter .tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link::after { color: var(--ch-accent); background-color: var(--ch-accent); }
.hello-chapter .tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date { background: none; }
.hello-chapter .tribe-events .tribe-events-c-subscribe-dropdown__button { border-color: var(--ch-primary); color: var(--ch-primary); border-radius: 8px; }

/* Phone-size menu button: plain, compact, never wider than the screen. */
@media (max-width: 1024px) {
	.hello-chapter .chapter-nav__toggle { background: #fff; color: var(--ch-ink); border: 1px solid var(--ch-line); border-radius: 8px; padding: 10px 14px; font-family: var(--ch-body-font); font-size: 16px; letter-spacing: 0; text-transform: none; box-shadow: none; }
	.hello-chapter .chapter-nav__toggle:hover,
	.hello-chapter .chapter-nav__toggle:focus { background: var(--ch-parchment); color: var(--ch-ink); }
	.hello-chapter .chapter-nav.is-open .chapter-nav__toggle { background: var(--ch-primary); color: #fff; border-color: var(--ch-primary); }
}
@media (max-width: 767px) {
	.hello-chapter .chapter-nav__label { display: none; }
	.hello-chapter .chapter-nav__toggle { padding: 12px; }
	.hello-chapter .chapter-nav__panel .chapter-nav__list a { padding: 12px 10px; font-size: 18px; border-bottom: 1px solid var(--ch-line); border-radius: 0; }
}
@media (max-width: 1024px) {
	/* The dropdown panel spans the whole header, so every box between it and the header is unpositioned. */
	.hello-chapter .chapter-header .e-con,
	.hello-chapter .chapter-header .e-con-inner,
	.hello-chapter .chapter-header .elementor-element,
	.hello-chapter .chapter-header .elementor-shortcode,
	.hello-chapter .chapter-header .chapter-nav { position: static !important; }
	.hello-chapter .chapter-header { position: relative; }
	.hello-chapter .chapter-nav__panel { max-height: calc(100vh - 90px); overflow-y: auto; }
}