/*
Theme Name: JLov
Theme URI: https://jlov.com/
Author: GigHz
Author URI: https://gighz.com/
Description: Jewish Love & Relationship Coaching theme for JLov.com
Version: 2.3.2
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: jlov
*/

/* ═══ VARIABLES ═══ */
:root{--navy:#1D2645;--orange:#FD862B;--orange-dk:#e5751f;--bg:#F5F6F8;--text:#111827;--text2:#545566;--border:#E5E7EB;--white:#fff;--radius:16px;--radius-sm:8px;--shadow:0 2px 12px rgba(29,38,69,.07);--shadow-h:0 6px 24px rgba(29,38,69,.12);--max-w:1140px;--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}

/* ═══ RESET ═══ */
*,*::before,*::after{box-sizing:border-box}
html{line-height:1.5;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.7;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--orange);text-decoration:none;transition:color .2s}
a:hover{color:var(--orange-dk)}
.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!important;width:1px}
h1,h2,h3,h4,h5,h6{color:var(--navy);font-weight:700;line-height:1.25;margin:0 0 .5em}
h1{font-size:clamp(2rem,4vw,2.75rem)}h2{font-size:clamp(1.5rem,3vw,2rem)}h3{font-size:clamp(1.2rem,2.5vw,1.5rem)}h4{font-size:1.15rem}
p{margin:0 0 1em}

/* ═══ LAYOUT ═══ */
.jlov-container{max-width:var(--max-w);margin:0 auto;padding:0 24px}
.jlov-section{padding:80px 0}.jlov-section--alt{background:var(--white)}
.entry-content{max-width:var(--max-w);margin:0 auto;padding:0 24px}

/* ═══ HEADER ═══ */
.site-header{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000}
.header-inner{max-width:var(--max-w);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:70px}
.site-branding a{display:flex;align-items:center;gap:8px;text-decoration:none}
.site-title{font-size:1.5rem;font-weight:800;color:var(--navy);margin:0;letter-spacing:-.02em}
.custom-logo{height:38px;width:auto}
.main-navigation{display:flex;align-items:center}
.main-navigation ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
.main-navigation li{position:relative}
.main-navigation a{display:block;padding:8px 16px;color:var(--text);font-size:15px;font-weight:500;border-radius:var(--radius-sm);transition:background .2s,color .2s;text-decoration:none;white-space:nowrap}
.main-navigation a:hover,.main-navigation .current-menu-item>a{background:rgba(253,134,43,.08);color:var(--orange)}
.main-navigation .menu-cta>a,.main-navigation .menu-item--cta>a{background:var(--orange);color:var(--white)!important;border-radius:var(--radius-sm);font-weight:600;padding:8px 20px}
.main-navigation .menu-cta>a:hover,.main-navigation .menu-item--cta>a:hover{background:var(--orange-dk)}
.main-navigation ul ul{position:absolute;top:100%;left:0;min-width:200px;background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-h);padding:8px 0;flex-direction:column;gap:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
.main-navigation li:hover>ul{opacity:1;visibility:visible;transform:translateY(0)}
.main-navigation ul ul a{padding:10px 20px;border-radius:0;font-weight:400}
.menu-toggle{display:none;background:none;border:none;padding:10px;cursor:pointer}
.hamburger,.hamburger::before,.hamburger::after{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:.3s}
.hamburger{position:relative}.hamburger::before,.hamburger::after{content:'';position:absolute;left:0}
.hamburger::before{top:-7px}.hamburger::after{top:7px}
.header-right{display:flex;align-items:center;gap:8px}

/* ═══ BUTTONS ═══ */
.jlov-btn{display:inline-block;padding:14px 28px;font-size:16px;font-weight:600;font-family:var(--font);border-radius:var(--radius-sm);text-decoration:none;cursor:pointer;border:none;transition:background .2s,box-shadow .2s,transform .15s;text-align:center;line-height:1.4}
.jlov-btn:hover{transform:translateY(-1px)}
.jlov-btn--primary{background:var(--orange);color:var(--white)}.jlov-btn--primary:hover{background:var(--orange-dk);color:var(--white);box-shadow:0 4px 16px rgba(253,134,43,.3)}
.jlov-btn--secondary{background:transparent;color:var(--navy);border:2px solid var(--border)}.jlov-btn--secondary:hover{border-color:var(--navy);background:rgba(29,38,69,.04);color:var(--navy)}
.jlov-btn--navy{background:var(--navy);color:var(--white)}.jlov-btn--navy:hover{background:#151d38;color:var(--white)}
.jlov-btn--sm{padding:10px 20px;font-size:14px}.jlov-btn--lg{padding:16px 36px;font-size:18px}
.jlov-btn-group{display:flex;gap:12px;flex-wrap:wrap}
.wp-block-button .wp-block-button__link{font-family:var(--font);font-weight:600;border-radius:var(--radius-sm);padding:14px 28px;transition:background .2s}
.wp-block-button.is-style-fill .wp-block-button__link{background:var(--orange);color:var(--white)}
.wp-block-button.is-style-fill .wp-block-button__link:hover{background:var(--orange-dk)}
.wp-block-button.is-style-outline .wp-block-button__link{border:2px solid var(--navy);color:var(--navy);background:transparent}

/* ═══ CARDS ═══ */
.jlov-card{background:var(--white);border-radius:var(--radius);padding:24px 24px 32px;box-shadow:var(--shadow);transition:box-shadow .25s,transform .2s}
.jlov-card:hover{box-shadow:var(--shadow-h);transform:translateY(-2px)}
.jlov-card h3{font-size:1.15rem;margin-bottom:.4em}.jlov-card p{color:var(--text2);font-size:15px;margin-bottom:0}
.jlov-track-card{background:var(--white);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);transition:box-shadow .25s,transform .2s;display:flex;flex-direction:column}
.jlov-track-card:hover{box-shadow:var(--shadow-h);transform:translateY(-2px)}
.jlov-track-card h3{margin-bottom:.3em}.jlov-track-card p{color:var(--text2);font-size:15px;flex-grow:1}
.jlov-track-card .jlov-btn{align-self:flex-start;margin-top:auto}
.jlov-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.jlov-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.jlov-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* ═══ HERO ═══ */
.jlov-hero{padding:80px 0 120px;text-align:center}
.jlov-hero h1{max-width:780px;margin:0 auto .3em}
.jlov-hero__sub{font-size:clamp(1.05rem,2vw,1.2rem);color:var(--text2);max-width:620px;margin:0 auto 48px;line-height:1.65}

/* ═══ CTA STRIP ═══ */
.jlov-cta-strip{background:var(--navy);color:var(--white);padding:48px;text-align:center;border-radius:var(--radius);margin:48px 0}
.jlov-cta-strip h2,.jlov-cta-strip h3{color:var(--white);margin-bottom:.3em}
.jlov-cta-strip p{color:rgba(255,255,255,.8);margin-bottom:24px}

/* ═══ FEATURE ═══ */
.jlov-feature{background:var(--white);border-radius:var(--radius);padding:48px;box-shadow:var(--shadow)}
.jlov-feature ul{list-style:none;padding:0;margin:0 0 24px}
.jlov-feature li{padding:6px 0 6px 28px;position:relative;color:var(--text2)}
.jlov-feature li::before{content:'✓';position:absolute;left:0;color:var(--orange);font-weight:700}

/* ═══ SERVICE SECTIONS ═══ */
.jlov-service-section{margin-bottom:48px}
.jlov-service-section h2{font-size:1.35rem;margin-bottom:.6em;padding-left:16px;border-left:3px solid var(--orange)}
.jlov-service-section ul{list-style:none;padding:0;margin:0}
.jlov-service-section li{padding:8px 0 8px 28px;position:relative;color:var(--text2);line-height:1.6}
.jlov-service-section li::before{content:'→';position:absolute;left:0;color:var(--orange);font-weight:600}

/* ═══ FAQ ═══ */
.jlov-faq-item{border-bottom:1px solid var(--border);padding:16px 0}
.jlov-faq-item summary{font-weight:600;font-size:1.05rem;color:var(--navy);cursor:pointer;padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.jlov-faq-item summary::-webkit-details-marker{display:none}
.jlov-faq-item summary::after{content:'+';font-size:1.3rem;font-weight:300;color:var(--text2)}
.jlov-faq-item[open] summary::after{content:'−'}
.jlov-faq-item .jlov-faq-answer{padding:0 0 16px;color:var(--text2);line-height:1.7}

/* ═══ FORMS ═══ */
.jlov-form label{display:block;font-weight:600;font-size:14px;color:var(--navy);margin-bottom:6px}
.jlov-form input[type="text"],.jlov-form input[type="email"],.jlov-form input[type="tel"],.jlov-form select,.jlov-form textarea{width:100%;padding:12px 16px;font-size:16px;font-family:var(--font);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--white);color:var(--text);transition:border-color .2s;margin-bottom:16px}
.jlov-form input:focus,.jlov-form select:focus,.jlov-form textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(253,134,43,.1)}
.jlov-form textarea{min-height:120px;resize:vertical}
.jlov-form .jlov-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.jlov-form .jlov-checkbox-group label{display:flex;align-items:flex-start;gap:8px;font-weight:400;cursor:pointer;padding:4px 0}
.jlov-form .jlov-checkbox-group input[type="checkbox"]{margin-top:3px;flex-shrink:0}

/* ═══ DISCLAIMERS ═══ */
.jlov-disclaimer{font-size:13px;color:var(--text2);padding:16px 0;border-top:1px solid var(--border);margin-top:24px}
.jlov-safety-note{font-size:13px;color:#b45309;font-weight:500;padding:8px 0}

/* ═══ PULL QUOTES / MUSSAR ═══ */
.jlov-quote{text-align:center;padding:48px 24px;max-width:700px;margin:0 auto}
.jlov-quote blockquote{font-size:clamp(1.15rem,2.5vw,1.4rem);font-weight:500;color:var(--navy);line-height:1.6;margin:0 0 12px;font-style:italic;position:relative;padding:0 24px}
.jlov-quote blockquote::before,.jlov-quote blockquote::after{content:'"';color:var(--orange);font-size:2.5rem;font-weight:700;line-height:0;vertical-align:middle;font-style:normal}
.jlov-quote blockquote::after{content:'"'}
.jlov-quote cite{display:block;font-size:14px;color:var(--text2);font-style:normal;margin-top:12px}
.jlov-quote-divider{width:48px;height:3px;background:var(--orange);margin:0 auto 24px;border-radius:2px}

/* Social proof strip */
.jlov-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;padding:48px 0}
.jlov-proof-item h3{font-size:1.3rem;color:var(--navy);margin-bottom:4px}
.jlov-proof-item p{font-size:14px;color:var(--text2);margin:0}

/* Mission */
.jlov-mission{background:var(--navy);color:var(--white);border-radius:var(--radius);padding:48px;text-align:center;margin:0}
.jlov-mission h2{color:var(--white);margin-bottom:16px}
.jlov-mission p{color:rgba(255,255,255,.8);max-width:640px;margin:0 auto 8px;font-size:1.05rem;line-height:1.7}

/* Testimonial cards */
.jlov-testimonial{background:var(--white);border-radius:var(--radius);padding:24px 24px 28px;box-shadow:var(--shadow);position:relative}
.jlov-testimonial p{font-size:15px;color:var(--text2);line-height:1.7;margin:0 0 12px;font-style:italic}
.jlov-testimonial cite{font-style:normal;font-size:13px;color:var(--text2);font-weight:600}

/* ═══ QUIZ EMBED ═══ */
#quiz{min-height:400px;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:48px;margin:48px 0}

/* ═══ FOOTER ═══ */
.site-footer{background:var(--navy);color:rgba(255,255,255,.7);padding:48px 24px 24px}
.site-footer a{color:rgba(255,255,255,.7);text-decoration:none}.site-footer a:hover{color:var(--white)}
.footer-inner{max-width:var(--max-w);margin:0 auto}
.footer-cta{text-align:center;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:30px}
.footer-cta h3{color:#fff;font-size:1.5rem;margin-bottom:8px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:30px}
.footer-grid h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.footer-grid ul{list-style:none;padding:0;margin:0}.footer-grid li{margin-bottom:8px}
.footer-grid .footer-about p{font-size:14px;line-height:1.7;margin:0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px}
.footer-links{display:flex;gap:20px}
.footer-disclaimer{text-align:center;padding-top:16px;font-size:12px;color:rgba(255,255,255,.35)}

/* ═══ LEGAL ═══ */
.jlov-legal h2{font-size:1.25rem;margin-top:2em}.jlov-legal p{color:var(--text2)}

/* ═══ MOBILE STICKY CTA ═══ */
.jlov-mobile-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:999;background:var(--white);border-top:1px solid var(--border);padding:10px 16px;text-align:center;box-shadow:0 -2px 12px rgba(0,0,0,.08)}
.jlov-mobile-cta .jlov-btn{width:100%;max-width:340px;padding:12px 20px;font-size:15px}

/* ═══ BLOG ═══ */
.site-main article{margin-bottom:48px}
.entry-title a{color:var(--navy);text-decoration:none}.entry-title a:hover{color:var(--orange)}
.entry-meta{font-size:14px;color:var(--text2);margin-bottom:8px}
.wp-block-columns{gap:24px}.wp-block-separator{border-color:var(--border);opacity:1}

/* ═══ RESPONSIVE ═══ */
@media(max-width:960px){.jlov-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .menu-toggle{display:block}
  .main-navigation{display:none;position:absolute;top:70px;left:0;right:0;background:var(--white);border-bottom:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.08);padding:16px;z-index:999}
  .main-navigation.toggled{display:block}
  .main-navigation ul{flex-direction:column;gap:2px}
  .main-navigation ul ul{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding-left:16px}
  .jlov-grid-2,.jlov-grid-3,.jlov-grid-4{grid-template-columns:1fr}
  .jlov-hero{padding:48px 0}.jlov-form .jlov-form-row{grid-template-columns:1fr}
  .jlov-mobile-cta{display:block}body{padding-bottom:70px}
  .jlov-feature,.jlov-cta-strip{padding:24px}
  .jlov-cta-strip{border-radius:0;margin-left:-24px;margin-right:-24px}
  .footer-grid{grid-template-columns:1fr}
}
@media(max-width:480px){.jlov-btn-group{flex-direction:column}.jlov-btn-group .jlov-btn{width:100%}}

/* ═══════════════════════════════════════════════════════
   JLov 2.0 — navigation, guide, tools, matchmaking
   ═══════════════════════════════════════════════════════ */

/* ── Brand ── */
.site-brand-link{display:flex;flex-direction:column;line-height:1.1;text-decoration:none}
.site-tagline{font-size:11px;font-weight:500;color:var(--text2);letter-spacing:.02em;margin-top:2px}

/* ── Header nav ── */
.header-right{display:flex;align-items:center;gap:12px}
.header-cta{white-space:nowrap}
.nav-secondary-cta{display:none}
.nav-secondary-cta a{color:var(--orange);font-weight:600;font-size:14px;text-decoration:underline}

.submenu-toggle{display:none;background:none;border:0;width:36px;height:36px;cursor:pointer;position:relative;flex:0 0 auto}
.submenu-toggle::after{content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;margin:-5px 0 0 -4px;border-right:2px solid var(--text2);border-bottom:2px solid var(--text2);transform:rotate(45deg)}
.main-navigation .menu-item-has-children>a{padding-right:28px}
.main-navigation .menu-item-has-children>a::after{content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.5}
.main-navigation li.is-open>ul,.main-navigation li.is-focused>ul{opacity:1;visibility:visible;transform:translateY(0)}

/* ── Breadcrumbs ── */
.jlov-breadcrumbs{background:var(--white);border-bottom:1px solid var(--border);font-size:13px}
.jlov-breadcrumbs ol{list-style:none;margin:0;padding:12px 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.jlov-breadcrumbs li{display:flex;align-items:center;gap:6px;color:var(--text2)}
.jlov-breadcrumbs li:not(:last-child)::after{content:"/";color:var(--border)}
.jlov-breadcrumbs a{color:var(--text2);text-decoration:none}
.jlov-breadcrumbs a:hover{color:var(--orange)}
.jlov-breadcrumbs span[aria-current]{color:var(--text);font-weight:500}

/* ── Containers ── */
.jlov-container--narrow{max-width:720px;margin-left:auto;margin-right:auto;padding:0 24px}

/* ── Long-form article ── */
.jlov-article-page{padding-bottom:64px}
.jlov-article__header{padding:48px 0 24px}
.jlov-article__cat{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);text-decoration:none;margin-bottom:12px}
.jlov-article__title{font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 16px}
.jlov-article__standfirst{font-size:1.15rem;line-height:1.6;color:var(--text2);margin:0 0 20px}
.jlov-article__meta{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--text2);margin:0}
.jlov-article__image{margin-bottom:32px}
.jlov-article__image img{width:100%;height:auto;border-radius:var(--radius)}

.jlov-prose{font-size:1.06rem;line-height:1.75;color:var(--text)}
.jlov-prose > *{max-width:100%}
.jlov-prose h2{font-size:1.55rem;line-height:1.25;margin:2.2em 0 .6em;letter-spacing:-.01em}
.jlov-prose h3{font-size:1.2rem;margin:1.8em 0 .5em}
.jlov-prose p{margin:0 0 1.15em}
.jlov-prose ul,.jlov-prose ol{margin:0 0 1.3em;padding-left:1.4em}
.jlov-prose li{margin-bottom:.5em}
.jlov-prose a{color:var(--orange);text-decoration:underline;text-underline-offset:2px}
.jlov-prose blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:3px solid var(--orange);color:var(--text2);font-style:normal}
.jlov-prose strong{font-weight:600}
.jlov-prose hr{border:0;border-top:1px solid var(--border);margin:2.4em 0}
.jlov-prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.95rem}
.jlov-prose th,.jlov-prose td{border:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
.jlov-prose th{background:var(--bg);font-weight:600}

/* A callout for "this needs a rabbi, not an article" and similar. */
.jlov-note{background:var(--bg);border:1px solid var(--border);border-left:3px solid var(--navy);border-radius:var(--radius-sm);padding:16px 20px;margin:1.8em 0;font-size:.97rem}
.jlov-note strong{display:block;margin-bottom:6px}
.jlov-note--rabbi{border-left-color:var(--orange)}

.jlov-article__cta{margin:40px 0;padding:24px;background:var(--navy);border-radius:var(--radius);color:#fff}
.jlov-article__cta p{margin:0 0 16px;color:rgba(255,255,255,.88);font-size:1.02rem}
.jlov-article__author{margin:40px 0;padding-top:28px;border-top:1px solid var(--border)}
.jlov-article__author h2{font-size:1.1rem;margin:0 0 10px}
.jlov-article__author p{color:var(--text2);font-size:.97rem;margin:0 0 10px}
.jlov-article__related{margin-top:48px}
.jlov-article__related h2{font-size:1.25rem;margin:0 0 18px}

.jlov-card--link{display:block;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.jlov-card--link:hover{transform:translateY(-2px);box-shadow:var(--shadow-h)}
.jlov-card--link h3{font-size:1rem;margin:0 0 8px;color:var(--navy)}
.jlov-card--link p{font-size:.9rem;color:var(--text2);margin:0}

/* ── Guide hub ── */
.jlov-hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:32px 0}
.jlov-hub-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:24px;text-decoration:none;color:inherit;display:block;transition:transform .15s,box-shadow .15s}
.jlov-hub-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-h)}
.jlov-hub-card h3{font-size:1.08rem;color:var(--navy);margin:0 0 8px}
.jlov-hub-card p{font-size:.93rem;color:var(--text2);margin:0 0 10px}
.jlov-hub-card .count{font-size:12px;color:var(--orange);font-weight:600}

.jlov-post-list{list-style:none;margin:0;padding:0}
.jlov-post-list li{border-bottom:1px solid var(--border)}
.jlov-post-list a{display:block;padding:18px 0;text-decoration:none;color:inherit}
.jlov-post-list a:hover h3{color:var(--orange)}
.jlov-post-list h3{font-size:1.06rem;margin:0 0 6px;color:var(--navy);transition:color .15s}
.jlov-post-list p{font-size:.93rem;color:var(--text2);margin:0}

/* ── Tools ── */
.jlov-tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:32px 0}
.jlov-tool-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.jlov-tool-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-h)}
.jlov-tool-card h3{font-size:1.1rem;color:var(--navy);margin:0 0 8px}
.jlov-tool-card p{font-size:.93rem;color:var(--text2);margin:0 0 14px;flex:1}
.jlov-tool-card .duration{font-size:12px;color:var(--orange);font-weight:600;letter-spacing:.02em}

.jlov-tool-app{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:28px;margin:32px 0;box-shadow:var(--shadow)}
.jlov-tool-app__progress{height:4px;background:var(--border);border-radius:99px;overflow:hidden;margin-bottom:24px}
.jlov-tool-app__bar{height:100%;background:var(--orange);transition:width .3s}
.jlov-tool-app__step{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text2);margin-bottom:8px}
.jlov-tool-app h3{margin:0 0 6px;font-size:1.3rem;color:var(--navy)}
.jlov-tool-app__intro{color:var(--text2);margin:0 0 24px;font-size:.98rem}
.jlov-tool-app__actions{display:flex;gap:12px;justify-content:space-between;margin-top:28px;flex-wrap:wrap}

.jlov-q{padding:16px 0;border-bottom:1px solid var(--border)}
.jlov-q:last-of-type{border-bottom:0}
.jlov-q__text{font-size:1rem;margin:0 0 12px;line-height:1.5}
.jlov-scale{display:flex;gap:8px;flex-wrap:wrap}
.jlov-scale button{flex:1;min-width:62px;padding:10px 6px;border:1px solid var(--border);background:var(--white);border-radius:var(--radius-sm);cursor:pointer;font-size:12px;font-weight:500;color:var(--text2);transition:all .15s;font-family:var(--font)}
.jlov-scale button:hover{border-color:var(--orange);color:var(--orange)}
.jlov-scale button[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff}

.jlov-chip-grid{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.jlov-chip{padding:9px 14px;border:1px solid var(--border);background:var(--white);border-radius:99px;cursor:pointer;font-size:14px;color:var(--text);transition:all .15s;font-family:var(--font)}
.jlov-chip:hover{border-color:var(--orange)}
.jlov-chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.jlov-chip[disabled]{opacity:.4;cursor:not-allowed}
.jlov-chip--nn[aria-pressed="true"]{background:var(--orange);border-color:var(--orange)}
.jlov-count{font-size:13px;color:var(--text2);margin:0 0 4px}
.jlov-count strong{color:var(--orange)}

.jlov-result{background:var(--bg);border-radius:var(--radius);padding:28px;margin-top:8px}
.jlov-result h3{margin:0 0 12px;color:var(--navy)}
.jlov-result__summary{font-size:1.06rem;line-height:1.65;margin:0 0 24px}
.jlov-result__block{margin-bottom:20px}
.jlov-result__block h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text2);margin:0 0 8px}
.jlov-result__block ul{margin:0;padding-left:1.2em}
.jlov-result__block li{margin-bottom:6px;font-size:.97rem}
.jlov-readback{display:grid;gap:10px;margin-bottom:22px}
.jlov-readback__row{display:flex;gap:12px;align-items:flex-start;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px}
.jlov-band{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:99px}
.jlov-band--strong{background:#e8f5ec;color:#1d7a44}
.jlov-band--mixed{background:#fdf2e3;color:#a85f10}
.jlov-band--thin{background:#fdeaea;color:#a83232}
.jlov-readback__note{font-size:.94rem;margin:0}

/* ── Matchmaking wizard ── */
.jlov-page--wizard{padding:32px 0 64px;min-height:60vh}
.jlov-wizard-intro{max-width:720px;margin:0 auto 24px}
#jlov-wizard{max-width:760px;margin:0 auto}
.jlov-wizard__steps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.jlov-wizard__pip{flex:1;min-width:16px;height:4px;border-radius:99px;background:var(--border)}
.jlov-wizard__pip.done{background:var(--orange)}
.jlov-wizard__pip.current{background:var(--navy)}
.jlov-field{margin-bottom:20px}
.jlov-field label,.jlov-field .label{display:block;font-weight:600;font-size:.95rem;margin-bottom:6px;color:var(--text)}
.jlov-field .hint{font-size:.87rem;color:var(--text2);margin:0 0 8px;font-weight:400}
.jlov-field input[type=text],.jlov-field input[type=email],.jlov-field input[type=tel],.jlov-field input[type=number],.jlov-field input[type=date],.jlov-field input[type=url],.jlov-field select,.jlov-field textarea{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:15px;font-family:var(--font);background:var(--white);color:var(--text)}
.jlov-field textarea{min-height:110px;resize:vertical}
.jlov-field input:focus,.jlov-field select:focus,.jlov-field textarea:focus{outline:2px solid var(--orange);outline-offset:-1px;border-color:var(--orange)}
.jlov-field--row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.jlov-multi{display:flex;flex-direction:column;gap:6px}
.jlov-multi label{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.95rem;cursor:pointer;padding:7px 10px;border-radius:var(--radius-sm);border:1px solid transparent}
.jlov-multi label:hover{background:var(--bg)}
.jlov-multi input{margin-top:3px;flex:0 0 auto}
.jlov-required{color:var(--orange)}
.jlov-error{background:#fdeaea;color:#a83232;border-radius:var(--radius-sm);padding:10px 14px;font-size:.92rem;margin-bottom:16px}
.jlov-saved{font-size:.85rem;color:var(--text2)}

.jlov-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;margin:14px 0}
.jlov-photo{position:relative;aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);background:var(--bg)}
.jlov-photo img{width:100%;height:100%;object-fit:cover}
.jlov-photo button{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.6);color:#fff;border:0;border-radius:99px;width:24px;height:24px;cursor:pointer;font-size:14px;line-height:1}

.jlov-review dl{margin:0}
.jlov-review dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);margin-top:14px}
.jlov-review dd{margin:2px 0 0;font-size:.97rem}

/* ── Privacy / trust block ── */
.jlov-privacy{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;margin:28px 0}
.jlov-privacy h3{font-size:1rem;margin:0 0 10px;color:var(--navy)}
.jlov-privacy ul{margin:0;padding-left:1.2em}
.jlov-privacy li{font-size:.93rem;color:var(--text2);margin-bottom:6px}

/* ── Steps list (how it works) ── */
.jlov-steps{counter-reset:s;list-style:none;margin:28px 0;padding:0}
.jlov-steps li{counter-increment:s;position:relative;padding:0 0 22px 48px}
.jlov-steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:99px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.jlov-steps li::after{content:"";position:absolute;left:15px;top:32px;bottom:0;width:2px;background:var(--border)}
.jlov-steps li:last-child{padding-bottom:0}
.jlov-steps li:last-child::after{display:none}
.jlov-steps strong{display:block;margin-bottom:3px;color:var(--navy)}
.jlov-steps p{margin:0;color:var(--text2);font-size:.95rem}

/* ── Footer ── */
.footer-cta__sub{max-width:520px;margin:0 auto 20px;color:rgba(255,255,255,.72);font-size:1rem}
.footer-cta__buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.footer-cta__note{font-size:13px;color:rgba(255,255,255,.5);margin:0}
.footer-about h4{color:#fff;font-size:1.1rem;margin-bottom:8px}
.footer-credit{color:var(--orange)!important}
.footer-disclaimer{font-size:12px;line-height:1.6}

/* ── Mobile ── */
.jlov-mobile-cta{display:none;gap:10px}
.jlov-mobile-cta .jlov-btn{flex:1;max-width:none;width:auto}
body.jlov-nav-open{overflow:hidden}

@media (max-width:900px){
  .header-cta{display:none}
  .nav-secondary-cta{display:block;padding:14px 16px 4px;border-top:1px solid var(--border);margin-top:8px}
  .submenu-toggle{display:block;position:absolute;right:4px;top:2px}
  .main-navigation .menu-item-has-children>a::after{display:none}
  .main-navigation ul ul{display:none;position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 0 16px}
  .main-navigation li.is-open>ul{display:block}
  .jlov-mobile-cta{display:flex}
  .jlov-field--row{grid-template-columns:1fr}
  .jlov-article__header{padding:28px 0 16px}
}

/* ═══════════════════════════════════════════════════════
   2.0.1 corrections — header, buttons, rhythm
   ═══════════════════════════════════════════════════════ */

/* ── Nothing may push the page wider than the viewport ── */
html, body { max-width: 100%; overflow-x: hidden; }
.site, #page { overflow-x: clip; }

/* ── Logo ──
   The uploaded logo is 512x250. Without an explicit height it collapsed to
   zero width inside the flex header. */
.site-branding { flex: 0 0 auto; display: flex; align-items: center; }
.custom-logo-link { display: block; line-height: 0; }
.custom-logo {
  display: block;
  height: 42px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
}

/* ── Header layout ──
   Six items including "Dating & Relationship Guide" need more room than the
   old five short ones, so the bar is tighter and the drawer starts earlier. */
.header-inner { gap: 16px; }
.main-navigation { flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
.main-navigation > ul { flex-wrap: nowrap; }
.main-navigation a { padding: 8px 11px; font-size: 14.5px; }
.main-navigation .menu-item-has-children > a { padding-right: 22px; }
.main-navigation .menu-item-has-children > a::after { right: 8px; }
.main-navigation .menu-item--cta > a { padding: 8px 16px; }
.main-navigation ul ul a { padding: 10px 18px; font-size: 14px; white-space: nowrap; }

/* Submenus must never open off the right edge. */
.main-navigation > ul > li:nth-last-child(-n+3) > ul { left: auto; right: 0; }

/* ── Buttons ──
   Core block buttons render dark grey when no style variation is set. Brand
   them by default so a missing class can never produce an off-brand button. */
.wp-block-button__link {
  background-color: var(--orange);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 26px;
  text-decoration: none;
  line-height: 1.2;
  transition: background .2s, color .2s, border-color .2s;
}
.wp-block-button__link:hover { background-color: var(--orange-dk); color: #fff; }

.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline {
  background-color: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button__link.is-style-outline:hover {
  background-color: var(--navy);
  color: #fff;
}

.wp-block-buttons { gap: 12px; margin: 24px 0 0; flex-wrap: wrap; }

/* On the navy CTA panel the outline button needs to invert. */
.jlov-article__cta .wp-block-button.is-style-outline > .wp-block-button__link {
  color: #fff; border-color: rgba(255,255,255,.6);
}

/* ── Section rhythm ──
   Long prose in a 1140px container is hard to read. Constrain the text while
   letting card grids use the full width, which is what the design did before. */
.jlov-section { padding: 56px 0; }
.jlov-section > p,
.jlov-section > h2,
.jlov-section > h3,
.jlov-section > ul,
.jlov-section > ol,
.jlov-section > .wp-block-buttons,
.jlov-section > .jlov-note,
.jlov-section > .jlov-steps {
  max-width: 760px;
}
.jlov-section--alt { background: var(--white); }
.jlov-section h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; letter-spacing: -.01em; margin: 0 0 16px; }
.jlov-section h3 { font-size: 1.15rem; margin: 1.6em 0 .5em; }
.jlov-section p { font-size: 1.05rem; line-height: 1.7; color: var(--text2); }
.jlov-section p strong { color: var(--text); }

/* Centred sections keep their alignment. */
.jlov-section .has-text-align-center { max-width: 760px; margin-left: auto; margin-right: auto; }
.jlov-section > .jlov-grid-3,
.jlov-section > .jlov-grid-4,
.jlov-section > .jlov-tool-grid,
.jlov-section > .jlov-hub-grid,
.jlov-section > .jlov-post-list { max-width: none; }

/* ── Hero ── */
.jlov-hero { padding: 72px 0 40px; text-align: center; }
.jlov-hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 20px; }
.jlov-hero__sub { font-size: 1.15rem; line-height: 1.6; color: var(--text2); max-width: 620px; margin: 0 auto 28px; }
.jlov-hero .wp-block-buttons { justify-content: center; }
.jlov-trust-line { font-size: .92rem; color: var(--text2); margin-top: 20px; }

/* ── Cards ── */
.jlov-card { display: flex; flex-direction: column; }
.jlov-card h3 { font-size: 1.12rem; color: var(--navy); margin: 0 0 10px; }
.jlov-card p { font-size: .96rem; line-height: 1.6; color: var(--text2); margin: 0 0 14px; }
.jlov-card p:last-child { margin-top: auto; margin-bottom: 0; }

.jlov-track-card { display: block; text-decoration: none; color: inherit; }
.jlov-track-card h3 { font-size: 1rem; color: var(--navy); margin: 0 0 6px; }
.jlov-track-card p { font-size: .9rem; color: var(--text2); margin: 0; }

/* ── Mobile ── */
@media (max-width: 1100px) {
  .header-cta { display: none; }
  .nav-secondary-cta { display: block; padding: 14px 16px 4px; border-top: 1px solid var(--border); margin-top: 8px; }
  .main-navigation {
    display: none; position: absolute; top: 70px; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0,0,0,.08); padding: 16px; z-index: 999;
    max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .main-navigation.toggled { display: block; }
  .main-navigation > ul { flex-direction: column; flex-wrap: wrap; align-items: stretch; gap: 2px; }
  .main-navigation a { padding: 11px 12px; font-size: 16px; }
  .main-navigation > ul > li:nth-last-child(-n+3) > ul { right: auto; left: auto; }
  .submenu-toggle { display: block; position: absolute; right: 4px; top: 4px; }
  .main-navigation .menu-item-has-children > a::after { display: none; }
  .main-navigation ul ul {
    display: none; position: static; opacity: 1; visibility: visible;
    transform: none; box-shadow: none; border: none; padding: 0 0 0 14px; min-width: 0;
  }
  .main-navigation li.is-open > ul { display: block; }
  .menu-toggle { display: block; }
  .jlov-mobile-cta { display: flex; }
  .jlov-hero { padding: 44px 0 28px; }
  .jlov-section { padding: 40px 0; }
}

@media (min-width: 1101px) {
  .menu-toggle { display: none; }
}

/* ═══════════════════════════════════════════════════════
   2.0.2 — section rhythm and 404
   ═══════════════════════════════════════════════════════ */

/* ── Stronger section separation ──
   Alternating white and off-white was too subtle to read as structure. A hairline
   does the work without adding noise. */
.jlov-section { padding: 68px 0; }
.jlov-section--alt {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Homepage sections read better centred, which is how the site looked before. */
body.home .jlov-section > h2,
body.home .jlov-section > p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
body.home .jlov-section > .wp-block-buttons { justify-content: center; }
body.home .jlov-section > h2 { margin-bottom: 18px; }
body.home .jlov-section > p + p { margin-top: -4px; }

/* Interior pages stay left-aligned — long explanatory copy reads badly centred. */
.jlov-section > h2 { margin-top: 0; }
.jlov-section > h2 + p { margin-top: 0; }

/* A little more air between a heading and the section above it. */
.jlov-section > h3 { color: var(--navy); }

/* ── Grids ── */
.jlov-grid-3, .jlov-grid-4 { margin-top: 36px; }
.jlov-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.jlov-track-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  transition: transform .15s, box-shadow .15s;
}
.jlov-track-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-h); }
.jlov-section--alt .jlov-card,
.jlov-section--alt .jlov-track-card { background: var(--bg); }

/* Post list inside a homepage section shouldn't be centred. */
body.home .jlov-post-list,
body.home .jlov-post-list * { text-align: left; }
.jlov-post-list { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ── Header ── */
.header-right { gap: 0; }
.site-header { border-bottom: 1px solid var(--border); }

/* ── 404 ── */
.jlov-404 { padding: 56px 0 72px; }
.jlov-404__header { text-align: center; margin-bottom: 8px; }
.jlov-404__code {
  font-size: clamp(3.5rem, 10vw, 5.5rem); font-weight: 800; line-height: 1;
  color: var(--border); margin: 0 0 4px; letter-spacing: -.04em;
}
.jlov-404__header h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 0 0 12px; }
.jlov-404__sub { color: var(--text2); font-size: 1.05rem; margin: 0 auto; max-width: 480px; }
.jlov-404__search { margin: 40px 0; text-align: center; }
.jlov-404__search h2,
.jlov-404__recent h2 { font-size: 1.15rem; margin: 0 0 14px; }
.jlov-404__search form { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.jlov-404__search input[type=search] {
  padding: 11px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 15px; font-family: var(--font); min-width: 260px;
}
.jlov-404__search input[type=submit],
.jlov-404__search button {
  padding: 11px 22px; border: 0; border-radius: var(--radius-sm);
  background: var(--orange); color: #fff; font-weight: 600; cursor: pointer; font-family: var(--font);
}
.jlov-404__recent { margin-top: 40px; }

@media (max-width: 1100px) {
  .jlov-section { padding: 44px 0; }
  .jlov-404 { padding: 36px 0 56px; }
}

/* ═══════════════════════════════════════════════════════
   2.0.3 — correct for the Gutenberg group wrapper
   ═══════════════════════════════════════════════════════
   The group block renders an extra .wp-block-group__inner-container between
   .jlov-section and its content, so every `>` selector above missed. These
   rules match both shapes. :where() keeps specificity flat and predictable.
   ═══════════════════════════════════════════════════════ */

.jlov-section > :where(h2, h3, p, ul, ol, .wp-block-buttons, .jlov-note, .jlov-steps, blockquote),
.jlov-section > .wp-block-group__inner-container > :where(h2, h3, p, ul, ol, .wp-block-buttons, .jlov-note, .jlov-steps, blockquote) {
  max-width: 760px;
}

/* Grids and lists use the full container width. */
.jlov-section > :where(.jlov-grid-2, .jlov-grid-3, .jlov-grid-4, .jlov-tool-grid, .jlov-hub-grid),
.jlov-section > .wp-block-group__inner-container > :where(.jlov-grid-2, .jlov-grid-3, .jlov-grid-4, .jlov-tool-grid, .jlov-hub-grid) {
  max-width: none;
}

/* Homepage sections are centred; interior pages stay left-aligned so long
   explanatory copy remains readable. */
body.home .jlov-section > :where(h2, p),
body.home .jlov-section > .wp-block-group__inner-container > :where(h2, p) {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
body.home .jlov-section > .wp-block-buttons,
body.home .jlov-section > .wp-block-group__inner-container > .wp-block-buttons {
  justify-content: center;
}

/* Cards and post lists keep their own left alignment regardless. */
body.home .jlov-card,
body.home .jlov-card *,
body.home .jlov-track-card,
body.home .jlov-track-card *,
body.home .jlov-post-list,
body.home .jlov-post-list * {
  text-align: left;
}

/* The hero already centres itself; make sure the wrapper does not fight it. */
.jlov-hero > .wp-block-group__inner-container { text-align: center; }
.jlov-hero > .wp-block-group__inner-container > .wp-block-buttons { justify-content: center; }

/* Spacing between a heading and the paragraph under it. */
.jlov-section h2 { margin-bottom: 16px; }
.jlov-section h2 + p { margin-top: 0; }
.jlov-section p + h2,
.jlov-section ul + h2,
.jlov-section ol + h2 { margin-top: 2em; }

/* Interior pages: keep long-form copy in a readable column but left-aligned. */
body:not(.home) .jlov-section > .wp-block-group__inner-container > :where(h2, h3, p, ul, ol) { text-align: left; }

/* ═══════════════════════════════════════════════════════
   2.1.0 — depth, spacing and structure
   Buttons get real elevation and hover behaviour, content gets room to
   breathe, and sections get visible structure rather than running together.
   ═══════════════════════════════════════════════════════ */

:root {
  /* A layered shadow set. Two shadows per level — a tight contact shadow plus
     a soft ambient one — reads as physical depth where a single blur does not. */
  --sh-1: 0 1px 2px rgba(29,38,69,.06), 0 2px 8px rgba(29,38,69,.06);
  --sh-2: 0 2px 4px rgba(29,38,69,.07), 0 6px 20px rgba(29,38,69,.09);
  --sh-3: 0 4px 8px rgba(29,38,69,.08), 0 14px 36px rgba(29,38,69,.14);
  --sh-orange: 0 2px 6px rgba(253,134,43,.28), 0 10px 26px rgba(253,134,43,.26);
  --sh-navy: 0 2px 6px rgba(29,38,69,.24), 0 10px 26px rgba(29,38,69,.22);
  --ring: 0 0 0 3px rgba(253,134,43,.35);
}

/* ── Room to breathe ──
   The old 24px gutter put text right against the edge on laptops. */
.jlov-container { padding-left: 40px; padding-right: 40px; }
.jlov-container--narrow { padding-left: 40px; padding-right: 40px; }
.site-footer { padding: 64px 40px 28px; }
.header-inner { padding: 0 40px; }

/* ═══ BUTTONS ═══ */
.jlov-btn,
.wp-block-button__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: .005em;
  line-height: 1.3;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  border: 1.5px solid transparent;
  transition: background-color .18s ease, border-color .18s ease,
              box-shadow .22s ease, transform .16s ease, color .18s ease;
  will-change: transform;
}

/* Primary — orange, lifted, with a warm glow on hover. */
.jlov-btn--primary,
.wp-block-button__link,
.wp-block-button.is-style-fill > .wp-block-button__link {
  background-color: var(--orange);
  border-color: var(--orange-dk);
  color: #fff;
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255,255,255,.22);
}
.jlov-btn--primary:hover,
.wp-block-button__link:hover,
.wp-block-button.is-style-fill > .wp-block-button__link:hover {
  background-color: var(--orange-dk);
  border-color: var(--orange-dk);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--sh-orange), inset 0 1px 0 rgba(255,255,255,.28);
}
.jlov-btn--primary:active,
.wp-block-button__link:active {
  transform: translateY(0);
  box-shadow: var(--sh-1);
}

/* Secondary — bordered, fills toward navy on hover. */
.jlov-btn--secondary,
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline {
  background-color: var(--white);
  color: var(--navy);
  border: 1.5px solid #d3d7e0;
  box-shadow: var(--sh-1);
}
.jlov-btn--secondary:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button__link.is-style-outline:hover {
  background-color: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--sh-navy);
}
.jlov-btn--secondary:active,
.wp-block-button.is-style-outline > .wp-block-button__link:active {
  transform: translateY(0);
  box-shadow: var(--sh-1);
}

.jlov-btn--navy { background-color: var(--navy); border-color: #151d38; color: #fff; box-shadow: var(--sh-1); }
.jlov-btn--navy:hover { background-color: #151d38; color: #fff; transform: translateY(-2px); box-shadow: var(--sh-navy); }

.jlov-btn--sm, .jlov-btn--sm.jlov-btn { padding: 10px 20px; font-size: 14px; border-radius: 8px; }
.jlov-btn--lg { padding: 17px 40px; font-size: 17px; border-radius: 12px; }

/* Keyboard focus must be obvious and must not rely on the hover styles. */
.jlov-btn:focus-visible,
.wp-block-button__link:focus-visible,
.jlov-chip:focus-visible,
.jlov-scale button:focus-visible {
  outline: none;
  box-shadow: var(--ring), var(--sh-2);
}

/* On the navy CTA panel, invert the outline button so it stays visible. */
.jlov-article__cta .wp-block-button.is-style-outline > .wp-block-button__link,
.footer-cta .jlov-btn--secondary {
  background-color: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.45);
  box-shadow: none;
}
.jlov-article__cta .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.footer-cta .jlov-btn--secondary:hover {
  background-color: #fff;
  color: var(--navy);
  border-color: #fff;
}

.wp-block-buttons { gap: 14px; }

/* ═══ CARDS ═══ */
.jlov-card,
.jlov-track-card,
.jlov-tool-card,
.jlov-hub-card {
  background: var(--white);
  border: 1px solid #e7e9f0;
  border-radius: 14px;
  box-shadow: var(--sh-1);
  transition: box-shadow .25s ease, transform .2s ease, border-color .2s ease;
}
.jlov-card { padding: 30px 30px 32px; }
.jlov-tool-card, .jlov-hub-card { padding: 28px; }
.jlov-track-card { padding: 26px; }

.jlov-card:hover,
.jlov-track-card:hover,
.jlov-tool-card:hover,
.jlov-hub-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-3);
  border-color: #d8dce6;
}

/* A quiet orange edge on hover ties the cards to the brand. */
.jlov-tool-card, .jlov-hub-card, .jlov-track-card { position: relative; overflow: hidden; }
.jlov-tool-card::before,
.jlov-hub-card::before,
.jlov-track-card::before {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 3px; background: var(--orange);
  opacity: 0; transition: opacity .2s ease;
}
.jlov-tool-card:hover::before,
.jlov-hub-card:hover::before,
.jlov-track-card:hover::before { opacity: 1; }

/* Cards sitting on a white section need a tinted face to stay distinct. */
.jlov-section--alt .jlov-card,
.jlov-section--alt .jlov-track-card,
.jlov-section--alt .jlov-tool-card,
.jlov-section--alt .jlov-hub-card { background: #fbfcfd; }

/* ═══ SECTION STRUCTURE ═══ */
.jlov-section { padding: 84px 0; position: relative; }
.jlov-section--alt { border-top: 1px solid #e7e9f0; border-bottom: 1px solid #e7e9f0; }

/* A short orange rule under a section heading gives the page a spine. */
body.home .jlov-section > h2::after,
body.home .jlov-section > .wp-block-group__inner-container > h2::after {
  content: "";
  display: block;
  width: 52px; height: 3px;
  background: var(--orange);
  border-radius: 2px;
  margin: 18px auto 0;
}
body:not(.home) .jlov-section > h2::after,
body:not(.home) .jlov-section > .wp-block-group__inner-container > h2::after {
  content: "";
  display: block;
  width: 44px; height: 3px;
  background: var(--orange);
  border-radius: 2px;
  margin: 14px 0 0;
}
/* Sub-headings inside long articles do not need the rule. */
.jlov-prose h2::after { display: none !important; }

.jlov-section h2 { margin-bottom: 24px; }
.jlov-section h2 + p { margin-top: 0; }

/* ═══ HERO ═══ */
.jlov-hero { padding: 84px 0 64px; position: relative; }
.jlov-hero h1 { margin-bottom: 22px; }
.jlov-hero .wp-block-buttons { margin-top: 32px; }
.jlov-trust-line {
  display: inline-block;
  margin-top: 26px;
  padding: 7px 16px;
  border: 1px solid #e0e3ec;
  border-radius: 99px;
  background: var(--white);
  font-size: .88rem;
  color: var(--text2);
  box-shadow: var(--sh-1);
}

/* ═══ STEPS ═══ */
.jlov-steps li::before { box-shadow: var(--sh-1); }
.jlov-steps li { padding-left: 56px; }

/* ═══ CALLOUTS ═══ */
.jlov-note {
  border-radius: 12px;
  border: 1px solid #e3e6ee;
  border-left: 4px solid var(--navy);
  box-shadow: var(--sh-1);
  padding: 20px 24px;
  background: var(--white);
}
.jlov-note--rabbi { border-left-color: var(--orange); }

.jlov-privacy { border-radius: 14px; box-shadow: var(--sh-1); padding: 26px 30px; }

/* ═══ ARTICLE ═══ */
.jlov-article__cta { border-radius: 14px; padding: 30px 32px; box-shadow: var(--sh-2); }
.jlov-post-list a { padding: 22px 0; }

/* ═══ FORM CONTROLS ═══ */
.jlov-chip {
  box-shadow: var(--sh-1);
  border-color: #dfe3ec;
  transition: background-color .16s, border-color .16s, box-shadow .2s, transform .14s, color .16s;
}
.jlov-chip:hover { transform: translateY(-1px); box-shadow: var(--sh-2); border-color: var(--orange); }
.jlov-chip[aria-pressed="true"] { box-shadow: var(--sh-navy); }
.jlov-chip--nn[aria-pressed="true"] { box-shadow: var(--sh-orange); }

.jlov-scale button { box-shadow: var(--sh-1); border-color: #dfe3ec; }
.jlov-scale button:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }

.jlov-tool-app { border-radius: 16px; box-shadow: var(--sh-2); padding: 34px; border-color: #e7e9f0; }
.jlov-result { border-radius: 14px; padding: 32px; box-shadow: inset 0 1px 0 #fff; border: 1px solid #e7e9f0; }

/* ═══ HEADER ═══ */
.site-header { box-shadow: 0 1px 0 #e7e9f0, 0 1px 12px rgba(29,38,69,.04); }
.main-navigation ul ul { border-radius: 12px; box-shadow: var(--sh-3); border-color: #e7e9f0; padding: 10px 0; }
.main-navigation .menu-item--cta > a { box-shadow: var(--sh-1); border: 1.5px solid var(--orange-dk); }
.main-navigation .menu-item--cta > a:hover { box-shadow: var(--sh-orange); transform: translateY(-1px); }

/* ═══ MOBILE ═══ */
@media (max-width: 1100px) {
  .jlov-container, .jlov-container--narrow { padding-left: 22px; padding-right: 22px; }
  .header-inner { padding: 0 22px; }
  .site-footer { padding: 44px 22px 22px; }
  .jlov-section { padding: 52px 0; }
  .jlov-hero { padding: 48px 0 36px; }
  .jlov-card { padding: 24px; }
  .jlov-tool-app { padding: 22px; }
  .jlov-result { padding: 22px; }
  .jlov-btn, .wp-block-button__link { padding: 13px 24px; }
}

/* Respect a reduced-motion preference — the lifts are decorative. */
@media (prefers-reduced-motion: reduce) {
  .jlov-btn, .wp-block-button__link, .jlov-card, .jlov-track-card,
  .jlov-tool-card, .jlov-hub-card, .jlov-chip, .jlov-scale button {
    transition: none;
  }
  .jlov-btn:hover, .wp-block-button__link:hover, .jlov-card:hover,
  .jlov-track-card:hover, .jlov-tool-card:hover, .jlov-hub-card:hover,
  .jlov-chip:hover { transform: none; }
}

/* ═══ NAZILA ═══ */
.jlov-portrait {
  display: block;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid #e7e9f0;
  box-shadow: var(--sh-3);
}
.jlov-about-split {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  max-width: 900px;
}
body.home .jlov-about-split { margin: 0 auto; text-align: left; }
body.home .jlov-about-split p { text-align: left; margin-left: 0; margin-right: 0; }
@media (max-width: 800px) {
  .jlov-about-split { grid-template-columns: 1fr; gap: 24px; justify-items: center; text-align: center; }
  body.home .jlov-about-split { text-align: center; }
  .jlov-portrait { max-width: 200px; }
}

/* ── Homepage creed ──────────────────────────────────────
   The practice's one non-negotiable claim, given room to breathe. Deliberately
   quieter than a hero and heavier than body copy — it is the thing a visitor
   should still remember after they have forgotten the service names. */
.jlov-creed :where(h2, .wp-block-group__inner-container > h2) {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  max-width: 18ch;
  margin: 0 auto .75em;
  color: var(--navy, #12243d);
}
.jlov-creed :where(h2, .wp-block-group__inner-container > h2)::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: .55em auto 0;
  background: var(--orange, #d2691e);
  border-radius: 2px;
}
.jlov-creed p {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.06rem;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — panels instead of a scroll of prose
   
   The homepage is nine sections of heading + paragraphs + button. Individually
   each is fine; stacked full-bleed they read as one undifferentiated column,
   which is the "wall of text" problem. The fix is structural rather than
   decorative: give every section a visible edge so the eye can find where one
   idea stops and the next begins, cap the measure so no line runs 1,100px, and
   open up the rhythm between blocks.

   Scoped to .home so interior pages — which are genuinely long-form and want to
   read like documents — are left alone.
   ═══════════════════════════════════════════════════════════ */

.home .jlov-section {
  padding: 0;
  margin: 0 auto 28px;
  max-width: var(--max-w);
}
.home .jlov-section > .wp-block-group__inner-container,
.home .jlov-section--panelled {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sh-1);
  padding: 44px 44px 48px;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.home .jlov-section > .wp-block-group__inner-container:hover {
  box-shadow: var(--sh-2);
  border-color: #d8dbe2;
}

/* The alternating band becomes the accented panel rather than a background
   colour change, which stopped doing any work once everything sat on white. */
.home .jlov-section--alt > .wp-block-group__inner-container {
  background: linear-gradient(180deg, #fffaf5 0%, var(--white) 46%);
  border-color: #f2ded0;
}

/* Measure and rhythm. 68ch is about 11 words a line — comfortable, and far
   short of the full container width these paragraphs were running to. */
.home .jlov-section p {
  max-width: 68ch;
  line-height: 1.8;
  margin: 0 0 1.25em;
  color: var(--text2);
}
.home .jlov-section p:last-of-type { margin-bottom: 0; }
.home .jlov-section .has-text-align-center { margin-left: auto; margin-right: auto; }

.home .jlov-section :where(h2) {
  font-size: clamp(1.45rem, 2.7vw, 1.95rem);
  max-width: 24ch;
  margin: 0 0 .7em;
}
.home .jlov-section--alt :where(h2) { max-width: 26ch; }

/* Buttons get air above them so they read as the end of a block, not as another
   line of the paragraph. */
.home .jlov-section .wp-block-buttons { margin-top: 28px; }

/* The creed keeps its centred, quieter treatment — it is a statement, not a
   service block — but gains the same panel so it sits in the same system. */
.home .jlov-creed > .wp-block-group__inner-container {
  background: var(--navy);
  border-color: var(--navy);
  padding: 56px 44px 60px;
}
.home .jlov-creed :where(h2) { color: var(--white); max-width: 20ch; }
.home .jlov-creed p { color: #c9cede; max-width: 60ch; }
.home .jlov-creed a { color: var(--orange); font-weight: 600; }
.home .jlov-creed a:hover { color: #ffa45c; }

@media (max-width: 860px) {
  .home .jlov-section > .wp-block-group__inner-container,
  .home .jlov-creed > .wp-block-group__inner-container {
    padding: 30px 22px 34px;
  }
  .home .jlov-section { margin-bottom: 18px; }
  .home .jlov-section :where(h2) { max-width: none; }
}

/* ── "Start here" router ──────────────────────────────────
   Six situations, each one click from the thing that answers it. Someone who
   arrives mid-question should not have to read the homepage to find out where
   to go. No form, no email, no account. */
.jlov-start {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.jlov-start a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 20px 20px 22px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
  box-shadow: var(--sh-1);
  color: inherit;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.jlov-start a:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
  border-color: #d8dbe2;
  border-left-color: var(--orange-dk);
  color: inherit;
}
.jlov-start a:focus-visible { outline: none; box-shadow: var(--ring), var(--sh-2); }
.jlov-start .s-when {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--orange-dk);
}
.jlov-start .s-what { font-weight: 600; color: var(--navy); line-height: 1.35; }
.jlov-start .s-go { font-size: 14px; color: var(--text2); margin-top: auto; padding-top: 8px; }

@media (max-width: 900px) { .jlov-start { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .jlov-start { grid-template-columns: 1fr; } }

/* ── Priority chips ───────────────────────────────────────
   Eleven attributes listed as a sentence read as filler. As objects they read
   as the thing the tool actually asks you to rank. */
.jlov-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; padding: 0; list-style: none; }
.jlov-chips li {
  padding: 7px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}