/*
Theme Name: Skyblue Japanese Language Center's Theme
Description: Custom child theme of astra for manual design and backend data.
Author: Pyae Phyo Thaw
Template: astra
Version: 1.0.0
Text Domain: skyblue_theme
*/

/* ==========================================================
   Write your manual custom CSS below this line. 
   These styles will work alongside Elementor.
   ========================================================== */
  /* Fix mobile horizontal overflow in Astra Child Theme */
html, body, #page {
    overflow-x: hidden !important;
    max-width: 100% !important;
} 
/* 1. Remove Astra default spacing above the main content area */
/* 1. Remove both Top and Bottom spacing from main content containers */
#primary,
#primary.content-area,
#main.site-main,
article.ast-article-single,
.site-content {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. Remove bottom margin from the last element inside Astra content area */
.site-content > .ast-container,
article.ast-article-single > *:last-child,
.entry-content > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. Remove default top margins/padding inside Elementor wrapper */
.entry-content,
.elementor-16,
.elementor-element-9e12952 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 3. Remove space from the empty entry-header tag */
.entry-header.ast-header-without-markup {
    display: none !important;
}

/* =========================================
   8. ASTRA SCROLL TO TOP BUTTON OVERRIDE
   ========================================= */
.ast-scroll-to-top-right {
    right: 30px !important;
    bottom: 80px !important;
}

/* Optional: Add smooth animation */
.ast-scroll-top-icon {
    transition: all 0.3s ease !important;
}

.ast-scroll-top-icon:hover {
    transform: translateY(-3px) !important;
}

/* Remove dotted border on click/focus */
.ast-scroll-top-icon:focus,
.ast-scroll-top-icon:active,
.ast-scroll-to-top-right:focus,
.ast-scroll-to-top-right:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove all focus styles */
.ast-scroll-top-icon:focus-visible {
    outline: none !important;
}

button.ast-scroll-top-icon:focus,
button.ast-scroll-top-icon:active {
    border: none !important;
    outline: none !important;
}





/* 4. Home Page of Layouts Css */
/* ======================================================
   ABOUT ICON BOXES STYLING
   ====================================================== */

/* 1. Fix Top Alignment & Layout */
.about-icon .elementor-icon-box-wrapper {
    display: flex;
    align-items: flex-start !important; 
    gap: 15px; /* Slightly reduced gap to match smaller icons */
}

.about-icon .elementor-icon-box-icon {
    margin: 0 !important;
}
.about-icon .elementor-icon-box-title {
    margin-top: 0 !important;
}

/* 2. Style the Icon Background (Smaller White Circle) */
.about-icon .elementor-icon {
    background-color: #F8F9FA; /* lighter */
    border-radius: 50%;
    width: 50px; /* Reduced from 70px */
    height: 50px; /* Reduced from 70px */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease; /* Smooth transition ONLY for background */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); 
}

/* Base SVG styling (Smaller Blue Icon) */
.about-icon .elementor-icon svg,
.about-icon .elementor-icon svg path,
.about-icon .elementor-icon svg .st0 {
    fill: #004b9c !important; 
    /* Removed transition here so the color change is INSTANT */
    width: 24px; /* Reduced from 32px */
    height: 24px; /* Reduced from 32px */
}

/* 3. Hover Effects */

/* Smooth background change to blue */
.about-icon .elementor-widget-icon-box:hover .elementor-icon {
    background-color: #004b9c;
}

/* Instant SVG color change to white */
.about-icon .elementor-widget-icon-box:hover .elementor-icon svg,
.about-icon .elementor-widget-icon-box:hover .elementor-icon svg path,
.about-icon .elementor-widget-icon-box:hover .elementor-icon svg .st0 {
    fill: #ffffff !important; 
}




















/* 5. Home Page of Services Layouts Section of  Css */
/* ======================================================
   Services ICON BOXES STYLING
   ====================================================== */
/* 1. Base Card Settings */
/*
  IMPORTANT STRUCTURE NOTE:
  Your .service-read-more link is a SIBLING of .service-icon (both live inside
  .service-wrapper), not a child of it. So the hover trigger needs to be
  .service-wrapper:hover, not .service-icon:hover — otherwise the button
  can't react to hovering the icon box, and the icon box can't react to
  hovering the button.
*/
/* =========================================
   Base Layout & Containers
========================================= */
/* =========================================
   Base Layout & Containers
========================================= */
.service-container {
    align-items: stretch;
}

.service-container .service-wrapper {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.service-container .service-icon {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px;
    width: 100%;
    height: 100%;
}

/* =========================================
   Hover Background Animation
========================================= */
.service-container .service-icon::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #004b9c;
    transform: translateY(100%);
    transition: transform .4s ease-in-out;
    z-index: 0;
}

.service-container .service-wrapper:hover .service-icon::before,
.service-container .service-wrapper:focus .service-icon::before,
.service-container .service-wrapper:active .service-icon::before {
    transform: translateY(0);
}

/* =========================================
   Elementor Content Layer & Perfect Gaps
========================================= */
.service-container .service-icon .elementor-icon-box-wrapper {
    position: relative;
    z-index: 1;
    /* Forces the exact same gap for the Elementor content as the button */
    box-sizing: border-box;
    width: 100%;
}

/* =========================================
   Description Limit
========================================= */
.service-container .service-icon .elementor-icon-box-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================
   Text Color Animation
========================================= */
.service-container .service-icon .elementor-icon-box-title,
.service-container .service-icon .elementor-icon-box-title span,
.service-container .service-icon .elementor-icon-box-description {
    transition: color .4s ease;
}

.service-container .service-wrapper:hover .service-icon .elementor-icon-box-title,
.service-container .service-wrapper:hover .service-icon .elementor-icon-box-title span,
.service-container .service-wrapper:hover .service-icon .elementor-icon-box-description {
    color: #ffffff !important;
}

/* =========================================
   Icon Hide Animation
========================================= */
.service-container .service-icon .elementor-icon-box-icon {
    transition: opacity .4s ease, visibility .4s ease, transform .4s ease;
}

.service-container .service-wrapper:hover .service-icon .elementor-icon-box-icon {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px) scale(.9);
}

/* =========================================
   Content Movement
========================================= */
.service-container .service-icon .elementor-icon-box-content {
    transition: transform .4s ease-in-out;
}

.service-container .service-wrapper:hover .service-icon .elementor-icon-box-content {
    transform: translateY(-55px);
}

/* =========================================
   CRITICAL FIX: Defeat Elementor's HTML Wrapper
========================================= */
.service-container .elementor-widget-html {
    position: static !important; 
    width: 100% !important;
}

/* =========================================
   Manual Read More Button
========================================= */
.service-container .service-read-more {
    position: absolute !important;
    bottom: 40px !important;
    
    /* Matches the 35px padding of the Elementor content above it */
    left: 35px !important; 
    
    display: inline-block !important;
    background: transparent !important;
    
    /* FIX: Ensure all 4 borders show up properly, overriding any theme settings */
    border: 2px solid #ffffff !important; 
    
    color: #ffffff !important;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow: none !important;
    border-radius: 4px;
    padding: 8px 24px;
    white-space: nowrap;
    
    /* Hide initially */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    z-index: 999 !important;
    transition: opacity .4s ease, visibility .4s ease, transform .4s ease;
}

/* Show button on hover */
.service-container .service-wrapper:hover .service-read-more,
.service-container .service-wrapper:focus .service-read-more,
.service-container .service-wrapper:active .service-read-more {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    text-decoration: none !important;
}


/* =========================================
   Tablet Responsive (Max 1024px)
========================================= */
@media (max-width: 1024px) {
    /* Shrink the gap uniformly */

    .service-container .service-read-more {
        left: 25px !important; /* Button aligns perfectly with 25px gap */
        bottom: 30px !important;
    }
}


/* =========================================
   Mobile Responsive (Max 767px & 480px)
========================================= */
@media (max-width: 767px) {
    .service-container .service-wrapper {
        width: 100%;
    }

    .service-container .service-icon {
        border-radius: 6px;
        min-height: 250px !important;
    }

    /* Shrink the gap to 20px on mobile, but keep bottom padding high so text doesn't touch the button */
    /*.service-container .service-icon .elementor-icon-box-wrapper {*/
    /*    padding: 20px !important;*/
    /*    padding-bottom: 70px !important; */
    /*}*/

    /* Align button exactly with the 20px mobile gap */
    .service-container .service-read-more {
        left: 20px !important; 
        bottom: 20px !important;
    }

    /* Shift content upward slightly less severely on mobile */
    .service-container .service-wrapper:hover .service-icon .elementor-icon-box-content {
        transform: translateY(-40px) !important;
    }
}

















































/* ===================================
   FULL WIDTH PAGE BANNER
=================================== */

.page-banner {
    width: 100%;
    height: 280px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    position: relative;
}

.page-banner-overlay {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
}

.page-banner-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}

.page-banner-content {
    text-align: center;
    padding: 0;
    margin: 0;
}

/* Title */
.page-banner-title {
    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 10px;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6);
}

/* Breadcrumb */
.page-banner-breadcrumb {
    margin: 0;
}

.page-banner-breadcrumb p,
.page-banner-breadcrumb span {
    margin: 0;
    color: #ffffff;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

.page-banner-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.page-banner-breadcrumb a:hover {
    color: #00A859; /* Changes color smoothly instead of underlining */
    text-decoration: none;
}

.page-banner-breadcrumb .breadcrumb_last {
    color: #00A859; /* Changed to skyblue */
    font-weight: 600;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

/* ===================================
   DO NOT AFFECT ELEMENTOR CONTENT
=================================== */
.page-content {
    padding: 0;
    margin: 0;
}

/* Mobile */
@media(max-width:991px){
    .page-banner {
        height: 220px;
    }
    .page-banner-title {
        font-size: 34px;
    }
}

@media(max-width:767px){
    .page-banner {
        height: 180px;
    }
    .page-banner-title {
        font-size: 28px;
    }
}