/*
Theme Name: Elevate HR
Theme URI: https://www.elevatehr.com.np/
Author: Elevate HR (converted from static site)
Author URI: https://www.elevatehr.com.np/
Description: Strategic Human Capital Advisory theme for Elevate HR. A faithful, pixel-for-pixel WordPress conversion of the original Elevate HR website. Classic theme, Elementor-ready (works as a blank canvas), SEO-plugin friendly (Yoast / Rank Math), with dynamic navigation, footer widget areas, and a Customizer panel for global brand details. All page content is editable from the WordPress editor.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elevate-hr
Tags: business, custom-menu, featured-images, footer-widgets, full-width-template, threaded-comments, translation-ready
*/

/*
  NOTE ON STYLING
  ---------------
  The complete visual design lives in /assets/css/styles.css (the ORIGINAL,
  unmodified stylesheet from the source site). It is loaded via
  wp_enqueue_scripts() in functions.php so the theme renders 100% identically
  to the source website.

  This style.css holds only:
    1. The theme header above (required by WordPress).
    2. A few small bridges that map WordPress-generated classes onto the
       original design (e.g. mapping `.current-menu-item` to the original
       `.active` nav state, and admin-bar spacing).

  Add custom overrides BELOW this line if needed — but the canonical design
  rules should stay in assets/css/styles.css.
*/

/* --- Brand logo images (default vs sticky swap) ---
   White logo over the hero; dark logo once the bar turns solid on scroll.
   All three logos are editable in Customize → "Elevate HR — Brand & Contact". */
.brand .logo { height: 46px; width: auto; max-width: none; display: block; }
.nav .brand { display: inline-flex; align-items: center; }
.nav .logo-default { display: block; }
.nav .logo-sticky  { display: none; }
.nav.scrolled .logo-default { display: none; }
.nav.scrolled .logo-sticky  { display: block; }
/* Footer + mobile-drawer logos */
.footer .brand .logo { height: 44px; }
.menu-brand .brand .logo { height: 40px; }
@media (max-width: 600px) { .brand .logo { height: 40px; } }

/* --- Map WordPress nav classes onto the original ".active" styling ---
   Mirrors styles.css lines 97-98 EXACTLY (colour + pill background), and
   excludes the CTA so "Consult Us" keeps its gradient pill even when current. */
.nav .menu li.current-menu-item > a:not(.nav-cta),
.nav .menu li.current_page_item > a:not(.nav-cta),
.nav .menu li.current-menu-ancestor > a:not(.nav-cta),
.nav .menu li.current-page-ancestor > a:not(.nav-cta) {
  color: var(--violet-dark);
  background: var(--bg-mist);
}
.nav.on-dark .menu li.current-menu-item > a:not(.nav-cta),
.nav.on-dark .menu li.current_page_item > a:not(.nav-cta),
.nav.on-dark .menu li.current-menu-ancestor > a:not(.nav-cta),
.nav.on-dark .menu li.current-page-ancestor > a:not(.nav-cta) {
  color: #fff;
  background: rgba(255, 255, 255, .16);
}

/* WordPress wraps each link in <li>; keep the original spacing/gap intact. */
.nav .menu li { list-style: none; display: flex; }
.nav .menu { gap: 6px; }

/* --- Guard against a DUPLICATE header inside the page content ---
   The real header is output by the theme ABOVE #site-content. If a second
   header (logo + menu, with or without a <nav> wrapper) was accidentally saved
   inside a page/post's content, it renders as a faint extra header and confuses
   the hamburger. These rules hide that in-content duplicate — including its
   stray logo — while keeping the legitimate FOOTER logo visible. The hero uses
   .hero / .page-hero (not .brand/.menu/.nav), so it is unaffected. */
#site-content .nav,
#site-content .scroll-progress,
#site-content .menu,
#site-content .burger,
#site-content .brand {
  display: none !important;
}
/* …but the footer's own logo must stay. */
#site-content .footer .brand {
  display: flex !important;
}
.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px){ .admin-bar .nav { top: 46px; } }

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; width: 1px; word-wrap: normal !important;
}

/* Sticky-footer guard for thin pages (e.g. 404, search) */
#site-content { min-height: 50vh; }

/* WordPress core alignment helpers (used inside the editor content) */
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .85rem; color: var(--muted); }

/* === Responsive hardening (ADDITIVE — the original design is unchanged) ===
   The full responsive system (mobile nav drawer, tablet/phone breakpoints) is
   already in assets/css/styles.css and ships verbatim. These few rules only add
   safety so anything inserted later via the editor (images, embeds) scales on
   small screens and never causes horizontal scroll. They do not affect the
   desktop layout. */
img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; }
.wp-block-embed__wrapper, .wp-block-embed iframe { max-width: 100%; }
@media (max-width: 980px) {
  html, body { overflow-x: hidden; }
}

/* ============================================================
   MOBILE MENU — keep the drawer + hamburger identical in every
   scroll state (fixes the drawer breaking once the header is sticky).
   The sticky header uses backdrop-filter, which traps a fixed-position
   child inside the thin bar. While the menu is open we remove that
   filter/transform so the drawer is sized against the screen again.
   ============================================================ */
@media (max-width: 980px) {
  /* When the menu is open, the nav must NOT create a containing block. */
  body.menu-open .nav,
  body.menu-open .nav.scrolled,
  body.menu-open .nav.on-dark {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    filter: none !important;
  }

  /* The drawer panel: always solid white, full height, correctly placed. */
  .nav .menu,
  .nav.on-dark .menu,
  .nav.scrolled .menu {
    position: fixed !important;
    inset: 0 0 0 auto !important;
    width: min(78vw, 320px) !important;
    background: #fff !important;
    box-shadow: -20px 0 60px rgba(0, 0, 0, .18) !important;
    z-index: 99 !important;
  }
  .nav .menu a,
  .nav.on-dark .menu a,
  .nav.scrolled .menu a { color: var(--ink-soft) !important; }

  /* The hamburger: identical look at the top and after scrolling. */
  .nav .burger,
  .nav.on-dark .burger,
  .nav.scrolled .burger {
    display: flex !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 101 !important;
  }
  .nav .burger span,
  .nav.on-dark .burger span,
  .nav.scrolled .burger span,
  body.menu-open .nav .burger span { background: var(--ink) !important; }
}

/* --- Logo at the top of the mobile slide-in menu (mobile only) ---
   Matches the original drawer's right-side width and slides in/out with it via
   the existing body.menu-open toggle. Desktop: hidden. */
.menu-brand { display: none; }
@media (max-width: 980px) {
  .menu-brand {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: min(78vw, 320px);
    padding: 22px 28px;
    z-index: 100;                 /* above the .menu panel (99), below burger (101) */
    transform: translateX(100%);  /* off-screen until the menu opens */
    transition: transform .4s var(--ease);
    pointer-events: none;
  }
  body.menu-open .menu-brand { transform: none; }
  .menu-brand .brand { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
  .menu-brand .brand .mark { width: 36px; height: 36px; }
  /* Dark wordmark on the white drawer */
  .menu-brand .brand .txt b { color: var(--ink); }
  .menu-brand .brand .txt span { color: var(--teal-dark); }
}