/*
========================================
CUSTOM STYLESHEET
Table of Contents
========================================
1. JOK Page Links
2. Donor Grid Layout
    - Base Styles (Bullets, Spacing)
    - Desktop Centering (768px+)
    - Tablet 2x2 Grid (530px - 767px)
    - Mobile 1x1 Stack (max 529px)
3. Page Header
4. Page Section Styles
5. Recipients Section
6. Homepage Styles
7. Ticket Page Styles
8. Introduction Page Styles
9. County Wines Page Styles
10. Wine News Page Styles
11. Silent Auction Page Styles
12. Contact Page Styles
13. MC/Host Page Styles
14. Experts Page Styles
15. Folks Page Styles
16. Associates Page Styles
17. JOK 2024 Page Styles
18. JOK 2023 Page Styles
19. JOK 2022 Page Styles
20. JOK 2021 Page Styles
21. JOK 2020 Page Styles
22. JOK 2019 Page Styles
23. Old JOK page Styles(2016, 2017, 2018)
24. Photo Pages Styling
25. Links Page Styling
26. Footer Styles (footer.php)
27. Mayor's letter
28. Wine News page
29. Link Page Improvements
30. JOK 2025 Winners Section
31. JOK 2025 Image Popup (Universal)
32. Responsive Page Headers
========================================
*/
/* ----------------------------------------
1. JOK Page Links
---------------------------------------- 
*/
/* Replaces style="margin-top: -20px;" on the section */
.about-7 + .choose-us {
  margin-top: -20px;
}
/* Replaces style="padding-bottom: 0px" on the inner div */
.choose-us > div {
  padding-bottom: 0px;
}
/* Replaces style="margin-bottom: 0px" on the <hr> */
.choose-us .row > hr {
  margin-bottom: 0px;
}
/* Targets the new 'jok-page-links' class */
.jok-page-links {
  font-size: 14px;
  list-style: none;
  padding-left: 15px;
  margin-top: 10px;
}
.jok-page-links-no-space {
  font-size: 14px;
  list-style: none;
  padding-left: 15px;
  margin: 0px !important;
}
.jok-page-links-no-margin {
  font-size: 14px;
  list-style: none;
  padding-left: 15px;
  margin-top: 10px;
  margin-bottom: 0px;
}
/* Replaces the <br> tags with proper list item spacing */
.jok-page-links li, .jok-page-links-no-margin li {
  display: block;
  margin: 0px; /* Creates space equivalent to one line skip */
  color: black;
}
/* Automatically add raquo before each li */
.jok-page-links li::before, .jok-page-links-no-margin li::before {
  content: "\00BB\00A0"; /* &raquo;&nbsp; */
  color: black;
}
/* Replaces style="text-decoration: underline" on the <a> tags */
.jok-page-links li a, .jok-page-links-no-margin li a {
  text-decoration: underline;
  color: #8c8c8c;
}
.jok-page-links li a:hover, .jok-page-links-no-margin li a:hover {
  text-decoration: underline;
  color: black;
}
.jok-hr {
  border-color: #e0e0e0;
}
.jok-hr-old {
  border-color: #e0e0e0;
  margin-top: 0px;
}
.jok-hr-links-page {
  border-color: #e0e0e0;
  margin-top: 10px;
  margin-bottom: 10px;
}
/* --- End JOK Page Links List Styles --- */
/* ----------------------------------------
2. Donor Grid Layout
---------------------------------------- 
*/
/* --- START: Donor Grid Adjustments --- */
/* 2.1 - Base Styles (Bullets, Spacing) */
.donor-column {
  margin-bottom: 10px;
  margin-top: 10px
}
.donor-column ul {
  list-style: none;
  padding-left: 0;
  font-size: 14px; /* Moved from inline style */
  margin-bottom: 0px; /* Moved from inline style */
}
.donor-column ul li {
  display: block; /* Forces one item per line */
  position: relative;
  padding-left: 15px;
  margin-bottom: 0px;
}
.donor-column ul li::before {
  content: "\00BB";
  position: absolute;
  left: 0;
  color: inherit;
  font-weight: bold;
}
/* 2.2 - Desktop Centering (768px+) */
@media (min-width: 768px) {
  .donor-column ul {
    display: inline-block;
    text-align: left;
  }
}
/* 2.3 - Tablet 2x2 Grid (476px - 767px) */
@media screen and (min-width: 476px) and (max-width: 767px) {
  .donor-column ul {
    margin-left: 20px;
    display: inline-block;
    text-align: left;
  }
  .donor-column {
    text-align: left;
  }
  .donor-grid-container {
    display: flex;
    flex-wrap: wrap;
  }
}
/* 2.4 - Mobile 1x1 Stack (max 476px) */
@media screen and (max-width: 476px) {
  .donor-column.col-xs-6 {
    width: 100%;
    float: none;
  }
  .donor-column {
    text-align: left;
  }
  .donor-column ul {
    display: block;
    text-align: left;
    margin-left: 20px;
  }
}
/* --- END: Donor Grid Layout --- */
/* ----------------------------------------
3. Page Header
---------------------------------------- 
*/
.color-red {
  color: #c41e3a !important;
}
.page-header {
  font-family: 'Abel', helvetica, sans-serif;
  font-weight: 800;
  color: #272727;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0;
  padding: 0;
  margin-bottom: 0;
  text-align: left;
  font-size: 18px;
  padding-bottom: 10px;
  padding-left: 20px;
  border: none;
}
.page-header-jok {
  font-family: 'Abel', helvetica, sans-serif;
  font-weight: 800;
  color: #272727;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0;
  padding: 0;
  margin-bottom: 0;
  text-align: left;
  font-size: 18px;
  padding-bottom: 10px;
  padding-top: 15px;
  padding-left: 20px;
  border: none;
}
.page-header-photo {
  font-family: 'Abel', helvetica, sans-serif;
  font-weight: 800;
  color: #272727;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0;
  padding: 0;
  margin-bottom: 0;
  text-align: left;
  font-size: 18px;
  padding-bottom: 20px;
  padding-top: 10px;
  padding-left: 20px;
  border: none;
}
.page-header-center {
  font-family: 'Abel', helvetica, sans-serif;
  font-weight: 800;
  color: #272727;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0;
  padding: 0;
  margin-bottom: 0;
  text-align: center;
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  border: none;
}
.page-header-noleft {
  font-family: 'Abel', helvetica, sans-serif;
  font-weight: 800;
  color: #272727;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0;
  padding: 0;
  margin-bottom: 0;
  text-align: left;
  font-size: 18px;
  padding-bottom: 20px;
  padding-left: 0px;
  border: none;
}
.page-header-noleft-two {
  font-family: 'Abel', helvetica, sans-serif;
  font-weight: 800;
  color: #272727;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0;
  padding: 0;
  margin-bottom: 0;
  text-align: left;
  font-size: 18px;
  padding-bottom: 20px;
  padding-left: 0px;
  margin-left: -15px;
  border: none;
}
.page-header-nospace {
  font-family: 'Abel', helvetica, sans-serif;
  font-weight: 800;
  color: #272727;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0;
  padding: 0;
  margin-bottom: 0;
  text-align: left;
  font-size: 18px;
  padding-bottom: 0px;
  padding-left: 0px;
  border: none;
}
.page-header-red {
  font-family: 'Abel', helvetica, sans-serif;
  font-weight: 800;
  color: #c41e3a;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0;
  padding: 0;
  margin-bottom: 0;
  text-align: left;
  font-size: 18px;
  padding-top: 30px;
  padding-bottom: 15px;
  border: none;
}
/*Make it so that there is less padding on screens
smaller than 767px*/
@media (max-width: 768px) {
  .page-header-photo {
    padding-top: 0px;
    padding-left: 0px;
  }
}
.page-header-pb0 {
  font-family: 'Abel', helvetica, sans-serif;
  font-weight: 800;
  color: #272727;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0;
  padding: 0;
  margin-bottom: 0px;
  text-align: left;
  font-size: 18px;
  padding-bottom: 0px;
  padding-left: 20px;
  border: none;
}
/* ----------------------------------------
4. Page Section Styles
---------------------------------------- 
*/
.about-us.about-7 > div {
  padding-top: 20px;
  padding-bottom: 10px;
}
/* ----------------------------------------
5. Recipients Section
---------------------------------------- 
*/
.recipients > div {
  padding-top: 0px;
  padding-bottom: 0px;
  text-align: left;
  background-color: white;
  padding-left: 15px;
  padding-right: 15px;
}
.recipients .row > hr {
  margin: 0px;
}
.recipients .description a {
  text-decoration: underline;
  color: #8c8c8c;
}
.recipients .description a:hover {
  text-decoration: underline;
  color: black;
}
/* ----------------------------------------
6. Homepage Styles
---------------------------------------- 
*/
.sponsors-container {
  height: 500px;
}
@media (max-width: 1919px) {
  .sponsors-container {
    height: 475px;
  }
}
@media (max-width: 1200px) {
  .sponsors-container {
    height: 425px;
  }
}
@media (max-width: 992px) {
  .sponsors-container {
    height: 375px;
  }
}
.sponsors-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  background-color: #F2F2F2;
}
.featured.bg-gray {
  padding: 20px 0;
}
.choose-us#home-video-section {
  padding-top: 20px;
}
@media screen and (min-width: 1200px) {
  .choose-us#home-video-section {
    padding-bottom: 20px;
  }
}
@media screen and (max-width: 1200px) {
  .choose-us#home-video-section {
    padding-bottom: 10px;
  }
}
.video-wrapper-16by9 {
  padding: 56.25% 0 0 0;
  position: relative;
}
.video-wrapper-16by9 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.home-about-text {
  margin-top: 0px;
  padding-top: 10px;
  text-align: left;
}
.main-services-3 .section-padding {
  padding: 10px;
}
.previous-events .section-padding {
  padding: 0px 20px;
}
.previous-events .section-title {
  margin-bottom: 10px;
}
.previous-events .item {
  text-align: center;
}
.previous-events .description {
  text-align: center;
}
.previous-events .page-header-center {
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 0px;
}
.home-emblem-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0px;
}
.home-emblem-container img {
  max-width: 200px;
  height: auto;
}
@media (max-width: 1200px) {
  .home-emblem-container img {
    max-width: 150px;
    height: auto;
  }
}
@media (max-width: 991px) {
  .home-emblem-container img {
    max-width: 75px;
    height: auto;
  }
}
@media (max-width: 690px) {
  .previous-events .page-header-center {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0px;
  }
  .home-emblem-container img {
    max-width: 30px;
    height: auto;
  }
}
/* ----------------------------------------
7. Ticket Page Styles
---------------------------------------- 
*/
/* --- Styles moved from /tickets/index.php <head> --- */
.ticket-container {
  width: 100%;
}
.ticket-heading {
  display: inline-block;
  color: black;
}
.ticket-title {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
  margin-top: 5px;
}
.ticket-item {
  text-align: center;
  margin-bottom: 15px;
  border: none;
}
.ticket-content {
  border-bottom: 1px solid #e0e0e0;
  width: 100%;
}
.ticket-item:last-of-type .ticket-content {
  border-bottom: none;
}
/* MEDIA QUERY for MEDIUM screens (481px to 991px) - 3-column layout */
@media (max-width: 991px) {
  .ticket-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* This will center the block of items */
  }
  .ticket-title {
    flex-basis: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 15px;
  }
  .ticket-item {
    flex-grow: 25;
    flex-shrink: 0;
    flex-basis: 150px;
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  .ticket-content {
    border-bottom: none !important;
    padding-bottom: 0;
  }
  .ticket-item:not(:last-of-type) .ticket-content {
    border-right: 1px solid #e0e0e0;
  }
  .ticket-item .ticket-content {
    height: 100%;
  }
  .ticket-section .description {
    margin-left: 5px;
    margin-right: 5px;
  }
}
/* MEDIA QUERY for SMALL screens (<= 480px) - Stacked vertical layout */
@media (max-width: 676px) {
  .ticket-item {
    flex-basis: 100%;
  }
  .ticket-item:not(:last-of-type) .ticket-content {
    border-right: none;
  }
  .ticket-item .ticket-content {
    border-bottom: 1px solid #e0e0e0 !important;
    width: 80%;
    margin: 0 auto;
    padding-bottom: 15px;
  }
  .ticket-item:last-of-type .ticket-content {
    border-bottom: none !important;
  }
}
@media (max-width: 690px) {
  #page-name-container {
    margin-top: -5px;
    padding-bottom: 15px;
    padding-top: 20px;
  }
}
@media (min-width: 768px) {
  #page-name-container {
    margin-top: -5px;
  }
}
/* --- Styles moved from /tickets/index.php <body> --- */
.ticket-section > div {
  padding-top: 25px;
  padding-bottom: 25px;
}
.ticket-link {
  color: #4c4c4c;
  text-decoration: underline;
}
.ticket-link:hover {
  color: #000000 !important; /* Use !important to override JS-like hover */
  text-decoration: underline;
}
.ticket-item .description {
  font-size: 1em;
}
.ticket-image-column {
  text-align: left;
}
.imgBorder {
  padding-bottom: 15px;
  padding-top: 15px;
}
/* ----------------------------------------
8. Introduction Page Styles
---------------------------------------- 
*/
/* From <head> style block */
#intro {
  padding: 10px 15px;
}
/* From #page-name-about */
#page-name-about > div {
  padding: 15px 0;
}
/* From .about-us section */
.about-us.about-7 > div {
  padding-top: 20px;
  padding-bottom: 20px;
}
/* For images inside intro sections */
.about-us.about-7 .imgBorder, .about-us.about-7 .right-content .imgBorder {
  width: 100%;
}
/* For "local and regional charities" link */
.about-us.about-7 .description a {
  text-decoration: underline;
}
/* For "Since 2016" column */
.about-us.about-7 .right-content {
  margin-top: 10px;
}
/* For "Since 2016" list items */
/* Overrides style.css 'display: inline-block' */
.about-us.about-7 .choose-list li {
  display: block;
  margin-bottom: 15px; /* Replaces <br> tags */
}
.about-us.about-7 .choose-list li p {
  line-height: 18px;
  margin-top: 0;
}
/* --- Style links inside "Since 2016" list to match jok-page-links --- */
.about-us.about-7 .choose-list li a {
  color: #8c8c8c; /* Default gray color */
  text-decoration: underline; /* Underlined by default */
}
/* Make the <strong> tag inside the link also gray */
.about-us.about-7 .choose-list li a strong {
  color: #8c8c8c;
  font-weight: bold; /* Ensure it stays bold */
}
/* On hover, make the entire link black */
.about-us.about-7 .choose-list li a:hover {
  color: black;
  text-decoration: underline; /* Keep it underlined */
}
/* Ensure the <strong> tag also turns black on hover */
.about-us.about-7 .choose-list li a:hover strong {
  color: black;
}
.description {
  margin-top: 0px;
}
/* --- END NEW STYLES --- */
/* For "Organizers" section */
.portfolio-details.bg-gray > div {
  padding-top: 0px;
  padding-bottom: 0px;
}
.portfolio-details.bg-gray h2 {
  padding-top: 20px;
  text-align: center;
}
.portfolio-details.bg-gray .related-project img {
  padding-top: 20px;
  padding-bottom: 0px;
  height: auto;
  width: auto; /* Allow width to adjust to new height */
  max-width: 100%;
}
.portfolio-details.bg-gray .related-project .description {
  margin-bottom: 20px;
  margin-top: 20px;
}
/* For "Judgement Lineup" timeline section */
.intro-timeline-section {
  background-color: #ffffff;
}
.intro-timeline-section > div {
  padding-top: 20px;
  padding-bottom: 0px;
  text-align: center;
}
.intro-timeline-section h2 {
  font-weight: bold;
}
.intro-timeline-section .timeline-subtitle {
  padding-top: 0px;
  padding-bottom: 0px;
}
.frst-timeline.intro-timeline {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.frst-timeline.intro-timeline .frst-timeline-content {
  text-align: center;
}
/* ----------------------------------------
9. County Wines Page Styles
---------------------------------------- 
*/
/* --- Styles from /county/wines/ <head> --- */
@media (min-width: 768px) {
  .sidebar .widget {
    margin-bottom: 20px;
  }
  #intro-title {
    margin-bottom: 20px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .page-name-4 .title {
    padding-bottom: 10px;
    padding-top: 15px;
  }
}
@media (min-width: 992px) {
  .page-name-4 .title {
    padding-top: 10px;
    padding-bottom: 0px;
  }
}
/* --- Styles from /county/wines/ <body> --- */
/* For #page-name section */
#page-name.page-name-4 > div {
  padding: 15px 0;
}
/* For .choose-us section */
.choose-us.bg-gray > div {
  padding-top: 20px;
  padding-bottom: 20px;
}
/* For video description column */
.county-wine-video-desc {
  margin-top: 10px;
}
/* For video credit text */
.video-credit strong {
  text-decoration: underline; /* Replaced invalid 'font-decoration' */
  font-weight: bold;
}
/* For iframes (replaces invalid attributes) */
.facebook-responsive iframe {
  border: 0;
}
/* For main content article section */
.main-content.blog-classic > div {
  padding-top: 20px;
}
/* For "Other Links" title in sidebar */
.sidebar .widget-title.other-links {
  padding-top: 10px;
}
/* ----------------------------------------
10. Wine News Page Styles
---------------------------------------- 
*/
/* Section padding */
.wine-news-section > div {
  padding-top: 15px;
}
/* List item spacing and link colors */
.wine-news-list .list-group-item {
  padding-top: 25px; /* Creates space, replacing <br> */
  padding-bottom: 25px;
  border-left: none;
  border-right: none;
}
.wine-news-list .list-group-item:first-child {
  border-top: none;
}
.wine-news-list .list-group-item:last-child {
  border-bottom: none;
}
/* Force <span> to be block to stack correctly */
.wine-news-list .list-group-item span {
  display: block;
}
/* Fix article margin */
.wine-news-list .list-group-item article {
  margin-top: 15px;
}
/* Link color styling */
.wine-news-list .list-group-item span a {
  text-decoration: underline;
  color: #8c8c8c; /* Standard gray link color */
}
.wine-news-list .list-group-item span a:hover {
  color: black; /* Hover to black */
}
/* ----------------------------------------
11. Silent Auction Page Styles
---------------------------------------- 
*/
/* Padding for breadcrumb location */
.page-name-4 .location.auction-location {
  padding-top: 10px;
}
/* Main content section padding */
.choose-us.auction-section > div {
  padding-top: 30px;
  padding-bottom: 20px;
}
/* Styling for the list of donor year links */
.auction-links {
  list-style: none;
  padding-left: 0;
}
.auction-links li {
  display: block;
  margin-bottom: 10px; /* Replaces <br> */
}
.auction-links li a {
  text-decoration: underline;
  color: #8c8c8c;
}
.auction-links li a:hover, .auction-links li a:hover strong {
  color: black;
}
.auction-links li a strong {
  color: #8c8c8c;
  font-weight: bold;
  transition: color 0.3s ease;
}
/* Styling for the giving back list (right column) */
.giving-back-list {
  margin-top: 0px;
}
.giving-back-list li {
  margin-top: 0px;
  display: block; /* Override default */
}
.giving-back-list li p {
  line-height: 18px;
  margin-top: 0px;
}
/* Links in the giving back list */
.giving-back-list li a {
  color: #8c8c8c;
  text-decoration: underline;
}
.giving-back-list li a:hover {
  color: black;
}
/* Styling for the photos in the left column */
.auction-photos {
  margin-top: 15px;
}
.auction-photos img {
  height: 500px;
  width: 100%;
  object-fit: cover;
  max-width: 100%;
  margin-top: 15px;
  margin-bottom: 10px;
}
.auction-photos hr, .giving-back-list hr {
  border-color: #666666;
  margin-top: 15px;
  margin-bottom: 15px;
}
/* "Charities We Support" Title Section */
.charities-title-section > div {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}
/* "Charities We Support" Logos Section */
.charity-logos .item {
  padding: 5px;
}
.charity-logos .item img {
  padding: 5px;
  border: 2px double #FFFFFF;
  box-sizing: border-box; /* Include padding/border in width */
}
/* Fix for nested <a> tag */
.charity-logos .item a {
  display: inline-block;
}
/* Fix for <hr> in recipients section */
.recipients .row > hr {
  margin: 0px;
}
/* ----------------------------------------
12. Contact Page Styles
---------------------------------------- 
*/
/* --- Styles moved from /contact/ <head> --- */
/* Default settings */
.contact-section .ticket-heading {
  color: black;
  font-size: 16px;
  margin-top: 10px;
}
.contact-section .description {
  text-align: center;
}
#contact-page {
  padding-bottom: 5px;
}
/* Settings for screens bigger than 1400px */
@media (min-width: 1400px) {
  .contact-section .ticket-heading {
    font-size: 40px;
  }
  .contact-section .description a {
    display: inline-block;
    padding-top: 30px;
    font-size: 25px;
  }
  .contact-section.choose-us .row {
    display: flex;
    align-items: center;
  }
}
/* Settings for screens 992px to 1399px */
@media (min-width: 992px) and (max-width: 1399px) {
  .contact-section .section-title {
    margin-bottom: 20px;
  }
  .contact-section.choose-us .row {
    display: flex;
    align-items: center;
  }
  .contact-section .description {
    text-align: center;
    height: 100px;
  }
  .contact-section .description a {
    display: inline-block;
    padding-top: 20px;
    font-size: 20px;
  }
  .contact-section .ticket-heading {
    font-size: 30px;
  }
}
/* Settings for screens smaller than 991px */
@media (max-width: 991px) {
  .contact-section .section-title {
    margin-bottom: 0px;
  }
}
/* --- Styles from /contact/ <body> --- */
/* Replaces inline padding on page name section */
#page-name.page-name-4 > div {
  padding-top: 15px;
  padding-bottom: 15px;
}
/* Replaces inline padding on main content section */
.contact-section.choose-us.bg-gray > div {
  padding-top: 25px;
  padding-bottom: 25px;
}
/* Replaces inline font-size on email description */
.contact-section .ticket-item .description {
  font-size: 1em;
}
/* Replaces deprecated align="left" and inline image padding */
.contact-image-column {
  text-align: left;
}
.contact-image-column img {
  padding-bottom: 15px;
  padding-top: 15px;
}
/* Styles the email link gray, with black hover */
.contact-section .ticket-item .description a {
  color: #8c8c8c;
  text-decoration: underline;
}
.contact-section .ticket-item .description a:hover {
  color: black;
}
#contact {
  font-size: 18px;
}
#p-contact {
  margin-bottom: 0;
}
/* ----------------------------------------
13. MC/Host Page Styles - 2 Column Layout
---------------------------------------- 
*/
.mc-section.about-8 {
  margin-bottom: 0px;
}
.mc-section.about-8 > div {
  padding-top: 0px;
  padding-bottom: 20px;
}
.mc-bio-row {
  padding-top: 0px;
  margin: 0px 15px 15px 15px;
}
.mc-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  background-color: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin: 0;
}
.mc-grid:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.mc-column {
  padding: 10px 0px;
  display: flex;
}
.mc-card {
  padding: 0px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mc-text-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.mc-text-col .description {
  margin: 0px;
}
.mc-right-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mc-info-wrapper {
  text-align: center;
  margin-bottom: 15px;
}
.mc-info-name {
  font-size: 16px;
  font-weight: bold;
  color: #c41e3a;
  margin: 0;
  line-height: 1.2;
  margin-bottom: 3px;
}
.mc-info-title {
  font-size: 14px;
  color: #333;
  margin: 0;
  line-height: 1.2;
  margin-bottom: 3px;
}
.mc-info-date {
  font-size: 14px;
  color: #333;
  margin: 0;
  line-height: 1.2;
}
.mc-image-wrapper {
  text-align: center;
}
.mc-image-wrapper img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.mc-text .mc-card {
  padding-left: 25px;
  padding-right: 10px;
}
.mc-right .mc-card {
  padding: 15px;
}
@media (min-width: 1200px) {
  .mc-grid {
    display: flex;
    gap: 0;
  }
  .mc-text .mc-card {
    padding: 0 6px 0 35px;
  }
  .mc-right .mc-card {
    padding: 0 10px 0 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .mc-right-col {
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .mc-info-wrapper {
    margin-bottom: 0;
    margin-right: 15px;
    flex-shrink: 0;
  }
  .mc-image-wrapper {
    flex-shrink: 1;
  }
  .mc-image-wrapper img {
    max-width: 70%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .mc-grid {
    display: flex;
    gap: 0;
  }
  .mc-text {
    max-width: 75%;
  }
  .mc-right {
    max-width: 25%;
  }
  .mc-text .mc-card {
    padding: 0 0 0 15px;
  }
  .mc-right .mc-card {
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .mc-right-col {
    padding: 0 0 0 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .mc-info-wrapper {
    margin: 0 10px;
    flex-shrink: 0;
  }
  .mc-image-wrapper {
    flex-shrink: 1;
  }
  .mc-image-wrapper img {
    max-width: 100%;
    margin: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .mc-grid {
    display: flex;
    gap: 0;
  }
  .mc-column {
    padding: 10px 0;
  }
  .mc-text .mc-card {
    padding: 0 0 0 30px;
  }
  .mc-text-col .description {
    line-height: 22px;
  }
  .mc-right .mc-card {
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .mc-info-wrapper {
    margin-bottom: 0px;
    margin-top: 5px;
  }
  .mc-image-wrapper img {
    max-width: 55%;
  }
  .mc-info-name {
    margin-bottom: 0px;
  }
  .mc-info-title {
    margin-bottom: 0px;
  }
  .mc-info-date {
    margin: 0;
  }
}
@media (min-width: 691px) and (max-width: 767px) {
  .mc-grid {
    display: flex;
    gap: 0;
  }
  .mc-column {
    padding: 10px 0;
  }
  .mc-text {
    max-width: 75%;
  }
  .mc-text .mc-card {
    padding: 0 0 0 20px;
  }
  .mc-text-col .description {
    line-height: 22px;
  }
  .mc-right {
    max-width: 25%;
  }
  .mc-right .mc-card {
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .mc-info-wrapper {
    margin-bottom: 0px;
    margin-top: 5px;
  }
  .mc-image-wrapper img {
    max-width: 50%;
  }
  .mc-info-name {
    margin-bottom: 0px;
  }
  .mc-info-title {
    margin-bottom: 0px;
  }
  .mc-info-date {
    margin: 0;
  }
}
@media (max-width: 690px) {
  .mc-section .container {
    max-width: 85%;
    width: 85%;
    padding-left: 15px;
    padding-right: 15px;
  }
  .mc-bio-row {
    padding: 0 0 5px 0;
    margin: 0px;
  }
  .mc-grid {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    padding: 0px 15px 10px;
  }
  .mc-column {
    width: 100%;
    padding: 0px;
  }
  .mc-card {
    padding: 0px;
  }
  .mc-right .mc-card {
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .mc-right-col {
    padding: 5px 0 0 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
  }
  .mc-text .mc-card {
    padding: 15px 0 0 0;
  }
  .mc-info-wrapper {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .mc-image-wrapper {
    flex-shrink: 0;
    text-align: center;
  }
  .mc-image-wrapper img {
    max-width: 90px;
  }
  .mc-text-col .description {
    padding: 0px;
  }
  .mc-info-name {
    margin-bottom: 7px;
  }
  .mc-info-title {
    margin-bottom: 7px;

  }
  .mc-info-date {
    margin: 0;
  }
}
@media (max-width: 480px) {
  .mc-section .container {
    max-width: 87%;
    width: 87%;
  }
  .mc-right .mc-card {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .mc-right-col {
    padding: 5px 0 0 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
  }
  .mc-info-wrapper {
    margin-bottom: 0;
    margin-left: 15px;
    flex-shrink: 0;
  }
  .mc-image-wrapper {
    flex-shrink: 0;
  }
  .mc-image-wrapper img {
    max-width: 75px;
  }
}

/* ----------------------------------------
14. Experts Page Styles
---------------------------------------- */
.experts-section.about-8 > div {
  padding-top: 15px;
  padding-bottom: 15px;
}
.experts-section .pr-1 {
	padding-left: 15px;
}
.experts-section .about-content > .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0px;
}
.jok2025-links-row {
	padding: 0px !important;
}
.experts-section .row {
	margin: 0px;
	padding: 10px 0px 0px 0px;
}
.experts-grid {
  background-color: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin: 5px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(50% - 25px);
  float: none;
}
.experts-grid:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.experts-grid > [class*="col-"] {
  width: auto;
  float: none;
  padding: 0;
}
.experts-grid > .col-sm-8 {
  flex: 1;
  padding-right: 15px;
}
.experts-grid > .col-sm-8 .description {
  margin: 0;
  line-height: 1.6;
  padding: 0;
}
.expert-image-column {
  flex-shrink: 0;
  width: 120px;
  text-align: center;
}
.expert-image-column img {
  width: 100%;
  height: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 0;
}
.expert-bio-row-padding {
  padding-top: 0;
}
/* Desktop Large (1200px+) */
@media (min-width: 1200px) {
  .experts-grid {
    width: calc(50% - 25px);
    padding: 10px;
	margin: 10px;
	flex-direction: row;
  }
  .expert-image-column {
    width: 130px;
  }
  .expert-image-column img {
    max-width: 130px;
  }
}
/* Desktop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .experts-grid {
    width: calc(50% - 10px);
    padding: 15px;
	flex-direction: row;
  }
  .expert-image-column {
    width: 110px;
  }
  .expert-image-column img {
    max-width: 110px;
  }
}
/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .experts-grid {
    width: calc(50% - 25px);
    padding: 10px;
  }
  .experts-section .page-header-red {
	padding: 10px 0px 0px 0px;
}
	.jok-links {
		padding: 0;
	}
  .experts-grid > .col-sm-8 {
    padding-right: 10px;
  }
  .expert-image-column {
    width: 100px;
  }
  .expert-image-column img {
    max-width: 100px;
  }
}
/* Tablet Small (691px - 767px) */
@media (min-width: 691px) and (max-width: 767px) {
  .experts-section .container {
    max-width: 90%;
    width: 90%;
  }
  .experts-grid {
    width: calc(50% - 10px);
    padding: 8px;
	flex-direction: column;
  }
  .experts-grid > .col-sm-8 {
    padding-right: 0px;
  }
  .experts-grid > .col-sm-8 .description {
    font-size: 13px;
    line-height: 1.5;
  }
  .expert-image-column {
    width: 80px;
  }
  .expert-image-column img {
    max-width: 80px;
	padding-top: 5px;
  }
	.experts-section .page-header-red {
	padding: 10px 0px 0px 0px;
}
	.jok-links {
		padding: 0;
	}
}
/* Mobile (690px and under) */
@media (max-width: 690px) {
  .experts-section .container {
    max-width: 85%;
    width: 85%;
  }
  .experts-section .about-content > .row {
    flex-direction: column;
    align-items: center;
	padding: 0px;
  }
	.experts-section .page-header-red {
	padding: 10px 0px 0px 0px;
}
	.jok-links {
		padding: 0;
	}
  .experts-grid {
    width: 100%;
    max-width: 100%;
    padding: 12px;
	flex-direction: row;
  }
  .experts-grid > .col-sm-8 {
    padding-right: 10px;
  }
  .experts-grid > .col-sm-8 .description {
    font-size: 14px;
  }
  .expert-image-column {
    width: 90px;
  }
  .expert-image-column img {
    max-width: 90px;
  }
}
/* Extra Small Mobile (480px and under) */
@media (max-width: 480px) {
  .experts-section .container {
    max-width: 87%;
    width: 87%;
  }
	.experts-section .page-header-red {
	padding: 10px 0px 0px 0px;
}
	.jok-links {
		padding: 0;
	}
  .experts-grid {
    padding: 12px;
	 flex-direction: column;
  }
  .experts-grid > .col-sm-8 .description {
    font-size: 13px;
  }
  .expert-image-column {
    width: 100px;
  }
  .expert-image-column img {
    max-width: 80px;
  }
}
/* ----------------------------------------
15. Folks Page Styles
---------------------------------------- 
*/
/* Replaces inline padding on the main <section> */
.folks-section.about-8 > div {
  padding-top: 15px;
  padding-bottom: 15px;
}
.folks-section .about-content > .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0px;
}
.folks-section .row {
  margin: 0px;
  padding: 10px 0px 0px 0px;
}
.folks-grid {
  background-color: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin: 5px;
  padding: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: calc(50% - 25px);
  float: none;
}
.folks-grid:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.folks-grid > [class*="col-"] {
  width: auto;
  float: none;
  padding: 0;
}
.folks-grid > .col-sm-8 {
  flex: 1;
  padding-right: 15px;
}
.folks-grid > .col-sm-8 .description {
  margin: 0;
  line-height: 1.6;
  padding: 0;
}
.folks-image-column {
  flex-shrink: 0;
  width: 120px;
  text-align: center;
}
.folks-image-column img {
  width: 100%;
  height: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 0;
}
.folks-bio-row-padding {
  padding-top: 0;
}
/* Desktop Large (1200px+) */
@media (min-width: 1200px) {
  .folks-grid {
    width: calc(50% - 25px);
    padding: 10px;
    margin: 10px;
    flex-direction: row;
  }
  .folks-image-column {
    width: 130px;
  }
  .folks-image-column img {
    max-width: 130px;
  }
}
/* Desktop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .folks-grid {
    width: calc(50% - 10px);
    padding: 15px;
    flex-direction: row;
  }
  .folks-image-column {
    width: 110px;
  }
  .folks-image-column img {
    max-width: 110px;
  }
}
/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .folks-grid {
    width: calc(50% - 25px);
    padding: 10px;
  }
  .folks-grid > .col-sm-8 {
    padding-right: 10px;
  }
  .folks-image-column {
    width: 100px;
  }
  .folks-image-column img {
    max-width: 100px;
  }
}
/* Tablet Small (691px - 767px) */
@media (min-width: 691px) and (max-width: 767px) {
  .folks-section .container {
    max-width: 90%;
    width: 90%;
  }
  .folks-grid {
    width: calc(50% - 10px);
    padding: 8px;
    flex-direction: column;
  }
  .folks-grid > .col-sm-8 {
    padding-right: 0px;
  }
  .folks-grid > .col-sm-8 .description {
    font-size: 13px;
    line-height: 1.5;
  }
  .folks-image-column {
    width: 80px;
  }
  .folks-image-column img {
    max-width: 80px;
    padding-top: 5px;
  }
}
/* Mobile (690px and under) */
@media (max-width: 690px) {
  .folks-section .container {
    max-width: 85%;
    width: 85%;
  }
  .folks-section .about-content > .row {
    flex-direction: column;
    align-items: center;
    padding: 0px;
  }
  .folks-grid {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    flex-direction: row;
  }
  .folks-grid > .col-sm-8 {
    padding-right: 10px;
  }
  .folks-grid > .col-sm-8 .description {
    font-size: 14px;
  }
  .folks-image-column {
    width: 90px;
  }
  .folks-image-column img {
    max-width: 90px;
  }
}
/* Extra Small Mobile (480px and under) */
@media (max-width: 480px) {
  .folks-section .container {
    max-width: 87%;
    width: 87%;
  }
  .folks-grid {
    padding: 12px;
    flex-direction: column;
  }
  .folks-grid > .col-sm-8 .description {
    font-size: 13px;
  }
  .folks-image-column {
    width: 100px;
  }
  .folks-image-column img {
    max-width: 80px;
  }
}
/* ----------------------------------------
16. Associates Page Styles
---------------------------------------- 
*/
/* Replaces inline styles on the main <section> */
.associates-section.about-8 {
  margin-bottom: 0px;
}
.associates-section.about-8 > div {
  padding-top: 0px;
  padding-bottom: 20px;
}
/* Replaces inline padding on the <div class="row"> */
.associates-bio-row {
  padding-top: 0px;
  margin: 0px 15px 0 15px;
}
/* Replaces inline text-align on the image column */
.associates-image-column {
  text-align: center;
}
/* Associates Grid - Matching Mayor's Letter Style */
.associates-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  background-color: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin: 0;
}
.associates-grid:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Individual Associate Column */
.associates-column {
  padding: 10px 0px;
  display: flex;
}
/* Associates Card */
.associates-card {
  padding: 15px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}
/* Text Column */
.associates-text-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.associates-text-col .description {
	margin: 0;
}
.associates-info-wrapper {
  text-align: center;
}
.associates-info-name {
  font-size: 16px;
  font-weight: bold;
  color: #c41e3a;
  margin: 0;
  line-height: 1.2;
  margin-bottom: 3px;
}
.associates-info-title {
  font-size: 14px;
  color: #333;
  margin: 0;
  line-height: 1.2;
  margin-bottom: 3px;
}
.associates-info-date {
  font-size: 14px;
  color: #333;
  margin: 0;
  line-height: 1.2;
}
/* Image Column */
.associates-image-col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.associates-image-col img {
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 25px 0 0;
}
/* Text column specific padding */
.associates-text .associates-card {
  padding: 0 0 0 30px;
}
/* Image column specific padding */
.associates-image .associates-card {
  padding: 0 25px 0 0px;
}
.about-content .description-nospace {
  padding: 0px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .associates-card {
    justify-content: space-evenly;
  }
  .associates-image-col img {
    max-width: 60%;
    margin: 0 15px 0 0;
  }
  .associates-image .associates-card {
    padding: 0 40px 0 0px;
  }
  .associates-text .associates-card {
    padding: 0 0 0 25px;
  }

}
/* Responsive - Tablet (768px - 991px) */
  @media (min-width: 768px) and (max-width: 991px) {
    .associates-column {
      padding: 0px;
    }
    .associates-text .associates-card {
      padding: 10px 0 10px 10px;
    }
    .associates-image .associates-card {
      padding: 10px 10px 10px 0px;
    }
    .associates-image-col img {
      max-width: 85%;
	  margin: 0px;
    }
  }
  /* Tablet Small (691px - 767px) */
  @media (min-width: 691px) and (max-width: 767px) {
    .associates-grid {
      display: flex;
      gap: 0;
    }
    .associates-column {
      padding: 10px 0;
    }
    .associates-text {
      max-width: 60%;
    }
    .associates-text .associates-card {
      padding: 0 0 0 10px;
    }
    .associates-text-col .description {
      line-height: 22px;
    }
    .associates-image {
      max-width: 40%;
    }
    .associates-image .associates-card {
      padding: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-evenly;
    }
    .associates-info-wrapper {
      margin: 0 10px 0 0;
    }
    .associates-image-col img {
      max-width: 85%;
      margin: 0;
    }
    .associates-info-name {
      margin-bottom: 0px;
    }
    .associates-info-title {
      margin-bottom: 0px;
    }
    .associates-info-date {
      margin: 0;
    }
  }
  /* Mobile (690px and under) */
  @media (max-width: 690px) {
    .associates-section .container {
      max-width: 80%;
      width: 80%;
      padding-left: 15px;
      padding-right: 15px;
    }
    .associates-bio-row {
      padding-top: 0px;
      margin: 0px;
    }
    .associates-grid {
      display: block;
      margin-top: 5px;
    }
    .associates-card {
      justify-content: space-evenly;
    }
    .associates-column {
      width: 100%;
      padding: 0px 15px;
    }
    .associates-card {
      padding: 0px 10px;
    }
    .associates-text .associates-card {
      padding-left: 0px;
      padding-top: 15px;
      padding-right: 0px;
    }
    .associates-image-col {
      text-align: center;
    }
    .associates-image-col img {
      max-width: 100px;
      margin: 0px;
    }
    .associates-image .associates-card {
      padding: 10px 0px;
    }
    .associates-image-col {
      flex: 0 0 auto;
    }
  }
  /* Extra Small Mobile (480px and under) */
  @media (max-width: 480px) {
    .associates-section .container {
      max-width: 87%;
      width: 87%;
    }
    .associates-card {
      justify-content: space-evenly;
    }
    .associates-image-col img {
      max-width: 80px;
      margin: 0px;
    }
    .associates-image .associates-card {
      padding: 10px 0px;
    }
    .associates-image-col {
      flex: 0 0 auto;
    }
  }
  /* ----------------------------------------
17. JOK 2024 Page Styles
---------------------------------------- 
*/
  /* Scopes these rules to the 2024 page */
  .jok2024-page #page-name.page-name-4 > div {
    padding: 15px 0;
  }
  /* Styles for the first content section */
  .jok2024-section-video > div {
    padding-top: 20px;
    padding-bottom: 0px;
  }
  /* Styles for the Vimeo 16:9 wrapper */
  .jok2024-vimeo-wrapper {
    padding: 56.25% 0 0 0;
    position: relative;
  }
  .jok2024-vimeo-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Replaces frameborder="0" */
  }
  /* Styles for the results text column */
  .jok2024-results-text {
    margin-top: 0px;
    padding-top: 20px;
    text-align: left;
  }
  /* Styles for the second content section (links) */
  .jok2024-links-section > div {
    padding-bottom: 10px;
  }
  /* Styles for the image column in the links section */
  .jok2024-image-column {
    text-align: left; /* Replaces align="left" */
  }
  .jok2024-image-column img {
    margin-top: 0px;
  }
  /* Styles for the sponsors iframe container */
  .jok2024-sponsors-iframe {
    border: 0;
    overflow: hidden;
    margin-top: 50px;
    height: 450px; /* Replaces non-standard height="450;" */
    width: 100%;
  }
  /* ----------------------------------------
18. JOK 2023 Page Styles
---------------------------------------- 
*/
  /* Used on the <body> tag to scope these styles */
  .jok2023-page #page-name.page-name-4 > div {
    padding: 15px 0;
  }
  /* Styles for the first content section (image) */
  .jok2023-section-a > div {
    padding-top: 30px;
    padding-bottom: 0px;
  }
  /* Styles for the results text column */
  .jok2023-results-text {
    margin-top: 0px;
  }
  .jok2023-results-text h2.title {
    padding-top: 10px;
  }
  .jok2023-results-text span {
    color: #000000;
  }
  .jok2023-results-text p.description {
    text-align: left;
    margin-bottom: 0px;
  }
  /* Styles for the second content section (links) */
  .jok2023-links-section > div {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  /* We use the .jok-page-links class for the list, 
   but this resets the top margin */
  .jok2023-links-list ul.jok-page-links {
    margin-top: 0px;
  }
  /* Styles for the image column in the links section */
  .jok2023-links-image {
    text-align: left; /* Replaces align="left" */
    margin-top: 0px;
    margin-bottom: 20px;
  }
  /* ----------------------------------------
19. JOK 2022 Page Styles
---------------------------------------- 
*/
  /* Used on the <body> tag to scope these styles */
  .jok2022-page #page-name.page-name-4 > div {
    padding: 15px 0;
  }
  /* Banner Image Section */
  .jok2022-banner {
    margin-top: 0px;
  }
  .jok2022-banner .name-box, .jok2022-banner .box-details {
    background: none;
    border: none;
  }
  /* Tasting Notes Section 'a' */
  .jok2022-section-a > div {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .jok2022-results-text-a {
    text-align: left;
    margin-top: 0px;
  }
  .jok2022-results-text-a h2.page-header {
    padding-top: 10px;
  }
  /* Tasting Notes Section 'b' */
  .jok2022-section-b > div {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .jok2022-results-text-b {
    text-align: left;
    margin-top: 0px;
  }
  /* Tasting Notes Section 'c' */
  .jok2022-section-c > div {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .jok2022-results-text-c {
    text-align: left;
    margin-top: 0px;
  }
  /* Video and Links Section */
  .jok2022-links-section > div {
    padding-top: 0px;
    padding-bottom: 20px;
    text-align: left;
  }
  .jok2022-links-section .row > div {
    text-align: left; /* for the div holding the video */
  }
  /* 16:9 Vimeo Wrapper */
  .jok2022-vimeo-wrapper {
    padding: 56.25% 0 0 0;
    position: relative;
    margin-bottom: 15px; /* Space below video */
  }
  .jok2022-vimeo-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Replaces frameborder="0" */
  }
  /* Fix for the links list */
  .jok2022-links-section ul.jok-page-links {
    margin-top: 0px;
  }
  /* ----------------------------------------
20. JOK 2021 Page Styles
---------------------------------------- 
*/
  /* Used on the <body> tag to scope these styles */
  .jok2021-page #page-name.page-name-4 > div {
    padding: 15px 0;
  }
  /* Banner Image Section */
  .jok2021-banner {
    margin-top: 0px;
  }
  .jok2021-banner .name-box, .jok2021-banner .box-details {
    background: none;
    border: none;
  }
  /* Tasting Notes Section 'a' */
  .jok2021-section-a > div {
    padding-top: 20px;
    padding-bottom: 0px;
  }
  .jok2021-results-text-a {
    text-align: left; /* Replaces align="left" */
    margin-top: 0px;
  }
  .jok2021-results-text-a h2.page-header {
    padding-top: 10px;
  }
  /* Tasting Notes Section 'b' */
  .jok2021-section-b > div {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .jok2021-results-text-b {
    text-align: left; /* Replaces align="left" */
    margin-top: 0px;
  }
  /* Tasting Notes Section 'c' */
  .jok2021-section-c > div {
    padding-top: 20px;
    padding-bottom: 0px;
  }
  .jok2021-results-text-c {
    text-align: left; /* Replaces align="left" */
    margin-top: 0px;
  }
  /* CKWS News Section */
  .jok2021-news-section > div {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .jok2021-news-text {
    text-align: left; /* Replaces align="left" */
    margin-top: 0px;
  }
  .jok2021-news-text p.description {
    margin-bottom: 0px;
  }
  /* Facebook Iframe */
  .jok2021-facebook-iframe-wrapper iframe {
    border: none;
    overflow: hidden;
  }
  /* Links List Section */
  .jok2021-links-section > div {
    padding-bottom: 20px;
  }
  /* ----------------------------------------
21. JOK 2020 Page Styles
---------------------------------------- 
*/
  /* Used on the <body> tag to scope these styles */
  .jok2020-page #page-name.page-name-4 > div {
    padding: 15px 0;
  }
  /* Banner Image Section */
  .jok2020-banner {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 420px;
  }
  .jok2020-banner .container {
    padding-bottom: 0px;
  }
  .jok2020-banner .name-box, .jok2020-banner .box-details {
    background: none;
    border: none;
  }
  /* Main Content Section */
  .jok2020-content-section > div {
    padding-top: 0px;
    padding-bottom: 10px;
  }
  /* Replaces deprecated align="center" */
  .jok2020-sidebar-col {
    text-align: center;
  }
  /* Responsive Facebook/Vimeo wrapper from inline <style> */
  .jok2020-facebook-responsive {
    position: relative;
    padding-bottom: 56.25%; /* Default 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin-bottom: 20px;
  }
  .jok2020-facebook-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Replaces frameborder, etc. */
  }
  @media (max-width: 599px) {
    .jok2020-facebook-responsive {
      padding-bottom: 50%;
    }
  }
  /* Donation title specific padding */
  .page-header.jok2020-donation-title {
    padding-top: 10px;
  }
  /* Donation image styling */
  .jok2020-donation-image {
    padding-top: 10px;
  }
  /* Donation caption styling */
  .jok2020-donation-caption {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  /* Donation caption link color (NEW) */
  .jok2020-donation-caption a {
    color: #8c8c8c;
    text-decoration: underline;
  }
  .jok2020-donation-caption a:hover {
    color: black;
  }
  /* Ensures link list uses the right font size */
  .jok2020-page .jok-page-links {
    font-size: 16px;
  }
  /* ----------------------------------------
22. JOK 2019 Page Styles
---------------------------------------- 
*/
  /* Used on the <body> tag to scope these styles */
  .jok2019-page #page-name.page-name-4 > div {
    padding: 15px 0;
  }
  /* Banner Image Section */
  .jok2019-banner {
    margin-top: 0px;
  }
  .jok2019-banner .container {
    padding-bottom: 90px;
  }
  .jok2019-banner .name-box, .jok2019-banner .box-details {
    background: none;
    border: none;
  }
  .jok2019-banner .title {
    color: #fff; /* Ensure title text is visible if any */
  }
  /* Main Content Section */
  .jok2019-content-section > div {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  /* Replaces deprecated align="center" */
  .jok2019-sidebar-col {
    text-align: center;
  }
  /* Responsive Facebook video wrapper (moved from inline <style>) */
  .jok2019-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin-bottom: 20px;
  }
  .jok2019-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  /* Donation images styling */
  .jok2019-image {
    padding-top: 20px;
    padding-bottom: 10px;
  }
  .jok2019-image-padding-top {
    padding-top: 10px;
    padding-bottom: 20px;
  }
  .jok2019-image-padding-top-b {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .jok2019-image-padding-top-c {
    padding-top: 20px;
  }
  .jok2019-image-padding-top-d {
    padding-top: 10px;
  }
  /* Donation caption styling */
  .jok2019-donation-caption {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  /* Ensures link list uses the right font size */
  .jok2019-page .jok-page-links {
    font-size: 16px;
    margin-top: 0; /* Override default */
  }
  /* ----------------------------------------
23. JOK Old Pages Styles
---------------------------------------- 
*/
  /* Used on the <body> tag to scope these styles */
  .jokold-page #page-name.page-name-4 > div {
    padding: 15px 0;
  }
  /* Banner Image Section */
  .jokold-banner .container {
    padding-bottom: 90px;
  }
  .jokold-banner .name-box, .jokold-banner .box-details {
    background: none;
    border: none !important;
  }
  .jokold-banner .title {
    color: #fff; /* Ensure title text is visible if any */
  }
  /* Main Content Section */
  .jokold-content-section > div {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  /* Replaces deprecated align="center" */
  .jokold-sidebar-col {
    text-align: center;
    padding-top: 10px;
  }
  /* Responsive Facebook video wrapper (moved from inline <style>) */
  .jokold-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin-bottom: 0px;
  }
  .jokold-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Replaces frameborder, etc. */
  }
  /* Donation image styling */
  .jokold-donation-image {
    padding-top: 10px;
    padding-bottom: 20px;
  }
  /* Titles for "Donation", "Tasting Notes", etc. */
  .jokold-section-title {
    padding-top: 0px;
    padding-bottom: 10px;
  }
  /* Paragraphs associated with section titles */
  .jokold-section-paragraph {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .jokold-section-paragraph img {
    vertical-align: middle;
    margin-right: 5px;
  }
  /* Fix for the links list (was invalid HTML) */
  .jokold-page .jok-page-links {
    font-size: 16px;
    margin-top: 0; /* Replaces inline style on <p> */
  }
  .jokold-page .jok-page-links li {
    margin-bottom: 0; /* Override default if needed */
  }
  /* MC Section */
  .jokold-mc-section > div {
    padding-top: 10px;
    padding-bottom: 0px;
  }
  .jokold-mc-title {
    padding-top: 0px;
    padding-bottom: 10px;
    line-height: 35px;
    text-align: left;
    padding-left: 15px;
  }
  .jokold-mc-image-col {
    text-align: center;
    padding-top: 40px;
  }
  /* Experts Section 'a' */
  .jokold-experts-section-a > div {
    padding-top: 20px;
    padding-bottom: 0px;
  }
  .jokold-experts-title-a {
    padding-top: 0px;
    padding-bottom: 10px;
    line-height: 35px;
    padding-left: 35px;
  }
  .jokold-expert-image-col {
    text-align: center;
  }
  /* Experts Section 'b' */
  .jokold-experts-section-b {
    padding-bottom: 10px;
  }
  .jokold-experts-section-b > div {
    padding-top: 15px;
  }
  /* Folks Section */
  .jok2D018-folks-section > div {
    padding-top: 20px;
    padding-bottom: 10px;
  }
  .jokold-folks-title {
    padding-bottom: 10px;
    line-height: 35px;
    padding-left: 18px;
  }
  /* Media/News Section */
  .jokold-media-section > div {
    padding-top: 10px;
    padding-bottom: 0px;
  }
  .jokold-media-section .entry-meta {
    font-size: 12px;
  }
  .jokold-media-section .description {
    text-transform: lowercase;
    line-height: 16px;
  }
  .jokold-media-section .description span {
    text-transform: capitalize;
  }
  /* --- NEW STYLES FOR MEDIA LINKS --- */
  /* Style all links in the media widget (title, meta, and description) */
  .jokold-media-section .widget_popular_post a {
    color: #8c8c8c; /* Standard gray */
    text-decoration: underline;
  }
  /* This makes them turn black on hover, just like your other links */
  .jokold-media-section .widget_popular_post a:hover {
    color: black; /* Standard black hover */
  }
  /* This specifically targets the "» View Article" link:
  - 'display: block' forces it onto a new line (replacing the <br> tag)
  - 'margin-top: 5px' adds a bit of space
  - 'font-size: 14px' replaces the old inline style
*/
  .jokold-media-section .description a[href*="View"] {
    display: block;
    margin-top: 5px;
    font-size: 14px;
  }
  .jokold-desc {
    margin-top: 10px;
    margin-bottom: 0px;
  }
  /* --- END NEW STYLES --- */
  /* ----------------------------------------
24. Photo Pages Styling
----------------------------------------*/
  /* Scoped styles for the media box components (jok-photo-box-container) */
  .jok-photos-section .media-box-container {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
  }
  /* Scoped styles for the media box content (jok-photo-box-content) */
  .jok-photos-section .media-box-content {
    text-align: center;
    padding: 0px;
  }
  /* New style to remove inline style from Fancybox caption in JS */
  .jok-fancybox-caption-text {
    text-align: center;
  }
  /* ----------------------------------------
25. Links Page Styling
---------------------------------------- 
*/
  .links-page-body #page-name.page-name-4 > div {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .links-page-body .links-section-a > div {
    padding-top: 0px;
    padding-bottom: 10px;
  }
  .links-page-body .links-list-column {
    text-align: left;
  }
  .links-page-body .links-list-column {
    text-align: left;
    width: 55%;
  }
  /* Styles all links in the main sections to be gray with black hover */
  .links-page-body .links-list-column .description a {
    color: #8c8c8c;
    text-decoration: underline;
  }
  .links-page-body .links-list-column .description a:hover {
    color: black;
  }
  .links-page-body .links-list-column .description-nospace a {
    color: #8c8c8c;
    text-decoration: underline;
  }
  .links-page-body .links-list-column .description-nospace a:hover {
    color: black;
  }
  .links-page-body .links-struckblog-item {
    text-align: left;
  }
  .links-page-body .links-struckblog-item img {
    margin-bottom: 10px; /* Space between image and text */
  }
  .links-page-body .links-image-a {
    padding-bottom: 10px;
    padding-top: 10px;
  }
  .links-page-body .links-image-caption {
    color: #000000;
    line-height: 1.5; /* Changed from 10px to be more responsive */
    padding-top: 10px; /* Reduced from 25px */
  }
  .links-page-body .links-section-b > div {
    padding-bottom: 20px;
    padding-top: 10px;
  }
  .links-page-body .links-image-b {
    padding-bottom: 15px;
  }
  .links-page-body .links-section-c > div {
    padding-top: 20px;
    padding-bottom: 10px;
  }
  .links-page-body .links-image-c {
    padding-top: 0px;
    padding-bottom: 0px;
    height: auto;
    width: auto; /* Maintain aspect ratio */
    max-width: 100%;
  }
  /* Ensure location link is also styled correctly */
  .links-page-body .page-name .location a {
    color: #373737;
  }
  .links-page-body .page-name .location a:hover, .links-page-body .page-name .location a:hover span, .links-page-body .page-name .location a:hover strong {
    color: black;
  }
  .description-link {
    margin-top: 10px;
    margin-bottom: 0px;
  }
  .description-nospace {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .description-allspace {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .description-bottom {
    margin-top: 0px;
    margin-bottom: 10px;
  }
  /* Container for the entire links grid */
  .links-section, .links-grid, .links-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
    max-width: 1200px;
  }
  /* Each image-plus-caption unit */
  .links-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 250px; /* match your thumbnail width */
    margin-bottom: 25px;
  }
  /* Link images */
  .links-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  /* Caption below image */
  .links-image-caption {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.4em;
    color: #555;
    padding: 8px 10px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
  }
  /* Responsive layout */
  @media (max-width: 600px) {
    .links-item {
      width: 45%;
    }
  }
  @media (max-width: 400px) {
    .links-item {
      width: 100%;
    }
  }
  /* Two-column layout for wide screens */
  @media (min-width: 768px) {
    .links-section-b .row {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: nowrap;
    }
    .links-section-b .links-item {
      width: 45%;
      margin-bottom: 0;
    }
  }
  @media (max-width: 690px) {
    .links-section-b .row {
      display: flex;
      flex-direction: column;
      align-items: center; /* centers the items horizontally */
    }
    .links-section-b .links-item {
      width: 70%;
      max-width: 400px;
      margin-bottom: 10px;
      text-align: center; /* ensures captions stay centered too */
    }
  }
  /* ----------------------------------------
26. Footer Styles (footer.php)
---------------------------------------- */
  /* Flex container for footer layout */
  .footer-flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 15px;
    padding: 20px 0;
  }
  /* 4-column layout for medium screens */
  .footer-item {
    flex: 1 1 20%;
    min-width: 125px;
    text-align: center;
  }
  /* 2x2 grid on small screens */
  @media (max-width: 600px) {
    .footer-flex-container {
      justify-content: center;
      padding-left: 10%;
      padding-right: 10%;
    }
    .footer-item {
      flex-basis: 40%;
    }
  }
  /* Large screen constraints */
  @media (min-width: 1200px) {
    .footer-flex-container {
      max-width: 1170px;
      margin: 0 auto;
    }
  }
  /* Icon sizing for all social and ticket icons */
  .jok-footer-icon {
    font-size: 20px !important;
  }
  /* Footer copyright and developer text links */
  .jok-footer-copy {
    padding-bottom: 0 !important;
  }
  .jok-footer-dev {
    text-decoration: underline;
    text-transform: uppercase;
    padding-top: 0 !important;
  }
  /* Sticky Footer - Flexbox Method */
  html {
    height: 100%;
  }
  body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  body > *:not(footer) {
    flex-shrink: 0;
  }
  .site-footer {
    margin-top: auto;
  }
  /* ----------------------------------------
27. Mayor's Letter Section Styling
---------------------------------------- */
  .mayors-section {
    background-color: #ffffff;
    padding: 0 0 10px 0;
  }
  .mayors-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    background-color: #f9f9f9;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 15px 0 0 0;
  }
  .mayors-grid:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  .mayor-column {
    padding: 10px 0px;
    display: flex;
  }
  .mayor-card {
    padding: 15px;
    padding-right: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .mayor-text-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
  }
  .mayor-text-col a {
    color: #373737;
  }
  .mayor-wine {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    margin: 0;
  }
  .mayor-signature {
    text-align: center;
  }
  .mayor-sig-name {
    font-size: 11px;
    font-weight: bold;
    color: #c41e3a;
    margin: 0;
    line-height: 1.2;
  }
  .mayor-sig-title {
    font-size: 10px;
    color: #333;
    margin: 0;
    line-height: 1.2;
  }
  .mayor-sig-date {
    font-size: 10px;
    color: #333;
    margin: 0;
    line-height: 1.2;
  }
  .mayor-text-1 .mayor-card {
    padding-left: 25px;
  }
  .mayor-text-2 .mayor-card {
    padding-left: 30px;
  }
  .mayor-right-col .mayor-card {
    padding: 0px;
    padding-left: 15px;
  }
  .mayor-right-col .mayor-text-col {
    text-align: center;
  }
  .mayor-right-col img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
  .mayor-letter-landscape {
    display: block !important;
  }
  @media (min-width: 1200px) {
    .mayors-section .container {
      max-width: 1145px;
    }
    .mayors-section .page-header-noleft {
      text-align: left;
      padding: 0;
      padding-bottom: 20px;
    }
    .mayors-grid {
      display: flex;
      gap: 0;
    }
    .mayor-text-1 .mayor-card {
      padding: 0;
      padding-left: 25px;
    }
    .mayor-text-2 .mayor-card {
      padding: 0;
      padding-left: 30px;
    }
    .mayor-right-col .mayor-card {
      padding: 0;
      display: flex;
      flex-direction: column;
    }
    .mayor-right-col .mayor-signature {
      text-align: center;
    }
    .mayor-right-col .text-center {
      text-align: center;
      margin-top: 5px;
    }
    .mayor-right-col img {
      max-width: 50%;
      width: 100%;
    }
  }
  @media (min-width: 992px) and (max-width: 1199px) {
    .mayors-section .page-header-noleft {
      text-align: left;
      padding: 0;
      padding-bottom: 20px;
    }
    .mayors-grid {
      display: flex;
      gap: 0;
    }
    .mayor-text-1 .mayor-card {
      padding: 0;
      padding-left: 25px;
    }
    .mayor-text-2 .mayor-card {
      padding: 0;
      padding-left: 25px;
    }
    .mayor-right-col .mayor-card {
      padding: 0;
      display: flex;
      flex-direction: column;
    }
    .mayor-right-col .mayor-signature {
      text-align: center;
    }
    .mayor-right-col .text-center {
      text-align: center;
      margin-bottom: 5px;
      margin-top: 5px;
    }
    .mayor-right-col img {
      max-width: 55%;
      width: 100%;
    }
  }
  @media (min-width: 768px) and (max-width: 991px) {
    .mayors-section .page-header-noleft {
      text-align: left;
      padding: 0;
      padding-bottom: 20px;
    }
    .mayors-grid {
      display: flex;
      gap: 0;
    }
    .mayor-text-1 .mayor-card {
      padding: 0;
      padding-left: 7px;
    }
    .mayor-text-2 .mayor-card {
      padding: 0;
      padding-left: 15px;
    }
    .mayor-right-col .mayor-card {
      padding: 0;
      display: flex;
      flex-direction: column;
    }
    .mayor-right-col .mayor-signature {
      text-align: center;
    }
    .mayor-right-col .text-center {
      text-align: center;
    }
    .mayor-right-col img {
      max-width: 75%;
      width: 100%;
    }
    .mayor-wine {
      font-size: 14px;
    }
  }
  @media (min-width: 692px) and (max-width: 767px) {
    .mayors-section .container {
      max-width: 90%;
      width: 90%;
      padding-left: 15px;
      padding-right: 15px;
    }
    .mayors-section .page-header-noleft {
      padding: 0px;
    }
    .mayors-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      row-gap: 10px;
    }
    .mayor-text-1, .mayor-text-2 {
      flex: 0 0 100%;
      max-width: 100%;
      width: 100%;
      padding: 0;
    }
    .mayor-text-1 .mayor-card, .mayor-text-2 .mayor-card {
      padding: 10px 15px 0px 15px;
      text-align: left;
    }
    .mayor-column {
      padding: 0px;
    }
    .mayor-right-col {
      flex: 0 0 100%;
      max-width: 100%;
      width: 100%;
      display: flex;
      left: 35px;
    }
    .mayor-right-col .mayor-card {
      padding: 0px 0px 15px 0px;
      flex-direction: row;
      align-items: center;
    }
    .mayor-right-col .mayor-signature {
      flex: 0 0 auto;
      margin-bottom: 0;
      margin-right: 0px;
    }
    .mayor-right-col img {
      max-width: 30%;
      width: 100%;
      margin: 0 0 0 30px;
    }
    .mayor-sig-name {
      margin-bottom: 5px;
    }
    .mayor-sig-title {
      margin-bottom: 5px;
    }
  }
  @media (min-width: 550px) and (max-width: 691px) {
    .mayors-section .page-header-noleft {
      text-align: center;
      padding: 0;
      margin-left: 0;
    }
    .mayors-section {
      padding: 0 0 10px 0;
    }
    .mayors-section .container {
      max-width: 90%;
      width: 90%;
      padding-left: 15px;
      padding-right: 15px;
    }
    .mayors-grid {
      display: block;
      margin-top: 10px;
      width: 100%;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
    .mayor-column {
      width: 100%;
      margin-bottom: 0px;
      padding: 0px 15px;
    }
    .mayor-text-1 .mayor-card {
      padding-left: 0px;
      padding-bottom: 0px;
    }
    .mayor-text-2 .mayor-card {
      padding-left: 0px;
      padding-top: 15px;
      padding-bottom: 0px;
    }
    .mayor-right-col .mayor-card {
      padding: 3px 30px 8px 30px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    .mayor-right-col.mayor-column {
      padding-left: 0px;
      padding-right: 0px;
    }
    .mayor-right-col .mayor-signature {
      margin-bottom: 0;
      margin-right: 0px;
    }
    .mayor-right-col .mayor-text-col {
      text-align: center;
      padding: 0px;
    }
    .mayor-right-col img {
      max-width: 100px;
      width: 50%;
    }
    .mayor-wine {
      font-size: 15px;
    }
    .mayor-sig-name {
      margin-bottom: 3px;
    }
    .mayor-sig-title {
      margin-bottom: 3px;
    }
  }
  @media (max-width: 604px) {
    .mayors-grid {
      display: block;
      margin-top: 10px;
      width: 67%;
      max-width: 67%;
      margin-left: auto;
      margin-right: auto;
    }
    .mayor-right-col img {
      max-width: 100px;
      width: 65%;
    }
  }
  @media (max-width: 549px) {
    .mayors-section .page-header-noleft {
      text-align: center;
      padding: 0;
      margin-left: 0;
    }
    .mayors-section {
      padding: 0 0 10px 0;
    }
    .mayors-section .container {
      max-width: 90%;
      width: 90%;
      padding-left: 15px;
      padding-right: 15px;
    }
    .mayors-grid {
      display: block;
      margin-top: 10px;
      width: 67%;
      max-width: 67%;
      margin-left: auto;
      margin-right: auto;
    }
    .mayor-column {
      width: 100%;
      margin-bottom: 0px;
      padding: 0px 15px;
    }
    .mayor-text-1 .mayor-card {
      padding-left: 0px;
      padding-bottom: 0px;
    }
    .mayor-text-2 .mayor-card {
      padding-left: 0px;
      padding-top: 15px;
      padding-bottom: 0px;
    }
    .mayor-right-col .mayor-card {
      padding: 5px 10px 10px 15px;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .mayor-right-col.mayor-column {
      padding-left: 0px;
      padding-right: 0px;
    }
    .mayor-right-col .mayor-signature {
      margin-right: 0;
    }
    .mayor-right-col .mayor-text-col {
      padding: 0px;
      text-align: center;
    }
    .mayor-right-col img {
      max-width: 200px;
      width: 50%;
    }
    .mayor-wine {
      font-size: 15px;
    }
  }
  @media (max-width: 480px) {
    .mayors-section .page-header-noleft {
      text-align: center;
      padding: 0;
      margin-left: 0;
    }
    .mayors-section {
      padding: 0 0 10px 0;
    }
    .mayors-section .container {

      max-width: 87%;
      width: 87%;
      padding-left: 15px;
      padding-right: 15px;
    }
    .mayors-grid {
      display: block;
      margin-top: 10px;
      width: 85%;
      max-width: 85%;
      margin-left: auto;
      margin-right: auto;
    }
    .mayor-column {
      width: 100%;
      margin-bottom: 0px;
      padding: 0px 15px;
    }
    .mayor-card {
      padding: 8px 0px;
    }
    .mayor-text-1 .mayor-card {
      padding-left: 0px;
      padding-bottom: 0px;
    }
    .mayor-text-2 .mayor-card {
      padding-left: 0px;
      padding-top: 15px;
      padding-bottom: 0px;
    }
    .mayor-right-col .mayor-card {
      padding: 10px 0px 0px 0px;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .mayor-right-col.mayor-column {
      padding-left: 0px;
      padding-right: 0px;
    }
    .mayor-right-col .mayor-signature {
      margin: 0px;
    }
    .mayor-right-col .mayor-text-col {
      padding: 0px 0px 10px 0px;
    }
    .mayor-right-col img {
      max-width: 200px;
      width: 50%;
      margin: 0 auto;
    }
    .mayor-wine {
      font-size: 15px;
    }
  }
  /* ----------------------------------------
28. Wine News Page
---------------------------------------- 
*/
  .list-group-item {
    border-top: none;
  }
  /* ----------------------------------------
29. Links Page Layout - Single Row to Grid Design
---------------------------------------- 
*/
  /* Main section */
  .links-section-main {
    background: #f8f8f8;
    padding: 0;
  }
  .links-section-main .section-padding {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .links-section-main .container-fluid {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  /* Desktop: Single row with all 4 items - EQUAL SPACING */
  .links-main-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    margin: 0;
    justify-content: space-between;
  }
  /* Image columns - fixed width */
  .links-image-col {
    flex: 0 0 auto;
    width: 350px;
    padding: 20px 15px 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .links-image-wrapper {
    width: 100%;
    max-width: 294px;
    text-align: center;
  }
  .links-image {
    width: 294px;
    height: auto;
    display: block;
    margin: 0 auto;
  }
  .links-image-caption {
    color: #000000;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 15px;
    margin-bottom: 0;
    padding-bottom: 0px;
    text-align: center;
    font-style: italic;
  }
  /* Links columns - FIXED WIDTH for equal spacing */
  .links-list-col {
    flex: 0 0 auto;
    width: 250px;
    padding: 20px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .links-list-wrapper {
    width: 100%;
    max-width: 400px;
  }
  .links-list-wrapper .description-link {
    margin-top: 8px;
    margin-bottom: 8px;
    text-align: left;
  }
  .links-list-wrapper .description-link:first-child {
    margin-top: 0;
  }
  .links-list-wrapper .description-link:last-child {
    margin-bottom: 0;
  }
  .links-list-wrapper a {
    color: #8c8c8c;
    text-decoration: underline;
    font-size: 15px;
    line-height: 1.6;
  }
  .links-list-wrapper a:hover {
    color: #000000;
    text-decoration: underline;
  }
  /* Tablet: 2x2 grid layout (768px to 1199px) */
  @media (min-width: 768px) and (max-width: 1199px) {
    .links-main-row {
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    .links-image-col {
      flex: 0 0 50%;
      width: 50%;
      order: 1;
    }
    .links-list-col {
      flex: 0 0 50%;
      width: 50%;
      min-width: auto;
    }
    /* Set order for 2x2 layout */
    .links-image-col:nth-child(1) {
      order: 1; /* Image 1 - top left */
    }
    .links-list-col:nth-child(2) {
      order: 2; /* Links 1 - top right */
    }
    .links-image-col:nth-child(3) {
      order: 3; /* Image 2 - bottom left */
    }
    .links-list-col:nth-child(4) {
      order: 4; /* Links 2 - bottom right */
    }
    .links-image-col {
      padding: 15px;
      justify-content: center;
    }
    .links-list-col {
      padding: 15px;
      align-items: center;
    }
    .links-image-wrapper {
      max-width: 280px;
    }
    .links-image {
      width: 280px;
    }
    .links-list-wrapper a[href*="princeedwardcountywine"] {
      max-width: 200px;
      line-height: 1.2;
    }
    .links-list-wrapper {
      width: 100%;
      max-width: 300px;
    }
  }
  /* Mobile: Stacked layout (below 768px) */
  @media (max-width: 690px) {
    .links-section-main .section-padding {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .links-main-row {
      flex-direction: column;
      justify-content: flex-start;
    }
    .links-image-col, .links-list-col {
      width: 100%;
      flex: none;
      padding: 10px 15px;
      min-width: auto;
    }
    .links-image-col {
      justify-content: center;
    }
    .links-list-col {
      align-items: center; /* Changed from flex-start to center */
    }
    .links-list-wrapper {
      max-width: 100%;
      text-align: center; /* Added to center the text */
    }
    .links-list-wrapper .description-link {
      text-align: center; /* Added to center each link */
    }
    .links-image-wrapper {
      max-width: 100%;
    }
    .links-image {
      width: 100%;
      max-width: 400px;
    }
    .links-image-caption {
      text-align: center;
    }
  }
  /* Very small mobile (below 480px) */
  @media (max-width: 480px) {
    .links-list-wrapper a {
      font-size: 14px;
    }
    .links-image-caption {
      font-size: 13px;
    }
  }
  /* Force line break for PECWA link with tighter spacing - ALL SCREEN SIZES */
  .links-list-wrapper a[href*="princeedwardcountywine"] {
    display: inline-block;
    line-height: 1.2; /* Tighter spacing between the two lines */
    word-spacing: 100vw; /* Forces each word to new line */
  }
  /* Then wrap the first 4 words together */
  .links-list-wrapper a[href*="princeedwardcountywine"]::first-line {
    word-spacing: normal;
  }
  /* ----------------------------------------
30. JOK 2025 Winners Section
---------------------------------------- */
  .winners-section {
    background-color: #ffffff;
    padding: 20px 0 0 0;
  }
  .winners-flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    padding: 20px 0;
  }
  .winner-item {
    flex: 1 1 30%;
    min-width: 300px;
    max-width: 380px;
  }
  .winner-card {
    background-color: #f9f9f9;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    padding-left: 20px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .winner-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  .winner-image-col {
    flex-shrink: 0;
    width: 40%;
    max-width: 120px;
  }
  .winner-image {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  .winner-text-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .winner-text-col a {
    color: #373737;
  }
  .winner-title {
    font-family: 'Abel', helvetica, sans-serif;
    color: #c41e3a;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 5px 0;
    line-height: 1.2;
  }
  .winner-category {
    font-family: 'Abel', helvetica, sans-serif;
    color: #666;
    font-size: 13px;
    font-style: italic;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
  }
  .winner-wine {
    font-size: 10px;
    color: #333;
    line-height: 1.5;
    margin: 0;
    font-weight: bold;
  }
  .winner-wine strong {
    color: #c41e3a;
    font-size: 13px;
    display: block;
    margin-bottom: 3px;
  }
  @media (min-width: 1200px) {
    .winners-section .container {
      max-width: 1145px;
    }
    .winners-flex-container {
      justify-content: space-between;
    }
    .winner-item {
      flex: 1 1 31%;
      max-width: 360px;
    }
    .winner-image-col {
      max-width: 130px;
    }
    .winner-title {
      font-size: 16px;
    }
    .winner-category {
      font-size: 14px;
    }
    .winner-wine {
      font-size: 13px;
    }
    .winner-wine strong {
      font-size: 14px;
    }
  }
  @media (min-width: 992px) and (max-width: 1199px) {
    .winner-item {
      flex: 1 1 31%;
      max-width: 340px;
    }
    .winner-image-col {
      max-width: 110px;
    }
    .winner-card {
      padding-left: 27px;
    }
  }
  @media (min-width: 768px) and (max-width: 991px) {
    .winners-flex-container {
      justify-content: left;
    }
    .winner-item {
      flex: 1 1 45%;
      max-width: 350px;
      min-width: 280px;
    }
    .winner-card {
      padding: 12px;
      padding-left: 36px;
    }
  }
  @media (min-width: 605px) and (max-width: 767px) {
    .winners-section .container {
      max-width: 90%;
      width: 90%;
      padding-left: 15px;
      padding-right: 15px;
    }
    .winners-flex-container {
      justify-content: flex-start;
      gap: 15px;
    }
    .winner-item {
      flex: 0 0 calc(50% - 10px);
      max-width: calc(50% - 10px);
      min-width: 0;
    }
    .winner-card {
      padding: 12px;
      gap: 12px;
      max-height: 200px;
    }
    .winner-image-col {
      width: 34%;
      max-width: 100px;
    }
    .winner-text-col {
      text-align: center;
    }
    .winner-title {
      font-size: 14px;
    }
  }
  @media (min-width: 700px) and (max-width: 767px) {
    .winner-card {
      padding-left: 20px;
    }
  }
  @media (max-width: 690px) {
    .winners-section .page-header-red {
      text-align: left;
      padding: 0;
      margin-left: 0;
    }
    .winners-section {
      padding: 15px 0;
    }
    .winners-flex-container {
      padding-bottom: 0px;
      padding-top: 10px;
    }
  }
  @media (max-width: 604px) {
    .winners-section .container {
      max-width: 90%;
      min-width: 90%;
      width: auto;
      padding-left: 15px;
      padding-right: 15px;
      margin-left: auto;
      margin-right: auto;
    }
    .winners-flex-container {
      flex-direction: column;
      align-items: center;
      gap: 15px;
    }
    .winner-item {
      width: 67%;
      max-width: 100%;
      min-width: 0;
      flex: 0 1 40%;
    }
    .winner-card {
      flex-direction: row;
      padding: 12px;
      gap: 12px;
      padding-left: 24px;
    }
    .winner-image-col {
      flex-shrink: 1;
      width: 35%;
      max-width: 90px;
      min-width: 70px;
    }
    .winner-text-col {
      text-align: center;
      flex: 1;
      min-width: 0;
      overflow-wrap: break-word;
    }
    .winners-section .page-header-red {
      text-align: center;
    }
  }
  @media (max-width: 480px) {
    .winners-section .container {
      max-width: 87%;
      min-width: 87%;
      width: auto;
      padding-left: 15px;
      padding-right: 15px;

    }
    .winner-item {
      width: 85%;
      max-width: 100%;
      min-width: 0;
    }
    .winner-card {
      flex-direction: row;
      padding: 12px;
      gap: 12px;
      padding-left: 15px;
    }
    /* Make text column narrower - NO font size changes */
    .winner-text-col {
      max-width: 55%;
      text-align: center;
    }
    /* Make image column take up more space */
    .winner-image-col {
      flex: 0 0 40%;
      width: 40%;
      max-width: none;
    }
  }
  /* Image Popup styles moved to Section 31 - JOK 2025 Image Popup (Universal) */
  /* Remove space under footer */
  .site-footer {
    margin-bottom: 0 !important;
  }
  .site-footer .copyright {
    margin-bottom: 0 !important;
    padding-bottom: 15px !important;
  }
  body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  html {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
/* ----------------------------------------
31. JOK 2025 Image Popup (Universal)
----------------------------------------
Universal popup styles for all JOK 2025 pages.
Use class "jok-image-popup" on any <a> tag wrapping an image.
*/
/* Universal popup link styling */
.jok-image-popup {
  cursor: pointer;
  display: block;
  position: relative;
}
.jok-image-popup:hover img {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
/* Winner section specific popup */
.winner-image-col .winner-image-popup {
  cursor: pointer;
  display: block;
  position: relative;
}
.winner-image-col .winner-image-popup:hover .winner-image {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
/* Associates section popup */
.associates-image-col .jok-image-popup,
.associates-image-col a[class*="popup"] {
  cursor: pointer;
  display: block;
  position: relative;
}
.associates-image-col .jok-image-popup:hover img,
.associates-image-col a[class*="popup"]:hover img {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
/* MC section popup */
.mc-image-wrapper .jok-image-popup,
.mc-image-wrapper a[class*="popup"] {
  cursor: pointer;
  display: block;
  position: relative;
}
.mc-image-wrapper .jok-image-popup:hover img,
.mc-image-wrapper a[class*="popup"]:hover img {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
/* Experts section popup */
.expert-image-column .jok-image-popup,
.expert-image-column a[class*="popup"] {
  cursor: pointer;
  display: block;
  position: relative;
}
.expert-image-column .jok-image-popup:hover img,
.expert-image-column a[class*="popup"]:hover img {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
/* Folks section popup */
.folks-image-column .jok-image-popup,
.folks-image-column a[class*="popup"] {
  cursor: pointer;
  display: block;
  position: relative;
}
.folks-image-column .jok-image-popup:hover img,
.folks-image-column a[class*="popup"]:hover img {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
/* Ensure Magnific Popup fully overlays the header */
.mfp-bg, .mfp-wrap {
  z-index: 11000 !important;
}
/* Make the close button a fixed circle in the top-right */
.mfp-close {
  position: fixed !important;
  top: 20px !important;
  right: 25px !important;
  width: 60px !important;
  height: 60px !important;
  line-height: 60px !important;
  font-size: 38px !important;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  opacity: 1;
  padding: 0 !important;
}
.mfp-close:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
/* ----------------------------------------
32. Responsive Page Headers
---------------------------------------- 
*/
/* Base responsive header - matches page-header-red styling */
.page-header-responsive, .page-header-noshr, .page-header-experts {
  font-family: 'Abel', helvetica, sans-serif;
  font-weight: 800;
  color: #c41e3a;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0;
  margin-bottom: 0;
  text-align: left;
  font-size: 18px;
  padding: 25px 0;
  border: none;
}
.page-header-responsive-link, .page-header-photo-links {
	font-family: 'Abel', helvetica, sans-serif;
  font-weight: 800;
  color: #c41e3a;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0;
  margin-bottom: 0;
  text-align: left;
  font-size: 18px;
  padding: 5px 0;
  border: none;
}
.page-header-responsive-center {
	font-family: 'Abel', helvetica, sans-serif;
  font-weight: 800;
  color: #c41e3a;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0;
  margin-bottom: 0;
  text-align: center;
  font-size: 18px;
  padding: 25px 0;
  border: none;
}
/* Reduce padding on smaller screens */
@media (max-width: 767px) {
  .page-header-responsive,  .page-header-responsive-center {
    padding-top: 10px;
    padding-bottom: 10px;
	text-align: center;
  }
	.page-header-experts {
    padding-top: 5px;
    padding-bottom: 5px;
	text-align: left;
  }
	.page-header-noshr {
		padding: 20px 0;
	}
	.page-header-photo-links {
		padding: 10px 0 5px 0;
	}
}