/* Theme Name: AI SCHOOL BD Theme Author: AI SCHOOL BD Description: Scalable education-first WordPress theme foundation for AI SCHOOL BD, with WooCommerce support and future LMS/AI integration boundaries. Version: 1.3.48 Requires at least: 6.4 Requires PHP: 7.4 Text Domain: ai-school-bd License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html */ :root { --aisbd-color-primary: #2563eb; --aisbd-color-text: #111827; --aisbd-color-background: #ffffff; } html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; color: var(--aisbd-color-text); background: var(--aisbd-color-background); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .aisbd-container { width: min(100% - 2rem, 1200px); margin-inline: auto; } .aisbd-card { padding: 1.5rem; border: 1px solid #e5e7eb; border-radius: 1rem; background: #fff; } .aisbd-card__title { margin: 0 0 0.75rem; } .aisbd-card__content { line-height: 1.7; } /* PHASE 03.2 — WordPress template layer */ .aisbd-page { padding: 2rem 0 4rem; } .aisbd-entry__title { margin: 0 0 1rem; line-height: 1.15; } .aisbd-entry__content { line-height: 1.75; } .aisbd-entry__meta { opacity: .7; } .aisbd-entry__thumbnail img { display: block; width: 100%; height: auto; border-radius: 1rem; } .aisbd-post-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } .aisbd-post-card__image img { display: block; width: 100%; height: auto; border-radius: .75rem; } .aisbd-post-card__title { margin: 1rem 0 .5rem; font-size: 1.25rem; } .aisbd-post-card__title a { text-decoration: none; color: inherit; } .aisbd-post-card__excerpt { line-height: 1.6; } .aisbd-404__content { max-width: 700px; margin: 4rem auto; text-align: center; } .aisbd-404__code { font-size: clamp(4rem, 12vw, 8rem); line-height: .9; margin: 0; font-weight: 800; } .aisbd-button { display: inline-block; padding: .75rem 1.25rem; border-radius: .75rem; background: var(--aisbd-color-primary); color: #fff; text-decoration: none; border: 0; cursor: pointer; } .aisbd-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 72px; } .aisbd-primary-nav__list { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 0; padding: 0; } @media (max-width: 900px) { .aisbd-post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .aisbd-header__inner { align-items: flex-start; flex-direction: column; padding-block: 1rem; } .aisbd-post-list { grid-template-columns: 1fr; } } /* PHASE 03.2.2 — Functional search UI */ .aisbd-search-form { max-width: 760px; margin: 1.5rem 0 3rem; } .aisbd-search-form__label { display: block; margin-bottom: .5rem; font-weight: 600; } .aisbd-search-form__row { display: flex; gap: .75rem; align-items: stretch; } .aisbd-search-form__input { flex: 1 1 auto; min-width: 0; padding: .85rem 1rem; border: 1px solid #c7cbd1; border-radius: .75rem; font: inherit; background: #fff; } .aisbd-search-form__input:focus { outline: 2px solid currentColor; outline-offset: 2px; } .aisbd-search-form__button { flex: 0 0 auto; } .aisbd-search__results-title { margin: 0 0 1.5rem; } .aisbd-search__empty { padding: 1.5rem; border: 1px solid #d9dde3; border-radius: .75rem; } @media (max-width: 640px) { .aisbd-search-form__row { flex-direction: column; } } /* PHASE 03.3 — Homepage Architecture & Component Integration */ :root { --aisbd-color-primary: #6d28d9; --aisbd-color-primary-strong: #5b21b6; --aisbd-color-primary-soft: #f3e8ff; --aisbd-color-text: #1f2937; --aisbd-color-muted: #6b7280; --aisbd-color-border: #e5e7eb; --aisbd-color-surface: #ffffff; --aisbd-color-surface-soft: #f8fafc; --aisbd-shadow-soft: 0 12px 30px rgba(17, 24, 39, .08); --aisbd-radius-sm: 10px; --aisbd-radius-md: 16px; --aisbd-radius-lg: 24px; } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .aisbd-market-header { position: relative; z-index: 20; background: rgba(255,255,255,.98); border-bottom: 1px solid var(--aisbd-color-border); } .aisbd-market-header__inner { min-height: 78px; display: grid; grid-template-columns: auto auto minmax(280px, 1fr) auto auto; align-items: center; gap: 24px; } .aisbd-brand__text { display: inline-flex; align-items: center; gap: 10px; color: var(--aisbd-color-text); text-decoration: none; font-weight: 800; font-size: 1.35rem; white-space: nowrap; } .aisbd-brand__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #7c3aed, #2563eb); font-size: .8rem; } .aisbd-brand .custom-logo-link { display: flex; align-items: center; } .aisbd-brand .custom-logo { max-height: 48px; width: auto; } .aisbd-header-link { color: var(--aisbd-color-text); text-decoration: none; font-size: .95rem; white-space: nowrap; } .aisbd-header-link:hover, .aisbd-text-link:hover { color: var(--aisbd-color-primary); } .aisbd-header-search { position: relative; } .aisbd-header-search__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--aisbd-color-muted); font-size: 1.35rem; pointer-events: none; } .aisbd-header-search input { width: 100%; height: 50px; border: 1px solid #d8dee8; border-radius: 999px; padding: 0 18px 0 44px; font: inherit; background: #fff; } .aisbd-header-search input:focus { outline: 2px solid var(--aisbd-color-primary-soft); border-color: var(--aisbd-color-primary); } .aisbd-primary-nav__list { display: flex; align-items: center; gap: 16px; list-style: none; margin: 0; padding: 0; } .aisbd-primary-nav__list a { color: var(--aisbd-color-text); text-decoration: none; font-size: .9rem; } .aisbd-header-actions { display: flex; align-items: center; gap: 10px; } .aisbd-header-icon { text-decoration: none; font-size: 1.2rem; } .aisbd-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 10px; border: 1px solid transparent; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .aisbd-button:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(17,24,39,.12); } .aisbd-button--primary { color: #fff; background: var(--aisbd-color-primary); } .aisbd-button--primary:hover { background: var(--aisbd-color-primary-strong); color: #fff; } .aisbd-button--header { color: #fff; background: var(--aisbd-color-primary); min-height: 44px; } .aisbd-hero { overflow: hidden; background: linear-gradient(120deg, #fff7ed 0%, #fef3c7 42%, #ede9fe 100%); } .aisbd-hero__inner { min-height: 520px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr); align-items: center; gap: 48px; padding-block: 56px; } .aisbd-hero__copy { max-width: 620px; } .aisbd-eyebrow { display: inline-block; margin-bottom: 12px; color: var(--aisbd-color-primary-strong); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .aisbd-hero h1 { margin: 0 0 20px; max-width: 680px; font-size: clamp(2.8rem, 5vw, 4.6rem); line-height: .98; letter-spacing: -.04em; } .aisbd-hero p { max-width: 610px; margin: 0; color: #4b5563; font-size: 1.15rem; line-height: 1.7; } .aisbd-hero__actions { display: flex; align-items: center; gap: 22px; margin-top: 30px; flex-wrap: wrap; } .aisbd-text-link { color: var(--aisbd-color-text); font-weight: 700; text-decoration: none; } .aisbd-hero-visual { position: relative; min-height: 390px; display: grid; place-items: center; } .aisbd-hero-visual__glow { position: absolute; width: 330px; height: 330px; border-radius: 50%; background: radial-gradient(circle, rgba(124,58,237,.28), rgba(124,58,237,0) 68%); } .aisbd-hero-visual__panel { position: absolute; width: min(390px, 88%); height: 285px; border-radius: 26px; transform: rotate(-6deg); box-shadow: var(--aisbd-shadow-soft); } .aisbd-hero-visual__panel--back { background: #f97316; transform: translate(28px, 28px) rotate(7deg); opacity: .9; } .aisbd-hero-visual__panel--main { padding: 22px; background: #111827; color: #fff; transform: rotate(-5deg); } .aisbd-hero-visual__topline { display: flex; justify-content: space-between; color: #c4b5fd; font-size: .75rem; font-weight: 700; } .aisbd-hero-visual__screen { height: 180px; margin-top: 16px; border-radius: 18px; padding: 20px; background: linear-gradient(145deg, #312e81, #1d4ed8); display: flex; flex-direction: column; justify-content: space-between; } .aisbd-hero-visual__chip { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.16); font-weight: 800; } .aisbd-hero-visual__screen strong { font-size: 2rem; line-height: .95; } .aisbd-hero-visual__dots { color: #fde68a; letter-spacing: .35em; } .aisbd-hero-visual__progress { height: 8px; margin-top: 18px; border-radius: 99px; background: #374151; overflow: hidden; } .aisbd-hero-visual__progress span { display: block; width: 72%; height: 100%; border-radius: inherit; background: #a78bfa; } .aisbd-hero-visual__floating { position: absolute; z-index: 2; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: var(--aisbd-shadow-soft); font-size: .88rem; } .aisbd-hero-visual__floating--one { top: 38px; right: 0; } .aisbd-hero-visual__floating--two { bottom: 42px; left: 0; } .aisbd-section { padding: 72px 0; } .aisbd-section--courses { background: #fff; } .aisbd-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; } .aisbd-section-heading h2 { margin: 0 0 8px; font-size: clamp(2rem, 3vw, 2.7rem); letter-spacing: -.025em; } .aisbd-section-heading p { margin: 0; color: var(--aisbd-color-muted); } .aisbd-course-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .aisbd-course-card { min-width: 0; overflow: hidden; border: 1px solid var(--aisbd-color-border); border-radius: var(--aisbd-radius-md); background: #fff; transition: transform .2s ease, box-shadow .2s ease; } .aisbd-course-card:hover { transform: translateY(-3px); box-shadow: var(--aisbd-shadow-soft); } .aisbd-course-card__media { display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #e0e7ff, #ede9fe); overflow: hidden; } .aisbd-course-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .aisbd-course-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; background: linear-gradient(135deg, #1e3a8a, #7c3aed); font-size: 2.5rem; font-weight: 900; } .aisbd-course-card__body { padding: 16px; } .aisbd-course-card__title { margin: 0 0 8px; font-size: 1.03rem; line-height: 1.35; } .aisbd-course-card__title a { color: var(--aisbd-color-text); text-decoration: none; } .aisbd-course-card__meta { margin: 0 0 10px; color: var(--aisbd-color-muted); font-size: .85rem; line-height: 1.45; } .aisbd-course-card__rating { display: flex; gap: 5px; align-items: center; color: #b45309; font-size: .85rem; } .aisbd-course-card__price { margin-top: 8px; font-size: 1.05rem; font-weight: 800; } .aisbd-empty-state { padding: 40px; border: 1px dashed #cbd5e1; border-radius: var(--aisbd-radius-md); text-align: center; background: var(--aisbd-color-surface-soft); } .aisbd-section--content { background: var(--aisbd-color-surface-soft); } .aisbd-site-footer { border-top: 1px solid var(--aisbd-color-border); background: #111827; color: #fff; } .aisbd-site-footer__inner { min-height: 170px; display: flex; align-items: center; justify-content: space-between; gap: 30px; } .aisbd-site-footer p { margin: 8px 0 0; color: #cbd5e1; } .aisbd-footer-nav { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; } .aisbd-footer-nav a { color: #e5e7eb; text-decoration: none; } .aisbd-site-footer__bottom { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12); color: #cbd5e1; font-size: .85rem; } /* PHASE 03.3-A.2 — v1.2.4 Responsive Header Hotfix * Scope: responsive stability only. No new page/navigation fallback is introduced. */ .aisbd-market-header__inner > * { min-width: 0; } .aisbd-brand { min-width: 0; } .aisbd-brand .custom-logo-link { display: flex; align-items: center; max-width: 100%; } .aisbd-brand .custom-logo { display: block; max-width: 100%; height: auto; max-height: 48px; width: auto; object-fit: contain; } .aisbd-primary-nav { min-width: 0; } .aisbd-primary-nav__list { flex-wrap: nowrap; } .aisbd-primary-nav__list li { min-width: 0; } .aisbd-primary-nav__list a, .aisbd-header-actions a { display: inline-flex; align-items: center; min-height: 40px; } .aisbd-header-search input::placeholder { color: #6b7280; opacity: 1; } .aisbd-hero__inner, .aisbd-hero__copy, .aisbd-hero-visual { min-width: 0; } .aisbd-hero__inner { isolation: isolate; } .aisbd-hero__actions a:focus-visible, .aisbd-market-header a:focus-visible, .aisbd-market-header input:focus-visible, .aisbd-mobile-menu summary:focus-visible { outline: 3px solid var(--aisbd-color-primary-soft); outline-offset: 3px; } .aisbd-course-card__title a:focus-visible { outline: 2px solid var(--aisbd-color-primary); outline-offset: 3px; } .aisbd-mobile-menu { display: none; position: relative; } .aisbd-mobile-menu summary { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--aisbd-color-border); border-radius: 10px; background: #fff; color: var(--aisbd-color-text); cursor: pointer; list-style: none; font-size: 1.15rem; } .aisbd-mobile-menu summary::-webkit-details-marker { display: none; } .aisbd-mobile-menu__panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 100; width: min(280px, calc(100vw - 2rem)); padding: 12px; border: 1px solid var(--aisbd-color-border); border-radius: 14px; background: #fff; box-shadow: var(--aisbd-shadow-soft); } .aisbd-mobile-menu__list { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; } .aisbd-mobile-menu__list li { list-style: none; margin: 0; padding: 0; } .aisbd-mobile-menu__list a { display: block; padding: 12px 14px; border-radius: 9px; color: var(--aisbd-color-text); text-decoration: none; } .aisbd-mobile-menu__list a:hover, .aisbd-mobile-menu__list a:focus-visible { background: var(--aisbd-color-primary-soft); color: var(--aisbd-color-primary-strong); } @media (prefers-reduced-motion: reduce) { .aisbd-button, .aisbd-course-card { transition: none; } .aisbd-course-card:hover, .aisbd-button:hover { transform: none; } } /* Desktop: preserve the stable marketplace row. * Use 901px so WordPress Customizer desktop preview does not incorrectly * enter the mobile header because of its narrower iframe viewport. */ @media (min-width: 901px) { .aisbd-market-header__inner { grid-template-columns: auto auto minmax(260px, 1fr) minmax(0, auto) auto; } .aisbd-mobile-menu { display: none !important; } } /* Tablet: remove the nav before the header becomes crowded. */ @media (max-width: 900px) { .aisbd-market-header__inner { grid-template-columns: auto minmax(180px, 1fr) auto; gap: 14px; } .aisbd-primary-nav { display: none; } .aisbd-mobile-menu { display: block; } .aisbd-course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Small tablet / large phone: search gets its own full-width row. */ @media (max-width: 820px) { .aisbd-market-header__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding-block: 10px; } .aisbd-brand .custom-logo { max-height: 46px; } .aisbd-header-actions { justify-content: flex-end; gap: 8px; } .aisbd-header-search { grid-column: 1 / -1; grid-row: 2; width: 100%; padding-bottom: 2px; } .aisbd-header-search input { height: 48px; } .aisbd-hero__inner { grid-template-columns: 1fr; min-height: auto; gap: 28px; padding-block: 46px 34px; } .aisbd-hero__copy { max-width: 760px; } .aisbd-hero h1 { max-width: 760px; font-size: clamp(2.5rem, 7vw, 4rem); } .aisbd-hero p { max-width: 680px; font-size: 1.05rem; } .aisbd-hero-visual { min-height: 320px; } .aisbd-hero-visual__panel { width: min(390px, 82vw); } .aisbd-hero-visual__floating--one { right: 4%; } .aisbd-hero-visual__floating--two { left: 4%; } .aisbd-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Phone: compact actions, controlled logo, one-column content. */ @media (max-width: 560px) { .aisbd-container { width: min(100% - 1.25rem, 1200px); } .aisbd-market-header__inner { padding-block: 8px 10px; } .aisbd-brand .custom-logo { max-height: 40px; max-width: 150px; } .aisbd-header-actions .aisbd-header-link--account { display: none; } .aisbd-button--header { min-height: 40px; padding-inline: 14px; border-radius: 9px; font-size: .88rem; } .aisbd-header-icon { font-size: 1.1rem; } .aisbd-mobile-menu summary { width: 40px; height: 40px; } .aisbd-header-search input { height: 46px; padding-left: 42px; font-size: .95rem; } .aisbd-hero__inner { padding-block: 38px 24px; gap: 20px; } .aisbd-eyebrow { font-size: .7rem; letter-spacing: .065em; } .aisbd-hero h1 { margin-bottom: 16px; font-size: clamp(2.25rem, 11vw, 3rem); line-height: 1.02; letter-spacing: -.035em; } .aisbd-hero p { font-size: 1rem; line-height: 1.6; } .aisbd-hero__actions { align-items: stretch; flex-direction: column; gap: 12px; margin-top: 24px; } .aisbd-hero__actions .aisbd-button, .aisbd-hero__actions .aisbd-text-link { width: 100%; text-align: center; } .aisbd-hero-visual { min-height: 270px; margin-top: 2px; } .aisbd-hero-visual__glow { width: 250px; height: 250px; } .aisbd-hero-visual__panel { width: min(340px, 90vw); height: 245px; } .aisbd-hero-visual__panel--main { padding: 18px; } .aisbd-hero-visual__screen { height: 150px; padding: 16px; } .aisbd-hero-visual__screen strong { font-size: 1.65rem; } .aisbd-hero-visual__floating { padding: 9px 12px; font-size: .76rem; } .aisbd-hero-visual__floating--one { top: 18px; right: 0; } .aisbd-hero-visual__floating--two { bottom: 18px; left: 0; } .aisbd-section { padding: 52px 0; } .aisbd-section-heading { align-items: flex-start; flex-direction: column; } .aisbd-course-grid { grid-template-columns: 1fr; } .aisbd-site-footer__inner { align-items: flex-start; flex-direction: column; padding-block: 36px; } .aisbd-footer-nav { flex-wrap: wrap; } } /* v1.2.5 — Production header navigation cleanup. * Keep the header intentionally focused on the real Courses destination. * No fallback/test/demo primary-menu items are rendered in the marketplace header. */ .aisbd-header-link--courses { font-weight: 600; } @media (max-width: 1024px) { .aisbd-header-link--courses { display: inline-flex; align-items: center; min-height: 40px; } } /* v1.2.7 — Configurable global header navigation. * Courses remains the canonical first link. Additional pages/links can be * assigned by the site owner to the dedicated Header Menu location. */ .aisbd-header-nav { min-width: 0; } .aisbd-header-nav__list, .aisbd-mobile-header-nav__list { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .aisbd-header-nav__list li, .aisbd-mobile-header-nav__list li { margin: 0; padding: 0; list-style: none; } .aisbd-header-nav__list a, .aisbd-mobile-header-nav__list a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 10px; border-radius: 9px; color: var(--aisbd-color-text); text-decoration: none; white-space: nowrap; } .aisbd-header-nav__list a:hover, .aisbd-header-nav__list a:focus-visible, .aisbd-mobile-header-nav__list a:hover, .aisbd-mobile-header-nav__list a:focus-visible { background: var(--aisbd-color-primary-soft); color: var(--aisbd-color-primary-strong); } .aisbd-mobile-header-nav { display: none; } @media (max-width: 900px) { .aisbd-header-nav { display: none; } .aisbd-mobile-header-nav { display: block; } .aisbd-mobile-header-nav__list { display: grid; gap: 4px; } } @media (max-width: 820px) { .aisbd-mobile-header-nav { grid-column: 1 / -1; grid-row: 3; } } @media (max-width: 560px) { .aisbd-mobile-header-nav__list a { width: 100%; padding: 11px 12px; } } /* v1.3.4 — Mobile header/menu stability hotfix. * Keep the existing header architecture. Ensure the mobile menu contents are * explicitly styled and anchored to the visible menu trigger without being * affected by inherited navigation/list rules. */ @media (max-width: 560px) { .aisbd-header-actions { gap: 5px; min-width: 0; flex-wrap: nowrap; } .aisbd-header-actions .aisbd-header-link--account { display: inline-flex !important; align-items: center; min-height: 40px; padding: 0 4px; color: var(--aisbd-color-text) !important; font-size: .86rem; white-space: nowrap; visibility: visible; opacity: 1; } .aisbd-button--header { min-height: 40px; padding-inline: 10px; font-size: .86rem; white-space: nowrap; } .aisbd-header-icon, .aisbd-mobile-menu { flex: 0 0 auto; } .aisbd-mobile-menu__panel { right: 0; width: min(280px, calc(100vw - 1.25rem)); max-width: calc(100vw - 1.25rem); box-sizing: border-box; overflow: hidden; } .aisbd-mobile-menu__panel nav { display: block; width: 100%; } .aisbd-mobile-menu__panel .aisbd-mobile-header-nav__list { display: grid !important; grid-template-columns: 1fr; gap: 4px; width: 100%; margin: 0; padding: 0; list-style: none; } .aisbd-mobile-menu__panel .aisbd-mobile-header-nav__list > li { display: block; width: 100%; margin: 0; padding: 0; list-style: none; } .aisbd-mobile-menu__panel .aisbd-mobile-header-nav__list > li > a { display: flex !important; align-items: center; width: 100%; min-height: 44px; box-sizing: border-box; padding: 11px 12px; color: var(--aisbd-color-text) !important; background: transparent; text-decoration: none; visibility: visible; opacity: 1; white-space: normal; } .aisbd-mobile-menu__panel .aisbd-mobile-header-nav__list > li > a:hover, .aisbd-mobile-menu__panel .aisbd-mobile-header-nav__list > li > a:focus-visible { background: var(--aisbd-color-primary-soft); color: var(--aisbd-color-primary-strong) !important; } } /* v1.3.12 — Authentication links. * Login always targets the account/login endpoint; Sign up targets the * WooCommerce My Account registration entry when WooCommerce is available. * Keep both actions visible across responsive breakpoints. */ .aisbd-header-link--account, .aisbd-header-link--signup { visibility: visible; opacity: 1; white-space: nowrap; } .aisbd-header-link--account { cursor: pointer; } @media (max-width: 560px) { .aisbd-header-link--account { display: inline-flex !important; } .aisbd-header-link--signup { display: inline-flex !important; } } /* v1.3.18 — Header navigation boundary + nested page menu fix. * Keep the header on one stable horizontal row on desktop. * The primary navigation is a bounded flex area between Courses and Search. * Nested WordPress menu items are rendered as real dropdowns instead of * escaping into the header row. */ .aisbd-skip-link { position: absolute; top: 6px; left: 6px; z-index: 10000; transform: translateY(-150%); padding: 8px 12px; border-radius: 6px; background: #fff; color: #111827; box-shadow: 0 4px 14px rgba(17,24,39,.14); } .aisbd-skip-link:focus { transform: translateY(0); } @media (min-width: 1101px) { .aisbd-market-header { position: relative; z-index: 100; } .aisbd-market-header__inner { min-height: 78px; height: 78px; grid-template-columns: auto auto minmax(0, 1fr) minmax(280px, 360px) auto; gap: 14px; align-items: center; overflow: visible; } .aisbd-brand, .aisbd-header-link--courses, .aisbd-header-nav, .aisbd-header-search, .aisbd-header-actions { min-width: 0; } .aisbd-header-nav { width: 100%; max-width: 100%; min-width: 0; position: relative; } /* Only the top-level menu is bounded. */ .aisbd-header-nav > .aisbd-header-nav__list { display: flex; align-items: center; flex-wrap: nowrap; width: 100%; max-width: 100%; min-width: 0; gap: 2px; margin: 0; padding: 0; overflow: visible; list-style: none; } .aisbd-header-nav > .aisbd-header-nav__list > li { position: relative; flex: 1 1 auto; min-width: 0; max-width: 220px; margin: 0; padding: 0; list-style: none; } .aisbd-header-nav > .aisbd-header-nav__list > li > a { display: inline-flex; align-items: center; min-height: 40px; width: 100%; max-width: 100%; min-width: 0; padding: 8px 8px; border-radius: 9px; color: var(--aisbd-color-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aisbd-header-nav > .aisbd-header-nav__list > li > a:hover, .aisbd-header-nav > .aisbd-header-nav__list > li > a:focus-visible { background: var(--aisbd-color-primary-soft); color: var(--aisbd-color-primary-strong); } /* Reset every nested WordPress menu so child pages never enter the main row. */ .aisbd-header-nav ul ul, .aisbd-header-nav .sub-menu { position: absolute; top: calc(100% + 3px); left: 0; z-index: 10000; display: none; width: max-content; min-width: 210px; max-width: 280px; margin: 0; padding: 6px; border: 1px solid var(--aisbd-color-border); border-radius: 12px; background: #fff; box-shadow: var(--aisbd-shadow-soft); list-style: none; } .aisbd-header-nav > .aisbd-header-nav__list > li:hover > ul, .aisbd-header-nav > .aisbd-header-nav__list > li:focus-within > ul, .aisbd-header-nav > .aisbd-header-nav__list > li:hover > .sub-menu, .aisbd-header-nav > .aisbd-header-nav__list > li:focus-within > .sub-menu { display: block; } .aisbd-header-nav ul ul li { position: relative; display: block; width: 100%; margin: 0; padding: 0; list-style: none; } .aisbd-header-nav ul ul a { display: flex; align-items: center; width: 100%; min-height: 40px; padding: 9px 11px; border-radius: 8px; color: var(--aisbd-color-text); text-decoration: none; white-space: normal; line-height: 1.35; } .aisbd-header-nav ul ul a:hover, .aisbd-header-nav ul ul a:focus-visible { background: var(--aisbd-color-primary-soft); color: var(--aisbd-color-primary-strong); } /* WordPress marks parents with .menu-item-has-children. Keep the parent * link in the top row while its children remain in a real dropdown. */ .aisbd-header-nav .menu-item-has-children > a::after { content: '⌄'; margin-left: 6px; font-size: .78em; line-height: 1; } .aisbd-header-nav .menu-item-has-children > .sub-menu { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility .15s ease; } .aisbd-header-nav .menu-item-has-children:hover > .sub-menu, .aisbd-header-nav .menu-item-has-children:focus-within > .sub-menu { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); } /* Deeper child menus open beside their parent. */ .aisbd-header-nav ul ul ul { top: -7px; left: calc(100% + 4px); } .aisbd-header-search { width: 100%; max-width: 360px; justify-self: stretch; } .aisbd-header-actions { justify-self: end; white-space: nowrap; } } /* Tablet and mobile: keep nested pages inside the mobile menu. */ @media (max-width: 1100px) { .aisbd-market-header__inner { overflow: visible; } .aisbd-mobile-menu__panel .aisbd-mobile-header-nav__list, .aisbd-mobile-menu__panel .aisbd-mobile-header-nav__list ul { width: 100%; margin: 0; padding: 0; list-style: none; } .aisbd-mobile-menu__panel .aisbd-mobile-header-nav__list .sub-menu { display: grid; gap: 2px; padding: 0 0 4px 14px; } .aisbd-mobile-menu__panel .aisbd-mobile-header-nav__list a { white-space: normal; } } /* Stable footer */ .aisbd-site-footer { display:block; width:100%; margin:0; padding:0; position:relative; clear:both; background:#111827; color:#fff; border-top:1px solid var(--aisbd-color-border); } .aisbd-site-footer__inner { display:grid; grid-template-columns:minmax(220px,280px) minmax(0,1fr); gap:48px; align-items:start; padding:52px 0 46px; } .aisbd-site-footer__inner > div:first-child strong{display:block;color:#fff;font-size:1.2rem;line-height:1.2} .aisbd-site-footer__inner > div:first-child p{margin:10px 0 0;color:#cbd5e1;line-height:1.6} .aisbd-site-footer__inner > nav{display:block;width:100%;min-width:0;margin:0;padding:0} .aisbd-site-footer .aisbd-footer-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 28px;width:100%;margin:0;padding:0;list-style:none} .aisbd-site-footer .aisbd-footer-nav>li{display:block;min-width:0;margin:0;padding:0;list-style:none} .aisbd-site-footer .aisbd-footer-nav>li>a{display:block;margin:0 0 11px;color:#fff;font-weight:700;line-height:1.35;text-decoration:none} .aisbd-site-footer .aisbd-footer-nav .sub-menu{display:grid;grid-template-columns:1fr;gap:7px;margin:0;padding:0;list-style:none;position:static;transform:none} .aisbd-site-footer .aisbd-footer-nav .sub-menu li{display:block;margin:0;padding:0;list-style:none} .aisbd-site-footer .aisbd-footer-nav .sub-menu a{display:block;padding:0;color:#cbd5e1;font-size:.92rem;line-height:1.45;text-decoration:none} .aisbd-site-footer__bottom{width:min(100% - 2rem,1200px);margin-inline:auto;padding:18px 0 22px;border-top:1px solid rgba(255,255,255,.12);color:#cbd5e1;font-size:.85rem} /* Canonical page frame. Keep public regions in source order. */ .aisbd-site-shell{display:block;width:100%;margin:0;padding:0;position:relative;clear:both} .aisbd-site-shell>.aisbd-market-header,.aisbd-site-shell>#primary,.aisbd-site-shell>.aisbd-site-footer{display:block;position:relative;float:none;clear:both;inset:auto;transform:none;order:initial;flex:none;grid-area:auto} /* WordPress Customizer: never let preview/admin CSS reorder theme regions. */ body.customize-support .aisbd-site-shell, body.customize-preview .aisbd-site-shell{display:block!important;position:relative!important;width:100%!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;float:none!important;clear:both!important;inset:auto!important;transform:none!important;order:0!important;flex:none!important;grid-area:auto!important} body.customize-support .aisbd-site-shell>.aisbd-market-header, body.customize-support .aisbd-site-shell>#primary, body.customize-support .aisbd-site-shell>.aisbd-site-footer, body.customize-preview .aisbd-site-shell>.aisbd-market-header, body.customize-preview .aisbd-site-shell>#primary, body.customize-preview .aisbd-site-shell>.aisbd-site-footer{display:block!important;position:relative!important;float:none!important;clear:both!important;inset:auto!important;transform:none!important;order:0!important;flex:none!important;grid-area:auto!important} /* Customizer preview: the footer is not part of the header/menu editing surface. * Hide it by server-side preview state as well as CSS so WordPress Customizer * cannot paint the footer navigation into the header area. */ body.customize-support .aisbd-site-footer, body.customize-preview .aisbd-site-footer, body.wp-customizer .aisbd-site-footer{display:none!important} /* Keep the primary header navigation strictly before the search field. * Children are dropdowns; they never participate in the header row width. */ @media (min-width:1101px){ .aisbd-market-header__inner{ grid-template-columns:auto auto minmax(0,1fr) minmax(280px,360px) auto; overflow:visible; } .aisbd-header-nav{ min-width:0!important; max-width:100%!important; overflow:visible!important; } .aisbd-header-nav > .aisbd-header-nav__list{ min-width:0!important; max-width:100%!important; overflow:hidden!important; } .aisbd-header-nav > .aisbd-header-nav__list > li{ flex:0 1 auto!important; min-width:0!important; max-width:190px!important; } .aisbd-header-nav > .aisbd-header-nav__list > li > a{ width:auto!important; max-width:190px!important; } .aisbd-header-nav ul ul, .aisbd-header-nav .sub-menu{ overflow:visible!important; } } @media (max-width:900px){.aisbd-site-footer__inner{grid-template-columns:1fr;gap:34px;padding:42px 0 38px}.aisbd-site-footer .aisbd-footer-nav{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:640px){.aisbd-site-footer .aisbd-footer-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}} @media (max-width:420px){.aisbd-site-footer .aisbd-footer-nav{grid-template-columns:1fr}} /* v1.3.31 — Final header/navigation layout contract. * The header owns one horizontal row. Top-level navigation is bounded between * Courses and Search; child pages are dropdowns and never consume row width. * The asset version is bumped so Customizer/live browsers cannot keep the old CSS. */ @media (min-width: 1101px) { .aisbd-market-header__inner { display: grid !important; grid-template-columns: 64px 84px minmax(0, 1fr) 320px max-content !important; align-items: center !important; gap: 14px !important; width: min(100% - 2rem, 1200px) !important; min-height: 78px !important; height: 78px !important; overflow: visible !important; } .aisbd-brand { min-width: 0 !important; } .aisbd-brand .custom-logo { max-width: 64px !important; max-height: 52px !important; } .aisbd-header-link--courses { min-width: 0 !important; } .aisbd-header-nav { display: block !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; } .aisbd-header-nav > .aisbd-header-nav__list { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; gap: 2px !important; overflow: hidden !important; list-style: none !important; } .aisbd-header-nav > .aisbd-header-nav__list > li { position: relative !important; flex: 0 1 auto !important; min-width: 0 !important; max-width: 180px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .aisbd-header-nav > .aisbd-header-nav__list > li > a { display: inline-flex !important; align-items: center !important; width: auto !important; max-width: 180px !important; min-width: 0 !important; min-height: 40px !important; padding: 8px 8px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; border-radius: 9px !important; } .aisbd-header-nav .sub-menu, .aisbd-header-nav ul ul { position: absolute !important; top: calc(100% + 4px) !important; left: 0 !important; z-index: 99999 !important; display: none !important; width: max-content !important; min-width: 220px !important; max-width: 320px !important; margin: 0 !important; padding: 6px !important; overflow: visible !important; border: 1px solid #e5e7eb !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 14px 30px rgba(17,24,39,.12) !important; list-style: none !important; } .aisbd-header-nav .menu-item-has-children:hover > .sub-menu, .aisbd-header-nav .menu-item-has-children:focus-within > .sub-menu { display: block !important; } .aisbd-header-nav .sub-menu li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .aisbd-header-nav .sub-menu a { display: block !important; width: 100% !important; min-height: 40px !important; padding: 9px 11px !important; white-space: normal !important; line-height: 1.35 !important; border-radius: 8px !important; } .aisbd-header-nav .sub-menu ul, .aisbd-header-nav .sub-menu .sub-menu { top: -7px !important; left: calc(100% + 4px) !important; } .aisbd-header-search { width: 320px !important; max-width: 320px !important; min-width: 280px !important; justify-self: stretch !important; } .aisbd-header-actions { min-width: max-content !important; width: max-content !important; justify-self: end !important; white-space: nowrap !important; } /* Never allow the header navigation to paint into Search or Actions. */ .aisbd-header-nav + .aisbd-header-search, .aisbd-header-search + .aisbd-header-actions { position: relative !important; z-index: 30 !important; } } /* Remove the experimental Customizer-only footer hiding from earlier builds. */ body.customize-support .aisbd-site-footer, body.customize-preview .aisbd-site-footer, body.wp-customizer .aisbd-site-footer { display: block !important; } /* v1.3.38 — Customizer preview stability contract. * The Customizer canvas must show the same header geometry as the live page. * Footer is not part of the header/menu editing surface and is omitted by * footer.php during preview; these rules are a final defensive layer. */ body.customize-preview .aisbd-site-shell, body.customize-support .aisbd-site-shell { display:block !important; position:relative !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; float:none !important; clear:both !important; transform:none !important; order:0 !important; flex:none !important; grid-area:auto !important; } body.customize-preview .aisbd-site-shell > .aisbd-market-header, body.customize-support .aisbd-site-shell > .aisbd-market-header { display:block !important; position:relative !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; float:none !important; clear:both !important; margin:0 !important; transform:none !important; order:0 !important; flex:none !important; } body.customize-preview .aisbd-site-footer, body.customize-support .aisbd-site-footer, body.customize-preview nav[aria-label="Footer menu"], body.customize-support nav[aria-label="Footer menu"] { display:none !important; } @media (min-width:1101px) { body.customize-preview .aisbd-market-header__inner, body.customize-support .aisbd-market-header__inner { display:grid !important; grid-template-columns:64px 84px minmax(220px,1fr) 320px max-content !important; width:min(100% - 2rem,1200px) !important; min-height:78px !important; height:78px !important; gap:14px !important; align-items:center !important; overflow:visible !important; } body.customize-preview .aisbd-header-nav, body.customize-support .aisbd-header-nav { min-width:0 !important; width:100% !important; max-width:100% !important; overflow:visible !important; } body.customize-preview .aisbd-header-nav > .aisbd-header-nav__list, body.customize-support .aisbd-header-nav > .aisbd-header-nav__list { display:flex !important; flex-wrap:nowrap !important; align-items:center !important; min-width:0 !important; width:100% !important; max-width:100% !important; overflow:hidden !important; gap:2px !important; margin:0 !important; padding:0 !important; list-style:none !important; } body.customize-preview .aisbd-header-nav > .aisbd-header-nav__list > li, body.customize-support .aisbd-header-nav > .aisbd-header-nav__list > li { position:relative !important; flex:0 1 auto !important; min-width:0 !important; max-width:180px !important; margin:0 !important; padding:0 !important; list-style:none !important; } body.customize-preview .aisbd-header-nav > .aisbd-header-nav__list > li > a, body.customize-support .aisbd-header-nav > .aisbd-header-nav__list > li > a { display:inline-flex !important; align-items:center !important; max-width:180px !important; min-width:0 !important; width:auto !important; min-height:40px !important; padding:8px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.customize-preview .aisbd-header-nav .sub-menu, body.customize-preview .aisbd-header-nav ul ul, body.customize-support .aisbd-header-nav .sub-menu, body.customize-support .aisbd-header-nav ul ul { position:absolute !important; top:calc(100% + 4px) !important; left:0 !important; display:none !important; min-width:220px !important; max-width:320px !important; width:max-content !important; margin:0 !important; padding:6px !important; background:#fff !important; border:1px solid #e5e7eb !important; border-radius:12px !important; box-shadow:0 14px 30px rgba(17,24,39,.12) !important; overflow:visible !important; z-index:99999 !important; list-style:none !important; } body.customize-preview .aisbd-header-nav .menu-item-has-children:hover > .sub-menu, body.customize-preview .aisbd-header-nav .menu-item-has-children:focus-within > .sub-menu, body.customize-support .aisbd-header-nav .menu-item-has-children:hover > .sub-menu, body.customize-support .aisbd-header-nav .menu-item-has-children:focus-within > .sub-menu { display:block !important; } body.customize-preview .aisbd-header-nav .sub-menu li, body.customize-support .aisbd-header-nav .sub-menu li { display:block !important; width:100% !important; margin:0 !important; padding:0 !important; } body.customize-preview .aisbd-header-nav .sub-menu a, body.customize-support .aisbd-header-nav .sub-menu a { display:block !important; width:100% !important; padding:9px 11px !important; min-height:40px !important; white-space:normal !important; } body.customize-preview .aisbd-header-nav .sub-menu ul, body.customize-preview .aisbd-header-nav .sub-menu .sub-menu, body.customize-support .aisbd-header-nav .sub-menu ul, body.customize-support .aisbd-header-nav .sub-menu .sub-menu { top:-7px !important; left:calc(100% + 4px) !important; } body.customize-preview .aisbd-header-search, body.customize-support .aisbd-header-search { width:320px !important; min-width:280px !important; max-width:320px !important; } body.customize-preview .aisbd-header-actions, body.customize-support .aisbd-header-actions { width:max-content !important; min-width:max-content !important; white-space:nowrap !important; } } /* v1.3.38 — Header / dropdown contract. * One source of truth for the real frontend and the Customizer iframe. * Do not let submenu items participate in the header row. */ @media (min-width: 1101px) { .aisbd-market-header__inner { display: grid !important; grid-template-columns: 64px 84px minmax(220px, 1fr) minmax(280px, 360px) max-content !important; align-items: center !important; gap: 14px !important; min-height: 78px !important; height: 78px !important; overflow: visible !important; } .aisbd-brand, .aisbd-header-link--courses, .aisbd-header-nav, .aisbd-header-search, .aisbd-header-actions { min-width: 0 !important; } .aisbd-header-nav { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; } /* Top-level items only. */ .aisbd-header-nav ul.aisbd-header-nav__list { display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; gap: 2px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none !important; overflow: visible !important; } .aisbd-header-nav ul.aisbd-header-nav__list > li { position: relative !important; display: block !important; flex: 0 1 auto !important; width: auto !important; min-width: 0 !important; max-width: 190px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .aisbd-header-nav ul.aisbd-header-nav__list > li > a { display: inline-flex !important; align-items: center !important; width: auto !important; min-width: 0 !important; max-width: 190px !important; min-height: 40px !important; padding: 8px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-decoration: none !important; } /* Every submenu is removed from normal flow. */ .aisbd-header-nav ul.aisbd-header-nav__list ul.sub-menu, .aisbd-header-nav ul.aisbd-header-nav__list ul ul { position: absolute !important; top: calc(100% + 4px) !important; left: 0 !important; right: auto !important; z-index: 99999 !important; display: none !important; flex-direction: column !important; width: max-content !important; min-width: 220px !important; max-width: 320px !important; height: auto !important; margin: 0 !important; padding: 6px !important; list-style: none !important; background: #fff !important; border: 1px solid #e5e7eb !important; border-radius: 12px !important; box-shadow: 0 14px 30px rgba(17,24,39,.12) !important; } .aisbd-header-nav ul.aisbd-header-nav__list > li:hover > ul.sub-menu, .aisbd-header-nav ul.aisbd-header-nav__list > li:hover > ul, .aisbd-header-nav ul.aisbd-header-nav__list > li:focus-within > ul.sub-menu, .aisbd-header-nav ul.aisbd-header-nav__list > li:focus-within > ul { display: flex !important; } .aisbd-header-nav ul.aisbd-header-nav__list ul.sub-menu > li, .aisbd-header-nav ul.aisbd-header-nav__list ul ul > li { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .aisbd-header-nav ul.aisbd-header-nav__list ul.sub-menu > li > a, .aisbd-header-nav ul.aisbd-header-nav__list ul ul > li > a { display: block !important; width: 100% !important; min-height: 40px !important; padding: 9px 11px !important; white-space: normal !important; line-height: 1.35 !important; text-decoration: none !important; border-radius: 8px !important; box-sizing: border-box !important; } /* Third level and deeper: open beside the parent. */ .aisbd-header-nav ul.aisbd-header-nav__list ul.sub-menu ul.sub-menu, .aisbd-header-nav ul.aisbd-header-nav__list ul ul ul { top: -7px !important; left: calc(100% + 4px) !important; } .aisbd-header-search { width: 100% !important; min-width: 280px !important; max-width: 360px !important; justify-self: stretch !important; } .aisbd-header-actions { width: max-content !important; min-width: max-content !important; justify-self: end !important; white-space: nowrap !important; } } /* Customizer: never open a submenu just because WordPress focused an edit shortcut. * Hover remains available so the preview can still test the real dropdown. */ @media (min-width: 1101px) { body.customize-preview .aisbd-header-nav ul.aisbd-header-nav__list ul.sub-menu, body.customize-support .aisbd-header-nav ul.aisbd-header-nav__list ul.sub-menu, body.customize-preview .aisbd-header-nav ul.aisbd-header-nav__list ul ul, body.customize-support .aisbd-header-nav ul.aisbd-header-nav__list ul ul { display: none !important; } body.customize-preview .aisbd-header-nav ul.aisbd-header-nav__list > li:hover > ul.sub-menu, body.customize-preview .aisbd-header-nav ul.aisbd-header-nav__list > li:hover > ul, body.customize-support .aisbd-header-nav ul.aisbd-header-nav__list > li:hover > ul.sub-menu, body.customize-support .aisbd-header-nav ul.aisbd-header-nav__list > li:hover > ul { display: flex !important; } body.customize-preview .aisbd-header-nav ul.aisbd-header-nav__list > li:focus-within > ul.sub-menu, body.customize-preview .aisbd-header-nav ul.aisbd-header-nav__list > li:focus-within > ul, body.customize-support .aisbd-header-nav ul.aisbd-header-nav__list > li:focus-within > ul.sub-menu, body.customize-support .aisbd-header-nav ul.aisbd-header-nav__list > li:focus-within > ul { display: none !important; } body.customize-preview .aisbd-header-nav .customize-partial-edit-shortcut, body.customize-support .aisbd-header-nav .customize-partial-edit-shortcut { position: absolute !important; z-index: 100001 !important; } } /* v1.3.39 — Definitive Customizer header isolation. * The preview must use the same one-row header geometry as the live page. * WordPress/plugin menu wrappers can vary, so target every direct menu UL * shape rather than relying only on the theme-generated class. */ @media (min-width:1101px) { body.customize-preview .aisbd-market-header, body.customize-support .aisbd-market-header { position:relative !important; z-index:100000 !important; height:78px !important; min-height:78px !important; overflow:visible !important; } body.customize-preview .aisbd-market-header__inner, body.customize-support .aisbd-market-header__inner { display:grid !important; grid-template-columns:64px 84px minmax(0,1fr) 320px max-content !important; align-items:center !important; gap:14px !important; width:min(100% - 2rem,1200px) !important; height:78px !important; min-height:78px !important; overflow:visible !important; } body.customize-preview .aisbd-brand, body.customize-support .aisbd-brand { grid-column:1 !important; grid-row:1 !important; } body.customize-preview .aisbd-header-link--courses, body.customize-support .aisbd-header-link--courses { grid-column:2 !important; grid-row:1 !important; } body.customize-preview .aisbd-header-nav, body.customize-support .aisbd-header-nav { grid-column:3 !important; grid-row:1 !important; display:block !important; width:100% !important; min-width:0 !important; max-width:100% !important; height:40px !important; min-height:40px !important; overflow:visible !important; position:relative !important; } /* Support both the theme class and WordPress's generic .menu wrapper. */ body.customize-preview .aisbd-header-nav > ul, body.customize-preview .aisbd-header-nav > .menu, body.customize-preview .aisbd-header-nav > .aisbd-header-nav__list, body.customize-support .aisbd-header-nav > ul, body.customize-support .aisbd-header-nav > .menu, body.customize-support .aisbd-header-nav > .aisbd-header-nav__list { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; width:100% !important; height:40px !important; min-height:40px !important; max-height:40px !important; margin:0 !important; padding:0 !important; gap:2px !important; overflow:visible !important; list-style:none !important; } body.customize-preview .aisbd-header-nav > ul > li, body.customize-preview .aisbd-header-nav > .menu > li, body.customize-preview .aisbd-header-nav > .aisbd-header-nav__list > li, body.customize-support .aisbd-header-nav > ul > li, body.customize-support .aisbd-header-nav > .menu > li, body.customize-support .aisbd-header-nav > .aisbd-header-nav__list > li { position:relative !important; display:block !important; flex:0 1 auto !important; width:auto !important; min-width:0 !important; max-width:190px !important; height:40px !important; min-height:40px !important; margin:0 !important; padding:0 !important; list-style:none !important; } body.customize-preview .aisbd-header-nav > ul > li > a, body.customize-preview .aisbd-header-nav > .menu > li > a, body.customize-preview .aisbd-header-nav > .aisbd-header-nav__list > li > a, body.customize-support .aisbd-header-nav > ul > li > a, body.customize-support .aisbd-header-nav > .menu > li > a, body.customize-support .aisbd-header-nav > .aisbd-header-nav__list > li > a { display:inline-flex !important; align-items:center !important; width:auto !important; height:40px !important; min-height:40px !important; max-width:190px !important; padding:8px !important; margin:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; text-decoration:none !important; } /* All nested menus are absolutely positioned and hidden by default. */ body.customize-preview .aisbd-header-nav ul ul, body.customize-preview .aisbd-header-nav .sub-menu, body.customize-support .aisbd-header-nav ul ul, body.customize-support .aisbd-header-nav .sub-menu { position:absolute !important; top:calc(100% + 4px) !important; left:0 !important; right:auto !important; display:none !important; flex-direction:column !important; width:max-content !important; min-width:220px !important; max-width:320px !important; height:auto !important; max-height:none !important; margin:0 !important; padding:6px !important; overflow:visible !important; z-index:100002 !important; background:#fff !important; border:1px solid #e5e7eb !important; border-radius:12px !important; box-shadow:0 14px 30px rgba(17,24,39,.12) !important; list-style:none !important; } /* Hover only. Do not use :focus-within in Customizer because its edit shortcut can focus the parent and incorrectly open the dropdown. */ body.customize-preview .aisbd-header-nav > ul > li:hover > ul, body.customize-preview .aisbd-header-nav > .menu > li:hover > ul, body.customize-preview .aisbd-header-nav > .aisbd-header-nav__list > li:hover > ul, body.customize-support .aisbd-header-nav > ul > li:hover > ul, body.customize-support .aisbd-header-nav > .menu > li:hover > ul, body.customize-support .aisbd-header-nav > .aisbd-header-nav__list > li:hover > ul { display:flex !important; } body.customize-preview .aisbd-header-nav ul ul > li, body.customize-support .aisbd-header-nav ul ul > li { display:block !important; position:relative !important; width:100% !important; height:auto !important; min-height:0 !important; max-width:none !important; margin:0 !important; padding:0 !important; list-style:none !important; } body.customize-preview .aisbd-header-nav ul ul > li > a, body.customize-support .aisbd-header-nav ul ul > li > a { display:block !important; width:100% !important; height:auto !important; min-height:40px !important; max-width:none !important; padding:9px 11px !important; white-space:normal !important; overflow:visible !important; text-decoration:none !important; } body.customize-preview .aisbd-header-nav ul ul ul, body.customize-support .aisbd-header-nav ul ul ul { top:-7px !important; left:calc(100% + 4px) !important; } body.customize-preview .aisbd-header-search, body.customize-support .aisbd-header-search { grid-column:4 !important; grid-row:1 !important; width:320px !important; min-width:280px !important; max-width:320px !important; height:48px !important; } body.customize-preview .aisbd-header-actions, body.customize-support .aisbd-header-actions { grid-column:5 !important; grid-row:1 !important; display:flex !important; align-items:center !important; width:max-content !important; min-width:max-content !important; height:48px !important; white-space:nowrap !important; } } /* v1.3.40 — Customizer desktop viewport parity. * WordPress Customizer Desktop can render the preview iframe at a CSS width * below 1101px even while the preview is visually displayed much wider. * The theme's desktop header already starts at 901px, so the dropdown/header * contract must use the same breakpoint. This is the final override and is * intentionally placed last so older 1101px rules cannot win in the preview. */ @media (min-width: 901px) { .aisbd-market-header__inner { display: grid !important; grid-template-columns: 64px 84px minmax(220px, 1fr) 320px max-content !important; align-items: center !important; gap: 14px !important; width: min(100% - 2rem, 1200px) !important; min-height: 78px !important; height: 78px !important; overflow: visible !important; } .aisbd-brand, .aisbd-header-link--courses, .aisbd-header-nav, .aisbd-header-search, .aisbd-header-actions { min-width: 0 !important; } .aisbd-brand .custom-logo { max-width: 64px !important; max-height: 52px !important; } .aisbd-header-nav { display: block !important; position: relative !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; } .aisbd-header-nav > .aisbd-header-nav__list { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; gap: 2px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; list-style: none !important; } .aisbd-header-nav > .aisbd-header-nav__list > li { position: relative !important; display: block !important; flex: 0 1 auto !important; min-width: 0 !important; max-width: 180px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .aisbd-header-nav > .aisbd-header-nav__list > li > a { display: inline-flex !important; align-items: center !important; width: auto !important; max-width: 180px !important; min-width: 0 !important; min-height: 40px !important; padding: 8px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Critical: nested menu lists never participate in the header row. */ .aisbd-header-nav > .aisbd-header-nav__list > li > ul, .aisbd-header-nav > .aisbd-header-nav__list > li > .sub-menu { position: absolute !important; top: calc(100% + 4px) !important; left: 0 !important; z-index: 99999 !important; display: none !important; width: max-content !important; min-width: 220px !important; max-width: 320px !important; height: auto !important; margin: 0 !important; padding: 6px !important; border: 1px solid #e5e7eb !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 14px 30px rgba(17,24,39,.12) !important; list-style: none !important; flex-direction: column !important; align-items: stretch !important; } .aisbd-header-nav > .aisbd-header-nav__list > li:hover > ul, .aisbd-header-nav > .aisbd-header-nav__list > li:hover > .sub-menu { display: block !important; } /* Do not open menus merely because a Customizer edit shortcut has focus. */ body.customize-preview .aisbd-header-nav > .aisbd-header-nav__list > li:focus-within > ul, body.customize-preview .aisbd-header-nav > .aisbd-header-nav__list > li:focus-within > .sub-menu, body.customize-support .aisbd-header-nav > .aisbd-header-nav__list > li:focus-within > ul, body.customize-support .aisbd-header-nav > .aisbd-header-nav__list > li:focus-within > .sub-menu { display: none !important; } .aisbd-header-nav > .aisbd-header-nav__list > li:hover > ul > li, .aisbd-header-nav > .aisbd-header-nav__list > li:hover > .sub-menu > li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .aisbd-header-nav ul ul a, .aisbd-header-nav .sub-menu a { display: block !important; width: 100% !important; min-height: 40px !important; padding: 9px 11px !important; white-space: normal !important; line-height: 1.35 !important; border-radius: 8px !important; } .aisbd-header-nav ul ul ul, .aisbd-header-nav .sub-menu .sub-menu { top: -7px !important; left: calc(100% + 4px) !important; } .aisbd-header-search { width: 320px !important; max-width: 320px !important; min-width: 280px !important; justify-self: stretch !important; } .aisbd-header-actions { width: max-content !important; min-width: max-content !important; justify-self: end !important; white-space: nowrap !important; } } /* v1.3.41 — Header menu spacing / no-overlap fix. * Keep the top-level navigation wide enough for its actual labels. The previous * fixed 220px menu track allowed long labels to paint into the search field. * The navigation now sizes to its content while the search remains flexible. */ @media (min-width: 901px) { .aisbd-market-header__inner { grid-template-columns: 64px 84px max-content minmax(260px, 1fr) max-content !important; gap: 16px !important; } .aisbd-header-nav { width: max-content !important; max-width: 100% !important; min-width: 0 !important; } .aisbd-header-nav > .aisbd-header-nav__list, .aisbd-header-nav ul.aisbd-header-nav__list { width: max-content !important; max-width: 100% !important; flex-wrap: nowrap !important; gap: 8px !important; } .aisbd-header-nav > .aisbd-header-nav__list > li, .aisbd-header-nav ul.aisbd-header-nav__list > li { flex: 0 0 auto !important; max-width: none !important; } .aisbd-header-nav > .aisbd-header-nav__list > li > a, .aisbd-header-nav ul.aisbd-header-nav__list > li > a { width: auto !important; max-width: none !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; padding-inline: 8px !important; } .aisbd-header-search { min-width: 260px !important; width: 100% !important; max-width: 360px !important; } } /* Customizer uses the same geometry as the live header. */ @media (min-width: 901px) { body.customize-preview .aisbd-market-header__inner, body.customize-support .aisbd-market-header__inner { grid-template-columns: 64px 84px max-content minmax(260px, 1fr) max-content !important; gap: 16px !important; } body.customize-preview .aisbd-header-nav, body.customize-support .aisbd-header-nav { width: max-content !important; max-width: 100% !important; min-width: 0 !important; } body.customize-preview .aisbd-header-nav > .aisbd-header-nav__list, body.customize-support .aisbd-header-nav > .aisbd-header-nav__list { width: max-content !important; max-width: 100% !important; flex-wrap: nowrap !important; gap: 8px !important; overflow: visible !important; } body.customize-preview .aisbd-header-nav > .aisbd-header-nav__list > li, body.customize-support .aisbd-header-nav > .aisbd-header-nav__list > li { flex: 0 0 auto !important; max-width: none !important; } body.customize-preview .aisbd-header-nav > .aisbd-header-nav__list > li > a, body.customize-support .aisbd-header-nav > .aisbd-header-nav__list > li > a { width: auto !important; max-width: none !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; } } /* v1.3.42 — Customizer desktop header width balance. * The Customizer iframe can be narrower than the browser window. Keep the * navigation readable while reserving enough room for Search + Account. * Live desktop geometry above 1400px remains unchanged. */ @media (min-width: 901px) and (max-width: 1400px) { body.customize-preview .aisbd-market-header__inner, body.customize-support .aisbd-market-header__inner { display: grid !important; grid-template-columns: 56px 76px minmax(300px, 1fr) minmax(240px, 280px) max-content !important; width: calc(100% - 16px) !important; max-width: none !important; gap: 10px !important; min-height: 78px !important; height: 78px !important; align-items: center !important; overflow: visible !important; } body.customize-preview .aisbd-brand .custom-logo, body.customize-support .aisbd-brand .custom-logo { max-width: 56px !important; max-height: 48px !important; } body.customize-preview .aisbd-header-nav, body.customize-support .aisbd-header-nav { min-width: 0 !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; } body.customize-preview .aisbd-header-nav > .aisbd-header-nav__list, body.customize-support .aisbd-header-nav > .aisbd-header-nav__list { gap: 6px !important; overflow: visible !important; } body.customize-preview .aisbd-header-nav > .aisbd-header-nav__list > li > a, body.customize-support .aisbd-header-nav > .aisbd-header-nav__list > li > a { padding-inline: 7px !important; max-width: none !important; overflow: visible !important; text-overflow: clip !important; } body.customize-preview .aisbd-header-search, body.customize-support .aisbd-header-search { width: 100% !important; min-width: 240px !important; max-width: 280px !important; } body.customize-preview .aisbd-header-actions, body.customize-support .aisbd-header-actions { gap: 8px !important; min-width: max-content !important; max-width: 100% !important; justify-self: end !important; } body.customize-preview .aisbd-header-actions .aisbd-button--header, body.customize-support .aisbd-header-actions .aisbd-button--header { padding-inline: 16px !important; min-height: 44px !important; } } /* Very narrow desktop Customizer iframe: let the header compress gracefully * before the actual mobile breakpoint takes over. */ @media (min-width: 901px) and (max-width: 1120px) { body.customize-preview .aisbd-market-header__inner, body.customize-support .aisbd-market-header__inner { grid-template-columns: 52px 70px minmax(240px, 1fr) 220px max-content !important; gap: 8px !important; } body.customize-preview .aisbd-header-search, body.customize-support .aisbd-header-search { min-width: 210px !important; max-width: 220px !important; } body.customize-preview .aisbd-header-nav > .aisbd-header-nav__list, body.customize-support .aisbd-header-nav > .aisbd-header-nav__list { gap: 2px !important; } body.customize-preview .aisbd-header-nav > .aisbd-header-nav__list > li > a, body.customize-support .aisbd-header-nav > .aisbd-header-nav__list > li > a { padding-inline: 5px !important; font-size: .9rem !important; } } /* v1.3.43 — Customizer desktop right-edge balance. * Keep the live header untouched. In the narrower Customizer canvas, allow the * search field to shrink and keep Account/Logout/Cart inside the viewport. */ @media (min-width:901px) { body.customize-preview .aisbd-market-header__inner, body.customize-support .aisbd-market-header__inner { display:grid !important; grid-template-columns:64px 78px minmax(0,1fr) minmax(240px,300px) minmax(230px,max-content) !important; gap:10px !important; width:100% !important; max-width:none !important; padding-inline:14px !important; box-sizing:border-box !important; overflow:visible !important; } body.customize-preview .aisbd-header-nav, body.customize-support .aisbd-header-nav { min-width:0 !important; width:100% !important; overflow:visible !important; } body.customize-preview .aisbd-header-nav > .aisbd-header-nav__list, body.customize-support .aisbd-header-nav > .aisbd-header-nav__list { width:max-content !important; max-width:100% !important; gap:8px !important; overflow:visible !important; } body.customize-preview .aisbd-header-nav > .aisbd-header-nav__list > li, body.customize-support .aisbd-header-nav > .aisbd-header-nav__list > li { max-width:none !important; flex:0 0 auto !important; } body.customize-preview .aisbd-header-nav > .aisbd-header-nav__list > li > a, body.customize-support .aisbd-header-nav > .aisbd-header-nav__list > li > a { max-width:none !important; padding-inline:7px !important; overflow:visible !important; text-overflow:clip !important; } body.customize-preview .aisbd-header-search, body.customize-support .aisbd-header-search { width:100% !important; min-width:0 !important; max-width:none !important; } body.customize-preview .aisbd-header-actions, body.customize-support .aisbd-header-actions { min-width:0 !important; width:100% !important; max-width:100% !important; justify-self:end !important; gap:7px !important; overflow:visible !important; } body.customize-preview .aisbd-header-actions .aisbd-header-link--account, body.customize-support .aisbd-header-actions .aisbd-header-link--account { font-size:.9rem !important; flex:0 1 auto !important; } body.customize-preview .aisbd-header-actions .aisbd-button--header, body.customize-support .aisbd-header-actions .aisbd-button--header { min-height:42px !important; padding-inline:14px !important; flex:0 0 auto !important; white-space:nowrap !important; } body.customize-preview .aisbd-header-actions .aisbd-header-icon, body.customize-support .aisbd-header-actions .aisbd-header-icon { flex:0 0 24px !important; width:24px !important; text-align:center !important; } } /* v1.3.47 — Gutenberg homepage section blocks. */ .aisbd-homepage-block__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; align-items: center; } .aisbd-homepage-block__media img { display: block; width: 100%; height: auto; border-radius: 24px; } .aisbd-homepage-block__content h2 { margin: 0 0 1rem; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.08; } .aisbd-homepage-block__content p { margin: 0 0 1.5rem; font-size: 1.1rem; line-height: 1.7; } .aisbd-homepage-block-editor { border: 1px dashed #cbd5e1; border-radius: 16px; padding: 24px; background: #f8fafc; } .aisbd-homepage-block-editor__badge { font-weight: 700; margin-bottom: 8px; } .aisbd-homepage-block-editor__image { display: block; max-width: 100%; height: auto; border-radius: 16px; margin-bottom: 16px; } @media (max-width: 800px) { .aisbd-homepage-block__inner { grid-template-columns: 1fr; } }