/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Template: generatepress
Author: Tom Usborne
Author URI: https://generatepress.com/about
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options
Version: 3.6.1.1769811915
Updated: 2026-01-30 22:25:15

*/

/* =========================================
   1. GLOBAL VARIABLES (Princeton Palette)
   ========================================= */
:root {
    --accent-hover: #2c256b;
    --border-color: #e5e5e5;
}

/* =========================================
   2. LAYOUT CONTAINERS (The Strategy)
   ========================================= */

/* The Full Width Strip */
.section-outer {
    width: 100%;
    padding: 80px 20px;
    background-color: var(--base-3); /* Default White */
}

/* The Centered Content Box */
.section-inner {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* For Text-Heavy sections (Like Intros) */
.section-inner-text {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Target the UL specifically when it has the class */
ul.section-inner-text {
    max-width: 750px;
    list-style: none !important; /* Force hide default bullets */
    padding-left: 0;
    margin-top: 20px;
}

/* Style the List Items */
ul.section-inner-text li {
    position: relative;
    padding-left: 30px; /* Make space for the custom square */
    margin-bottom: 12px;
    line-height: 1.6;
}

/* The Custom Square Bullet */
ul.section-inner-text li::before {
    content: "■"; 
    color: var(--accent);
    font-size: 1.2em;
    position: absolute;
    left: 0;
    top: -3px; /* Adjusted alignment to sit better with text */
}

/* Target the UL specifically when it has the class */
.section-inner-text ul {
    max-width: 750px;
    list-style: none !important; /* Force hide default bullets */
    padding-left: 0;
    margin-top: 20px;
}

/* Style the List Items */
.section-inner-text li {
    position: relative;
    padding-left: 30px; /* Make space for the custom square */
    margin-bottom: 12px;
    line-height: 1.6;
}

/* The Custom Square Bullet */
.section-inner-text li::before {
    content: "■"; 
    color: var(--accent);
    font-size: 1.2em;
    position: absolute;
    left: 0;
    top: -3px; /* Adjusted alignment to sit better with text */
}

.section-inner-heading {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    color: var(--accent);
}

/* Grey Background Variation */
.section-alternate {
    background-color: var(--base-2);
}

/* Mobile Padding Adjustment */
@media (max-width: 768px) {
    .section-outer {
        padding: 50px 20px;
    }
}

/* =========================================
   3. HERO SECTIONS
   ========================================= */
.section-hero {
    background-color: var(--accent);
    color: var(--base-3);
    padding-top: 100px;
    padding-bottom: 100px;
    text-align: center;
}

.section-hero h1 {
    color: var(--base-3);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.section-hero h2 {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 30px;
}

.section-hero p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.15rem;
    max-width: 800px;
    margin: 0 auto;
}

/* =========================================
   4. TYPOGRAPHY COMPONENT
   ========================================= */
.section-heading {
    text-align: center;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 40px;
    position: relative;
}

/* Small underline accent under headings */
.section-heading::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--contrast);
    margin: 15px auto 0;
    border-radius: 2px;
}

/* =========================================
   5. CARD GRIDS (About, Team, Outbound)
   ========================================= */
/* Apply to the Grid Block */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Columns default */
    gap: 30px;
}

/* Apply to the Container Block inside the Grid */
.feature-card {
    background-color: var(--base-3);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 35px 25px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.feature-card:hover {
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    border-top: 4px solid var(--accent); /* Princeton Blue Top Border */
}

.feature-card h3 {
    color: var(--accent);
    font-size: 1.4rem;
    margin-bottom: 15px;
}

/* =========================================
   6. COURSE MODULES (For Syllabus Pages)
   ========================================= */
/* Use this for the "Course Content" sections */
.course-module-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Columns for modules */
    gap: 25px;
}

.course-module-card {
    background-color: var(--base-3);
    border-left: 4px solid var(--accent); /* Accent bar on left */
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.course-module-card h3 {
    color: var(--contrast);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.course-module-card h4 {
    color: var(--contrast);
    font-size: 1rem;
    font-weight: 500;
    font-style: italic;
    margin-bottom: 10px;
}

/* Paragraphs (The list items) */
.course-module-card p {
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: var(--contrast-2);
    position: relative; /* Essential for the ::before positioning */
    padding-left: 20px; /* Make space for the ">" symbol */
}

/* The ">" Symbol */
.course-module-card p::before {
    content: "»"; 
    color: var(--accent);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0; /* Aligns with the top of the line */
}

h3.course-module-subsection-heading {
    color: var(--contrast);
    font-size: 1.2rem;
    font-weight: 700;
    padding-top: 20px;
    margin-bottom: 10px;
}

.course-module-subsection-card {
    background-color: var(--base-3);
    border-left: 4px solid var(--accent); /* Accent bar on left */
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.course-module-subsection-card h4 {
    color: var(--contrast);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 10px;
}

/* Paragraphs (The list items) */
.course-module-subsection-card p {
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: var(--contrast-2);
    position: relative; /* Essential for the ::before positioning */
    padding-left: 20px; /* Make space for the ">" symbol */
}

/* The ">" Symbol */
.course-module-subsection-card p::before {
    content: "»"; 
    color: var(--accent);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0; /* Aligns with the top of the line */
}

/* =========================================
   7. BUTTONS
   ========================================= */
/* Apply to Button Block */
.btn-primary {
    background-color: var(--accent) !important;
    color: white !important;
    border-radius: 5px;
    padding: 12px 30px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--accent-hover) !important;
    transform: translateY(-2px);
}

.btn-whatsapp {
    background-color: #25D366 !important;
    color: white !important;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-whatsapp:hover {
    transform: translateY(-2px);
}

/* =========================================
   8. VIDEO GRID (For Outbound Training)
   ========================================= */
.video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* =========================================
   9. RESPONSIVENESS
   ========================================= */
@media (max-width: 900px) {
    .feature-grid, .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .feature-grid, .video-grid, .course-module-grid {
        grid-template-columns: 1fr; /* Stack everything on mobile */
    }
    
    .section-hero h1 {
        font-size: 2.2rem;
    }
}

/* =========================================
   10. Contact Page Specific Styles 
========================================= */

/* 1. Refine the Contact Groups */
.contact-method-item {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--base-2); /* Subtle divider */
}

.contact-method-item:last-child {
    border-bottom: none;
}

.contact-number {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--contrast);
    margin-bottom: 15px;
    display: block;
}

/* 2. Better Button Layout (Flexbox) */
.button-group-row {
    margin-top: 10px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* 3. Refined Button Styles for Contact */
.btn-primary, .btn-whatsapp {
    padding: 10px 24px; /* Slightly smaller than main CTA */
    font-size: 0.9em;
    border-radius: 50px; /* Pill shape looks friendlier for contact */
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    min-width: 120px;
    display: inline-block;
}

.btn-whatsapp {
    background-color: #25D366; 
    color: white;
}

.btn-whatsapp:hover {
    background-color: #1ebc57;
    color: white;
}

/* 4. Link Styling for Emails */
.email-link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    font-size: 1.1em;
    transition: color 0.2s;
}

.email-link:hover {
    color: var(--contrast);
    text-decoration: underline;
}

/* 5. Map Section Polish */
.map-responsive iframe {
    width: 100%;
    height: 100%;
    min-height: 350px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* =========================================
   11. Home Page Specific Styles 
========================================= */

body, html {
    overflow-x: hidden;
}

/* --- 1. Full Viewport Breakout Hero --- */
/* --- 1. Fixed Hero: Full Width & Calculated Height --- */
.hero-full-height {
    /* 1. Break out of the 1200px container width */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    /* 2. Negate the default #content padding 
       (This pulls the image up to touch the header) */
    margin-top: -40px; 
    
    /* 3. Height Logic: Viewport minus Header (~110px) minus Admin Bar (32px)
       Adjust the '150px' if your header is taller/shorter */
    height: calc(100vh - 124px);
    min-height: 500px; /* Prevents it from getting too short on small screens */
    
    /* 4. Image Handling */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* 5. Centering Content */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Adjustments for the Admin Bar */
body.admin-bar .hero-full-height {
    /* Accounts for the 32px WordPress Admin Bar */
    height: calc(100vh - 156px); 
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .hero-full-height {
        margin-top: -30px; /* GP mobile padding is usually smaller */
        height: 60vh; /* On mobile, 100vh is often too tall; 60% is better UX */
        min-height: 400px;
    }
}

/* Dark Overlay to make text readable */
.hero-full-height::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(19, 32, 52, 0.5); /* Adjust opacity (0.5) as needed */
    z-index: 1;
}

/* Ensure content sits on top of the overlay */
.hero-full-height .section-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px; /* Keeps text contained nicely */
    padding: 0 20px;
    display: flex;
    flex-direction: column;   /* Stack items vertically */
    height: 100%;             /* Fill the calculated hero height */
    text-align: left !important; /* Force Left Align */
    
    /* Breathing room from edges */
    padding-top: 60px;        
    padding-bottom: 60px;
}

/* Target both the Heading and the Paragraph inside the Hero */
.hero-full-height .section-inner h1,
.hero-full-height .section-inner p {
    color: #ffffff;
    /* Soft text shadow for readability */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin-top: 0;
    text-align: left !important;
}

/* Optional: Make the Headline extra strong */
.hero-full-height .section-inner h1 {
    font-weight: 800; /* Extra bold */
    letter-spacing: -0.5px; /* Tighter tracking for large text */
}

/* Optional: Make the sub-text slightly larger and more legible */
.hero-full-height .section-inner p {
    margin-top: 0;         
    margin-bottom: 30px;      /* Space between text and button */
    margin-left: 0;           /* Remove centering margins */
    margin-right: 0;
    text-align: left !important;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.6;
}

/* 4. Ensure the Button Container aligns left */
.hero-full-height .section-inner div:last-child {
    margin-top: auto;
    text-align: center !important;
}

/* 1. Define the Keyframes */
@keyframes btn-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(57, 49, 133, 0.85); /* Starts solid near the border */
    }
    70% {
        box-shadow: 0 0 0 10px rgba(57, 49, 133, 0); /* Expands outward and fades */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(57, 49, 133, 0); /* Resets */
    }
}

/* 2. Apply Animation to the Button */
/* You can add the class 'pulse' to any button you want to animate */
.btn-primary.pulse {
    animation: btn-pulse 2s infinite;
}

/* --- 2. Calendar Table Styles --- */
/* --- Polished Calendar Table Styles --- */

/* 1. Wrapper Polish */
.calendar-wrapper {
    overflow-x: auto; /* Ensures responsiveness on mobile */
    background: #fff;
    border-radius: 8px; /* Soft corners */
    box-shadow: 0 4px 20px rgba(0,0,0,0.08); /* Lift it off the page */
    margin-top: 20px;
    border: 1px solid var(--base-2);
}

/* 2. Base Table Reset */
.calendar-wrapper table {
    width: 100%;
    border-collapse: collapse; /* Removes double borders */
    border-spacing: 0;
    min-width: 700px; /* Forces scroll on mobile so layout doesn't break */
}

/* 3. Header Styling */
.calendar-wrapper thead {
    background-color: var(--accent); /* Princeton Blue */
}

.calendar-wrapper th {
    color: #ffffff !important; /* Force white text */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 1px;
    padding: 18px 24px; /* Generous padding */
    border: none; /* Remove default borders */
    text-align: left;
}

/* 4. Body Row Styling */
.calendar-wrapper td {
    padding: 16px 24px;
    color: var(--contrast);
    font-size: 0.95em;
    border-bottom: 1px solid #eaeaea; /* Subtle separator */
    vertical-align: middle;
}

/* 5. Zebra Striping */
.calendar-wrapper tbody tr:nth-child(even) {
    background-color: #f8f9fa; /* Very light grey */
}

/* 6. Hover Effect */
.calendar-wrapper tbody tr:hover {
    background-color: #f0f4ff; /* Light blue tint on hover */
    transition: background-color 0.2s ease;
}

/* 7. Column Specifics (Optional Polish) */
/* Makes the first column (Training Name) stand out */
.calendar-wrapper td:first-child {
    font-weight: 600;
    color: var(--accent);
    width: 40%; /* Give the topic more space */
}

/* Centers the location columns */
.calendar-wrapper th:not(:first-child),
.calendar-wrapper td:not(:first-child) {
    text-align: center;
    color: #555; /* Slightly softer text for dates */
}

/* Hides the raw date initially, JS will fade it in */
.hs-date-swap {
    opacity: 0;
    transition: opacity 0.2s ease-in;
}