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

@import "blydstvo.css";
.table {  border: thin #A18C60 solid}
.upperleter {  fGeneva,Arial,Helvetica,sans-serif; font-size: 24px; color: #ECE67B; font-weight: 400; text-indent: 5pt; clip:   rect(   ); margin-left: 30px; float: left; margin-right: 20px; margin-bottom: 20px}
.about {  
  font-family: Geneva, Arial, Helvetica, sans-serif; 
  font-size: 16px; /* Increased from 13px */
  font-style: normal; 
  line-height: 1.6; /* Added spacing between lines for readability */
  font-weight: 500; 
  color: #552B00; /* Changed from yellow/white to brown */
  float: left; 
  margin: 10px 20px; 
  text-transform: none; 
  text-decoration: none;
  
  /* CRITICAL: Fix for text wrapping */
  display: block;
  width: 95%; /* Ensures it stays within its container */
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* Fix for the bold headers within the FAQ */
.about b {
  font-size: 18px;
  display: inline-block;
  margin-top: 10px;
  color: #552B00;
}.contact {  font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 20px; font-style: normal; font-weight: 500;color: #552B00; text-transform: uppercase; font-variant: normal; line-height: normal; text-decoration: none}
.contact_small { font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-weight: 500; color: #552B00; text-transform: uppercase; font-variant: normal; text-decoration: none ; letter-spacing: 2pt; line-height: normal}
.contact_small_link { font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-weight: 500; color: #ECE482; text-transform: uppercase; font-variant: normal; line-height: normal; text-decoration: none }
.image {  background-image: url(students/thumb/pianotuner_greg.jpg); background-repeat: no-repeat; background-position: left top}
.image_botom { background-image: url(students/thumb/pianotuner_greg.jpg); background-repeat: no-repeat; background-position: right bottom}
.policy {  font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; line-height: normal; font-weight: 400; color: #552B00;text-decoration: none; text-align: left; white-space: normal; width: 100%; margin: 0; padding: 0;}
.uppercase { font-family: Geneva,Arial,Helvetica,sans-serif;font-size: 16px; font-style: normal; line-height: normal; font-weight: bold; color: #ECE482; text-decoration: none; text-align: left; white-space: normal; width: 100%; margin: 0; padding: 0; text-transform: uppercase}
.ats .about { font-variant: normal; padding:0 15px; color: #552B00;}

.table td a.mailto{color: #552B00;}
.table td a{color: #fff;}
.table td a.mailto:hover{ color:#fff;}

/* Desktop - Fix navigation widths - UNIFORM FONT SIZE */
.table tr[align="LEFT"][valign="TOP"] td {
  white-space: nowrap;
  padding: 8px 5px;
  font-size: 13px;
}

/* Ensure all navigation items display */
.table tr[align="LEFT"][valign="TOP"] {
  display: table-row;
}

.table tr[align="LEFT"][valign="TOP"] td {
  display: table-cell;
  min-width: 80px;
}

/* Fix content table width */
.policy, .uppercase {
  width: 100% !important;
}

.policy td[bgcolor="#FFE2A6"] {
  padding: 15px 20px !important;
}

/* Constrain gallery table to prevent excessive vertical space */
.table td table table[width="500"] {
  height: auto !important;
  max-height: 740px;
}

.table td table table[width="500"] td[align="CENTER"][rowspan="11"] {
  vertical-align: top !important;
}

/* Constrain main door image on desktop - extend to bottom of thumbnail column */
.table td table table[width="500"] img[name="target"] {
  max-height: 540px;
  height: 540px;
  width: auto;
  object-fit: contain;
}

/* Reduce padding around door image */
.table td table table[width="500"] a[onclick*="target"] {
  display: inline-block;
  line-height: 0;
}

/* Reduce padding on inner content table */
.table td table td[bgcolor="#FFE2A6"] {
  padding: 8px !important;
}

/* Tighten gallery spacing */
.table td table table[width="500"] td img[vspace] {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

/* Reduce contact section spacing */
.table td table p {
  margin: 6px 0;
}

.table td table br {
  line-height: 0.8;
}

/* Mobile Responsive Styles */
@media only screen and (max-width: 767px) {
  .table {
    width: 100% !important;
    min-width: unset !important; /* Remove the minimum width constraint */
    overflow-x: auto !important; /* Allow horizontal scrolling if needed */
    box-sizing: border-box;
  }

  .table {
    width: 100% !important;
    min-width: 821px !important;
  }
  
  /* Keep navigation row as table layout on mobile - UNIFORM FONT SIZE */
  .table tr[align="LEFT"][valign="TOP"] {
    display: table-row !important;
  }
  
  .table tr[align="LEFT"][valign="TOP"] td {
    display: table-cell !important;
    font-size: 11px !important;
    padding: 5px 2px !important;
    white-space: nowrap !important;
  }
  
  /* CRITICAL: Constrain gallery on mobile to match desktop proportions */
  .table td table table[width="500"] {
    height: auto !important;
    max-height: 400px !important;
  }
  
  /* Reduce main door image size on mobile - match thumbnail column height */
  .table td table table[width="500"] img[name="target"] {
    max-height: 320px !important;
    height: 320px !important;
    max-width: 250px !important;
    width: auto !important;
    object-fit: contain;
  }
  
  /* Reduce thumbnail spacing */
  .table td table table[width="500"] img[width="72"] {
    width: 55px !important;
    height: auto !important;
    margin: 1px 0 !important;
  }
  
  /* Reduce vertical spacing in gallery table */
  .table td table table[width="500"] td {
    padding: 1px !important;
  }
  
  .table td table table[width="500"] tr td[rowspan] {
    padding: 3px 2px !important;
  }
  
  /* Remove vspace from images */
  .table td table table[width="500"] img[vspace] {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
  }
  
  /* Reduce padding on content areas */
  .table td table td[bgcolor="#FFE2A6"] {
    padding: 5px !important;
  }
  
  /* Tighten up contact section spacing */
  .contact {
    font-size: 16px !important;
    margin: 4px 0 !important;
    line-height: 1.1 !important;
  }
  
  .contact_small {
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: 1pt !important;
  }
  
  /* Reduce paragraph spacing */
  .table td table p {
    margin: 5px 0 !important;
  }
  
  /* Reduce BR line height */
  .table td table br {
    line-height: 0.5 !important;
  }
  
  /* Adjust content table */
  .table td table {
    width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box;
  }
  
  .table td table td {
    padding: 3px !important;
  }
  
  /* Fix iframe */
  #signup-form iframe {
    width: 100% !important;
    max-width: 100%;
    height: 821px !important;
  }
  
  /* Adjust policy and uppercase classes for mobile */
  .policy,
  .uppercase {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    box-sizing: border-box;
  }
  
  /* Make images responsive */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Social icons spacing */
  .social {
    margin: 8px 0 !important;
  }
  
  .social img {
    height: 22px !important;
  }
}
/* Fix the contact/gallery page specifically */
.table tr:nth-child(3) td > table[width="100%"] {
  width: 821px !important;
  max-width: 821px !important;
  table-layout: fixed;
}

/* Constrain the yellow content box */
.table tr:nth-child(3) td > table[width="100%"] table[bgcolor="#FFE2A6"] {
  width: 100% !important;
  max-width: 650px !important;
  margin: 0 auto;
}

/* Fix the 500px gallery table */
.table tr:nth-child(3) td table[bgcolor="#FFE2A6"] table[width="500"] {
  width: 450px !important;
  max-width: 450px !important;
  height: auto !important;
}

/* Constrain the main door image */
.table tr:nth-child(3) td table[bgcolor="#FFE2A6"] img[name="target"] {
  max-width: 320px !important;
  max-height: 400px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* Fix thumbnail column */
.table tr:nth-child(3) td table[bgcolor="#FFE2A6"] img[width="72"] {
  width: 60px !important;
  height: auto !important;
}

/* Style the application form page with tan box like contact page */
.table tr:nth-child(3) td table[width="700"] {
  width: 700px !important;
  max-width: 700px !important;
  background-color: #FFE2A6;
  margin: 20px auto !important;
  border-radius: 0;
  box-sizing: border-box;
}

.table tr:nth-child(3) td table[width="700"] td {
  background-color: #FFE2A6;
  padding: 20px !important;
}

.table tr:nth-child(3) td table[width="700"] td#signup-form {
  padding: 20px !important;
}

/* Keep iframe styling */
#signup-form iframe {
  width: 100% !important;
  max-width: 660px;
  height: 821px !important;
  border: none;
}
/* Fix Philosophy page text overflow */
.table tr:nth-child(3) td > table[width="100%"] {
  width: 821px !important;
  max-width: 821px !important;
  table-layout: fixed;
  box-sizing: border-box;
}

.table tr:nth-child(3) td > table[width="100%"] td[bgcolor="#FFE2A6"] {
  max-width: 560px !important;
  padding: 20px !important;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Fix the text inside philosophy page */
.ats .about {
  font-variant: normal;
  padding: 0 15px !important;
  color: #552B00;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100%;
  display: block;
}

/* Ensure image doesn't push content */
.table tr:nth-child(3) td > table[width="100%"] img[width="475"] {
  max-width: 100% !important;
  height: auto !important;
}

/* Fix Curriculum page - constrain table and text */
.table tr:nth-child(3) td > table[width="100%"][bgcolor="#FFE2A6"] {
  width: 700px !important;
  max-width: 700px !important;
  margin: 20px auto !important;
  box-sizing: border-box;
}

.table tr:nth-child(3) td > table[width="100%"][bgcolor="#FFE2A6"] td {
  padding: 15px 30px !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  box-sizing: border-box;
}

/* Fix curriculum text classes */
.cxont {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #552B00;
  line-height: 1.6;
  padding: 10px 0 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  display: block;
}

.tl {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #552B00;
  padding: 15px 0 8px 0 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  display: block;
}

/* Fix Social Justice page and similar pages - match other pages at 700px */
.table tr:nth-child(3) td > table[width="100%"] td[width="70%"][bgcolor="#FFE2A6"] {
  width: 700px !important;
  max-width: 700px !important;
  padding: 20px 30px !important;
  box-sizing: border-box;
}

/* Ensure parent table is properly sized */
.table tr:nth-child(3) td > table[width="100%"] {
  width: 821px !important;
  max-width: 821px !important;
  margin: 0 auto !important;
}

/* Constrain images and iframes inside */
.table tr:nth-child(3) td[bgcolor="#FFE2A6"] img,
.table tr:nth-child(3) td[bgcolor="#FFE2A6"] iframe {
  max-width: 100% !important;
  height: auto !important;
}

/* Fix text wrapping */
.table tr:nth-child(3) td[bgcolor="#FFE2A6"] .about {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  display: block;
}
/* Make YouTube videos taller on video testimonials and similar pages */
.table tr:nth-child(3) td[bgcolor="#FFE2A6"] iframe[src*="youtube.com"] {
  width: 600px !important;
  height: 450px !important; /* Increased from 315px to 450px */
  max-width: 100%;
}
/* Make Nonprofit Events dropdown wider */
.table tr[align="LEFT"][valign="TOP"] td.tabout.abou ul {
  background-color: #A02205;
  padding: 10px 15px;
  margin: 0;
  min-width: 220px !important;
  width: 220px !important;
  white-space: normal;
  position: absolute;
  left: 0;
  top: 100%;
  list-style: none;
  z-index: 1000;
  box-sizing: border-box;
}

.table tr[align="LEFT"][valign="TOP"] td.tabout.abou {
  position: relative;
}

.table tr[align="LEFT"][valign="TOP"] td.tabout.abou ul li {
  padding: 5px 10px;
  white-space: normal;
  word-wrap: break-word;
}

.table tr[align="LEFT"][valign="TOP"] td.tabout.abou ul li a {
  color: #fff;
  text-decoration: none;
  display: block;
}
/* Fix Camp page - beige box same size as other pages */
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] {
  width: 700px !important;
  max-width: 700px !important;
  margin: 20px auto !important;
  background-color: #FFE2A6 !important;
  padding: 20px !important;
  box-sizing: border-box;
}

/* Fix text wrapping and colors on camp page */
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] td {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  box-sizing: border-box;
  padding: 15px !important;
}

/* Change yellow text to brown */
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] td[style*="#eaff00"],
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] p[style*="#eaff00"],
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] h3[style*="#eaff00"] {
  color: #552B00 !important;
}

/* Fix other text colors */
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] h3[style*="#bd7314"] {
  color: #552B00 !important;
}

.table tr:nth-child(3) td > table[bgcolor="#989ca3"] p[style*="#bd0001"] {
  color: #552B00 !important;
}

.table tr:nth-child(3) td > table[bgcolor="#989ca3"] p {
  color: #552B00 !important;
}

/* Constrain images */
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] img {
  max-width: 100% !important;
  height: auto !important;
}

/* Constrain iframe */
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] iframe {
  max-width: 100% !important;
  height: auto !important;
}
/* Fix Camp page - beige box same size as other pages */
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] {
  width: 700px !important;
  max-width: 700px !important;
  margin: 20px auto !important;
  background-color: #FFE2A6 !important;
  padding: 20px !important;
  box-sizing: border-box;
  overflow: hidden;
}

/* Fix text wrapping and colors on camp page */
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] td {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  box-sizing: border-box;
  padding: 15px !important;
  max-width: 100%;
}

/* Fix the two-column layout */
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] td[style*="width:42%"] {
  width: 100% !important;
  display: block;
  padding: 10px 15px !important;
}

.table tr:nth-child(3) td > table[bgcolor="#989ca3"] tr td:last-child {
  width: 100% !important;
  display: block;
  padding: 10px 15px !important;
}

/* Change yellow text to brown */
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] td[style*="#eaff00"],
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] p[style*="#eaff00"],
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] h3[style*="#eaff00"] {
  color: #552B00 !important;
}

/* Fix other text colors */
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] h3[style*="#bd7314"] {
  color: #552B00 !important;
}

.table tr:nth-child(3) td > table[bgcolor="#989ca3"] p[style*="#bd0001"] {
  color: #552B00 !important;
}

.table tr:nth-child(3) td > table[bgcolor="#989ca3"] p {
  color: #552B00 !important;
  max-width: 100%;
  word-wrap: break-word !important;
}

/* Constrain images */
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] img {
  max-width: 100% !important;
  height: auto !important;
}

/* Make YouTube video taller */
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] iframe[src*="youtube.com"] {
  max-width: 100% !important;
  width: 640px !important;
  height: 480px !important;
}
/* Fix Camp page - beige box same size as other pages */
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] {
  width: 700px !important;
  max-width: 700px !important;
  margin: 20px auto !important;
  background-color: #FFE2A6 !important;
  padding: 20px !important;
  box-sizing: border-box;
  overflow: hidden;
}

/* Fix text wrapping and colors on camp page */
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] td {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  box-sizing: border-box;
  padding: 15px !important;
  max-width: 100%;
}

/* Fix the two-column layout - keep side by side */
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] tr > td[style*="width:42%"] {
  width: 42% !important;
  display: table-cell !important;
  vertical-align: top !important;
  padding: 10px 15px !important;
}

.table tr:nth-child(3) td > table[bgcolor="#989ca3"] tr > td:last-child {
  width: 58% !important;
  display: table-cell !important;
  vertical-align: top !important;
  padding: 10px 15px !important;
}

/* Change yellow text to brown */
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] td[style*="#eaff00"],
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] p[style*="#eaff00"],
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] h3[style*="#eaff00"] {
  color: #552B00 !important;
}

/* Fix other text colors */
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] h3[style*="#bd7314"] {
  color: #552B00 !important;
}

.table tr:nth-child(3) td > table[bgcolor="#989ca3"] p[style*="#bd0001"] {
  color: #552B00 !important;
}

.table tr:nth-child(3) td > table[bgcolor="#989ca3"] p {
  color: #552B00 !important;
  max-width: 100%;
  word-wrap: break-word !important;
}

/* Constrain images */
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] img {
  max-width: 100% !important;
  height: auto !important;
}

/* Make YouTube video taller */
.table tr:nth-child(3) td > table[bgcolor="#989ca3"] iframe[src*="youtube.com"] {
  max-width: 100% !important;
  width: 640px !important;
  height: 480px !important;
}

/* Mobile adjustments */
@media only screen and (max-width: 767px) {
  /* Stack columns on mobile */
  .table tr:nth-child(3) td > table[bgcolor="#989ca3"] tr > td[style*="width:42%"],
  .table tr:nth-child(3) td > table[bgcolor="#989ca3"] tr > td:last-child {
    width: 100% !important;
    display: block !important;
  }
}

/* Fix Concerts page gallery layout */
.table tr:nth-child(3) td > table[bgcolor="#FFE2A6"] {
  width: 700px !important;
  max-width: 700px !important;
  margin: 20px auto !important;
  padding: 20px !important;
  box-sizing: border-box;
}

/* Center the gallery content */
.table tr:nth-child(3) td > table[bgcolor="#FFE2A6"] tr td {
  text-align: center;
  vertical-align: middle;
  padding: 8px !important;
}

/* Style the heading */
.table tr:nth-child(3) td > table[bgcolor="#FFE2A6"] tr:first-child td {
  padding: 10px 0 20px 0 !important;
}

/* Fix left column thumbnails - equal width */
.table tr:nth-child(3) td > table[bgcolor="#FFE2A6"] tr td:nth-child(1),
.table tr:nth-child(3) td > table[bgcolor="#FFE2A6"] tr td:nth-child(2) {
  width: 160px !important;
  text-align: center;
}

/* Fix center column - main image */
.table tr:nth-child(3) td > table[bgcolor="#FFE2A6"] tr td:nth-child(3) {
  width: 220px !important;
  text-align: center;
  padding: 0 10px !important;
}

/* Fix right column thumbnails - equal width */
.table tr:nth-child(3) td > table[bgcolor="#FFE2A6"] tr td:nth-child(4),
.table tr:nth-child(3) td > table[bgcolor="#FFE2A6"] tr td:nth-child(5) {
  width: 160px !important;
  text-align: center;
}

/* Ensure all thumbnail images are same size */
.table tr:nth-child(3) td > table[bgcolor="#FFE2A6"] img[width="147"] {
  width: 147px !important;
  height: 120px !important;
  display: block;
  margin: 0 auto;
}

/* Main center image sizing */
.table tr:nth-child(3) td > table[bgcolor="#FFE2A6"] img[name="target"] {
  max-width: 320px !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* Remove excess spacing between rows */
.table tr:nth-child(3) td > table[bgcolor="#FFE2A6"] tr td {
  line-height: 1;
}

/* Tighten up the gallery rows */
.table tr:nth-child(3) td > table[bgcolor="#FFE2A6"] tr {
  height: auto !important;
}

/* Repositioning Concerts Gallery to prevent overlap */
.table tr:nth-child(3) td > table[bgcolor="#FFE2A6"] {
  width: 760px !important; 
  max-width: 760px !important;
  margin: 10px auto !important;
  padding: 10px !important;
  border-collapse: separate;
}

/* Ensure the main image doesn't push thumbnails out of the box */
img[name="target"] {
  max-width: 380px !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* Standardize thumbnail display */
/* Prevent layout shifting */
.table tr:nth-child(3) td > table[bgcolor="#FFE2A6"] td {
  vertical-align: top !important;
  height: auto !important;
}
/* ===============================
   POLICY PAGE – TEXT WRAP FIX
   =============================== */

/* Force parent content table to stop expanding */
.table tr:nth-child(3) td > table {
  table-layout: fixed !important;
  width: 100% !important;
}

/* Constrain the beige policy box */
.table tr:nth-child(3) td[bgcolor="#FFE2A6"] {
  width: 70% !important;
  max-width: 560px !important;
  padding: 40px 30px !important;
  box-sizing: border-box !important;
  overflow: hidden;
}

/* Force ALL content inside beige box to wrap */
.table tr:nth-child(3) td[bgcolor="#FFE2A6"] * {
  max-width: 100% !important;
  box-sizing: border-box !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

/* Policy content container */
.policy-content {
  width: 100%;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* Ensure paragraphs and lists never overflow */
.table tr:nth-child(3) td[bgcolor="#FFE2A6"] p,
.table tr:nth-child(3) td[bgcolor="#FFE2A6"] ul,
.table tr:nth-child(3) td[bgcolor="#FFE2A6"] li,
.table tr:nth-child(3) td[bgcolor="#FFE2A6"] b {
  max-width: 100%;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Mobile safety net */
@media only screen and (max-width: 767px) {
  .table tr:nth-child(3) td[bgcolor="#FFE2A6"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 15px !important;
  }
}

/* ===== MOBILE DROPDOWN FIX - Add to end of style.css ===== */

/* Make dropdowns work on touch devices with single tap */
@media only screen and (max-width: 767px) {
  /* Hide dropdowns by default */
  .tabout ul {
    display: none;
    position: absolute;
    z-index: 100;
    background: #A02205;
    padding: 6px 8px 14px 22px;
    text-align: left;
    opacity: 0.9;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    margin-top: 6px;
  }
  
  /* Show dropdown when parent has 'active' class */
  .tabout.active ul {
    display: block !important;
  }
  
  /* Ensure hover still works but doesn't interfere */
  .tabout:hover ul {
    display: block;
  }
}

/* Desktop - keep existing hover behavior */
@media only screen and (min-width: 768px) {
  .tabout:hover ul {
    display: block;
  }
}