/* =========================================================
   BRIGHTMIND HUB — GLOBAL DESIGN SYSTEM
   Professional education-library style
   ---------------------------------------------------------
   Shared shell/components only.
   Specialized pages such as resources.php may keep their
   own integrated page styling without being overridden here.
   ========================================================= */

:root{
    --green:#15803d;
    --green-dark:#11632f;
    --green-deep:#0d4f27;
    --green-soft:#eef9f1;
    --green-pale:#f5fbf7;
    --white:#ffffff;
    --ink:#17301f;
    --heading:#102f1b;
    --muted:#64748b;
    --border:#d9e5dd;
    --border-strong:#c6d7cb;
    --surface:#f4f8f5;
    --danger:#b91c1c;
    --warning:#9a3412;
    --shadow:0 8px 24px rgba(15,58,31,.06);
    --shadow-soft:0 3px 12px rgba(15,58,31,.045);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--surface);
    color:var(--ink);
    font-family:inherit;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
}

img{
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select,
textarea{
    font:inherit;
}

/* =========================================================
   SHARED CONTAINER
   ========================================================= */

.container{
    width:min(1180px,calc(100% - 48px));
    margin-inline:auto;
}

/* =========================================================
   GLOBAL HEADER / NAVIGATION
   ========================================================= */

.header{
    background:rgba(255,255,255,.98);
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:100;
    box-shadow:0 1px 5px rgba(15,58,31,.025);
}

.nav{
    min-height:76px;
    display:flex;
    align-items:center;
    gap:22px;
}

.brand{
    display:flex;
    align-items:center;
    gap:11px;
    flex:0 0 auto;
    color:var(--green-dark);
    font-weight:850;
    font-size:1.06rem;
    letter-spacing:-.02em;
}

.brand img{
    width:44px;
    height:44px;
    object-fit:contain;
    display:block;
}

.navlinks{
    display:flex;
    align-items:center;
    gap:4px;
    margin-left:auto;
}

.navlinks a{
    display:inline-flex;
    align-items:center;
    min-height:42px;
    padding:9px 14px;
    border-radius:9px;
    color:#193222;
    font-size:.97rem;
    font-weight:600;
    transition:background .18s ease,color .18s ease;
}

.navlinks a:hover{
    background:var(--green-soft);
    color:var(--green-dark);
}

.search{
    flex:1 1 360px;
    max-width:460px;
    margin-left:10px;
}

.search input{
    width:100%;
    height:46px;
    padding:0 15px;
    border:1px solid var(--border-strong);
    border-radius:9px;
    background:#fff;
    color:var(--ink);
    outline:none;
    transition:border-color .18s ease,box-shadow .18s ease;
}

.search input::placeholder{
    color:#7b8794;
}

.search input:focus{
    border-color:#65a97e;
    box-shadow:0 0 0 3px rgba(21,128,61,.10);
}

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

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:10px 18px;
    border:1px solid var(--green);
    border-radius:9px;
    background:var(--green);
    color:#fff;
    font-weight:750;
    cursor:pointer;
    transition:background .18s ease,border-color .18s ease,transform .18s ease;
}

.btn:hover{
    background:var(--green-dark);
    border-color:var(--green-dark);
}

.btn:active{
    transform:translateY(1px);
}

.btn.secondary{
    background:#fff;
    color:var(--green-dark);
    border-color:var(--border-strong);
}

.btn.secondary:hover{
    background:var(--green-soft);
    border-color:#a9c8b4;
}

.btn.danger{
    background:var(--danger);
    border-color:var(--danger);
}

/* =========================================================
   HOMEPAGE / SHARED HERO
   ========================================================= */

.hero{
    padding:58px 0 54px;
    background:
        linear-gradient(180deg,#edf9f0 0%,#f8fcf9 68%,#fff 100%);
    border-bottom:1px solid #e3eee6;
}

.hero h1{
    max-width:900px;
    margin:10px 0 14px;
    color:var(--heading);
    font-size:clamp(2.25rem,5vw,4rem);
    line-height:1.05;
    letter-spacing:-.045em;
}

.hero p{
    max-width:790px;
    margin:0;
    color:#607789;
    font-size:1.08rem;
    line-height:1.65;
}

.hero .actions{
    margin-top:25px;
}

/* =========================================================
   BADGES / TEXT
   ========================================================= */

.badge{
    display:inline-flex;
    align-items:center;
    width:max-content;
    background:var(--green-soft);
    color:var(--green-dark);
    padding:6px 10px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:800;
    line-height:1;
    letter-spacing:.02em;
}

.muted{
    color:var(--muted);
}

.price{
    font-size:1.25rem;
    font-weight:850;
    color:var(--green-dark);
}

/* =========================================================
   GENERIC CARDS
   ========================================================= */

.grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    padding:34px 0;
}

.card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:22px;
    box-shadow:var(--shadow-soft);
}

.card h2,
.card h3{
    color:var(--heading);
}

.card p{
    margin-bottom:0;
}

/* =========================================================
   FORMS
   ========================================================= */

.form{
    width:100%;
    max-width:540px;
    margin:45px auto;
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:28px;
    box-shadow:var(--shadow);
}

.form label{
    display:block;
    margin:16px 0 7px;
    color:var(--heading);
    font-weight:750;
}

.form input,
.form select,
.form textarea{
    width:100%;
    padding:12px 13px;
    border:1px solid #cbd8cf;
    border-radius:9px;
    background:#fff;
    color:var(--ink);
    outline:none;
}

.form input:focus,
.form select:focus,
.form textarea:focus{
    border-color:#65a97e;
    box-shadow:0 0 0 3px rgba(21,128,61,.09);
}

/* =========================================================
   NOTICES
   ========================================================= */

.notice{
    padding:13px 15px;
    border-radius:9px;
    background:#fff7ed;
    border:1px solid #fed7aa;
}

.notice-success{
    background:#ecfdf5;
    border:1px solid #a7f3d0;
    color:#166534;
    padding:13px 15px;
    border-radius:9px;
}

.notice-warning{
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#9a3412;
    padding:13px 15px;
    border-radius:9px;
}

.notice-danger{
    background:#fef2f2;
    border:1px solid #fecaca;
    color:#991b1b;
    padding:13px 15px;
    border-radius:9px;
}

.error{
    color:var(--danger);
}

/* =========================================================
   ACTION GROUP
   ========================================================= */

.actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px;
}

/* =========================================================
   PUBLIC ACCESS / RESOURCE DETAIL COMPONENTS
   ========================================================= */

.resource-meta{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:12px 0;
}

.resource-meta span{
    padding:5px 9px;
    border:1px solid #dbe7df;
    border-radius:999px;
    font-size:.86rem;
    background:#fff;
}

.choice-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    margin-top:24px;
}

.choice-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:23px;
    box-shadow:var(--shadow-soft);
}

.choice-card h2{
    margin-top:0;
    color:var(--heading);
}

.choice-card.featured{
    border:2px solid var(--green);
}

.choice-card .btn{
    width:100%;
    text-align:center;
}

.profile-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:20px;
}

.notification{
    padding:13px 14px;
    border:1px solid #dbe7df;
    border-radius:10px;
    background:#fff;
    margin:8px 0;
}

/* =========================================================
   APPLICATION SEARCH TOOLS
   Scoped deliberately.
   ========================================================= */

.search-tools{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:10px;
    margin:18px 0;
}

.search-tools input,
.search-tools select{
    width:100%;
    min-height:44px;
    padding:10px 12px;
    border:1px solid #cbd8cf;
    border-radius:9px;
    background:#fff;
    color:var(--ink);
}

.search-tools input:focus,
.search-tools select:focus{
    border-color:#65a97e;
    outline:none;
    box-shadow:0 0 0 3px rgba(21,128,61,.09);
}

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

.footer{
    margin-top:60px;
    padding:32px 0;
    border-top:1px solid var(--border);
    background:#fff;
    color:#667b6d;
}

.footer a:hover{
    color:var(--green-dark);
}

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

@media(max-width:900px){
    .container{
        width:min(100% - 36px,1180px);
    }

    .nav{
        min-height:70px;
        gap:14px;
    }

    .search{
        max-width:360px;
        margin-left:0;
    }

    .navlinks{
        gap:0;
    }

    .navlinks a{
        padding-inline:10px;
    }

    .grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .choice-grid{
        grid-template-columns:1fr 1fr;
    }

    .profile-grid{
        grid-template-columns:1fr;
    }

    .search-tools{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:700px){
    .nav{
        flex-wrap:wrap;
        padding:10px 0;
    }

    .brand{
        order:1;
    }

    .navlinks{
        order:2;
        margin-left:auto;
    }

    .search{
        order:3;
        flex-basis:100%;
        max-width:none;
    }

    .hero{
        padding:44px 0 42px;
    }

    .hero h1{
        font-size:clamp(2rem,9vw,3rem);
    }
}

@media(max-width:520px){
    .container{
        width:calc(100% - 28px);
    }

    .navlinks{
        display:none;
    }

    .hero{
        padding:38px 0;
    }

    .hero p{
        font-size:1rem;
    }

    .grid,
    .choice-grid{
        grid-template-columns:1fr;
    }

    .search-tools{
        grid-template-columns:1fr;
    }

    .choice-card{
        padding:18px;
    }

    .form{
        margin:28px auto;
        padding:21px;
    }
}