/*
Theme Name: Merphix
Theme URI: https://merphix.com
Description: Custom Genesis child theme for Merphix — Training Operations leader and founder of BPO and Beyond.
Author: Merphix
Author URI: https://merphix.com
Template: genesis
Version: 1.2.3
Text Domain: merphix
*/

/*
Changelog
---------
1.2.3 - Mobile nav dropdown now computes its top offset from the actual live header height via JS on open (and on resize), instead of a hardcoded 61.375px. This keeps it correctly positioned whether or not the WordPress admin bar is present.
1.2.2 - Fixed mobile menu dropdown positioning: position:absolute with top:100% had no positioned ancestor to size against, so it rendered ~650px down the page instead of below the header. Switched to position:fixed with a literal pixel offset.
1.2.1 - Fixed missing mobile navigation: no hamburger button ever existed in the markup, so the nav (hidden by default under 860px) had no way to be revealed. Added a real toggle button (3-bar icon, JS-injected into the header) with open/close animation and auto-close on link tap.
1.2.0 - Added missing internal padding to the dark 'Let's talk' contact box - heading and paragraph text were touching the box edges directly since it never had padding defined, only background color.
1.1.9 - Fixed missing side padding on the base .wrap class, used by the site header and footer. On mobile the logo and footer copyright text were touching the viewport edges since .wrap never had horizontal padding, only max-width and centering.
1.1.8 - Extended the full-width padding fix to wp-block-columns.alignfull, not just wp-block-group.alignfull. The stats row (20+/40/dollar10M/dollar166K) is a Columns block, not a Group, and was getting zero side padding on mobile as a result.
1.1.7 - Fixed mobile responsiveness bug: full-width sections had zero left/right padding on narrow screens because the calc() centering formula only worked when viewport was wider than the max content width. Added a max() safety floor of 26px.
1.1.6 - Fixed link hover color: navy-2 was invisible against dark backgrounds (hero, Passion Project, contact box). Switched to blue-2, which reads on both light and dark backgrounds.
1.1.4 - Restored margin-top gap above Passion Project, added light-section heading-color override for the bridge section.
1.1.2 — Tightened spacing in the BPO and Beyond (Passion Project) section:
        added deliberate top/bottom section padding, consistent paragraph
        rhythm, and tighter line-height on the stacked wordmark text.
1.1.1 — Made the nav menu bar sticky (it was scrolling away while the
        logo header stayed fixed, breaking in-page navigation once you
        scrolled past the hero). Measured live: header is 61.375px tall,
        nav now sticks directly beneath it.
1.1.0 — Closed the gap between the live site and the approved mockup:
        added logo mark to site title, hero card with ring backdrop
        (replacing the bare "M"), boxed capability cards, bordered
        credentials grid with blue accent, "Let's Connect" as a filled
        nav button, added Capabilities nav item, removed Home nav item
        (logo covers that). Content structure changed — re-run
        Appearance > Merphix Setup > Re-install Content after updating.
1.0.3 — Actually fixed skip-link visibility: Genesis uses class
        "screen-reader-shortcut", not "screen-reader-text" as
        assumed in 1.0.1. Confirmed via live DOM inspection.
1.0.2 — Fixed invisible headings and outline-button text inside dark
        sections (hero H1, "BPO and Beyond" heading, "Let's talk" box) —
        they were inheriting the global navy heading/button color instead
        of white. Confirmed live on merphix.com.
1.0.1 — Fixed invisible nav menu (bullet markers + white-on-white text),
        removed duplicate "Home" title above the hero, hid skip-links
        until keyboard focus.
1.0.0 — Initial release.
*/

/* =========================================================
   BRAND VARIABLES
   ========================================================= */
:root{
  --navy:#07172f;
  --navy-2:#0c2347;
  --blue:#2f7cf6;
  --blue-2:#69a3ff;
  --ink:#15243d;
  --muted:#617089;
  --line:#dfe6ef;
  --soft:#f5f8fc;
  --max:1180px;
}

/* =========================================================
   BASE / TYPOGRAPHY
   ========================================================= */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  line-height:1.65;
  background:#fff;
}
a{ text-decoration:none; color:var(--blue); }
a:hover{ color:var(--blue-2); }
h1,h2,h3,h4,h5,h6{
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--navy);
  margin:0 0 20px;
}
.entry-title{ font-size:clamp(28px,4vw,42px); }
.entry-content{ font-size:16px; }
.entry-content a{ text-decoration:underline; text-underline-offset:3px; }
.entry-meta{ color:var(--muted); font-size:13px; }
.wrap, .site-inner, .content-sidebar-wrap{ max-width:var(--max); margin:auto; padding-left:26px; padding-right:26px; }

/* =========================================================
   SITE HEADER (Genesis default structure)
   .site-header > .wrap > .title-area + .header-widget-area
   ========================================================= */
.site-header{
  background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,0.08);
  position:sticky;
  top:0;
  z-index:50;
}.site-header .wrap{
  padding-top:16px;
  padding-bottom:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.site-header .title-area{ margin:0; }
.site-header .site-title{ margin:0; font-size:16px; }
.site-header .site-title a{
  color:#fff;
  font-weight:800;
  letter-spacing:0.04em;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.site-header .site-title a::before{
  content:"M";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:7px;
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  color:#fff;
  font-weight:800;
  font-size:15px;
}
.site-header .site-title a:hover{ color:var(--blue-2); }
.site-header .site-description{
  color:rgba(255,255,255,0.55);
  font-size:12px;
  margin-top:2px;
}
.custom-logo{ max-height:36px; width:auto; }

/* =========================================================
   PRIMARY NAVIGATION (Genesis default: .genesis-nav-menu)
   ========================================================= */
.nav-primary{
  background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,0.08);
  position:sticky;
  top:61.375px; /* sits directly under .site-header, which is sticky at top:0 */
  z-index:49;
}
.genesis-nav-menu{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  list-style:none;
  margin:0;
  padding:0 26px;
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
}
.genesis-nav-menu li{
  list-style:none;
  margin:0;
}
.genesis-nav-menu a{
  color:rgba(255,255,255,0.75) !important;
  font-size:14px;
  font-weight:500;
  padding:10px 14px !important;
  display:block;
}
.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a{
  color:#fff !important;
}
.genesis-nav-menu .sub-menu{
  background:var(--navy-2);
  border:1px solid rgba(255,255,255,0.08);
  list-style:none;
  padding:0;
}
.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:38px;
  height:38px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.25);
  border-radius:6px;
  cursor:pointer;
  padding:0;
}
.menu-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform .2s, opacity .2s;
}
.menu-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2){ opacity:0; }
.menu-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.sub-menu-toggle{
  color:#fff;
  background:transparent;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:6px;
}
@media (max-width:860px){
  .menu-toggle{ display:flex; }
}

/* "Let's Connect" nav item rendered as a filled button, matching the mockup */
.genesis-nav-menu .merphix-nav-cta a{
  background:var(--blue) !important;
  color:#fff !important;
  border-radius:7px;
  padding:9px 18px !important;
  margin-left:4px;
  font-weight:700;
}
.genesis-nav-menu .merphix-nav-cta a:hover{
  opacity:0.88;
  color:#fff !important;
}

/* =========================================================
   BUTTONS — classic Genesis + Gutenberg blocks, unified
   ========================================================= */
.button,
input[type="submit"],
.wp-block-button__link,
.wp-element-button{
  background:var(--blue);
  color:#fff !important;
  border-radius:7px;
  font-weight:700;
  font-size:13px;
  padding:12px 20px;
  border:none;
  display:inline-block;
  transition:opacity .15s;
}
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover{ opacity:0.88; }
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent !important;
  border:1.5px solid var(--line);
  color:var(--navy) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  border-color:var(--blue);
  color:var(--blue) !important;
}

/* Headings and outline buttons inside dark custom-background sections
   (hero, passion project, contact box) need light text — otherwise they
   inherit the global navy heading color and disappear against the navy bg. */
.has-background h1,
.has-background h2,
.has-background h3,
.has-background h4,
.has-background h5,
.has-background h6{
  color:#ffffff;
}

/* LIGHT-background custom sections also carry .has-background but need dark text. */
.merphix-bridge-light h1,
.merphix-bridge-light h2,
.merphix-bridge-light h3,
.merphix-bridge-light h4,
.merphix-bridge-light h5,
.merphix-bridge-light h6{
  color:var(--navy) !important;
}
.has-background .wp-block-button.is-style-outline .wp-block-button__link{
  border-color:rgba(255,255,255,0.4) !important;
  color:#ffffff !important;
}
.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover{
  border-color:#ffffff !important;
  color:#ffffff !important;
}

/* =========================================================
   FULL-WIDTH CONTENT TEMPLATE (used for the homepage design)
   ========================================================= */
.full-width-content .site-inner{ max-width:100%; padding:0; }
.full-width-content .content{ width:100%; float:none; }
.full-width-content .entry-content > .wp-block-group.alignfull,
.full-width-content .entry-content > .wp-block-columns.alignfull{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
  max-width:100vw;
  padding-left:max(26px, calc(50vw - (var(--max) / 2)));
  padding-right:max(26px, calc(50vw - (var(--max) / 2)));
}
.full-width-content .entry-content{ padding:0; max-width:none; }
.full-width-content .entry-content > *:not(.alignfull){
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
  padding-left:26px;
  padding-right:26px;
}

/* =========================================================
   ACCESSIBILITY — skip links visually hidden until focused
   Genesis outputs these with class "screen-reader-shortcut",
   not the WP-core-default "screen-reader-text" — both covered.
   ========================================================= */
.screen-reader-text,
.screen-reader-shortcut{
  position:absolute !important;
  clip:rect(1px,1px,1px,1px);
  width:1px;
  height:1px;
  overflow:hidden;
  word-wrap:normal !important;
}
.screen-reader-text:focus,
.screen-reader-shortcut:focus{
  background-color:#f1f1f1;
  border-radius:3px;
  box-shadow:0 0 2px 2px rgba(0,0,0,.6);
  clip:auto !important;
  color:#21759b;
  display:block;
  font-size:14px;
  font-weight:700;
  height:auto;
  left:5px;
  line-height:normal;
  padding:15px 23px 14px;
  text-decoration:none;
  top:5px;
  width:auto;
  z-index:100000;
}
.genesis-skip-link{
  list-style:none;
  margin:0;
  padding:0;
}

/* =========================================================
   HERO CARD — replaces the bare "M" with a card + ring backdrop,
   matching the mockup's floating profile card.
   ========================================================= */
.merphix-hero-card-col{ position:relative; }
.merphix-hero-card-col::before,
.merphix-hero-card-col::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(99,160,255,0.18);
  border-radius:50%;
  z-index:0;
}
.merphix-hero-card-col::before{ width:320px; height:320px; }
.merphix-hero-card-col::after{ width:440px; height:440px; }
.merphix-hero-card{
  position:relative;
  z-index:1;
  background:linear-gradient(155deg,#173c70,#07172f 72%);
  border:1px solid rgba(117,167,238,0.25);
  border-radius:20px;
  padding:36px 24px;
  box-shadow:0 30px 70px rgba(0,0,0,0.35);
  max-width:230px;
  margin:0 auto;
}

/* =========================================================
   CAPABILITY CARDS ("What I Do" list, boxed like the mockup)
   ========================================================= */
.merphix-capability{
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px 18px;
  margin-bottom:12px;
}
.merphix-capability h4{ margin-bottom:6px; }
.merphix-capability p{ margin:0; color:var(--muted); }

/* =========================================================
   CREDENTIALS GRID — bordered cards with a blue left accent,
   matching the mockup's two-column layout.
   ========================================================= */
.merphix-credential{
  background:var(--soft);
  border-left:3px solid var(--blue);
  padding:16px 18px;
  border-radius:4px;
  margin-bottom:12px;
}
.merphix-credential p{ margin:0; font-size:14px; }

/* =========================================================
   PASSION PROJECT SECTION — tighter, more deliberate spacing
   ========================================================= */
#beyond{
  margin-top:48px;
  padding-top:64px;
  padding-bottom:64px;
}
#beyond .wp-block-column p{
  margin-bottom:16px;
}
#beyond .wp-block-column p:last-child{
  margin-bottom:0;
}
#beyond .wp-block-buttons{
  margin-top:8px;
}
/* the stacked "BPO / and / Beyond" wordmark text — tighter line-height
   so the three lines read as one lockup instead of loose, separate lines.
   (Swap this paragraph for an Image block with the real logo — see chat.) */
#beyond .wp-block-column:last-child p:first-child{
  line-height:1.25;
  margin-bottom:14px;
}

/* Contact dark box never had internal padding - text sat flush
   against its own edges. */
#contact .wp-block-column:last-child{
  padding:32px;
}

/* =========================================================
   WIDGETS
   ========================================================= */
.widget-title{
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--navy);
  border-bottom:1px solid var(--line);
  padding-bottom:10px;
  margin-bottom:16px;
}

/* =========================================================
   FOOTER (Genesis default: .site-footer)
   ========================================================= */
.site-footer{
  background:var(--navy);
  color:rgba(255,255,255,0.6);
  font-size:12px;
  padding:30px 0;
}
.site-footer a{ color:rgba(255,255,255,0.8); }
.site-footer a:hover{ color:#fff; }

/* =========================================================
   MISC
   ========================================================= */
blockquote{
  border-left:3px solid var(--blue);
  padding-left:20px;
  color:var(--muted);
  font-style:italic;
}
hr, .wp-block-separator{ border-color:var(--line); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:860px){
  .genesis-nav-menu{ flex-direction:column; width:100%; }
  .nav-primary{
    display:none;
    position:fixed;
    left:0; right:0; top:61.375px;
    max-height:calc(100vh - 61.375px);
    overflow-y:auto;
    background:var(--navy);
    padding:14px 20px;
    z-index:48;
  }
  .nav-primary.toggled{ display:flex; }
}