/* ============================================
   TABLE OF CONTENTS
   ============================================
   1. CSS VARIABLES AND GLOBAL SETUP
   2. TYPOGRAPHY
   3. LAYOUT AND CONTAINERS
   4. HEADER STYLES
   5. MAIN CONTENT STYLES
   6. FOOTER STYLES
   7. BUTTONS AND INTERACTIVE ELEMENTS
   8. YACHT LISTINGS AND COMPONENTS
   9. FORMS AND CONTACT ELEMENTS
   10. MEDIA QUERIES
   11. UTILITY CLASSES
   12. MENU & NAVIGATION
   ============================================ */

/* ============================================
   1. CSS VARIABLES AND GLOBAL SETUP
   ============================================ */
:root {
    --color-primary: #0057a8;
    --color-primary-dark: #003d7a;
    --color-secondary: #f60;
    --color-secondary-dark: #d45500;
    --color-text: #333;
    --color-text-light: #666;
    --color-text-inverted: #fff;
    --color-bg: #fff;
    --color-white: #fff;
    --color-sidebar-bg: #f3f7fa;
    --color-light-gray: #f4f4f4;
    --color-border: #ddd;
    --box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.5;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --container-width: 1200px;
    --container-padding: 15px;
    --sidebar-left-width: 200px;
    --sidebar-right-width: 300px;
    --content-padding: 20px;
    --column-gap: 20px;
    --transition-standard: all 0.3s ease;
    
    /* Contact Form 7 variables */
    --cf7-primary: #0057a8;
    --cf7-primary-dark: #004080;
    --cf7-secondary: #f60;
    --cf7-secondary-dark: #d45500;
    --cf7-text: #333;
    --cf7-text-light: #666;
    --cf7-background: #fff;
    --cf7-input-background: #f9f9f9;
    --cf7-border: #ddd;
    --cf7-border-focus: #0057a8;
    --cf7-error: #dc3232;
    --cf7-success: #46b450;
    --cf7-spacing-xs: 0.25rem;
    --cf7-spacing-sm: 0.5rem;
    --cf7-spacing-md: 1rem;
    --cf7-spacing-lg: 1.5rem;
    --cf7-spacing-xl: 2rem;
    --cf7-border-radius: 4px;
    --cf7-transition: all 0.3s ease;
	--color-light-blue: #ebf7ff;
	--color-weekday: #f1f8ff;
	--color-weekend: #f7f9ff;
	--border-radius: 8px;
}

:root {
    font-synthesis: none;
}

/* 15. Optimize animation performance */
@media (prefers-reduced-motion: no-preference) {
    * {
        scroll-behavior: smooth;
    }
}

/* 12. Reduce composite layers on mobile */
@media (max-width: 768px) {
    .yacht-item,
    .footer-link,
    .book-button {
        transform: none;
        will-change: auto;
    }
}

li{padding-bottom:4px}

html {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}


img {
    max-width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
    border: 0;
}

/* Accessibility: Screen reader text */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(100%);
    border: 0;
}

.screen-reader-text:focus {
    background-color: var(--color-light-gray);
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip-path: none !important;
    color: var(--color-primary);
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: #fff;
    padding: 8px;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* ============================================
   2. TYPOGRAPHY
   ============================================ */
h1, h3, h4, h5, h6 {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
        margin-bottom: 0.5em;
}

h2 {
    color: #1a9da8;
    font-weight: var(--font-weight-bold);
        margin-bottom: 0.5em;
}


h1 {
    font-size: 1.8rem;
}

h2 {
    font-size: 1.2rem;
}

h3 {
    font-size: 1.1rem;
}

h4 {
    font-size: 1rem;
    color: #1a9da8;
}

h5 {
    font-size: 0.9rem;
}

h6 {
    font-size: 0.8rem;
}

p {
    margin-bottom: 1rem;
}


a:hover,
a:focus {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

a:focus {
    outline: var(--focus-outline);
    outline-offset: 2px;
}

a:active,
a:hover {
    outline: 0;
}

ul {
    margin: 0 0 1rem 1.5rem;
    padding-left: 1rem;
}

li > ul {
    margin-bottom: 0;
}

/* ============================================
   3. LAYOUT AND CONTAINERS
   ============================================ */
.site {
    position: relative;
    overflow: hidden;
}


.site-content-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.content-area {
    background-color: var(--color-white);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    flex: 1;
    min-width: 0;
    order: 2;
    padding: 15px;
}

.right-sidebar {
    background-color: var(--color-sidebar-bg);
    border-radius: 4px;
    flex: 0 0 var(--sidebar-right-width);
    order: 3;
    padding: 15px;
}

.archive-content h1 {
	font-size: 1.4rem;
}

.archive-content h2 {
	font-size: 1.7rem;
}

.archive-content .entry-title {
	margin-top: 0;
}

.archive-content. entry-content {
	margin-bottom: 0;
}

.archive-post-thumbnail img {
  border-radius: 0.5rem;
  margin-bottom: 1.5rem
}

.archive-post-divider {
	border-top: 1px solid var(--color-border);
	margin-bottom: 1.5rem
}

.archive-description {
	  font-style: italic
}

/* ============================================
   4. HEADER STYLES
   ============================================ */
.site-header {
    padding: 20px 0 0;
    border-bottom: none;
}

.site-header .site-container {
    display: block;
    max-width: var(--container-width);
}



.site-title {
    margin: 0 0 5px;
    line-height: 1.2;
}

.site-description {
    margin: 0;
    font-size: 14px;
    color: #666;
}



@media (min-width: 769px) {
.logo-link {
	padding-left: 50px;
	padding-right: 40px	
}
}

.logo {
    display: block;
    max-width: 150px;
    width: 100%;
    height: auto;
    transition: filter 0.4s ease, transform 0.4s ease;
}

.logo-link:hover {
    transform: translateY(-2px);
}

.logo-link:hover .logo {
    filter: brightness(1.1);
}

.logo-link::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(0, 87, 168, 0.3), transparent);
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0;
    transform: scaleX(0.8);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.logo-link:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.custom-logo {
    max-height: 60px;
    width: auto;
}

.custom-logo-link {
    margin-right: 1rem;
}

.header-phone {
    margin-left: 5px;
}

/* ============================================
   5. MAIN CONTENT STYLES
   ============================================ */
/* Post and page styles */
.post_box {
    margin-bottom: 1.8rem;
}

.headline_area {
    margin-bottom: 1rem;
}

.format_text {
    overflow: hidden;
}

.post_image {
    border-radius: 0.5rem;
    float: left;
    margin: 0 1.5rem 1.2rem 0;
    max-width: 100%;
    overflow: hidden;
}

.post_image img,
.search-post-thumbnail img {
    border-radius: 0.5rem;
    height: auto;
    overflow: hidden;
    width: 100%;
}

.entry-content img,
.format_text img {
    border-radius: 0.5rem;
}

.wp-post-image {
    border-radius: 0.5rem;
}

.post_tags {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-top: 1.5rem;
}

.post_tags a {
    color: var(--color-primary);
}

.prev_next {
    border-top: 1px solid var(--color-border);
    margin: 2rem 0;
    padding-top: 1rem;
}

.entry-title {
    margin-top: -20px;
}

.post-divider {
    background-color: #e0e0e0;
    clear: both;
    height: 1px;
    margin: 2rem 0;
    width: 100%;
}

.comments-area {
    border-top: 1px solid var(--color-border);
    margin-top: 2rem;
    padding-top: 1rem;
}

/* Background styled post boxes */
.post_box[style*="background"] {
    border-radius: 4px;
    margin-bottom: 1.5rem;
    padding: 1rem;
}

.post_box[style*="background"].format_text {
    color: var(--color-white);
}

.post_box[style*="background"] h2 {
    color: var(--color-white);
}

.post_box[style*="background"] a {
    color: var(--color-white);
    text-decoration: underline;
}

/* Search results */
.search-post-thumbnail {
    display: block;
    float: none;
    margin: 0 0 1.2rem;
    max-width: 100%;
    width: 620px;
}

/* Gallery styling */
.gallery {
    display: flex;
    flex-wrap: wrap;
    margin: -5px;
}

.gallery-item {
    padding: 5px;
    text-align: center;
}

.gallery-columns-1 .gallery-item {
    width: 100%;
}

.gallery-columns-2 .gallery-item {
    width: 50%;
}

.gallery-columns-3 .gallery-item {
    width: 33.33%;
}

.gallery-columns-4 .gallery-item {
    width: 25%;
}

.gallery-columns-5 .gallery-item {
    width: 20%;
}

.alignnone {
    margin-bottom: 1.5rem;
}

/* Promotional boxes */
.promotional-box {
    background: #fc6b03;
}

.promotional-box .promo-link {
    color: #266ab0;
}

.promotional-box h2 {
    color: #fff;
    font-size: 1.6em;
    line-height: 1.3em;
    margin-left: 1.2em;
    margin-right: 0.8em;
}

.promotional-box p {
    margin-top: -1.4em;
}

/* ============================================
   6. FOOTER STYLES
   ============================================ */
.site-footer {
    background-color: var(--color-bg);
    border-top: 4px double var(--color-border);
    color: var(--color-text);
    font-family: var(--font-primary);
        line-height: 1.4;
    margin-top: 2rem;
    padding-bottom: 1.5rem;
    padding-top: 2rem
}

.home .site-footer:not(.site-footer) {
    margin-top: 0;
}

.site-footer h3 {
    color: var(--color-primary);
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 12px;
    position: relative;
}

.site-footer h3.text-primary-second {
    margin-top: 16px;
}

.footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.footer-column {
    flex: 1 1 200px;
    margin-bottom: 1rem;
}

.footer-column.footer-yacht-services {
    min-width: 120px;
    padding-left: 0;
}

.footer-column.footer-additional-services,
.footer-column.footer-contact,
.footer-column.footer-details {
    min-width: 200px;
}

.footer-column.footer-logo {
    margin-right: -70px;
}

.footer-column ul.space-y-2 {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-column ul.space-y-2 li {
    margin-bottom: 4px;
}

.footer-link {
    color: var(--color-text);
    display: inline-block;
    font-size: 14px;
    padding: 0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--color-primary);
}

.site-footer .logo-container {
    display: block;
    transition: transform 0.3s ease;
}

.site-footer .logo-container img,
.site-footer .logo-container svg {
    display: block;
    height: auto;
    max-width: 120px;
}

.site-footer .logo-container:hover {
    transform: translateY(-5px);
}

.footer-details .space-y-3 {
    margin: 0;
    padding: 0;
}

.footer-details .space-y-3 p {
    margin-bottom: 6px;
}

.contact-row {
    margin-bottom: 0.75rem;
}

.contact-row a {
    align-items: center;
    color: var(--color-text);
    display: flex;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-row a:hover {
    color: var(--color-primary);
}

.contact-row img {
    height: 20px;
    margin-right: 10px;
    width: 20px;
}

.footer-contact .space-y-4 {
    margin-bottom: 1rem;
}

.footer-contact h3 {
    display: inline-block;
    margin-right: 1rem;
}

.flex .gap-3 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center
}

.social-icon {
	margin-right: 8px; 
    align-items: center;
    border-radius: 50%;
    color: var(--color-text);
    display: flex;
    height: 2rem;
    justify-content: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
    width: 2rem;
}

.social-icon:hover {
    color: #fff;
    opacity: 0.8;
    transform: scale(1.2);
}

.footer-locations {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}

.footer-locations h3 {
    margin: 0;
    margin-right: 0.5rem;
    white-space: nowrap;
}

.footer-location-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.location-link {
    background-color: var(--color-light-gray);
    border-radius: 0.25rem;
    color: var(--color-text);
    font-size: 13px;
    padding: 4px 8px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.location-link:hover {
    background-color: var(--color-primary);
    color: #fff;
}

.footer-bottom {
    border-top: 2px solid var(--color-light-gray);
    margin-top: 1rem;
    padding-top: 1rem;
    text-align: center;
}

.footer-copyright {
    color: var(--color-text-light);
    font-size: 13px;
    margin-bottom: 0.5rem;
    text-align: center;
}

.footer-nav-links {
    display: block;
    text-align: center;
    width: 100%;
}

.footer-nav-links a {
    color: var(--color-text-light);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nav-links a:hover {
    color: var(--color-primary);
}

/* Back to top button */
.back-to-top {
    align-items: center;
    background-color: var(--color-primary);
    border: none;
    border-radius: 9999px;
    bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    color: #fff;
    cursor: pointer;
    display: flex;
    height: 2.5rem;
    justify-content: center;
    opacity: 0;
    position: fixed;
    right: 2rem;
    transition: all 0.3s ease;
    visibility: hidden;
    width: 2.5rem;
    z-index: 99;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: var(--color-primary-dark);
}

/* ============================================
   7. BUTTONS AND INTERACTIVE ELEMENTS
   ============================================ */


.details-link {
    color: var(--color-text-light);
        text-decoration: underline;
    transition: color 0.3s ease;
    padding-right: 5px
}

.details-link:hover {
    color: var(--color-primary);
    text-decoration: none
}

.promo-link {
    background-color: #fff;
    border-radius: 20px;
    color: #266ab0;
    display: inline-block;
    font-weight: 600;
    margin-left: 10px;
    padding: 5px 15px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.promo-link:hover {
    background-color: #0057a8;
    color: #fff;
    text-decoration: none;
}

.search-form-container {
    position: relative;
    z-index: 2;
}

.search_form .text_input {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: #789;
    font-size: 0.9rem;
    padding: 8px;
    width: 100%;
}

.right-sidebar h3,
.widget-title {
        color: #1a9da8 !important;
    font-size: 1.2rem;
}

.sidebaroffers-title {
	color: #1a9da8;
height: 2.7rem;
border-bottom: 1px solid #e0e0e0;
text-align: center;
font-weight: 400
}

.right-sidebar-widget {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
}

/* ============================================
   8. YACHT LISTINGS AND COMPONENTS
   ============================================ */
.yacht-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr;
    margin-bottom: 40px;
}

.yacht-item {
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease
}

.yacht-item:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.yacht-item:hover .yacht-image img {
    transform: scale(1.03);
}

.yacht-image {
    /*height: 220px; -> aizkomentēts 17.06.25 */
    overflow: hidden;
    position: relative;
}

.yacht-image img {
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    width: 100%;
}

.yacht-content {
    padding: 20px
}

.yacht-title {
    color: var(--color-primary);
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.yacht-title a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.yacht-title a:hover {
    color: var(--color-primary-dark);
}

.yacht-description {
    color: #333;
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.yacht-specs {
    margin-bottom: 20px;
}

.yacht-specs ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.yacht-specs li {
        padding: 5px 0 5px 22px;
    position: relative;
}

.yacht-specs li:before {
    background-color: #0057a8;
    border-radius: 50%;
    content: '';
    display: block;
    height: 6px;
    left: 8px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
}

.yacht-specs a, .entry-content a {
  text-decoration: underline
}

.yacht-actions {
    align-items: center;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
}

.yacht-card {
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.yacht-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.yacht-card:hover .yacht-thumbnail {
    transform: scale(1.03);
}

.yacht-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 20px;
}

.yacht-thumbnail {
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    width: 100%;
}

.yacht-actions {
    align-items: center;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 15px;
}

/* Yacht listing page */
.yacht-listings-container {
    margin: 0 auto;
    max-width: var(--container-width);
    padding: 0 var(--container-padding);
    width: 100%;
}

.yacht-listings-content {
    background-color: var(--color-white);
    padding: 20px 0;
    width: 100%;
}

.yacht-page-header {
    margin-bottom: 30px;
}

.page-title {
    color: var(--color-primary);
    font-size: 2rem;
    margin-bottom: 0.75rem;
}


.yacht-promo-banner {
    background-color: #fc6b03;
    border-radius: 4px;
    color: #fff;
    margin-bottom: 30px;
    padding: 15px 20px;
    text-align: center;
}

.promo-banner{
	padding-top: 15px
}

.yacht-promo-banner h2 {
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.4;
    margin: 0;
}

.jn-yacht-book {
margin:.5rem 0
}

.jn-yacht-book-link {
color:#3a7a84;
font-weight:500;
text-decoration:none;
  position: relative;
  padding-left: 20px;
  display: inline-block
}

.jn-yacht-book-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%; /* Center vertically relative to the text */
  transform: translateY(-50%); /* Perfect vertical centering */
  width: 14px;
  height: 14px;
  background-image: url(/wp-content/themes/jahtu-noma/assets/images/chevron-simple.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease; /* Add transform for hover effect */
}

.jn-yacht-book-link:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(3px); /* Move slightly right on hover */
}

.jn-yacht-book-link:hover {
color:#003d7a;
text-decoration:underline
}

.jn-yacht-desc {
color:#333;
font-size:.9rem;
line-height:1.5;
margin-bottom:.5rem
}

.jn-yacht-img {
border-radius:.25rem;
display:block;
height:auto;
width:100%;
aspect-ratio: 257/148;
}

.jn-yacht-img-link {
display:block;
margin-bottom:1rem;
width:100%
}

.jn-yacht-offer {
background-color:#f5f7fa;
margin-bottom:.9rem;
padding:.4rem
}

.jn-yacht-offer:not(:last-child) {
border-bottom:1px solid #e2e8f0
}

.jn-yacht-title {
font-size:1.1rem;
line-height:1.2;
margin:0 0 .8rem;
}

.jn-yacht-title a {
color:#3a7a84;
font-weight:700;
text-decoration:none;
text-transform:uppercase
}

.jn-yacht-title a:hover {
color:#003d7a
}

/* ============================================
   9. FORMS AND CONTACT ELEMENTS
   ============================================ */
/* Contact Form 7 Styling */
.wpcf7 {
    animation: formFadeIn 0.4s ease-out;
    font-family: Arial, sans-serif;
    max-width: 70%;
}

.wpcf7 form {
    margin: 0;
    padding: 0;
}

.wpcf7 p {
    color: var(--cf7-text);
    font-size: 1rem;
    font-weight: bolder;
    line-height: 1.6;
    margin-bottom: var(--cf7-spacing-md);
}



.wpcf7-form p {
        margin-top: 0.3rem;
}

.wpcf7-form-control-wrap {
    display: block;
    margin-bottom: var(--cf7-spacing-sm);
    position: relative;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--cf7-input-background);
    border: 1px solid var(--cf7-border);
    border-radius: var(--cf7-border-radius);
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.08);
    color: #979797;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    padding: 0.75rem 1rem;
    transition: var(--cf7-transition);
    width: 100%;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 input[type="date"]:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
    background-color: #fff;
    border-color: var(--cf7-border-focus);
    box-shadow: 0 0 0 3px rgba(0, 87, 168, 0.15);
    outline: none;
}

.wpcf7 select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
    padding-right: 2.5rem;
}

.wpcf7 textarea {
    min-height: 120px;
    resize: vertical;
}

.wpcf7 input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--cf7-secondary);
    border: none;
    border-radius: var(--cf7-border-radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    margin-top: var(--cf7-spacing-md);
    min-width: 150px;
    padding: 0.875rem 1.5rem;
    text-align: center;
    text-decoration: none;
    transition: var(--cf7-transition);
    width: auto;
}

.wpcf7 input[type="submit"]:hover {
    background-color: var(--cf7-secondary-dark);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.wpcf7 input[type="submit"]:focus {
    box-shadow: 0 0 0 3px rgba(246, 102, 0, 0.3);
    outline: none;
}

.wpcf7 input[type="submit"]:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
}

.wpcf7 .wpcf7-not-valid-tip {
    color: var(--cf7-error);
    display: block;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid {
    background-color: rgba(220, 50, 50, 0.03);
    border-color: var(--cf7-error);
}

.wpcf7 .wpcf7-response-output {
    border: 1px solid #ddd;
    border-radius: var(--cf7-border-radius);
    color: var(--cf7-text);
    font-size: 0.9rem;
    margin: var(--cf7-spacing-lg) 0 0;
    padding: var(--cf7-spacing-md);
    text-align: center;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    background-color: rgba(220, 50, 50, 0.05);
    border-color: var(--cf7-error);
}

.wpcf7 form.sent .wpcf7-response-output {
    background-color: rgba(70, 180, 80, 0.05);
    border-color: var(--cf7-success);
}

.screen-reader-response {
    border: 0;
    clip-path: inset(100%);
    height: 1px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.wpcf7 .ajax-loader {
    background-color: transparent !important;
    background-image: none !important;
    height: 20px;
    margin-left: 10px;
    position: relative;
    width: 20px;
}

.wpcf7 .ajax-loader::before {
    animation: wpcf7-spin 0.8s infinite linear;
    border: 2px solid #ccc;
    border-radius: 50%;
    border-top-color: var(--cf7-primary);
    box-sizing: border-box;
    content: '';
    height: 20px;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    position: absolute;
    top: 50%;
    width: 20px;
}

@keyframes wpcf7-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes formFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   10. MEDIA QUERIES
   ============================================ */
/* Extra small devices (phones) */
@media (max-width: 480px) {
    :root {
        --container-padding: 10px;
    }

    .logo {
        max-width: 100px;
    }

    .logo-link {
        margin-right: 10px;
    }

    .site-branding {
        margin-bottom: 1rem;
    }

    .site-header .site-container {
        flex-direction: column;
        text-align: center;
    }
    
    .left-menu .current-menu-ancestor::before {
        top: 0;
        margin-top: 0.95px;
    }
}

/* Small devices (landscape phones) */
@media (max-width: 576px) {
    .footer-locations {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .site-title-wrapper {
    padding-right: 5px
}

    .footer-locations h3 {
        margin-bottom: 0.5rem;
    }
    
    .wpcf7 {
        max-width: 540px;
        width: 100%;
    }

    .wpcf7 input[type="submit"] {
        min-width: 180px;
    }
}

/* Medium devices (tablets) */
@media (max-width: 767px) {
    .post_image {
        float: none;
        margin: 0 0 1rem;
        max-width: 100%;
    }

    .footer-bottom {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .footer-column {
        flex-basis: 100%;
    }

    .footer-column.footer-logo {
        margin-right: 0;
    }

    .footer-copyright,
    .footer-nav-links {
        margin-bottom: 0.5rem;
        text-align: center;
    }

    .jn-yacht-offer {
        padding: 1rem;
    }

    .logo {
        max-width: 120px;
    }

    .logo-link {
        margin-right: 15px;
    }
    
    .site-footer .logo-container img,
    .site-footer .logo-container svg {
        width: 100px;
    }
    
    .yacht-actions {
        flex-direction: column;
        gap: 10px;
    }

    .book-button,
    .details-link {
        text-align: center;
        width: 100%;
    }


    
    
    .yacht-content {
        padding: 15px;
    }

    .yacht-title {
        font-size: 1.3rem;
    }
    
    .wpcf7 {
        max-width: 720px;
    }
}

/* Large devices (desktops) */
@media (min-width: 768px) {
    .yacht-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Extra large devices (large desktops) */
@media (min-width: 992px) {
    .yacht-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .wpcf7 {
        max-width: 960px;
    }

    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="url"],
    .wpcf7 input[type="tel"],
    .wpcf7 input[type="number"],
    .wpcf7 input[type="date"],
    .wpcf7 textarea,
    .wpcf7 select {
        font-size: 1.05rem;
    }

    .wpcf7 p {
        font-size: 1.05rem;
    }
}

/* Special device sizes */
@media (min-width: 768px) and (max-width: 991px) {
    .footer-columns {
        gap: 8px;
    }

    .footer-contact div:last-child {
        display: flex;
        align-items: center;
    }

    .footer-contact div:last-child h3 {
        margin-bottom: 0;
        margin-right: 1rem;
    }
}

@media (min-width: 769px) and (max-width: 991px) {
    .left-sidebar {
        flex: 0 0 200px;
    }
}

@media (max-width: 900px) {
    .content-area,
    .left-sidebar,
    .right-sidebar {
        flex: 0 0 100%;
        margin-bottom: 20px;
        max-width: 100%;
        padding: 15px;
    }

    .content-area {
        order: 2;
    }

    .left-sidebar {
        order: 1;
    }

    .right-sidebar {
        order: 3;
    }

    .site-content-container {
        flex-direction: column;
        gap: 0;
    }
}

@media (max-width: 1024px) {
    :root {
        --sidebar-left-width: 180px;
        --sidebar-right-width: 250px;
    }
    
    .footer-column.footer-logo {
        margin-right: -40px;
    }
}

@media (min-width: 1200px) {
    .site-container {
        padding-left: 0;
        padding-right: 0;
    }

    .site-footer .logo-container img,
    .site-footer .logo-container svg {
        width: 120px;
    }
    
    .wpcf7 {
        max-width: 70%;
    }
}

/* Small mobile screens - extra adjustments */



/* Special media queries for specific components */
@media (prefers-reduced-motion: reduce) {
    .wpcf7,
    .wpcf7 input,
    .wpcf7 textarea,
    .wpcf7 select,
    .wpcf7 .ajax-loader::before {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ============================================
   11. UTILITY CLASSES
   ============================================ */
/* Connection status indicator */
.connection-status {
    background-color: rgba(255, 0, 0, 0.8);
    color: white;
    display: none;
    font-weight: bold;
    left: 0;
    padding: 10px;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    z-index: 9999;
}

/* ============================================
   12. MENU & NAVIGATION
   ============================================ */

/* --------- Base Navigation Elements --------- */

/* Main Navigation - Desktop */
.header-navigation-wrapper {
background-color: transparent;
margin-bottom: 20px;
border-top: none;
margin-top: 0 !important;
min-height: 55px
}

.header-navigation {
    width: 100%;
    margin-bottom: 0;
    background-color: transparent;
    position: relative;
    border-bottom: 1px solid #e0e0e0 /*AZ pievienots 01.04.*/
}

.header-navigation ul.header-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.header-navigation li {
    position: relative;
}

.header-navigation a {
    display: block;
    padding: 12px 10px;
    color: var(--color-primary, #0057a8);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    position: relative;
    transition: color 0.3s ease;
}

/* Hover effect for navigation links */
.header-navigation a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: var(--color-secondary, #f60);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.header-navigation a:hover:after,
.header-navigation a:focus:after {
    width: 70%;
}

.header-navigation a:hover,
.header-navigation a:focus {
    background-color: transparent;
    color: var(--color-primary, #0057a8);
    text-decoration: none;
}

/* Desktop sub-menu styling */
.header-navigation .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
    border-radius: 0 0 4px 4px;
}

.header-navigation li:hover > .sub-menu {
    display: block;
}

.header-navigation .sub-menu li {
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
}

.header-navigation .sub-menu li:last-child {
    border-bottom: none;
}

.header-navigation .sub-menu a {
    padding: 10px 15px;
}

.header-navigation .sub-menu a:after {
    display: none;
}

/* --------- Mobile Menu Toggle Button --------- */
.mobile-menu-toggle {
    position: fixed;
    top: calc(var(--header-height, 348px) / 2 - 22px);
    left: 15px;
    z-index: 9999;
    width: 44px;
    height: 44px;
    background-color: #ffffff !important; /* White background */
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.2s ease, left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important; /* Keep shadow */
    border: 1px solid #e0e0e0 !important; /* Light border for definition */
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
    background-color: #f8f8f8 !important;
}

.mobile-menu-toggle:active {
    transform: scale(0.95);
}

.mobile-menu-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Hamburger icon */
.hamburger-icon {
    position: relative;
    width: 24px;
    height: 2px;
    background-color: var(--color-primary, #0057a8)!important;
    display: block;
    transition: background-color 0.3s ease;
}

.hamburger-icon:before,
.hamburger-icon:after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: var(--color-primary, #0057a8)!important;
    left: 0;
    transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease;
}

.hamburger-icon:before {
    top: -8px;
}

.hamburger-icon:after {
    bottom: -8px;
}

/* X icon when menu is open */
.mobile-menu-toggle.is-active .hamburger-icon {
    background-color: transparent !important;
}

.mobile-menu-toggle.is-active .hamburger-icon:before {
    top: 0;
    transform: rotate(45deg);
    background-color: var(--color-primary, #0057a8)!important;
}

.mobile-menu-toggle.is-active .hamburger-icon:after {
    bottom: 0;
    transform: rotate(-45deg);
    background-color: var(--color-primary, #0057a8)!important;
}

/* Position the button to move with the sidebar when open */
.mobile-menu-toggle.is-active {
    left: calc(85% - 54px);
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; 
}

/* --------- Left Sidebar Navigation --------- */
.left-sidebar {
    background-color: var(--color-sidebar-bg, #f3f7fa);
    border-radius: 4px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 85%;
    max-width: 300px;
    padding: 15px;
    overflow: hidden;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    -webkit-backface-visibility: hidden;
}

.left-sidebar.is-active {
    transform: translateX(0);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.left-sidebar-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 87, 168, 0.5) transparent;
    transition: transform 0.3s ease;
}

.left-sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.left-sidebar-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 87, 168, 0.5);
    border-radius: 3px;
}

.left-sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

.left-sidebar-content h3 {
    font-size: 1.2rem;
    padding-top: 0.8rem;
}

/* Left sidebar menu items */
.left-menu,
.left-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.left-menu li {
    position: relative;
    margin-bottom: 3px;
    padding-left: 14px;
}

.left-menu li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 28%;
    width: 14px;
    height: 14px;
    background-image: url(/wp-content/themes/jahtu-noma/assets/images/chevron-simple.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.left-menu a {
    color: var(--color-primary, #0057a8);
    display: block;
    font-size: 1rem;
    padding: 10px 0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.left-menu a:hover,
.left-menu a:focus {
    color: var(--color-secondary, #f60);
    text-decoration: none;
}

.left-menu a:focus {
    outline: 2px solid var(--color-primary, #0057a8);
    outline-offset: 2px;
}

.left-menu a:focus-visible {
    outline: 3px solid var(--color-secondary, #f60);
    outline-offset: 3px;
}

/* Current menu item styling */
.left-menu .current-menu-item > a,
.left-menu .current-menu-ancestor > a {
    color: var(--color-secondary, #f60);
    font-weight: 700;
}

.left-menu .current-menu-item::before,
.left-menu .current-menu-ancestor::before {
    opacity: 1;
}

/* Submenu handling */
.left-menu .menu-item-has-children {
    position: relative;
}

.left-menu .menu-item-has-children::before {
	top:4% !important
}

.left-menu .menu-item-has-children > a {
    display: block;
    width: calc(100% - 40px);
    padding-right: 40px;
}

.left-menu .sub-menu {
    list-style: none;
    margin: 0;
    display: none;
    overflow: hidden;
}

.left-menu .sub-menu li {
        padding-left: 16px;
    position: relative;
}

.left-menu .sub-menu li::before {
    background-image: url(/wp-content/themes/jahtu-noma/assets/images/chevron-double.svg);
    width: 12px;
    height: 12px;
    left: 0;
    top: 18% !important;
    position: absolute;
}


/* Overlay for mobile menu */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

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

/* --------- Mobile-Specific Styles --------- */
@media (max-width: 767px) {
    /* Header navigation mobile styles */
    .header-navigation ul#header-menu,
    #site-navigation ul#primary-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #fff;
        z-index: 100;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        padding: 10px 0;
        border-bottom: 1px solid #e0e0e0;
    }
    
    /* Ensure proper contrast on all device sizes */
@media (max-width: 576px) {
    .mobile-menu-toggle,
    .header-menu-toggle {
        border: 1px solid #e5e5e5 !important; /* Slightly more visible border on small screens */
    }
}
    
    /* Show menu when toggled */
    .header-navigation ul#header-menu.toggled,
    #site-navigation ul#primary-menu.toggled {
        display: flex;
    }
    
    /* Style the toggle button */
    .header-menu-toggle,
    #site-navigation .menu-toggle {
        display: block;
        background-color: var(--color-primary, #0057a8);
        color: #fff;
        border: none;
        padding: 8px 12px;
        border-radius: 4px;
        cursor: pointer;
        margin-left: auto;
        margin-bottom: 10px;
        font-size: 16px;
    }
    
    .header-toggle-icon {
        display: inline-block;
        width: 18px;
        height: 2px;
        background-color: #0057a8 !important;
        position: relative;
        vertical-align: middle;
        transition: background-color 0.3s ease;
    }
    
    .header-toggle-icon:before,
    .header-toggle-icon:after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #fff;
        transition: transform 0.3s ease;
    }
    
    .header-toggle-icon:before {
        top: -6px;
                background-color: #0057a8 !important;
    }
    
    .header-toggle-icon:after {
        bottom: -6px;
                background-color: #0057a8 !important;
    }
   
    
    /* X icon when menu is open */
    .header-menu-toggle[aria-expanded="true"] .header-toggle-icon {
        background-color: transparent !important;
    }
    
    .header-menu-toggle[aria-expanded="true"] .header-toggle-icon:before {
        transform: rotate(45deg);
        top: 0;
    }
    
    .header-menu-toggle[aria-expanded="true"] .header-toggle-icon:after {
        transform: rotate(-45deg);
        bottom: 0;
    }
    
    .header-menu-toggle[aria-expanded="true"] .header-toggle-icon:before,
.header-menu-toggle[aria-expanded="true"] .header-toggle-icon:after {
    background-color: #0057a8 !important; /* Keep blue color for X */
}
    
    /* Header menu item styling */
    .header-navigation li,
    #site-navigation li {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .header-navigation li:last-child,
    #site-navigation li:last-child {
        border-bottom: none;
    }
    
    .header-navigation a,
    #site-navigation a {
        padding: 12px 20px;
        display: block;
        width: 100%;
    }
    
    /* Header submenu styling */
    .header-navigation .sub-menu,
    #site-navigation .sub-menu {
        display: none;
        position: static;
        width: 100%;
        box-shadow: none;
        padding-left: 20px;
        background-color: #f5f5f5;
        border-radius: 0;
    }
    
    .header-navigation .sub-menu.toggled,
    #site-navigation .sub-menu.toggled {
        display: block;
    }
    
    #site-navigation .submenu-toggle {
        position: absolute;
        right: 10px;
        top: 8px;
        background: transparent;
        border: none;
        color: var(--color-primary, #0057a8);
        font-size: 20px;
        padding: 5px 10px;
        cursor: pointer;
    }
    
    /* Display mobile toggle button */
    .mobile-menu-toggle {
        display: flex;
    }
    
    .header-menu-toggle,
#site-navigation .menu-toggle {
    background-color: #ffffff !important; /* White background */
    color: #0057a8 !important; /* Blue text color if any */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important; /* Keep shadow */
    border: 1px solid #e0e0e0 !important; /* Light border for definition */
}

    /* Left sidebar menu mobile adjustments */
    .left-menu li::before {
        top: 36%;
    }
    
    .left-menu .sub-menu li::before {
        top: 48%;
    }
    
    .left-menu .current-menu-ancestor::before {
        top: 0;
        margin-top: 0.2rem;
    }
    
    /* Force left sidebar to be fixed position on mobile */
    .left-sidebar {
        position: fixed !important;
        width: 85% !important;
        max-width: 300px !important;
        will-change: transform;
    }
    
    /* Fix for iOS Safari */
    #left-sidebar, .left-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        max-height: -webkit-fill-available !important;
        width: 85% !important;
        max-width: 300px !important;
        transform: translateX(-100%) !important;
        -webkit-transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background-color: #f3f7fa !important;
        z-index: 999 !important;
        margin: 0 !important;
        visibility: visible !important;
        display: block !important;
    }
    
    #left-sidebar-content, .left-sidebar-content {
        height: auto !important;
        min-height: 100% !important;
        padding-bottom: 60px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #left-sidebar.is-active, .left-sidebar.is-active {
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Force menu items to display properly */
    .left-sidebar.is-active .menu-item,
    .left-sidebar.is-active li,
    .left-sidebar.is-active ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 3 !important;
    }
    
    .left-sidebar.is-active a,
    .left-sidebar.is-active button {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 4 !important;
    }
    
    /* Left submenu more visible */
    .left-menu .sub-menu {
        padding-left: 5px;
        margin-left: 0;
    }
    
    .left-menu .sub-menu li::before {
        top: 1.1rem;
    }
}

/* Extra small devices */
@media (max-width: 430px) {
    .left-menu .current-menu-ancestor::before {
        top: 0;
        margin-top: 0.95px;
    }
}

/* iOS-specific fixes */
@media screen and (max-width: 767px) {
    /* iOS detection classes */
    .ios-device #left-sidebar, 
    .ios-device .left-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        max-height: -webkit-fill-available !important;
        width: 85% !important;
        max-width: 300px !important;
        transform: translateX(-100%) !important;
        -webkit-transform: translateX(-100%) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        will-change: transform !important;
        -webkit-backface-visibility: hidden !important;
    }
    
    /* Active state - different approach for iOS */
    .ios-device #left-sidebar.is-active,
    .ios-device .left-sidebar.is-active {
        transform: none !important;
        -webkit-transform: none !important;
        left: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Force menu content visibility */
    .ios-device .left-sidebar.is-active .left-sidebar-content,
    .ios-device .left-sidebar-content.is-active {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    /* Fix hamburger positioning on active state */
    .mobile-menu-toggle.is-active {
        left: calc(85% - 54px) !important;
        right: 10px !important;
    }
    
    /* Make sure the toggle is always visible */
    #mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        z-index: 99999 !important;
        width: 44px !important;
        height: 44px !important;
        transition: left 0.3s ease, right 0.3s ease !important;
    }
    
    /* Fix for fixed positioning in iOS */
    body.ios-device.sidebar-open {
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }
    
    /* Fix for Safari viewport height issues */
    html.ios-device {
        height: -webkit-fill-available !important;
    }
    
    body.ios-device {
        min-height: 100vh !important;
        min-height: -webkit-fill-available !important;
    }
    
    /* Ensure the overlay is visible and covers everything */
    #sidebar-overlay, .sidebar-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
        z-index: 998 !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }
}

/* Desktop styles */
@media (min-width: 768px) {
    /* Hide mobile toggle on desktop */
    .mobile-menu-toggle {
        display: none;
    }
    
    /* Position the left sidebar as part of layout on desktop */
    .left-sidebar {
        flex: 0 0 var(--sidebar-left-width, 200px);
        max-width: none;
        order: 1;
        position: static;
        transform: none;
        transition: none;
        width: auto;
        padding: 15px;
    }
    
    /* Fix submenu display on desktop */
    .left-menu .menu-item-has-children > a {
        padding-right: 0;
    }
    
    .left-menu .sub-menu {
        display: block;
        max-height: none;
    }
    
    .left-menu a {
        font-size: 0.9rem;
        padding: 5px 0;
    }
    
    .left-sidebar-content {
        height: auto;
        max-height: none;
        transform: none;
    }
    
    /* Hide mobile elements on desktop */
    .mobile-menu-toggle,
    .sidebar-overlay {
        display: none;
    }
    
    /* Hide header menu toggles on desktop */
    .header-menu-toggle,
    #site-navigation .menu-toggle {
        display: none;
    }
    
    .header-navigation ul#header-menu,
    #site-navigation ul#primary-menu {
        display: flex;
    }
    
    #site-navigation .submenu-toggle {
        display: none;
    }
}

/* Reduce animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .left-sidebar,
    .left-sidebar-content,
    .sidebar-overlay,
    .hamburger-icon,
    .hamburger-icon:before,
    .hamburger-icon:after,
    .mobile-menu-toggle,
    .header-navigation a:after {
        transition-duration: 0.1s;
    }
}
    
        
      
/* ============================================
   COMPACT YACHT PRICING PAGE STYLES
   Mobile-first, optimized for Core Web Vitals
   ============================================ */

/* Container and base layout - more compact */
.yacht-listings-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0px;
}

.yacht-listings-content {
    width: 100%;
    padding: 15px 0;
    background-color: #fff;
}

/* Page introduction - compact spacing */
.ypp-page-intro {
    padding: 1rem;
    background-color: var(--color-light-blue, #ebf7ff);
    border-radius: var(--border-radius, 8px);
    text-align: center;
}

.ypp-page-intro a {
	text-decoration: underline
}

.ypp-page-intro h1 {
    color: var(--color-primary, #0057a8);
    font-size: clamp(1.4rem, 4vw, 1.8rem);
    margin-bottom: 0.5rem;
    position: relative;
}

.ypp-page-intro h1::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background-color: var(--color-secondary, #f60);
    margin: 0.5rem auto 0;
}

.ypp-page-intro p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

/* Yacht sections - significantly reduced spacing */
.ypp-yacht-section {
    margin: 1.5rem 0;
    padding: 1.5rem 0;
}

.ypp-yacht-section:last-of-type {
    border-bottom: none;
}

.ypp-page-header {
    margin: 1rem 0;
    position: relative;
}

.ypp-page-header h2 {
    color: var(--color-primary, #0057a8);
    font-size: clamp(1.3rem, 3.5vw, 1.6rem);
    margin-bottom: 0.5rem;
    position: relative;
    display: inline-block;
}

.ypp-page-header h2::after {
    content: '';
    display: block;
    width: 50%;
    height: 2px;
    background-color: var(--color-secondary, #f60);
    position: absolute;
    bottom: -4px;
    left: 0;
}

.ypp-booking-link {
    color:#C75300;
    text-decoration: underline;
    font-weight: 600;
    margin-left: 8px;
    transition: var(--transition-standard, all 0.3s ease);
    white-space: nowrap;
    font-size: 0.9rem
}

.ypp-booking-link:hover {
    color: var(--color-secondary-dark, #d45500);
    text-decoration: underline
}

.ypp-yacht-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    margin: 1rem 0;
}

.ypp-yacht-gallery img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius, 8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.ypp-yacht-gallery img:hover {
    transform: scale(1.02);
}

/* Yacht description - compact spacing */
.ypp-yacht-description {
    margin: 1rem 0;
    line-height: 1.6;
    font-size: 1rem;
}

.ypp-yacht-description a {
    color: var(--color-primary, #0057a8);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition-standard, all 0.3s ease);
}

.ypp-yacht-description a:hover {
    color: var(--color-secondary, #f60);
}

/* Contact info - more compact */
.ypp-contact-info {
    background-color: var(--color-light-blue, #ebf7ff);
    padding: 1rem;
    border-radius: var(--border-radius, 8px);
    margin: 1rem 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
}

.ypp-contact-info p {
    margin: 0;
    font-size: 0.95rem;
}

.ypp-contact-info a {
    color: var(--color-primary, #0057a8);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition-standard, all 0.3s ease);
}

.ypp-contact-info a:hover {
    color: var(--color-secondary, #f60);
}

/* Price section - compact spacing */
.ypp-price-section {
    margin: 1.5rem 0;
}

.ypp-price-title {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--color-primary, #0057a8);
    font-size: clamp(1.2rem, 3vw, 1.4rem);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
}

.ypp-price-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background-color: var(--color-secondary, #f60);
    margin: 0.5rem auto 0;
}

/* Price table - more compact */
.ypp-price-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    border-radius: var(--border-radius, 8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ypp-price-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: var(--border-radius, 8px);
    overflow: hidden;
    font-size: 0.9rem;
}

.ypp-price-table th, 
.ypp-price-table td {
    padding: 10px 12px;
    text-align: center;
    border: 1px solid var(--color-border, #ddd);
}

.ypp-price-table th {
    background-color: var(--color-primary, #0057a8);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.ypp-price-table tr:hover {
    background-color: rgba(0, 87, 168, 0.05);
}

.ypp-duration-cell {
    font-weight: 600;
    background-color: #f8f9fa;
    text-align: left;
    min-width: 120px;
}

.ypp-price-cell {
    font-weight: 600;
    color: var(--color-primary, #0057a8);
}

.ypp-weekday {
    background-color: var(--color-weekday, #f1f8ff)
}

.ypp-weekend {
    background-color: var(--color-weekend, #f7f9ff)
}

.ypp-special {
    background-color:#fff3e0;
    font-weight:600;
    color:#C75300
}

.ypp-price-note {
    margin: 0.5rem 0;
    font-style: italic;
    color: var(--color-text-light, #666);
    line-height: 1.4;
    font-size: 0.9rem
}

.ypp-price-note a {
    color: var(--color-primary, #0057a8);
    text-decoration: underline;
    transition: var(--transition-standard, all 0.3s ease)
}

.ypp-price-note a:hover {
    color: var(--color-secondary, #f60);
    text-decoration: underline;
}

.ypp-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 1.5rem 0;
    justify-content: center;
}

.ypp-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.2rem;
    background-color: var(--color-primary, #0057a8);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition-standard, all 0.3s ease);
    box-shadow: 0 3px 8px rgba(0, 87, 168, 0.3);
}

.ypp-cta-btn:hover {
    background-color: var(--color-primary-dark, #003d7a);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 87, 168, 0.4);
    color: white;
    text-decoration: none;
}

.ypp-cta-btn.ypp-secondary {
    background-color: var(--color-secondary, #f60);
}

.ypp-cta-btn.ypp-secondary:hover {
    background-color: var(--color-secondary-dark, #d45500);
}

.ypp-general-info {
    margin: 2rem 0 1rem;
    padding: 1.5rem;
    background-color: var(--color-light-gray, #f4f4f4);
    border-radius: var(--border-radius, 8px);
}

.ypp-general-info h2 {
    color: var(--color-primary, #0057a8);
    font-size: 1.4rem;
    margin-bottom: 1rem;
    text-align: center;
}

.ypp-contact-details {
    margin-bottom: 1rem;
    text-align: center;
}

.ypp-contact-details p {
    margin: 0.3rem 0;
    font-size: 0.95rem;
}

.ypp-contact-details a {
    color: var(--color-primary, #0057a8);
    text-decoration: none;
    font-weight: 600;
}

.ypp-contact-details a:hover {
    color: var(--color-secondary, #f60);
    text-decoration: underline;
}

.ypp-general-notes ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ypp-general-notes li {
    padding: 0.3rem 0;
    padding-left: 1.2rem;
    position: relative;
    font-size: 0.9rem;
    line-height: 1.4;
}

.ypp-general-notes li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-secondary, #f60);
    font-weight: bold;
}

.ypp-general-notes a {
    color: var(--color-primary, #0057a8);
    text-decoration: none;
    font-weight: 600;
}

.ypp-general-notes a:hover {
    color: var(--color-secondary, #f60);
    text-decoration: underline;
}

/* Divider between yacht sections */
.ypp-divider {
    border: none;
    border-top: 2px solid #e8e8e8;
    margin: 0 0 1.5rem 0;
    width: 100%;
}

/* Responsive design - compact breakpoints */
@media (max-width: 576px) {
    .yacht-listings-container {
        padding: 0 10px;
    }
    
    .ypp-yacht-section {
        margin: 1rem 0;
        padding: 1rem 0;
    }
    
    .ypp-page-header h2 {
        display: block;
        margin-bottom: 1rem;
        font-size: 1.3rem;
    }

    .ypp-booking-link {
        display: block;
        margin: 0.5rem 0 0 0;
        font-size: 0.85rem;
    }

    .ypp-yacht-gallery {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ypp-price-table th, 
    .ypp-price-table td {
        padding: 8px 6px;
        font-size: 0.8rem;
    }

    .ypp-duration-cell {
        min-width: 90px;
    }

    .ypp-contact-info {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 0.8rem;
    }

    .ypp-cta-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .ypp-cta-btn {
        width: 100%;
        text-align: center;
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }

    .ypp-general-info {
        padding: 1rem;
        margin: 1.5rem 0 0.5rem;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .ypp-yacht-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .ypp-price-table th, 
    .ypp-price-table td {
        padding: 9px 8px;
        font-size: 0.85rem;
    }

    .ypp-cta-buttons {
        justify-content: center;
    }

    .ypp-cta-btn {
        min-width: 180px;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .ypp-yacht-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .ypp-contact-info {
        flex-direction: row;
        align-items: center;
    }
}

@media (min-width: 993px) {
    .ypp-yacht-section {
        margin: 2rem 0;
        padding: 1.5rem 0;
    }

    .ypp-yacht-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .ypp-price-table {
        font-size: 0.95rem;
    }

    .ypp-price-table th, 
    .ypp-price-table td {
        padding: 12px 15px;
    }
}

/* Print styles - optimized for compact printing */
@media print {
    .ypp-cta-buttons {
        display: none;
    }

    .ypp-yacht-gallery img {
        max-width: 25%;
        break-inside: avoid;
    }

    .ypp-yacht-section {
        break-inside: avoid;
        margin: 1rem 0;
        padding: 0.5rem 0;
    }

    .ypp-price-table {
        box-shadow: none;
        font-size: 0.8rem;
    }

    .ypp-price-table th {
        background-color: #eee !important;
        color: black !important;
    }

    .ypp-contact-info,
    .ypp-general-info {
        background-color: transparent;
        border: 1px solid #ddd;
        padding: 0.5rem;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .ypp-yacht-gallery img,
    .ypp-cta-btn {
        transition: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    body.supports-dark-theme .ypp-price-table th {
        background-color: #1a365d;
    }
    
    body.supports-dark-theme .ypp-contact-info,
    body.supports-dark-theme .ypp-general-info {
        background-color: #2d3748;
        color: #e2e8f0;
    }
}

.wp-image-responsive {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-image-responsive:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wp-element-caption {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    text-align: center;
    line-height: 1.4
}

/* Mobile-first responsive adjustments */
@media (max-width: 575px) {
    .wp-image-responsive {
        border-radius: 0; /* Remove border radius on mobile for edge-to-edge */
    }
}

@media (min-width: 768px) {
    .wp-element-caption {
        font-size: 1rem;
    }
}

/* Print styles for better printing experience */
@media print {
    .wp-image-responsive {
        border-radius: 0;
        box-shadow: none;
        max-width: 100%;
        page-break-inside: avoid;
    }
    
    .wp-element-caption {
        font-size: 0.8rem;
        color: #000;
    }
}

/* High contrast mode support for accessibility */
@media (prefers-contrast: high) {
    .wp-image-responsive {
        border: 1px solid #000;
    }
}

/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
    .wp-image-responsive {
        transition: none;
    }
    
    .wp-image-responsive:hover {
        transform: none;
    }
}

/* ============================================
   CLEAN MINIMAL PAGINATION STYLES
   Removed container styling and text buttons
   ============================================ */

/* Pagination Container - Minimal approach */
.pagination-container,
.custom-pagination {
    margin: 2rem 0 1.5rem;
    padding: 1rem 0;
    text-align: center;
    /* Removed: background, borders, and visual container styling */
}

/* Remove the decorative line at top */
.pagination-container::before,
.custom-pagination::before {
    display: none;
}

/* Pagination List - Clean flexbox layout */
.pagination-container .page-numbers,
.custom-pagination .page-numbers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Individual Pagination Items */
.pagination-container .page-numbers li,
.custom-pagination .page-numbers li {
    margin: 0;
    padding: 0;
}

/* Hide text-based previous/next buttons completely */
.pagination-container .page-numbers .prev,
.pagination-container .page-numbers .next,
.custom-pagination .page-numbers .prev,
.custom-pagination .page-numbers .next {
    display: none !important;
}

/* Keep only if they contain just arrows - Target arrow-only navigation */
.pagination-container .page-numbers a[aria-label*="Previous"],
.pagination-container .page-numbers a[aria-label*="Next"],
.custom-pagination .page-numbers a[aria-label*="Previous"],
.custom-pagination .page-numbers a[aria-label*="Next"] {
    display: inline-flex !important;
    min-width: 40px !important;
    background-color: transparent;
    border: 1px solid var(--color-border, #ddd);
    color: var(--color-primary, #0057a8);
}

/* Pagination Links - Clean minimal styling */
.pagination-container .page-numbers a,
.pagination-container .page-numbers span,
.custom-pagination .page-numbers a,
.custom-pagination .page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0.5rem;
    margin: 0;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 6px;
    background-color: transparent;
    color: var(--color-primary, #0057a8);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    transition: all 0.2s ease;
    /* Removed: box-shadow and heavy styling */
}

/* Hover States - Subtle and clean */
.pagination-container .page-numbers a:hover,
.custom-pagination .page-numbers a:hover {
    background-color: var(--color-primary, #0057a8);
    color: #fff;
    border-color: var(--color-primary, #0057a8);
    text-decoration: none;
    /* Removed: transform and heavy shadows */
}

/* Current Page Styling - Clear but not overwhelming */
.pagination-container .page-numbers .current,
.custom-pagination .page-numbers .current {
    background-color: var(--color-secondary, #f60);
    color: #fff;
    border-color: var(--color-secondary, #f60);
    font-weight: 700;
    cursor: default;
}

/* Dots/Ellipsis Styling - Minimal treatment */
.pagination-container .page-numbers .dots,
.custom-pagination .page-numbers .dots {
    background-color: transparent;
    border: none;
    color: var(--color-text-light, #666);
    cursor: default;
    font-weight: bold;
}

/* Focus States for Accessibility - Clean focus treatment */
.pagination-container .page-numbers a:focus,
.custom-pagination .page-numbers a:focus {
    outline: 2px solid var(--color-secondary, #f60);
    outline-offset: 2px;
    background-color: var(--color-primary, #0057a8);
    color: #fff;
    border-color: var(--color-primary, #0057a8);
}

/* ============================================
   RESPONSIVE BREAKPOINTS - MOBILE FIRST
   ============================================ */

/* Extra Small Devices (< 576px) */
@media (max-width: 575px) {
    .pagination-container,
    .custom-pagination {
        margin: 1.5rem 0 1rem;
        padding: 0.75rem 0;
    }
    
    .pagination-container .page-numbers,
    .custom-pagination .page-numbers {
        gap: 0.25rem;
    }
    
    .pagination-container .page-numbers a,
    .pagination-container .page-numbers span,
    .custom-pagination .page-numbers a,
    .custom-pagination .page-numbers span {
        min-width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }
    
    /* Hide excessive page numbers on mobile */
    .pagination-container .page-numbers li:nth-child(n+8),
    .custom-pagination .page-numbers li:nth-child(n+8) {
        display: none;
    }
}

/* Small Devices (≥ 576px) */
@media (min-width: 576px) {
    .pagination-container .page-numbers a,
    .pagination-container .page-numbers span,
    .custom-pagination .page-numbers a,
    .custom-pagination .page-numbers span {
        min-width: 42px;
        height: 42px;
        font-size: 0.85rem;
    }
}

/* Medium Devices (≥ 768px) */
@media (min-width: 768px) {
    .pagination-container,
    .custom-pagination {
        margin: 2.5rem 0 2rem;
        padding: 1rem 0;
    }
    
    .pagination-container .page-numbers,
    .custom-pagination .page-numbers {
        gap: 0.75rem;
    }
    
    .pagination-container .page-numbers a,
    .pagination-container .page-numbers span,
    .custom-pagination .page-numbers a,
    .custom-pagination .page-numbers span {
        min-width: 44px;
        height: 44px;
        font-size: 0.9rem;
    }
    
    /* Show all page numbers on larger screens */
    .pagination-container .page-numbers li,
    .custom-pagination .page-numbers li {
        display: block;
    }
}

/* Large Devices (≥ 992px) */
@media (min-width: 992px) {
    .pagination-container .page-numbers,
    .custom-pagination .page-numbers {
        gap: 1rem;
    }
    
    .pagination-container .page-numbers a,
    .pagination-container .page-numbers span,
    .custom-pagination .page-numbers a,
    .custom-pagination .page-numbers span {
        min-width: 46px;
        height: 46px;
        font-size: 1rem;
    }
}

/* Extra Large Devices (≥ 1200px) */
@media (min-width: 1200px) {
    .pagination-container,
    .custom-pagination {
        margin: 3rem 0 2.5rem;
        padding: 1.25rem 0;
    }
    
    .pagination-container .page-numbers a,
    .pagination-container .page-numbers span,
    .custom-pagination .page-numbers a,
    .custom-pagination .page-numbers span {
        min-width: 48px;
        height: 48px;
    }
}

/* ============================================
   ACCESSIBILITY FEATURES
   ============================================ */

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .pagination-container .page-numbers a,
    .pagination-container .page-numbers span,
    .custom-pagination .page-numbers a,
    .custom-pagination .page-numbers span {
        border-width: 2px;
        border-color: #000;
    }
    
    .pagination-container .page-numbers .current,
    .custom-pagination .page-numbers .current {
        background-color: #000;
        color: #fff;
        border-color: #000;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .pagination-container .page-numbers a,
    .pagination-container .page-numbers span,
    .custom-pagination .page-numbers a,
    .custom-pagination .page-numbers span {
        transition: none;
    }
}

/* Print Styles */
@media print {
    .pagination-container,
    .custom-pagination {
        display: none;
    }
}

/* =============================================================================
   Jahtu CTA Block — kontaktu un rezervācijas bloks
   Izmantošana: lappusēs par konkrētām jahtām un jahtu aprakstu lapā
   ============================================================================= */

.jahtu-cta-container {
    position: relative;
    background: var(--color-bg);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 87, 168, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
}

/* Jahtas siluets — dekoratīvs fona elements */
.jahtu-cta-yacht-bg {
    position: absolute;
    bottom: 0;
    right: -10px;
    width: 180px;
    height: 90px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 90' fill='none'%3E%3Cpath d='M10 75 L90 10 L90 75 Z' fill='%230057a8' opacity='0.05'/%3E%3Cpath d='M90 75 L160 75 L125 40 Z' fill='%230057a8' opacity='0.04'/%3E%3Crect x='88' y='60' width='4' height='15' fill='%230057a8' opacity='0.07'/%3E%3Cpath d='M5 75 Q92 72 170 75' stroke='%230057a8' stroke-width='1.5' fill='none' opacity='0.08'/%3E%3C/svg%3E") no-repeat bottom right;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

.jahtu-cta-content {
    position: relative;
    z-index: 1;
    padding: 2rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Aplis ar tālruņa ikonu */
.jahtu-cta-circle-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 12px rgba(0, 87, 168, 0.3);
    flex-shrink: 0;
}

.jahtu-cta-circle-icon svg {
    width: 28px;
    height: 28px;
}

/* Virsraksts */
.jahtu-cta-title {
    font-size: 1.125rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1.35;
    margin-bottom: 0.75rem;
}

/* Oranžs dalītājs */
.jahtu-cta-divider {
    width: 40px;
    height: 3px;
    background: var(--color-secondary);
    border-radius: 2px;
    margin: 0 auto 1.5rem;
}

/* Info kastītes (tālrunis, e-pasts) */
.jahtu-cta-info-box {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    background: var(--color-sidebar-bg);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.625rem;
    text-align: left;
}

.jahtu-cta-info-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ddeeff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.jahtu-cta-info-icon svg {
    width: 18px;
    height: 18px;
}

.jahtu-cta-info-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.jahtu-cta-phone-number {
    font-size: 1.125rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1.2;
}

.jahtu-cta-hours {
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

.jahtu-cta-email-link {
    font-size: 0.9375rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-decoration: none;
    word-break: break-all;
    transition: color 0.2s ease;
}

.jahtu-cta-email-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.jahtu-cta-email-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Pogas */
.jahtu-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: 100%;
    margin-top: 1.25rem;
}

/* Primārā poga — Zvanīt */
.jahtu-cta-call-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px;
    padding: 0.6875rem 1.25rem;
    background: var(--color-secondary);
    color: var(--color-text-inverted);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-bold);
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.jahtu-cta-call-button:hover {
    background: var(--color-secondary-dark);
    color: var(--color-text-inverted);
    transform: translateY(-1px);
}

.jahtu-cta-call-button:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 3px;
}

/* Sekundārā poga — pieteikuma forma */
.jahtu-cta-form-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px;
    padding: 0.625rem 1.25rem;
    background: transparent;
    color: var(--color-primary);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-bold);
    border: 2px solid var(--color-primary);
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.jahtu-cta-form-button:hover {
    background: var(--color-primary);
    color: var(--color-text-inverted);
    transform: translateY(-1px);
}

.jahtu-cta-form-button:hover svg path {
    fill: var(--color-text-inverted);
}

.jahtu-cta-form-button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.jahtu-cta-form-button svg {
    flex-shrink: 0;
    transition: fill 0.2s ease;
}

/* Mobilā versija */
@media (max-width: 480px) {
    .jahtu-cta-content {
        padding: 1.5rem 1.125rem;
    }

    .jahtu-cta-title {
        font-size: 1rem;
    }

    .jahtu-cta-phone-number {
        font-size: 1rem;
    }
}

/* Augsts kontrasts */
@media (prefers-contrast: high) {
    .jahtu-cta-container {
        border: 2px solid var(--color-primary);
    }

    .jahtu-cta-call-button {
        border: 2px solid #000;
    }
}

/* Animāciju atcelšana */
@media (prefers-reduced-motion: reduce) {
    .jahtu-cta-call-button,
    .jahtu-cta-form-button,
    .jahtu-cta-email-link {
        transition: none;
        transform: none;
    }

    .jahtu-cta-call-button:hover,
    .jahtu-cta-form-button:hover {
        transform: none;
    }
}


/* ============================================
   Sidebar-right sunset cruise banner styles
   Moved from sidebar-right.php inline <style> block on 2026-04-11
   (Inter @import removed; font stack falls back to system fonts)
   Ref: docs/html-css-issues/04-phase-log.md (E4, E5)
   ============================================ */
.sunset-cruise-banner{position:relative;width:100%;max-width:300px;margin:0 auto 20px;background:linear-gradient(135deg,#e84118 0%,#fa8231 40%,#c44569 70%,#e84118 100%);background-size:400% 400%;animation:gradientShift 15s ease infinite;border-radius:12px;overflow:hidden;box-shadow:0 4px 15px #e8411840;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer}@keyframes gradientShift{0%{background-position:0 50%}25%{background-position:50% 100%}50%{background-position:100% 50%}75%{background-position:50% 0}100%{background-position:0 50%}}.sunset-cruise-banner a{text-decoration:none}.sunset-cruise-banner__container{position:relative;padding:20px;min-height:280px;display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:inherit}.sunset-cruise-banner::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,#ffffff14 0%,transparent 60%);animation:sunsetGlow 8s ease-in-out infinite;pointer-events:none}.sunset-cruise-banner::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:60px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="#ffffff1f"/></svg>') repeat-x;animation:waves 12s linear infinite;pointer-events:none}.sunset-cruise-banner__yacht{position:absolute;left:15px;bottom:50px;width:80px;height:80px;opacity:.15;animation:yachtSway 6s ease-in-out infinite}.sunset-cruise-banner__title{margin:0 0 10px;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:22px;font-weight:700;color:#fff;text-shadow:0 2px 4px #0000004d;line-height:1.2;animation:titlePulse 3s ease-in-out infinite}.sunset-cruise-banner__title h4{color:#fff!important}.sunset-cruise-banner__subtitle{margin:0 0 15px;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px;color:#fff;opacity:.95;font-weight:500;text-shadow:0 1px 3px #00000040}.sunset-cruise-banner__price{display:inline-block;background:#00000040;backdrop-filter:blur(10px);padding:8px 20px;border-radius:25px;margin:0 0 15px;animation:priceFloat 4s ease-in-out infinite}.sunset-cruise-banner__price-amount{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:28px;font-weight:700;color:#fff;margin:0;text-shadow:0 1px 3px #0000004d}.sunset-cruise-banner__price-text{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;color:#fff;opacity:.9}.sunset-cruise-banner__cta{display:inline-block;background:#fff;color:#c23616;padding:12px 28px;border-radius:25px;text-decoration:none;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:600;font-size:16px;transition:all .3s ease;box-shadow:0 4px 15px #00000026;animation:ctaBounce 2s ease-in-out infinite}.sunset-cruise-banner__cta:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0003;background:#f8f8f8;text-decoration:none}.sunset-cruise-banner__icon{position:absolute;top:10px;right:10px;width:90px;height:90px;opacity:.2;animation:iconRotate 20s linear infinite}@keyframes sunsetGlow{0%,100%{transform:rotate(0deg) scale(1);opacity:.5}50%{transform:rotate(180deg) scale(1.2);opacity:.8}}@keyframes waves{0%{background-position-x:0}100%{background-position-x:1200px}}@keyframes titlePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes priceFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes ctaBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes iconRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes yachtSway{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-5px)}}.sunset-cruise-banner:hover{transform:translateY(-2px);box-shadow:0 6px 25px #e8411859}@media (min-width: 576px){.sunset-cruise-banner__container{padding:25px;min-height:300px}.sunset-cruise-banner__title{font-size:24px}.sunset-cruise-banner__subtitle{font-size:17px}.sunset-cruise-banner__yacht{width:90px;height:90px}}@media (min-width: 768px){.sunset-cruise-banner__container{min-height:320px}.sunset-cruise-banner__title{font-size:26px}.sunset-cruise-banner__price-amount{font-size:32px}.sunset-cruise-banner__yacht{width:100px;height:100px}.sunset-cruise-banner__icon{width:100px;height:100px}}@media (min-width: 992px){.sunset-cruise-banner__container{min-height:280px;padding:20px}.sunset-cruise-banner__title{font-size:22px}.sunset-cruise-banner__subtitle{font-size:15px}.sunset-cruise-banner__price-amount{font-size:28px}.sunset-cruise-banner__yacht{width:80px;height:80px}.sunset-cruise-banner__icon{width:90px;height:90px}}@media (min-width: 1200px){.sunset-cruise-banner__container{min-height:300px}}@media (prefers-reduced-motion: reduce){.sunset-cruise-banner,.sunset-cruise-banner::before,.sunset-cruise-banner::after,.sunset-cruise-banner__title,.sunset-cruise-banner__price,.sunset-cruise-banner__cta,.sunset-cruise-banner__icon,.sunset-cruise-banner__yacht{animation:none}}@media (prefers-contrast: high){.sunset-cruise-banner{border:2px solid #fff}.sunset-cruise-banner__cta{border:2px solid #c23616}}@supports not (backdrop-filter: blur(10px)){.sunset-cruise-banner__price{background:#00000059}}


/* ============================================
   404 page styles
   Moved from 404.php inline <style> block on 2026-04-11
   Ref: docs/html-css-issues/05b-phase-log.md (E13)
   ============================================ */
.jn404-content{padding:20px;background-color:#fff}.jn404-container{display:flex;flex-direction:column;align-items:center;text-align:center}.jn404-yacht-svg{width:100%;max-width:800px;margin-bottom:20px}.jn404-text-content{max-width:700px}.jn404-code{font-size:120px;font-weight:700;color:#0057a8;line-height:1;margin-bottom:10px;text-shadow:3px 3px 0 rgba(0,87,168,.1)}.jn404-title{font-size:36px;color:#0057a8;margin-bottom:20px}.jn404-description{font-size:18px;color:#555;margin-bottom:30px;line-height:1.6}.jn404-navigation{display:flex;justify-content:center;flex-wrap:wrap;gap:15px;margin-bottom:40px}.jn404-button{display:inline-flex;align-items:center;padding:14px 24px;border-radius:4px;font-weight:600;text-decoration:none;transition:all .3s ease;gap:8px}.jn404-primary-button{background-color:#0057a8;color:#fff}.jn404-primary-button:hover{background-color:#003d7a;text-decoration:none;color:#fff;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.1)}.jn404-secondary-button{background-color:#f8f8f8;color:#0057a8;border:1px solid #0057a8}.jn404-secondary-button:hover{background-color:#e8f4f8;text-decoration:none;color:#0057a8;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.05)}.jn404-button-icon{display:inline-block}.jn404-search{margin-bottom:40px;width:100%}.jn404-search h2{font-size:24px;margin-bottom:15px;color:#333}.jn404-search-wrapper{max-width:500px;margin:0 auto}.jn404-search .search-form{display:flex;border:2px solid #e0e0e0;border-radius:4px;overflow:hidden}.jn404-search .search-field{flex:1;padding:12px 15px;border:none;font-size:16px;outline:0}.jn404-search .search-submit{background-color:#0057a8;color:#fff;border:none;padding:0 20px;cursor:pointer;font-weight:600;transition:background-color .3s ease}.jn404-search .search-submit:hover{background-color:#003d7a}.jn404-suggestions{display:flex;flex-wrap:wrap;justify-content:center;gap:40px;margin-top:20px}.jn404-suggestion-column{flex:1;min-width:200px;max-width:300px}.jn404-suggestion-column h3{font-size:18px;color:#0057a8;margin-bottom:15px;position:relative;display:inline-block}.jn404-suggestion-column h3:after{content:'';position:absolute;bottom:-5px;left:0;width:40px;height:2px;background-color:#f60}.jn404-suggestion-links{list-style:none;padding:0;margin:0;text-align:left}.jn404-suggestion-links li{margin-bottom:10px}.jn404-suggestion-links a{color:#555;text-decoration:none;transition:color .3s ease;display:inline-block;position:relative;padding-left:15px}.jn404-suggestion-links a:before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background-color:#f60}.jn404-suggestion-links a:hover{color:#0057a8}@media (max-width:768px){.jn404-code{font-size:100px}.jn404-title{font-size:28px}.jn404-description{font-size:16px}.jn404-suggestions{flex-direction:column;align-items:center;gap:30px}.jn404-suggestion-column{width:100%}}@media (max-width:480px){.jn404-code{font-size:80px}.jn404-title{font-size:24px}.jn404-navigation{flex-direction:column}.jn404-button{width:100%;justify-content:center}}