/* =====================================================
   BASE.CSS - CSS Reset, Variables, and Global Styles
   Padmashri Manibhai Desai College Website
   ===================================================== */

/* ===== CSS CUSTOM PROPERTIES (VARIABLES) ===== */
:root {
    /* Primary Colors */
    --color-primary: #1e7777;
    --color-primary-light: #2a9999;
    --color-primary-dark: #155a5a;

    /* Accent Colors */
    --color-accent: #0072ff;
    --color-accent-hover: #e6f0ff;
    --color-accent-2: #f39c12;
    --color-skyblue: skyblue;

    /* Background Colors */
    --bg-light: rgb(245, 240, 240);
    --bg-dark: #34495e;
    --bg-card: #4e4b4b;
    --bg-feature-card: rgb(240, 195, 122);
    --bg-course-card: #144f74;
    --bg-white: #ffffff;

    /* Text Colors */
    --text-dark: #000000;
    --text-light: #ffffff;
    --text-muted: rgb(187, 179, 179);
    --text-gray: #95a5a6;
    --text-body: #5f6c6f;
    --text-heading: #333;
    --text-footer: #ecf0f1;
    --text-footer-muted: #bdc3c7;

    /* Gradient Colors */
    --gradient-vip: linear-gradient(135deg, rgba(124, 92, 255, 0.25), rgba(30, 231, 227, 0.15));
    --gradient-video-bg: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    --gradient-heading: linear-gradient(90deg, #7c3aed, #06b6d4);

    /* Typography */
    --font-primary: Arial, sans-serif;
    --font-heading: 'Playfair Display', serif;
    --font-devanagari: 'Noto Sans Devanagari', sans-serif;
    --font-footer: 'Arial Unicode MS', 'Mangal', sans-serif;

    /* Font Sizes */
    --fs-xs: 0.75rem;
    --fs-sm: 0.85rem;
    --fs-base: 1rem;
    --fs-md: 1.1rem;
    --fs-lg: 1.3rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 1.8rem;
    --fs-3xl: 2.5rem;

    /* Spacing */
    --space-xs: 5px;
    --space-sm: 10px;
    --space-md: 15px;
    --space-lg: 20px;
    --space-xl: 30px;
    --space-2xl: 40px;
    --space-3xl: 60px;
    --space-4xl: 80px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 15px;
    --radius-2xl: 20px;
    --radius-round: 50%;
    --radius-circle: 200px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 6px 22px rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.2);
    --shadow-feature: 6px 6px 40px rgb(0, 0, 0);
    --shadow-vip-hover: 0 12px 28px rgba(0, 0, 0, 0.6);

    /* Transitions */
    --transition-fast: 0.3s ease;
    --transition-normal: 0.4s ease;

    /* Z-index Layers */
    --z-dropdown: 1001;
    --z-sub-dropdown: 1002;
    --z-header: 1000;
    --z-modal: 2000;
    --z-mobile-menu: 1001;

    /* Container Max Widths */
    --max-width-sm: 800px;
    --max-width-md: 1200px;
    --max-width-lg: 1400px;
}

/* ===== CSS RESET ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== MEDIA DEFAULTS ===== */
img,
picture,
video,
canvas,
svg,
iframe {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ===== FORM RESET ===== */
input,
button,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

/* ===== TYPOGRAPHY ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
    font-family: var(--font-heading);
}

p {
    overflow-wrap: break-word;
}

a {
    text-decoration: none;
    color: inherit;
}

ul,
ol {
    list-style: none;
}

/* ===== UTILITY CLASSES ===== */
.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;
}

.container {
    width: 100%;
    max-width: var(--max-width-md);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

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

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

/* Text Utilities */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* Gradient Text */
.gradient-text {
    background: var(--gradient-heading);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Font Awesome Icons Support */
.fas,
.fab,
.far {
    display: inline-block;
}