/* ==========================================================================
   BASE — Reset, CSS Variables, Theming, Typography, Shared Utilities
   ========================================================================== */

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'Open Sans', sans-serif; color: #333; background: #fff; line-height: 1.7; overflow-x: hidden; }
a { text-decoration: none; color: inherit; transition: color .3s; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font-family: inherit; font-size: inherit; }

/* --- CSS Variables (Default / Homepage) --- */
:root {
    --primary: #0a1628;
    --primary-light: #1b2e4a;
    --accent: #ff6b35;
    --accent-dark: #e05520;
    --accent-light: #ff864f;
    --secondary: #1a73e8;
    --text: #333;
    --text-light: #666;
    --text-muted: #999;
    --bg: #ffffff;
    --bg-alt: #f7f8fc;
    --bg-dark: #0a1628;
    --card-bg: #fff;
    --card-shadow: 0 4px 20px rgba(0,0,0,.08);
    --card-shadow-hover: 0 12px 40px rgba(0,0,0,.15);
    --border: #e0e0e0;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 20px;
    --transition: .3s ease;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --font-display: 'Playfair Display', serif;
    --nav-height: 72px;
    --container: 1200px;
    --saffron: #ff9933;
    --white-mid: #fff;
    --green-india: #138808;
}

/* --- Dynamic Themes (Light & Professional) --- */
[data-theme="corporate"] {
    --primary: #1e3a5f;
    --primary-light: #2c5282;
    --accent: #3b82f6;
    --accent-dark: #2563eb;
    --accent-light: #93bbfd;
    --secondary: #6366f1;
    --bg-alt: #f0f5ff;
    --card-shadow: 0 4px 24px rgba(30,58,95,.08);
    --card-shadow-hover: 0 14px 40px rgba(30,58,95,.14);
}
[data-theme="leisure"] {
    --primary: #1a5276;
    --primary-light: #217dbb;
    --accent: #f59e0b;
    --accent-dark: #d97706;
    --accent-light: #fcd34d;
    --secondary: #14b8a6;
    --bg-alt: #f0fdf9;
    --card-shadow: 0 4px 24px rgba(26,82,118,.08);
    --card-shadow-hover: 0 14px 40px rgba(26,82,118,.14);
}
[data-theme="couples"] {
    --primary: #831843;
    --primary-light: #9d174d;
    --accent: #ec4899;
    --accent-dark: #db2777;
    --accent-light: #f9a8d4;
    --secondary: #a855f7;
    --bg-alt: #fdf2f8;
    --card-shadow: 0 4px 24px rgba(131,24,67,.08);
    --card-shadow-hover: 0 14px 40px rgba(131,24,67,.14);
}
[data-theme="education"] {
    --primary: #2E7D32;
    --primary-light: #1B5E20;
    --accent: #2E7D32;
    --accent-dark: #1B5E20;
    --accent-light: #A5D6A7;
    --secondary: #2E7D32;
    --bg-alt: #F4FBF7;
    --text: #2E2E2E;
    --text-light: #6B7280;
    --card-bg: #FFFFFF;
    --card-shadow: 0 4px 24px rgba(46,125,50,.08);
    --card-shadow-hover: 0 14px 40px rgba(46,125,50,.14);
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.3; color: var(--primary); }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.6rem); }
p { margin-bottom: 1rem; }

/* --- Container --- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }

/* --- Section Header --- */
.section-header { text-align: center; margin-bottom: 50px; }
.section-header h2 { margin-bottom: 12px; position: relative; display: inline-block; }
.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
}
.section-header p { color: var(--text-light); max-width: 600px; margin: 16px auto 0; }

/* --- Tricolour Bar (Indian touch) --- */
.tricolour-bar {
    height: 4px;
    background: linear-gradient(90deg, var(--saffron) 33%, var(--white-mid) 33% 66%, var(--green-india) 66%);
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    font-size: .95rem;
}
.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,.2);
}
.btn-outline {
    background: transparent;
    border: 2px solid var(--accent);
    color: var(--accent);
}
.btn-outline:hover {
    background: var(--accent);
    color: #fff;
}
.btn-white {
    background: #fff;
    color: var(--primary);
}
.btn-white:hover {
    background: var(--bg-alt);
    transform: translateY(-2px);
}
.btn-sm { padding: 8px 18px; font-size: .85rem; }
.btn-lg { padding: 16px 36px; font-size: 1.05rem; }

/* --- Form Basics --- */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--text); font-size: .9rem; }
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .95rem;
    transition: border-color var(--transition);
    background: #fff;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* --- Badge --- */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.badge-corporate { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #0f1b3d; }
.badge-leisure { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.badge-couples { background: linear-gradient(135deg, #fce7f3, #fbcfe8); color: #4a0e2e; }
.badge-education { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #0f2e1a; }
.badge-popular { background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; }
.badge-new { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }

/* --- Section padding --- */
section { padding: 80px 0; }
section:nth-child(even) { background: var(--bg-alt); }

/* --- Visually Hidden (accessibility) --- */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
}
