/*
Theme Name: Madibe Partner Onboarding
Theme URI: https://www.madibe.co.za/
Author: Madibe Consulting
Description: Landing page theme for the Madibe Consulting partner onboarding campaign (Namibia, 2026). Single-page scrollytelling layout with pinned services stage, animated mesh backgrounds and scroll-spy navigation.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
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: madibe-partner
*/

/* ============================================================
   1. Design system (carried over from the source design file)
   ============================================================ */
:root{--acc:#2E86DE;--acc2:#4FC3E8;--navy:#071A2E;--navy2:#0C2742;--ink:#0B1B2B;--mut:#54687C;--line:rgba(7,26,46,.10);--grey:#F3F6FA}

/* No box-sizing reset shipped with the theme: every box with width:100% (or
   a percentage width) plus horizontal padding computed *wider* than its
   container in the default content-box model. On mobile, where padding is a
   much bigger fraction of the viewport, this is what pushed content past the
   right edge and caused x-axis overflow/horizontal scrollbars. */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden}
a{color:var(--acc);text-decoration:none}
a:hover{color:#1B5FA8}
::selection{background:var(--acc);color:#fff}
@keyframes mdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes mdPulse{0%{opacity:.55;transform:scale(.82)}70%{opacity:0;transform:scale(1.9)}100%{opacity:0;transform:scale(1.9)}}
@keyframes mdScan{0%{transform:translateY(-100%)}100%{transform:translateY(700%)}}
/* Fixed header bar covers ~66-80px; without this, jumping to a section (via
   the scroll-spy rail or a direct #hash link) lands its top edge right under
   the bar, hiding the heading. */
#overview,#opportunity,#process,#services,#invite,#activate{scroll-margin-top:96px}

/* Top nav (Services / Meeting / Next steps) removed per request - the
   left-hand scroll-spy rail already covers in-page navigation. header.php is
   theme markup and can't be hand-edited here, so the links are hidden rather
   than deleted from the file. */
header nav{display:none!important}

@media (max-width:1180px){[data-rail]{display:none!important}}
@media (max-width:1150px){
  [data-split]{grid-template-columns:1fr!important}
  [data-rev]{direction:ltr!important}
  [data-step2-head]{order:-1;margin-bottom:8px}
  /* The "Why partner" intro column is sticky so it stays in view alongside
     the four cards in the two-column desktop layout. Once the grid collapses
     to a single stacked column below this breakpoint there's no second
     column for it to track, so the sticky positioning has nothing left to do
     except behave unpredictably (pinning briefly, jittering) inside its own
     short block. Static on mobile matches how the rest of the stack behaves. */
  #overview [data-split] > div:first-child{position:static!important;top:auto!important}
}
[data-why]{grid-template-columns:repeat(4,1fr)!important}
[data-why] > div:nth-child(5),[data-why] > div:nth-child(6){grid-column:span 2}
@media (max-width:1150px){[data-why]{grid-template-columns:repeat(2,1fr)!important}[data-why] > div:nth-child(5),[data-why] > div:nth-child(6){grid-column:span 1}}
@media (max-width:700px){[data-why]{grid-template-columns:1fr!important}[data-step1-grid]{grid-template-columns:1fr!important}}
[data-logogrid="sec"]{grid-template-columns:repeat(5,1fr)!important}
[data-logogrid="stack"]{grid-template-columns:repeat(9,1fr)!important}
@media (max-width:1150px){[data-logogrid="stack"]{grid-template-columns:repeat(3,1fr)!important}}
@media (max-width:900px){[data-logogrid="sec"]{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:640px){[data-diagram]{grid-template-columns:1fr!important}[data-diagram] [data-diagram-node]{width:100%!important;padding:6px 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ============================================================
   2. Compiled hover states
   These were style-hover="" attributes in the design file. Inline
   style="" wins over class selectors, hence !important.
   ============================================================ */
.mdh-1:hover{color:#fff !important}
.mdh-2:hover{transform:translateY(-6px) !important;box-shadow:0 22px 48px rgba(7,26,46,.10) !important;border-color:rgba(46,134,222,.4) !important}
.mdh-3:hover{transform:translateY(-6px) !important;box-shadow:0 22px 48px rgba(7,26,46,.10) !important}
.mdh-4:hover{transform:translateY(-6px) !important;background:#fff !important;border-color:rgba(46,134,222,.35) !important;box-shadow:0 22px 48px rgba(7,26,46,.09) !important}
.mdh-5:hover{transform:translateY(-6px) !important;box-shadow:0 22px 48px rgba(7,26,46,.09) !important}
.mdh-6:hover{transform:translateY(-8px) !important;background:rgba(79,195,232,.09) !important;border-color:rgba(79,195,232,.42) !important}
.mdh-7:hover{transform:translateY(-8px) !important;border-color:rgba(79,195,232,.6) !important}
.mdh-8:hover{transform:translateY(-5px) !important;background:#fff !important;border-color:rgba(46,134,222,.35) !important}
.mdh-9:hover{transform:translateY(-6px) !important;box-shadow:0 20px 44px rgba(7,26,46,.10) !important}
.mdh-10:hover{transform:translateY(-6px) !important;box-shadow:0 20px 44px rgba(7,26,46,.22) !important}
.mdh-11:hover{border-color:rgba(46,134,222,.45) !important;transform:translateY(-4px) !important}
.mdh-12:hover{transform:translateY(-8px) rotate(-.6deg) !important}
.mdh-13:hover{transform:translateY(-6px) !important;background:rgba(79,195,232,.10) !important;border-color:rgba(79,195,232,.4) !important}
.mdh-14:hover{transform:translateY(-6px) !important;border-color:rgba(79,195,232,.65) !important}
.mdh-15:hover{transform:translateY(-4px) !important;background:#fff !important;border-color:rgba(46,134,222,.4) !important;box-shadow:0 18px 40px rgba(7,26,46,.09) !important}
.mdh-16:hover{background:#fbfcfe !important}
.mdh-17:hover{opacity:1 !important}

/* ============================================================
   3. WordPress / theme glue
   ============================================================ */

/* ---- Reveal on scroll ----------------------------------------------------
   Content is visible by default. Elements are only hidden while <html> carries
   .md-anim, which JavaScript adds and is responsible for removing. If anything
   goes wrong — script blocked, observer never fires, compositor stalled — the
   class comes off (or is never added) and every word stays readable.
   Never hide content in a way that needs JS to undo. */
.md-anim [data-rv]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  will-change:opacity, transform;
}
.md-anim [data-rv].md-in{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion:reduce){
  .md-anim [data-rv]{ opacity:1!important; transform:none!important; transition:none!important; }
}

/* Customizer-backed background images sitting behind gradients.
   .md-slot-img is absolutely positioned, so its wrapper MUST be a containing
   block or the image escapes and paints over the rest of the page. Most
   wrappers carry inline position:absolute already (inline wins over this rule,
   so they are untouched); this guarantees the containing block for any wrapper
   that does not — e.g. the Step 1 "Partner selection" thumbnail. */
div:has(> .md-slot-img){ position:relative; }

.md-slot-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* Keep the admin bar from hiding the fixed header */
body.admin-bar #mdbar{ top:32px; }
@media screen and (max-width:782px){ body.admin-bar #mdbar{ top:46px; } }

/* WordPress core alignment/caption classes, for editor content */
.alignleft{ float:left; margin-right:1.5em; }
.alignright{ float:right; margin-left:1.5em; }
.aligncenter{ display:block; margin-left:auto; margin-right:auto; }
.screen-reader-text{
  border:0; clip-path:inset(50%); height:1px; margin:-1px;
  overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal!important;
}
.skip-link:focus{
  position:fixed; top:10px; left:10px; z-index:100000;
  padding:12px 20px; background:#fff; color:#0B1B2B;
  border-radius:8px; font:500 14px/1 'IBM Plex Sans',sans-serif;
  clip-path:none; width:auto; height:auto;
}

/* Fallback page/post styling for anything that isn't the landing page */
.md-fallback{ max-width:760px; margin:0 auto; padding:160px 24px 100px; }
.md-fallback h1,.md-fallback h2{ font-family:Archivo,sans-serif; letter-spacing:-.03em; }
.md-fallback p,.md-fallback li{ font:300 17px/1.7 'IBM Plex Sans',sans-serif; color:var(--mut); }