/* ==========================================================
   MERITZA CLASSES
   GLOBAL APPLICATION STYLES
   Version : 3.1.0
========================================================== */


/*----------------------------------------------------------*
 * ROOT
 *----------------------------------------------------------*/

html{

    scroll-behavior:smooth;

}


body{

    font-family:var(--mc-font-primary);

    font-size:.96rem;

    font-weight:400;

    color:var(--mc-text-color);

    line-height:1.7;

    min-height:100vh;

    overflow-x:hidden;

    background:#AFC5DC;

}


/*----------------------------------------------------------*
 * APP WRAPPER
 *----------------------------------------------------------*/

#mc-app{

    display:flex;

    flex-direction:column;

    min-height:100vh;

}


/*----------------------------------------------------------*
 * MAIN CONTENT
 *
 * Continuous vertical:
 * Deep Navy → Blue → Gold warmth → White
 *----------------------------------------------------------*/
main{

    flex:1;

    display:block;

    background:

        /* Subtle gold glow */

        radial-gradient(
            circle at 18% 72%,
            rgba(212,175,55,.10),
            transparent 24%
        ),

        radial-gradient(
            circle at 82% 78%,
            rgba(212,175,55,.07),
            transparent 26%
        ),

        /* Subtle blue glow */

        radial-gradient(
            circle at 88% 28%,
            rgba(54,103,170,.14),
            transparent 28%
        ),

        radial-gradient(
            circle at 10% 42%,
            rgba(10,25,70,.06),
            transparent 28%
        ),

        /* MAIN VERTICAL GRADIENT */

        linear-gradient(
            180deg,
            #AFC5DC 0%,
            #C3D6E8 18%,
            #D5E3EF 36%,
            #E2E9E9 52%,
            #E8E5D8 68%,
            #F0EEE5 82%,
            #F8F9FC 94%,
            #FFFFFF 100%
        ) !important;

}


/*----------------------------------------------------------*
 * PAGE CONTENT
 *----------------------------------------------------------*/

.mc-page{

    padding:56px 0;

    background:
        radial-gradient(
            circle at 18% 72%,
            rgba(212,175,55,.10),
            transparent 24%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(212,175,55,.07),
            transparent 26%
        ),
        radial-gradient(
            circle at 88% 28%,
            rgba(54,103,170,.14),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 42%,
            rgba(10,25,70,.06),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #AFC5DC 0%,
            #C3D6E8 18%,
            #D5E3EF 36%,
            #E2E9E9 52%,
            #E8E5D8 68%,
            #F0EEE5 82%,
            #F8F9FC 94%,
            #FFFFFF 100%
        ) !important;

}

/* Keep content sections transparent so the global page gradient remains visible. */
.mc-page > section{
    background:transparent !important;
}


/*----------------------------------------------------------*
 * TRANSPARENT SECTIONS
 *
 * Allows the global gradient to remain visible.
 *----------------------------------------------------------*/

.mc-page > section{

    background:transparent;

}


/*----------------------------------------------------------*
 * LINKS
 *----------------------------------------------------------*/

a{

    color:inherit;

    text-decoration:none;

    transition:all .25s ease;

}


a:hover{

    color:var(--mc-primary);

}


/*----------------------------------------------------------*
 * IMAGES
 *----------------------------------------------------------*/

img{

    max-width:100%;

    height:auto;

    display:block;

}


svg{

    display:block;

}


/*----------------------------------------------------------*
 * LISTS
 *----------------------------------------------------------*/

ul,
ol{

    margin:0;

    padding:0;

}


/*----------------------------------------------------------*
 * BUTTONS
 *----------------------------------------------------------*/

button{

    transition:all .25s ease;

}


button:disabled{

    opacity:.65;

    cursor:not-allowed;

}


/*----------------------------------------------------------*
 * INPUTS
 *----------------------------------------------------------*/

input,
select,
textarea{

    box-shadow:none !important;

}


textarea{

    resize:vertical;

}


/*----------------------------------------------------------*
 * SECTION
 *----------------------------------------------------------*/

section{

    position:relative;

}


/*----------------------------------------------------------*
 * SELECTION
 *----------------------------------------------------------*/

::selection{

    background:var(--mc-primary);

    color:#ffffff;

}


/*----------------------------------------------------------*
 * SCROLLBAR
 *----------------------------------------------------------*/

::-webkit-scrollbar{

    width:10px;

}


::-webkit-scrollbar-track{

    background:#0B1F44;

}


::-webkit-scrollbar-thumb{

    background:var(--mc-primary);

    border-radius:100px;

}


::-webkit-scrollbar-thumb:hover{

    background:#D4AF37;

}


/*----------------------------------------------------------*
 * LOADER
 *----------------------------------------------------------*/

#mc-loader{

    position:fixed;

    inset:0;

    background:#081A3D;

    z-index:99999;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:opacity .35s ease;

}


#mc-loader.d-none{

    opacity:0;

    visibility:hidden;

}


/*----------------------------------------------------------*
 * BACK TO TOP
 *----------------------------------------------------------*/

#mcBackToTop{

    position:fixed;

    right:24px;

    bottom:24px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:var(--mc-primary);

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:all .3s ease;

    z-index:1020;

}


#mcBackToTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


#mcBackToTop:hover{

    transform:translateY(-3px);

}


/*----------------------------------------------------------*
 * UTILITIES
 *----------------------------------------------------------*/

.mc-rounded{

    border-radius:var(--mc-radius-lg);

}


.mc-shadow{

    box-shadow:var(--mc-shadow-md);

}


.mc-border{

    border:1px solid var(--mc-border-color);

}


.mc-hidden{

    display:none !important;

}


.mc-overflow-hidden{

    overflow:hidden;

}


/*----------------------------------------------------------*
 * ACCESSIBILITY
 *----------------------------------------------------------*/

.visually-hidden-focusable{

    position:absolute;

    left:-9999px;

    top:auto;

}


.visually-hidden-focusable:focus{

    left:20px;

    top:20px;

    z-index:99999;

    background:#F8FAFD;

    color:#000000;

    padding:12px 20px;

    border-radius:8px;

}
/* ==========================================================
   GLOBAL BREADCRUMBS
========================================================== */

.mc-breadcrumbs{

    width:100%;

    /*
    Navbar is fixed, so breadcrumb starts below it.
    */

    margin-top:56px;

    padding:
        6px 0
        4px;

    position:relative;

    z-index:5;

    background:transparent;

    border:none;

    box-shadow:none;

}


.mc-breadcrumbs-inner{

    width:min(
        1180px,
        calc(100% - 40px)
    );

    min-height:30px;

    margin:0 auto;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

}


/* Previous page */

.mc-breadcrumb-link{

    display:inline-flex;

    align-items:center;

    gap:6px;

    color:#536A87;

    font-size:.86rem;

    font-weight:600;

    line-height:1;

    text-decoration:none;

}


.mc-breadcrumb-link:hover{

    color:#0A1946;

}


/* Separator */

.mc-breadcrumb-separator{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    color:#526A87 !important;

    font-size:.82rem;

    font-weight:700;

    line-height:1;

    opacity:1;

}


/* Current page */

.mc-breadcrumb-current{

    display:inline-flex;

    align-items:center;

    color:#0A1946;

    font-size:.86rem;

    font-weight:700;

    line-height:1;

}


/* ==========================================================
   FIND A TUTOR
   REMOVE EXTRA SPACE AFTER BREADCRUMB
========================================================== */

.mc-find-tutor-page{
    padding-top:0 !important;
    padding-bottom:20px !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:576px){

    .mc-breadcrumbs{

        margin-top:70px;

        padding:
            5px 0
            3px;

    }


    .mc-breadcrumbs-inner{

        width:
            calc(
                100% - 28px
            );

        min-height:32px;

        gap:6px;

    }


    .mc-breadcrumb-link,
    .mc-breadcrumb-current{

        font-size:.76rem;

    }

}

/* ==========================================================
   MERITZA PUBLIC MOTION SYSTEM
   Public pages only. Dashboard UI is intentionally untouched.

   SECTION-WISE MOTION:
   A complete section enters together when it reaches the viewport.
   Headings, descriptions, cards and images do not reveal separately.
========================================================== */

.mc-public-site {
    --mc-motion-ease: cubic-bezier(.22, 1, .36, 1);
    --mc-motion-duration: .82s;
}

@media (prefers-reduced-motion: no-preference) {

    /* One visual section = one reveal animation. */
    .mc-public-site.mc-motion-ready .mc-section-reveal {
        opacity: 0;
        transform: translate3d(0, 42px, 0);
        transition:
            opacity var(--mc-motion-duration) var(--mc-motion-ease),
            transform var(--mc-motion-duration) var(--mc-motion-ease);
        will-change: opacity, transform;
    }

    .mc-public-site .mc-section-reveal.is-visible {
        opacity: 1;
        transform: none;
    }

    /*
     * Hero content remains an entrance animation. This is intentionally
     * separate from section scrolling and does not touch the hero artwork.
     */
    .mc-public-site.mc-motion-ready .mc-hero-animate {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
        animation: mcHeroRise .9s var(--mc-motion-ease) forwards;
    }

    .mc-public-site.mc-motion-ready .mc-hero-animate:nth-child(2) { animation-delay: .08s; }
    .mc-public-site.mc-motion-ready .mc-hero-animate:nth-child(3) { animation-delay: .16s; }
    .mc-public-site.mc-motion-ready .mc-hero-animate:nth-child(4) { animation-delay: .24s; }

    @keyframes mcHeroRise {
        to {
            opacity: 1;
            transform: none;
        }
    }

    /* Gentle premium image float, only where explicitly marked. */
    .mc-public-site .mc-float {
        animation: mcSoftFloat 6s ease-in-out infinite;
        will-change: transform;
    }

    @keyframes mcSoftFloat {
        0%, 100% { transform: translate3d(0, 0, 0); }
        50% { transform: translate3d(0, -7px, 0); }
    }

    /* Cards retain interaction polish, but never animate independently on scroll. */
    .mc-public-site .mc-card,
    .mc-public-site [class*="card"] {
        transition:
            transform .32s var(--mc-motion-ease),
            box-shadow .32s ease;
    }

    .mc-public-site .mc-card:hover,
    .mc-public-site [class*="card"]:hover {
        transform: translateY(-4px);
    }

    /* Buttons retain their restrained interaction lift. */
    .mc-public-site .mc-btn,
    .mc-public-site .mc-tutor-profile-primary-btn,
    .mc-public-site .mc-tutor-profile-secondary-btn {
        transition:
            transform .28s var(--mc-motion-ease),
            box-shadow .28s ease,
            background-color .28s ease,
            color .28s ease;
    }

    .mc-public-site .mc-btn:hover,
    .mc-public-site .mc-tutor-profile-primary-btn:hover,
    .mc-public-site .mc-tutor-profile-secondary-btn:hover {
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mc-public-site *,
    .mc-public-site *::before,
    .mc-public-site *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
}


/* Hero artwork is intentionally static. The hero illustration owns its
   positioning in hero.css and must never receive global reveal transforms. */
.mc-public-site .mc-hero-shell .mc-hero-background,
.mc-public-site .mc-hero-shell .mc-hero-image {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
}

.mc-dashboard-notification-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.mc-dashboard-notification-head>div{min-width:0;}
.mc-dashboard-notification-mark-all{border:0;background:transparent;color:#9A7200;font:inherit;font-size:10px;font-weight:800;white-space:nowrap;cursor:pointer;padding:4px 0;}
.mc-dashboard-notification-mark-all:hover{text-decoration:underline;}


/* ==========================================================
   MERITZA MOBILE — HIDE ILLUSTRATIONS
   Mobile only. Desktop visuals remain completely unchanged.
========================================================== */

@media (max-width: 767.98px) {

    /* ------------------------------------------------------
       HOME / PUBLIC HERO
    ------------------------------------------------------ */

    .mc-public-site .mc-hero-visual,
    .mc-public-site .mc-hero-image {
        display: none !important;
    }


    /* ------------------------------------------------------
       HOME — WHY MERITZA
    ------------------------------------------------------ */

    .mc-public-site .mc-why-visual,
    .mc-public-site .mc-why-illustration-wrap,
    .mc-public-site .mc-why-illustration,
    .mc-public-site .mc-why-visual-orbit {
        display: none !important;
    }


    /* ------------------------------------------------------
       HOME — SUBJECTS
    ------------------------------------------------------ */

    .mc-public-site .mc-subjects-visual,
    .mc-public-site .mc-subjects-illustration-wrap,
    .mc-public-site .mc-subjects-illustration,
    .mc-public-site .mc-subjects-visual-glow {
        display: none !important;
    }


    /* ------------------------------------------------------
       HOME — HOW IT WORKS
    ------------------------------------------------------ */

    .mc-public-site .mc-how-visual,
    .mc-public-site .mc-how-illustration,
    .mc-public-site .mc-how-visual-glow {
        display: none !important;
    }


    /* ------------------------------------------------------
       HOME — STUDY LEVELS
    ------------------------------------------------------ */

    .mc-public-site .mc-study-levels-visual,
    .mc-public-site .mc-study-levels-illustration-wrap,
    .mc-public-site .mc-study-levels-illustration,
    .mc-public-site .mc-study-levels-visual-glow {
        display: none !important;
    }


    /* ------------------------------------------------------
       ABOUT MERITZA — HERO ILLUSTRATION
    ------------------------------------------------------ */

    .mc-public-site .mc-about-hero-visual,
    .mc-public-site .mc-about-hero-core,
    .mc-public-site .mc-about-hero-chip,
    .mc-public-site .mc-chip-layout {
        display: none !important;
    }


    /* ------------------------------------------------------
       FAQ — HERO ILLUSTRATION / DECORATIVE VISUAL
    ------------------------------------------------------ */

    .mc-public-site .mc-faq-hero-visual,
    .mc-public-site .mc-faq-hero-chip {
        display: none !important;
    }


    /* ------------------------------------------------------
       BECOME A TUTOR — FLOATING ILLUSTRATIONS
    ------------------------------------------------------ */

    .mc-public-site .mc-tutor-floating-icons,
    .mc-public-site .mc-tutor-cta-icons {
        display: none !important;
    }


    /* ------------------------------------------------------
       GENERIC MERITZA ILLUSTRATION HOOKS
       Covers future public-page illustration wrappers
       without hiding normal tutor/student photographs.
    ------------------------------------------------------ */

    .mc-public-site .mc-illustration,
    .mc-public-site .mc-illustration-wrap,
    .mc-public-site .mc-section-illustration,
    .mc-public-site .mc-visual-illustration {
        display: none !important;
    }

}