/*
Theme Name: Spark Mortgage
Theme URI: https://sparkmortgage.example/
Author: Spark Mortgage Ltd.
Author URI: https://sparkmortgage.example/
Description: Classic (non-FSE) WordPress theme for Reverse Mortgage Expert in British Columbia, converted from the Spark Mortgage static landing page. All page content is editable through Advanced Custom Fields PRO Repeater fields. Requires ACF PRO for the repeater-driven sections and the Theme Settings options page; the theme falls back to sensible defaults when ACF is not active.
Version: 1.0.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: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spark-mortgage
Tags: one-column, custom-logo, custom-menu, translation-ready, landing-page
*/

/* =========================================================================
   NOTE: This file is the compiled stylesheet, ported verbatim from the
   original index.html / contact-us.html / privacy-policy.html <style> blocks.
   Page-specific rules from the inner pages are scoped under .inner-page so
   they no longer collide with the landing page.
   ========================================================================= */


  :root{
    --evergreen:#010C54;
    --evergreen-deep:#010732;
    --sage:#3E7A66;
    --sage-light:#E4EEE9;
    --blue:#2E7DB2;
    --blue-dark:#1F5E8A;
    --paper:#F8F6F0;
    --white:#FFFFFF;
    --ink:#1E2622;
    --ink-soft:#4A554F;
    --line:#D9D5CA;
    --error:#B3261E;
    --success:#2E6B4F;
    --radius:14px;
    --shadow:0 4px 20px rgba(20,64,58,.10);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none!important;transition:none!important}
  }
  body{
    font-family:'Atkinson Hyperlegible',Arial,sans-serif;
    font-size:19px;
    line-height:1.6;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:'Bitter',Georgia,serif;line-height:1.2;color:var(--evergreen)}
  img{max-width:100%}
  a{color:var(--sage)}
  :focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}

  /* ============ HEADER ============ */
  .topbar{background:var(--evergreen-deep);color:#EAF2EE;text-align:center;padding:8px 16px;font-size:16px}
  header{
    background:var(--white);
    border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:50;
  }
  .header-inner{
    max-width:1100px;margin:0 auto;padding:12px 20px;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
  }
  .brand{display:inline-flex;align-items:center;gap:10px;font-family:'Bitter',serif;font-weight:800;font-size:19px;color:var(--evergreen);text-decoration:none;line-height:1.25}
  .brand-logo{height:76px;width:auto;flex-shrink:0}
  .brand small{display:block;font-family:'Atkinson Hyperlegible';font-weight:400;font-size:13px;color:var(--ink-soft);letter-spacing:.04em;text-transform:uppercase}
  .call-btn{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--blue);color:#fff;
    font-weight:700;font-size:17px;text-decoration:none;
    padding:12px 18px;border-radius:999px;white-space:nowrap;
    min-height:48px;
  }
  .call-btn:hover{background:var(--blue-dark)}
  .call-btn svg{width:20px;height:20px;flex-shrink:0}

  /* ============ HERO ============ */
  .hero{background:linear-gradient(180deg,var(--evergreen) 0%,var(--evergreen-deep) 100%);color:#F2F7F4;padding:44px 20px 56px}
  .hero-inner{max-width:1160px;margin:0 auto;text-align:center}
  .hero .eyebrow{
    display:inline-block;background:rgba(93,169,219,.18);border:1px solid rgba(93,169,219,.55);
    color:#BFE0F5;border-radius:999px;padding:6px 18px;font-size:16px;font-weight:700;margin-bottom:20px;
  }
  .hero h1{color:#fff;font-size:clamp(30px,5.5vw,48px);max-width:820px;margin:0 auto 16px}
  .hero h1 em{font-style:normal;color:#7FC4EF;border-bottom:4px solid #7FC4EF}
  .hero h2 {font-style:normal;color:#7FC4EF;}
  .hero h2 em{font-style:normal;color:#7FC4EF;}
  .hero p{font-size:clamp(18px,2.5vw,22px);max-width:680px;margin:0 auto;color:#D6E4DC}
  .hero .points{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:22px;font-size:17px}
  .hero .points span{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#EAF2EE}
  .hero .points svg{width:22px;height:22px;color:#7FC4EF}

  /* hero CTA buttons */
  .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:28px}
  .hero-btn{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:58px;padding:14px 34px;border-radius:999px;text-decoration:none;
    font-weight:700;font-size:18px;letter-spacing:.04em;text-transform:uppercase;
  }
  .hero-btn.primary{background:var(--blue);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25)}
  .hero-btn.primary:hover{background:var(--blue-dark)}
  .hero-btn.secondary{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.65)}
  .hero-btn.secondary:hover{border-color:#fff;background:rgba(255,255,255,.08)}

  /* Desktop: text on the left, form on the right — visible without scrolling */
  @media (min-width:1000px){
    .hero{padding:48px 24px 64px}
    .hero-inner{
      display:grid;grid-template-columns:1.05fr .95fr;gap:56px;
      align-items:start;text-align:left;
    }
    .hero h1{margin-left:0;max-width:none}
    .hero p{margin-left:0}
    .hero .points{justify-content:flex-start}
    .hero-ctas{display:none} /* the form is already beside the text on desktop */
  }

  label{display:block;font-weight:700;font-size:18px;margin-bottom:8px;color:var(--evergreen)}
  input,select{
    width:100%;min-height:58px;padding:14px 16px;
    font-family:inherit;font-size:19px;color:var(--ink);
    border:2px solid var(--line);border-radius:var(--radius);
    background:var(--white);
  }
  input:focus,select:focus{border-color:var(--sage);outline:3px solid rgba(62,122,102,.25);outline-offset:0}
  select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23010C54' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:48px}
  /* ============ SECTIONS ============ */
  section{padding:56px 20px}
  .container{max-width:1100px;margin:0 auto}
  .section-title{text-align:center;font-size:clamp(26px,4vw,36px);margin-bottom:12px}
  .section-sub{text-align:center;color:var(--ink-soft);max-width:640px;margin:0 auto 40px;font-size:19px}

  .trust-band{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px}
  .trust-item{text-align:center;padding:8px}
  .trust-item .big{font-family:'Bitter',serif;font-size:34px;font-weight:800;color:var(--evergreen)}
  .trust-item p{font-size:17px;color:var(--ink-soft)}

  .benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
  .benefit{
    background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
    padding:26px 22px;box-shadow:0 2px 8px rgba(20,64,58,.05);
  }
  .benefit .icon{width:52px;height:52px;border-radius:12px;background:var(--sage-light);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
  .benefit .icon svg{width:28px;height:28px;color:var(--evergreen)}
  .benefit h3{font-size:20px;margin-bottom:8px}
  .benefit p{font-size:17px;color:var(--ink-soft)}

  .fit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
  .fit ul{margin:10px 0 0 20px}
  .fit li{margin-bottom:10px;font-size:17px;color:var(--ink-soft)}


  .said-no{background:var(--evergreen);color:#EAF2EE}
  .said-no .section-title{color:#fff}
  .said-no .section-sub{color:#C8DAD1}
  .said-no-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
  .said-no-item{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);padding:20px}
  .said-no-item h3{color:#8FCBF2;font-size:19px;margin-bottom:6px}
  .said-no-item p{font-size:16px;color:#D6E4DC}

  .how-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;counter-reset:how}
  .how-step{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;position:relative}
  .how-step::before{
    counter-increment:how;content:counter(how);
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;
    font-family:'Bitter',serif;font-weight:800;font-size:20px;margin-bottom:14px;
  }
  .how-step h3{font-size:19px;margin-bottom:8px}
  .how-step p{font-size:17px;color:var(--ink-soft)}

  .quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
  .quote{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
  .quote .stars{color:var(--blue);font-size:18px;letter-spacing:2px;margin-bottom:10px}
  .quote p{font-size:17px;color:var(--ink);margin-bottom:14px}
  .quote cite{font-style:normal;font-weight:700;color:var(--evergreen)}

  .faq{max-width:760px;margin:0 auto}
  details{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
  summary{
    cursor:pointer;list-style:none;padding:18px 22px;font-weight:700;font-size:19px;color:var(--evergreen);
    display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:58px;
  }
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";font-size:26px;color:var(--blue);flex-shrink:0}
  details[open] summary::after{content:"–"}
  details .answer{padding:0 22px 20px;color:var(--ink-soft);font-size:18px}

  .final-cta{background:var(--sage-light);text-align:center}
  .final-cta .btn-big{
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--blue);color:#fff;text-decoration:none;
    font-size:21px;font-weight:700;min-height:62px;padding:14px 40px;border-radius:999px;margin-top:8px;
  }
  .final-cta .btn-big:hover{background:var(--blue-dark)}

  footer{background:var(--evergreen-deep);color:#B9CDC4;padding:36px 20px;font-size:15px}
  footer .container{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center}
  footer a{color:#DCE9E2}
  footer .disclaimer{flex-basis:100%;font-size:13.5px;color:#8CA79C;line-height:1.55}
  footer .footer-copy{max-width:100%}
  /* Nested inside .footer-copy, so no flex row gap separates it from the
     copyright line above. */
  footer .footer-license{display:block;font-size:13px;color:#8CA79C;margin-top:2px}

  /* sticky mobile call bar */
  .sticky-call{
    display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;
    background:var(--evergreen-deep);padding:10px 14px;gap:10px;
    box-shadow:0 -4px 16px rgba(0,0,0,.2);
  }
  .sticky-call a{
    flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:52px;border-radius:12px;font-weight:700;font-size:17px;text-decoration:none;
  }
  .sticky-call .s-call{background:var(--blue);color:#fff}
  .sticky-call .s-form{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3)}

  @media (max-width:640px){
    body{font-size:18px}
    .header-inner{padding:10px 14px}
    .brand{font-size:16px}
    .brand-logo{height:60px}
    .call-btn{font-size:15px;padding:10px 14px}
    .hero{padding:32px 16px 40px}
    .sticky-call{display:flex}
    footer{padding-bottom:96px}
  }

/* =========================================================================
   INNER PAGES (Contact / Privacy / blog) — from contact-us.html
   and privacy-policy.html, scoped so they don't affect the landing page.
   ========================================================================= */
/* contact-us.html and privacy-policy.html both set a{color:var(--blue)};
   index.html's a{color:var(--sage)} would otherwise win here. */
.inner-page a{color:var(--blue)}
/* ...but filled buttons sit on a coloured background and keep white text.
   .inner-page a is more specific than .btn-big on its own, so this has to be
   stated explicitly rather than relying on source order. */
.inner-page a.btn-big,
.inner-page a.call-btn,
.inner-page a.hero-btn,
.inner-page a.s-call,
.inner-page a.s-form{color:#fff}

.page-head{background:linear-gradient(180deg,var(--evergreen) 0%,var(--evergreen-deep) 100%);color:#F2F7F4;padding:48px 20px}
.page-head .container{max-width:900px;margin:0 auto}
.page-head h1{color:#fff;font-size:clamp(28px,4.5vw,40px)}
.page-head p{color:#C8DAD1;margin-top:10px;font-size:18px}

.page-main{max-width:900px;margin:0 auto;padding:40px 20px 64px}
.page-main--narrow{max-width:820px}

/* contact cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;text-align:center;min-width:0}
.card .icon{width:56px;height:56px;border-radius:14px;background:var(--sage-light);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.card .icon svg{width:30px;height:30px;color:var(--evergreen)}
.card h2{font-size:20px;margin-bottom:8px}
.card p{color:var(--ink-soft);font-size:17px}
.card a.big{font-size:20px;font-weight:700;text-decoration:none;display:inline-block;margin-top:4px;max-width:100%;overflow-wrap:anywhere}
.card a.big--email{font-size:16px;word-break:break-all}
.card a.big--external{font-size:17px}
.card a.big:hover{text-decoration:underline}
.card .note{font-size:15px;color:var(--ink-soft);margin-top:8px}

.cta-band{margin-top:28px;background:var(--sage-light);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;text-align:center}
.cta-band h2{font-size:23px;margin-bottom:8px}
.cta-band p{color:var(--ink-soft);margin-bottom:18px}
.btn-big{display:inline-flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;text-decoration:none;font-size:19px;font-weight:700;min-height:58px;padding:14px 36px;border-radius:999px}
.btn-big:hover{background:var(--blue-dark)}

.hours{margin-top:28px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px}
.hours h2{font-size:20px;margin-bottom:10px}
.hours p{color:var(--ink-soft);font-size:17px}

/* long-form document pages (privacy policy, terms, blog posts) */
.policy{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:36px 32px}
.policy h2{font-size:23px;margin:34px 0 12px;padding-top:6px}
.policy h2:first-child{margin-top:0}
.policy h3{font-size:20px;margin:26px 0 10px}
.policy p{margin-bottom:14px}
.policy ul,.policy ol{margin:0 0 14px 24px}
.policy li{margin-bottom:8px}
.policy blockquote{border-left:4px solid var(--sage);background:var(--sage-light);margin:0 0 18px;padding:14px 18px;border-radius:0 8px 8px 0}
.policy table{width:100%;border-collapse:collapse;margin-bottom:18px}
.policy th,.policy td{border:1px solid var(--line);padding:10px 12px;text-align:left;font-size:17px}
.policy th{background:var(--sage-light);color:var(--evergreen)}
.policy .updated{font-size:16px;color:var(--ink-soft);margin-bottom:24px}
.callout{background:var(--sage-light);border-left:4px solid var(--sage);padding:14px 18px;border-radius:0 8px 8px 0;margin:0 0 24px;font-size:17px}
.contact-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-top:8px}
.contact-box strong{color:var(--evergreen)}
.back-link{display:inline-block;margin-top:28px;font-weight:700}

/* blog list */
.post-list{display:grid;gap:20px}
.post-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.post-card h2{font-size:22px;margin-bottom:8px}
.post-card h2 a{color:var(--evergreen);text-decoration:none}
.post-card h2 a:hover{text-decoration:underline}
.post-meta{font-size:15px;color:var(--ink-soft);margin-bottom:10px}
.post-card p{color:var(--ink-soft);font-size:17px}
.post-thumb{border-radius:10px;margin-bottom:14px;display:block}

.pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:32px}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0 14px;border:2px solid var(--line);border-radius:var(--radius);background:var(--white);color:var(--evergreen);text-decoration:none;font-weight:700}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--sage-light);border-color:var(--sage)}

/* comments */
.comments-area{margin-top:28px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px}
.comments-area h2{font-size:22px;margin-bottom:16px}
.comment-list{list-style:none;margin:0 0 24px}
.comment-list ul.children{list-style:none;margin-left:24px}
.comment-body{border-bottom:1px solid var(--line);padding:16px 0}
.comment-meta{font-size:15px;color:var(--ink-soft);margin-bottom:6px}
.comment-form textarea{width:100%;min-height:140px;padding:14px 16px;font-family:inherit;font-size:18px;border:2px solid var(--line);border-radius:var(--radius)}
.comment-form .submit{min-height:58px;padding:0 28px;border:none;border-radius:var(--radius);background:var(--blue);color:#fff;font-family:inherit;font-size:18px;font-weight:700;cursor:pointer}
.comment-form .submit:hover{background:var(--blue-dark)}

/* 404 / search */
.notfound{text-align:center;padding:20px 0 10px}
.notfound h1{font-size:clamp(28px,5vw,42px);margin-bottom:12px}
.search-form{display:flex;gap:10px;max-width:520px;margin:20px auto 0}
.search-form input[type=search]{flex:1}
.search-form .search-submit{min-height:58px;padding:0 24px;border:none;border-radius:var(--radius);background:var(--blue);color:#fff;font-family:inherit;font-size:18px;font-weight:700;cursor:pointer}

/* skip link */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--white);color:var(--evergreen);padding:14px 20px;font-weight:700;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* nav menu (optional, appears only if a menu is assigned) */
.site-nav{display:none}
@media (min-width:900px){
  .site-nav{display:flex}
  .site-nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0}
  .site-nav a{color:var(--evergreen);text-decoration:none;font-weight:700;font-size:17px}
  .site-nav a:hover{color:var(--blue-dark);text-decoration:underline}
}
.footer-nav ul{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0;padding:0}
.footer-nav li{display:inline-flex;align-items:center}
.footer-nav li + li::before{content:"\00B7";margin:0 10px;color:#B9CDC4}
.footer-nav a{color:#DCE9E2;text-decoration:none}
.footer-nav a:hover{text-decoration:underline}

/* WordPress core required classes */
.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;word-wrap:normal!important}
.screen-reader-text:focus{background-color:#fff;clip:auto!important;clip-path:none;color:#1E2622;display:block;font-size:1rem;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.alignleft{float:left;margin-right:1.5em;margin-bottom:1em}
.alignright{float:right;margin-left:1.5em;margin-bottom:1em}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignwide{max-width:1100px}
.alignfull{max-width:none;width:100%}
.wp-caption{margin-bottom:1.5em;max-width:100%}
.wp-caption img[class*=wp-image-]{display:block;margin:0 auto}
.wp-caption-text,.gallery-caption{font-size:15px;color:var(--ink-soft);text-align:center;margin-top:8px}
.sticky{position:relative}
.sticky .post-card{border-color:var(--sage)}
.bypostauthor{display:block}
.entry-content>*+*{margin-top:14px}

@media (max-width:640px){
  .policy{padding:26px 20px}
  .page-main{padding:28px 16px 48px}
  .comments-area{padding:22px 18px}

  /* Sticky call bar: 10px padding + a 52px tap target made a 72px-tall bar
     that ate a chunk of a small screen. Trimmed, while staying above the
     44px minimum touch target. */
  .sticky-call{padding:7px 10px;gap:8px}
  .sticky-call a{min-height:46px;font-size:15px;gap:6px;border-radius:10px}
  .sticky-call a svg{width:16px;height:16px;flex-shrink:0}
  footer{padding-bottom:78px}

  /* Footer stacks and centres, with the nav promoted to the top. */
  footer .container{flex-direction:column;align-items:center;text-align:center;gap:14px}
  footer .footer-nav{order:-1}
  footer .footer-nav ul{justify-content:center}
  /* .disclaimer carries flex-basis:100% for the row layout; in a column that
     would resolve against the container height instead. */
  footer .disclaimer{flex-basis:auto;text-align:center}
  footer .footer-license{text-align:center}
}