/*
Theme Name: Right/Super Motorsport
Theme URI: https://rightsupermotorsport.com
Author: Piotr Guzdziol
Author URI: https://rightsupermotorsport.com
Description: A custom theme for the Right/Super Motorsport team, based on our multi-page website.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-theme, motorsports, two-column
Text Domain: rightsuper-motorsport

This theme uses Tailwind CSS, which is loaded via functions.php
*/

/* =========================================
   ===== THEME VARIABLES (LIGHT) =====
   ========================================= */
:root {
    --rally-red: #E32636;
    --asphalt-black: #1A1A1A;
    --amber-warning: #FFBF00;
    --paper-white: #F9FAFB;
    --pure-white: #FFFFFF;
    --gray-dark: #333333;
    --gray-light: #E5E5E5;

    /* Semantic Fonts */
    --font-heading: 'Raleway', sans-serif;
    --font-body: 'Roboto', sans-serif;
}

body {
    font-family: var(--font-body);
    background-color: var(--paper-white);
    color: var(--asphalt-black);
    line-height: 1.6;
}

/* =========================================
   ===== UTILITIES =====
   ========================================= */
.bg-body-default {
    background-color: var(--paper-white);
}

/* =========================================
   First Principles / Barn Engineering Utilities
   ========================================= */

/* Button Reset & Base Styles */
.btn-red,
.btn-yellow {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
    text-align: center;
    border-radius: 4px;
    /* Slightly rounded, friendly but solid */
    font-family: var(--font-heading);
    letter-spacing: 0.05em;
    border: none;
    /* Clean edges */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-red {
    background-color: var(--rally-red);
    color: white;
}

.btn-red:hover {
    background-color: #C91F2E;
    /* Darker shade of Vector Red */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(227, 38, 54, 0.3);
    /* Red glow */
}

.btn-yellow {
    background-color: var(--amber-warning);
    color: var(--asphalt-black);
}

.btn-yellow:hover {
    background-color: #E6AC00;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 191, 0, 0.3);
    /* Amber glow */
}

/* Typography Utilities */
.font-rally {
    font-family: var(--font-heading);
}

/* "Flow" Backgrounds */
.bg-flow-dark {
    background: linear-gradient(135deg, #F0F0F0 0%, #FFFFFF 100%);
    /* Light flow */
}

.bg-paper {
    background-color: var(--paper-white);
    color: var(--asphalt-black);
}

/* Section Dividers / Accents */
.accent-line {
    height: 4px;
    background: linear-gradient(90deg, var(--rally-red), var(--amber-warning));
    border-radius: 2px;
}

/* =========================================
===== GLOBAL TYPOGRAPHY & UTILITIES =====
=========================================
*/
/* =========================================
===== GLOBAL TYPOGRAPHY & UTILITIES (Barn Updated) =====
=========================================
*/

/* Removed technical borders and mono fonts */
.rounded-friendly {
    border-radius: 4px;
}


/* =========================================
===== BUILD PAGE HOTSPOT STYLES =====
=========================================
*/

/* Hotspot Button Styling */
.hotspot {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #DC2626;
    /* Rally Red */
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    cursor: pointer;
    box-shadow: 0 0 10px #DC2626;
    transition: transform 0.2s ease;
    z-index: 10;
}

/* Pulsing animation for the hotspot */
.hotspot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: #DC2626;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

/* Styling for the content panes */
.info-pane {
    display: none;
    /* Hidden by default */
}

.info-pane.active {
    display: block;
    /* Shown when active */
}

/* MODIFIED: Active hotspot is now yellow */
.hotspot:hover,
.hotspot.active {
    transform: scale(1.25);
    background-color: #FACC15;
    /* Yellow Accent */
    border-color: #FACC15;
    box-shadow: 0 0 10px #FACC15;
}

/* =========================================
===== BUILD PAGE TAB STYLES =====
=========================================
*/
.tab-nav {
    display: flex;
    border-bottom: 2px solid #E5E5E5;
    /* Light border */
    margin-bottom: 1.5rem;
    /* 24px */
}

.tab-link {
    padding: 0.75rem 1rem;
    /* 12px 16px */
    font-weight: 600;
    color: #666;
    /* Darker grey for light theme tabs */
    border-bottom: 3px solid transparent;
    transform: translateY(2px);
    /* Lifts it up to sit on the border */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border-top-left-radius: 0.375rem;
    /* 6px */
    border-top-right-radius: 0.375rem;
    /* 6px */
}

.tab-link:hover {
    color: var(--asphalt-black);
    background-color: #F5F5F5;
    /* Light hover bg */
}

/* MODIFIED: Active tab now has dark bg and yellow border */
.tab-link.active {
    color: var(--asphalt-black);
    border-bottom-color: #FACC15;
    /* Yellow Accent */
    background-color: #FFFFFF;
    /* White active bg */
    transform: translateY(0);
    /* Sits flush */
}

.tab-pane {
    display: none;
    /* Hidden by default */
}

.tab-pane.active {
    display: block;
    /* Shown when active */
}

/* =========================================
===== ACCENT STYLES =====
=========================================
*/

/* Add thin red line to bottom of header */
header {
    border-bottom: 2px solid #DC2626;
    /* Rally Red */
}

/* Color all H2s/H3s inside dark cards */
.bg-card h3,
/* For build diary cards */
.bg-card h2,
.bg-[#262626] h2,
.bg-[#1A1A1A] h2,
/* For info box */
.info-pane h2 {
    color: #DC2626;
    /* Rally Red */
}


/* Style for main page titles */
.page-title {
    color: var(--asphalt-black);
    /* Dark text */
    border-bottom: 2px solid #E5E5E5;
    /* Light border */
    padding-bottom: 0.5rem;
    /* 8px */
    margin-bottom: 2rem;
    /* 32px */
}

/* MODIFIED: Styles for the new flex-based section titles */
/* MODIFIED: Styles for the new "Barn Engineering" section titles (Centered) */
.section-title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    text-align: center;
}

.section-title {
    color: var(--asphalt-black);
    /* Dark text */
    text-transform: uppercase;
    /* Removed flex-shrink as we are now stacking */
}

/* Deprecated technical divider, keeping empty rule to avoid breakage if used elsewhere, 
   but effectively removing the line */
.section-divider {
    display: none;
}


/* =========================================
===== NAVIGATION LINK STYLING =====
=========================================
*/
.primary-menu {
    /* This class is applied in header.php */
    /* It's just a marker for the <li> and <a> styles below */
}

/* Style for individual <li> items in the menu */
.primary-menu li {
    padding: 0;
    margin: 0;
}

/* Style for the <a> links in the menu */
.primary-menu li a {
    display: block;
    padding-bottom: 0.25rem;
    /* 4px */
    border-bottom: 2px solid transparent;
    /* Placeholder for hover/active */
    transition: all 0.2s ease-in-out;
    color: var(--asphalt-black);
    /* Dark text for links */
}

/* Hover state for links */
.primary-menu li a:hover {
    color: #DC2626;
    /* Rally Red */
    border-bottom-color: #DC2626;
    /* Rally Red */
}

/* Active state for current page */
.primary-menu li.current-menu-item a {
    color: #DC2626;
    border-bottom-color: #DC2626;
    /* Rally Red */
}

/* Mobile Menu Tweaks */
@media (max-width: 768px) {
    .primary-menu li {
        width: 100%;
        border-top: 1px solid #E5E5E5;
        /* Light border */
    }

    .primary-menu li a {
        padding: 1rem 0;
        display: block;
        text-align: center;
    }

    .primary-menu li:first-child {
        border-top: none;
    }
}

/* =========================================
===== HOMEPAGE DYNAMIC STYLES =====
=========================================
*/

/* These styles are for the "Meet the Team" summary */
.prose-custom {
    color: #4A4A4A;
    /* Dark grey text */
}

.prose-custom h2 {
    color: #B45309;
    /* Darker amber for better contrast on white, or just keep Red? Let's use Rally Red for consistency or Dark */
    color: #DC2626;
    /* Rally Red */
    font-weight: 700;
    font-size: 1.5rem;
    /* 24px */
    margin-bottom: 0.5rem;
}

.prose-custom p {
    font-size: 1rem;
    /* 16px */
    line-height: 1.6;
    margin-bottom: 1em;
}

.prose-custom a.btn-red {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background-color: #DC2626;
    color: #fff !important;
    border-radius: 0.5rem;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.2s ease-in-out;
    text-decoration: none !important;
}

.prose-custom a.btn-red:hover {
    background-color: #C21F1F;
}

/* These styles are for the gallery grid */
.gallery-item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    /* Make them square */
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #F5F5F5;
    /* Light placeholder */
}

.gallery-item .overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9), transparent);
    /* Light gradient */
    color: var(--asphalt-black);
    font-weight: 700;
    font-size: 1.25rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease-in-out;
}

.gallery-item:hover .overlay-text {
    transform: translateY(0);
    opacity: 1;
}

/* =========================================
===== FOOTER STYLES =====
=========================================
*/
.footer-widget {
    color: #666;
    /* Dark grey */
    /* Lighter grey for footer text */
}

.footer-widget h4 {
    color: #DC2626;
    /* Rally Red */
    /* Yellow Accent */
    font-weight: 700;
    font-size: 1.125rem;
    /* 18px */
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.footer-widget p {
    font-size: 0.875rem;
    /* 14px */
    line-height: 1.6;
}

.footer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-widget ul li a {
    font-size: 0.875rem;
    /* 14px */
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.footer-widget ul li a:hover {
    color: #DC2626;
    /* Rally Red */
    text-decoration: underline;
}

.footer-widget a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.footer-widget a:hover {
    color: #DC2626;
    /* Rally Red */
    text-decoration: underline;
}

/* =========================================
===== GLOBAL BUTTON STYLES =====
=========================================
*/
/* =========================================
===== GLOBAL BUTTON STYLES (Technical Update) =====
=========================================
*/
/* CSS Variables */
:root {
    --rally-red: #E32636;
    /* Primary: Vector Red */
    --asphalt-black: #1A1A1A;
    /* Secondary: Asphalt Black */
    --amber-warning: #FFBF00;
    /* Accent: Amber Warning */
    --paper-white: #F9FAFB;
    /* Base: Paper White (Slightly cooler/more modern white) */
    --pure-white: #FFFFFF;
    --gray-dark: #333333;
    --gray-light: #E5E5E5;

    --font-heading: 'Raleway', sans-serif;
    --font-body: 'Roboto', sans-serif;
}

body {
    font-family: var(--font-body);
    background-color: var(--paper-white);
    /* Light BG */
    color: var(--asphalt-black);
    /* Dark Text */
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 800;
    /* ExtraBold/Black as requested */
    text-transform: capitalize;
    /* "Sentence case for headlines to appear friendly" - forcing capitalize for titles usually works well, or just normal */
    letter-spacing: -0.02em;
    /* Tighter for heavy Raleway */
    color: var(--asphalt-black);
    /* Ensure headers are dark */
}

.btn-red {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #DC2626;
    color: #fff;
    /* Friendly edges */
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    border: none;
    position: relative;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Alignment fix */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    padding-top: 0.8em;
    padding-bottom: 0.8em;
}

.btn-red:hover {
    background-color: #C91F2E;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(227, 38, 54, 0.3);
}

.btn-yellow {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: var(--amber-warning);
    color: var(--asphalt-black);
    border-radius: 4px;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    border: none;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Alignment fix */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    padding-top: 0.8em;
    padding-bottom: 0.8em;
}

.btn-yellow:hover {
    background-color: #E6AC00;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 191, 0, 0.3);
}

/* =========================================
===== MISC STYLES =====
=========================================
*/
.spec-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.spec-list li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #D1D5DB;
    /* Light dashed line */
    padding-bottom: 0.75rem;
}

.spec-list li strong {
    color: var(--asphalt-black);
    flex-shrink: 0;
    margin-right: 1rem;
}

/* Background color for build diary cards */
.bg-card {
    background-color: #FFFFFF;
    /* White card */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* Drop shadow for depth */
    border: 1px solid #E5E5E5;
}

/* Style for "Read More" links on cards */
.text-rally-red {
    color: #DC2626;
}

.text-accent-yellow {
    color: #B45309;
    /* Darker amber due to light background */
}

/* =========================================
===== TEAM PAGE STYLES =====
=========================================
*/

/* Ensure article text is readable and nice */
.prose-custom h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-family: 'JetBrains Mono', monospace;
    /* Tech headers */
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

/* Add a subtle glow to the stats bars on hover */
.bg-\[\#DC2626\] {
    box-shadow: 0 0 5px rgba(220, 38, 38, 0.5);
}

.bg-\[\#FACC15\] {
    box-shadow: 0 0 5px rgba(250, 204, 21, 0.5);
}

/* =========================================
===== BUILD DIARY (Log Entry) =====
=========================================
*/
/* =========================================
   ===== BUILD DIARY (Barn Style) =====
   =========================================
*/
.log-entry-wrapper {
    /* Placeholder for any specific wrapper styles */
}

/* Semantic Utility for Nested Elements */
.bg-inner {
    background-color: #F3F4F6;
    /* gray-100 */
}