/* ==========================================================
   SpellClock Legal Pages
   ========================================================== */

:root {

    --bg: #05080d;

    --surface: #0d141c;

    --surface-2: #121b25;

    --primary: #00e676;

    --primary-soft: rgba(0, 230, 118, .15);

    --gold: #d4af37;

    --text: #eef3f7;

    --muted: #9db0be;

    --border: rgba(255, 255, 255, .08);

    --shadow: 0 20px 60px rgba(0, 0, 0, .45);

    --radius: 20px;

    --max-width: 1180px;
  
}

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    background: var(--color-background);

    color: var(--color-text);

    font-family: "Montserrat", sans-serif;

    line-height: 1.7;

    overflow-x: hidden;

}

/* ==========================================================
   Navigation
   ========================================================== */

.navbar {

    position: fixed;

    top: 0;

    width: 100%;

    backdrop-filter: blur(18px);

    background: rgba(8, 10, 14, .55);

    border-bottom: 1px solid rgba(255, 255, 255, .05);

    z-index: 500;

}

.navbar .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    min-height: 82px;

}

.brand {

    width: 210px;

}

.nav-links {

    display: flex;

    gap: var(--space-md);

    align-items: center;

}

.nav-links a {

    transition: var(--transition);

    color: #EAEAEA;

}

.nav-links a:hover {

    color: var(--color-primary);

}

/* ==========================================================
   Hero
   ========================================================== */

.hero {

    padding: 110px 24px 70px;

    text-align: center;

}

.hero h1 {

    font-size: clamp(2.6rem, 6vw, 4rem);

    margin-bottom: 16px;

}

.hero p {

    color: var(--muted);

    max-width: 760px;

    margin: auto;

}

.hero .date {

    margin-top: 18px;

    color: var(--gold);

    font-weight: 600;

}

/* ==========================================================
   Content
   ========================================================== */

.container {

    width: min(92%, var(--container));

    margin-inline: auto;

}

.card h2 {

    margin-top: 4rem;

    margin-bottom: 1.5rem;

    padding-top: 1rem;

    line-height: 1.2;

}

.card hr {

    margin: 3rem 0;

    opacity: .15;

}

.card h2:first-child {

    margin-top: 0;

}

.card h3 {

    color: var(--gold);

    margin-top: 26px;

    margin-bottom: 10px;

}

.card p {

    margin-bottom: 18px;

}

.card ul {

    margin-left: 22px;

    margin-bottom: 18px;

}

.card li {

    margin-bottom: 8px;

}

/* ==========================================================
   Tables
   ========================================================== */

table {

    width: 100%;

    border-collapse: collapse;

    margin: 24px 0;

}

th {

    background: var(--primary-soft);

    color: var(--primary);

}

td,
th {

    border: 1px solid var(--border);

    padding: 14px;

    text-align: left;

}

tr:nth-child(even) {

    background: rgba(255, 255, 255, .02);

}

/* ==========================================================
   Links
   ========================================================== */

a {

    color: var(--primary);

}

a:hover {

    color: #6dffbb;

}

/* ==========================================================
   Footer
   ========================================================== */

footer {

    margin-top: 70px;

    border-top: 1px solid var(--border);

    padding: 40px 24px;

}

.footer-inner {
    max-width: var(--max-width);
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center; /* Adds vertical center alignment */
    flex-wrap: wrap;
    gap: 20px;
}


.footer-links {

    display: flex;

    gap: 22px;

    flex-wrap: wrap;

}

.footer-links a {

    color: var(--muted);

    text-decoration: none;

}

.footer-links a:hover {

    color: white;

}

/* ==========================================================
   Mobile
   ========================================================== */

@media(max-width:768px) {

    .nav {

        flex-direction: column;

        gap: 18px;

    }

    .nav-links {

        flex-wrap: wrap;

        justify-content: center;

    }

    .card {

        padding: 26px;

    }

}