/*
Theme Name: MojoTheme
Theme URI: https://site-by-step.com/
Author: MojoTheme
Description: Fast, secure, mobile-first block theme with transparent header and full-bleed hero.
Version: 1.0.1
Requires at least: 6.8.3
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mojotheme
Tags: block-theme, full-site-editing, responsive, minimal
*/

:root{
  --mojo-steel:#2B6CB0;
  --mojo-steel-dark:#1E4E8C;
  --mojo-amber:#F59E0B;
  --mojo-amber-dark:#B45309;
  --mojo-charcoal:#1E293B;
  --mojo-white:#ffffff;
  --mojo-max:1400px;
  --mojo-pad:20px;
  --header-h:68px;
}

@media (min-width:640px){:root{--header-h:74px}}

/* Mobile header behavior + button text fix */
@media (max-width: 640px) {
  .site-header {
    background: rgba(255,255,255,0.50); /* more opaque for readability */
    backdrop-filter: blur(4px);
    padding: 8px var(--mojo-pad);
  }

  .site-header .inner {
    flex-wrap: wrap; /* allow nav or button to drop if needed */
  }

  /* .site-header .wp-block-navigation__responsive-container {
    width: 100%;
    background: rgba(255,255,255,0.50);
    border-top: 1px solid #e5e7eb;
    padding: 10px 0;
  } */

  /* Hide the header button on mobile */
  .site-header .wp-element-button {display: none !important;}

  /* Ensure header stays on top */
  .site-header {
    position: relative;
    z-index: 999;
  }
}

@media (min-width:1024px){:root{--header-h:80px}}

html,body{margin:0;padding:0}
html{overflow-x:hidden}
body{
  font-family: var(--wp--preset--font-family--roboto, Roboto), sans-serif;
  color:var(--mojo-charcoal);
  background:var(--mojo-white);
}

/* Ensure content clears fixed header */
.wp-site-blocks{padding-top:var(--header-h)}

/* Admin bar safety */
body.admin-bar .site-header{top:32px}
@media (max-width:782px){
  body.admin-bar .site-header{top:46px}
}

/* Utility: capped inner width */
.container{
  max-width:var(--mojo-max);
  margin:0 auto;
  padding:0 var(--mojo-pad);
}

/* Full-bleed bands without 100vw */
.bleed{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* Header */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:999;
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(6px);
}
.site-header .inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--mojo-max);
  margin:0 auto;
  padding:10px var(--mojo-pad);
}
.site-header .wp-block-navigation{
  margin-left:auto; margin-right:16px;
}
.site-header .wp-block-navigation a{
  color:var(--mojo-charcoal); font-weight:500;
}

/* Buttons */
.wp-element-button{border-radius:10px; padding:.75rem 1.25rem; font-weight:500; transition:transform .15s ease, background .15s ease, color .15s ease}
.is-style-mojo-steel .wp-element-button{background:var(--mojo-steel); color:var(--mojo-white)}
.is-style-mojo-steel .wp-element-button:hover{background:var(--mojo-steel-dark); transform:translateY(-2px)}
.is-style-mojo-amber .wp-element-button{background:var(--mojo-amber); color:var(--mojo-white)}
.is-style-mojo-amber .wp-element-button:hover{background:var(--mojo-amber-dark); transform:translateY(-2px)}
.is-style-mojo-outline .wp-element-button{background:transparent; color:var(--mojo-steel); border:2px solid var(--mojo-steel)}
.is-style-mojo-outline .wp-element-button:hover{background:var(--mojo-steel); color:var(--mojo-white); transform:translateY(-2px)}
.wp-element-button:focus-visible{outline:2px dashed var(--mojo-amber); outline-offset:2px}

/* Hero */
.hero{color:#fff;
  position:relative;
  display: flex;
  min-height: 100vh;
  align-items: center; 
  background: url('/wp-content/uploads/hero-guy-truck.webp') center center / cover no-repeat;
}
/* .hero .container{padding-top:min(20vh,160px); width: 1400; padding-bottom: 0} */
.hero .container{width: 1400px; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
.hero h1{font-family: var(--wp--preset--font-family--montserrat, Montserrat), sans-serif; font-weight:700; font-size:clamp(2rem,5vw,3rem); margin:0 0 .75rem}
.hero p{font-size:1.1rem; line-height:1.6; margin:0 0 1.5rem}

/* Front page: let the hero touch the top; header overlays it */
.home .wp-site-blocks { padding-top: 0; }
.home .wp-site-blocks > *:first-child { margin-top: 0; }
.home .hero { margin-top: 0; 
  color: #fff;
  position: relative;
}
/* .home .hero .container { padding-bottom: 0; min-height: 100vh;} Remove bottom padding on front page */

/* Blog card */
.blog-card{border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; background:#eef2f7; transition:transform .15s ease}
.blog-card:hover{transform:translateY(-3px)}
.blog-card .entry{padding:20px}
.blog-card .wp-block-post-title a{color:var(--mojo-charcoal)}
.blog-card .wp-block-post-title a:hover{color:var(--mojo-steel)}

.blog-card img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* Optional: limit height for uniform cards */
.blog-card img {
  max-height: 240px; /* adjust as needed */
  width: 100%;
  object-fit: cover;
  border-bottom: 1px solid #e5e7eb;
}


/* Force 1 / 2 / 3 column blog grid */
.wp-block-query .wp-block-post-template {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .wp-block-query .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .wp-block-query .wp-block-post-template {
    grid-template-columns: repeat(3, 1fr);
  }
}

footer.site-footer{background:#f8fafc}


/* ========== Mobile Navigation (clean, 800px and below) ========== */
@media (max-width: 800px) {
  /* Core shows the hamburger automatically; hide inline list until modal opens */
  .wp-block-navigation .wp-block-navigation__container { 
    display: none; 
  }

  /* When open, WP adds .is-menu-open to the responsive container */
  .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; flex-direction: column;
    background: rgba(30,41,59,0.98);
    overflow: auto;
    padding: calc(var(--header-h,68px) + var(--admin-offset,0px) + 12px) var(--mojo-pad,20px) 24px;
  }

  /* Reveal and stack links inside the modal */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: block;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li { 
    margin: 0 0 10px;
  }
  .wp-block-navigation__responsive-container.is-menu-open a {
    display: block; padding: 12px 8px; color: #fff; text-decoration: none;
  }
  .wp-block-navigation__responsive-container.is-menu-open a:hover {
    color: var(--mojo-amber, #F59E0B);
  }

  /* Prevent page scroll when modal open */
  body.has-modal-open { overflow: hidden; }
}

/* Admin bar offset so the overlay doesn't slip underneath it */
body.admin-bar { --admin-offset: 32px; }
@media (max-width: 782px){ body.admin-bar { --admin-offset: 46px; } }

/* =============================
   NAV PATCH (2025-10-20)
   - Desktop >=801px: show inline menu, hide hamburger/responsive container
   - Mobile <=800px: hamburger opens full-height overlay from very top
   ============================= */
@media (min-width: 801px){
  .wp-block-navigation .wp-block-navigation__container{ display:flex !important; }
  .wp-block-navigation__responsive-container-open{ display:none !important; }
  .wp-block-navigation__responsive-container{ display:none !important; }
}

/* Mobile overlay behavior */
@media (max-width: 800px){
  /* Hide inline list; let the hamburger show */
  .wp-block-navigation .wp-block-navigation__container{ display:none !important; }

  /* Keep container hidden until open */
  .wp-block-navigation__responsive-container{ display:none; }

  /* OPEN STATE */
  .wp-block-navigation__responsive-container.is-menu-open{
    display:block !important;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(30,41,59,.96);
    /* Make sure the overlay fills the viewport and starts at the top */
    height: 100dvh;            /* modern viewport unit accounting for browser UI */
    max-height: 100dvh;
    overflow: auto;            /* scroll the overlay if content is long */
    -webkit-overflow-scrolling: touch;
    padding: 56px 20px 24px;   /* reduced top padding so items start near top */
  }

  /* Remove phantom spacing inside content wrapper */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
    margin:0; padding:0;
  }

  /* Show the list inside the modal */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
    display:block !important;
  }

  /* Link spacing */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li{ margin:0 0 10px; }
  .wp-block-navigation__responsive-container.is-menu-open a{
    display:block; padding:12px 8px; color:#fff; text-decoration:none;
  }
  .wp-block-navigation__responsive-container.is-menu-open a:hover{ color: var(--mojo-amber,#F59E0B); }

  /* Close button pinned so it doesn't push content */
  .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close{
    position: fixed; top: 12px; right: 12px; z-index: 100001;
  }

  /* Prevent background scroll when menu open */
  body.has-modal-open{ overflow: hidden; }
}

/* Admin bar offsets for logged-in views */
body.admin-bar .wp-block-navigation__responsive-container.is-menu-open{ padding-top: 88px; }
@media (max-width: 782px){
  body.admin-bar .wp-block-navigation__responsive-container.is-menu-open{ padding-top: 102px; }
  body.admin-bar .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close{ top: 44px; }
}

/* ==================================================
   NAVIGATION FIXES (2025-10-20)
   - Ensure desktop inline nav is visible
   - Hide hamburger/overlay on desktop
   - Improve mobile overlay spacing (touch-friendly)
   ================================================== */

/* Desktop >= 801px */
@media (min-width: 801px){
  /* Show inline list */
  header .wp-block-navigation .wp-block-navigation__container{
    display: flex !important;
    gap: 20px;
    align-items: center;
  }
  /* Hide the hamburger button & overlay container */
  header .wp-block-navigation__responsive-container-open{
    display: none !important;
  }
  header .wp-block-navigation__responsive-container{
    display: none !important;
  }
}

/* Mobile <= 800px */
@media (max-width: 800px){
  /* Touch-friendly spacing */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li{
    margin: 0 0 16px; /* more space between items */
  }
  .wp-block-navigation__responsive-container.is-menu-open a{
    display: block;
    padding: 14px 10px;     /* bigger hit target */
    line-height: 1.65;      /* comfortable line height */
    text-decoration: none;
  }

  /* Ensure overlay opens full height from top */
  .wp-block-navigation__responsive-container.is-menu-open{
    display: flex !important;
    position: fixed; inset: 0;
    z-index: 100000;
    flex-direction: column;
    background: rgba(30,41,59,.96);
    height: 100dvh; max-height: 100dvh;
    overflow: auto; -webkit-overflow-scrolling: touch;
    padding: 56px 20px 24px;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
    margin: 0; padding: 0;
  }
  .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close{
    position: fixed; top: 12px; right: 12px; z-index: 100001;
  }

  /* Background scroll lock */
  body.has-modal-open{ overflow: hidden; }
}

/* If a previous rule globally hid containers, undo it safely */
.wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-container-content,
.wp-block-navigation .wp-block-navigation__container{
  visibility: visible !important;
  opacity: 1 !important;
}
/* === NAV: desktop visible, mobile overlay tidy === */

/* Desktop ≥801px: show inline links, hide hamburger/overlay */
@media (min-width: 801px){
  header .wp-block-navigation .wp-block-navigation__container{
    display:flex !important; gap:20px; align-items:center;
  }
  header .wp-block-navigation__responsive-container-open{ display:none !important; }
  header .wp-block-navigation__responsive-container{ display:none !important; }
}

/* Mobile ≤800px: keep overlay open from top with ample spacing */
@media (max-width: 800px){
  .wp-block-navigation__responsive-container.is-menu-open{
    display:flex !important; position:fixed; inset:0; z-index:100000;
    flex-direction:column; background:rgba(30,41,59,.96);
    height:100dvh; max-height:100dvh; overflow:auto; -webkit-overflow-scrolling:touch;
    padding:56px 20px 24px;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{ margin:0; padding:0; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{ display:block !important; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li{ margin:0 0 16px; }
  .wp-block-navigation__responsive-container.is-menu-open a{ display:block; padding:14px 10px; line-height:1.65; }
  .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close{ position:fixed; top:12px; right:12px; z-index:100001; }
  body.has-modal-open{ overflow:hidden; }
}

/* --- NAV: desktop inline, mobile overlay --- */

/* Desktop ≥801px */
@media (min-width:801px){
  /* make sure the inline list renders */
  .wp-block-group.inner .wp-block-navigation .wp-block-navigation__container{
    display:flex !important;
    gap:32px;
    align-items:center;
  }
  /* hide hamburger + overlay shell on desktop */
  .wp-block-navigation__responsive-container-open{ display:none !important; }
  .wp-block-navigation__responsive-container{ display:none !important; }
  /* layout row on the right */
  .wp-block-group.nav-and-cta{ display:flex; gap:32px; align-items:center; }
}

/* Mobile ≤800px */
@media (max-width:800px){
  /* hide inline list so hamburger is the UI */
  .wp-block-navigation .wp-block-navigation__container{ display:none !important; }
  /* overlay styling (you already have this, but keep for safety) */
  .wp-block-navigation__responsive-container.is-menu-open{
    display:flex !important; position:fixed; inset:0; z-index:100000;
    flex-direction:column; background:rgba(30,41,59,.96);
    height:100dvh; overflow:auto; -webkit-overflow-scrolling:touch;
    padding:56px 20px 24px;
  }
  .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close{
    position:fixed; top:12px; right:12px;
  }
  body.has-modal-open{ overflow:hidden; }
}