/* =========================================
   MOTOLOGY THEME: COURSE DETAILS PAGE
   Colors: Yellow (#fed006), Dark (#1a1a1a)
   Fonts: Good Times (Headings), Roboto (Body)
   ========================================= */

/* --- 1. FONTS --- */
/* Body Text - Robotic/Clean */
.arlo {
    font-family: 'Roboto', Helvetica, Arial, sans-serif !important;
    color: #1a1a1a;
}

/* Headings - Good Times (The Motology Font) */
.arlo h1, .arlo h2, .arlo h3, .arlo h4, .arlo h5, .arlo h6,
.arlo .arlo-event-template-summary-and-al h3 {
    font-family: 'Good Times', 'Montserrat', sans-serif !important; /* Fallback to Montserrat if Good Times isn't loaded */
    text-transform: uppercase;
    color: #ffc20e !important;
    letter-spacing: 1px;
}

/* --- 2. BUTTONS (Register / Expand) --- */
/* Standardize all buttons to Yellow with Black Text */
.arlo .btn, 
.arlo .btn-secondary, 
.arlo .btn-secondary-alt,
.arlo .btn-cons {
    background-color: #ffc20e !important;
    color: #000000 !important;
    border: 1px solid #ffc20e !important;
    font-family: 'Good Times', sans-serif !important; /* Optional: Buttons in Good Times font? */
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 0 !important; /* Sharp corners for "Tech" feel */
}

.arlo .btn:hover, 
.arlo .btn-secondary:hover {
    background-color: #e6bc05 !important;
    color: #000000 !important;
}

/* Fix the "Expand" Arrow Button */
.arlo .btn-expand {
    color: #1a1a1a !important;
}
.arlo .btn-expand:hover {
    color: #ffc20e !important;
}

/* --- 3. ICONS & ACCENTS --- */
/* Turn all primary blue text/icons to Yellow */
.arlo .text-primary,
.arlo i[class^="icons8-"], 
.arlo .fa {
    color: #ffc20e !important;
}

/* --- 4. DATE BOX (Mobile View) --- */
/* The square date box on the left */
.arlo .date, 
.arlo .date.bg-primary,
.arlo .date.bg-warning {
    background-color: #ffc20e !important;
    color: #000000 !important;
    border-radius: 0 !important; /* Sharp corners */
}

/* --- 5. DESCRIPTION & PREREQUISITES HEADERS --- */
/* Adds the yellow underline style to your content headers */
.arlo-course-details h3,
.arlo-content-field-name h3 {
    border-bottom: 3px solid #ffc20e;
    display: inline-block;
    padding-bottom: 5px;
    margin-top: 30px;
    margin-bottom: 15px;
}

/* --- 6. FILTER BAR (Centered & Clean) --- */
/* Hides the "Display Filters" button text if needed, centers the dropdowns */
#filters {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}

/* Force filters to sit side-by-side */
#filters .arlo-filter-option {
    float: none !important;
    display: inline-block !important;
    margin: 5px 10px !important;
    text-align: left;
}

/* Style the dropdowns */
#filters select {
    background: #f4f4f4;
    border: 1px solid #ddd;
    color: #1a1a1a;
    font-family: 'Roboto', sans-serif;
}

/* --- 7. HERO SECTION DETAILS --- */
/* The price/duration icons under the main title */
.arlo-event-template-summary-and-al .banner-item {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: #555;
    font-size: 16px;
}

/* --- 8. REMOVE UNWANTED BORDERS --- */
/* Optional: Removes default grey borders for a cleaner look */
.arlo .event-container, 
.arlo .drop-shadow {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; /* Softer shadow */
    border: none !important;
}