/*
Theme Name: Keyboard Africa Child
Theme URI: https://keyboardafrica.com
Template: astra
Author: Keyboard Africa Dev
Author URI: https://keyboardafrica.com
Description: Child theme for Keyboard Africa (Astra parent). Merges the cleanAF custom design system — Tailwind CSS, custom header/footer, full-shell page templates, and WooCommerce overrides.
Version: 1.0.7
Requires at least: 5.3
Tested up to: 6.9
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: keyboardafrica-child
*/

/*
 * ========================================
 *   DESIGN TOKENS (CSS Custom Properties)
 *   All Tailwind utility classes are in
 *   assets/css/homepage.css
 * ========================================
 */

/*
 * ========================================
 *   CHILD THEME CUSTOMIZATIONS
 *   Add overrides below if needed
 * ========================================
 */

/* GTranslate float switcher spacing on desktop */
@media only screen and (min-width: 1024px) {
    .gt_float_switcher.notranslate {
        margin-right: 62px;
    }
}

/* ========================================
 * NAVIGATION DROPDOWN FIXES
 * Fix Translate > Languages submenu hover behavior
 * ======================================== */

/* Remove the 8px gap (mt-2) between parent and dropdown to prevent hover loss */
.group .dropdown-open {
    margin-top: 0 !important;
}

/* Smooth dropdown appearance with opacity/visibility instead of display:none/block */
.group .dropdown-open {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 150ms ease-out, visibility 150ms ease-out, transform 150ms ease-out;
}

/* Show dropdown on parent hover/focus */
.group:is(:hover, :focus-within) .dropdown-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Ensure dropdown stays open when moving from parent to dropdown */
.group .dropdown-open:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Language submenu item hover states */
.group .dropdown-open a {
    transition: background-color 150ms ease, color 150ms ease;
}

.group .dropdown-open a:hover,
.group .dropdown-open a:focus {
    background-color: rgba(200, 146, 42, 0.15); /* gold/15 */
    color: #e8b84b; /* gold-light */
}

/* Focus visible for accessibility */
.group .dropdown-open a:focus-visible {
    outline: 2px solid #c8922a; /* gold */
    outline-offset: -2px;
}

/* Ensure dropdown has proper z-index and positioning */
.group .dropdown-open {
    z-index: 50;
}

/* Reduce the gap between parent and dropdown to 0 */
.group > ul.dropdown-open {
    margin-top: 0;
}

/* Add a pseudo-element bridge to prevent hover gap (uses ::before so the
   gold hover underline on ::after from homepage.css is not overridden) */
.group > a {
    position: relative;
}

.group > a::before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 8px;
    background: transparent;
}

/* Ensure desktop menu stays hidden on mobile viewports */
@media (max-width: 767px) {
  .hidden.md\:flex,
  nav .hidden.md\:flex {
    display: none !important;
  }
}

/* Ensure mobile menu container stays hidden on desktop viewports */
@media (min-width: 768px) {
  #mobile-menu,
  .md\:hidden {
    display: none !important;
  }
}
.nav-link { color: rgba(255, 255, 255, 0.8); }
.nav-link:hover,
.nav-link.active { color: #ffffff; }

/* =====================================================================
 * MOBILE NAV — clarity & legibility patch (child theme only)
 * Contrast already ≥ AA; these make the control unmissable.
 * ===================================================================== */

/* 1) Hamburger: thicker 3px bars (2×+ visibility) inside 44×44 target */
#mobile-menu-toggle .w-5 > span {
	height: 3px;
	border-radius: 2px;
	background-color: #c8922a;
}
#mobile-menu-toggle .w-5 { gap: 4px; }

/* 2) Keep toggle bar white in every interactive state */
#mobile-menu-toggle:hover,
#mobile-menu-toggle:focus-visible,
#mobile-menu-toggle[aria-expanded="true"] {
	color: #c8922a;
}
/* Gold ring on keyboard focus (visible on the dark header) */
#mobile-menu-toggle:focus-visible {
	outline: 3px solid #c8922a;
	outline-offset: 2px;
}

/* 3) Menu panel: solid fill (no translucency) + restore item rhythm */
#mobile-menu {
	background-color: #1a1208;
}
#mobile-menu ul { gap: 4px; }
#mobile-menu > div > ul > li + li { margin-top: 4px; }
#mobile-menu ul ul { gap: 0; }

/* 4) Links: 16px body text, min 44px targets, clear hover/active */
#mobile-menu a {
	font-size: 16px;
	line-height: 1.4;
	min-height: 44px;
}
#mobile-menu a:active { background-color: #ffffff14; }

/* 5) Sub-links: meet 7:1 comfortably (up from 50%→70% white) */
#mobile-menu ul ul a { color: #ffffffb3; }

/* 6) Active page: unmistakable left gold marker + gold text */
#mobile-menu li.current-menu-item > a,
#mobile-menu li.current_page_item > a {
	border-left: 3px solid #c8922a;
	color: #e8b84b;
	font-weight: 600;
	background-color: #c8922a14;
}

/* 7) Keyboard focus on every menu link (not just desktop dropdowns) */
#mobile-menu a:focus-visible {
	outline: 2px solid #c8922a;
	outline-offset: -2px;
}

/* 8) GTranslate floating switcher - hide white background to match footer */
#gt_float_wrapper {
	background-color: transparent !important;
}
.gt_float_switcher {
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
.gt_float_switcher .gt-selected {
	background-color: var(--color-earth) !important;
	border-radius: 4px;
}
.gt_float_switcher .gt-current-lang {
	color: #fff !important;
}
.gt_float_switcher .gt_options {
	background-color: var(--color-earth) !important;
	border-radius: 4px;
}
.gt_float_switcher .gt_options a {
	color: #fff !important;
}
.gt_float_switcher .gt_options a:hover {
	color: var(--color-gold) !important;
}
/* Dead space fix: collapse pt-24 under fixed header on non-homepage pages */
body:not(.cleanaf-home) .grain-overlay {
    padding-top: 0;
}
body:not(.cleanaf-home) main {
    padding-top: 0;
}
body:not(.cleanaf-home) main > div {
    padding-top: 0;
    padding-bottom: var(--spacing);
}
/* Keep hero section proper offset from kente-strip */
body:not(.cleanaf-home) .hero-gradient:first-child {
    margin-top: env(safe-area-inset-top, 0);
}