/* * MAIN STYLESHEET
 * Optimised for Mobile Responsiveness & UK English Standards 
 */

/* =========================================
   1. Base Global Styles
   ========================================= */

/* Box sizing reset for better layout control */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Tailwind Compatibility Styles */
#current-date { 
    font-variant-numeric: tabular-nums; 
}

/* Custom highlight class for bold and emphasised text. */
.highlight {
    font-style: italic;
    font-weight: 600; /* semibold */
    color: #a5b4fc;   /* indigo-300 */
}

/* =========================================
   2. Layout Containers
   ========================================= */

/* * Container Logic:
 * - Fluid width by default (width: 100%)
 * - Capped at 1200px for large screens
 * - Centred via auto margins
 * - Safe padding on sides for mobile
 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 15px; /* 15px safe area for mobile edges */
}

/* =========================================
   3. Typography & Components
   ========================================= */

.page-header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.lead-paragraph {
    font-size: 1.1em; /* Approx 17.6px if base is 16px */
    line-height: 1.6;
    color: #374151; /* gray-700 for better contrast */
}

.sub-group {
    margin-top: 30px;
    padding-left: 20px;
    border-left: 3px solid #2563EB; /* Changed to Tailwind blue-600 match */
}

/* =========================================
   4. Mobile Responsiveness (Media Queries)
   ========================================= */

/* Tablet and Mobile adjustments (screens smaller than 768px) */
@media screen and (max-width: 768px) {
    
    /* Reduce vertical whitespace on mobile to conserve screen real estate */
    .page-header {
        margin-bottom: 25px;
        padding-bottom: 15px;
    }

    /* Adjust font size for enhanced readability on small screens without scrolling */
    .lead-paragraph {
        font-size: 1rem; 
        line-height: 1.5;
    }

    /* Reduce indentation for sub-groups to maximise content width */
    .sub-group {
        margin-top: 20px;
        padding-left: 12px; /* Reduced from 20px */
        border-left-width: 3px; /* Keep visibility but tighter layout */
    }

    /* Tighter container padding if needed */
    .container {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

/* --- Custom Brand Colours for Tailwind CDN Overrides --- */

/* 1. Main Menu Background (Dark Blue) */
/* bg-gray-900 class overridden to Dark Blue */
.bg-gray-900 {
    background-color: #1a237e !important;
}

/* 2. Header Bar and Mobile Menu (Darker Accent) */
/* bg-gray-800 class overridden to a slightly darker shade */
.bg-gray-800 {
    background-color: #2c3e50 !important; /* Dark grey close to dark blue */
}

/* 3. Accent Colour (Gold Yellow) and Text Colour */
/* Gold Yellow Background (e.g., Contact Us Button Fill) */
.bg-yellow-500 {
    background-color: #ffeb3b !important;
}
/* Text Colour on Gold Yellow (Dark Blue) */
.text-gray-900 {
    color: #1a237e !important;
}

/* 4. Active/Hover Text Colour (Gold Yellow) */
/* text-yellow-500 class overridden to Gold Yellow */
.text-yellow-500 {
    color: #ffeb3b !important;
}

/* Contact Us Hover Effect (Slightly Darker Gold Yellow) */
.hover\:bg-yellow-600:hover {
    background-color: #fdd835 !important; /* Slightly darker Gold Yellow */
}