/*
Theme Name: Good Health Acupuncture
Description: Template for GoodHealth Acupuncture Website
Author: Jeremy Smeltzer
Version: 1.7
Tags: Widgets, TwentyTen

Refactored: 2025-09-19 - Preserving all visual design

CSS Architecture:
- Mobile-first responsive design with breakpoints at 768px, 1024px
- Uses CSS custom properties for consistent theming
- Minimized !important declarations through proper specificity
- Desktop styles (1024px+) reset mobile transformations and positioning
*/

/* =====================================
   TABLE OF CONTENTS
   1. CSS Variables
   2. Reset/Base Styles  
   3. Layout Structure
   4. Navigation Components
   5. Content Components
   6. Sidebar Components
   7. Form Components
   8. Utility Classes
   9. Media Queries - Tablet (768px-1023px)
   10. Media Queries - Desktop (1024px+)
   11. WordPress Plugin Overrides
   12. IE11/Legacy Browser Fixes
   ===================================== */

/* =====================================
   1. CSS VARIABLES
   ===================================== */

:root {
  /* Theme Colors */
  --primary-blue: #0078ae;
  --primary-blue-dark: #006f94;
  --primary-green: #8dc63f;
  --light-blue-bg: #d8f3ff;
  --light-green-bg: #b4e075;
  --light-green-hover: #d3eead;
  --text-gray: #666;
  --border-gray: #ddd;

  /* Layout Constants */
  --logo-margin-offset: -15px;
  --mobile-close-btn-top: 48px;
  --mobile-header-gap: 70px;

  /* Spacing Scale */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;

  /* Typography Scale */
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;

  /* Layout */
  --border-radius: 3px;
  --touch-target-min: 44px;
  --content-max-width: 1000px;
  --mobile-menu-top-spacing: 110px; /* Space for close button + padding */
}

/* =====================================
   2. RESET/BASE STYLES
   ===================================== */

p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
form,
img {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  margin: 0px;
  padding: 0px;
  background-color: #cacaca;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px; /* IE11 fallback */
  font-size: var(--font-size-base);
  color: #333;
}

/* =====================================
   3. LAYOUT STRUCTURE
   ===================================== */

.clear {
  clear: both;
}
.algin-left,
.alignleft {
  float: left;
  margin: 0 10px 5px 0;
}
.algin-right,
.alignright {
  float: right;
  margin: 0 0 5px 10px;
}

#outerWrapper {
  width: var(--content-max-width);
  min-width: min(325px, 100vw);
  margin: 0 auto;
}
#primaryNav {
  border-top: 5px solid var(--primary-green);
  background: url(images/bg-nav.jpg) no-repeat;
  overflow: hidden;
}

/* =====================================
   4. NAVIGATION COMPONENTS
   ===================================== */

#primaryNav ul,
#secondaryNav ul {
  font-size: 12px;
  list-style: none;
  float: right;
  text-transform: uppercase;
}
#primaryNav ul li,
#secondaryNav ul li {
  position: relative;
  float: left;
  margin-left: 14px;
}
#primaryNav ul li {
  min-width: 65px;
}
#primaryNav ul li #menu-item-268 {
  min-width: 104px;
}
#primaryNav ul li #menu-item-267 {
  min-width: 68px;
}
#primaryNav ul li a {
  display: block;
  padding: 0 14px 0 14px;
  line-height: 45px;
  text-decoration: none;
  color: #fff;
  background: #0078ae; /* IE11 fallback */
  background: var(--primary-blue);
}
#primaryNav ul li a:active,
#primaryNav ul li a:hover {
  background: #006f94; /* IE11 fallback */
  background: var(--primary-blue-dark);
  outline: none;
}

#primaryNav ul li a:focus {
  background: #006f94; /* IE11 fallback */
  background: var(--primary-blue-dark);
  box-shadow: inset 0 -3px 0 #fff;
  outline: none;
}

#primaryNav ul li.current-menu-parent a,
#primaryNav ul li.current_page_item a,
#primaryNav ul li.current_page_parent a,
#primaryNav ul li.current-page-ancestor a,
#primaryNav ul li.on a {
  background: var(--primary-blue-dark);
}
#secondaryNav {
  /* background: url(images/bg-sub-nav.jpg) no-repeat top right; */
  background: var(--light-green-bg);
  width: 590px;
  float: right;
  overflow: hidden;
  border-bottom-left-radius: 20px;
}
#secondaryNav ul {
  float: left;
}

#secondaryNav ul li {
  margin-left: 14px;
  margin-right: 0;
}

#secondaryNav ul li a {
  display: block;
  padding: 0 14px 0 14px;
  line-height: 45px;
  text-decoration: none;
  color: #015c7a;
  text-transform: uppercase;
}
#secondaryNav ul li a:active,
#secondaryNav ul li a:hover,
#secondaryNav ul li a.on {
  background: var(--light-green-hover);
  outline: none;
}

#secondaryNav ul li a:focus {
  background: var(--light-green-hover);
  box-shadow: inset 0 -3px 0 #015c7a;
  outline: none;
}

#secondaryNav ul li:first-child a {
  /* background: #c4e893 url(images/bg-sub-nav-link1.jpg) no-repeat; */
  background: var(--light-green-bg);
  padding-left: 22px;
}
#secondaryNav ul li:first-child a:hover,
#secondaryNav ul li:first-child a.on {
  /* background: #d3eead url(images/bg-sub-nav-link1-on.jpg) no-repeat; */
  background: var(--light-green-hover);
  outline: none;
}

#secondaryNav ul li:first-child a:focus {
  /* background: #d3eead url(images/bg-sub-nav-link1-on.jpg) no-repeat; */
  background: var(--light-green-hover);
  box-shadow: inset 0 -3px 0 #015c7a;
  outline: none;
}

#pageBackground {
  background: #fff url(images/bg-body.jpg) no-repeat;
}
.home #pageBackground {
  background: #fff url(images/bg-body-home.jpg) no-repeat;
}
#logo {
  float: left;
  margin: 30px 0 0 20px;
}

#mainContent {
  /* background-color: #fff; */
  width: 605px;
  max-width: 650px;
  float: left;
  margin-left: 60px;
  margin-bottom: 50px;
  margin-top: 70px;
}
.home #mainContent {
  margin-top: 0;
  max-width: 605px;
}
#slideshow {
  margin-bottom: 20px;
}

#mainContent h1,
#mainContent h2,
#mainContent p {
  margin-bottom: 25px;
}
#mainContent form p {
  margin-bottom: 0;
}

#mainContent p {
  line-height: 1.6;
}

/* =====================================
   5. CONTENT COMPONENTS
   ===================================== */

#mainContent h1,
#mainContent h2 {
  font-size: var(--font-size-xl);
  color: var(--primary-blue);
  margin-bottom: var(--spacing-sm);
}

#mainContent h1.section-title {
  margin-bottom: 0;
}
#mainContent a:link {
  color: var(--primary-blue);
  text-decoration: none;
}
body #outerWrapper #mainContent a:visited {
  color: #8ec63f;
}
#mainContent a:hover {
  text-decoration: underline;
}
#mainContent ul,
#mainContent ol {
  list-style-position: outside;
  margin: 0 0 20px 30px;
  padding-left: 10px;
}
#mainContent ul li,
#mainContent ol li {
  margin-bottom: 8px;
  line-height: 1.6;
}

#mainContent h1.tableHeader {
  background: #0c77ad;
  color: #fff;
  text-transform: uppercase;
  font-size: 25px;
  padding: 7px;
  text-align: center;
  margin-bottom: 0;
}

#mainContent ul.faq-questions,
#mainContent ul.faq-answers {
  list-style: none;
  color: var(--primary-blue);
  margin: 0;
}
#mainContent ul.faq-answers {
  margin-top: 30px;
  color: #000;
}
#mainContent ul.faq-answers li {
  margin-bottom: 35px;
}
#mainContent ul.faq-answers li h2 {
  font-size: 22px;
  color: var(--primary-blue);
  font-weight: bold;
  margin-bottom: 15px;
  display: block;
  line-height: 1.3;
}
#mainContent ul.faq-answers li p {
  margin-bottom: 7px;
}

#mainContent a.pdf-download {
  display: block;
  background: url(images/pdf-icon.jpg) no-repeat;
  line-height: 36px;
  padding-left: 45px;
  margin-bottom: var(--spacing-sm);
}

body .wpcf7-not-valid-tip {
  display: none;
}

.wpcf7-checkbox .wpcf7-list-item {
  margin: 0;
}

.wpcf7-checkbox .wpcf7-list-item label {
  display: flex;
  align-items: center;
}

.wpcf7-checkbox .wpcf7-list-item-label {
  padding-left: 5px;
}

#testimonialsMain {
  margin-top: 35px;
}
#testimonialsMain .testimonial {
  margin-bottom: 35px;
}
#testimonialsMain .testimonial p {
  margin-bottom: 7px;
}
#testimonialsMain .testimonial .test-author {
  font-weight: bold;
}

/* =====================================
   6. SIDEBAR COMPONENTS
   ===================================== */

#sidebar {
  background: #fff;
  margin-right: 55px;
  margin-bottom: 50px;
  width: 218px;
  float: right;
}
.button {
  margin-bottom: var(--spacing-sm);
  display: block;
}
#sidebarTestimonial {
  background: #fff url(images/butterfly-watermark.gif) no-repeat center;
  /* background: #d8f3ff; */
  max-width: 300px;
  min-height: 160px;
  margin: auto;
}
#sidebarTestimonial ul,
#sidebarTestimonial ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.watermark {
  background: url(images/butterfly-watermark.gif) no-repeat;
}
h2.testimonial {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  color: var(--text-gray);
  font-size: var(--font-size-xl);
  font-weight: normal;
  padding-top: 10px;
  padding-bottom: 12px;
  margin-top: 20px;
  height: 155px;
}
h2.testimonial a {
  color: var(--text-gray);
  text-decoration: none;
}
.bio {
  background: var(--light-blue-bg);
  text-align: center;
}
.bio img {
  border-bottom: 4px solid #0078ae;
  margin-bottom: var(--spacing-sm);
  max-width: 100%;
  height: auto;
}
.bio h3 {
  color: #006f94;
  font-size: 15px;
}
.bio h4 {
  color: var(--text-gray);
  font-size: var(--font-size-base);
}
body #outerWrapper .bio p {
  padding: 10px;
  font-size: var(--font-size-base);
  color: var(--text-gray);
  margin-bottom: 0;
}

#sidebar .widget-title {
  display: none;
}
#sidebar .widget-container {
  margin-bottom: 20px;
}

/* Footer */
#footer {
  width: 650px;
  padding: 20px 20px 25px 20px;
  margin: auto;
  border-top: 2px solid #0078ae;
  text-align: center;
  background-color: #fff;
  color: var(--text-gray);
}
#footer a {
  color: var(--text-gray);
  text-decoration: none;
}
#footer a:hover {
  text-decoration: underline;
}

#footer .widget-title {
  display: none;
}

/* Misc */
.screen-reader-text {
  display: none;
}

.info-banner {
  background: #b00000;
  color: #fff;
  padding: 30px 40px;
  font-size: 18px;
  line-height: 1.55;
}

/* =====================================
   7. FORM COMPONENTS
   ===================================== */

input[type='text'],
input[type='email'],
input[type='tel'],
textarea,
select {
  width: 100%;
  padding: 10px;
  margin-bottom: var(--spacing-sm);
  border: 1px solid var(--border-gray);
  border-radius: var(--border-radius);
  box-sizing: border-box;
  display: block;
}

/* Form Buttons - Contact Forms */
.wpcf7-form-control.wpcf7-submit,
input[type='submit'],
button[type='submit'] {
  background: #0078ae; /* IE11 fallback */
  background: var(--primary-blue);
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-size: var(--font-size-base);
  font-weight: 600;
  text-transform: uppercase;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  min-height: var(--touch-target-min);
  display: inline-block;
  text-decoration: none;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.wpcf7-form-control.wpcf7-submit:hover,
.wpcf7-form-control.wpcf7-submit:focus,
input[type='submit']:hover,
input[type='submit']:focus,
button[type='submit']:hover,
button[type='submit']:focus {
  background: var(--primary-blue-dark);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  outline: 2px solid var(--light-blue-bg);
  outline-offset: 2px;
  transform: translateY(-1px);
}

.wpcf7-form-control.wpcf7-submit:active,
input[type='submit']:active,
button[type='submit']:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

/* Handle table-based forms */
body .wpcf7-form table {
  width: 100%;
  border: none;
  border-collapse: collapse;
}

body .wpcf7-form table td {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
}

body .wpcf7-form table tr {
  display: block;
  margin-bottom: 15px;
}

/* =====================================
   9. MEDIA QUERIES - TABLET (768px-1023px)
   ===================================== */

/* Base responsive styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

/* Desktop styles (default - maintain existing styles above this point) */

/* Custom breakpoint for background alignment */
@media screen and (min-width: 1000px) and (max-width: 1024px) {
  #pageBackground {
    background-position: right top;
  }

  .home #pageBackground {
    background-position: right top;
  }
}

/* Shared Between Tablet and Mobile Strategy (0px-1023px):
- Stack sidebar underneath main content (similar to mobile)
   - Limit main content and sidebar to 600px max-width and center both
   - Apply blue divider between main content and sidebar sections
   - Use mobile-style sidebar layout with centered content and 75% width images
   - Enhance typography with increased font sizes for better readability
*/
@media screen and (max-width: 1023px) {
  #outerWrapper {
    width: 100%;
    margin: 0;
  }

  /* Main content */
  #mainContent {
    width: calc(100% - 40px);
    max-width: 600px;
    margin: 20px auto 50px auto;
    float: none;
    clear: both;
  }

  #mainContent h1 {
    font-size: 1.5em;
    line-height: 1.35;
  }

  #mainContent h2 {
    font-size: 1.35em;
  }

  /* FAQ answer headings - mobile */
  #mainContent ul.faq-answers li h2 {
    font-size: 1.2em;
  }

  /* Sidebar */
  #sidebar {
    width: calc(100% - 40px);
    max-width: 600px;
    margin: 30px auto 50px auto;
    float: none;
    text-align: center;
  }

  #sidebar .widget-container {
    text-align: center;
    margin-bottom: 50px;
  }

  /* Sidebar images 75% width on tablet */
  #sidebar img {
    width: 75%;
    height: auto;
  }

  /* Sidebar button widget tablet styles */
  #sidebar .widget_text .textwidget {
    text-align: center;
  }

  #sidebar .widget_text .textwidget img.button {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    margin: 0 auto 10px auto;
    padding: 0;
  }

  /* Testimonials in sidebar */
  h2.testimonial {
    font-size: 1.25em;
    height: auto;
    padding: 15px 10px;
    text-align: center;
  }

  #sidebarTestimonial {
    text-align: center;
    max-width: 450px;
  }

  /* Divider between main content and sidebar */
  #mainContent::after {
    content: '';
    display: block;
    width: 90%;
    height: 2px;
    background-color: #0078ae;
    margin: 50px auto 0;
  }

  /* Buttons */
  .button,
  input[type='submit'],
  button {
    min-height: var(--touch-target-min);
    padding: 12px 20px;
    font-size: 18px;
  }

  /* Form buttons on mobile */
  .wpcf7-form-control.wpcf7-submit,
  input[type='submit'],
  button[type='submit'] {
    width: 100%;
    max-width: 280px;
    padding: 15px 20px;
    font-size: 16px;
    margin: 0 auto;
    display: block;
  }

  /* PDF Downloads */
  #mainContent a.pdf-download {
    padding-left: 35px;
    background-size: 25px;
  }

  /* Footer */
  #footer {
    width: 100%;
    margin: 20px 0 0 0;
    padding: 30px;
    font-size: 0.7em;
    line-height: 1.6;
  }

  /* Slideshow */
  #slideshow {
    margin: 0;
    overflow: hidden;
    width: 100%;
  }

  #slideshow img {
    width: 100%;
    height: auto;
    max-width: none;
  }

  #slideshow * {
    max-width: 100%;
    height: auto;
  }

  /* UDS Billboard mobile fixes - Override plugin inline styles (603px x 173px) */
  .home #mainContent #slideshow #uds-billboard-wrapper {
    width: 100% !important; /* Override plugin inline width: 603px */
    height: auto !important; /* Override plugin inline height: 173px */
    aspect-ratio: 3.48/1; /* Maintain consistent aspect ratio based on original 603x173 dimensions */
    /* Fallback for older browsers that don't support aspect-ratio */
    min-height: 120px;
    position: relative;
    background: transparent !important; /* Override plugin background settings */
    overflow: hidden;
    max-width: 100%;
  }

  /* Billboard content elements - Override plugin positioning and sizing */
  .home #mainContent #slideshow #uds-billboard,
  .home #mainContent #slideshow #uds-next-slide,
  .home #mainContent #slideshow #uds-billboard-controls {
    width: 100% !important; /* Override plugin width calculations */
    height: 100% !important; /* Override plugin height calculations */
    top: 0 !important; /* Override plugin top positioning */
    left: 0 !important; /* Override plugin left positioning */
    position: absolute !important; /* Override plugin positioning */
  }

  /* Billboard background image settings - Ensure responsive image display */
  .home #mainContent #slideshow #uds-billboard {
    background-size: contain !important; /* Changed from cover to prevent cropping on mobile */
    background-position: center !important; /* Center images for better mobile viewing */
    background-repeat: no-repeat !important; /* Prevent image repetition */
  }

  .uds-square,
  .uds-column {
    display: none;
  }

  #uds-loader {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* WordPress post images mobile fixes */
  #mainContent .wp-post-image,
  #mainContent .aligncenter {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 10px auto;
  }

  /* Only large content images get responsive treatment */
  #mainContent img {
    max-width: 100%;
    height: auto;
  }

  /* Images wider than 200px get block treatment on mobile */
  #mainContent img[width] {
    width: auto;
  }

  /* Keep small images (like signatures) inline and natural size */
  #mainContent img[width='96'],
  #mainContent img[width='100'],
  #mainContent img[width='120'],
  #mainContent img[width='150'] {
    display: inline !important;
    margin: 0 !important;
    max-width: none !important;
    width: auto !important;
  }

  /* Mobile-specific alignment overrides */
  #mainContent .alignleft,
  #mainContent .alignright {
    float: none;
    display: block;
    max-width: 100%;
    margin: 15px auto 25px auto;
    text-align: center;
  }

  /* Extra spacing for aligned images followed by blue container */
  #mainContent .alignright + * .lightBluBg,
  #mainContent .alignright ~ * .lightBluBg {
    margin-top: 20px;
  }

  /* Exception: keep alignnone (no class) images inline */
  #mainContent .alignnone {
    display: inline !important;
    float: none !important;
    margin: 0 !important;
    text-align: inherit !important;
  }
}

/* Tablet Layout Strategy (768px-1023px):
   - Enhance typography with increased font sizes for better readability
   - Transform secondary navigation to tab-style interface
*/
@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* Typography adjustments for tablet to improve readability */
  body {
    font-size: 22px;
  }

  /* Secondary Navigation - tablet - Tab-style interface */
  #secondaryNav {
    width: 100%;
    float: none;
    border-bottom-left-radius: 0;
    text-align: center;
    margin-bottom: 40px;
    padding: 0;
    background: transparent;
    border-bottom: 3px solid var(--light-green-bg);
  }

  #secondaryNav .sub-menu-toggle {
    display: none;
  }

  #secondaryNav ul {
    float: none;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
  }

  #secondaryNav ul li {
    margin: 0;
    position: relative;
  }

  #secondaryNav ul li a {
    padding: 15px 20px;
    line-height: 1.2;
    font-size: 18px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-green-bg);
    border: 1px solid #a8d146;
    border-bottom: none;
    margin-right: -1px;
    text-decoration: none;
    color: #015c7a;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
  }

  #secondaryNav ul li:first-child a {
    border-top-left-radius: 8px;
    padding-left: 20px;
  }

  #secondaryNav ul li:last-child a {
    border-top-right-radius: 8px;
    margin-right: 0;
  }

  #secondaryNav ul li a:hover {
    background: var(--light-green-hover);
    transform: translateY(-2px);
    z-index: 1;
    border-bottom: 3px solid #015c7a;
  }

  #secondaryNav ul li a:focus {
    background: var(--light-green-hover);
    transform: translateY(-2px);
    z-index: 1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-bottom: 3px solid #015c7a;
  }

  #secondaryNav ul li a.on,
  #secondaryNav ul li.current_page_item a {
    background: var(--light-green-hover);
    border-bottom: 3px solid #015c7a;
    font-weight: 600;
  }
}

/* Mobile Navigation Styles - Mobile-first responsive design
   Note: Some !important declarations used to override inherited Twenty Ten theme styles */
@media screen and (max-width: 767px) {
  body {
    font-size: 18px;
  }

  /* Secondary Navigation - Mobile Dropdown */
  #secondaryNav {
    width: calc(100% - 30px);
    float: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    text-align: left;
    margin: 10px 15px 30px 15px;
    padding: 0;
    background: var(--light-green-bg);
    border: 2px solid #a8d146;
    position: relative;
    overflow: hidden;
  }

  #secondaryNav .sub-menu-toggle {
    display: block;
    width: 100%;
    padding: 15px 20px;
    background: var(--light-green-bg);
    border: none;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    color: #015c7a;
    cursor: pointer;
    border-radius: 0;
    position: relative;
    min-height: 44px;
    transition: background-color 0.2s ease;
    text-transform: uppercase;
  }

  #secondaryNav .sub-menu-toggle:hover,
  #secondaryNav .sub-menu-toggle:focus {
    background: var(--light-green-hover);
    outline: none;
  }

  #secondaryNav .sub-menu-toggle:after {
    content: '\f107';
    font-family: 'FontAwesome';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
  }

  #secondaryNav.active .sub-menu-toggle:after {
    transform: translateY(-50%) rotate(180deg);
  }

  #secondaryNav ul {
    float: none;
    justify-content: flex-start;
    display: none;
    flex-direction: column;
    background: #fff;
    border-top: 1px solid #a8d146;
    margin: 0;
    padding: 0;
  }

  #secondaryNav.active ul {
    display: flex;
  }

  body #outerWrapper #secondaryNav ul li {
    border-bottom: 1px solid #eee;
    float: none;
    position: static;
    border: none;
    border-radius: 0;
    margin-left: 0;
  }

  #secondaryNav ul li:last-child {
    border-bottom: none;
  }

  body #outerWrapper #secondaryNav ul li a {
    padding: 15px 20px;
    line-height: 1.4;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    color: #015c7a;
    background: #fff;
    min-height: 44px;
    transition: background-color 0.2s ease, color 0.2s ease;
    border: none;
    border-radius: 0;
    font-weight: 400;
    transform: none;
    box-shadow: none;
    margin-right: 0;
    margin-left: 0;
  }

  body #outerWrapper #secondaryNav ul li a:hover,
  body #outerWrapper #secondaryNav ul li a:focus {
    background: #f8f9fa;
    color: var(--primary-blue-dark);
    outline: none;
    transform: none;
    box-shadow: none;
  }

  body #outerWrapper #secondaryNav ul li a.on,
  body #outerWrapper #secondaryNav ul li.current_page_item a {
    background: var(--light-green-bg);
    font-weight: 400;
    color: #015c7a;
    position: static;
    transform: none;
    box-shadow: none;
  }

  /* Remove extra left padding from first submenu link on mobile/tablet */
  #secondaryNav ul li:first-child a {
    padding-left: 12px;
  }

  /* Reduce table font size on mobile */
  #mainContent table td {
    font-size: 14px;
  }
}

/* ========================
   HAMBURGER MENU STYLES
   ======================== */

/* Prevent scrolling when mobile menu is open */
body.mobile-menu-open {
  overflow: hidden;
}

/* Mobile Menu Button - Hidden by default, shown on tablet/mobile */
.mobile-menu-btn {
  display: none;
  background: var(--primary-blue-dark);
  border: none;
  color: #fff;
  font-size: 25px;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 4px;
  float: none;
  margin: 20px 0 0 0;
  z-index: 1001;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.mobile-menu-btn:hover,
.mobile-menu-btn:focus {
  background: var(--primary-blue-dark);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.mobile-menu-btn.active {
  background: var(--primary-blue-dark);
}

/* Custom hamburger lines */
.hamburger-lines {
  display: inline-flex;
  flex-direction: column;
  width: 18px;
  height: 14px;
  justify-content: space-between;
  margin-right: 8px;
}

.hamburger-lines span {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 1px;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.mobile-menu-overlay.active {
  display: block;
}

/* Mobile Navigation Styles for Tablet and Mobile */
@media screen and (max-width: 1023px) {
  /* Header container for positioning */
  #headerContainer {
    position: relative;
    height: 20px;
    background: var(--primary-blue);
    border-top: 5px solid var(--primary-green);
  }

  /* Logo and menu button container */
  .header-logo-menu {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 15px 15px 15px 15px;
    min-height: 60px;
    gap: var(--mobile-header-gap);
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* Header layout adjustments for mobile menu */
  #logo {
    float: none !important;
    display: block !important;
    text-align: left !important;
    margin: 20px 0 0 0 !important;
    flex-shrink: 0;
  }

  /* Make primaryNav relative for hamburger positioning */
  #primaryNav {
    text-align: center;
    padding: 0;
    position: relative;
    min-height: 50px;
    background: none !important;
    border-top: none !important;
  }

  /* Show hamburger button */
  .mobile-menu-btn {
    display: block;
  }

  /* Hide regular navigation menu on mobile/tablet */
  #primaryNav ul {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #fff;
    box-shadow: none;
    z-index: 1002;
    overflow: hidden; /* Changed from overflow-y: auto */
    padding: 0; /* Remove padding - will be applied to scrollable container */
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    float: none !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }

  #primaryNav ul li {
    margin: 0;
  }

  #primaryNav ul.active {
    display: flex !important;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    padding: var(--mobile-menu-top-spacing) var(--spacing-md) var(--spacing-lg);
    min-height: 100vh; /* Use min-height instead of fixed height */
    max-height: 100vh; /* Ensure menu doesn't exceed viewport */
    /* Add safe area padding for mobile browsers - extra padding to ensure Contact is visible */
    padding-bottom: calc(
      var(--spacing-lg) + env(safe-area-inset-bottom, 0px) + 80px
    );
  }

  /* Close button for mobile menu - Fixed at top */
  .mobile-menu-close {
    position: fixed;
    top: var(--mobile-close-btn-top);
    right: 15px;
    background: var(--primary-blue-dark);
    border: none;
    color: #fff;
    font-size: 25px;
    padding: 12px 14px;
    cursor: pointer;
    border-radius: 4px;
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1005;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
  }

  /* Fixed header area to prevent menu items from showing through close button */
  .mobile-menu-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mobile-menu-top-spacing);
    background: #fff;
    z-index: 1004;
    pointer-events: auto; /* Allow interaction to block menu clicks */
  }

  #primaryNav ul li a {
    display: block;
    padding: 15px 20px;
    color: var(--primary-blue);
    background: #f8f9fa;
    border: none;
    border-bottom: 1px solid var(--border-gray);
    text-decoration: none;
    font-size: 16px;
    line-height: 1.4;
    border-radius: var(--border-radius);
    margin-bottom: 5px;
    transition: all 0.3s ease;
  }

  #primaryNav ul li a:hover,
  #primaryNav ul li a:focus {
    background: var(--light-blue-bg);
    color: var(--primary-blue-dark);
    box-shadow: none;
    outline: 2px solid var(--primary-blue);
    outline-offset: -2px;
  }

  #primaryNav ul li.current-menu-parent a,
  #primaryNav ul li.current_page_item a,
  #primaryNav ul li.current_page_parent a,
  #primaryNav ul li.current-page-ancestor a,
  #primaryNav ul li.on a {
    background: var(--primary-blue);
    color: #fff;
  }

  /* Secondary Navigation in Mobile Menu - don't show as separate overlay when main mobile menu is open */
  body.mobile-menu-open #secondaryNav.active {
    display: none !important;
  }
}

/* Tablet Hamburger Button - All Tablet Sizes */
@media screen and (max-width: 1023px) and (min-width: 768px) {
  /* Increase hamburger button size by 50% for all tablet view */
  .mobile-menu-btn {
    font-size: 30px;
    padding: 15px 18px;
    min-width: 66px;
    min-height: 66px;
    transition: none;
  }

  #primaryNav ul li a {
    font-size: 20px;
  }
}

/* Large Mobile Optimizations */
@media screen and (max-width: 767px) {
  #logo {
    margin-left: var(--logo-margin-offset) !important;
  }

  .header-logo-menu {
    padding: 8px 15px;
  }
}

/* =====================================
   10. MEDIA QUERIES - DESKTOP (1024px+)
   ===================================== */

/* Desktop Navigation - restore normal navigation on larger screens
   
   CSS Architecture Note:
   This section uses !important declarations intentionally to override mobile-first CSS.
   This is necessary because:
   1. Mobile styles use higher specificity selectors with media queries
   2. Desktop needs to reset mobile transforms, flexbox, and positioning
   3. Alternative would be even more complex selector chains
   
   Future refactoring could use CSS custom properties or CSS-in-JS to reduce !important usage.
*/
@media screen and (min-width: 1024px) {
  .mobile-menu-btn {
    display: none !important; /* Override mobile display */
  }

  #secondaryNav .sub-menu-toggle {
    display: none !important; /* Override mobile display */
  }

  /* Desktop layout reset - override mobile flexbox layout */
  .header-logo-menu {
    display: block !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  #logo {
    float: left !important;
    margin: 30px 0 0 20px !important;
  }

  #logo img {
    max-width: none !important; /* Override mobile size limits */
  }

  #headerContainer {
    height: auto !important;
    background: url(images/bg-nav.jpg) no-repeat !important;
    border-top: 5px solid var(--primary-green) !important;
  }

  #primaryNav {
    background: none !important;
    border-top: none !important;
  }

  /* Reset mobile navigation transforms and positioning */
  #primaryNav ul {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important; /* Reset mobile transforms */
    transition: none !important; /* Disable mobile transitions */
    float: right !important;
  }

  #primaryNav ul li {
    float: left !important;
    margin-left: 14px !important;
  }

  #primaryNav ul li a {
    display: block !important;
    padding: 0 14px !important;
    line-height: 45px !important;
    background: var(--primary-blue) !important;
    color: #fff !important;
  }

  #primaryNav ul li a:hover {
    background: var(--primary-blue-dark) !important;
    outline: none !important;
  }

  #primaryNav ul li a:focus {
    background: var(--primary-blue-dark) !important;
    box-shadow: inset 0 -3px 0 #fff !important;
    outline: none !important;
  }

  #primaryNav ul li.current-menu-parent a,
  #primaryNav ul li.current_page_item a,
  #primaryNav ul li.current_page_parent a,
  #primaryNav ul li.current-page-ancestor a,
  #primaryNav ul li.on a {
    background: var(--primary-blue-dark) !important;
  }

  #secondaryNav {
    position: static !important;
    display: block !important;
    background: var(--light-green-bg) !important;
    width: 590px !important;
    float: right !important;
    overflow: hidden !important;
    border-bottom-left-radius: 20px !important;
    text-align: center !important;
    margin-bottom: var(--spacing-sm) !important;
    padding: 0 !important;
  }

  #secondaryNav ul {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #secondaryNav ul li {
    float: left !important;
    margin-left: 14px !important;
  }

  #secondaryNav ul li a {
    display: block !important;
    padding: 0 14px !important;
    line-height: 45px !important;
    text-decoration: none !important;
    color: #015c7a !important;
  }

  /* Desktop submenu interaction states - override mobile styles */
  #secondaryNav ul li a:hover {
    background: var(--light-green-hover) !important;
    outline: none !important;
  }

  #secondaryNav ul li a:focus {
    background: var(--light-green-hover) !important;
    box-shadow: inset 0 -3px 0 #015c7a !important;
    outline: none !important;
  }

  /* Desktop: Add spacing between right-aligned image and blue container - only for paragraphs */
  #mainContent p.lightBluBg {
    width: calc(100% - 280px) !important;
    display: inline-block !important;
    vertical-align: top !important;
  }

  /* Ensure proper margin for right-aligned images on desktop */
  #mainContent .alignright {
    margin: 0 0 10px 15px !important;
  }

  /* Form buttons on desktop */
  .wpcf7-form-control.wpcf7-submit,
  input[type='submit'],
  button[type='submit'] {
    padding: 12px 24px !important;
    font-size: var(--font-size-base) !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    display: inline-block !important;
  }
}

/* =====================================
   8. UTILITY CLASSES
   ===================================== */

/* Layout Utilities */
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

.content-wrapper .section-title + .grid-3-col {
  margin-top: 0;
}

/* Remove margin from h1 when followed by grid */
.content-wrapper h1.section-title {
  margin-bottom: 0;
}

/* Grid Systems */
.grid-3-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px;
  margin-bottom: 30px;
  border-left: 2px solid #0271aa;
  border-right: none;
  border-bottom: 2px solid #0271aa;
  border-top: none;
}

/* Fix WordPress auto-paragraphs in grid */
.grid-3-col > p {
  display: contents;
}

.grid-3-col > p > .card {
  display: block;
}

/* Direct card children - handle WordPress paragraph wrapping */
.grid-3-col .card {
  grid-column: auto;
}

/* Card Component */
.card {
  background: #edf8fd;
  border-right: 2px solid #0271aa;
  border-top: none;
  border-bottom: none;
  border-left: none;
  padding: 12px 15px;
  margin-bottom: 0;
  font-size: 13px;
  vertical-align: top;
}

.card:nth-child(3),
.grid-3-col > p:nth-child(3) > .card {
  border-right: 2px solid #0271aa;
}

/* Odd columns (1st, 3rd) - light blue background */
.grid-3-col .card:nth-child(odd) {
  background: #edf8fd;
}

/* Even columns (2nd - Digestion) - transparent background */
.grid-3-col .card:nth-child(even),
.grid-3-col > p:nth-child(even) .card {
  background: transparent;
}

.grid-3-col .card:last-child {
  border-right: 2px solid #0271aa;
}

/* Content Blocks */
.content-block {
  margin-bottom: 20px;
}

.content-block:last-child {
  margin-bottom: 0;
}

/* Typography Utilities */
body .section-title {
  background: #0c77ad;
  color: #fff !important;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: bold;
  padding: 20px 7px;
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

/* Light blue background utility class */
.lightBluBg,
body .lightBluBg {
  background: #d8f3ff;
  border: 1px solid #b3e5fc;
  border-radius: 3px;
}

.block-title {
  color: #4a90a4;
  font-size: 15px;
  font-weight: bold;
  margin-top: 16px;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid #4a90a4;
}

.text-center {
  text-align: center;
}

/* Fix for WordPress table cells with lightBluBg */
body td.lightBluBg {
  background: #d8f3ff;
  border: 1px solid #b3e5fc;
  padding: 5px 8px;
}

/* List Utilities */
body .bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Specific override for bullet lists inside cards */
#mainContent .card .bullet-list {
  margin: 0 0 0 10px;
  padding: 0;
}

.bullet-list li {
  position: relative;
  padding-left: 12px;
  margin-bottom: 6px;
  line-height: 1.4;
  color: #333;
  font-size: 13px;
}

.bullet-list li:before {
  content: '•';
  color: #4a90a4;
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* Utility Classes Responsive Design */
@media (max-width: 1023px) {
  .grid-3-col {
    grid-template-columns: 1fr;
    gap: 0px;
    border: none;
  }

  .grid-3-col .card,
  .grid-3-col > p .card {
    border-left: 2px solid #0271aa;
    border-right: 2px solid #0271aa;
    border-bottom: 2px solid #0271aa;
  }

  .grid-3-col .card:first-child,
  .grid-3-col > p:first-child .card {
    border-top: 2px solid #0271aa;
  }

  .section-title {
    font-size: 1.8em;
    padding: 20px 10px;
  }

  .card {
    padding: 15px;
  }

  .block-title {
    font-size: 20px;
  }

  /* Mobile bullet list should match tablet font size */
  #mainContent ul.bullet-list li {
    font-size: 18px;
    line-height: 1.45;
  }

  .content-wrapper {
    padding: 15px 0;
  }
}