/*
 * Theme Name:   Hello Elementor Child
 * Theme URI:    https://github.com/elementor/hello-theme/
 * Description:  Child theme for Hello Elementor
 * Author:       College
 * Author URI:   https://your-college-website.com
 * Template:     hello-elementor
 * Version:      1.0.0
 * License:      GNU General Public License v2 or later
 * License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:  hello-elementor-child
 */

/* ============================================================
   TABLE OF CONTENTS
   1. CSS Custom Properties (Design Tokens)
   2. Base / Reset Overrides
   3. Typography
   4. Layout Utilities
   5. Header Styles
   6. Navigation
   7. Buttons
   8. Cards & Sections
   9. Footer Styles
   10. Forms
   11. Animations & Transitions
   12. Responsive
   ============================================================ */

/* ----------------------------------------------------------
   1. CSS Custom Properties (Design Tokens)
   ---------------------------------------------------------- */
:root {
    /* Primary palette */
    --color-primary:        #1a73e8;
    --color-primary-dark:   #1557b0;
    --color-primary-light:  #e8f0fe;

    /* Accent */
    --color-accent:         #f4a261;
    --color-accent-dark:    #e08d3c;

    /* Neutrals */
    --color-bg:             #f8f9fa;
    --color-surface:        #ffffff;
    --color-border:         #dadce0;
    --color-text:           #202124;
    --color-text-muted:     #5f6368;

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md:  0 4px 12px rgba(0,0,0,.10);
    --shadow-lg:  0 10px 30px rgba(0,0,0,.12);

    /* Spacing scale */
    --space-xs:  .25rem;
    --space-sm:  .5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2.5rem;
    --space-2xl: 4rem;

    /* Border radius */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  16px;
    --radius-full: 9999px;

    /* Typography */
    --font-sans:  'Inter', 'Segoe UI', sans-serif;
    --font-heading: 'Inter', 'Segoe UI', sans-serif;
    --fw-normal:  400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
}

/* ----------------------------------------------------------
   2. Base / Reset Overrides
   ---------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* ----------------------------------------------------------
   3. Typography
   ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    line-height: 1.25;
    color: var(--color-text);
    margin-top: 0;
    margin-bottom: var(--space-md);
}

h1 { font-size: clamp(2rem,   5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem);  }
h3 { font-size: clamp(1.25rem,3vw, 2rem);    }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
    margin-top: 0;
    margin-bottom: var(--space-md);
    color: var(--color-text-muted);
}

/* ----------------------------------------------------------
   4. Layout Utilities
   ---------------------------------------------------------- */
.container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-lg);
}

.section-pad {
    padding-block: var(--space-2xl);
}

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.grid-auto   { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-lg); }

.text-center { text-align: center; }
.text-muted  { color: var(--color-text-muted); }

/* ----------------------------------------------------------
   5. Header Styles
   ---------------------------------------------------------- */
.site-header,
#site-header {
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow var(--transition-base);
}

.site-header.scrolled {
    box-shadow: var(--shadow-md);
}

/* ----------------------------------------------------------
   6. Navigation
   ---------------------------------------------------------- */
.site-navigation a,
.main-navigation a {
    font-weight: var(--fw-medium);
    font-size: .95rem;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.site-navigation a:hover,
.main-navigation a:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
    text-decoration: none;
}

/* Active menu item */
.site-navigation .current-menu-item > a,
.main-navigation .current-menu-item > a {
    color: var(--color-primary);
    font-weight: var(--fw-semi);
}

/* ----------------------------------------------------------
   7. Buttons
   ---------------------------------------------------------- */
.btn,
.wp-block-button__link,
.elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: .75rem 1.75rem;
    border-radius: var(--radius-full);
    font-family: var(--font-sans);
    font-size: .95rem;
    font-weight: var(--fw-semi);
    cursor: pointer;
    border: 2px solid transparent;
    transition: background var(--transition-base),
                color       var(--transition-base),
                box-shadow  var(--transition-base),
                transform   var(--transition-fast);
    text-decoration: none;
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
}
.btn-primary:hover {
    background: var(--color-primary-dark);
    box-shadow: 0 4px 14px rgba(26,115,232,.35);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-outline:hover {
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
}

.btn-accent {
    background: var(--color-accent);
    color: #fff;
}
.btn-accent:hover {
    background: var(--color-accent-dark);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

/* ----------------------------------------------------------
   8. Cards & Sections
   ---------------------------------------------------------- */
.card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

/* Section divider */
.section-divider {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: var(--radius-full);
    margin-inline: auto;
    margin-bottom: var(--space-xl);
}

/* ----------------------------------------------------------
   9. Footer Styles
   ---------------------------------------------------------- */
.site-footer,
#site-footer {
    background: #1a1a2e;
    color: #b0b8c8;
    padding-block: var(--space-2xl);
}

.site-footer a {
    color: #b0b8c8;
    transition: color var(--transition-fast);
}

.site-footer a:hover {
    color: #fff;
    text-decoration: none;
}

/* ----------------------------------------------------------
   10. Forms
   ---------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea,
select {
    width: 100%;
    padding: .75rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-surface);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26,115,232,.15);
}

/* ----------------------------------------------------------
   11. Animations & Transitions
   ---------------------------------------------------------- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.04); }
}

.animate-fade-in-up { animation: fadeInUp .6s var(--transition-slow) both; }
.animate-fade-in    { animation: fadeIn   .5s ease both; }
.animate-pulse      { animation: pulse   2s infinite ease-in-out; }

/* Stagger children */
.stagger-children > *:nth-child(1) { animation-delay: .05s; }
.stagger-children > *:nth-child(2) { animation-delay: .15s; }
.stagger-children > *:nth-child(3) { animation-delay: .25s; }
.stagger-children > *:nth-child(4) { animation-delay: .35s; }
.stagger-children > *:nth-child(5) { animation-delay: .45s; }

/* ----------------------------------------------------------
   12. Responsive
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .grid-auto {
        grid-template-columns: 1fr;
    }
    .container {
        padding-inline: var(--space-md);
    }
    .section-pad {
        padding-block: var(--space-xl);
    }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
}