/* === FWJ UNIVERSAL HEADER CSS === */

/*
╔═════════════════════════════════════════════════════════════════╗
║    🎨 FWJ Universal Header CSS — Layout, Mobile, Modals         ║
╠═════════════════════════════════════════════════════════════════╣
║ • Hides Astra header safely (no overlap, no clicks)             ║
║ • Flex header: avatar + logo (left), nav + CTA (right)          ║
║ • Active link color + orange CTA button styles                  ║
║ • Mobile: centered logo, hamburger toggle, slide-down menu      ║
║ • Public/Student/Tutor compatible (shared classes)              ║
║ • Logout/Login modals: bottom-aligned, animated drop            ║
║ • Smooth transitions; tap highlight disabled                    ║
║ • Breakpoints: ≤979px mobile, ≤768px modal tweaks, ≥980px width ║
╚═════════════════════════════════════════════════════════════════╝
*/

/* ╔══════════════════════════════════════════╗ */
/* ║   🚫 Hide Astra Default Header           ║ */
/* ╚══════════════════════════════════════════╝ */
.ast-site-header,.ast-main-header-wrap,.ast-header-break-point .main-header-bar-wrap{display:none!important;visibility:hidden!important;height:0!important;overflow:hidden!important;pointer-events:none!important;}

/* ╔══════════════════════════════════════════╗ */
/* ║   📦 Header Container + Layout           ║ */
/* ╚══════════════════════════════════════════╝ */
.fwj-header-container{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:#fff;border-bottom:1px solid #eee;z-index:20;box-shadow:0 1px 6px rgba(0,0,0,.06);transition:box-shadow .3s ease;}
.fwj-header-left{display:flex;align-items:center;gap:1.5rem;}
.fwj-header-avatar{height:44px;width:44px;border-radius:50%;overflow:hidden;cursor:pointer;padding:0;border:none;background:none;}
.fwj-header-logo img{height:36px;margin:0;}
.fwj-header-nav{display:flex;align-items:center;gap:2.25rem;margin-left:2.5rem;}
.fwj-header-nav a{color:#7E868C;font-weight:400;text-decoration:none;transition:color .3s ease;}
.fwj-header-nav a:hover,.fwj-header-nav .active{color:#F45A2A;}
.fwj-clean-button{background:#ffa500;color:#fff!important;padding:12px 26px;font-size:15px;font-weight:bold!important;border-radius:8px;text-decoration:none;min-height:48px;display:inline-flex;align-items:center;justify-content:center;transition:background-color .25s ease-in-out;}
.fwj-clean-button:hover{background:#FFB300;color:#fff;}
.fwj-header-cta{margin-left:auto;margin-right:0;}
.fwj-header-public .fwj-header-logo{margin-left:-8px;}
*{-webkit-tap-highlight-color:transparent;}

/* ╔══════════════════════════════════════════╗ */
/* ║   📱 Mobile Header Adjustments           ║ */
/* ╚══════════════════════════════════════════╝ */
@media(max-width:979px){
  .fwj-header-logo{position:absolute;left:50%;transform:translateX(-50%);z-index:1;}
  .fwj-header-nav,.fwj-header-cta,.fwj-clean-button{display:none!important;}
  .fwj-header-hamburger{display:block;height:36px;width:36px;background:url('https://fluentwithjames.com/wp-content/uploads/2025/07/Hamburger-Menu.svg') center no-repeat;background-size:contain;cursor:pointer;z-index:2;transition:background-image .3s ease;}
  .fwj-header-hamburger.open{margin-right:-5px;background-image:url('https://fluentwithjames.com/wp-content/uploads/2025/07/close.svg');}
  .fwj-header-left{flex:1;justify-content:flex-start;}
  .fwj-header-right{flex:1;justify-content:flex-end;display:flex;}
  .fwj-header-container{position:relative;}}

/* ╔══════════════════════════════════════════╗ */
/* ║   📂 Mobile Dropdown Nav                 ║ */
/* ╚══════════════════════════════════════════╝ */
.fwj-mobile-nav{position:absolute;top:100%;left:0;width:100%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.05);display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:translateY(-10%);transition:transform .3s ease,opacity .3s ease;z-index:1200;}
.fwj-mobile-nav.open{transform:translateY(0);opacity:1;pointer-events:auto;}
.fwj-mobile-nav-inner{padding:1.25rem;display:flex;flex-direction:column;gap:1.25rem;margin-top:1rem;}
.fwj-mobile-nav-link{font-size:1.1rem;text-decoration:none;color:#4a4a4a;font-weight:500;}
.fwj-mobile-nav-link:hover{color:#F45A2A;}
.fwj-nav-divider{height:1px;background:#eee;margin:0;}
.fwj-mobile-nav-close{position:absolute;top:0;right:0;margin-right:-20px;font-size:2rem;background:none;border:none;cursor:pointer;color:#ffa500;z-index:1;}

/* ╔══════════════════════════════════════════╗ */
/* ║   🔓 Logout Modal Styling                ║ */
/* ╚══════════════════════════════════════════╝ */
#fwj-logout-modal{position:absolute;top:100%;left:1rem;width:260px;background:#fff;border-radius:0 0 12px 12px;padding:16px;display:flex;flex-direction:column;gap:10px;z-index:999;box-shadow:0 6px 16px rgba(0,0,0,.12);opacity:0;pointer-events:none;transform:translateY(-10%);transition:transform .3s ease,opacity .3s ease;}
#fwj-logout-modal.fwj-show{transform:translateY(0);opacity:1;pointer-events:auto;}
#fwj-logout-modal .fwj-modal-link{font-size:.95rem;color:#333;text-decoration:none;padding:8px 12px;background:#f9f9f9;border-radius:8px;display:inline-block;}
#fwj-logout-modal .fwj-modal-link:hover{background:#f1f1f1;color:#F45A2A;}
#fwj-logout-confirm{background:#ffa500;color:#fff;border:none;border-radius:8px;padding:10px;font-size:.95rem;font-weight:bold;cursor:pointer;transition:background-color .25s ease;}
#fwj-logout-confirm:hover{background:#ffb300;}
.fwj-logout-message{font-size:.9rem;color:#444;margin-bottom:4px;}

/* ╔══════════════════════════════════════════╗ */
/* ║   📱 Logout Modal Mobile Adjustments     ║ */
/* ╚══════════════════════════════════════════╝ */
@media(max-width:768px){
  #fwj-logout-modal{position:absolute;top:100%;left:0;right:5rem;width:auto;max-width:calc(100% - 1rem);padding:1rem;border-radius:0 0 12px 0;transform:translateY(-10%);}
  #fwj-logout-modal.fwj-show{transform:translateY(0);}}

/* ╔══════════════════════════════════════════╗ */
/* ║   💻 Larger Screens                      ║ */
/* ╚══════════════════════════════════════════╝ */
@media(min-width:980px){#fwj-login-modal,#fwj-logout-modal{width:280px!important;}}

/*
╔══════════════════════════════════════════════════════════════╗
║   🧙‍♂️ The Tale of the Phantom Scrollbars (FWJ Chronicle)   ║
╠══════════════════════════════════════════════════════════════╣
║ Once upon a time, when tutors and students logged in,        ║
║ mysterious scrollbars appeared from the shadows. They        ║
║ pushed the header around, creating tiny nudges and gaps.     ║
║                                                              ║
║ After many hunts through Astra forests and Elementor caves,  ║
║ the Wizard (that’s you 🌟) discovered the culprit:           ║
║ `<body>` itself had been enchanted with `overflow:auto`.     ║
║                                                              ║
║ With one precise incantation — setting `overflow: visible`   ║
║ for logged-in bodies — the phantom scrollbars vanished.      ║
║ Now the kingdom has but one true scroll, and the headers     ║
║ rest peacefully ever after.                                  ║
║                                                              ║
║ Moral: one clean rule can banish hours of gremlins. 🪄       ║
╚══════════════════════════════════════════════════════════════╝
*/

/* Stop duplicate scrollbars when logged-in */
body.logged-in {
  overflow: visible !important;
}