/* =========================================
   1. GLOBAL VARIABLES (The DNA)
   ========================================= */
   :root {
    color-scheme: light only;
    --bg-color: #FDFCF8;       /* Creamy Off-White */
    --primary-blue: #3E5C9A;   /* Medium Blue Accent */
    --deep-blue: #2A4068;      /* Dark Royal Blue */
    --text-grey: #666666;      /* Body Text */
    --nav-bar: #FDFCF8;      
    --white: #ffffff;
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Inter', sans-serif;
    
    /* Standard Spacing */
    --section-spacing: 5rem 0;
}

/* =========================================
   2. RESET & BASE
   ========================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    color: var(--deep-blue);
    margin-bottom: 1rem;
    font-weight: 600;
    scroll-margin-top: 90px;
}

[id] {
    scroll-margin-top: 90px;
}

a { text-decoration: none; transition: 0.3s ease; }
p { margin-bottom: 1rem; }

/* =========================================
   3. UTILITIES (Used everywhere)
   ========================================= */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

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

/* Standard Section Padding */
section { padding: var(--section-spacing); }

/* =========================================
   4. SPACER FOR NON-HERO PAGES
   ========================================= */
/* Since your navbar is floating/fixed, normal pages need top padding 
   so the text doesn't hide behind the navbar. */
.page-top-spacer {
    padding-top: 120px; 
}

/* =========================================
   5. SHARED BUTTONS
   ========================================= */
.btn-primary {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--deep-blue);
    color: var(--white);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary:hover {
    background-color: var(--primary-blue);
    color: var(--white);
    transform: translateY(-2px);
}
.centered-list {
    list-style-position: inside;   /* moves bullet closer to text */
    text-align: left;            /* centers the list */
    padding-left: 100px;               /* removes default left padding */
    margin-top: 10px;
}