/* =========================================================
   Children for the Kingdom - site-wide helpers
   Complements Elementor global classes/variables (Site Settings).
   ========================================================= */
html { scroll-behavior: smooth; }
body { background-color: #FAF9F5; color: #303535; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: #F7CF3D; color: #0E2828; }

/* Focus visibility */
.elementor a:focus-visible, .elementor button:focus-visible, .elementor summary:focus-visible, .elementor input:focus-visible, .elementor textarea:focus-visible, .elementor select:focus-visible { outline: 3px solid #F7CF3D; outline-offset: 3px; }

/* Eyebrow accent line */
.t-eyebrow { display: inline-flex; align-items: center; gap: .75rem; }
.t-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
.c-center .t-eyebrow, .t-eyebrow.is-centered { justify-content: center; }

/* Text link arrow */
.link-arrow::after { content: "\2192"; display: inline-block; transition: transform .25s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* Images inside cards: gentle zoom */
.card .img-cover { transition: transform .6s ease; }
.card:hover .img-cover { transform: scale(1.035); }

/* Placeholder notice (content still required) */
.t-placeholder::before { content: "\25B2  "; font-size: .7em; }

/* ---------- Header ---------- */
.elementor-location-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 999; }
.hdr { transition: background-color .3s ease, box-shadow .3s ease; }
body.c4dk-scrolled .hdr { background-color: rgba(250, 249, 245, .96); box-shadow: 0 1px 0 #DEDAD0, 0 10px 30px rgba(23, 58, 58, .06); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); }
.hdr-logo { display: block; }

/* Nav menu (Elementor Pro Nav Menu widget) */
.hdr-nav .elementor-nav-menu--main .elementor-item { font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0; color: #173A3A; padding: 12px 9px; white-space: nowrap; }
.hdr-nav .elementor-nav-menu--main .elementor-item:hover, .hdr-nav .elementor-nav-menu--main .elementor-item.elementor-item-active, .hdr-nav .elementor-nav-menu--main .elementor-item:focus { color: #B8101F; }
.hdr-nav .e--pointer-underline .elementor-item:after { background-color: #F7CF3D; height: 3px; bottom: 4px; left: 9px; right: 9px; width: auto; }
.hdr-nav .elementor-nav-menu--main .sub-menu { background: #FFFFFF; border: 1px solid #DEDAD0; border-radius: 10px; padding: 8px; box-shadow: 0 18px 40px rgba(23, 58, 58, .12); min-width: 210px; }
.hdr-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item { font-family: "DM Sans", sans-serif; font-size: 15px; font-weight: 500; color: #173A3A; border-radius: 6px; padding: 10px 14px; background: transparent; }
.hdr-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item:hover { background: #F3F3F0; color: #B8101F; }
.hdr-nav .elementor-menu-toggle { background: transparent; color: #173A3A; font-size: 26px; padding: 9px; border-radius: 8px; border: 1.5px solid #DEDAD0; }
.hdr-nav .elementor-menu-toggle:hover { background: #F3F3F0; }
.hdr-nav .elementor-menu-toggle svg { fill: #173A3A; width: 24px; height: 24px; }
.hdr-nav .elementor-nav-menu--dropdown { background: #FFFFFF; border-top: 1px solid #DEDAD0; box-shadow: 0 24px 40px rgba(23, 58, 58, .12); }
.hdr-nav .elementor-nav-menu--dropdown a { font-family: "DM Sans", sans-serif; font-size: 17px; font-weight: 600; color: #173A3A; padding: 15px 24px; border-bottom: 1px solid #F3F3F0; }
.hdr-nav .elementor-nav-menu--dropdown .sub-menu a { font-weight: 500; font-size: 16px; padding-left: 40px !important; }
.hdr-nav .elementor-nav-menu--dropdown a:hover, .hdr-nav .elementor-nav-menu--dropdown a.elementor-item-active { background: #F3F3F0; color: #B8101F; }
@media (max-width: 1024px) { .hdr-nav { flex: 0 0 auto !important; order: 3; } .hdr-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container { position: fixed; left: 0; right: 0; top: 76px; max-height: calc(100vh - 76px); overflow-y: auto; } }

/* ---------- Footer ---------- */
.ft-link { transition: color .2s ease; }
.ft-link:hover { color: #F7CF3D !important; }
.ft-stripe { background: linear-gradient(90deg, #F7CF3D 0 20%, #2B4545 20% 40%, #DF172C 40% 60%, #FAF9F5 60% 80%, #42AD4A 80% 100%); }

.ft-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.ft-list a { color: rgba(255, 255, 255, .86); text-decoration: none; display: inline-block; padding: .32rem 0; transition: color .2s ease; }
.ft-list a:hover, .ft-list a:focus-visible { color: #F7CF3D; }
.ft-bottom a { color: rgba(255, 255, 255, .75); }

/* ---------- Lists with arch bullets ---------- */
.t-list ul, .t-list ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.t-list li { position: relative; padding-left: 1.85rem; }
.t-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 7px; border-radius: 999px 999px 0 0; background: #DF172C; }
.t-list-gold li::before { background: #F7CF3D; }
.t-list-green li::before { background: #42AD4A; }
.t-list-cols ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
@media (max-width: 767px) { .t-list-cols ul { grid-template-columns: 1fr; } }
.t-body a, .t-lead a { color: #173A3A; text-decoration: underline; text-decoration-color: #F7CF3D; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- Prayer focus ---------- */
.pf-card.is-today { border-color: #F7CF3D !important; box-shadow: 0 0 0 2px #F7CF3D; }
.pf-card.is-today .pf-day::after { content: "Today"; margin-left: .6rem; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; background: #F7CF3D; color: #0E2828; padding: .2rem .5rem; border-radius: 4px; vertical-align: middle; }

/* ---------- Forms ---------- */
.form-field::placeholder { color: #8A9090; }
.e-form-success-message, .e-form-error-message { font-family: "DM Sans", sans-serif; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-interactions], [data-interaction-id] { opacity: 1 !important; transform: none !important; }
  .card:hover, .card:hover .img-cover { transform: none !important; }
}

/* Header fit on laptops */
.hdr-nav .elementor-nav-menu--main > .elementor-nav-menu { flex-wrap: nowrap; }
@media (max-width: 1360px) and (min-width: 1025px) { .hdr-actions .btn-outline { display: none; } .hdr-logo { width: 184px !important; } }

[id] { scroll-margin-top: 110px; }

/* ---------- Gallery ---------- */
.gal-masonry { column-count: 3; column-gap: 16px; }
@media (max-width: 1024px) { .gal-masonry { column-count: 2; } }
@media (max-width: 480px) { .gal-masonry { column-count: 1; } }
.gal-masonry > .gal-img { margin: 0 0 16px !important; break-inside: avoid; transition: opacity .3s ease, transform .3s ease; }
.gal-masonry > .gal-img:hover { opacity: .92; }
.gal-masonry > .gal-img.is-hidden { display: none !important; }
.gal-filter[aria-pressed="true"] { background-color: #173A3A !important; color: #FFFFFF !important; border-color: #173A3A !important; }
.c4dk-lightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(14, 40, 40, .94); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; padding: 24px; }
.c4dk-lightbox img { max-width: min(1200px, 100%); max-height: 80vh; width: auto; height: auto; border-radius: 8px; }
.c4dk-lightbox p { color: rgba(255,255,255,.85); font: 500 15px/1.5 "DM Sans", sans-serif; margin: 0; text-align: center; }
.c4dk-lightbox button { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 999px; border: 0; background: #F7CF3D; color: #0E2828; font-size: 26px; line-height: 1; cursor: pointer; }
/* Footer credit link */
.ft .t-small a { color: #F7CF3D; text-decoration: underline; text-underline-offset: 3px; }
.ft .t-small a:hover, .ft .t-small a:focus-visible { color: #FFFFFF; }