/*
Theme Name: Serenity Home and Respite Care
Theme URI: https://serenityrespitecare.org
Author: Serenity Home and Respite Care
Description: A responsive, accessible respite care WordPress theme with built-in contact form, Thank You page, SMTP notice, and branded footer watermarks.
Version: 8.1
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: serenity-theme
*/
:root{--serenity-blue:#1A3D5F;--accent-blue:#4a7ca3;--soft-gray:#f2f4f7;--text-gray:#6c757d;--nav-yellow:#FFF8DC;--error:#dc2626;--success:#065f46;--warn:#7c5e00;--warn-border:#facc15;--success-border:#10b981}
*{box-sizing:border-box}body{margin:0;font-family:"Open Sans",Arial,sans-serif;color:var(--serenity-blue);background:#fff}
header{background:var(--nav-yellow);border-bottom:1px solid var(--soft-gray);position:sticky;top:0;z-index:20}
.navbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 3%}.navbar .logo{height:52px;width:auto;border-radius:50%}
.navbar .nav-links a{color:var(--serenity-blue);text-decoration:none;margin:0 .8rem;font-weight:600}
.hero{position:relative;background:url('assets/hero.png') center/cover no-repeat;min-height:60vh;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;padding:10vh 1rem 6vh;color:#fff}
.hero::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.6)}.hero>*{position:relative;z-index:1}
.hero .title{font-family:"Montserrat",sans-serif;color:var(--serenity-blue);font-weight:800;font-size:4rem;margin:.2rem 0 .4rem}
.hero .subtitle{color:#1f2a37;font-size:1.6rem;font-weight:600;margin:.2rem 0 1rem}
section{padding:5rem 10%;text-align:center}.section-inner{max-width:1100px;margin:0 auto}
.figure-wrap{display:flex;justify-content:center}
.figure-wrap img.responsive{width:100%;max-width:760px;max-height:360px;object-fit:cover;border-radius:12px;margin-top:1rem;box-shadow:0 6px 24px rgba(0,0,0,.08)}
.contact-section{background:#f7f7f7;border:1px solid #ececec;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.06);padding:2rem;margin-top:1rem}
.contact-form{max-width:640px;margin:0 auto;text-align:left}
.contact-form .field{margin-bottom:1rem}
.contact-form label{display:block;font-weight:600;margin-bottom:.4rem}
.contact-form input[type="text"],.contact-form input[type="email"],.contact-form textarea{width:100%;padding:.85rem 1rem;border:1px solid #d7dde5;border-radius:10px;background:#fff;font-size:1rem;outline:none;transition:box-shadow .18s,border-color .18s}
.contact-form textarea{min-height:140px;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{border-color:#b0c4d6;box-shadow:0 0 0 3px rgba(26,61,95,.12)}
.contact-form .submit-wrap{text-align:right;margin-top:1rem}
.btn{background:var(--serenity-blue);color:#fff;padding:.85rem 1.6rem;border:none;border-radius:8px;font-size:1rem;cursor:pointer;display:inline-block;text-decoration:none}
.btn:hover{background:var(--accent-blue)}
.notice{margin-top:1rem;padding:.9rem 1.1rem;border-radius:10px;font-size:.96rem;text-align:left}
.notice.error{background:#fef2f2;border:1px solid #dc2626;color:#7f1d1d}
.notice.success{background:#ecfdf5;border:1px solid #10b981;color:#065f46}
.notice.warn{background:#fffbeb;border:1px solid #facc15;color:#7c5e00}
footer{position:relative;background:linear-gradient(90deg,#1A3D5F 0%,#4A7CA3 100%);text-align:center;padding:1.6rem;border-top:1px solid var(--soft-gray);color:#fff;font-size:.9rem;overflow:hidden}
footer a{color:#fff;text-decoration:underline}footer p{margin:.25rem 0}
footer::before,footer::after{content:"";position:absolute;top:0;height:100%;width:12%;background:url('assets/logo.png') center/contain no-repeat;opacity:.14;filter:grayscale(1) brightness(0) invert(1);pointer-events:none;-webkit-clip-path:circle(40% at 50% 50%);clip-path:circle(40% at 50% 50%)}
footer::before{left:0}footer::after{right:0;transform:scaleX(-1)}
@media(max-width:1024px){.hero .title{font-size:3rem}.hero .subtitle{font-size:1.3rem}}
@media(max-width:900px){.hero{min-height:60vh;padding:8vh 1rem 5vh}.hero .title{font-size:2.5rem}.hero .subtitle{font-size:1.1rem}.navbar .nav-links{display:flex;flex-wrap:wrap;justify-content:center}.navbar .nav-links a{margin:.35rem .6rem}.figure-wrap img.responsive{max-height:300px}}