/*
Theme Name: Lelystad Kali Mandir
Theme URI: https://kalimandir.nl/
Author: Lelystad Kali Mandir
Description: A lightweight custom WordPress theme for Lelystad Kali Mandir, designed for worship, events, community, cultural programmes and integration with the Kali Mandir registration plugin.
Version: 1.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: kalimandir
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
  --km-ink: #241517;
  --km-muted: #766466;
  --km-cream: #fffaf1;
  --km-paper: #fffdf8;
  --km-soft: #f7ecdc;
  --km-deep: #2d0b11;
  --km-maroon: #641724;
  --km-red: #8d2632;
  --km-gold: #c99b3c;
  --km-gold-light: #f3dfaa;
  --km-border: rgba(100, 23, 36, .13);
  --km-shadow: 0 22px 60px rgba(45, 11, 17, .12);
  --km-radius: 26px;
  --km-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--km-ink);
  background: var(--km-cream);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--km-maroon); text-underline-offset: 3px; }
a:hover { color: var(--km-deep); }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; }

.km-container { width: min(var(--km-width), calc(100% - 40px)); margin-inline: auto; }
.km-section { padding: 86px 0; }
.km-section--tight { padding: 58px 0; }
.km-kicker {
  margin: 0 0 10px;
  color: var(--km-maroon);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.km-title {
  margin: 0;
  max-width: 860px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.55rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.km-lead { max-width: 760px; color: var(--km-muted); font-size: 1.08rem; }

/* Announcement */
.km-announcement { background: var(--km-deep); color: rgba(255,255,255,.87); font-size: .86rem; }
.km-announcement-inner { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.km-announcement strong { color: var(--km-gold-light); }
.km-announcement a { color: #fff; font-weight: 750; text-decoration: none; }

/* Header */
.km-site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  background: rgba(255,250,241,.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--km-border);
}
.admin-bar .km-site-header { top: 32px; }
.km-header-inner { min-height: 78px; display: flex; align-items: center; gap: 26px; }
.km-brand { display: flex; align-items: center; gap: 13px; margin-right: auto; color: var(--km-ink); text-decoration: none; }
.km-brand .custom-logo-link { display: block; line-height: 0; }
.km-brand .custom-logo { width: 48px; height: 48px; object-fit: contain; }
.km-brand-mark {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(201,155,60,.55); color: var(--km-maroon); background: #fff;
  font-family: Georgia, serif; font-size: 1.28rem; font-weight: 700;
  box-shadow: inset 0 0 0 5px rgba(201,155,60,.08);
}
.km-brand-text strong { display: block; font-family: Georgia, serif; font-size: 1.07rem; line-height: 1.1; }
.km-brand-text span { display: block; margin-top: 3px; color: var(--km-muted); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; }
.km-nav ul { display: flex; align-items: center; gap: 23px; margin: 0; padding: 0; list-style: none; }
.km-nav a { color: var(--km-ink); text-decoration: none; font-size: .93rem; font-weight: 680; }
.km-nav a:hover, .km-nav .current-menu-item > a { color: var(--km-maroon); }
.km-header-cta { margin-left: 4px; }
.km-menu-toggle { display: none; border: 0; background: transparent; padding: 9px; cursor: pointer; }
.km-menu-toggle > span:not(.screen-reader-text) { width: 24px; height: 2px; display: block; margin: 5px 0; background: var(--km-ink); }

.km-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 11px 21px; border: 1px solid var(--km-maroon); border-radius: 999px;
  background: var(--km-maroon); color: #fff; text-decoration: none; font-weight: 760; line-height: 1.2;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.km-button:hover { background: var(--km-deep); border-color: var(--km-deep); color: #fff; transform: translateY(-1px); }
.km-button--light { color: var(--km-maroon); background: #fff; border-color: rgba(255,255,255,.8); }
.km-button--light:hover { color: var(--km-deep); background: #fff6e5; border-color: #fff6e5; }
.km-button--outline { color: var(--km-maroon); background: transparent; border-color: rgba(100,23,36,.35); }
.km-button--outline:hover { color: #fff; background: var(--km-maroon); }
.km-button--ghost-light { color: #fff; background: transparent; border-color: rgba(255,255,255,.42); }
.km-button--ghost-light:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.7); }

/* Hero */
.km-hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(circle at 74% 16%, rgba(201,155,60,.31), transparent 24%),
    radial-gradient(circle at 14% 95%, rgba(201,155,60,.10), transparent 27%),
    linear-gradient(125deg, #2c0b11 0%, #57131e 48%, #7b202c 100%);
}
.km-hero::before {
  content: ""; position: absolute; width: 520px; height: 520px; right: -150px; top: -165px; border-radius: 50%;
  border: 1px solid rgba(243,223,170,.19); box-shadow: 0 0 0 52px rgba(243,223,170,.026), 0 0 0 104px rgba(243,223,170,.017);
}
.km-hero-inner { min-height: 650px; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 58px; padding: 82px 0 98px; }
.km-hero-copy { position: relative; z-index: 2; }
.km-hero .km-kicker { color: var(--km-gold-light); }
.km-hero h1 { margin: 0; max-width: 740px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.2rem, 6.9vw, 6rem); line-height: .98; font-weight: 700; letter-spacing: -.035em; }
.km-hero-copy > p:not(.km-kicker) { max-width: 670px; margin: 24px 0 32px; color: rgba(255,255,255,.83); font-size: clamp(1.02rem, 1.8vw, 1.18rem); }
.km-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.km-shrine-wrap { position: relative; z-index: 2; width: min(100%, 435px); margin-left: auto; }
.km-shrine {
  position: relative; min-height: 500px; overflow: hidden; border: 1px solid rgba(243,223,170,.34);
  border-radius: 220px 220px 34px 34px; background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.045));
  box-shadow: 0 35px 85px rgba(0,0,0,.28); isolation: isolate;
}
.km-shrine::before { content: ""; position: absolute; inset: 15px; border: 1px solid rgba(243,223,170,.25); border-radius: inherit; z-index: 2; pointer-events: none; }
.km-shrine::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 28px; height: 2px; background: linear-gradient(90deg, transparent, var(--km-gold), transparent); z-index: 3; }
.km-shrine-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.km-shrine-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(35,8,12,.92), rgba(35,8,12,.06) 55%, rgba(35,8,12,.12)); }
.km-shrine-placeholder { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 48px; background: radial-gradient(circle at 50% 35%, rgba(201,155,60,.21), transparent 27%); }
.km-shrine-placeholder .km-bengali { color: var(--km-gold-light); font-family: Georgia, serif; font-size: clamp(3.5rem, 9vw, 6rem); line-height: 1; }
.km-shrine-placeholder span { display: block; margin-top: 20px; color: rgba(255,255,255,.75); font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; }
.km-shrine-caption { position: absolute; z-index: 4; left: 36px; right: 36px; bottom: 47px; text-align: center; }
.km-shrine-caption strong { display: block; color: #fff; font-family: Georgia, serif; font-size: 1.35rem; }
.km-shrine-caption small { display: block; margin-top: 5px; color: rgba(255,255,255,.65); letter-spacing: .08em; text-transform: uppercase; }

/* Event card */
.km-event-strip { position: relative; z-index: 8; margin-top: -48px; }
.km-event-card { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding: 31px 34px; background: #fff; border: 1px solid var(--km-border); border-radius: var(--km-radius); box-shadow: var(--km-shadow); }
.km-event-card h2 { margin: 3px 0 9px; font-family: Georgia, serif; font-size: clamp(1.75rem, 3vw, 2.45rem); }
.km-event-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--km-muted); font-size: .94rem; }
.km-event-meta span { display: inline-flex; align-items: center; gap: 7px; }
.km-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--km-gold); }

/* About */
.km-about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 68px; align-items: center; }
.km-temple-art { min-height: 430px; position: relative; overflow: hidden; border-radius: 34px; background: linear-gradient(145deg, #431019, #7c2230); box-shadow: var(--km-shadow); }
.km-temple-art::before { content: ""; position: absolute; inset: 0; opacity: .9; background: radial-gradient(circle at 50% 58%, rgba(243,223,170,.16), transparent 32%); }
.km-temple-symbol { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.km-temple-symbol-inner { text-align: center; color: var(--km-gold-light); }
.km-temple-symbol-inner .om { font-family: Georgia, serif; font-size: 5.4rem; line-height: 1; }
.km-temple-symbol-inner span { display: block; margin-top: 14px; font-family: Georgia, serif; font-size: 1.3rem; }
.km-temple-spires { position: absolute; left: 8%; right: 8%; bottom: -2px; height: 190px; opacity: .18; }
.km-temple-spires span { position: absolute; bottom: 0; width: 19%; background: #f3dfaa; border-radius: 50% 50% 0 0; clip-path: polygon(50% 0, 67% 21%, 76% 43%, 83% 100%, 17% 100%, 24% 43%, 33% 21%); }
.km-temple-spires span:nth-child(1) { left: 0; height: 116px; }
.km-temple-spires span:nth-child(2) { left: 20%; height: 148px; }
.km-temple-spires span:nth-child(3) { left: 40%; height: 184px; }
.km-temple-spires span:nth-child(4) { left: 60%; height: 148px; }
.km-temple-spires span:nth-child(5) { left: 80%; height: 116px; }
.km-about-copy .km-title { margin-bottom: 20px; }
.km-about-copy p { color: var(--km-muted); }

/* Programme */
.km-soft { background: var(--km-soft); border-top: 1px solid rgba(100,23,36,.06); border-bottom: 1px solid rgba(100,23,36,.06); }
.km-programme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; counter-reset: programme; }
.km-programme-item { position: relative; padding: 28px; background: rgba(255,255,255,.7); border: 1px solid rgba(100,23,36,.10); border-radius: 22px; }
.km-programme-item::before { counter-increment: programme; content: "0" counter(programme); display: block; margin-bottom: 20px; color: var(--km-gold); font-weight: 800; letter-spacing: .11em; }
.km-programme-item h3 { margin: 0 0 8px; font-family: Georgia, serif; font-size: 1.42rem; }
.km-programme-item p { margin: 0; color: var(--km-muted); }

/* Mandir life */
.km-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 35px; }
.km-card { padding: 30px; background: var(--km-paper); border: 1px solid var(--km-border); border-radius: var(--km-radius); box-shadow: 0 13px 42px rgba(45,11,17,.05); }
.km-card h3 { margin: 0 0 8px; font-family: Georgia, serif; font-size: 1.38rem; }
.km-card p { margin-bottom: 0; color: var(--km-muted); }
.km-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 16px; background: #f6ead3; color: var(--km-maroon); font-size: 1.15rem; font-weight: 800; }

/* Community / visit */
.km-community { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; margin-top: 36px; }
.km-community-card { padding: 34px; border-radius: var(--km-radius); background: #fff; border: 1px solid var(--km-border); }
.km-community-card--dark { color: #fff; background: linear-gradient(145deg, var(--km-deep), var(--km-maroon)); border-color: transparent; }
.km-community-card h3 { margin: 0 0 10px; font-family: Georgia, serif; font-size: 1.7rem; }
.km-community-card p { color: var(--km-muted); }
.km-community-card--dark p { color: rgba(255,255,255,.73); }
.km-community-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* Posts */
.km-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
.km-post-card { overflow: hidden; background: #fff; border: 1px solid var(--km-border); border-radius: var(--km-radius); }
.km-post-card .post-thumbnail img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.km-post-card-body { padding: 25px; }
.km-post-card h3 { margin: 4px 0 8px; font-family: Georgia, serif; font-size: 1.37rem; }
.km-post-card h3 a { color: var(--km-ink); text-decoration: none; }
.km-post-card time { color: var(--km-muted); font-size: .84rem; }
.km-post-card p { color: var(--km-muted); }

/* CTA */
.km-cta { padding: 42px; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; color: #fff; background: linear-gradient(135deg, var(--km-deep), var(--km-maroon)); border-radius: 30px; box-shadow: var(--km-shadow); }
.km-cta h2 { margin: 0 0 8px; font-family: Georgia, serif; font-size: clamp(1.9rem, 3vw, 2.8rem); }
.km-cta p { margin: 0; color: rgba(255,255,255,.76); }

/* Interior pages */
.km-page-hero { padding: 78px 0 64px; color: #fff; background: linear-gradient(125deg, var(--km-deep), var(--km-maroon)); }
.km-page-hero .km-kicker { color: var(--km-gold-light); }
.km-page-hero h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(2.7rem, 6vw, 5rem); line-height: 1; }
.km-content-wrap { padding: 72px 0; }
.km-article { max-width: 880px; margin: 0 auto; padding: 42px; background: #fff; border: 1px solid var(--km-border); border-radius: var(--km-radius); }
.km-article h1 { margin-top: 0; font-family: Georgia, serif; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.08; }
.km-article h2, .km-article h3 { font-family: Georgia, serif; }
.km-article .wp-block-image img { border-radius: 18px; }
.entry-meta { color: var(--km-muted); font-size: .9rem; margin-bottom: 25px; }

/* Footer */
.km-footer { margin-top: 72px; color: rgba(255,255,255,.76); background: #220b0f; }
.km-footer-topline { height: 3px; background: linear-gradient(90deg, transparent, var(--km-gold), transparent); opacity: .65; }
.km-footer-grid { display: grid; grid-template-columns: 1.25fr .75fr .75fr; gap: 50px; padding: 62px 0 44px; }
.km-footer h3 { margin-top: 0; color: #fff; font-family: Georgia, serif; }
.km-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
.km-footer a:hover { color: #fff; }
.km-footer ul { margin: 0; padding: 0; list-style: none; }
.km-footer li + li { margin-top: 8px; }
.km-footer-bottom { padding: 20px 0; border-top: 1px solid rgba(255,255,255,.09); color: rgba(255,255,255,.52); font-size: .86rem; }

.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { width: auto; height: auto; margin: 8px; padding: 12px 16px; clip: auto; z-index: 99999; background: #fff; color: #000; }

@media (max-width: 900px) {
  .admin-bar .km-site-header { top: 46px; }
  .km-header-cta { display: none; }
  .km-menu-toggle { display: block; }
  .km-nav { display: none; position: absolute; top: 78px; left: 0; right: 0; padding: 18px 20px 25px; background: #fffaf1; border-bottom: 1px solid var(--km-border); box-shadow: 0 20px 30px rgba(45,11,17,.08); }
  .km-nav.is-open { display: block; }
  .km-nav ul { display: block; }
  .km-nav li + li { margin-top: 14px; }
  .km-hero-inner, .km-about-grid, .km-community { grid-template-columns: 1fr; }
  .km-hero-inner { min-height: auto; }
  .km-shrine-wrap { width: min(100%, 420px); margin: 0; }
  .km-programme, .km-grid-3, .km-posts { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .km-container { width: min(calc(100% - 28px), var(--km-width)); }
  .km-announcement-inner { padding: 7px 0; }
  .km-brand-text span { display: none; }
  .km-section { padding: 64px 0; }
  .km-hero-inner { padding: 62px 0 96px; gap: 42px; }
  .km-hero h1 { font-size: clamp(3rem, 14.8vw, 4.45rem); }
  .km-shrine { min-height: 430px; }
  .km-event-card, .km-cta { grid-template-columns: 1fr; }
  .km-programme, .km-grid-3, .km-posts, .km-footer-grid { grid-template-columns: 1fr; }
  .km-temple-art { min-height: 330px; }
  .km-article { padding: 27px 20px; }
}