/* =========================================================================
   TransWakefield — Main Stylesheet
   Palette: warm purples & teals, inclusive and modern
   ========================================================================= */

/* -------------------------------------------------------------------------
   CSS Reset
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
body { -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; margin-top: 0; margin-bottom: 0; }

/* -------------------------------------------------------------------------
   Design Tokens
   ------------------------------------------------------------------------- */
:root {
    --trans-pink:       #F5A9B8;
    --trans-blue:       #5BCEFA;
    --trans-white:      #FFFFFF;

    --purple-dark:      #4A2C6E;
    --purple-mid:       #7B4FA6;
    --purple-light:     #C39BD3;
    --purple-pale:      #F3EBF9;
    --teal-dark:        #0D6E6E;
    --teal-mid:         #1A9E9E;
    --teal-light:       #7FD4D4;
    --teal-pale:        #E8F8F8;

    --grey-900:         #1C1C2E;
    --grey-700:         #44445A;
    --grey-500:         #7A7A96;
    --grey-200:         #E8E8F0;
    --grey-100:         #F6F6FA;
    --white:            #FFFFFF;

    --color-heading:    var(--purple-dark);
    --color-body:       var(--grey-700);
    --color-link:       var(--purple-mid);
    --color-link-hover: var(--teal-dark);
    --color-bg:         var(--white);

    --nav-bg:           var(--purple-dark);
    --nav-text:         rgba(255,255,255,0.88);
    --nav-text-hover:   var(--white);
    --nav-active:       var(--trans-pink);
    --nav-dropdown-bg:  var(--purple-dark);

    --footer-bg:        var(--grey-900);
    --footer-text:      rgba(255,255,255,0.7);

    --font-heading:     'Nunito', sans-serif;
    --font-body:        'Source Sans 3', sans-serif;
    --font-nav:         'Nunito', sans-serif;

    --header-height:    4.5rem;
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
body {
    font-family:      var(--font-body);
    font-size:        1.125rem;
    line-height:      1.8;
    color:            var(--color-body);
    background-color: var(--color-bg);
}

a { color: var(--color-link); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--color-link-hover); }

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color:       var(--color-heading);
    font-weight: 800;
    line-height: 1.2;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); color: var(--purple-mid); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }

p {
    font-size:     1.125rem;
    line-height:   1.8;
    color:         var(--color-body);
    margin-bottom: 1rem;
}

/* -------------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------------- */
.site-header {
    background-color: var(--nav-bg);
    box-shadow:       0 2px 12px rgba(0,0,0,0.25);
    position:         sticky;
    top:              0;
    z-index:          1000;
}

.site-header .navbar {
    background-color: transparent;
    padding:          0.5rem 0;
    min-height:       var(--header-height);
}

.site-header .navbar-brand img {
    height: 3rem;
    width:  auto;
}

.site-header .nav-link {
    font-family:    var(--font-nav);
    font-weight:    600;
    font-size:      0.95rem;
    color:          var(--nav-text);
    padding:        0.5rem 0.85rem;
    border-radius:  0.375rem;
    transition:     color 0.2s ease, background-color 0.2s ease;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus {
    color:            var(--nav-text-hover);
    background-color: rgba(255,255,255,0.12);
}

.site-header .nav-link.active {
    color:            var(--nav-active);
    background-color: transparent;
}

.site-header .dropdown-menu {
    background-color: var(--nav-dropdown-bg);
    border:           1px solid rgba(255,255,255,0.12);
    border-radius:    0.5rem;
    box-shadow:       0 8px 24px rgba(0,0,0,0.3);
    padding:          0.5rem;
    margin-top:       0.25rem;
}

.site-header .dropdown-item {
    font-family:   var(--font-nav);
    font-weight:   600;
    font-size:     0.9rem;
    color:         var(--nav-text);
    border-radius: 0.3rem;
    padding:       0.45rem 1rem;
    transition:    background-color 0.15s ease, color 0.15s ease;
}

.site-header .dropdown-item:hover {
    background-color: rgba(255,255,255,0.15);
    color:            var(--white);
}

.site-header .dropdown-divider { border-color: rgba(255,255,255,0.15); }

.site-header .navbar-toggler { border-color: rgba(255,255,255,0.4); }
.site-header .navbar-toggler-icon { filter: invert(1); }

/* -------------------------------------------------------------------------
   Main content
   ------------------------------------------------------------------------- */
main {
    background-color: var(--color-bg);
    min-height: calc(100vh - var(--header-height) - 200px);
}

/* -------------------------------------------------------------------------
   Banner
   ------------------------------------------------------------------------- */
.site-banner {
    background:    linear-gradient(135deg, var(--purple-dark) 0%, var(--teal-dark) 100%);
    color:         var(--white);
    padding:       3rem 1rem;
    margin-bottom: 2rem;
}

.site-banner h1, .site-banner h2 {
    color:       var(--white);
    font-weight: 900;
}

/* -------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */
.card {
    border:        1px solid var(--grey-200);
    border-radius: 0.75rem;
    box-shadow:    0 2px 8px rgba(74,44,110,0.08);
    transition:    box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
    box-shadow: 0 6px 20px rgba(74,44,110,0.15);
    transform:  translateY(-2px);
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn-primary {
    background-color: var(--purple-mid);
    border-color:     var(--purple-mid);
    color:            var(--white);
    font-weight:      700;
    border-radius:    0.5rem;
    transition:       background-color 0.2s, border-color 0.2s, transform 0.15s;
}
.btn-primary:hover {
    background-color: var(--purple-dark);
    border-color:     var(--purple-dark);
    transform:        translateY(-1px);
    color:            var(--white);
}

.btn-success {
    background-color: var(--teal-mid);
    border-color:     var(--teal-mid);
    color:            var(--white);
    font-weight:      700;
    border-radius:    0.5rem;
}
.btn-success:hover {
    background-color: var(--teal-dark);
    border-color:     var(--teal-dark);
    color:            var(--white);
}

.btn-warning {
    background-color: #C87D0E;
    border-color:     #C87D0E;
    color:            var(--white);
    font-weight:      700;
    border-radius:    0.5rem;
}
.btn-warning:hover { background-color: #A3660B; border-color: #A3660B; color: var(--white); }
.btn-danger  { border-radius: 0.5rem; font-weight: 700; }

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */
.form-control:focus, .form-select:focus {
    border-color: var(--purple-mid);
    box-shadow:   0 0 0 0.2rem rgba(123,79,166,0.2);
}

/* -------------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------------- */
.table thead th {
    background-color: var(--purple-dark);
    color:            var(--white);
    font-family:      var(--font-heading);
    font-weight:      700;
    border-color:     var(--purple-mid);
}

.table-info {
    --bs-table-bg:           var(--teal-pale);
    --bs-table-striped-bg:   var(--purple-pale);
    --bs-table-border-color: var(--grey-200);
}

/* -------------------------------------------------------------------------
   Admin
   ------------------------------------------------------------------------- */
.admin-page { background-color: var(--grey-100); }

.sidebar {
    background-color: var(--purple-dark);
    min-height:       calc(100vh - var(--header-height));
}

.sidebar .nav-link {
    font-family:   var(--font-nav);
    font-size:     0.9rem;
    font-weight:   600;
    color:         rgba(255,255,255,0.75);
    border-radius: 0.4rem;
    padding:       0.55rem 1rem;
    transition:    background-color 0.2s ease, color 0.2s ease;
    display:       flex;
    align-items:   center;
    gap:           0.6rem;
}
.sidebar .nav-link:hover { background-color: rgba(255,255,255,0.12); color: var(--white); }
.sidebar .nav-link.active { background-color: var(--teal-mid); color: var(--white); }

.admin-nav-link        { color: rgba(255,255,255,0.75); text-decoration: none; }
.admin-nav-link:hover  { color: var(--white); }
.admin-nav-link.active { color: var(--trans-pink); }

/* -------------------------------------------------------------------------
   Articles
   ------------------------------------------------------------------------- */
.article-meta {
    font-size:      0.9rem;
    color:          var(--grey-500);
    font-weight:    600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
footer, .page-footer {
    background-color: var(--footer-bg);
    color:            var(--footer-text);
}
footer a, .page-footer a { color: rgba(255,255,255,0.6); transition: color 0.2s ease; }
footer a:hover, .page-footer a:hover { color: var(--white); }

/* -------------------------------------------------------------------------
   Social icons
   ------------------------------------------------------------------------- */
.fa-facebook, .fa-facebook-square { color: #3b5998; }
.fa-twitter,  .fa-twitter-square  { color: #1DA1F2; }
.fa-instagram                      { color: #E1306C; }
.fa-youtube,  .fa-youtube-play     { color: #FF0000; }
.fa-linkedin, .fa-linkedin-square  { color: #0077B5; }

/* -------------------------------------------------------------------------
   Utilities
   ------------------------------------------------------------------------- */
.text-purple     { color: var(--purple-mid) !important; }
.text-teal       { color: var(--teal-mid) !important; }
.bg-purple-pale  { background-color: var(--purple-pale) !important; }
.bg-teal-pale    { background-color: var(--teal-pale) !important; }

.image-circular {
    width: 200px; height: 200px;
    border-radius: 50%; overflow: hidden;
    border: 3px solid var(--purple-light);
}
.image-circular img { width: 200px; height: 200px; object-fit: cover; }

.row { --bs-gutter-x: 1rem; --bs-gutter-y: 0; margin-right: 0; margin-left: 0; }
.px-3, .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .site-header .dropdown-menu { background-color: rgba(255,255,255,0.08); border: none; box-shadow: none; }
    .sidebar { min-height: auto; }
}