/**
 * Theme Name: SchoolPak
 * Theme URI: https://tipconsultgh.com/schoolpak
 * Author: Tip Consult GH
 * Author URI: https://tipconsultgh.com
 * Description: A modern, fully editable WordPress block theme designed for basic and senior high schools. Built for the Ghana Education Service (GES) ecosystem.
 * Version: 1.0.0
 * Requires at least: 6.4
 * Tested up to: 6.7
 * Requires PHP: 8.0
 * License: GPL-2.0-or-later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: schoolpak
 * Tags: full-site-editing, block-patterns, education, school, block-styles, wide-blocks
 *
 * @package SchoolPak
 * @author  Tip Consult GH
 */

/* ==========================================================================
   Custom Properties — Brand Colours & Spacing
   ========================================================================== */
:root {
    --spk-primary: #1e40af;
    --spk-primary-light: #3b82f6;
    --spk-primary-dark: #1e3a8a;
    --spk-secondary: #059669;
    --spk-secondary-light: #10b981;
    --spk-accent: #f59e0b;
    --spk-accent-light: #fbbf24;
    --spk-dark: #1e293b;
    --spk-light: #f8fafc;
    --spk-white: #ffffff;
    --spk-gray-100: #f1f5f9;
    --spk-gray-200: #e2e8f0;
    --spk-gray-300: #cbd5e1;
    --spk-gray-500: #64748b;
    --spk-gray-700: #334155;
    --spk-border-radius: 0.5rem;
    --spk-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --spk-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --spk-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Smooth Scrolling
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   Scroll-to-Top Button
   ========================================================================== */
.spk-scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--spk-primary);
    color: var(--spk-white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 99;
    box-shadow: var(--spk-shadow-md);
}

.spk-scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

.spk-scroll-top:hover {
    background: var(--spk-primary-dark);
    transform: translateY(-2px);
}

/* ==========================================================================
   Top Bar Styles
   ========================================================================== */
.spk-top-bar {
    font-size: 0.875rem;
}

.spk-top-bar a {
    text-decoration: none;
}

.spk-top-bar a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Stat Card Hover Effects
   ========================================================================== */
.spk-stat-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.spk-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--spk-shadow-lg);
}

/* ==========================================================================
   Programme Card Hover
   ========================================================================== */
.spk-programme-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.spk-programme-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--spk-shadow-lg);
}

/* ==========================================================================
   Team Member Card
   ========================================================================== */
.spk-team-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.spk-team-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--spk-shadow-lg);
}

/* ==========================================================================
   Step Number Circle
   ========================================================================== */
.spk-step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    flex-shrink: 0;
}