/*
Theme Name: ChoPaChe-Astra
Template: astra
Description: Custom Child Theme built for ChoPaChe Edu
Author: ChoPaChe
Version: 4.20.69
*/

/* ====================================
   GLASS EFFECT CLASSES (KEEP THESE)
   ==================================== */
.glass1 {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4.4px);
  -webkit-backdrop-filter: blur(4.4px);
}

.glass2 {
  background: rgba(255, 255, 255, 0);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(6.7px);
  -webkit-backdrop-filter: blur(6.7px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass3 {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2.8px);
  -webkit-backdrop-filter: blur(2.8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass4 {
  background: rgba(255, 255, 255, 0);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4.3px);
  -webkit-backdrop-filter: blur(4.3px);
}

.glass5 {
  background: rgba(255, 255, 255, 0);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5.9px);
  -webkit-backdrop-filter: blur(5.9px);
}

.glass6 {
  background: rgba(255, 255, 255, 0);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5.8px);
  -webkit-backdrop-filter: blur(5.8px);
  border: 1px solid rgba(255, 255, 255, 1);
}

.glass7 {
  background: rgba(145, 101, 232, 0.08);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(7.2px);
  -webkit-backdrop-filter: blur(7.2px);
  border: 1px solid rgba(145, 101, 232, 1);
}

.glass8 {
  background: rgba(145, 101, 232, 0);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4.3px);
  -webkit-backdrop-filter: blur(4.3px);
  border: 1px solid rgba(145, 101, 232, 1);
}

.glass9 {
  background: rgba(0, 0, 0, 0.19);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5.5px);
  -webkit-backdrop-filter: blur(5.5px);
}

.glass10 {
  background: rgba(11, 0, 0, 0.52);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3.5px);
  -webkit-backdrop-filter: blur(3.5px);
  border: 1px solid rgba(11, 0, 0, 0.3);
}

.glass11 {
  background: rgba(21, 11, 11, 0.44);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(1.4px);
  -webkit-backdrop-filter: blur(1.4px);
}

/* ====================================
   FULL-WIDTH CONTENT (KEEP THESE)
   ==================================== */
/* Remove Astra container constraints for all full-width pages */
.ast-page-builder-template .site-content,
.ast-page-builder-template .entry-content,
.site-content,
.entry-content {
    margin: 0;
    padding: 0;
    max-width: 100%;
    width: 100%;
}

/* Override but EXCLUDE header container */
.ast-page-builder-template .ast-container:not(.site-header .ast-container),
.ast-container:not(.site-header .ast-container) {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Ensure ALL full-width blocks stretch to full viewport width */
.alignfull,
.wp-block[data-align="full"],
.alignwide,
[class*="align-full"],
[class*="alignfull"] {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Specific block editor full-width support */
.wp-block-kadence-rowlayout.alignfull,
.kb-row-layout-wrap.alignfull,
.wp-block-cover.alignfull,
.wp-block-group.alignfull,
.wp-block-columns.alignfull,
.elementor-section-stretched,
.elementor-section.elementor-section-full_width,
.fl-row-full-width,
.et_pb_section,
.oxy-section,
.brxe-section,
.wp-block-uagb-container.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Remove Astra's default content spacing for all container types */
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-plain-container .ast-article-single,
.ast-plain-container .ast-article-post,
.ast-narrow-container .ast-article-single,
.ast-narrow-container .ast-article-post {
    padding: 0;
}

.ast-separate-container .site-main > .ast-container,
.ast-plain-container .site-main > .ast-container,
.ast-narrow-container .site-main > .ast-container,
.site-main > .ast-container {
    padding: 0;
}

/* Remove article/content wrapper padding */
.ast-article-single,
.ast-article-post,
article,
main {
    padding: 0 !important;
}

/* Ensure no padding on the main content wrapper */
.site-main,
#primary,
#content {
    padding: 0;
    margin: 0;
}

/* Remove spacing from entry header */
.entry-header {
    margin: 0;
    padding: 0;
}

/* Full width for all WordPress core blocks */
.wp-block-image.alignfull img,
.wp-block-video.alignfull video,
.wp-block-embed.alignfull,
.wp-block-media-text.alignfull {
    width: 100%;
}

/* Ensure nested containers also stretch full width */
.alignfull .alignfull,
.alignfull > * {
    max-width: 100%;
}

/* Remove default block spacing that might interfere */
.entry-content > .alignfull,
.entry-content > [data-align="full"] {
    margin-top: 0;
    margin-bottom: 0;
}

/* Fix for Astra's box layout */
.ast-box-layout .site,
.ast-box-layout .site-content {
    max-width: 100%;
    width: 100%;
}

/* Override any max-width constraints - EXCEPT HEADER */
body .site:not(.site-header),
body .site-content,
body .entry-content,
body main,
body article {
    max-width: 100% !important;
}

/* Ensure proper full-width on mobile devices */
@media (max-width: 768px) {
    .alignfull,
    .wp-block[data-align="full"],
    [class*="align-full"] {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}

/* Remove horizontal overflow issues */
body {
    overflow-x: hidden;
    padding-top: 0 !important;
}

.site,
#page {
    overflow-x: hidden;
}

/* ====================================
   SHRINKING HEADER WITH GLASSMORPHISM
   ==================================== */

/* BASE HEADER - INITIAL STATE (SOLID WHITE) */
.site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Solid white background initially */
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Override Astra's header bar */
.site-header .main-header-bar {
    padding: 20px 0 !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* IMPORTANT: Keep header content centered, not full width */
.site-header .ast-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Logo & Branding */
.site-header .custom-logo-link img,
.site-header .site-logo-img img,
.site-header .custom-logo img {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 60px !important;
    width: auto;
}

.site-header .site-title {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.5em;
    margin: 0;
}

.site-header .site-description {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    font-size: 0.9em;
}

/* Navigation Menu */
.site-header .main-header-menu .menu-item > a {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 10px 15px;
    font-size: 1em;
}

/* CTA Button */
.site-header .ast-custom-button,
.site-header .menu-item .ast-custom-button,
.site-header .ast-button {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 12px 28px !important;
    font-size: 1em;
}

/* INITIAL STATE — FULL WIDTH */
.site-header .main-header-bar {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    border-radius: 0;
    backdrop-filter: none;
    box-shadow: none;
}

/* ====================================
   SCROLLED STATE - GLASSMORPHISM PILL
   ==================================== */

.site-header.scrolled {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* FLOATING GLASS PILL */
.site-header.scrolled .main-header-bar {
    pointer-events: auto;
    max-width: 72%;
    margin: 12px auto 0 auto;
    background: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(6.7px) !important;
    -webkit-backdrop-filter: blur(6.7px) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    padding: 6px 22px !important;
    transition:
        max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.45s ease,
        box-shadow 0.45s ease;
}

.site-header.scrolled .main-header-bar .ast-container {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Shrink logo */
.site-header.scrolled .custom-logo-link img,
.site-header.scrolled .site-logo-img img,
.site-header.scrolled .custom-logo img {
    max-height: 45px !important;
}

/* Shrink title */
.site-header.scrolled .site-title {
    font-size: 1.3em;
}

/* Hide tagline */
.site-header.scrolled .site-description {
    opacity: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
}

/* Shrink navigation */
.site-header.scrolled .main-header-menu .menu-item > a {
    padding: 8px 12px !important;
    font-size: 0.95em;
}

/* Shrink button */
.site-header.scrolled .ast-custom-button,
.site-header.scrolled .menu-item .ast-custom-button,
.site-header.scrolled .ast-button {
    padding: 8px 22px !important;
    font-size: 0.95em;
}

/* ====================================
   REMOVE WHITE GAP BELOW HEADER
   ==================================== */
.site-content,
#primary,
#content,
main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.home .site-content,
.page .site-content {
    margin-top: 0 !important;
}

/* ====================================
   ADMIN BAR ADJUSTMENTS
   ==================================== */
body.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

@media screen and (max-width: 600px) {
    body.admin-bar .site-header {
        top: 0;
    }
}

/* ====================================
   MOBILE RESPONSIVENESS
   ==================================== */
@media (max-width: 921px) {
    .site-header .ast-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .site-header .main-header-bar {
        padding: 15px 0 !important;
    }
    
    .site-header .custom-logo-link img,
    .site-header .site-logo-img img {
        max-height: 50px !important;
    }
    
    .site-header.scrolled .main-header-bar {
        max-width: 90%;
        width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 6px 12px !important;
        border-radius: 999px !important;
    }

    .site-header.scrolled .main-header-bar .ast-container {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .site-header.scrolled .main-header-menu a {
        padding: 6px 8px !important;
        font-size: 0.9em;
    }

    .site-header.scrolled .ast-button,
    .site-header.scrolled .ast-custom-button {
        padding: 6px 14px !important;
        font-size: 0.9em;
    }
    
    .site-header.scrolled .custom-logo-link img,
    .site-header.scrolled .site-logo-img img {
        max-height: 40px !important;
    }
}

@media (max-width: 544px) {
    .site-header .ast-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .site-header .custom-logo-link img,
    .site-header .site-logo-img img {
        max-height: 45px !important;
    }
    
    .site-header.scrolled .custom-logo-link img,
    .site-header.scrolled .site-logo-img img {
        max-height: 35px !important;
    }
}

@media (max-width: 480px) {
    .site-header.scrolled .main-header-bar {
        max-width: 94%;
        padding: 4px 10px !important;
    }
}

/* ====================================
   BROWSER FALLBACK (NO BLUR SUPPORT)
   ==================================== */
@supports not (backdrop-filter: blur(25px)) {
    .site-header.scrolled .main-header-bar {
        background: rgba(255, 255, 255, 0.95) !important;
    }
}

/* ====================================
   CRITICAL FIX: WRAPPER TRANSPARENCY
   ==================================== */

/* Only wrappers are transparent, NOT .site-header itself */
.ast-main-header-wrap,
.main-header-bar-wrap {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Remove Astra header overlay layers */
.site-header::before,
.site-header::after,
.ast-main-header-wrap::before,
.ast-main-header-wrap::after,
.ast-builder-grid-row::before,
.ast-builder-grid-row::after {
    content: none !important;
    display: none !important;
}

/* Override Astra's transparent header on homepage */
body.home .site-header[data-transparent-header="true"]:not(.scrolled) {
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

body.home .site-header[data-transparent-header="true"].scrolled {
    background: transparent !important;
    box-shadow: none !important;
}

/* ====================================
   HOMEPAGE TRANSPARENT HEADER FIX - AGGRESSIVE
   ==================================== */

/* CRITICAL: Remove ALL backgrounds from ALL wrapper layers on homepage */
body.home .site-header,
body.home .site-header[data-transparent-header="true"],
body.home .ast-main-header-wrap,
body.home .main-header-bar-wrap,
body.home .ast-primary-header-bar,
body.home .ast-builder-grid-row,
body.home .site-header .ast-builder-grid-row-container {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Initial state - ONLY .site-header gets white background */
body.home .site-header:not(.scrolled) {
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Scrolled state - header completely transparent */
body.home .site-header.scrolled {
    background: transparent !important;
    box-shadow: none !important;
}

/* The glass pill gets ALL the styling */
body.home .site-header.scrolled .main-header-bar {
    background: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(6.7px) !important;
    -webkit-backdrop-filter: blur(6.7px) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    max-width: 72% !important;
    margin: 12px auto 0 auto !important;
    padding: 6px 22px !important;
}

/* Remove ALL pseudo-elements that might add backgrounds */
body.home .site-header::before,
body.home .site-header::after,
body.home .ast-main-header-wrap::before,
body.home .ast-main-header-wrap::after,
body.home .main-header-bar-wrap::before,
body.home .main-header-bar-wrap::after,
body.home .ast-builder-grid-row::before,
body.home .ast-builder-grid-row::after,
body.home .ast-primary-header-bar::before,
body.home .ast-primary-header-bar::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Force all inner wrappers to be transparent in scrolled state */
body.home .site-header.scrolled .ast-main-header-wrap,
body.home .site-header.scrolled .main-header-bar-wrap,
body.home .site-header.scrolled .ast-builder-grid-row,
body.home .site-header.scrolled .ast-primary-header-bar {
    background: transparent !important;
    background-color: transparent !important;
}

/* Ensure container doesn't add background */
body.home .site-header .ast-container {
    background: transparent !important;
}

/* Last updated: December 25, 2025 - Cache bust */