/*
Theme Name: Rabta Madaris Haryana
Theme URI: https://rabtamadaris-haryana.com
Author: Rabta Madaris Haryana
Description: Hand-coded custom theme for the Rabta Madaris Haryana public site and school portal, wired to the rabta-madaris-backend REST API. No page builder dependency.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: rabta-madaris
*/

/* ==========================================
   Design tokens
   Ported from the PWA's css/variables.css so the public site and the
   installed app share one visual identity. Container widths are
   extended here for full desktop layouts (the PWA's tokens assume
   app-shell mobile widths only).
   ========================================== */

@font-face {
    font-family: "Mehr Nastaliq";
    src: url("assets/fonts/Mehr_Nastaliq_Web v.2.0.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("assets/fonts/Poppins-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("assets/fonts/Poppins-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("assets/fonts/Poppins-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("assets/fonts/Poppins-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {

    /* ---------- Core Brand (identical to the PWA) ---------- */

    --primary: #0F766E;
    --primary-dark: #075E58;
    --primary-light: #E0F2F1;
    --primary-container: #BFEDE8;
    --on-primary: #FFFFFF;
    --on-primary-container: #00201D;

    --gold: #B7791F;
    --gold-light: #FFF3D8;
    --gold-container: #FFE2A9;
    --on-gold-container: #2B1700;

    --md-error: #BA1A1A;
    --md-error-container: #FFDAD6;
    --md-on-error-container: #410002;
    --md-success: #2E7D32;
    --md-success-container: #C8E6C9;
    --md-warning: #A15C00;
    --md-warning-container: #FFE0B2;

    --background: #F8F7F2;
    --surface: #FFFCF6;
    --surface-container-lowest: #FFFFFF;
    --surface-container-low: #FCFAF4;
    --surface-container: #F4F2EC;
    --surface-container-high: #EEECE6;
    --on-surface: #1B1C19;
    --on-surface-variant: #474842;
    --outline: #787970;
    --outline-variant: #C8C8BE;

    --card: var(--surface-container-lowest);
    --text: var(--on-surface);
    --text-light: var(--on-surface-variant);
    --danger: var(--md-error);
    --success: var(--md-success);

    /* ---------- Typography ---------- */

    --font-urdu: "Mehr Nastaliq", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
    --font-en: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    --urdu-body: 1.375rem;
    --urdu-title: 1.75rem;
    --urdu-display: 2.25rem;

    --line-height-tight: 1.35;
    --line-height-normal: 1.7;
    --line-height-urdu: 2;

    /* ---------- Spacing ---------- */

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    --page-padding: var(--space-5);
    --section-gap: var(--space-8);
    --control-height: 3rem;
    --nav-height: 4.5rem;

    /* ---------- Shape ---------- */

    --radius-xs: 0.375rem;
    --radius-sm: 0.625rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 1.75rem;
    --radius-full: 999px;

    /* ---------- Elevation ---------- */

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
    --shadow-primary: 0 12px 28px rgba(15, 118, 110, 0.22);

    /* ---------- Motion ---------- */

    --duration-fast: 150ms;
    --duration-normal: 220ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --transition: var(--duration-normal) var(--ease-standard);

    /* ---------- Layout (website widths — wider than the PWA's app-shell tokens) ---------- */

    --container-sm: 640px;
    --container-md: 860px;
    --container-lg: 1120px;
    --container-xl: 1320px;

    /* ---------- Interaction ---------- */

    --state-hover: rgba(15, 118, 110, 0.08);
    --focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.22);
}

/* ==========================================
   Base reset
   ========================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: var(--font-urdu);
    font-size: var(--urdu-body);
    line-height: var(--line-height-urdu);
    direction: rtl;
}

/* Latin/numeric technical values (IDs, dates, phone numbers) get isolated
   LTR direction rather than the whole element — same convention used
   throughout the PWA (results.js, student-profile.js) to avoid Urdu/RTL
   text reordering around embedded Latin characters. */
.ltr {
    direction: ltr;
    unicode-bidi: isolate;
    font-family: var(--font-en);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

h1, h2, h3, h4 { margin: 0 0 var(--space-4); line-height: var(--line-height-tight); font-weight: var(--font-weight-semibold); }
p { margin: 0 0 var(--space-4); }

/* Native [hidden] silently loses to any later author rule that sets
   `display` on the same element without a [hidden] guard — this exact
   bug class cost 7 separate fixes across the PWA this project. Every
   component style below that sets `display` on a state-toggled element
   MUST pair it with an explicit [hidden] rule; this is the global
   backstop, not a substitute for that discipline. */
[hidden] { display: none; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

/* ==========================================
   Layout primitives
   ========================================== */

.container {
    width: 100%;
    max-width: var(--container-lg);
    margin-inline: auto;
    padding-inline: var(--page-padding);
}

.container--md { max-width: var(--container-md); }
.container--xl { max-width: var(--container-xl); }

.section { padding-block: var(--section-gap); }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================
   Buttons
   ========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--control-height);
    padding-inline: var(--space-6);
    border-radius: var(--radius-full);
    border: none;
    font-size: var(--text-md);
    font-family: var(--font-urdu);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition);
}
/* Fixed at the source: .btn is reused everywhere, including on
   elements later toggled via the `hidden` attribute (e.g. the
   admission wizard's back button, the success screen's "view
   student" link) — one guard here covers every current and future
   .btn instance instead of patching each toggled ID individually. */
.btn[hidden] { display: none; }

.btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-primary); }
.btn--primary:hover { background: var(--primary-dark); }

.btn--outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn--outline:hover { background: var(--state-hover); }

.btn--gold { background: var(--gold); color: #FFFFFF; }

.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ==========================================
   Cards
   ========================================== */

.card {
    background: var(--card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
}

/* ==========================================
   Forms
   ========================================== */

.field { margin-bottom: var(--space-5); }

.field label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-light);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    height: var(--control-height);
    padding-inline: var(--space-4);
    border: 1.5px solid var(--outline-variant);
    border-radius: var(--radius-md);
    background: var(--surface-container-lowest);
    font-family: var(--font-urdu);
    font-size: var(--text-md);
    color: var(--text);
}

.field textarea { height: auto; min-height: 8rem; padding-block: var(--space-3); }

.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--primary); box-shadow: var(--focus-ring); outline: none; }

.field-error {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--danger);
}
.field-error[hidden] { display: none; }