/*
========================================
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 (Homepage) 
========================================
*/

/* ----------------------------------------
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: 0;
  margin-top: 10px;
}
.jok-page-links-no-margin {
  font-size: 14px;
  list-style: none;
  padding-left: 0;
  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
---------------------------------------- 
*/
.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: 10px;
  padding-top: 20px;
  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;
}

.home-emblem-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0px;
}
.home-emblem-container img {
  max-width: 200px;
  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: 767px) {
    #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: 10px;
  padding-bottom: 0px;
}

/* 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
---------------------------------------- 
*/

/* Replaces inline styles on the main <section> */
.mc-section.about-8 {
  padding-bottom: 10px;
}
.mc-section.about-8 > div {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Replaces inline padding on the <div class="row"> */
.mc-section .row.mc-bio-row {
  padding-top: 10px;
}

/* Replaces inline padding on the <h2> title */
.mc-section .mc-bio-text h2 {
  padding-bottom: 5px;
}

/* Replaces inline text-align on the image column */
.mc-section .mc-image-column {
  text-align: center;
}
/* ----------------------------------------
14. Experts Page Styles
---------------------------------------- 
*/

/* Replaces inline padding on the main <section> */
.experts-section.about-8 > div {
  padding-top: 25px;
  padding-bottom: 25px;
}

/* Replaces inline text-align on the image column */
.expert-image-column {
  text-align: center;
}

/* Replaces inline padding on the expert images */
.expert-image-column img {
  padding-top: 20px;
}

/* Replaces inline padding on the third expert's row */
.expert-bio-row-padding {
  padding-top: 50px;
}
/* ----------------------------------------
15. Folks Page Styles
---------------------------------------- 
*/

/* Replaces inline padding on the main <section> */
.folks-section.about-8 > div {
  padding-top: 25px;
  padding-bottom: 20px;
}

/* Replaces inline padding on the <h2> title */
.folks-section h2 {
  padding-bottom: 0px;
  padding-left: 10px;
}

/* Replaces inline padding on the first row */
.folks-bio-row {
  padding-top: 10px;
}

/* Replaces inline text-align */
.folks-image-column {
  text-align: center;
}

/* Replaces inline padding on images */
.folks-image-column img {
  padding-top: 20px;
}

/* Replaces inline padding on the second row */
.folks-bio-row-padding {
  padding-top: 20px;
}

/* Replaces inline margin on a column */
.folks-bio-column-padding {
  margin-top: 20px;
}
/* ----------------------------------------
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: 20px;
  padding-bottom: 20px;
}

/* Replaces inline padding on the <h2> title */
.associates-section h2 {
  padding-bottom: 0px;
}

/* Replaces inline padding on the <div class="row"> */
.associates-bio-row {
  padding-top: 10px;
}

/* Replaces inline text-align on the image column */
.associates-image-column {
  text-align: center;
}
/* ----------------------------------------
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: 767px) {
  .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 - Updated Layout
---------------------------------------- */

/* mayors Section Container */
.mayors-section {
  background-color: #ffffff;
  padding: 0 0 10px 0;
}

/* mayors Grid */
.mayors-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
	  background-color: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
}

/* Individual mayor Column */
.mayor-column {
  padding: 10px 15px;
  display: flex;
}

/* mayor Card - Flex container for image + text side by side */
.mayor-card {
  padding: 15px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Image Column (Left side) */
.mayor-image-col {
  flex-shrink: 0;
  width: 90%;
  max-width: 150px;
}
.mayor-text-col a {
	color: #373737;
}

/* mayor Image */
.mayor-image {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Text Column (Right side) */
.mayor-text-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

/* mayor Category (Pinot Noir, Chardonnay) */
.mayor-category {
  font-family: 'Abel', helvetica, sans-serif;
  color: #666;
  font-size: 14px;
  font-style: italic;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* mayor Wine Details */
.mayor-wine {
  font-size: 13px;
  color: #333;
  line-height: 1.5;
  margin: 0;
}

.mayor-wine strong {
  color: #c41e3a;
  font-size: 15px;
  display: block;
  margin-bottom: 3px;
}
.mayors-section .image-col-small {
        /* This ensures the column is a block and applies text-align to children */
        text-align: center;
    }
    
    .mayors-section .image-col-small img {
        /* This fallback centers block-level content if needed */
        display: block;
        margin: 0 auto;
    }
/* Responsive Adjustments */

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
  .mayors-section .container {
    max-width: 1145px;
  }
  
  .mayor-image-col {
    max-width: 160px;
  }
  
  .mayor-title {
    font-size: 17px;
  }
  
  .mayor-category {
    font-size: 15px;
  }
  
  .mayor-wine {
    font-size: 14px;
  }
  
  .mayor-wine strong {
    font-size: 15px;
  }
}

/* Desktop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .mayor-image-col {
    max-width: 140px;
  }
  
  .mayor-title {
    font-size: 15px;
  }
  
  .mayor-category {
    font-size: 13px;
  }
	.mayor-text-col {
		text-align: center;
	}
}

/* Tablet and Mobile (480px - 991px) - Centered cards with image-left/text-right */
@media (min-width: 480px) and (max-width: 991px) {
  .mayor-column {
    width: 100%;
    padding: 10px 15px;
    display: flex;
    justify-content: center;
  }
  
  .mayor-card {
    max-width: 600px;
    width: 100%;
    padding: 15px;
  }
  
  .mayor-image-col {
    width: 35%;
    max-width: 140px;
  }
  
  .mayor-title {
    font-size: 15px;
  }
  
  .mayor-category {
    font-size: 13px;
  }
  
  .mayor-wine {
    font-size: 15px;
  }
	.mayor-text-col {
		text-align: center;
	}
}

/* Smaller tablets and larger phones (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
  .mayors-section {
    padding: 30px 0 15px 0;
  }
  
  .mayor-card {
    max-width: 500px;
    padding: 12px;
    gap: 12px;
  }
  
  .mayor-image-col {
    width: 38%;
    max-width: 120px;
  }
  
  .mayor-title {
    font-size: 14px;
    letter-spacing: 1px;
  }
  
  .mayor-category {
    font-size: 12px;
    margin-bottom: 6px;
  }
  
  .mayor-wine {
    font-size: 14px;
  }
  
  .mayor-wine strong {
    font-size: 13px;
  }
}

/* Extra Small Mobile (max 480px) */
@media (max-width: 480px) {
  .mayor-card {
    flex-direction: column;
    text-align: center;
  }
  
  .mayor-image-col {
    width: 100%;
    max-width: 180px;
    margin: 0 auto 10px auto;
  }
  
  .mayor-text-col {
    text-align: center;
  }
  
  .mayor-title {
    font-size: 15px;
  }
  
  .mayor-wine {
    font-size: 13px;
  }
}

/* ----------------------------------------
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: 25%;
  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: 767px) {
  .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 (Homepage) - Image Left / Text Right Layout
---------------------------------------- */

/* Winners Section Container */
.winners-section {
  background-color: #ffffff;
  padding: 0 0 10px 0;
}

/* Winners Grid */
.winners-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

/* Individual Winner Column */
.winner-column {
  padding: 10px 15px;
  display: flex;
}

/* Winner Card - Flex container for image + text side by side */
.winner-card {
  background-color: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  width: 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);
}

/* Image Column (Left side) */
.winner-image-col {
  flex-shrink: 0;
  width: 40%;
  max-width: 150px;
}
.winner-text-col a {
	color: #373737;
}

/* Winner Image */
.winner-image {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Text Column (Right side) */
.winner-text-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

/* Winner Title (Judge's Choice, People's Choice, etc.) */
.winner-title {
  font-family: 'Abel', helvetica, sans-serif;
  color: #c41e3a;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 0 5px 0;
  line-height: 1.2;
}

/* Winner Category (Pinot Noir, Chardonnay) */
.winner-category {
  font-family: 'Abel', helvetica, sans-serif;
  color: #666;
  font-size: 14px;
  font-style: italic;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Winner Wine Details */
.winner-wine {
  font-size: 13px;
  color: #333;
  line-height: 1.5;
  margin: 0;
}

.winner-wine strong {
  color: #c41e3a;
  font-size: 14px;
  display: block;
  margin-bottom: 3px;
}

/* Responsive Adjustments */

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
  .winners-section .container {
    max-width: 1170px;
  }
  
  .winner-image-col {
    max-width: 160px;
  }
  
  .winner-title {
    font-size: 17px;
  }
  
  .winner-category {
    font-size: 15px;
  }
  
  .winner-wine {
    font-size: 14px;
  }
  
  .winner-wine strong {
    font-size: 15px;
  }
}

/* Desktop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .winner-image-col {
    max-width: 140px;
  }
  
  .winner-title {
    font-size: 15px;
  }
  
  .winner-category {
    font-size: 13px;
  }
	.winner-text-col {
		text-align: center;
	}
}

/* Tablet and Mobile (480px - 991px) - Centered cards with image-left/text-right */
@media (min-width: 480px) and (max-width: 991px) {
  .winner-column {
    width: 100%;
    padding: 10px 15px;
    display: flex;
    justify-content: center;
  }
  
  .winner-card {
    max-width: 600px;
    width: 100%;
    padding: 15px;
  }
  
  .winner-image-col {
    width: 35%;
    max-width: 140px;
  }
  
  .winner-title {
    font-size: 15px;
  }
  
  .winner-category {
    font-size: 13px;
  }
  
  .winner-wine {
    font-size: 13px;
  }
	.winner-text-col {
		text-align: center;
	}
}

/* Smaller tablets and larger phones (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
  .winners-section {
    padding: 30px 0 15px 0;
  }
  
  .winner-card {
    max-width: 500px;
    padding: 12px;
    gap: 12px;
  }
  
  .winner-image-col {
    width: 38%;
    max-width: 120px;
  }
  
  .winner-title {
    font-size: 14px;
    letter-spacing: 1px;
  }
  
  .winner-category {
    font-size: 12px;
    margin-bottom: 6px;
  }
  
  .winner-wine {
    font-size: 12px;
  }
  
  .winner-wine strong {
    font-size: 13px;
  }
}

/* Extra Small Mobile (max 480px) */
@media (max-width: 480px) {
  .winner-card {
    flex-direction: column;
    text-align: center;
  }
  
  .winner-image-col {
    width: 100%;
    max-width: 180px;
    margin: 0 auto 10px auto;
  }
  
  .winner-text-col {
    text-align: center;
  }
  
  .winner-title {
    font-size: 15px;
  }
  
  .winner-wine {
    font-size: 13px;
  }
}