/*
Theme Name: Unique Support Hub
Theme URI: https://uniquesupporthub.com
Author: Mugove Nyamazana
Author URI: https://uniquesupporthub.com
Description: A professional custom WordPress theme for Unique Support Hub, supporting neurodivergent individuals aged 16 and above.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: unique-support-hub
Tags: accessibility-ready, custom-logo, featured-images, responsive, custom-menu
*/

/*=====================================================
    UNIQUE SUPPORT HUB
    GLOBAL STYLESHEET

    TABLE OF CONTENTS

    1. Root Variables
    2. Reset
    3. Typography
    4. Layout
    5. Header
    6. Navigation
    7. Hero
    8. Buttons
    9. Sections
   10. Cards
   11. Forms
   12. Footer
   13. Utilities
======================================================*/


/*=====================================================
 1. ROOT VARIABLES
======================================================*/

:root{

    --primary:#5B2C83;
    --secondary:#48A868;
    --accent:#F36B3C;

    --white:#ffffff;
    --light:#F7F9FB;
    --grey:#ECECEC;
    --text:#555555;
    --dark:#1F1F1F;

    --radius:18px;

    --shadow:0 15px 35px rgba(0,0,0,.08);

    --transition:.35s ease;

    --max-width:1280px;

}


/*=====================================================
 2. RESET
======================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:Arial, Helvetica, sans-serif;

    font-size:16px;

    line-height:1.7;

    background:var(--white);

    color:var(--text);

    overflow-x:hidden;

}


/*=====================================================
 3. TYPOGRAPHY
======================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--primary);

    line-height:1.2;

    margin-bottom:20px;

    font-weight:700;

}

h1{

    font-size:58px;

}

h2{

    font-size:42px;

}

h3{

    font-size:30px;

}

p{

    margin-bottom:20px;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

img{

    max-width:100%;

    display:block;

}


/*=====================================================
 4. LAYOUT
======================================================*/

.container{

    width:90%;

    max-width:var(--max-width);

    margin:auto;

}

section{

    padding:100px 0;

}


/*=====================================================
 5. HEADER
======================================================*/

.site-header{

    background:#ffffff;

    position:sticky;

    top:0;

    z-index:9999;

    box-shadow:0 3px 20px rgba(0,0,0,.05);

}

.header-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}

.logo img{

    max-height:75px;

}


/*=====================================================
 6. NAVIGATION
======================================================*/

.main-navigation ul{

    display:flex;

    list-style:none;

    gap:35px;

}

.main-navigation a{

    color:var(--dark);

    font-weight:600;

}

.main-navigation a:hover{

    color:var(--primary);

}


/*=====================================================
 7. HERO
======================================================*/

.hero{

    min-height:90vh;

    display:flex;

    align-items:center;

    background:linear-gradient(135deg,#F8FBF9,#EEF6F0);

}

.hero-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.hero-text h1{

    margin-bottom:25px;

}

.hero-text p{

    font-size:20px;

}

.hero-image img{

    border-radius:25px;

    box-shadow:var(--shadow);

}


/*=====================================================
 8. BUTTONS
======================================================*/

.btn{

    display:inline-block;

    padding:16px 38px;

    border-radius:50px;

    background:var(--accent);

    color:#fff;

    font-weight:bold;

    transition:var(--transition);

}

.btn:hover{

    background:var(--primary);

    transform:translateY(-3px);

}


/*=====================================================
 9. SECTIONS
======================================================*/

.section-title{

    text-align:center;

    margin-bottom:60px;

}


/*=====================================================
 10. CARDS
======================================================*/

.card{

    background:#fff;

    border-radius:18px;

    padding:35px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-10px);

}


/*=====================================================
 11. FORMS
======================================================*/

input,
textarea,
select{

    width:100%;

    padding:15px;

    border:1px solid #ddd;

    border-radius:10px;

    margin-bottom:20px;

    font-size:16px;

}

button{

    cursor:pointer;

}


/*=====================================================
 12. FOOTER
======================================================*/

.site-footer{

    background:var(--primary);

    color:#fff;

    padding:70px 0 25px;

}

.site-footer h3{

    color:#fff;

}

.site-footer a{

    color:#fff;

}

.footer-bottom{

    text-align:center;

    margin-top:40px;

    border-top:1px solid rgba(255,255,255,.2);

    padding-top:20px;

}


/*=====================================================
 13. UTILITIES
======================================================*/

.text-center{

    text-align:center;

}

.mt-1{margin-top:20px;}
.mt-2{margin-top:40px;}
.mt-3{margin-top:60px;}

.mb-1{margin-bottom:20px;}
.mb-2{margin-bottom:40px;}
.mb-3{margin-bottom:60px;}

.shadow{

    box-shadow:var(--shadow);

}

.rounded{

    border-radius:var(--radius);

}

.bg-light{

    background:var(--light);

}


/*=====================================================
 14. RESPONSIVE
======================================================*/

@media(max-width:991px){

    h1{

        font-size:42px;

    }

    h2{

        font-size:34px;

    }

    .hero-content{

        grid-template-columns:1fr;

        text-align:center;

    }

    .main-navigation ul{

        flex-direction:column;

        gap:20px;

    }

}

@media(max-width:768px){

    section{

        padding:70px 0;

    }

    h1{

        font-size:34px;

    }

    h2{

        font-size:28px;

    }

}


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

.site-header{

    position:sticky;

    top:0;

    background:#ffffff;

    z-index:9999;

    box-shadow:0 2px 20px rgba(0,0,0,.08);

}

.header-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}

.logo img{

    max-height:80px;

}

.main-menu{

    display:flex;

    gap:35px;

    list-style:none;

}

.main-menu li{

    position:relative;

}

.main-menu a{

    color:#333;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.main-menu a:hover{

    color:var(--primary);

}

.header-button .btn{

    padding:14px 28px;

}