/*
Theme Name: Living Spring
Description: Responsive church website for Living Spring English Church, Chennai.
Version: 1.2.16
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: living-spring
License: GPL-2.0-or-later
*/
:root{--ink:#202b2a;--muted:#52615e;--paper:#faf8f3;--tint:#eeefea;--gold:#e4ca9b;--line:#dedfd7;--accent:#28514d;--deep:#182c2e}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:1.125rem/1.65 system-ui,sans-serif}
a{color:inherit;text-underline-offset:.22em}
a:hover{text-decoration-thickness:.14em}
:focus-visible{outline:3px solid #b67716;outline-offset:4px}
img{max-width:100%;height:auto}
.wrap{width:min(100% - 3rem,76rem);margin-inline:auto}
.masthead{background:var(--paper);border-bottom:1px solid var(--line)}
.masthead-inner{min-height:5.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;padding-block:.9rem}
.brand{display:flex;gap:.7rem;align-items:center}
.brand a,.masthead nav a{text-decoration:none}
.brand strong,.brand span{display:block;line-height:1.3}
.brand strong{font:700 1.6rem/1.15 Georgia,serif;letter-spacing:-.04em}
.custom-logo{width:3rem}
.masthead nav ul{list-style:none;padding:0;margin:0;display:flex;gap:.35rem 1.3rem;flex-wrap:wrap}
.masthead nav a{display:block;padding:.4rem 0;font-weight:650;font-size:1rem}
.masthead nav a:hover,.masthead nav .current-menu-item>a{text-decoration:underline}
.masthead nav .sub-menu{margin-left:.65rem}
.ls-hero{--photo:url('assets/church.png');background:var(--deep);color:#fff;background-image:linear-gradient(90deg,rgba(13,37,36,.96),rgba(13,37,36,.63)),var(--photo);background-position:center;background-size:cover;padding-block:clamp(4rem,10vw,9rem)}
.ls-home,.ls-inner{background:var(--paper);color:var(--ink);padding:0}
.ls-home .button.outline{color:var(--accent);border-color:var(--accent)}
.home-title{--title-padding:clamp(1.5rem,4vw,3.5rem);font-size:clamp(1.65rem,5.5vw,4.75rem);padding-block:var(--title-padding);min-height:calc(2 * var(--title-padding) + 1.8em + .65rem)}
.home-title h1{font-size:1em;max-width:none;margin:0}
.home-lockup{display:inline-grid;max-width:100%}
.tagline-reference{display:inline-block;white-space:nowrap}
.home-tagline{text-align:left;margin:.65rem 0 0;color:#705632;font:650 max(.8rem,.44em)/1.3 system-ui,sans-serif;letter-spacing:.005em}
.home-banner{width:100%;aspect-ratio:3/1;background:url('assets/hero.png?v=1.2.16') center/contain no-repeat}
.home-hero-panel{display:grid;isolation:isolate}
.home-hero-panel>*{grid-area:1/1}
.home-questions{display:grid;align-content:center;padding:1.2rem max(1.5rem,calc((100% - 76rem)/2)) 1.2rem max(30%,calc(50% - 13rem));background:linear-gradient(90deg,transparent 16%,rgba(13,25,25,.88) 34%,rgba(13,25,25,.88) 67%,rgba(13,25,25,.67));color:#fff}
.ls-inner .home-banner{transform:scaleX(-1)}
.ls-inner .home-questions{z-index:1;padding-inline:max(1.5rem,calc((100% - 76rem)/2)) max(34%,calc(50% - 13rem));background:linear-gradient(90deg,rgba(20,21,22,.86),rgba(20,21,22,.80) 49%,transparent 80%)}
.ls-inner .home-questions h1{max-width:none;margin:0 0 .25em;font-size:clamp(2rem,5vw,4.5rem)}
.ls-inner .home-questions .intro{font-size:clamp(1.125rem,2.4vw,2rem)}
.home-questions h2{max-width:25ch;margin:0 0 .45em;font-size:clamp(1.7rem,4.2vw,4rem);text-wrap:balance}
.home-questions .intro{margin:0;color:#f4efe5;font-size:clamp(1.125rem,1.7vw,1.35rem)}
.home-message{padding-block:clamp(1.25rem,3vw,2rem)}
.home-message .actions{margin-top:0}
.home-message h2{max-width:26ch;font-size:clamp(2rem,5vw,4rem);text-wrap:balance}
.home-message .intro{color:var(--muted)}
.brand strong{font-size:clamp(1.02rem,4.1vw,1.6rem)}
.brand{min-width:0}
.brand .custom-logo{width:clamp(1.8rem,10vw,3rem);flex-shrink:0}
.church-map{display:block;width:100%;height:clamp(18rem,42vw,31rem);border:0;border-radius:1rem}
.eyebrow{font-weight:750;font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin:0 0 .9rem}
.ls-hero .eyebrow{color:var(--gold)}
h1,h2,h3{font-family:Georgia,serif;line-height:1.12;letter-spacing:-.035em;margin:0 0 .6em}
h1{font-size:clamp(2.6rem,7vw,6.15rem);max-width:13ch}
h2{font-size:clamp(2rem,4.6vw,3.5rem)}
h3{font-size:1.65rem}
.intro{max-width:46ch;font-size:clamp(1.12rem,2.4vw,1.4rem)}
.ls-hero:not(.ls-home) .intro{max-width:65ch}
.actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2rem}
.button{display:inline-flex;align-items:center;min-height:3rem;border:1px solid transparent;padding:.6rem 1.1rem;border-radius:.45rem;background:var(--accent);color:#fff;font-weight:750;text-decoration:none}
.ls-hero:not(.ls-home) .button:not(.outline){background:var(--gold);color:var(--ink)}
.button:hover{text-decoration:underline}
.button.outline{background:transparent;color:#fff;border-color:#ffffff80}
.ls-section{padding-block:clamp(3rem,8vw,6rem)}
.tinted{background:var(--tint)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1rem;margin-block:1.5rem}
.card{padding:clamp(1.15rem,3vw,2rem);border:1px solid var(--line);border-radius:1rem;background:#fff;overflow-wrap:anywhere}
.card p:last-child{margin-bottom:0}
.card blockquote{margin:0}
.number{font-size:.75rem;font-weight:750;color:var(--muted);display:block;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.12em}
.number:empty{display:none}
.measure,.prose{max-width:72ch}
.prose{padding-block:3rem}
.site-footer{background:var(--deep);color:#fff;padding-block:3rem}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1.5rem;overflow-wrap:anywhere}
.site-footer p{color:#d6e4df;margin:.55rem 0 0}
address{font-style:normal}
.screen-reader-text:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip:focus{display:inline-block;padding:.5rem}
@media(max-width:40rem){.wrap{width:calc(100% - 2rem)}.masthead-inner{gap:.65rem}.masthead nav{width:100%}.masthead nav ul{gap:.25rem .9rem}}

@media(max-width:46rem){
  .home-hero-panel{display:block}
  .home-questions{padding:1.5rem 1rem;background:#202324}
  .ls-inner .home-hero-panel{display:grid}
  .ls-inner .home-questions{display:contents}
  .ls-inner .home-questions h1{grid-area:1/1;z-index:1;display:grid;align-content:center;margin:0;padding:.5rem 1rem;color:#fff;background:linear-gradient(90deg,rgba(20,21,22,.84),transparent 78%)}
  .ls-inner .home-questions .intro{grid-area:2/1;max-width:none;padding:1.5rem 1rem;background:#202324}
}
@media(max-width:25rem){.home-title{min-height:calc(2 * var(--title-padding) + 2.92em + .65rem)}}