/* ==========================================================================
   1. GLOBAL CUSTOM VARIABLES (:root)
   ========================================================================== */
:root {
  /* Harmonious Palette - PKG Go Karts 4506 Guide Meridian */
  --site-canvas-bg: #F0F9F3;          /* Restful mint off-white body canvas */
  --site-header-bg: rgb(245, 251, 247); /* Layered off-white header (#F5FBF7) */
  --site-dark-anchor: #092327;        /* Deep layout anchor (Footer/Headers) Deep, Dark Teal */
  --site-teal-accent: #498C8A;        /* Mid-teal buttons, actions, and base links */
  --site-muted-accent: #C09891;       /* Soft terracotta highlights */
  
  /* Interaction & UI Variables */
  --site-dark-charcoal: #212529;      /* High-contrast hover feedback for menu links */

  /* Standard Cassiopeia Variables Map */
  --cassiopeia-color-primary: var(--site-teal-accent);
}
/* Base State for the Tier 2 Button */
.t2-btn-terracotta {
    background-color: #C25E46; /* Replace with your exact soft terracotta hex */
    color: #ffffff;
    transition: background-color 0.2s ease-in-out;
}

/* Hover State */
.t2-btn-terracotta:hover {
    background-color: #9C412C; /* The darker, reactive terracotta */
    color: #ffffff;
}

/* ==========================================================================
   2. LAYOUT & STRUCTURAL ACCENTS (Footer to Bottom, Grid, Overrides)
   ========================================================================== */
body, html {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--site-canvas-bg);
    font-family: Arial, Sans-Serif;
}

@media only screen and (max-width:767px) {
   main .item-page > .page-header, .com-content-article__body {
     padding-left: 1em;
  }
}
/*main > .com-content-categories .categories-list {
  padding-right: 1em;
}*/
.com-content-article .site-grid {
  margin-bottom: auto;
}

.com-content-categories__items {
  margin-bottom: 2em;
}

.footer {
  margin-top: auto;
  background-color: var(--site-dark-charcoal); /* Deep layout anchor background */
  color: var(--site-header-bg);              /* Clear off-white text readability */
  background-image: none;
}

.mod-footer .footer1 {
  text-align: center;
}

.container-header {
  background-color: var(--site-header-bg);
  background-image: none;
  border-bottom: 1px solid var(--site-dark-anchor); /* Crisp, definitive boundary */
}
.site-grid {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0 !important;
    padding: 0 !important;
}

/* Sidebar Spacer Left and Right */
.lftspacer, .rtspace {
  border: none;
}

/* Removes padding/margin from your specific section/module wrapper */
.site-main, .block-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   HOMEPAGE FULL-BLEED VIDEO BREAKOUT
   ========================================================================== */
/* Forces the video container to break out of Joomla's component grid constraints */
.ratio.ratio-16x9 {
    width: 100vw !important;
    position: relative;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   3. MENU ITEMS
   ========================================================================== */
/* Target the modern menu class and strip out the currentColor inheritance */
.mod-menu a {
    color: var(--site-teal-accent) !important; 
    font-weight: 600;
}

/* Ensure the investor links change to clear charcoal when hovered over */
.mod-menu a:hover,
.mod-menu a:focus {
    color: var(--site-dark-charcoal) !important;
    font-weight: 600;  
}

/* Target the chevron wrapper button specifically */
.mod-menu__toggle-sub {
    color: var(--site-teal-accent) !important;
}

/* Ensure the chevron matches the link charcoal color when hovered */
.mod-menu a:hover ~ .mod-menu__toggle-sub,
.mod-menu__toggle-sub:hover {
    color: var(--site-dark-charcoal) !important;
}
/* ==========================================================================
   4. BUTTONS & INTERACTIVE FORMS
   ========================================================================== */
/* Target the primary login/logout buttons globally and within the login module */
.btn-primary, 
#login-form .btn, 
.com-users-login__submit .btn {
    background-color: var(--site-teal-accent) !important;
    border-color: var(--site-teal-accent) !important;
    color: var(--site-header-bg) !important; /* Off-white text for clean contrast */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Hover & Focus States: Shift to high-contrast charcoal */
.btn-primary:hover, 
.btn-primary:focus,
#login-form .btn:hover, 
#login-form .btn:focus,
.com-users-login__submit .btn:hover {
    background-color: var(--site-dark-charcoal) !important;
    border-color: var(--site-dark-charcoal) !important;
    color: var(--site-header-bg) !important; /* Keeps text highly legible */
}
.category-lists > .category-desc {
  border: solid 1px #d8d8d8;
}
.itemid-118 .page-header, .itemid-128 .page-header, .itemid-139 .page-header, .itemid-140 .page-header {
  text-align: center;
}
.form-check-input {
  background-color: #fff;
  border: solid 1px #212529;
}
p.t2portal {
  font-size:1.5em;
}
/*=================*/
/* 1. Desktop & Large Displays: Expand the header height to match the full 275px kart height + 40px top offset */
.container-header {
    min-height: 320px !important; 
}

/* 2. Your working desktop absolute configuration layout */
#mod-custom122 {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 40px !important; 
    z-index: 999 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    text-align: center !important;
}

/* 3. Handling wide image scaling natively across all desktop viewports */
#mod-custom122 img {
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important; 
    max-width: 800px !important; 
    height: auto !important; 
}

/* 4. Fix for 1440x900 Laptops: Slightly scale down the max-width to keep the height perfectly inside the header boundaries */
@media (max-width: 1440px) and (min-width: 1200px) {
    .container-header {
        min-height: 295px !important; /* Locks a clean, proportional height frame for laptops */
    }
    #mod-custom122 img {
        max-width: 720px !important;  /* Gently caps the image width so the height safely decreases to fit */
    }
}

/* 5. The iPad Layout Block: Absolute and anchored right of the logo */
@media (max-width: 1199px) and (min-width: 768px) {
    .container-header {
        min-height: 220px !important; 
    }
    
    #mod-custom122 {
        position: absolute !important;
        left: auto !important;       
        right: 2% !important;        
        transform: none !important;  
        top: 40px !important;        
        width: 50% !important;       
        max-width: 450px !important; 
    }
    
    #mod-custom122 img {
        width: 100% !important;      
        height: auto !important;
    }
}

/* 6. Small Mobile Phones (e.g., iPhone 11/12) - Returns to default stacking */
@media (max-width: 767px) {
    .container-header {
        min-height: auto !important; 
    }
    #mod-custom122 {
        position: static !important;
        transform: none !important;
        margin: 10px auto !important;
        padding: 0 !important;
        width: 100% !important;
    }
    #mod-custom122 img {
        width: 85% !important; 
        max-width: 320px !important; 
    }
}
/*===============*/