/*
Theme Name: MG Consultant
Theme URI: https://michaelgrover.com/
Author: Michael Grover
Author URI: https://michaelgrover.com/
Description: Minimal custom theme for michaelgrover.com (consultant site + product pages). Designed to play nicely with Bootstrap and your plugins (e.g., ExtraSpace).
Version: 0.1.0
License: GPLv2 or later
Text Domain: mg-consultant
Tags: custom, bootstrap
*/

:root{
  /* Foundations */
  --bg: #f7d89b;
  --hilite-bg: #fcd17e;
  --surface: #fff6de;
  --text:  #2b2b2b;
  --muted: #5a5348;

  /* Brand/action */
  --primary: #15406f;
  --accent:  #8c2a3a;
  --ok:      #255d35;
  --warn:    #7a3f00;

  /* UI niceties */
  --shadow:  0 10px 30px rgba(0,0,0,.18);
  --radius:  16px;
  --radius-sm:10px;
  --maxw:    1200px;
}

* { box-sizing: border-box; }
html, body { height: 100%;  }
body{
  margin: 0;
  /* font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; */
  color: var(--text);
  /* background: var(--bg); */
  line-height: 1.55;
}

main {
  padding-top:50px !important;
}
.ast-primary-header {
  background-color: rgb(0, 156, 35) !important;
}
a { color: var(--primary); }
a:hover{ color: color-mix(in oklab, var(--primary), white 18%); }


/* =========================
   Global page layout
   ========================= */

.page-wrap{
  padding: 0 0 48px;
}

@media (max-width: 991.98px){
  .page-wrap{ padding: 56px 0 32px; }
}

/* “Sections” inside pages */
.section{
  padding: 48px 0;
}

.mobile-section {
  padding-top:12px;
}


@media (max-width: 991.98px){
  .section{ padding: 32px 0; }
}

/* =========================
   Global typography
   ========================= */

h1, h2, h3{
  color: var(--text);
  font-weight: 900;
  line-height: 1.1;
}

h1{
 	font-size: clamp(2.6rem, 4.4vw, 4.1rem) ;
	line-height: 1;
	margin: 0 0 14px;
	font-weight: 900;
}



h2{
  font-size: clamp(2.2rem, 3.5vw, 3.25rem);
  line-height: 1;
  margin: 0 0 14px;
  font-weight: 900;
}
 section.section{
  padding: 0 0 0 0;
}

.section p.lead{ color: var(--muted); max-width: 78ch; margin: 0 0 24px; font-size: 1.25rem; }


h3{
  font-size: 1.2rem;
  margin: 0 0 10px;
}

p {
  color: var(--text);
  font-size: 1.1rem;
  margin-top:0;
}

.entry-content p {
  margin-bottom: 0rem;
  margin-block-start: 1.1rem;
}
.lead,
p.lead{
  color: var(--text);
  font-size: 1.25rem;
  max-width: 78ch;
}

.eyebrow{
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
  /* margisn-bottom: 12px; */
}

/* =========================
   Surfaces
   ========================= */

.surface{
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-header {background-color:transparent;}
.card{
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  --bs-card-border-color: none !important;
}

.card .card-body{ padding: 22px; }

  /* Features */
.features{ display:grid; gap:18px; grid-template-columns: repeat(1, 1fr); }
.features2{ display:grid; gap:18px; grid-template-columns: repeat(3, 1fr); }
.card{
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card h3{ margin: 0 0 10px; font-size: 1.15rem; }
.card p{ margin: 0; color: var(--muted); font-size: 1.05rem; }


/* Pricing */
.pricing{ padding: 72px 0; border-top: 1px solid rgba(0,0,0,.08); }
.pricing-grid{ display:grid; gap:18px; grid-template-columns: repeat(3, 1fr); }
.plan{
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  display:grid; grid-auto-rows: min-content; gap: 12px;
  position: relative;
}
.plan h3{ margin: 0; font-size: 1.05rem; letter-spacing: .3px; }
/* .price{ font-size: 1.8rem; font-weight: 900; color: var(--text); } */
.muted{ color: var(--muted); font-size: .98rem; }
.ul{ list-style: none; padding: 0; margin: 8px 0 0; }
.ul li{ margin: 6px 0; color: var(--muted); }
.plan .btn{ width: 100%; text-align:center; }
.plan.pop{
  border-color: rgba(21,64,111,.35);
  box-shadow: 0 10px 30px rgba(21,64,111,.18);
}
.badge-pop{
  position:absolute; top:-12px; right: 12px;
  font-size:.72rem; letter-spacing:.06em; text-transform: uppercase;
  color: white; background-color: var(--primary);
  padding: 4px 8px; border-radius: 999px; font-weight: 900;
}
/* #wpadminbar {display:none;} */
/* Header */
.site-header{
  /* position:absolute;
  top: 0; 
  z-index: 20; */
  /* backdrop-filter: saturate(1.2) blur(8px); */
  /* background: var(--primary); */
  color: red;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
/* .site-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-weight: 650;
  letter-spacing: 0.01em;
  color:white;
  font-size:1.4rem;
  text-decoration: none;
} */
.brand-wrap{
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .3px;
}

/* Dropdown menus (WP default markup) */
.nav-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links .menu {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: end;
  align-items: center;
}

.nav-links .menu > li {
  position: relative;
}

/* Make submenu a dropdown panel */
.nav-links .menu li.menu-item-has-children > .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  margin-top: 0;
  right: 0;
  min-width: 240px;
  padding: 10px;
  /* background: var(--surface); */
  background:  var(--primary);
  /* border-radius: 12px; */
  box-shadow: var(--shadow);
  z-index: 9999;
}

.site-header,
.main-header,
.header-main,
.nav-links,
.primary-navigation {
  position: relative;
  z-index: 10000;
}

/* 2) Specifically raise dropdown menus above everything */
.nav-links .menu li.menu-item-has-children {
  position: relative; /* anchor for absolute submenu */
}

.nav-links .menu li.menu-item-has-children > .sub-menu {
  position: absolute;   /* or whatever your theme already uses */
  z-index: 20000;       /* higher than sticky subnav */
}

/* 3) Lower your product subnav so it doesn't cover dropdowns */
.ovp-subnav-wrap,
.mgc-subnav-wrap,
[class*="subnav-wrap"] {
  position: sticky;     /* or fixed */
  z-index: 500;         /* must be LOWER than header dropdown */
}

/* Submenu links */
.nav-links .sub-menu li {
  /* border-top: 1px solid #fff6de; */
  /* border-bottom: 1px solid #fff6de; */
  margin: 0;
}
.nav-links li .menu-item:hover {
  background-color: #fff6de;
  margin: 0;
}
.nav-links .sub-menu a {
  display: block;
  padding: 10px 12px;
  color: var(--text);
  color: white;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 700;
}
.nav-links .sub-menu a:hover {
  text-decoration: none;
  color: black;
}

/* Show on hover/focus (desktop) */
@media (min-width: 992px) {
  .nav-links li.menu-item-has-children:hover > .sub-menu,
  .nav-links li.menu-item-has-children:focus-within > .sub-menu {
    display: block;
  }
}

.blog .ast-blog-meta-container {display:none;}
.wp-singular .entry-meta {display:none;}
.entry-header .entry-meta {display:none;}



/* Extraspace table */

  .extraspace-comparison {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: 0.95rem;
  }
  .extraspace-comparison th,
  .extraspace-comparison td {
    border: 1px solid #ddd;
    padding: 0.75rem;
    vertical-align: top;
    text-align: left;
  }
  .extraspace-comparison thead th {
    background: #f5f5f7;
    font-weight: 600;
  }
  .extraspace-comparison tbody th {
    background: #fafafa;
    width: 18%;
  }
  .extraspace-comparison .multi {
    text-align:center;
  }
  
  td:hover {
    /* border:black solid 1px; */
    background-color: #d3d3f6;
  }
  
  @media (max-width: 768px) {
    .extraspace-comparison {
   font-size: 0.85rem;
    }
  }




/* Market Card overrides */
[data-nsmc] .package-card {
  background: var(--surface);
  border-color: rgba(21, 64, 111, .35);
  box-shadow: 0 10px 30px rgba(21, 64, 111, .18);  
  border-radius:16px;
  padding-left:0;
  padding-right: 0;
}
[data-nsmc] .package-card .card-header {
	background-color:transparent;
	border-bottom: none;
}
[data-nsmc] .package-card .card-header h2 {
  color: var(--bs-heading-color, inherit);
  
}
[data-nsmc] .package-card:hover .card-header {
  background-color:transparent;
  color:inherit;
}
[data-nsmc] .package-card .price {
	font-size: 1rem;
	    font-weight: 900;
	    color: var(--text);
}
.mc-more-info {
	width:100%;
}
[data-nsmc] form .product_display:hover {
  background-color:#c0c0c0;
  border-color: #c5c5c5;
  color: #000000 ;
}



/* Mobile: stack menu, show submenu when toggled via JS */
@media (max-width: 991.98px) {
  .nav-links .menu {
    justify-content: start;
    gap: 14px;
  }
  .nav-links .menu li.menu-item-has-children > .sub-menu {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 6px 0 0;
    background: transparent;
  }
  .nav-links .sub-menu a {
    padding: 8px 0;
    color: white; /* because your header is dark */
  }
  .nav-links .sub-menu a:hover {
    background: transparent;
    text-decoration: underline;
  }
}

.nav-links{
  display:flex;
  flex-wrap:wrap;
  gap: 22px;
  justify-content: end;
}
.nav-links a { color:white; font-weight:600; text-decoration:none; }
.nav-links a:hover{ color:var(--bg); text-decoration:underline; }

/* Active menu states (WP assigns these classes) */
.nav-links .current-menu-item > a,
.nav-links .current-menu-ancestor > a,
.nav-links .current_page_item > a,
.nav-links .current_page_ancestor > a{
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  color: var(--bg);
}

/* Buttons (works with WP + Bootstrap buttons) */
.btn{
  display:inline-block;
  border:0;
  border-radius:999px;
  padding:12px 18px;
  font-weight:800;
  cursor:pointer;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap;
  text-decoration:none;
}
.btn.btn-sm{ padding: 8px 12px; }
.btn.btn-lg{ padding: 14px 22px; }
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: var(--primary);
  color:white;
  border-color: var(--primary);
  box-shadow: 0 10px 24px rgba(21,64,111,.25);
}
.btn-primary:hover{
  background: color-mix(in oklab, var(--primary), white 10%);
  border-color: color-mix(in oklab, var(--primary), white 10%);
}

/* Cards */
.card{
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card .card-body{ padding: 0 22px 22px 22px; }

/* FAQ / Accordion (Bootstrap-friendly override) */
.accordion{
  display: grid;
  gap: 12px;
  margin-bottom: 64px;
}
.accordion-item{
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.accordion-header{ margin: 0; }
.accordion .accordion-button{
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: 900;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
}
.accordion .accordion-button:hover{
  background: rgba(0,0,0,.03);
  text-decoration: underline;
}
.accordion .accordion-button:focus{ box-shadow: none; }
.accordion .accordion-button:not(.collapsed){
  color: var(--text);
  background: rgba(0,0,0,.03);
  box-shadow: none;
}
.accordion .accordion-button::after{
  filter: brightness(0) saturate(100%);
  opacity: .55;
}
.accordion .accordion-body{
  color: var(--muted);
  font-size: 1.05rem;
}

/* Product (secondary) nav: separate from the main header */
.subnav-wrap{
  background: transparent;
  padding-top: 14px;     /* breathing room above */
  padding-bottom: 10px;
  margin-top: 10px;      /* separates it from the sticky header */
}

/* If the subnav sits inside a container row, this helps spacing */
.subnav{
  justify-content: flex-end; /* keep right aligned on desktop */
  gap: 18px;                 /* more breathing room between links */
}

.subnav a{
  color: var(--text);
  opacity: 1;
  font-weight: 700;
  text-decoration: none;
  padding: 6px 2px;          /* a little click padding */
}

.subnav a:hover{
  text-decoration: underline;
  text-underline-offset: 5px;
}

  /* Hero */
.hero { 
  padding: 0 0 48px; 
  position:relative; 
  overflow:hidden; 
  border:gray solid 2px;
  padding: .5rem;
  border-radius: 0 0 12px 12px;
  background-color:var(--hilite-bg);
  transition: .2s ease-in-out;
}

.hero h1 {
  font-size:2.2rem;
}
.hero .action-button {
  text-decoration:none;
  coor:green;
}

.hero-p {
  margin-top:0rem !important;
}

.hero-intro {
  margin-bottom:1rem;
}

.post-hero-grid p {
  margin-bottom:.5rem !important;
  /* display:none; */
}
 /* Mock card */
.mock{
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.mock .mock-bar{
  height: 38px;
  border-radius: 12px;
  background: rgba(0,0,0,.05);
  padding: 0 12px;
  display:grid;
  align-items:center;
  grid-auto-flow: column;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--muted);
  font-weight: 700;
}
.dot{ width:8px; height:8px; border-radius:50%; background: rgba(0,0,0,.25); display:inline-block; }
.mock-body{
  border-radius: 12px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.06);
  /* padding: 16px; */
  min-height:300px;
  height:auto;
  background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
}
.mock-body h3{ margin:0 0 8px; font-size: 1.05rem; }
.pill-row{ display:flex; gap:10px; flex-wrap:wrap; margin: 12px 0 0; }
.pill{
  font-size:.85rem;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  color: var(--muted);
  font-weight: 700;
}
.pill.strong{
  background: rgba(21,64,111,.10);
  border-color: rgba(21,64,111,.25);
  color: var(--primary);
}

  /* OVP subnav (separate from blue header) */

.subnav-outer {
  /* border:red solid 1px; */
  padding: 10px 8px 8px 8px; 
  background-color: var(--ast-global-color-4);

}

.ovp-subnav-wrap{
  position: sticky;
  top:0;
  z-index: 100;
  background-color: transparent;
  padding-top:18px;
  /* margin-top: 8px;   */
  /* border-bottom: 1px solid rgba(0,0,0,.08); */
}

.ovp-subnav{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
  padding: .75rem 0;
  /* background-color:red; */
}
.ovp-subnav .btn{
  white-space: nowrap;
}
.ovp-subnav a{
  color: white;
  text-decoration: none;
  font-weight: 650;
  padding: 8px 10px;
  border-radius: 999px;
}

.ovp-subnav a:hover{
  /* background: rgba(0,0,0,.06); */
  text-decoration: none;
}

@media (max-width: 768px){

  /* the outer sticky wrapper can stay the same */
  .ovp-subnav{
    display: block;          /* stop flexing the nav itself on mobile */
    padding: .25rem 0;
  }

  /* THIS is the scroll row */
  .subnav-outer{
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    padding: 10px 8px;
    scroll-snap-type: x proximity;   /* optional nice feel */
    scrollbar-width: none;
  }

  .subnav-outer::-webkit-scrollbar{
    display: none;
  }

  .subnav-outer a{
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start; /* optional */
    font-size: 14px;
    padding: 8px 10px;
  }
}


/* Footer */
.site-footer{
  padding: 38px 0 44px;
  border-top: 1px solid rgba(0,0,0,.08);
  color: var(--muted);
  font-size: .95rem;
}

/* Responsive */
@media (max-width: 1000px){
  .nav-links{ justify-content:start; gap: 14px; }
  .subnav{ justify-content:start; }
}

.wp-block-pullquote {
  padding:0;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top:1rem;
  margin-bottom:1rem;
}
.wp-block-pullquote blockquote {
  border:none;
  border-top:#6F6C6C solid 1px;
  border-bottom:#6F6C6C solid 1px;
  border-width:80%;
  color: #6F6C6C;
}

.wp-block-pullquote blockquote::before {
  display:none;
}

.wp-block-pullquote blockquote p {
 font-size:2rem;
 font-weight:900;
 margin:1rem 0 0 0; 
}

.tools p {
  margin-top:0;
}
.howiwork p {
  margin-bottom:0;
}

.tech_expertise {
  padding:1rem;
  border:1px solid black;
  background: #fff;
    border-radius: 12px;
    box-shadow:
      6px 8px 12px rgba(0, 0, 0, .5),
      0 1px 3px rgba(0, 0, 0, 0.04);
  }
}

/* OVP “diagnostic lens” boxes */

/* Equal-height row for just this section */
.featureBoxParent > .uagb-container-inner-blocks-wrap{
  display: flex;
  gap: 18px;
  align-items: stretch; /* makes children equal height */
}

/* Equal width boxes + remove margins that can fight the layout */
.featureBoxParent > .uagb-container-inner-blocks-wrap > .featureBox{
  flex: 1 1 0;
  margin: 0;
}

/* If UAGB adds widths, this prevents overflow */
.featureBoxParent > .uagb-container-inner-blocks-wrap > .featureBox{
  min-width: 0;
}

.featureBoxParent > .uagb-container-inner-blocks-wrap > .featureBox{
  align-self: stretch;
}

/* Ensure content inside each box starts at the top */
.featureBoxParent > .uagb-container-inner-blocks-wrap > .featureBox{
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* top */
}


/* Stack on mobile */
@media (max-width: 781px){
  .featureBoxParent > .uagb-container-inner-blocks-wrap{
    flex-direction: column;
  }
}


.featureBox{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  background: #fff;
  padding: 22px 22px 18px;
  margin: 14px 0;
}

/* Heading */
.featureBox .wp-block-heading{
  margin: 0 0 12px;
  font-size: 1.05rem;
  line-height: 1.25;
}
.featureBox .wp-block-heading strong{
  font-weight: 700;
}

/* List */
.featureBox .wp-block-list{
  margin: 0;
  padding-left: 1.1rem; /* keep bullets tidy */
}
.featureBox .wp-block-list li{
  margin: 0 0 8px;
  line-height: 1.45;
}
.featureBox .wp-block-list li:last-child{
  margin-bottom: 0;
}

/* Optional: subtle separation when stacked */
.featureBox + .featureBox{
  margin-top: 16px;
}

.featureBox img {
  border: black solid 1px;
  padding:7px;
}
  .mobile-only {display:none;}
.no-mobile {display:block;}
.hide  {display:none;}


/* Profile Picture */

  .headshot {
    }

  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 250px;
    background-color:#3498db;
    border-radius: 1rem;
    position:relative;
    margin-top:1.5rem;
    border:white solid 2px;
    overflow: hidden;
  }
    
    .headshot .image {
      position: absolute;
      bottom:0;
      width: 350px;
      height: 253px;
      /* border: solid 2px yellow; */
      /* overflow: hidden; */
      /* object-fit: cover; */
      /* object-position: center bottom;   /* or: 50% 20%, left center, right top, etc */ */
    }
    
    /* Front image (initial) */
    .image-front {
        width: 100%;
        /* max-width:350px; */
        height: 100%;
        background-image: url('/wp-content/uploads/2026/01/self-front.jpg'); /* Replace with your image URL */
        background-size: cover;
    }
    
    /* Hover effect to switch images */
    .image-container:hover .image-front {
        background-image: url('/wp-content/uploads/2026/01/self-back.png'); /* Replace with your image URL */
        transition: .15s ease-in-out;
    }
    
    
    .who-hero__chips{
      display:flex;
      flex-wrap:wrap;
      justify-content:left;
      gap:10px;
      list-style:none;
      padding:0;
      margin:0;
    }
    .who-hero__chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 10px;
      margin-left:2rem;
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-radius: 999px;
      font-size: 0.95rem;
      font-weight: bold;
      line-height: 1;
      /* text-transform: uppercase; */
      background: rgba(190, 188, 188, 0.724);
      /* background: white; */
      white-space: nowrap;
    }

.product-flag {
  background-color: #009c23;
  color:white;
  /* width:30%; */
  position:absolute;
  left:0;
  top:1rem;
  height:40px;
  box-shadow: var(--shadow);
}
.product-flag .pf-words {
  font-size:1.2rem;
  padding: .5rem 1rem .5rem 1rem;
  margin-top:18px;
  font-weight:bold;
}
.product-flag .pf-words a {
  color:white;
  text-decoration: none; 
}

/* If these end up in 3 columns, keep padding sane on small screens */
@media (max-width: 781px){
  .featureBox{
    padding: 18px 18px 14px;
  }
  .mobile-only {display:block;}
  .no-mobile {display:none;}
  .hide {display:none;}

  .product-flag {display:none;}
}

/* Optional “report-like” feel: slightly muted bullets */
.featureBox .wp-block-list li::marker{
  color: rgba(0,0,0,.45);
}
.sidebox {}