/*
Theme Name: Federil Homes
Theme URI: https://federilhomes.com
Author: Federil Homes
Author URI: https://federilhomes.com
Description: A refined WordPress theme for Federil Homes, a new standard in assisted living. Activating it builds the whole site: the home page plus About, Care, Our Standards, A Home from Home and Contact, with the header menu already in place. Every heading, paragraph, button and photograph is editable from Appearance, Customize. Includes a built in enquiry form that emails your inbox, no plugins required.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: federil-homes
Tags: one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, theme-options, translation-ready
*/

/* ==========================================================================
   Federil Homes, base tokens
   ========================================================================== */
:root{
  --green:#0e2620; --green-deep:#081411; --green-mid:#173a2f;
  --gold:#c5a35b; --gold-lt:#e3cd97; --cream:#faf7ef; --paper:#ffffff;
  --ink:#1f2621; --muted:#5f6f66;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);background:var(--cream);line-height:1.7;font-weight:300;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;line-height:1.12;letter-spacing:.01em}
img{max-width:100%;height:auto}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.overline{font-size:1rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600;display:inline-block;margin-bottom:6px}
a{color:inherit;text-decoration:none}

/* Accessibility helpers */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal}
.skip-link{position:absolute;left:-9999px;z-index:999;padding:12px 20px;background:var(--gold);color:var(--green-deep)}
.skip-link:focus{left:12px;top:12px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ==========================================================================
   Header and navigation
   ========================================================================== */
header.site-header{position:sticky;top:0;z-index:50;background:rgba(8,20,17,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(197,163,91,.25)}
.admin-bar header.site-header{top:32px}
@media screen and (max-width:782px){.admin-bar header.site-header{top:46px}}
.nav{display:flex;align-items:center;justify-content:space-between;height:104px}
.nav .brand img{height:80px;width:auto;display:block}
.nav .brand .brand-text{color:#f2efe6;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.9rem;letter-spacing:.04em}
.nav nav.primary-nav{display:flex;gap:34px}
.nav nav.primary-nav ul{display:flex;gap:34px;list-style:none;margin:0;padding:0}
.nav nav.primary-nav a{color:#e8e6dd;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;font-weight:300;
  padding-bottom:3px;border-bottom:1px solid transparent;transition:.25s;display:inline-block}
.nav nav.primary-nav a:hover,.nav nav.primary-nav .current-menu-item>a{color:var(--gold-lt);border-color:var(--gold)}
.btn{display:inline-block;border:1px solid var(--gold);color:var(--gold-lt)!important;
  padding:12px 26px;letter-spacing:.16em;text-transform:uppercase;font-size:.74rem;transition:.28s;background:transparent}
.btn:hover{background:var(--gold);color:var(--green-deep)!important}
.btn-solid{background:var(--gold);color:var(--green-deep)!important;border-color:var(--gold)}
.btn-solid:hover{background:var(--gold-lt)}

/* Mobile menu toggle */
.nav-toggle{display:none;background:none;border:1px solid rgba(197,163,91,.5);width:46px;height:42px;
  cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;transition:.25s}
.nav-toggle:hover{border-color:var(--gold)}
.nav-toggle span{display:block;width:20px;height:1px;background:var(--gold-lt);transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;text-align:center;padding:0;
  background:linear-gradient(120deg,rgba(8,20,17,.86),rgba(8,20,17,.45)),linear-gradient(120deg,#0e2620,#173a2f);
  background-size:cover;background-position:center}
.hero .wrap{padding:64px 28px}
.hero-logo{width:min(420px,72vw);height:auto;display:block;margin:0 auto 30px;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.45))}
.hero .overline{margin-bottom:18px;display:block}
.hero h1{color:#fff;font-size:clamp(2.6rem,6vw,4.7rem);margin:0 auto;max-width:16ch}
.hero p{color:#e9e7dd;font-size:1.16rem;max-width:52ch;margin:22px auto 34px;font-weight:300}
.hero .actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.rule{width:64px;height:2px;background:var(--gold);margin:0 0 26px}

/* ==========================================================================
   Sections
   ========================================================================== */
section{padding:96px 0}
section.flush{padding:0}
.intro{text-align:center;max-width:760px;margin:0 auto}
.intro h2{font-size:clamp(2rem,4vw,3rem);margin:18px 0 20px;color:var(--green)}
.intro p{font-size:1.12rem;color:var(--muted)}

.services{background:var(--paper)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:56px}
.card{background:var(--cream);border:1px solid #ece6d7;padding:38px 26px;transition:.3s}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 40px -22px rgba(14,38,32,.4);border-color:var(--gold)}
.card .mark{width:46px;height:46px;margin-bottom:22px}
.card .mark svg{width:100%;height:100%;stroke:var(--gold);fill:none;stroke-width:1.3}
.card h3{font-size:1.5rem;color:var(--green);margin-bottom:12px}
.card p{font-size:.98rem;color:var(--muted)}

.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:520px}
.split .media{background-size:cover;background-position:center;min-height:360px;
  background-color:var(--green-mid);background-image:linear-gradient(0deg,rgba(8,20,17,.12),rgba(8,20,17,.12))}
.split .text{background:var(--green);color:#eef1ec;display:flex;flex-direction:column;justify-content:center;padding:74px 66px}
.split .text .overline{color:var(--gold-lt)}
.split .text h2{color:#fff;font-size:clamp(2rem,3.6vw,2.9rem);margin:16px 0 22px}
.split .text p{color:#cdd6ce;font-size:1.06rem}
.split.reverse .media{order:2}
.split.reverse .text{background:var(--cream);color:var(--ink)}
.split.reverse .text h2{color:var(--green)}
.split.reverse .text p{color:var(--muted)}

.band{position:relative;text-align:center;color:#fff;
  background:linear-gradient(rgba(8,20,17,.9),rgba(8,20,17,.9));
  background-size:cover;background-position:center;background-color:var(--green-deep)}
.band .wrap{max-width:840px}
.band h2{color:#fff;font-size:clamp(2.1rem,4vw,3.1rem);margin:18px 0 24px}
.band p{color:#d8ddd6;font-size:1.14rem}
.band .rule{margin:0 auto 26px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:62px}
.pillar h3{color:#fff;font-size:2.05rem;margin:0 0 14px;position:relative;padding-top:24px}
.pillar h3:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:46px;height:2px;background:var(--gold)}
.pillar p{color:#c9d1c9;font-size:1.02rem}

.lifestyle{background:var(--paper)}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.gal .shot{aspect-ratio:4/3;background-size:cover;background-position:center;background-color:var(--green-mid);
  background-image:linear-gradient(0deg,rgba(8,20,17,.1),rgba(8,20,17,.1))}

/* ==========================================================================
   Enquiry form
   ========================================================================== */
.cta{background:var(--green);color:#fff;text-align:center}
.cta h2{color:#fff;font-size:clamp(2rem,4vw,3rem);margin-bottom:18px}
.cta p{color:#cdd6ce;max-width:52ch;margin:0 auto 34px;font-size:1.08rem}
.contact-form{max-width:680px;margin:42px auto 0;text-align:left}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{margin-bottom:22px;display:flex;flex-direction:column}
.field label{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:9px;font-weight:500}
.field input,.field textarea{font-family:inherit;font-size:1rem;font-weight:300;color:var(--ink);background:var(--cream);
  border:1px solid rgba(197,163,91,.5);padding:14px 16px;outline:none;transition:.2s;border-radius:2px}
.field input::placeholder,.field textarea::placeholder{color:#9aa79d}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,163,91,.2)}
.contact-form .submit{text-align:center;margin-top:6px}
.contact-form button{font-family:inherit;cursor:pointer}
.fed-hp{position:absolute!important;left:-9999px!important;height:0;overflow:hidden}
.fed-notice{max-width:680px;margin:34px auto 0;padding:20px 24px;text-align:left;border:1px solid var(--gold);
  background:rgba(197,163,91,.12);color:#f0eee4;font-size:1rem}
.fed-notice.is-error{border-color:#d98d7a;background:rgba(217,141,122,.12)}
@media(max-width:640px){.contact-form .row{grid-template-columns:1fr}}

/* ==========================================================================
   Footer
   ========================================================================== */
footer.site-footer{background:var(--green-deep);color:#aeb8b0;padding:70px 0 40px;text-align:center}
footer.site-footer img{height:130px;margin-bottom:22px;width:auto}
footer.site-footer .fnote{font-size:.86rem;letter-spacing:.04em}
footer.site-footer .tag{color:var(--gold);letter-spacing:.28em;text-transform:uppercase;font-size:.7rem;margin:10px 0 24px}
footer.site-footer .copy{font-size:.76rem;color:#6c766d;margin-top:22px;border-top:1px solid rgba(197,163,91,.18);padding-top:24px}
footer.site-footer .footer-nav{margin-top:18px}
footer.site-footer .footer-nav ul{list-style:none;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin:0;padding:0}
footer.site-footer .footer-nav a{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#aeb8b0;transition:.25s}
footer.site-footer .footer-nav a:hover{color:var(--gold-lt)}

/* ==========================================================================
   Inner pages, posts, editor content
   ========================================================================== */
.page-hero{background:var(--green);color:#fff;padding:120px 0 70px;text-align:center}
.page-hero h1{color:#fff;font-size:clamp(2.2rem,4.5vw,3.4rem)}
.page-hero .rule{margin:22px auto 0}
.entry{padding:80px 0}
.entry .wrap{max-width:800px}
.entry p,.entry ul,.entry ol,.entry blockquote,.entry figure,.entry table,.entry pre{margin-bottom:1.5em}
.entry h2{font-size:2.1rem;color:var(--green);margin:1.6em 0 .5em}
.entry h3{font-size:1.6rem;color:var(--green);margin:1.4em 0 .5em}
.entry h4,.entry h5,.entry h6{font-family:'Jost',sans-serif;font-weight:500;color:var(--green);margin:1.3em 0 .5em}
.entry a{color:var(--green);border-bottom:1px solid var(--gold)}
.entry a:hover{color:var(--gold)}
.entry ul,.entry ol{padding-left:1.3em}
.entry li{margin-bottom:.4em}
.entry blockquote{border-left:2px solid var(--gold);padding-left:24px;font-style:italic;color:var(--muted)}
.entry img{height:auto}
.entry .wp-caption-text,.entry figcaption{font-size:.86rem;color:var(--muted);text-align:center}
.entry .meta{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.post-list{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
.post-list article{background:var(--paper);border:1px solid #ece6d7;padding:34px}
.post-list h2{font-size:1.8rem;color:var(--green);margin-bottom:10px}
.post-list .meta{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.pagination{margin-top:50px;text-align:center}
.pagination .page-numbers{display:inline-block;padding:8px 14px;border:1px solid #ddd3bd;margin:0 4px;color:var(--green)}
.pagination .current,.pagination .page-numbers:hover{background:var(--green);color:#fff;border-color:var(--green)}
.aligncenter{display:block;margin:0 auto}
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.sticky,.gallery-caption,.bypostauthor,.wp-caption{display:block}
.search-form{display:flex;gap:10px;max-width:520px;margin:0 auto 40px}
.search-form input[type="search"]{flex:1;font-family:inherit;padding:12px 14px;border:1px solid #ddd3bd;background:var(--paper)}
.search-form button{font-family:inherit;cursor:pointer;border:1px solid var(--green);background:var(--green);color:#fff;padding:12px 22px;
  letter-spacing:.14em;text-transform:uppercase;font-size:.74rem}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:900px){
  .nav-toggle{display:flex}
  .nav nav.primary-nav{position:absolute;top:104px;left:0;right:0;background:rgba(8,20,17,.98);
    border-bottom:1px solid rgba(197,163,91,.25);flex-direction:column;gap:0;padding:10px 28px 26px;display:none}
  .nav nav.primary-nav.is-open{display:flex}
  .nav nav.primary-nav ul{flex-direction:column;gap:0;width:100%}
  .nav nav.primary-nav li{width:100%}
  .nav nav.primary-nav a{display:block;padding:15px 0;border-bottom:1px solid rgba(197,163,91,.14);width:100%}
  .nav .brand img{height:64px}
  .nav .header-cta{display:none}
  .grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .split.reverse .media{order:0}
  .split .text{padding:56px 34px}
  .pillars{grid-template-columns:1fr;gap:34px}
  .gal{grid-template-columns:1fr}
  section{padding:72px 0}
  section.flush{padding:0}
  .post-list{grid-template-columns:1fr}
}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .card:hover{transform:none}
}