@charset "UTF-8";
/* CSS Document */

 /* --- Header Row Setup (Perfect 50/50 Split) --- */
   /* --- Header Row Setup --- */
.header-row {
  margin-bottom: 25px;
  width: 100%;
}

/* --- Adjusted Columns for Wrapping Safety --- */


    /* --- New Image Slot Above the Dropdown --- */
    .menu-image-slot {
      width: 100%;
      margin-bottom: 10px; /* Gap between your custom image and the dropdown button */
        display: none;
    }

    .menu-image-slot img {
      display: block;
      width: 100%;         /* Stretches exactly to the width of the column */
      height: auto;
     
    }

    /* --- JQUERY DROPDOWN MENU STYLES --- */
    .dropdown-menu-container {
      position: relative;
      text-align: left;
      width: 95%;
        font-family: "Montserrat", sans-serif;
        margin-left: 5%;
    }

    .dropdown-trigger-btn {
      background-color: #d6262b;
      color: #fff;
      border: none;
      padding: 12px 20px;
      font-size: .9rem;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between; /* Pushes arrow text indicator to the right side */
      width: 100%;                    /* Fits matching 50% layout constraints */
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      transition: background-color 0.2s;
        background-image: url("images/background.jpg"); background-size: 20% auto ;
    }

    .dropdown-trigger-btn:hover {
      background-color: #000000;
    }

    .dropdown-trigger-btn::after {
      content: '▼';
      font-size: 0.7rem;
      color: #fff;
    }

    .dropdown-links-list {
      display: none; 
      position: absolute;
      top: 110%;
      left: 0;
      background-color: #d6262b;
      width: 100%; /* Matches dropdown width constraint */
      list-style: none;
      border-radius: 6px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
      z-index: 100;
      overflow: hidden;
        background-image: url("images/background.jpg"); background-size: 20% auto ;
    }

    .dropdown-links-list li a {
      display: block;
      padding: 12px 16px;
      color: #fff;
      text-decoration: none;
      font-size: .9rem;
      border-bottom: 1px solid #000000;
      transition: background-color 0.2s, color 0.2s;
        font-weight: 600;
        
       
    }

    .dropdown-links-list li:last-child a {
      border-bottom: none;
    }

    .dropdown-links-list li a:hover {
      background-color: #000000;
      color: #fff;
    }

/* ==========================================================================
   1. BASE STYLES (Mobile First) Applies to all screens by default (0px to 767px)
   ========================================================================== */

.logo-column {width: 60%;float: left; margin-right: 20%; margin-left: 20%; text-align: center;}
.right-header-column {padding-top: 0px;width: 80%;float: left;margin-right: 10%; margin-left: 10%;}
.logo-column img.logo {width: 100%;}
.logo-column img.logo {transition: all .5s;} 
.logo-column img.logo:hover {width: 105%; } 



/* ==========================================================================
   2. TABLET BREAKPOINT (768px) Applies to screens 768px wide and up (e.g., iPads, portrait tablets)
   ========================================================================== */
@media (min-width: 768px) {

.logo-column {width: 50%;float: left; margin-right: 2%; margin-left: 0%;}
.right-header-column {padding-top: 25px;width: 48%;float: left;margin-right: 0%; margin-left: 0%;}
.dropdown-trigger-btn {font-size: 1.2rem;}
.dropdown-links-list li a {font-size: 1.2rem;}
.menu-image-slot {display: block;}

}


/* ==========================================================================
   3. DESKTOP BREAKPOINT (1024px) Applies to screens 1024px wide and up (e.g., Laptops, landscape tablets)
   ========================================================================== */
@media (min-width: 1024px) {

.logo-column {width: 50%;float: left; margin-right: 2%; margin-left: 0%;}
.right-header-column {padding-top: 25px;width: 48%;float: left;margin-right: 0%; margin-left: 0%;}
    
}


/* ==========================================================================
   OPTIONAL: LARGE / ULTRA-WIDE DESKTOP (1200px or 1400px) Applies to large monitors to prevent layouts from stretching infinitely
   ========================================================================== */
@media (min-width: 1200px) {
.logo-column {width: 40%;float: left; margin-right: 2%; margin-left: 0%;}
.right-header-column {padding-top: 25px;width: 58%;float: left;margin-right: 0%; margin-left: 0%;}

    
}