/* local_nawatui — pupil-friendly layer. Scoped by body classes set in
   classes/hook_callbacks.php; staff (course editors, admins) never match
   .nawat-learner / .nawat-kid. Page is RTL: prefer logical properties and
   direction-free motion (scale / fade / vertical), because Moodle's RTLCSS
   does not mirror transform. Research: docs/research/kid-ux-motion.md */

/* ------------------------------------------------------------ everyone -- */
body.nawat-ui {
    font-family: "Cairo", "Noto Naskh Arabic", system-ui, sans-serif;
}

/* Footer: no app-store badges, theme credit, data-retention link,
   "powered by Moodle" popover or tour-reset link for non-admins. */
body.nawat-ui #page-footer .column-right,
body.nawat-ui #page-footer .copyright,
body.nawat-ui #page-footer .tool_usertours-resettourcontainer,
body.nawat-ui #page-footer a[href*="dataprivacy/summary.php"],
body.nawat-ui [data-region="footer-container-popover"],
body.nawat-ui [data-region="footer-content-popover"] {
    display: none !important;
}
body.nawat-ui #page-footer .footer-columns {
    padding-block: 1rem;
}
/* RTL: closed off-canvas drawers (core AI drawer, messages) sit at a negative left and
   make every page side-scroll on phones. Clip, don't hide: no new scroll container. */
html:has(body.nawat-ui),
body.nawat-ui {
    overflow-x: clip;
}

/* ------------------------------------------------------------ learners -- */
/* Editing switch on the dashboard means nothing to a pupil. */
body.nawat-learner .editmode-switch-form {
    display: none !important;
}

/* Dashboard: our courses have no due dates, so the timeline and the month calendar
   are always empty for a pupil. «أكمل من حيث توقفت» is the one thing to see. */
body.nawat-learner#page-my-index .block_timeline,
body.nawat-learner#page-my-index .block_calendar_month {
    display: none !important;
}

/* Category pages: the course menu holds one «category» tab — a pupil needs none. */
body.nawat-learner.pagelayout-coursecategory .secondary-navigation {
    display: none !important;
}

/* Our courses: the activity "jump to" dropdown is noise; keep prev/next. */
body.nawat-learner.nawat-ours #jump-to-activity,
body.nawat-learner.nawat-ours .activity-navigation .jumpmenu,
body.nawat-learner.nawat-ours .activity-navigation form {
    display: none !important;
}
body.nawat-learner.nawat-ours .activity-navigation a {
    font-size: 1.1rem;
    font-weight: 700;
}

/* ----------------------------------------------------------------- kids -- */
body.nawat-kid {
    font-size: 1.2rem;
}
body.nawat-kid #region-main {
    line-height: 1.9;
}
body.nawat-kid h1, body.nawat-kid h2, body.nawat-kid h3, body.nawat-kid h4,
body.nawat-kid .btn, body.nawat-kid .tile-text, body.nawat-kid .coursename,
body.nawat-kid .multiline {
    font-family: "Baloo Bhaijaan 2", "Cairo", sans-serif;
}

/* Less chrome: no course index, breadcrumbs, secondary nav, completion
   boxes or activity dates. One thing on screen at a time. */
body.nawat-kid #theme_boost-drawers-courseindex,
body.nawat-kid .drawer-toggler.drawer-left-toggle,
body.nawat-kid [data-target="theme_boost-drawers-courseindex"],
body.nawat-kid #page-navbar,
body.nawat-kid nav .breadcrumb,
body.nawat-kid .secondary-navigation,
body.nawat-kid [data-region="activity-information"],
body.nawat-kid .activity-information,
body.nawat-kid .activity-dates,
body.nawat-kid #page-footer .footer-columns {
    display: none !important;
}
body.nawat-kid #page.drawers.show-drawer-left {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Big, friendly buttons (≥ 52px tap target, whole width on phones). */
body.nawat-kid .btn {
    min-height: 52px;
    padding: .6rem 1.4rem;
    border-radius: 14px;
    font-size: 1.15rem;
    font-weight: 700;
}
body.nawat-kid .branchbuttoncontainer .btn,
body.nawat-kid .branchbuttoncontainer input[type="submit"] {
    min-height: 60px;
    min-width: 220px;
    margin: .4rem;
    font-size: 1.3rem;
    border-radius: 16px;
}
@media (max-width: 576px) {
    body.nawat-kid .branchbuttoncontainer .btn,
    body.nawat-kid .branchbuttoncontainer input[type="submit"] {
        width: calc(100% - .8rem);
    }
}

/* Lesson questions: big tappable answer rows. */
body.nawat-kid #page-mod-lesson-view .answeroption,
body.nawat-kid .mod_lesson-page .answeroption,
body.nawat-kid form .answeroption {
    font-size: 1.3rem;
}
body.nawat-kid input[type="radio"] {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
    margin-inline-end: .5rem;
}
body.nawat-kid .form-check-label,
body.nawat-kid label {
    font-size: 1.25rem;
}

/* Lesson feedback: show the reaction, not the question again. Moodle prints the
   question box right before .correctanswer (continue.php or view.php). Kids, and every
   learner in the centre's own courses (clip-lite stations print an empty «:» row there). */
body.nawat-kid.path-mod-lesson .generalbox.boxaligncenter:has(+ .correctanswer),
body.nawat-kid.path-mod-lesson .correctanswer > em,
body.nawat-ours.nawat-learner.path-mod-lesson .generalbox.boxaligncenter:has(+ .correctanswer),
body.nawat-ours.nawat-learner.path-mod-lesson .correctanswer > em {
    display: none !important;
}
body.nawat-kid.path-mod-lesson .correctanswer .response,
body.nawat-ours.nawat-learner.path-mod-lesson .correctanswer .response {
    font-size: 1.5rem;
    font-weight: 700;
}

/* Tiles: rounder, bigger titles. */
body.nawat-kid .tile {
    border-radius: 18px !important;
    overflow: hidden;
}
body.nawat-kid .tile-text,
body.nawat-kid .tile .tile-top {
    font-size: 1.3rem;
}

/* --------------------------------------------------------------- motion -- */
/* Only when the device allows it; short (100-300 ms), never looping. */
@media (prefers-reduced-motion: no-preference) {
    body.nawat-ui #region-main {
        /* backwards, not both: a finished animation that keeps filling transform/opacity leaves
           #region-main a stacking context, so format_tiles' grey overlay covers the open tile. */
        animation: nawat-in .25s ease-out backwards;
    }
    body.nawat-ui .card.dashboard-card,
    body.nawat-ui .coursebox,
    body.nawat-ui .tile,
    body.nawat-ui .course-card {
        transition: transform .2s ease-out, box-shadow .2s ease-out;
    }
    body.nawat-ui .card.dashboard-card:hover,
    body.nawat-ui .coursebox:hover,
    body.nawat-ui .tile:hover,
    body.nawat-ui .course-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 24px rgba(13, 59, 79, .16);
    }
    body.nawat-ui .btn {
        transition: transform .1s ease-out;
    }
    body.nawat-ui .btn:active {
        transform: scale(.97);
    }
    body.nawat-ui .progress-bar {
        transition: width .6s ease-out;
    }
    body.nawat-ui.path-mod-lesson .response.correct {
        animation: nawat-pop .35s cubic-bezier(.34, 1.56, .64, 1) both;
    }
    body.nawat-ui.path-mod-lesson .response.incorrect {
        animation: nawat-shake .35s ease-in-out both;
    }
}
@keyframes nawat-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
@keyframes nawat-pop {
    0% { transform: scale(.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes nawat-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* ---------------------------------------------------------------- login -- */
/* Login / sign-up / forgot password in the public pages' look (assets/site.css):
   cream page, a faint NCE «atom», rounded card, orange pill button. */
body.nawat-ui.pagelayout-login,
body.nawat-ui.pagelayout-login #page-wrapper,
body.nawat-ui.pagelayout-login #page {
    background: transparent none !important;
}
body.nawat-ui.pagelayout-login {
    background:
        radial-gradient(circle at 85% 8%, rgba(242, 140, 0, .18), transparent 42%),
        radial-gradient(circle at 8% 92%, rgba(200, 148, 70, .16), transparent 40%),
        #FFF8EE !important;
    min-height: 100vh;
}
body.nawat-ui.pagelayout-login::before {
    content: ""; position: fixed; z-index: 0; pointer-events: none;
    width: min(90vmin, 760px); aspect-ratio: 1; inset-inline-start: -18vmin; top: 50%; transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-260 -260 520 520'%3E%3Cg fill='none' stroke='%23F28C00' stroke-width='2' opacity='.35'%3E%3Cellipse rx='236' ry='84'/%3E%3Cellipse rx='236' ry='84' transform='rotate(60)'/%3E%3Cellipse rx='236' ry='84' transform='rotate(120)'/%3E%3C/g%3E%3Cg fill='%23F28C00' opacity='.5'%3E%3Ccircle cx='236' cy='0' r='8'/%3E%3Ccircle cx='-118' cy='-204' r='8'/%3E%3Ccircle cx='-118' cy='204' r='8'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
body.nawat-ui.pagelayout-login #page { position: relative; z-index: 1; }
/* The card: .loginform on the login page (moove's own card), .login-container elsewhere. */
body.nawat-ui.pagelayout-login:not(#page-login-index) .login-container,
body.nawat-ui#page-login-index .loginform {
    border: 0 !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 60px rgba(13, 13, 16, .12) !important;
    background: #fff !important;
}
body.nawat-ui#page-login-index .login-container {
    background: transparent !important; box-shadow: none !important; border: 0 !important;
}
/* Logo centred above the form (moove floats it to the start side). */
body.nawat-ui.pagelayout-login .login-logo {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; margin: .25rem auto 1.25rem; text-align: center;
}
body.nawat-ui.pagelayout-login .login-logo img { display: block; max-height: 104px; width: auto; margin-inline: auto; }
body.nawat-ui.pagelayout-login .login-heading { text-align: center; font-weight: 900; }
body.nawat-ui.pagelayout-login #loginbtn,
body.nawat-ui.pagelayout-login .login-signup .btn { white-space: nowrap; width: 100%; }
/* Phones: «تسجيل الدخول» and «إنشاء اشتراك جديد» stacked, full width, never wrapped. */
@media (max-width: 480px) {
    body.nawat-ui.pagelayout-login .loginform .row.align-items-center { flex-direction: column; gap: .75rem; }
    body.nawat-ui.pagelayout-login .loginform .row.align-items-center > .col { width: 100%; }
}
body.nawat-ui.pagelayout-login .form-control {
    min-height: 52px; border-radius: 14px; font-size: 1.1rem;
}
body.nawat-ui.pagelayout-login .form-control:focus { border-color: #F28C00; box-shadow: 0 0 0 4px rgba(242, 140, 0, .2); }
body.nawat-ui.pagelayout-login #loginbtn,
body.nawat-ui.pagelayout-login .btn-primary {
    min-height: 52px; border-radius: 999px !important; border: 0 !important;
    background: #F28C00 !important; color: #0B0B0B !important; font-weight: 800; font-size: 1.1rem;
    box-shadow: 0 8px 20px rgba(242, 140, 0, .3);
}
body.nawat-ui.pagelayout-login .login-signup .btn,
body.nawat-ui.pagelayout-login .btn-success {
    min-height: 52px; border-radius: 999px !important; display: inline-flex; align-items: center; justify-content: center;
    background: transparent !important; border: 2px solid #0B0B0B !important; color: #0B0B0B !important; font-weight: 800;
}
body.nawat-ui.pagelayout-login .login-signup .btn:hover,
body.nawat-ui.pagelayout-login .btn-success:hover { background: #0B0B0B !important; color: #FFF8EE !important; }
body.nawat-ui.pagelayout-login .nawat-home-link {
    display: inline-block; margin-bottom: .6rem; font-weight: 700; color: #B86400; text-decoration: none;
}
body.nawat-ui.pagelayout-login .nawat-home-link:hover { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
    body.nawat-ui.pagelayout-login:not(#page-login-index) .login-container,
    body.nawat-ui#page-login-index .loginform { animation: nawat-in .4s ease-out backwards; }
    body.nawat-ui.pagelayout-login::before { animation: nawat-spin 120s linear infinite; }
}
@keyframes nawat-spin { to { transform: translateY(-50%) rotate(360deg); } }