/*
Theme Name: EmpowerMind Now
Theme URI: https://empowermindnow.com
Author: EmpowerMind Now
Description: Custom theme for EmpowerMind Now — a personal growth and coaching platform. Built to match the approved brand design system (indigo/gold palette, Fraunces + Inter typography).
Version: 1.0.0
Requires PHP: 7.4
Text Domain: empowermind-now
*/

/* ==========================================================================
   DESIGN TOKENS — matches the approved static design exactly
   ========================================================================== */
:root{
  --indigo:#2E2560;
  --indigo-deep:#1C1740;
  --gold:#C6923B;
  --gold-light:#E3B064;
  --mist:#F1ECF7;
  --cream:#faf8f5;
  --ink:#1F1B33;
  --slate:#665F76;
  --line:#EDEAF3;
  --white:#fff;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter',sans-serif;color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Fraunces',serif;color:var(--indigo);font-weight:600;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:0.9rem 1.7rem;border-radius:999px;font-weight:600;font-size:0.95rem;border:none;cursor:pointer;font-family:inherit;transition:transform .2s ease,box-shadow .2s ease;}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(46,37,96,0.35);}
.btn-primary{background:var(--indigo);color:#fff;}
.btn-primary:hover{background:var(--indigo-deep);}
.btn-gold{background:var(--gold);color:var(--indigo-deep);}
.btn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--indigo);}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:10px;display:block;}
.center{text-align:center;}

/* ==========================================================================
   TOP RIBBON
   ========================================================================== */
.topbar{background:var(--indigo-deep);padding:9px 0;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;}
.topbar-phone{display:flex;align-items:center;gap:8px;color:#fff;font-size:0.82rem;font-weight:600;}
.topbar-number{color:var(--gold-light);}
.topbar-phone svg{width:14px;height:14px;}
.topbar-social{display:flex;gap:14px;}
.topbar-social a{color:rgba(255,255,255,0.7);transition:color .2s ease;}
.topbar-social a:hover{color:var(--gold-light);}
.topbar-social svg{width:15px;height:15px;}

/* ==========================================================================
   NAV
   ========================================================================== */
.site-nav{border-bottom:1px solid var(--line);padding:18px 0;position:sticky;top:0;background:rgba(255,255,255,0.92);backdrop-filter:blur(8px);z-index:100;}

/* ==========================================================================
   ENTRY CONTENT — styles anything typed in the normal WordPress editor
   (paragraphs, headings, lists, images, quotes, buttons) so any new page
   you create automatically looks like part of the site, no theme editing needed.
   ========================================================================== */
.entry-content{font-size:1.02rem;line-height:1.8;color:var(--ink);}
.entry-content h1{font-size:2.2rem;margin:2rem 0 1rem;}
.entry-content h2{font-size:1.8rem;margin:2rem 0 1rem;}
.entry-content h3{font-size:1.4rem;margin:1.6rem 0 0.8rem;}
.entry-content h4{font-size:1.15rem;margin:1.4rem 0 0.6rem;color:var(--indigo);font-family:'Inter',sans-serif;font-weight:600;}
.entry-content p{margin-bottom:1.4rem;}
.entry-content a{color:var(--gold);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.entry-content a:hover{color:var(--indigo);}
.entry-content ul,.entry-content ol{margin:0 0 1.4rem 1.4rem;}
.entry-content li{margin-bottom:0.5rem;}
.entry-content blockquote{
  border-left:3px solid var(--gold);background:var(--mist);border-radius:0 12px 12px 0;
  padding:1.2rem 1.6rem;margin:1.6rem 0;font-family:'Fraunces',serif;font-style:italic;color:var(--indigo);font-size:1.1rem;
}
.entry-content img{border-radius:16px;margin:1.6rem 0;}
.entry-content figure{margin:1.6rem 0;}
.entry-content figcaption{font-size:0.85rem;color:var(--slate);text-align:center;margin-top:0.5rem;}
.entry-content hr{border:none;border-top:1px solid var(--line);margin:2.4rem 0;}
.entry-content table{width:100%;border-collapse:collapse;margin-bottom:1.6rem;}
.entry-content table th,.entry-content table td{border:1px solid var(--line);padding:0.7rem 1rem;text-align:left;}
.entry-content table th{background:var(--mist);color:var(--indigo);}
/* WordPress's built-in button block, styled to match our .btn */
.entry-content .wp-block-button__link{
  display:inline-flex;align-items:center;background:var(--indigo)!important;color:#fff!important;
  padding:0.9rem 1.7rem!important;border-radius:999px!important;font-weight:600;text-decoration:none!important;
}
.entry-content .wp-block-button__link:hover{background:var(--indigo-deep)!important;}
/* WordPress's built-in columns/gallery blocks stay usable without extra work */
.entry-content .wp-block-columns{gap:2rem;}
.entry-content .wp-block-gallery img{border-radius:12px;}

/* ==========================================================================
   RESPONSIVE GRID UTILITIES — use these classes instead of inline grid
   styles anywhere on the site. Inline "style=display:grid..." CANNOT be
   made responsive by media queries below, which is why pages using them
   broke on mobile. These classes fix that, site-wide, in one place.
   ========================================================================== */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem;}
.hero-split{display:grid;grid-template-columns:1.1fr 0.9fr;gap:2.5rem;align-items:center;}
.hero-split.wide-left{grid-template-columns:1.2fr 0.8fr;}
.hero-split.sidebar-narrow{grid-template-columns:1fr 260px;}

@media (max-width: 980px){
  .grid-3, .grid-4, .grid-5{grid-template-columns:1fr 1fr;}
  .hero-split, .hero-split.wide-left, .hero-split.sidebar-narrow{grid-template-columns:1fr;}
  .hero-split .hero-visual, .hero-split > div:last-child img{order:-1;}
}
@media (max-width: 620px){
  .grid-2, .grid-3, .grid-4, .grid-5{grid-template-columns:1fr;}
}

/* ==========================================================================
   CARD HOVER ANIMATIONS — reusable across every page so cards consistently
   lift and icons animate on hover, matching the originally approved designs.
   ========================================================================== */
.hover-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.hover-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -18px rgba(46,37,96,0.25);}
.hover-card:hover .hover-icon{transform:scale(1.08) rotate(-4deg);}
.hover-icon{transition:transform .25s ease;}
.hover-lift{transition:transform .25s ease,box-shadow .25s ease;}
.hover-lift:hover{transform:translateY(-4px);box-shadow:0 16px 32px -16px rgba(46,37,96,0.2);}

nav{border-bottom:1px solid var(--line);padding:18px 0;position:sticky;top:0;background:rgba(255,255,255,0.92);backdrop-filter:blur(8px);z-index:100;}
.nav-inner{display:flex;justify-content:space-between;align-items:center;}
.logo{font-family:'Fraunces',serif;font-weight:600;font-size:19px;color:var(--indigo);}
.logo span{color:var(--gold);}
.navlinks{display:flex;gap:26px;font-size:14px;font-weight:500;color:var(--ink);align-items:center;list-style:none;}
.navlinks a{position:relative;padding:4px 0;}
.navlinks a::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--gold);transition:right .25s ease;}
.navlinks a:hover::after,.navlinks .current-menu-item a::after{right:0;}
.nav-dropdown{position:relative;}
.dropdown-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 32px -12px rgba(46,37,96,0.22);padding:8px;min-width:140px;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s ease;z-index:50;list-style:none;}
.nav-dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.dropdown-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:13.5px;color:var(--ink);white-space:nowrap;}
.dropdown-menu a:hover{background:var(--mist);color:var(--indigo);}
.navcta{background:var(--indigo);color:#fff;padding:12px 22px;border-radius:999px;font-weight:600;font-size:14px;transition:transform .2s ease,background .2s ease;}
.navcta:hover{background:var(--indigo-deep);transform:translateY(-2px);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--indigo);margin:5px 0;}
.nav-close{display:none;}

/* ==========================================================================
   SHARED SECTION / CARD PATTERNS
   ========================================================================== */
.section{padding:64px 0;}
.section-mist{background:var(--mist);padding:64px 0;}
.hero{padding:56px 0 40px;background:var(--cream);}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--indigo-deep);color:rgba(255,255,255,0.75);padding:56px 0 24px;}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:0.4rem;}
.site-footer h4{color:#fff;font-family:'Inter';font-size:0.9rem;font-weight:600;margin-bottom:10px;}
.site-footer ul{list-style:none;font-size:0.88rem;line-height:2;}
.site-footer a:hover{color:var(--gold-light);}
.footer-bottom{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,0.12);display:flex;justify-content:space-between;font-size:0.78rem;}

/* ==========================================================================
   WOOCOMMERCE OVERRIDES (book shop)
   ========================================================================== */
.woocommerce ul.products li.product{border:1px solid var(--line);border-radius:16px;padding:1.4rem;transition:transform .25s ease,box-shadow .25s ease;}
.woocommerce ul.products li.product:hover{transform:translateY(-6px);box-shadow:0 20px 40px -18px rgba(46,37,96,0.25);}
.woocommerce ul.products li.product .price{color:var(--indigo);font-family:'Fraunces',serif;font-weight:600;}
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit{
  background:var(--indigo)!important;color:#fff!important;border-radius:999px!important;
  font-family:'Inter',sans-serif!important;font-weight:600!important;padding:0.8rem 1.5rem!important;border:none!important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{background:var(--indigo-deep)!important;}
.woocommerce span.onsale{background:var(--gold)!important;color:var(--indigo-deep)!important;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px){
  .navlinks{display:none;}
  .nav-toggle{display:block;}

  /* Mobile menu: narrower slide-in panel from the right (not full width),
     with its own close (X) button positioned inside the panel */
  .mobile-menu-panel{display:none;}
  .mobile-menu-panel.mobile-open{
    display:block;position:fixed;top:0;right:0;bottom:0;
    width:78%;max-width:300px;background:#fff;padding:70px 24px 20px;
    box-shadow:-16px 0 40px -16px rgba(46,37,96,0.3);
    border-left:1px solid var(--line);z-index:100;overflow-y:auto;
  }
  .mobile-menu-panel .navlinks{display:flex;flex-direction:column;gap:4px;}
  .mobile-menu-panel .navlinks li{width:100%;}
  .mobile-menu-panel .navlinks a{display:block;padding:12px 0;border-bottom:1px solid var(--line);}
  .mobile-menu-panel .dropdown-menu{
    position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;
    padding-left:14px;display:none;
  }
  .mobile-menu-panel .nav-dropdown.open .dropdown-menu{display:block;}

  .nav-close{
    display:none;position:absolute;top:20px;right:20px;
    width:32px;height:32px;border-radius:50%;background:var(--mist);border:none;
    align-items:center;justify-content:center;cursor:pointer;font-size:20px;color:var(--indigo);line-height:1;
  }
  .mobile-menu-panel.mobile-open .nav-close{display:flex;}

  .nav-overlay{display:none;position:fixed;inset:0;background:rgba(28,23,64,0.4);z-index:99;}
  .nav-overlay.open{display:block;}
  .footer-grid{grid-template-columns:1fr 1fr;}

  /* Solid nav on mobile — the semi-transparent blur effect looked broken
     with large heading text ghosting through underneath it while scrolling */
  .site-nav{background:#fff;backdrop-filter:none;}
}

/* ==========================================================================
   MOBILE POLISH — headings, buttons, nav, footer
   Inline font-sizes on headings can't be resized by normal CSS rules since
   inline styles win by default; !important is used deliberately here to
   override them specifically for small screens.
   ========================================================================== */
@media (max-width: 980px){
  .footer-grid{grid-template-columns:1fr !important;}
  .wrap{padding:0 20px !important;}
  .topbar-phone span{display:none;}

  /* Headline sizing — scales smaller on narrow screens so short phrases
     like a name or "Real progress." don't awkwardly split across lines */
  .hero h1{font-size:clamp(1.5rem, 6.5vw, 2.1rem) !important;line-height:1.28 !important;margin-bottom:0.9rem !important;}
  .hero p{font-size:0.92rem !important;}

  /* Buttons — compact and centered, not stretched full-width (which looked
     oversized). Only real single-column forms (Contact, Newsletter) stay full-width. */
  .btn{
    width:auto !important;justify-content:center !important;font-size:0.85rem !important;
    padding:0.75rem 1.3rem !important;box-sizing:border-box !important;
  }
  .submit-btn, .newsletter-form button, .form-card .submit-btn{width:100% !important;}

  /* Nav — smaller logo and CTA so they fit on one line next to the hamburger */
  .logo{font-size:16px !important;}
  .navcta{font-size:12px !important;padding:9px 14px !important;}
  .nav-inner{gap:8px !important;flex-wrap:nowrap !important;}

  /* Home hero icon box (Clarity/Direction/Action) — center everything on mobile */
  .hero-icon-box{text-align:center !important;}
  .hero-icon-box > div{justify-content:center !important;}

  /* WooCommerce shop grid — force single-column full-width products on mobile.
     WooCommerce sets product widths/float inline via its own stylesheet with
     high specificity, so !important + float:none is required to fully override it. */
  .woocommerce ul.products{display:grid !important;grid-template-columns:1fr !important;gap:1.4rem !important;}
  .woocommerce ul.products li.product{
    width:100% !important;max-width:100% !important;margin:0 !important;
    float:none !important;clear:both !important;
  }

  /* Section padding — tighter rhythm on small screens */
  .section, .section-mist{padding:10px 0 !important;}

  /* Card alignment consistency — every card-style element centers its content
     on mobile, regardless of desktop layout AND regardless of any page-specific
     <style> block that also defines these classes (!important is required here
     because those page-level styles sit later in the document and would
     otherwise win over this shared stylesheet on equal specificity). */
  .pillar-card, .area-card, .res-card, .tool-card, .cred-card,
  .value-item, .why-item, .journey-item, .get-item, .process-item,
  .learn-card .learn-body, .info-item{
    text-align:center !important;
  }
  .pillar-dot, .area-dot, .tool-dot, .res-card .ic, .cred-card .ic,
  .why-item .ic, .get-item .ic, .info-item .ic{
    margin-left:auto !important;margin-right:auto !important;
  }
  .info-item{
    flex-direction:column !important;align-items:center !important;
  }
  .info-item p, .info-item h4{text-align:center !important;}

  /* Footer — consistent vertical rhythm regardless of how much text each column has,
     visually separated with a divider between stacked columns */
  .footer-grid > div{padding-bottom:1.4rem !important;margin-bottom:1.4rem !important;border-bottom:1px solid rgba(255,255,255,0.12) !important;text-align:center !important;}
  .footer-grid > div:last-child{border-bottom:none !important;margin-bottom:0 !important;padding-bottom:0 !important;}
  .footer-brand p{max-width:none !important;}
  .site-footer li{margin-bottom:6px !important;line-height:1.4 !important;}
  .site-footer ul{line-height:1.4 !important;}
  .site-footer .btn{width:auto !important;display:inline-flex !important;}
  .footer-bottom{flex-direction:column !important;gap:8px !important;text-align:center !important;}
}
/* ==========================================================================
   BLOG DROPDOWN — styles WordPress's own menu structure (used when you
   build the menu yourself in Appearance > Menus) to match the original
   Articles/Vlogs dropdown design.
   ========================================================================== */
.navlinks .menu-item-has-children{position:relative;}
.navlinks .menu-item-has-children > a::after{content: ' \25BE';
    font-size: 24px;
    margin-left: 5px;
    margin-bottom: -0.7px;}
.navlinks .sub-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 32px -12px rgba(46,37,96,0.22);
  padding:8px;min-width:140px;list-style:none;
  opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  z-index:50;
}
.navlinks .menu-item-has-children:hover > .sub-menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.navlinks .sub-menu li{width:100%;}
.navlinks .sub-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:13.5px;color:var(--ink);white-space:nowrap;}
.navlinks .sub-menu a:hover{background:var(--mist);color:var(--indigo);}

/* Mobile: tap to open instead of hover */
@media (max-width: 980px){
  .mobile-menu-panel .sub-menu{
    position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;
    padding-left:14px;display:none;
  }
  .mobile-menu-panel .menu-item-has-children.open > .sub-menu{display:block;}
}
/* Sets an exact, fixed size for the uploaded logo in the nav bar */
.logo img,
.custom-logo-link img{
  width: 240px;
  height: 78px;
  object-fit: contain;
  display: block;
}
body.home .hero {
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 560px;
  padding: 0px;
}
.hero {
  height: auto;
  min-height: 175px;
  padding: 60px 24px;
}


.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:0;}
.hero-text-overlay{position:absolute;top:50%;left:0;transform:translateY(-50%);max-width:600px;padding:0 5%;z-index:1;
    
}
.btn{
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 980px){
  .hero{height:auto;}
  .hero img{position:static;width:100%;height:auto;}
  .hero-text-overlay{position:static;transform:none;padding:2rem 20px;max-width:100%;}
}
/* Hover animation for Home page's "You're not alone" cards and
   "A clear path. Real change." process icons */
.grid-5 > div,
.grid-4 > div{
  transition: transform .25s ease, box-shadow .25s ease;
}
.grid-5 > div:hover,
.grid-4 > div:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -18px rgba(46,37,96,0.25);
}
.grid-5 > div:hover > div:first-child,
.grid-4 > div:hover > div:first-child{
  transform: scale(1.1);
  background-color: var(--gold-light) !important;
  transition: transform .25s ease, background-color .25s ease;
}

.form-card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid #eee;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  padding: 32px;
  max-width: 460px;
}

.form-card .wpcf7-form label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: #1e1b4b;
  margin-bottom: 20px;
}

.form-card input[type="text"],
.form-card input[type="email"],
.form-card select,
.form-card textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #e3e3e8 !important;
  border-radius: 10px !important;
  font-size: 14px;
  margin-top: 6px;
  font-weight: 400;
  color: #333;
  background: #fff;
}

.form-card input::placeholder,
.form-card textarea::placeholder {
  color: #9ca3af;
}

.form-card select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e1b4b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  padding-right: 40px !important;
  cursor: pointer;
}

.form-card textarea {
  height: 70px !important;
  resize: vertical;
}
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  outline: none;
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
}

/* Two-column First / Last name row */
.form-card .row-2col {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 4px;
}

@media (max-width: 480px) {
  .form-card .row-2col {
    grid-template-columns: 1fr;
  }
}

/* Submit button - rounded pill, dark navy */
.form-card .wpcf7-submit,
.form-card input[type="submit"] {
  width: 100%;
  background: #2d2467 !important;
  color: #fff;
  border: none;
  padding: 15px;
  border-radius: 999px !important;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  margin-top: 12px;
  transition: background 0.2s ease;
}

.form-card .wpcf7-submit:hover,
.form-card input[type="submit"]:hover {
  background: #241d54 !important;
}

/* Helper text under button */
.form-card .form-note {
  text-align: center !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: #6b7280 !important;
  margin: 14px 0 0 !important;
}

.form-card .wpcf7-form p {
  margin: 0 0 18px;
}
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #25D366;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  z-index: 9999;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 22px rgba(0,0,0,0.28);
}

@media (max-width: 480px) {
  .whatsapp-float {
    width: 52px;
    height: 52px;
    bottom: 16px;
    right: 16px;
  }
}