/*
Theme Name: Cape Town Current Child
Theme URI: https://capetowncurrent.com
Description: Child theme for Cape Town Current with custom homepage
Author: Cape Town Current
Author URI: https://capetowncurrent.com
Template: generatepress
Version: 1.0.0
Text Domain: capetown-current-child
*/

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700;900&family=Montserrat:wght@400;700&display=swap');

/* Hide H1 title but keep it for SEO */
.page-sidebar-main .page-header,
.page-sidebar-main .page-title,
.page-sidebar-main h1.page-title {
    display: none !important;
}

/* ============================================
   CUSTOM STICKY NAVBAR (Cape Town Current)
   ============================================ */

.custom-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #102445;
    padding: 12px 24px;
    transition: box-shadow 0.3s ease;
}

.custom-header.sticky-shadow {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.custom-header-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* LEFT SECTION */
.header-left .logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.header-logo-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.site-title-stacked {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.cape-town-large {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 24px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -1px;      /* Negative spacing pulls letters closer */
    text-transform: uppercase;
    word-spacing: -4px;        /* Removes space between "CAPE" and "TOWN" */
}

.current-small {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #b0b0b0;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-top: -2px;
}

/* CENTER SEARCH BAR */

/* Search bar focus effect */
.header-center input:focus {
    background: #ffffff !important;
    color: #102445 !important;
    border-color: #ffbb00 !important;
}

.header-center input:focus + div svg,
.header-center input:focus ~ div svg {
    stroke: #102445 !important;
}

.header-center {
    flex: 1;
    max-width: 500px;
    min-width: 200px;
}

.custom-search-form {
    position: relative;
    width: 100%;
}

.custom-search-input {
    width: 100%;
    padding: 12px 20px;
    padding-right: 45px;
    border-radius: 40px;
    border: 1px solid #53647a;
    background: #283b59;
    font-size: 14px;
    color: #ffffff;
    outline: none;
    transition: all 0.2s;
}

.custom-search-input::placeholder {
    color: #a0aec0;
    font-weight: 400;
}

.custom-search-input:focus {
    border-color: #ffbb00;
    background: #1f2f4a;
}

.custom-search-submit {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #a0aec0;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.custom-search-submit:hover {
    color: #ffbb00;
}

/* RIGHT SECTION */
.header-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.custom-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 24px;
}

.custom-nav-list li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    transition: color 0.2s ease;
}

/* Also update dropdown items to match */
.dropdown-menu li a {
    font-weight: 600;
    letter-spacing: 0.5px;
}

.custom-nav-list li a:hover {
    color: #ffbb00;
}

.subscribe-button {
    background: #ffb900;
    color: #102445;
    text-decoration: none;
    padding: 8px 16px;        
    border-radius: 4px;       
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.subscribe-button:hover {
    background: #ffdd55;
    color: #102445;
}

.menu-divider {
    height: 1px;
    background: rgba(255,255,255,0.15);
    margin: 8px 0;
    pointer-events: none;
}

/* MOBILE HAMBURGER */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}

.hamburger-line {
    width: 24px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: 0.2s;
}

/* MOBILE SLIDE-OUT OVERLAY */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100%;
    background: #102445;
    z-index: 10000;
    transition: right 0.3s ease;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2);
}

.mobile-menu-overlay.open {
    right: 0;
}

.mobile-menu-container {
    padding: 60px 24px 24px;
    position: relative;
}

.mobile-menu-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 32px;
    cursor: pointer;
}

.mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mobile-nav-list li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.3px;
    display: block;
    padding: 8px 0;
}

.mobile-nav-list li a:hover {
    color: #ffbb00;
}

.mobile-subscribe {
    background: #ffb900;
    color: #102445 !important;
    text-align: center;
    padding: 8px 16px !important;   
    border-radius: 4px !important;
    margin-top: 16px;
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.8px;
}

.mobile-subscribe:hover {
    background: #ffdd55 !important;
    color: #102445 !important;
}

/* DESKTOP DEFAULT */
@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none;
    }
    .mobile-menu-overlay {
        display: none;
    }
}

/* TABLET & MOBILE */
@media (max-width: 768px) {
    .custom-header-container {
        flex-wrap: nowrap;
    }
    
    .custom-nav-list {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .header-center {
        max-width: none;
        flex: 2;
    }
    
    .custom-search-input {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .subscribe-button {
        display: none;
    }
    
    .cape-town-large {
        font-size: 16px;
    }
    
    .current-small {
        font-size: 8px;
    }
    
    .header-logo-img {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 550px) {
    .custom-header {
        padding: 10px 16px;
    }
    
    .site-title-stacked {
        display: none;
    }
    
    .header-center {
        flex: 3;
    }
}

/* ============================================
   GENERATEPRESS OVERRIDES FOR FULL-WIDTH
   ============================================ */

body.full-width-homepage .site-content,
body.full-width-homepage .content-area,
body.full-width-homepage .inside-article,
body.full-width-homepage .entry-content,
body.full-width-homepage main,
body.full-width-homepage article {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

body.full-width-homepage .site {
    max-width: 100% !important;
}

body.full-width-homepage .grid-container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Hide page title on homepage */
body.full-width-homepage .entry-header,
body.full-width-homepage .page-header {
    display: none !important;
}

/* Remove any GeneratePress padding/margins */
body.full-width-homepage .site-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Badges */
.badge-new, .badge-partner, .badge-featured {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 20px;
    margin-left: 8px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-new {
    background: #e81324;
    color: #ffffff;
}

.badge-partner {
    background: #ffb900;
    color: #102445;
}

.badge-featured {
    background: #4a90e2;
    color: #ffffff;
}

/* ============================================
   GLOBAL STYLES
   ============================================ */

:root {
    --navy-blue: #102445;
    --yellow-gold: #ffbb00;
    --white: #ffffff;
    --light-gray: #f5f5f5;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --card-shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.15);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Custom Cursor - 3D Pebble */
/* Custom Cursor - Wide Elongated Pebble */
body.custom-cursor,
body.custom-cursor * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="22" viewBox="0 0 36 22"><defs><radialGradient id="pebbleGrad" cx="35%" cy="30%" r="65%"><stop offset="0%" stop-color="%23ffffff"/><stop offset="30%" stop-color="%23e8ecf0"/><stop offset="65%" stop-color="%23c0c8d4"/><stop offset="100%" stop-color="%239aa5b5"/></radialGradient><radialGradient id="pebbleShadow" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="%235a6a7a" stop-opacity="0.35"/><stop offset="100%" stop-color="%23304050" stop-opacity="0.7"/></radialGradient><filter id="pebbleFilter"><feGaussianBlur in="SourceAlpha" stdDeviation="1" /><feOffset dx="2" dy="2.5" /><feComponentTransfer><feFuncA type="linear" slope="0.45"/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><ellipse cx="18" cy="12" rx="16" ry="8" fill="url(%23pebbleShadow)" transform="translate(2,2.5)"/><ellipse cx="18" cy="11.5" rx="16" ry="8" fill="url(%23pebbleGrad)" filter="url(%23pebbleFilter)" stroke="%237a8798" stroke-width="0.5"/><ellipse cx="12" cy="8" rx="6" ry="3" fill="%23ffffff" opacity="0.45"/><ellipse cx="24" cy="14" rx="5" ry="2.5" fill="%23657385" opacity="0.25"/></svg>') 18 11, auto;
}

/* ============================================
   HEADER / NAVIGATION
   ============================================ */

.site-header {
    background-color: var(--navy-blue);
    padding: 1rem 0;
}

.custom-header-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
}

.header-logo img {
    width: 32px;
    height: 32px;
}

.header-search {
    flex: 1;
    max-width: 400px;
    margin: 0 2rem;
}

.header-search input {
    width: 100%;
    padding: 0.6rem 1rem;
    border-radius: 25px;
    border: none;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--white);
    font-size: 0.9rem;
}

.header-search input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.header-nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.header-nav-links a {
    color: var(--white);
    text-decoration: none;
    font-size: 0.9rem;
    transition: opacity 0.3s ease;
}

.header-nav-links a:hover {
    opacity: 0.8;
}

.subscribe-btn {
    background-color: var(--yellow-gold);
    color: var(--navy-blue);
    padding: 0.6rem 1.5rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-block;
}

.subscribe-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 187, 0, 0.3);
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero-section {
    background-color: var(--navy-blue);
    color: var(--white);
    padding: 4rem 2rem;
    position: relative;
    overflow: hidden;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
}

.hero-container::after {
    display: none;
}

.hero-title {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
    font-size: 3.8rem;          /* Adjusted size */
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #ffffff;
    text-transform: none;
    letter-spacing: -0.5px;
    max-width: 90%;
}

/* For tablets */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 3rem;
    }
}

/* For mobile */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.2rem;
        max-width: 100%;
    }
}

.hero-subtitle {
    font-size: 1.1rem;
    color: #a9b5c2;
    margin-bottom: 2rem;
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.hero-buttons-row {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #283b59;
    border: 1px solid #53647a;
    border-radius: 999px;
    padding: 10px 20px;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;  /* Prevents text wrapping inside button */
}

/* Tablet: 2 columns */
@media (max-width: 768px) {
    .hero-buttons-row {
        display: grid;
        grid-template-columns: 1fr 1fr;  /* 2 equal columns */
        gap: 12px;
    }
    
    .hero-btn {
        white-space: normal;      /* Allow text to wrap if needed */
        justify-content: center;  /* Center content */
        padding: 10px 12px;
        font-size: 0.85rem;
        text-align: center;
    }
    
    .hero-btn span {
        white-space: normal;
        word-break: keep-all;     /* Prevents awkward breaks */
    }
}

/* Small mobile (under 480px) */
@media (max-width: 480px) {
    .hero-buttons-row {
        gap: 10px;
    }
    
    .hero-btn {
        padding: 8px 10px;
        font-size: 0.75rem;
    }
    
    .hero-btn-icon {
        width: 14px;
        height: 14px;
    }
}

.hero-btn-icon {
    width: 18px;
    height: 18px;
    stroke: #ffffff;
    stroke-width: 2;
    fill: none;
}

.hero-btn:hover {
    background: #3a4e72;
    border-color: #6a7d99;
}

.hero-btn.active {
    background: #ffb900;
    border-color: #ffb900;
    color: #102445;
}

.hero-btn.active .hero-btn-icon {
    stroke: #102445;
}

.hero-tagline-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
}

.hero-tagline {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: #a9b5c2;
    text-align: center;
    margin-top: 2rem;
    letter-spacing: 0.5px;
}

.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.white-circle-placeholder {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1 / 1;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.white-circle-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* Changed from 'cover' to 'contain' */
    object-position: center;
}

/* Heart Burst Animation - SVG Version */
.white-circle-placeholder {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1 / 1;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;        /* Add this */
    cursor: pointer;           /* Add this */
}

#heartCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 15;
}
.heart-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    z-index: 20;
}

.heart-svg {
    position: absolute;
    width: 20px;
    height: 20px;
    fill: #e81324;
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
}

/* Trigger Comments on click */
#cody-heart-container {
  position: relative;
}

.cody-avatar {
  position: relative;
  z-index: 1;
}

#heartCanvas {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

/* Trigger animation on hover */
.white-circle-placeholder:hover .heart-svg {
    animation: heartFloat 0.8s ease-out forwards;
}

/* Individual heart positions and delays */
.heart-1 { left: -30px; top: -40px; animation-delay: 0s; }
.heart-2 { left: 10px; top: -50px; animation-delay: 0.05s; width: 16px; height: 16px; fill: #ff4d6d; }
.heart-3 { left: -10px; top: -60px; animation-delay: 0.1s; width: 24px; height: 24px; fill: #ff6680; }
.heart-4 { left: -40px; top: -20px; animation-delay: 0.15s; width: 14px; height: 14px; fill: #e81324; }
.heart-5 { left: 30px; top: -30px; animation-delay: 0.08s; width: 18px; height: 18px; fill: #ff99aa; }
.heart-6 { left: -50px; top: -50px; animation-delay: 0.12s; width: 12px; height: 12px; fill: #ff4d6d; }
.heart-7 { left: 40px; top: -55px; animation-delay: 0.03s; width: 22px; height: 22px; fill: #e81324; }
.heart-8 { left: -20px; top: -70px; animation-delay: 0.18s; width: 15px; height: 15px; fill: #ff6680; }

@keyframes heartFloat {
    0% {
        opacity: 1;
        transform: scale(0.3) translateY(0) translateX(0);
    }
    30% {
        opacity: 1;
        transform: scale(1) translateY(-15px) translateX(-5px);
    }
    70% {
        opacity: 0.8;
        transform: scale(0.9) translateY(-40px) translateX(5px);
    }
    100% {
        opacity: 0;
        transform: scale(0.5) translateY(-80px) translateX(-10px);
    }
}

/* Disable on mobile for performance */
@media (max-width: 768px) {
    .white-circle-placeholder:hover .heart-svg {
        animation: none;
    }
}

/* ============================================
   BROWSE CATEGORIES SECTION
   ============================================ */

.categories-section {
    padding: 4rem 2rem;
    background-color: #ffffff;
}

.categories-container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.section-header h2 {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
    font-size: 1.9rem;        /* Was 1.8rem, slightly adjusted */
    font-weight: 800;
    color: #102445;
    margin: 0;
    letter-spacing: -0.5px;
    text-transform: uppercase; /* Matches hero title style */
}

.section-header .view-all {
    color: #102445;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.section-header .view-all:hover {
    color: #ffb900;
}

/* Categories Header Styles (matches Hero & Trending) */
.categories-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.categories-header-left {
    flex: 1;
}

.categories-header-left h2 {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
    font-size: 1.9rem;
    font-weight: 800;
    color: #102445;
    margin: 0;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.categories-subheadline {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #a9b5c2;
    margin: 0.5rem 0 0 0;
    letter-spacing: 0.3px;
}

.categories-header-wrapper .view-all {
    color: #102445;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.categories-header-wrapper .view-all:hover {
    color: #ffb900;
}

/* Mobile adjustment */
@media (max-width: 768px) {
    .categories-header-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .categories-header-left h2 {
        font-size: 1.5rem;
    }
    
    .categories-subheadline {
        font-size: 0.95rem;
    }
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

/* On tablet, maintain wider cards */
@media (max-width: 1024px) {
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

/* On mobile, maintain wider cards */
@media (max-width: 768px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* On small mobile, full width (but still proportionally taller) */
@media (max-width: 480px) {
    .categories-grid {
        grid-template-columns: 1fr;
    }
}

.category-card {
    background: linear-gradient(135deg, #102445 0%, #1a3557 100%);
    border-radius: 16px;
    padding: 1.5rem;
    text-decoration: none;
    color: #ffffff;
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
    position: relative;
    overflow: hidden;
    min-height: 280px;  /* Was 210px, now 1/3 longer (210 × 1.33 = 280px) */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.25);  /* Expanded shadow on hover */
    border-color: rgba(255, 185, 0, 0.3);
}

.category-icon {
    width: 56px;                /* Slightly larger, not full 1.5× */
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    background: rgba(255, 255, 255, 0.15);
}

.category-icon svg {
    width: 28px;
    height: 28px;
    fill: #ffffff;
}

.category-card h3 {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;  /* Changed from Cormorant Garamond */
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    position: relative;
    z-index: 1;
    line-height: 1.3;
    text-transform: uppercase;  /* Added: all caps */
    letter-spacing: 0.5px;
}

.category-card p {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.8;
    margin: 0.5rem 0 0 0;
    position: relative;
    z-index: 1;
    text-transform: uppercase;  /* Added: all caps */
    letter-spacing: 0.3px;
}

/* Category icon background colors */
.category-card[data-category="romantic"] .category-icon { background-color: #E91E63; }
.category-card[data-category="family"] .category-icon { background-color: #2196F3; }
.category-card[data-category="outdoors"] .category-icon { background-color: #4CAF50; }
.category-card[data-category="nightlife"] .category-icon { background-color: #9C27B0; }
.category-card[data-category="food"] .category-icon { background-color: #FF9800; }
.category-card[data-category="rainy"] .category-icon { background-color: #607D8B; }
.category-card[data-category="budget"] .category-icon { background-color: #009688; }
.category-card[data-category="beaches"] .category-icon { background-color: #00BCD4; }
.category-card[data-category="weekend"] .category-icon { background-color: #FF5722; }
.category-card[data-category="whats-on"] .category-icon { background-color: #F44336; }

/* Tablet */
@media (max-width: 1024px) {
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    
    .category-card {
        padding: 1.25rem;
        min-height: 260px;  /* Slightly shorter on tablet, but still proportional */
    }
}

/* Mobile */
@media (max-width: 768px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .category-card {
        padding: 1rem;
        min-height: 240px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .categories-grid {
        grid-template-columns: 1fr;
    }
    
    .category-card {
        min-height: 220px;
    }
}

/* ============================================
   TRENDING SECTION
   ============================================ */

.trending-section {
    padding: 4rem 2rem;
    background-color: #ffffff;  /* White background, matching categories section */
}

.trending-container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.trending-section .section-header h2 {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
    font-size: 0.73rem;       /* Was 1.1rem ÷ 1.5 = 0.73rem */
    font-weight: 500;
    color: #a9b5c2;
    margin: 0;
    letter-spacing: 0.5px;
    text-transform: none;      /* Sentence case, not uppercase */
}

.section-header .view-all {
    color: #102445;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.section-header .view-all:hover {
    color: #ffb900;
}

/* Trending Header Styles (matches Hero structure) */
.trending-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.trending-header-left {
    flex: 1;
}

.trending-header-left h2 {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
    font-size: 1.9rem;
    font-weight: 800;
    color: #102445;
    margin: 0;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.trending-subheadline {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #a9b5c2;
    margin: 0.5rem 0 0 0;
    letter-spacing: 0.3px;
}

.trending-header-wrapper .view-all {
    color: #102445;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.trending-header-wrapper .view-all:hover {
    color: #ffb900;
}

/* Mobile adjustment */
@media (max-width: 768px) {
    .trending-header-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .trending-header-left h2 {
        font-size: 1.5rem;
    }
    
    .trending-subheadline {
        font-size: 0.95rem;
    }
}

.trending-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.trending-card {
    background-color: var(--white);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: #222;
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);  /* Visible dropshadow */
}

.trending-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);  /* Expanded shadow on hover */
}

.trending-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: #e0e0e0;
}

.trending-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.trending-card:hover .trending-card-image img {
    transform: scale(1.05);
}

.trending-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: #ffb900;
    color: #102445;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.trending-badge::before {
    content: '🔥';
    font-size: 0.85rem;
}

.trending-card-content {
    padding: 1.25rem;
}

.trending-date {
    color: #888;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.trending-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
    color: #102445;
}

.trending-card p {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.5;
    margin: 0 0 1rem 0;
}

.read-more {
    color: #ffb900;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.2s ease;
}

.read-more::after {
    content: '→';
    transition: transform 0.2s ease;
}

.trending-card:hover .read-more::after {
    transform: translateX(4px);
}

/* Tablet */
@media (max-width: 1024px) {
    .trending-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .trending-section {
        padding: 2rem 1rem;
    }
    
    .trending-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .trending-card-image {
        height: 180px;
    }
    
    .section-header h2 {
        font-size: 1.5rem;
    }
}

.no-posts-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    background: #f9f9f9;
    border-radius: 16px;
    color: #666;
}

/* ============================================
   CTA SECTION (Bottom)
   ============================================ */

.cta-section {
    background-color: var(--navy-blue);
    color: var(--white);
    padding: 4rem 2rem;
    border-radius: 24px;
    margin: 0 2rem 4rem 2rem;  /* 4rem bottom margin creates space below CTA */
}

.cta-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.cta-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #ffffff;  
}

.cta-content h2 .love-text {
    color: #e81324;  /* Your chosen pinkish red */
}

.cta-content p {
    font-size: 1.1rem;
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.cta-btn {
    background-color: var(--white);
    color: var(--navy-blue);
    padding: 1rem 2rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s ease;
}

.cta-btn:hover {
    background-color: #ffb900;  
    color: #102445;              
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 185, 0, 0.3);
}

.cta-social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.social-icon {
    width: 48px;
    height: 48px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

.social-icon svg {
    width: 24px;
    height: 24px;
    fill: var(--white);
}

.cta-expert {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 2rem;
    text-align: left;  /* Changed from center to left for better readability */
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    text-decoration: none;
    display: block;
}

.cta-expert:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.expert-penguin {
    width: 80px;
    height: 80px;
    background-color: var(--white);
    border-radius: 50%;
    margin: 0 auto 1.5rem;  /* Centered, but text below is left-aligned */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cody-small {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.cta-expert p {
    opacity: 0.9;
    font-size: 0.9rem;
    color: #cbd5e0;
    text-decoration: none;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.cta-expert .expert-intro {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
}

.cta-expert .expert-intro:first-of-type {
    margin-top: 0;
}

/* Clear CTA Button - Force Centered */
.cta-expert-button {
    display: table !important;
    width: auto !important;
    min-width: 160px;
    background: #ffb900;
    color: #102445;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: 40px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    transition: all 0.2s ease;
    margin: 1.5rem auto 0 auto !important;
    text-align: center;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.cta-expert:hover .cta-expert-button {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Center Chat with Cody Button - FIX */
.cta-expert .cta-expert-button {
    display: table;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Remove any lingering underline */
.cta-expert:hover,
.cta-expert:hover p,
.cta-expert:hover .cta-expert-button {
    text-decoration: none;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .hero-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .trending-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .custom-header-nav {
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .header-search {
        order: 3;
        flex: 1 1 100%;
        margin: 0;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cody-penguin {
        width: 300px;
        height: 300px;
    }
    
    #cody-svg {
        width: 200px;
        height: 200px;
    }
    
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .trending-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    /* Disable animations on mobile */
    body.custom-cursor,
    body.custom-cursor * {
        cursor: auto !important;
    }
    
    #cody-svg {
        animation: none !important;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 1.5rem;
    }
    
    .hero-buttons {
        grid-template-columns: 1fr;
    }
    
    .categories-grid {
        grid-template-columns: 1fr;
    }
    
    .cody-penguin {
        width: 250px;
        height: 250px;
    }
    
    #cody-svg {
        width: 180px;
        height: 180px;
    }
}

/* ============================================
   SEARCH BAR - FIXED VERSION
   ============================================ */

.header-center {
    flex: 1;
    max-width: 500px;
    min-width: 200px;
    position: relative;
}

.custom-search-form {
    position: relative;
    width: 100%;
}

.custom-search-input {
    width: 100%;
    padding: 12px 20px 12px 48px !important;
    border-radius: 999px !important;
    border: 1px solid #53647a !important;
    background: #283b59 !important;
    color: #ffffff !important;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
}

.custom-search-input::placeholder {
    color: #cbd5e0 !important;
}

.custom-search-input:focus {
    background: #ffffff !important;
    border-color: #ffbb00 !important;
    color: #102445 !important;
}

.custom-search-input:focus::placeholder {
    color: #a0aec0 !important;
}

/* Position the button (icon) on the LEFT */
.custom-search-submit {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 10;
    color: #cbd5e0 !important;
}

.custom-search-submit svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
}

.custom-search-submit:hover {
    color: #ffbb00 !important;
}

/* When input is focused, change icon color to match dark text */
.custom-search-input:focus ~ .custom-search-submit,
.custom-search-form:focus-within .custom-search-submit {
    color: #102445 !important;
}

/* ============================================
   DROPDOWN MENU FOR CATEGORIES
   ============================================ */

.custom-nav-list li {
    position: relative;
    list-style: none;
}

/* Dropdown trigger - add after CATEGORIES link */
.custom-nav-list li.has-dropdown .dropdown-toggle {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    cursor: pointer;
}

/* Dropdown menu container */
.custom-nav-list .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #102445;
    min-width: 220px;
    border-radius: 12px;
    padding: 12px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 100;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.custom-nav-list li:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown items */
.dropdown-menu li {
    display: block;
    margin: 0;
}

.dropdown-menu li a {
    display: block;
    padding: 8px 20px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.dropdown-menu li a:hover {
    color: #ffbb00;
    background: rgba(255, 255, 255, 0.05);
}

/* ============================================
   WEATHER BAR
   ============================================ */

.weather-bar {
    margin-top: 2.5rem;
    background: linear-gradient(135deg, #102445 0%, #1a3557 100%);
    border-radius: 20px;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.weather-bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.weather-location {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.4rem 1rem;
    border-radius: 40px;
}

.weather-current {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.weather-temp {
    display: flex;
    align-items: baseline;
    gap: 0;
}

.weather-temp-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: #ffb900;
    line-height: 1;
}

.weather-temp-unit {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
}

.weather-condition {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
}

.weather-condition svg {
    stroke: #ffb900;
}

.weather-details {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    flex: 1;
}

.weather-detail {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #cbd5e0;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
}

.weather-detail svg {
    stroke: #ffb900;
    width: 14px;
    height: 14px;
}

.weather-detail strong {
    color: #ffffff;
    font-weight: 800;
}

.weather-detail {
    font-size: 0.8rem; /* Slightly larger for better readability */
}

.weather-forecast {
    display: flex;
    gap: 1rem;
}

.forecast-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    min-width: 50px;
}

.forecast-day-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: #cbd5e0;
    text-transform: uppercase;
}

.forecast-day svg {
    stroke: #ffffff;
    width: 20px;
    height: 20px;
}

.forecast-temp {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffb900;
}

.weather-cta-btn {
    display: inline-block;
    background: #ffb900;
    color: #102445;
    text-decoration: none;
    padding: 0.6rem 1.25rem;
    border-radius: 40px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.weather-cta-btn:hover {
    background: #102445;     /* Dark navy blue on hover */
    color: #ffb900;          /* Gold text on hover */
    transform: translateY(-2px);
}

/* Mobile */
@media (max-width: 1024px) {
    .weather-bar-inner {
        flex-direction: column;
        align-items: stretch;
    }
    
    .weather-details {
        justify-content: space-between;
    }
    
    .weather-forecast {
        justify-content: space-between;
    }
    
    .weather-cta {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .weather-details {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .weather-forecast {
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }
}

/* Weather Wrapper */
.weather-wrapper {
    margin-top: 2.5rem;
}

/* Weather Bar (compact strip) */
.weather-bar {
    background: linear-gradient(135deg, #102445 0%, #1a3557 100%);
    border-radius: 20px;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Microclimate Strip (below, full width, clean) */
.microclimate-strip {
    margin-top: 0.75rem;
    background: rgba(16, 36, 69, 0.7);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    border: 1px solid rgba(255, 185, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.microclimate-icon {
    font-size: 1.2rem;
}

.microclimate-text {
    flex: 1;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    color: #cbd5e0;
    line-height: 1.4;
}

.microclimate-text strong {
    color: #ffb900;
    font-weight: 700;
}

/* Mobile */
@media (max-width: 768px) {
    .microclimate-strip {
        flex-direction: column;
        text-align: center;
        padding: 0.75rem 1rem;
    }
    
    .microclimate-text {
        font-size: 0.75rem;
    }
}

.cta-section {
    background-color: var(--navy-blue);
    color: var(--white);
    padding: 4rem 2rem 5rem;  /* Extra bottom padding creates space */
}

/* Badges */
.badge-new, .badge-partner, .badge-featured {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 20px;
    margin-left: 8px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-new {
    background: #e81324;
    color: #ffffff;
}

.badge-partner {
    background: #ffb900;
    color: #102445;
}

.badge-featured {
    background: #4a90e2;
    color: #ffffff;
}

/* Hide GeneratePress footer completely */
.site-footer {
    display: none !important;
}

/* Remove any extra spacing from body */
body {
    margin: 0;
    padding: 0;
}

/* ============================================
   MOBILE HERO FIX - STEP 1 UPDATED
   Tighter mobile hero spacing
   ============================================ */

@media (max-width: 768px) {
    .hero-section {
        padding-top: 1rem !important;
        padding-bottom: 1.25rem !important;
    }

    .hero-container {
        gap: 0.9rem !important;
    }

    .hero-title {
        margin-top: 0 !important;
        margin-bottom: 0.45rem !important;
    }

    .hero-subtitle {
        margin-bottom: 0.85rem !important;
    }
}



/* ============================================
   MOBILE HERO FIX - STEP 2
   Force mood buttons into 3 rows of 2 equal cards
   ============================================ */

@media (max-width: 768px) {
    .hero-buttons {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        margin-bottom: 0.75rem !important;
    }

    .hero-buttons-row {
        display: contents !important;
    }

    .hero-btn {
        width: 100% !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 9px 10px !important;
        font-size: 0.76rem !important;
        line-height: 1.15 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .hero-btn span {
        display: inline-block !important;
        white-space: normal !important;
        word-break: normal !important;
    }

    .hero-btn-icon {
        flex: 0 0 auto !important;
        width: 15px !important;
        height: 15px !important;
    }
}

/* ============================================
   MOBILE HERO FIX - STEP 3
   Make Cody smaller and closer to mood buttons
   ============================================ */

@media (max-width: 768px) {
    .hero-image {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .white-circle-placeholder {
        max-width: 320px !important;
        width: 78% !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 480px) {
    .white-circle-placeholder {
        max-width: 280px !important;
        width: 76% !important;
    }
}

/* ============================================
   MOBILE HERO FIX - STEP 4
   Pull tagline higher and reduce bottom hero space
   ============================================ */

@media (max-width: 768px) {
    .hero-tagline-wrapper {
        padding: 0 1rem !important;
    }

    .hero-tagline {
        margin-top: 1rem !important;
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
        letter-spacing: 0.4px !important;
    }

    .hero-section {
        padding-bottom: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .hero-tagline {
        margin-top: 0.85rem !important;
        font-size: 0.72rem !important;
        line-height: 1.3 !important;
    }
}

/* ============================================
   MOBILE WEATHER FIX - STEP 6 UPDATED
   Centre weather box on mobile
   ============================================ */

@media (max-width: 768px) {
    .categories-section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .weather-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 1.5rem auto 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    .weather-bar {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 1rem !important;
        box-sizing: border-box !important;
        transform: none !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
    }

    .weather-bar-inner {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        align-items: center !important;
    }

    .microclimate-strip {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
}

/* ============================================
   FIX CHAT WITH CODY BUTTON MOVEMENT
   ============================================ */

.cta-expert-button {
    transform: none !important;
    left: auto !important;
    right: auto !important;
}

.cta-expert-button:active {
    transform: none !important;
    position: relative !important;
    top: 0 !important;
    left: auto !important;
}

/* ============================================
   MOBILE CENTERING FIX - STEP 14
   Fix CTA section alignment on mobile
   ============================================ */

@media (max-width: 768px) {
    /* Fix the CTA section container */
    .cta-section {
        width: 100% !important;
        margin: 0 !important;
        padding: 2rem 1rem !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Fix the CTA inner container */
    .cta-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    
    /* Fix the content area */
    .cta-content {
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto 2rem auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Fix the Cody expert box */
    .cta-expert {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 1.5rem !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
}

/* ============================================
   WIND MICROCLIMATE TIP - STYLING & ANIMATION
   ============================================ */

.wind-icon {
    width: 48px;
    height: 48px;
    animation: gentleWind 3s ease-in-out infinite;
}

@keyframes gentleWind {
    0% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(3deg) scale(1.05);
    }
    50% {
        transform: rotate(0deg) scale(1.1);
    }
    75% {
        transform: rotate(-3deg) scale(1.05);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

/* Desktop styling - keeps your existing structure */
.microclimate-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(16, 36, 69, 0.7);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    border: 1px solid rgba(255, 185, 0, 0.2);
    margin-top: 0.75rem;
}

.microclimate-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style your existing text elements */
.microclimate-text strong {
    font-size: 1rem;
    font-weight: 800;
    color: #ffb900;
    letter-spacing: 0.5px;
}

.microclimate-text {
    font-size: 0.85rem;
    color: #cbd5e0;
    line-height: 1.5;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .microclimate-strip {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }
    
    .wind-icon {
        width: 40px;
        height: 40px;
    }
    
    .microclimate-text {
        font-size: 0.82rem;
    }
    
    .microclimate-text strong {
        display: block;
        margin-bottom: 0.5rem;
    }
}

/* ============================================
   CHAT WITH CODY SECTION - UPDATED STYLES
   ============================================ */

.cta-headline {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffb900;
    margin: 0 0 1rem 0;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

/* Mobile adjustment for headline */
@media (max-width: 768px) {
    .cta-headline {
        font-size: 1.5rem;
        text-align: center;
    }
    
    .cta-expert p {
        text-align: center;
    }
}

/* Keep existing button styles but ensure no movement on click */
.cta-expert-button {
    transform: none !important;
}

.cta-expert-button:active {
    transform: none !important;
}

/* Dark overlay for category card images */
.category-card {
    position: relative;
    background-blend-mode: overlay;
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.45) 100%);
    border-radius: 16px;
    z-index: 1;
}

.category-card .category-icon,
.category-card div,
.category-card h3,
.category-card p {
    position: relative;
    z-index: 2;
}

/* Ensure text is readable */
.category-card h3,
.category-card p {
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ============================================
   CATEGORY CARDS - WHITE SWEEP + SCALE EFFECT
   ============================================ */

.category-card {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.category-card:hover {
    transform: scale(1.03);
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.3);
}

/* White diagonal sweep effect */
.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
    z-index: 3;
    pointer-events: none;
}

.category-card:hover::before {
    left: 100%;
}

/* Icon and text enhancements on hover */
.category-card:hover .category-icon svg {
    transform: scale(1.08);
    fill: #ffb900;
    transition: all 0.3s ease;
}

.category-card:hover h3 {
    color: #ffb900;
    transition: color 0.2s ease;
}

/* Smooth transitions */
.category-card .category-icon svg {
    transition: all 0.3s ease;
}

.category-card h3 {
    transition: color 0.2s ease;
}

/* ============================================
   FIX PAGE WITH SIDEBAR ALIGNMENT
   ============================================ */

.page-sidebar-main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.page-sidebar-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
    box-sizing: border-box;
}

.page-content-column {
    min-width: 0;
    width: 100%;
}

.page-sidebar-column {
    min-width: 0;
    width: 100%;
}

/* Ensure no rogue margins or padding */
.page-sidebar-main * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Fix single post centering */
.single-post-main {
    width: 100%;
    max-width: 100%;
    padding: 3rem 2rem;
}

.single-post-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

/* Ensure main content column is centred */
.single-post-article {
    max-width: 100%;
}

/* Mobile fix */
@media (max-width: 768px) {
    .single-post-main {
        padding: 2rem 1rem;
    }
    
    .single-post-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Sharp, focused shadow - almost like the image is resting on a surface */
.post-featured-image .featured-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 10px 15px -6px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-featured-image .featured-img:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 20px -8px rgba(0, 0, 0, 0.35), 0 3px 5px -3px rgba(0, 0, 0, 0.15);
}

/* Sidebar - scrolls normally with page (no sticky/fixed) */
.post-sidebar {
    position: relative;
    top: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
}

/* Make columns stretch to equal height */
.single-post-container {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: stretch;
}

.post-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

.sidebar-top-widgets,
.sidebar-ad-area {
    width: 100%;
}

/* Fix category page centering */
.category-archive-main {
    width: 100%;
    max-width: 100%;
    padding: 3rem 2rem;
}

.category-archive-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

/* Ensure the header spans full width but content stays centred */
.category-header {
    grid-column: 1 / -1;
    width: 100%;
}

.category-header-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Force container width */
@media (min-width: 1200px) {
    .category-archive-container {
        width: 100%;
    }
}

/* Mobile fix */
@media (max-width: 768px) {
    .category-archive-main {
        padding: 2rem 1rem;
    }
    
    .category-archive-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Fix newsletter widget text colour on category page */
.subscribe-widget,
.subscribe-widget p,
.subscribe-widget h3,
.subscribe-widget .widget-title {
    color: #ffffff !important;
}

.subscribe-widget .widget-title {
    border-bottom-color: #ffb900;
}

.subscribe-widget p {
    color: #cbd5e0 !important;
}

/* ============================================
   TEAM GRID - FIXED ALIGNMENT
   ============================================ */

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.team-card {
    text-align: center;
    background: #ffffff;
    border-radius: 20px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
    border-color: #ffb900;
}

/* Avatar styling */
.team-avatar {
    width: 150px;
    height: 150px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border: 3px solid #ffb900;
    transition: all 0.3s ease;
}

.team-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, filter 0.3s ease;
}

/* Individual animations */

/* Cody shake animation */
.cody-card .team-avatar-img {
    transition: transform 0.2s ease;
    transform-origin: center center;
}

.cody-card:hover .team-avatar-img {
    animation: cody-shake 0.6s ease-in-out;
}

@keyframes cody-shake {
    0%   { transform: rotate(0deg); }
    10%  { transform: rotate(-6deg); }
    20%  { transform: rotate(6deg); }
    30%  { transform: rotate(-5deg); }
    40%  { transform: rotate(5deg); }
    50%  { transform: rotate(-4deg); }
    60%  { transform: rotate(4deg); }
    70%  { transform: rotate(-3deg); }
    80%  { transform: rotate(3deg); }
    90%  { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

/* Mikhaila: elevate and grow */
.avatar-mikhaila:hover .team-avatar-img {
    transform: translateY(-10px) scale(1.12);
}

/* StJohn: leave as is */
.avatar-stjohn:hover .team-avatar-img {
    transform: scale(1.05);
}

.avatar-stjohn:hover {
    animation: pulse 0.6s ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* John: gentle sway */
.avatar-john:hover .team-avatar-img {
    animation: gentleSway 1.5s ease-in-out infinite;
}

@keyframes gentleSway {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(3deg); }
    75% { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}

/* Susan: glow */
.avatar-susan:hover {
    box-shadow: 0 0 22px rgba(255, 185, 0, 0.65);
}

.avatar-susan:hover .team-avatar-img {
    filter: brightness(1.08) saturate(1.15);
}

/* Jeff: spin */
.avatar-jeff:hover .team-avatar-img {
    animation: jeffSpin 0.8s ease-in-out;
}

@keyframes jeffSpin {
    from { transform: rotate(0deg) scale(1); }
    to { transform: rotate(360deg) scale(1.08); }
}

/* Team text */
.team-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: #102445;
    text-align: center;
    margin: 0.5rem 0 0.25rem;
}

.team-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffb900;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 0.75rem;
}

.team-bio {
    font-size: 0.85rem;
    color: #4b5563;
    line-height: 1.5;
    text-align: center;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .team-avatar {
        width: 120px;
        height: 120px;
    }
    
    .team-name {
        font-size: 1rem;
    }
    
    .team-bio {
        font-size: 0.8rem;
    }
}

.staff-avatar {
  cursor: pointer;
}


/* Staff Avatar Speech Bubble */
.avatar-bubble {
  position: fixed;
  max-width: 260px;
  background: #ffffff;
  color: #111111;
  padding: 12px 16px;
  border-radius: 18px;
  border: 2px solid #111111;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  font-size: 15px;
  line-height: 1.35;
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  pointer-events: none;
}

/* Show state */
.avatar-bubble.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Cody speech bubble colour */
.avatar-bubble.cody-bubble {
  background: #fff9e6;
}

/* Bubble pointer/triangle */
.avatar-bubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 28px;
  width: 18px;
  height: 18px;
  background: inherit;
  border-right: 2px solid #111111;
  border-bottom: 2px solid #111111;
  transform: rotate(45deg);
}

/* Mobile/tap avatar active states */

.avatar-cody.avatar-active .team-avatar-img {
  animation: codyWobble 0.8s ease-in-out;
  transform-origin: center center;
}

.avatar-cody.avatar-active {
  box-shadow: 0 0 22px rgba(255, 185, 0, 0.45);
}

@keyframes codyWobble {
  0% {
    transform: scale(1) rotate(0deg);
  }

  20% {
    transform: scale(1.04) rotate(-3deg);
  }

  40% {
    transform: scale(1.08) rotate(3deg);
  }

  60% {
    transform: scale(1.04) rotate(-2deg);
  }

  80% {
    transform: scale(1.02) rotate(1deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

.avatar-mikhaila.avatar-active .team-avatar-img {
  transform: translateY(-10px) scale(1.12);
}

.avatar-john.avatar-active .team-avatar-img {
  animation: gentleSway 1.5s ease-in-out infinite;
}

.avatar-susan.avatar-active {
  box-shadow: 0 0 22px rgba(255, 185, 0, 0.65);
}

.avatar-susan.avatar-active .team-avatar-img {
  filter: brightness(1.08) saturate(1.15);
}

.avatar-jeff.avatar-active .team-avatar-img {
  animation: jeffSpin 0.8s ease-in-out;
}

.avatar-stjohn.avatar-active .team-avatar-img {
  transform: scale(1.05);
}

.avatar-stjohn.avatar-active {
  animation: pulse 0.6s ease-in-out;
}

/* ======================================================
   CUSTOM TAXONOMY ARCHIVES
   Applies to:
   /business_type/
   /location/
   /region/
   /event_type/
====================================================== */

.ctc-taxonomy-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    display: grid;
    grid-template-columns: minmax(0, 760px) 320px;
    gap: 40px;
    box-sizing: border-box;
    align-items: start;
}

.ctc-taxonomy-main {
    width: 100%;
    max-width: 760px;
    min-width: 0;
}

.ctc-taxonomy-main .site-main {
    width: 100%;
    max-width: 100%;
}

.ctc-taxonomy-main article {
    width: 100%;
    max-width: 100%;
    margin-bottom: 40px;
}

.ctc-taxonomy-main .inside-article {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

.ctc-taxonomy-main .post-image,
.ctc-taxonomy-main .post-image a {
    width: 100%;
    display: block;
}

.ctc-taxonomy-main .post-image img,
.ctc-taxonomy-main .wp-post-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
}

.ctc-taxonomy-main .entry-header,
.ctc-taxonomy-main .entry-content,
.ctc-taxonomy-main .entry-summary,
.ctc-taxonomy-main .entry-meta {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 900px) {
    .ctc-taxonomy-layout {
        grid-template-columns: 1fr;
    }

    .ctc-taxonomy-main,
    .ctc-taxonomy-layout .post-sidebar {
        width: 100%;
        max-width: 100%;
    }
}

/* Taxonomy archive header styling */
.ctc-taxonomy-layout .page-header {
    background: #ffffff;
    padding: 36px;
    border-radius: 18px;
    margin-bottom: 32px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

.ctc-taxonomy-layout .page-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 38px;
    line-height: 1.15;
    color: #0c2340;
    margin: 0 0 12px 0;
}

.ctc-taxonomy-layout .page-title span {
    color: #ffb900;
}

.ctc-taxonomy-layout .taxonomy-description {
    font-size: 18px;
    line-height: 1.6;
    color: #555;
    max-width: 760px;
}

.ctc-taxonomy-layout .taxonomy-description p {
    margin-bottom: 0;
}

/* ======================================================
   UNIFIED POST + TAXONOMY SIDEBAR STYLING
====================================================== */

.post-sidebar {
    width: 320px;
}

.post-sidebar .sidebar-widget {
    background: #ffffff;
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

.post-sidebar .widget-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    color: #0c2340;
    margin: 0 0 12px 0;
}

.post-sidebar .sidebar-widget p {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: 0 0 18px 0;
}

.post-sidebar .sidebar-cta-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 12px 16px;
    border-radius: 999px;
    background: #ffb900;
    color: #102445;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    text-decoration: none;
}

.post-sidebar .sidebar-cta-btn:hover {
    background: #0c2340;
    color: #ffffff;
}

.post-sidebar .recent-posts-list,
.post-sidebar .categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-sidebar .recent-posts-list li,
.post-sidebar .categories-list li {
    padding: 10px 0;
    margin: 0;
    border-bottom: 1px solid #e5e7eb;
}

.post-sidebar .recent-posts-list li:last-child,
.post-sidebar .categories-list li:last-child {
    border-bottom: none;
}

.post-sidebar .recent-posts-list a,
.post-sidebar .categories-list a {
    color: #0c2340;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 600;
    text-decoration: none;
}

.post-sidebar .recent-posts-list a:hover,
.post-sidebar .categories-list a:hover {
    color: #ffb900;
}

.ctc-taxonomy-layout .post-sidebar {
    width: 320px;
    max-width: 320px;
    background: transparent;
}

@media (max-width: 900px) {
    .post-sidebar,
    .ctc-taxonomy-layout .post-sidebar {
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================
   PRE-FOOTER - CLEAN VERSION
   Desktop: 4 columns | Tablet: 2 columns | Mobile: 2 columns
   ============================================ */

.pre-footer {
    background: linear-gradient(135deg, #0a1828 0%, #102445 100%);
    padding: 3rem 2rem 1.5rem;
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
}

.pre-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 2rem;
}

/* Desktop: 4 columns */
@media (min-width: 993px) {
    .pre-footer-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet: 2 columns */
@media (min-width: 481px) and (max-width: 992px) {
    .pre-footer-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 2 columns (same as tablet) */
@media (max-width: 480px) {
    .pre-footer {
        padding: 2rem 1rem;
    }
    
    .pre-footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Column styling */
.pre-footer-column {
    text-align: center;
}

.pre-footer-column h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffb900;
    margin-bottom: 1.25rem;
    letter-spacing: 0.5px;
    position: relative;
    display: inline-block;
}

.pre-footer-column h4::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 30px;
    height: 2px;
    background: #ffb900;
    border-radius: 2px;
}

.pre-footer-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pre-footer-column ul li {
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.pre-footer-column ul li a {
    color: #cbd5e0;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    display: inline-block;
}

.pre-footer-column ul li a:hover {
    color: #ffb900;
    transform: translateX(4px);
}

/* Pre-footer bottom */
.pre-footer-bottom {
    max-width: 1200px;
    margin: 2rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.pre-footer-bottom-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.pre-footer-bottom-links a {
    color: #8a99aa;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    transition: color 0.2s ease;
}

.pre-footer-bottom-links a:hover {
    color: #ffb900;
}

.pre-footer-bottom-links .separator {
    color: #4a5a6a;
    font-size: 0.7rem;
}

.pre-footer-copyright {
    color: #6a7a8a;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    text-align: center;
}

/* Badges */
.badge-new, .badge-partner, .badge-featured {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 20px;
    margin-left: 8px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-new {
    background: #e81324;
    color: #ffffff;
}

.badge-partner {
    background: #ffb900;
    color: #102445;
}

.badge-featured {
    background: #4a90e2;
    color: #ffffff;
}

<style>
/* Category Archive Styles */
.category-archive-main {
    background: #ffffff;
    padding: 3rem 2rem;
}

.category-archive-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 3rem;
}

/* Category Header */
.category-header {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #102445 0%, #1a3557 100%);
    border-radius: 24px;
    padding: 3rem 2rem;
    margin-bottom: 2rem;
    text-align: center;
}

.category-header-content {
    max-width: 800px;
    margin: 0 auto;
}

.category-title {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 1rem;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.category-description {
    font-size: 1.1rem;
    color: #cbd5e0;
    line-height: 1.5;
}

/* Posts Grid */
.category-posts-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.archive-post-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.archive-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: #ffb900;
}

.archive-post-link {
    display: block;
    text-decoration: none;
}

.archive-post-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.archive-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.archive-post-card:hover .archive-post-image img {
    transform: scale(1.03);
}

.archive-post-image.no-image {
    background: linear-gradient(135deg, #102445 0%, #1a3557 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-image-text {
    color: #ffb900;
    font-weight: 700;
}

.archive-post-content {
    padding: 1.5rem;
}

.archive-post-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #102445;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.archive-post-card:hover .archive-post-title {
    color: #ffb900;
}

.archive-post-meta {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

.archive-post-excerpt {
    font-size: 0.9rem;
    color: #4b5563;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.read-more-link {
    display: inline-block;
    color: #ffb900;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.read-more-link:hover {
    transform: translateX(4px);
}

/* Pagination */
.pagination {
    margin-top: 2rem;
    text-align: center;
}

.pagination .page-numbers {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    background: #f3f4f6;
    color: #102445;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
}

.pagination .page-numbers.current {
    background: #ffb900;
    color: #102445;
}

/* Sidebar */
.archive-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
}

.sidebar-widget {
    background: #f9fafb;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.widget-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #102445;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #ffb900;
    display: inline-block;
}

.subscribe-widget {
    background: linear-gradient(135deg, #102445 0%, #1a3557 100%);
    color: #ffffff;
    text-align: center;
}

.subscribe-widget p {
    color: #cbd5e0;
    margin-bottom: 1rem;
}

.widget-cta-btn {
    display: inline-block;
    background: #ffb900;
    color: #102445;
    padding: 0.5rem 1rem;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
}

.categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.categories-list li {
    margin-bottom: 0.5rem;
}

.categories-list li a {
    color: #4b5563;
    text-decoration: none;
    font-size: 0.85rem;
    display: block;
    padding: 0.25rem 0;
}

.categories-list li a:hover,
.categories-list li a.current {
    color: #ffb900;
    padding-left: 0.25rem;
}

/* Mobile */
@media (max-width: 768px) {
    .category-archive-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 1rem;
    }
    
    .category-title {
        font-size: 1.8rem;
    }
    
    .category-description {
        font-size: 0.9rem;
    }
    
    .archive-post-image {
        height: 180px;
    }
    
    .archive-post-title {
        font-size: 1.1rem;
    }
    
    .archive-sidebar {
        position: static;
    }
}

/* Keep archive sidebar at top, but do not make it sticky */
.category-archive-container {
    align-items: start;
}

.archive-sidebar {
    align-self: start;
    position: static;
}

/* ============================================
   MOBILE CONTENT WRAP FIX
   Prevents articles from being too wide on mobile
   ============================================ */

@media (max-width: 768px) {
    /* Universal mobile content wrap */
    body,
    .site,
    .site-content,
    .entry-content,
    .post-content,
    .single-post-container {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Ensure all content stays within screen */
    .entry-content *,
    .post-content * {
        max-width: 100%;
        word-break: break-word;
        box-sizing: border-box;
    }
    
    /* Prevent images from overflowing */
    .post-content img,
    .entry-content img,
    .page-content img {
        max-width: 100%;
        height: auto;
    }
    
    /* Wrap tables (add horizontal scroll if needed) */
    .post-content table,
    .entry-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix iframes (YouTube, etc.) */
    .post-content iframe,
    .entry-content iframe {
        max-width: 100%;
        height: auto;
    }
    
    /* Fix code blocks and long words */
    .post-content pre,
    .entry-content pre,
    .post-content code,
    .entry-content code {
        white-space: pre-wrap;
        word-wrap: break-word;
        max-width: 100%;
    }
    
    /* Fix wide divs */
    .post-content > div,
    .entry-content > div {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* ============================================
   MOBILE - INCREASE USABLE WIDTH
   Removes side padding to use more screen space
   ============================================ */

@media (max-width: 768px) {
    /* Main post container - reduce side padding */
    .single-post-main {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Content area - use more width */
    .post-content,
    .entry-content,
    .single-post-container {
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Keep body from overflowing */
    body {
        overflow-x: hidden;
    }
    
    /* Images and media still respect boundaries */
    .post-content img,
    .entry-content img {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 768px) {
    /* Reduce table font size on mobile */
    .post-content table,
    .post-content table td,
    .post-content table th {
        font-size: 0.6rem !important;
    }
}

@media (max-width: 768px) {
    .single-post-container,
    .page-sidebar-container,
    .category-archive-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    /* Target the Rating column (usually the second column) */
    .post-content table td:nth-child(2),
    .post-content table th:nth-child(2) {
        min-width: 55px !important;
        white-space: nowrap !important;
    }
}

/* Fix Events page centering */
.events-page-main {
    width: 100%;
    max-width: 100%;
    padding: 3rem 2rem;
}

.events-page-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Mobile adjustment */
@media (max-width: 768px) {
    .events-page-main {
        padding: 2rem 1rem;
    }
}

/* Remove ALL borders for GeneratePress tables with no-borders class */
.no-borders,
.no-borders table,
.no-borders thead,
.no-borders tbody,
.no-borders tfoot,
.no-borders tr,
.no-borders th,
.no-borders td,
.no-borders .wp-block-table__cell-content {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
}

.no-borders table {
    border-collapse: collapse !important;
}

/* Override GeneratePress's specific border properties */
.no-borders td::before,
.no-borders th::before,
.no-borders td::after,
.no-borders th::after {
    display: none !important;
}

/* ========================================
   WEATHER PAGE STYLES
   ======================================== */

.weather-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Page Header with Title */
.weather-page-header {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}
body.dark .weather-page-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
.weather-page-header h1 {
    font-size: 2rem;
    margin: 0 0 5px 0;
    font-weight: 700;
    word-break: break-word;
}
.weather-page-header p {
    margin: 0;
    opacity: 0.7;
    font-size: 0.9rem;
}

.weather-two-column {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}
.weather-main {
    flex: 2;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.weather-sidebar {
    flex: 1;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* JEFF'S SURF REPORT - Split Layout with Speech Bubble */
.jeff-section {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-radius: 24px;
    margin-bottom: 20px;
    overflow: hidden;
    color: white;
    width: 100%;
    box-sizing: border-box;
}
.jeff-split-layout {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.jeff-left {
    flex: 0 0 280px;
    background: linear-gradient(135deg, #0a0f1a, #0f172a);
    padding: 30px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}
.jeff-avatar-large {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #3b82f6;
    margin: 0 auto 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.jeff-left h3 {
    margin: 10px 0 5px;
    font-size: 1.5rem;
}
.jeff-left p {
    margin: 0;
    opacity: 0.7;
    font-size: 0.8rem;
}
.surf-badge {
    display: inline-block;
    background: #3b82f6;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.7rem;
    margin-top: 10px;
}
.jeff-right {
    flex: 1;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    min-width: 0;
    box-sizing: border-box;
}
.jeff-bubble {
    background: rgba(255,255,255,0.12);
    border-radius: 24px;
    padding: 20px 25px;
    margin-bottom: 20px;
    position: relative;
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(5px);
}
.jeff-bubble::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 30px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 12px 12px 0;
    border-color: transparent rgba(255,255,255,0.12) transparent transparent;
}
.jeff-message {
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}
.jeff-message::before {
    content: '"';
    font-size: 2rem;
    opacity: 0.5;
    line-height: 1;
    vertical-align: middle;
    margin-right: 5px;
}
.jeff-message::after {
    content: '"';
    font-size: 2rem;
    opacity: 0.5;
    line-height: 1;
    vertical-align: bottom;
    margin-left: 5px;
}
.jeff-stats {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.jeff-stat {
    background: rgba(255,255,255,0.1);
    padding: 8px 15px;
    border-radius: 40px;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Weather Hero Card */
.weather-hero {
    background: var(--card-bg, #ffffff);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}
.weather-current-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}
.current-temp-large {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}
.weather-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 15px 0;
    padding: 12px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.weather-metric {
    text-align: center;
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.03);
    padding: 10px;
    border-radius: 12px;
    word-break: break-word;
}
body.dark .weather-metric {
    background: rgba(255, 255, 255, 0.05);
}
.weather-metric .metric-value {
    font-weight: bold;
    font-size: 1rem;
    display: block;
    margin-top: 5px;
}

.marine-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 15px 0;
}
.marine-item {
    text-align: center;
    padding: 10px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    word-break: break-word;
}
body.dark .marine-item {
    background: rgba(255, 255, 255, 0.05);
}
.marine-item strong {
    font-size: 1.1rem;
    display: block;
    margin-top: 5px;
}

/* 5-DAY FORECAST */
.five-day-forecast {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
}
.forecast-day {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 16px;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s;
}
.forecast-day:hover {
    transform: translateY(-3px);
}
.forecast-day strong {
    font-size: 1rem;
    display: block;
    margin-bottom: 8px;
    color: white;
}
.forecast-day img {
    width: 40px;
    height: 40px;
    margin: 8px auto;
    display: block;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    padding: 5px;
}
.forecast-day span {
    font-size: 1.1rem;
    font-weight: bold;
    display: block;
    margin-top: 8px;
    color: white;
}
body.dark .forecast-day {
    background: linear-gradient(135deg, #2563eb, #1e3a8a);
}

/* CodyCams Section */
.codycams-section {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 51, 234, 0.05));
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}
.codycams-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.cody-avatar {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 50%;
    background: white;
    padding: 5px;
}
.codycams-header h3 {
    margin: 0;
    font-size: 1.3rem;
}
.codycams-header p {
    margin: 0;
    opacity: 0.7;
    font-size: 0.8rem;
}
.codycams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    width: 100%;
}
.cam-card {
    background: #0f172a;
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
}
.cam-feed {
    position: relative;
    min-height: 180px;
    background: linear-gradient(135deg, #1e293b, #0f172a);
}
.cam-placeholder {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    text-align: center;
    padding: 20px;
}
.cam-placeholder-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}
.live-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ef4444;
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: bold;
    animation: pulse 1.5s infinite;
    z-index: 10;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.sponsor-available {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,0.7);
    color: #fbbf24;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.65rem;
    z-index: 10;
}
.sponsor-available a {
    color: #fbbf24;
    text-decoration: underline;
}
.cam-info {
    padding: 12px;
    background: #0f172a;
}
.cam-info h4 {
    margin: 0 0 3px 0;
    font-size: 0.95rem;
    color: white;
}
.cam-location {
    font-size: 0.7rem;
    color: #94a3b8;
}

/* Sidebar Widgets */
.sidebar-widget {
    background: var(--card-bg, #ffffff);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}
.sidebar-widget h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1rem;
    border-bottom: 2px solid #3b82f6;
    display: inline-block;
    padding-bottom: 5px;
}
.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar-menu li {
    margin-bottom: 10px;
}
.sidebar-menu li a {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.newsletter-form input {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
}
.newsletter-form button {
    width: 100%;
    padding: 12px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}
.ad-placeholder {
    background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    color: #666;
    font-size: 0.8rem;
}
.refresh-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 20px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 8px;
}
.loading-spinner {
    text-align: center;
    padding: 40px;
}
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 15px;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive Breakpoints */
@media (max-width: 992px) {
    .weather-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .marine-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .weather-page-container {
        padding: 15px;
    }
    
    .weather-two-column {
        flex-direction: column;
        gap: 20px;
    }
    
    .weather-main {
        width: 100%;
    }
    
    .weather-sidebar {
        width: 100%;
    }
    
    .jeff-split-layout {
        flex-direction: column;
    }
    
    .jeff-left {
        flex: none;
        width: 100%;
    }
    
    .jeff-right {
        padding: 20px;
        width: 100%;
    }
    
    .jeff-bubble::before {
        display: none;
    }
    
    .jeff-stats {
        justify-content: center;
    }
    
    .codycams-header {
        flex-direction: column;
        text-align: center;
    }
    
    .weather-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .marine-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Mobile forecast - horizontal scroll */
    .five-day-forecast {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 10px;
        gap: 10px;
    }
    
    .five-day-forecast::-webkit-scrollbar {
        height: 4px;
    }
    
    .five-day-forecast::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.1);
        border-radius: 10px;
    }
    
    .five-day-forecast::-webkit-scrollbar-thumb {
        background: #3b82f6;
        border-radius: 10px;
    }
    
    .forecast-day {
        flex: 0 0 auto;
        min-width: 70px;
        width: 70px;
        padding: 10px 4px;
        scroll-snap-align: start;
    }
    
    .forecast-day strong {
        font-size: 0.85rem;
    }
    
    .forecast-day img {
        width: 35px;
        height: 35px;
    }
    
    .forecast-day span {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .weather-page-container {
        padding: 10px;
    }
    
    .weather-metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .marine-grid {
        grid-template-columns: 1fr;
    }
    
    .jeff-stat {
        font-size: 0.7rem;
        padding: 5px 10px;
    }
    
    .jeff-message {
        font-size: 0.95rem;
    }
    
    .current-temp-large {
        font-size: 2.5rem;
    }
}

/* ===== WEATHER & SURF HOME PAGE BUTTON ===== */
.weather-surf-home-wrapper {
    text-align: center;
    margin: 30px auto;
    padding: 0 20px;
    max-width: 500px;
}

.weather-surf-home-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    text-decoration: none;
    padding: 18px 20px;
    border-radius: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    border: none;
    cursor: pointer;
    width: 100%;
}

.weather-surf-home-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: white;
}

.ws-home-icon {
    font-size: 2.2rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws-home-content {
    flex: 1;
    text-align: left;
}

.ws-home-title {
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.ws-home-subtitle {
    font-size: 0.75rem;
    opacity: 0.85;
}

.ws-home-arrow {
    font-size: 1.3rem;
    font-weight: bold;
    transition: transform 0.2s;
}

.weather-surf-home-btn:hover .ws-home-arrow {
    transform: translateX(5px);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .weather-surf-home-wrapper {
        margin: 20px auto;
        padding: 0 15px;
    }
    
    .weather-surf-home-btn {
        padding: 15px;
        gap: 12px;
    }
    
    .ws-home-icon {
        width: 45px;
        height: 45px;
        font-size: 1.8rem;
    }
    
    .ws-home-title {
        font-size: 1rem;
    }
    
    .ws-home-subtitle {
        font-size: 0.65rem;
    }
}

/* Reduce gap between Weather & Surf button and Browse Categories */
.weather-surf-home-wrapper {
    margin-bottom: 15px !important;  /* Reduces bottom margin */
}

.categories-section {
    margin-top: 0 !important;  /* Removes any top margin from categories */
    padding-top: 0 !important;
}

.categories-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.categories-header-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@media (max-width: 768px) {
    .five-day-forecast {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 6px !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        width: 100% !important;
    }

    .forecast-day {
    flex: 1 1 0 !important;  /* Changed from "flex: 1 auto" */
    min-width: 50px !important;  /* Changed from "min-width: 0" */
    width: auto !important;
    padding: 8px 6px !important;
    margin: 0 !important;
}

    .forecast-day strong {
        font-size: 0.65rem !important;
        display: block !important;
        margin-bottom: 4px !important;
    }

    .forecast-day img {
        width: 24px !important;
        height: 24px !important;
        margin: 4px auto !important;
        padding: 3px !important;
    }

    .forecast-day span {
        font-size: 0.75rem !important;
        margin-top: 4px !important;
    }
}

/* ============================================
   CHATBOT ICON - COMPLETE
   Desktop + Mobile fixes
   ============================================ */

/* Target the blue circle container - Desktop */
.mwai-trigger.mwai-open-button {
    width: 220px !important;
    height: 220px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    position: relative !important;
}

/* Target the icon container - Desktop */
.mwai-icon-container {
    width: 220px !important;
    height: 220px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Target the icon itself - Desktop */
.mwai-icon {
    width: 200px !important;
    height: 200px !important;
    display: block !important;
    margin: 0 auto !important;
    transition: transform 0.3s ease !important;
}

/* Speech bubble - Desktop */
.mwai-trigger.mwai-open-button::after {
    content: "Hi! How can I help you today?";
    position: absolute;
    bottom: 170px;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: #ffffff;
    color: #102445;
    padding: 10px 16px;
    border-radius: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 2px solid #ffb900;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Triangle pointer - Desktop */
.mwai-trigger.mwai-open-button::before {
    content: "";
    position: absolute;
    bottom: 160px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg) scale(0.8);
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-right: 2px solid #ffb900;
    border-bottom: 2px solid #ffb900;
    z-index: 11;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Show speech bubble and pointer on hover */
.mwai-trigger.mwai-open-button:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.mwai-trigger.mwai-open-button:hover::before {
    opacity: 1;
    transform: translateX(-50%) rotate(45deg) scale(1);
}

/* Slight scale effect on the icon when hovering */
.mwai-trigger.mwai-open-button:hover .mwai-icon {
    transform: scale(1.05);
}

/* ============================================
   MOBILE FIXES - 1/3 smaller + transparent
   ============================================ */

@media (max-width: 768px) {
    /* Hide speech bubble on mobile */
    .mwai-trigger.mwai-open-button::after,
    .mwai-trigger.mwai-open-button::before {
        display: none !important;
    }

    /* Make container transparent and smaller */
    .mwai-trigger.mwai-open-button {
        width: 147px !important;  /* 220 × 0.67 = 147 */
        height: 147px !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    /* Fix the icon container - transparent */
    .mwai-icon-container {
        width: 147px !important;
        height: 147px !important;
        background: transparent !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 0 !important;
        overflow: visible !important;
        box-shadow: none !important;
    }

    /* Make the icon 1/3 smaller */
    .mwai-icon {
        width: 134px !important;  /* 200 × 0.67 = 134 */
        height: 134px !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Remove any white background from parent elements */
    .mwai-trigger,
    .mwai-open-button,
    .mwai-icon-container {
        background: transparent !important;
        background-color: transparent !important;
    }
}

/* ============================================
   WEATHER ICON ANIMATIONS
   ============================================ */

/* Base icon styles */
.forecast-day {
    text-align: center;
    padding: 10px;
    transition: transform 0.3s ease;
}

.forecast-day:hover {
    transform: translateY(-5px);
}

.forecast-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    margin: 8px 0;
}

.animated-weather-icon {
    display: inline-block;
    font-size: 2.5rem;
    transition: transform 0.3s ease;
}

.forecast-day:hover .animated-weather-icon {
    transform: scale(1.2);
}

/* === SUN ANIMATION === */
.wi-day-sunny {
    color: #fbbf24;
    text-shadow: 0 0 30px rgba(251, 191, 36, 0.3);
    animation: sunPulse 3s ease-in-out infinite;
}

.wi-day-sunny::before {
    content: "\f00d"; /* Sun icon */
    display: inline-block;
    animation: sunRotate 20s linear infinite;
}

@keyframes sunPulse {
    0%, 100% { 
        transform: scale(1); 
        text-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
    }
    50% { 
        transform: scale(1.08); 
        text-shadow: 0 0 40px rgba(251, 191, 36, 0.6);
    }
}

@keyframes sunRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* === CLOUD ANIMATION === */
.wi-cloudy,
.wi-cloud,
.wi-day-cloudy,
.wi-night-cloudy {
    color: #94a3b8;
    animation: cloudFloat 4s ease-in-out infinite;
}

.wi-cloudy::before,
.wi-cloud::before {
    content: "\f041";
    display: inline-block;
}

@keyframes cloudFloat {
    0%, 100% { 
        transform: translateX(0px) scale(1); 
    }
    25% { 
        transform: translateX(6px) scale(1.05); 
    }
    75% { 
        transform: translateX(-6px) scale(0.95); 
    }
}

/* === RAIN ANIMATION === */
.wi-day-rain,
.wi-night-rain {
    color: #60a5fa;
    animation: rainFall 1.5s ease-in-out infinite;
}

.wi-day-rain::before {
    content: "\f008";
    display: inline-block;
}

.wi-night-rain::before {
    content: "\f029";
    display: inline-block;
}

@keyframes rainFall {
    0% { 
        transform: translateY(-5px) rotate(0deg); 
    }
    50% { 
        transform: translateY(5px) rotate(5deg); 
    }
    100% { 
        transform: translateY(-5px) rotate(0deg); 
    }
}

/* === THUNDERSTORM ANIMATION === */
.wi-day-thunderstorm,
.wi-night-thunderstorm {
    color: #fbbf24;
    animation: thunderFlash 2s ease-in-out infinite;
}

.wi-day-thunderstorm::before {
    content: "\f010";
    display: inline-block;
}

.wi-night-thunderstorm::before {
    content: "\f02b";
    display: inline-block;
}

@keyframes thunderFlash {
    0%, 90%, 100% { 
        opacity: 1; 
        transform: scale(1); 
    }
    92% { 
        opacity: 0.2; 
        transform: scale(0.7); 
        color: #fef08a;
    }
    95% { 
        opacity: 1; 
        transform: scale(1.1); 
        color: #f59e0b;
    }
}

/* === SNOW ANIMATION === */
.wi-day-snow,
.wi-night-snow {
    color: #e2e8f0;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    animation: snowFall 3s ease-in-out infinite;
}

.wi-day-snow::before {
    content: "\f00a";
    display: inline-block;
}

.wi-night-snow::before {
    content: "\f02a";
    display: inline-block;
}

@keyframes snowFall {
    0% { 
        transform: translateY(-8px) rotate(0deg) scale(1); 
    }
    25% { 
        transform: translateY(0px) rotate(90deg) scale(1.1); 
    }
    50% { 
        transform: translateY(8px) rotate(180deg) scale(1); 
    }
    75% { 
        transform: translateY(0px) rotate(270deg) scale(0.9); 
    }
    100% { 
        transform: translateY(-8px) rotate(360deg) scale(1); 
    }
}

/* === FOG/MIST ANIMATION === */
.wi-day-fog,
.wi-night-fog {
    color: #94a3b8;
    animation: fogDrift 6s ease-in-out infinite;
}

.wi-day-fog::before {
    content: "\f003";
    display: inline-block;
}

.wi-night-fog::before {
    content: "\f04a";
    display: inline-block;
}

@keyframes fogDrift {
    0%, 100% { 
        transform: translateX(0px) scale(1); 
        opacity: 0.7;
    }
    50% { 
        transform: translateX(10px) scale(1.1); 
        opacity: 1;
    }
}

/* === PARTLY CLOUDY === */
.wi-day-sunny-overcast,
.wi-night-cloudy-gusts {
    animation: partlyCloudy 4s ease-in-out infinite;
    color: #94a3b8;
}

@keyframes partlyCloudy {
    0%, 100% { 
        transform: translateX(0px) rotate(0deg); 
    }
    33% { 
        transform: translateX(5px) rotate(2deg); 
    }
    66% { 
        transform: translateX(-5px) rotate(-2deg); 
    }
}

/* ============================================
   HEADER DROP SHADOW & GOLD ACCENT - ENHANCED
   ============================================ */

.custom-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #102445;
    padding: 12px 24px;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    /* Enhanced: More visible gold border + stronger shadow */
    border-bottom: 2px solid rgba(255, 185, 0, 0.3);
    box-shadow: 0 8px 30px -6px rgba(0, 0, 0, 0.3), 
                0 2px 10px -2px rgba(255, 185, 0, 0.15);
}

/* Even stronger when scrolling (sticky state) */
.custom-header.sticky-shadow {
    box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.4), 
                0 4px 15px -3px rgba(255, 185, 0, 0.2);
    border-bottom-color: rgba(255, 185, 0, 0.5);
}

/* ============================================
   ALL POSTS & ALL CATEGORIES PAGES - COMPLETE
   ============================================ */

/* Fix title display - STRONGER SELECTORS */
.page-template-all-posts .page-header,
.page-template-all-posts .page-title,
.page-template-all-posts h1.page-title,
.page-template-all-posts .entry-title,
.page-template-all-categories .page-header,
.page-template-all-categories .page-title,
.page-template-all-categories h1.page-title,
.page-template-all-categories .entry-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Posts Grid */
.posts-grid-shortcode {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.post-card-shortcode {
    background: #ffffff !important;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.post-card-shortcode:hover {
    transform: translateY(-6px);
    border-color: #ffb900;
    box-shadow: 0 0 0 2px rgba(255, 185, 0, 0.2), 0 20px 35px rgba(0, 0, 0, 0.12);
}

.post-card-shortcode .post-image-shortcode {
    height: 200px;
    overflow: hidden;
    background: #f0f0f0;
    flex-shrink: 0;
}

.post-card-shortcode .post-image-shortcode img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.post-card-shortcode:hover .post-image-shortcode img {
    transform: scale(1.03);
}

.post-card-shortcode .post-content-shortcode {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.post-card-shortcode .post-meta-shortcode {
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.post-card-shortcode .post-title-shortcode {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #102445;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.post-card-shortcode .post-title-shortcode a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.post-card-shortcode:hover .post-title-shortcode a {
    color: #ffb900;
}

.post-card-shortcode .post-excerpt-shortcode {
    font-size: 0.85rem;
    color: #4b5563;
    line-height: 1.5;
    margin: 0 0 1rem 0;
    flex: 1;
}

.post-card-shortcode .read-more-shortcode {
    display: inline-block;
    color: #ffb900;
    font-weight: 700;
    font-size: 0.8rem;
    text-decoration: none;
    transition: all 0.2s ease;
    align-self: flex-start;
}

.post-card-shortcode .read-more-shortcode::after {
    content: ' >>';
    transition: transform 0.2s ease;
    display: inline-block;
}

.post-card-shortcode .read-more-shortcode:hover {
    color: #102445;
}

.post-card-shortcode .read-more-shortcode:hover::after {
    transform: translateX(4px);
}

/* ============================================
   ALL CATEGORIES PAGE - CLEAN WHITE CARDS
   Navy text, gold accents, 3 columns
   ============================================ */

/* Categories Grid - 3 columns for desktop */
.categories-grid-shortcode {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

/* Category Cards - Clean White */
.category-card-shortcode {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.75rem 1.25rem;
    text-decoration: none;
    text-align: center;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    
    /* Gold border */
    border: 2px solid rgba(255, 185, 0, 0.35);
    
    /* Drop shadow */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 
                0 2px 4px rgba(0, 0, 0, 0.03);
}

/* Hover effect */
.category-card-shortcode:hover {
    transform: translateY(-6px);
    border-color: #ffb900;
    box-shadow: 0 8px 30px rgba(255, 185, 0, 0.15), 
                0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Category Icon */
.category-icon-shortcode {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 185, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.category-icon-shortcode svg {
    width: 26px;
    height: 26px;
    stroke: #ffb900;
    stroke-width: 2;
    fill: none;
    transition: all 0.3s ease;
}

.category-card-shortcode:hover .category-icon-shortcode {
    background: #ffb900;
}

.category-card-shortcode:hover .category-icon-shortcode svg {
    stroke: #ffffff;
    transform: scale(1.05);
}

/* Category Name - Navy Blue */
.category-card-shortcode .cat-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #102445;
    margin: 0 0 0.3rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.category-card-shortcode:hover .cat-name {
    color: #ffb900;
}

/* Post Count */
.category-card-shortcode .cat-count {
    font-size: 0.7rem;
    color: #6b7280;
    background: #f3f4f6;
    padding: 0.2rem 0.8rem;
    border-radius: 20px;
    display: inline-block;
    font-weight: 600;
    transition: all 0.3s ease;
}

.category-card-shortcode:hover .cat-count {
    background: rgba(255, 185, 0, 0.15);
    color: #102445;
}

/* Description */
.category-card-shortcode .cat-desc {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.4rem;
    max-width: 90%;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.category-card-shortcode:hover .cat-desc {
    color: #102445;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet: 2 columns */
@media (max-width: 1024px) {
    .categories-grid-shortcode {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Mobile: 2 columns */
@media (max-width: 768px) {
    .categories-grid-shortcode {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .category-card-shortcode {
        min-height: 130px;
        padding: 1.25rem 0.75rem;
        border-width: 1.5px;
    }
    
    .category-icon-shortcode {
        width: 42px;
        height: 42px;
    }
    
    .category-icon-shortcode svg {
        width: 20px;
        height: 20px;
    }
    
    .category-card-shortcode .cat-name {
        font-size: 0.85rem;
    }
    
    .category-card-shortcode .cat-desc {
        display: none;
    }
}

/* Small mobile: 1 column */
@media (max-width: 480px) {
    .categories-grid-shortcode {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .category-card-shortcode {
        min-height: 80px;
        flex-direction: row;
        justify-content: flex-start;
        padding: 0.75rem 1rem;
        gap: 1rem;
        border-width: 1.5px;
    }
    
    .category-icon-shortcode {
        width: 40px;
        height: 40px;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    
    .category-icon-shortcode svg {
        width: 18px;
        height: 18px;
    }
    
    .category-card-shortcode .cat-name {
        font-size: 0.85rem;
        margin: 0;
        text-align: left;
    }
    
    .category-card-shortcode .cat-count {
        margin-left: auto;
        font-size: 0.6rem;
        white-space: nowrap;
    }
    
    .category-card-shortcode .cat-desc {
        display: none;
    }
}

/* No categories message */
.no-posts-message {
    text-align: center;
    padding: 3rem 2rem;
    background: #f9fafb;
    border-radius: 16px;
    color: #6b7280;
}

/* Category Icon - Font Awesome */
.category-icon-shortcode {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 185, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.category-icon-shortcode i {
    font-size: 1.4rem;
    color: #ffb900;
    transition: all 0.3s ease;
}

.category-card-shortcode:hover .category-icon-shortcode {
    background: #ffb900;
}

.category-card-shortcode:hover .category-icon-shortcode i {
    color: #ffffff;
    transform: scale(1.05);
}

/* ============================================
   END ALL CATEGORIES STYLES
   ============================================ */

/* Load More Button */
.load-more-container {
    text-align: center;
    margin-top: 2rem;
    padding: 1rem 0;
}

.load-more-btn {
    background: #ffb900;
    color: #102445;
    border: none;
    padding: 0.75rem 2.5rem;
    border-radius: 40px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.load-more-btn:hover {
    background: #102445;
    color: #ffb900;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.load-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.loading-spinner {
    display: none;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: #6b7280;
}

.loading-spinner.visible {
    display: block;
}

.loading-spinner::after {
    content: 'Loading';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0% { content: 'Loading'; }
    25% { content: 'Loading.'; }
    50% { content: 'Loading..'; }
    75% { content: 'Loading...'; }
}

.no-posts-message {
    text-align: center;
    padding: 3rem 2rem;
    background: #f9fafb;
    border-radius: 16px;
    color: #6b7280;
}

/* Mobile */
@media (max-width: 768px) {
    .posts-grid-shortcode {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .categories-grid-shortcode {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    
    .post-card-shortcode .post-image-shortcode {
        height: 180px;
    }
    
    .load-more-btn {
        padding: 0.6rem 1.5rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .categories-grid-shortcode {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   END ALL POSTS & ALL CATEGORIES STYLES
   ============================================ */
   
   /* ============================================
   CHATBOT ANIMATION
   ============================================ */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Mobile responsive for chatbot */
@media (max-width: 480px) {
    .mwai-chatbot-container {
        width: 95% !important;
        right: 2.5% !important;
        bottom: 10px !important;
        max-height: 80vh !important;
    }
}