/*
 * ============================================================
 * BASE STYLES
 * Global reset, body, and element defaults.
 * ============================================================
 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}

/* The universal reset above zeroes out `margin`, which — combined with the
   `dir="rtl"` on <html> every page sets — breaks the browser's own default
   centering for every <dialog> on the site: a modal dialog's UA stylesheet
   normally centers it via `position: fixed; inset: 0; margin: auto;`, but
   with `margin: auto` reset to `0` and the box over-constrained in RTL, it
   resolves to pinned-at-the-top-right instead of centered (empirically
   confirmed against the existing admin lesson-form dialog, not something
   newly introduced — this restores the behavior every dialog on the site
   was always supposed to have). */
dialog {
    margin: auto;
}

/* Keyboard-only focus ring. `:focus-visible` only matches keyboard/assistive
   navigation (not mouse clicks), so this restores accessible focus
   indication without adding any visual noise for pointer users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 3px;
    border-radius: 4px;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-base);
    color: var(--ink);
    direction: rtl;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    /* clip (where supported) rather than hidden: nothing — not a wide
       decorative image, not a script's scrollIntoView — can shift the page
       sideways, and no scroll container is created (sticky still works). */
    overflow-x: clip;
    transition: var(--transition-theme);

    /* Ambient background glows */
    background-image:
        radial-gradient(circle at 15% 50%, rgba(226, 232, 240, 0.5), transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(93, 13, 24, 0.06), transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(26, 54, 93, 0.04), transparent 50%);
    background-size: 100vw 100vh;
    background-attachment: fixed;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul { list-style: none; }

/* Guarantee the native `hidden` attribute always wins, even on elements
   whose component class sets its own `display` (e.g. .alert-banner,
   .success-panel default to display:flex when shown). */
[hidden] { display: none !important; }

/* Used by pages that must fit a single viewport with no page scroll
   (e.g. login.html). */
html:has(body.page-no-scroll),
body.page-no-scroll {
    height: 100%;
    overflow: hidden;
}

/* Gradient text utility used on the teacher name and key phrases */
.teacher-underline {
    position: relative;
    display: inline-block;
    z-index: 1;
    white-space: nowrap;
    background: linear-gradient(120deg, var(--primary-navy), var(--accent-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}
/* Variant for use on permanently-dark surfaces (footer-like panels) that
   don't flip with the theme, so the gradient stays legible either way. */
.teacher-underline.on-dark {
    background: linear-gradient(120deg, #FFFFFF, var(--accent-gold-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Shared page wrapper */
.main-container {
    width: 100%;
    max-width: 1920px;
    /* Decorative art that hangs past the screen edges (the home page's
       floating icons and kid illustration) must never widen the page. */
    overflow-x: clip;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}