/* ==========================================================
   SWH ACADEMY
   Global Design System
   style.css
   Version 1.0
========================================================== */


/* ==========================================================
   ROOT VARIABLES
========================================================== */

:root {

    /* Brand Colors */
    --primary-blue: #0F5E8C;
    --deep-blue: #08466A;
    --accent-gold: #B08B3C;
    --light-gold: #F4E7C1;

    /* Neutral Colors */
    --background-ivory: #F8F6F1;
    --text-slate: #1C2B39;
    --white: #FFFFFF;

    /* Supporting Colors */
    --reniala-brown: #76502D;
    --reniala-light: #C18A52;
    --reniala-green: #365F3B;

    /* Typography */
    --heading-font: "Georgia", serif;
    --accent-font: "Times New Roman", serif;
    --body-font: "Georgia", serif;

    /* Layout */
    --container-width: 1200px;

    /* Effects */
    --shadow-soft:
        0 8px 20px rgba(0,0,0,.08);

    --transition:
        all .3s ease;

    /* Radius */
    --radius-small: 4px;
    --radius-medium: 8px;

}



/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after {

    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    margin:0;

    font-family:var(--body-font);

    color:var(--text-slate);

    background:var(--background-ivory);

    line-height:1.7;

}


img {

    max-width:100%;

    height:auto;

}


a {

    color:inherit;

}



/* ==========================================================
   ACCESSIBILITY
========================================================== */


/* Keyboard focus */

a:focus-visible,
button:focus-visible {

    outline:3px solid var(--accent-gold);

    outline-offset:4px;

}



/* Screen reader helper */

.sr-only {

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}



/* ==========================================================
   GLOBAL TYPOGRAPHY
========================================================== */


h1,
h2,
h3,
h4 {

    font-family:var(--heading-font);

    font-weight:700;

    line-height:1.25;

    margin-top:0;

}


h1 {

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

    letter-spacing:3px;

}


h2 {

    color:var(--primary-blue);

    text-align:center;

    font-size:clamp(2rem,4vw,2.5rem);

    margin-bottom:35px;

}


h3 {

    color:var(--primary-blue);

}


p {

    margin-top:0;

}



/* ==========================================================
   LAYOUT CONTAINERS
========================================================== */


.container {

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

    margin:auto;

}


section {

    padding:70px 0;

}


.content {

    max-width:950px;

    margin:auto;

    font-size:1.15rem;

    line-height:1.8;

}



/* ==========================================================
   NAVIGATION
========================================================== */


.navbar {

    background:var(--primary-blue);

    color:var(--white);

    position:sticky;

    top:0;

    z-index:1000;

}


.nav-container {

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

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}


.logo {

    font-family: var(--heading-font);

    font-size: 1.55rem;

    font-weight: bold;

    letter-spacing: 1px;

    color: var(--white);

    text-decoration: none;

    transition: var(--transition);

}

.logo:hover {

    color: var(--light-gold);

}


.nav-links {

    display:flex;

    align-items:center;

    gap:26px;

    list-style:none;

    padding:0;

    margin:0;

    flex-wrap:wrap;

}


.nav-links a {

    text-decoration:none;

    color:white;

    transition:var(--transition);

}


.nav-links a:hover {

    color:var(--light-gold);

}



/* Mobile navigation preparation */

.menu-toggle {

    display:none;

    background:none;

    border:none;

    color:white;

    font-size:1.8rem;

}



/* ==========================================================
   HERO HEADER
========================================================== */


.hero {

    background:

    linear-gradient(

        rgba(15,94,140,.92),

        rgba(15,94,140,.92)

    );

    color:white;

    text-align:center;

    padding:100px 20px;

}


.school-type {

    font-family:var(--accent-font);

    color:var(--light-gold);

    font-size:1.3rem;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:25px;

}


.motto {

    font-style:italic;

    font-size:1.4rem;

    max-width:850px;

    margin:20px auto;

}


.translation {

    font-size:1.1rem;

    opacity:.95;

}


.hero-text {

    max-width:850px;

    margin:40px auto;

    font-size:1.25rem;

    line-height:1.8;

}

/* ==========================================================
   BUTTONS
========================================================== */


.button {

    display:inline-block;

    padding:15px 35px;

    background:var(--accent-gold);

    color:var(--white);

    text-decoration:none;

    border-radius:var(--radius-small);

    margin-top:25px;

    font-size:1rem;

    transition:var(--transition);

}


.button:hover {

    background:#8F6F2F;

    transform:translateY(-2px);

}



/* ==========================================================
   CARD SYSTEM
========================================================== */


.cards {

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

}



.card {

    background:var(--white);

    width:280px;

    padding:35px;

    text-align:center;

    box-shadow:var(--shadow-soft);

    border-radius:var(--radius-medium);

    transition:var(--transition);

}


.card:hover {

    transform:translateY(-5px);

}



.card h3 {

    margin-top:15px;

}


.card p {

    line-height:1.7;

}



/* ==========================================================
   HIGHLIGHT PANELS
========================================================== */


.highlight {

    background:var(--white);

    padding:40px;

    max-width:900px;

    margin:30px auto;

    box-shadow:var(--shadow-soft);

    border-radius:var(--radius-medium);

    line-height:1.8;

    font-size:1.15rem;

}



/* ==========================================================
   PHILOSOPHY SYMBOLS
========================================================== */


.symbol {

    font-size:3rem;

    line-height:1;

    margin-bottom:20px;

}



/* ==========================================================
   RENIALA TREE SYMBOL
========================================================== */


.reniala-symbol {

    position:relative;

    width:150px;

    height:170px;

    margin:0 auto 20px;

}



/* Ancient trunk */

.reniala-trunk {

    position:absolute;

    bottom:10px;

    left:58px;

    width:35px;

    height:110px;

    background:

    linear-gradient(

        to right,

        var(--reniala-brown),

        var(--reniala-light),

        var(--reniala-brown)

    );

    border-radius:18px 18px 5px 5px;

}



/* Main branches */


.reniala-branch-left,
.reniala-branch-right {

    position:absolute;

    top:50px;

    height:14px;

    background:var(--reniala-brown);

    border-radius:20px;

}



.reniala-branch-left {

    width:75px;

    left:0;

    transform:rotate(-8deg);

}



.reniala-branch-right {

    width:75px;

    right:0;

    transform:rotate(8deg);

}



/* Upper branches */


.reniala-root-left,
.reniala-root-right {

    position:absolute;

    top:30px;

    height:8px;

    background:var(--reniala-brown);

    border-radius:20px;

}



.reniala-root-left {

    width:50px;

    left:15px;

    transform:rotate(-35deg);

}



.reniala-root-right {

    width:50px;

    right:15px;

    transform:rotate(35deg);

}



/* Canopy */


.reniala-crown {

    position:absolute;

    top:20px;

    left:30px;

    width:90px;

    height:22px;

    background:var(--reniala-green);

    border-radius:50%;

}



/* ==========================================================
   VALUES SECTION
========================================================== */


.values {

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}



.value-card {

    background:var(--white);

    width:230px;

    padding:30px;

    text-align:center;

    box-shadow:var(--shadow-soft);

    border-radius:var(--radius-medium);

    transition:var(--transition);

}



.value-card:hover {

    transform:translateY(-5px);

}



.value-card h3 {

    margin-top:10px;

}



/* ==========================================================
   QUOTE / PHILOSOPHY BLOCK
========================================================== */


.philosophy-quote {

    max-width:900px;

    margin:40px auto;

    text-align:center;

    font-size:1.35rem;

    font-style:italic;

    color:var(--primary-blue);

}



/* ==========================================================
   ACADEMIC SECTION COMPONENTS
========================================================== */


.academic-grid {

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}



.academic-card {

    background:white;

    padding:35px;

    box-shadow:var(--shadow-soft);

    border-radius:var(--radius-medium);

}



.academic-card h3 {

    color:var(--primary-blue);

}



/* ==========================================================
   CONTACT COMPONENTS
========================================================== */


.contact-grid {

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}



.contact-card {

    background:white;

    padding:35px;

    text-align:center;

    box-shadow:var(--shadow-soft);

    border-radius:var(--radius-medium);

}



.contact-card h3 {

    margin-bottom:15px;

}

/* ==========================================================
   FOOTER
========================================================== */


footer {

    background:var(--primary-blue);

    color:var(--white);

    text-align:center;

    padding:50px 20px;

}


footer h3 {

    color:white;

    margin-bottom:10px;

}


footer p {

    margin:0;

}



/* Footer links */

.footer-links {

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

    margin:25px 0;

}


.footer-links a {

    color:white;

    text-decoration:none;

    transition:var(--transition);

}


.footer-links a:hover {

    color:var(--light-gold);

}



/* ==========================================================
   UTILITY CLASSES
========================================================== */


.text-center {

    text-align:center;

}


.gold {

    color:var(--accent-gold);

}


.blue {

    color:var(--primary-blue);

}


.mt-large {

    margin-top:50px;

}


.mb-large {

    margin-bottom:50px;

}



/* ==========================================================
   RESPONSIVE DESIGN
========================================================== */


/* Tablets */

@media screen and (max-width:900px) {


    section {

        padding:55px 0;

    }


    .hero {

        padding:75px 20px;

    }


    .nav-links {

        gap:15px;

    }


    .cards {

        gap:20px;

    }


}



/* Mobile */

@media screen and (max-width:700px) {



    h1 {

        letter-spacing:2px;

    }


    h2 {

        font-size:2rem;

    }



    .nav-container {

        flex-direction:column;

        gap:20px;

    }


    .nav-links {

        flex-direction:column;

        text-align:center;

        width:100%;

    }


    .hero-text {

        font-size:1.1rem;

    }


    .motto {

        font-size:1.15rem;

    }


    .highlight {

        padding:25px;

    }


    .card {

        width:100%;

        max-width:350px;

    }


    .value-card {

        width:100%;

        max-width:300px;

    }


}



/* Small mobile devices */

@media screen and (max-width:420px) {


    .school-type {

        font-size:1rem;

    }


    .button {

        padding:13px 25px;

    }


}



/* ==========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================== */


@media (prefers-reduced-motion:reduce) {


    *,
    *::before,
    *::after {

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        scroll-behavior:auto !important;

        transition-duration:.01ms !important;

    }


}



/* ==========================================================
   PRINT STYLES
========================================================== */


@media print {


    body {

        background:white;

        color:black;

    }


    .navbar,
    footer {

        display:none;

    }


    section {

        padding:20px 0;

    }


}



/* ==========================================================
   CONTACT FORM
========================================================== */


.contact-email {

    text-align:center;

}


.contact-email a {

    color:var(--primary-blue);

    text-decoration:none;

    font-size:1.15rem;

}


.contact-email a:hover {

    color:var(--accent-gold);

}



.contact-address {

    text-align:center;

    opacity:.85;

}



.highlight hr {

    border:none;

    border-top:1px solid #ddd;

    margin:30px 0;

}





/* Form Styling */


form {

    width:100%;

}



form label {

    font-family:var(--heading-font);

    font-weight:bold;

    color:var(--primary-blue);

}



form input,
form select,
form textarea {


    width:100%;

    padding:15px;

    margin-top:8px;

    border:1px solid #ccc;

    border-radius:var(--radius-small);

    font-family:var(--body-font);

    font-size:1rem;

    background:white;

}



form input:focus,
form select:focus,
form textarea:focus {


    outline:none;

    border-color:var(--primary-blue);

    box-shadow:0 0 0 3px rgba(15,94,140,.15);

}



form textarea {

    min-height:180px;

    resize:vertical;

}



form select {

    cursor:pointer;

}



form .button {

    border:none;

    cursor:pointer;

}

/* ==========================================================
   ACTIVE NAVIGATION PAGE
========================================================== */


.nav-links a.active {

    color:var(--light-gold);

    position:relative;

}



.nav-links a.active::after {

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    background:var(--accent-gold);

    border-radius:3px;

}


/* ==========================================================
   ACTIVE FOOTER PAGE
========================================================== */


.footer-links a.active {

    color:var(--light-gold);

    position:relative;

}



.footer-links a.active::after {

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:100%;

    height:2px;

    background:var(--accent-gold);

    border-radius:3px;

}


footer a {

    color:white;

    text-decoration:none;

}


footer a:hover {

    color:var(--light-gold);

}




.reniala-tree{
    width:145px;
    height:auto;
}