/*
Theme Name: NDC Custom
Description: Custom theme for Lowcountry Advisor - clean header/footer replacement for Nicepage. All logic and styling handled by ndc-core plugin.
Version: 1.0.0
*/

/* Site-wide Font: Montserrat */
html,
body,
body *,
* {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}

/* Ensure body and html allow background to show through */
html,
body {
    background: transparent !important;
    background-color: transparent !important;
}

/* All Titles in NDC Orange (except in orange panels) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.ndc-page-title,
.ndc-discover-title {
    color: #ff7a1a !important;
}

/* Ensure white text in orange CTA panel - Maximum specificity */
.ndc-cta-panel,
.ndc-cta-panel *,
.ndc-cta-panel h1,
.ndc-cta-panel h2,
.ndc-cta-panel h3,
.ndc-cta-panel h4,
.ndc-cta-panel h5,
.ndc-cta-panel h6,
.ndc-cta-panel p,
.ndc-cta-panel .ndc-cta-lead,
.ndc-cta-panel .ndc-cta-tagline,
.u-section .ndc-cta-panel,
.u-section .ndc-cta-panel *,
.u-section .ndc-cta-panel h2,
.u-section-3 .ndc-cta-panel,
.u-section-3 .ndc-cta-panel *,
.u-section-3 .ndc-cta-panel h2,
#block-1 .ndc-cta-panel,
#block-1 .ndc-cta-panel *,
#block-1 .ndc-cta-panel h2,
.u-custom-html .ndc-cta-panel,
.u-custom-html .ndc-cta-panel *,
.u-custom-html .ndc-cta-panel h2 {
    color: #ffffff !important;
}

/* Ensure orange background in CTA panel - override any parent backgrounds */
.ndc-cta-panel,
.u-section .ndc-cta-panel,
.u-section-3 .ndc-cta-panel,
.u-custom-html .ndc-cta-panel,
#block-1 .ndc-cta-panel,
.custom-expanded .ndc-cta-panel,
.u-sheet .ndc-cta-panel,
body .ndc-cta-panel,
html .ndc-cta-panel {
    background: #ff7a1a !important;
    background-color: #ff7a1a !important;
    background-image: none !important;
}

/* Auto-wrap CTA content - applied via JavaScript */
p[data-ndc-cta="true"],
p.ndc-cta-auto {
    background: #ff7a1a !important;
    background-color: #ff7a1a !important;
    color: #ffffff !important;
    max-width: 1140px !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    padding: 15px !important;
    border-radius: var(--ndc-radius) !important;
    text-align: center !important;
    box-shadow: var(--ndc-shadow-orange), var(--ndc-shadow-inset) !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Add spacing between title and content in CTA panel */
p[data-ndc-cta="true"] .ndc-cta-title,
p.ndc-cta-auto .ndc-cta-title {
    margin-bottom: 8px !important;
}

/* Add spacing after CTA panel content */
p[data-ndc-cta="true"] br:last-of-type,
p.ndc-cta-auto br:last-of-type {
    display: none;
}

p[data-ndc-cta="true"] *,
p.ndc-cta-auto * {
    color: #ffffff !important;
}

/* Style "Make the Most of Your Trip" to match .ndc-discover-title size */
p[data-ndc-cta="true"]:first-line,
p.ndc-cta-auto:first-line {
    font-size: 46px !important;
    font-weight: 900 !important;
    line-height: 1.06 !important;
    letter-spacing: -0.02em !important;
    display: block;
    margin-bottom: 0.5em;
}

/* Better approach: Target the first text node before <br> */
p[data-ndc-cta="true"] br:first-of-type,
p.ndc-cta-auto br:first-of-type {
    display: none;
}

/* Style the content before the first <br> as a heading */
p[data-ndc-cta="true"]::before,
p.ndc-cta-auto::before {
    content: "";
    display: block;
    font-size: 46px !important;
    font-weight: 900 !important;
    line-height: 1.06 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 0.5em;
}

/* Style "Make the Most of Your Trip" to match .ndc-deals-title (30px, 800 weight) */
p[data-ndc-cta="true"] .ndc-cta-title,
p.ndc-cta-auto .ndc-cta-title {
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    display: block;
    margin-bottom: 0.5em;
    color: #ffffff !important;
    line-height: 1.2 !important;
}

/* Lists: Remove dots/bullet points completely */
ul,
ol {
    list-style: none !important;
}

ul li,
ol li {
    list-style-type: none !important;
    list-style-image: none !important;
}

/* Style checkmark spans to be orange */
.checkmark {
    color: #ff7a1a !important;
    margin-right: 0.5em;
}

/* Hide plugin's wp_body_open deal pill (direct child of body) */
body > .ndc-header-float,
body > a.ndc-header-float {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Clipped Deals Pill in Header - Override plugin CSS and position on right */
.site-header .header-container .ndc-header-float,
.site-header .header-container a.ndc-header-float,
.site-header > .ndc-header-float,
.site-header > a.ndc-header-float,
header.site-header > .ndc-header-float,
header.site-header > a.ndc-header-float {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
    position: absolute !important;
    right: calc((100% - min(100%, 1140px)) / 2 + 20px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
    max-width: calc(100vw - 40px) !important;
}

@media (max-width: 1180px) {
    .site-header > .ndc-header-float,
    .site-header > a.ndc-header-float,
    header.site-header > .ndc-header-float,
    header.site-header > a.ndc-header-float {
        right: 20px !important;
    }
}

/* Basic Header Styles */
.site-header {
    width: 100%;
    background: #fff;
    padding: 20px 0;
}

.header-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

/* Logo */
.site-logo {
    flex-shrink: 0;
    order: 1;
}

.site-logo img {
    max-height: 126px;
    height: auto;
    width: auto;
}

/* Navigation - Absolutely centered */
.site-navigation {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    order: 2;
    z-index: 1;
}

/* Menu Styles - Force horizontal layout (override WordPress defaults) */
.main-menu,
#main-menu,
nav .main-menu,
nav #main-menu,
.site-navigation .main-menu,
.site-navigation #main-menu,
nav ul,
.site-navigation ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 2rem !important;
    align-items: center !important;
}

.main-menu li,
#main-menu li,
.main-menu .menu-item,
#main-menu .menu-item,
nav ul li,
.site-navigation ul li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: block !important;
    float: none !important;
}

.main-menu a,
#main-menu a,
.main-menu .menu-item a,
#main-menu .menu-item a,
nav ul li a,
.site-navigation ul li a {
    text-decoration: none !important;
    color: #333 !important;
    font-weight: 600 !important;
    padding: 8px 0 !important;
    display: block !important;
    transition: color 0.2s ease;
    white-space: nowrap !important;
}

.main-menu a:hover,
#main-menu a:hover {
    color: #009FBD !important;
}

/* Footer Styles */
.site-footer {
    width: 100%;
    background: #2a2a2a; /* Dark grey background */
    padding: 40px 0;
}

.footer-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

/* Footer Logo */
.footer-logo {
    flex-shrink: 0;
}

.footer-logo-image {
    max-height: 80px;
    height: auto;
    width: auto;
}

/* Social Media Links */
.social-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex: 1;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-link:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

.social-link svg {
    width: 24px;
    height: 24px;
}

/* Facebook - Blue */
.social-facebook {
    color: #1877f2; /* Facebook blue */
}

.social-facebook svg circle {
    fill: #1877f2;
}

/* Twitter - Light Blue */
.social-twitter {
    color: #1da1f2; /* Twitter light blue */
}

.social-twitter svg circle {
    fill: #1da1f2;
}

/* Instagram - Purple/Pink gradient */
.social-instagram {
    color: #e4405f; /* Instagram purple/pink */
}

.social-instagram svg circle {
    fill: #e4405f;
}

/* Copyright */
.copyright {
    flex-shrink: 0;
    color: #ffffff;
    font-size: 14px;
    margin: 0;
    white-space: nowrap;
}

/* Responsive Footer */
@media (max-width: 1099px) {
    .footer-container {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    
    .social-links {
        order: 2;
    }
    
    .copyright {
        order: 3;
    }
}

/* Site-wide Consistent Spacing (15px standard) */
/* Standard spacing between content elements */
.ndc-glass-panel h1 + p,
.ndc-glass-panel h2 + p,
.ndc-glass-panel h3 + p,
.ndc-glass-panel h4 + p,
.ndc-glass-panel h5 + p,
.ndc-glass-panel h6 + p,
.ndc-glass-panel p + p,
.ndc-glass-panel p + ul,
.ndc-glass-panel p + ol,
.ndc-glass-panel ul + p,
.ndc-glass-panel ol + p,
.ndc-glass-panel h2 + h3,
.ndc-glass-panel h3 + h4 {
    margin-top: 15px !important;
}

/* Standard spacing for lists */
.ndc-glass-panel ul li,
.ndc-glass-panel ol li {
    margin-bottom: 10px !important;
}

.ndc-glass-panel ul li:last-child,
.ndc-glass-panel ol li:last-child {
    margin-bottom: 0 !important;
}

/* Welcome Panel Spacing Adjustments */
/* More space between top of glass panel and "See All Exclusive Partners" button */
.ndc-glass-panel:has(.ndc-welcome-panel) {
    padding-top: 24px !important;
}

.ndc-welcome-panel .ndc-actions {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 24px !important;
}

/* Aggressively hide empty paragraphs and non-breaking spaces that cause gaps */
.ndc-shell p:empty,
.ndc-shell p:only-child:empty,
p:empty,
p:only-child:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
}

/* Hide paragraphs that only contain whitespace or nbsp */
.ndc-shell p:has-text("&nbsp;"),
.ndc-shell p:has-text("&#160;") {
    display: none !important;
}

/* Remove spacing from empty paragraphs before CTA panel */
.ndc-shell p:empty + p[data-ndc-cta="true"],
.ndc-shell p:empty + p.ndc-cta-auto,
p:empty + p[data-ndc-cta="true"],
p:empty + p.ndc-cta-auto {
    margin-top: 15px !important;
}

/* Ensure consistent 15px spacing above orange CTA panel */
.ndc-featured-slider + .ndc-cta-panel,
.ndc-discover + .ndc-cta-panel,
.ndc-glass-panel + .ndc-cta-panel,
.ndc-deals-wrap + .ndc-cta-panel {
    margin-top: 15px !important;
}

/* Also target the auto-detected CTA paragraphs */
.ndc-featured-slider + p[data-ndc-cta="true"],
.ndc-discover + p[data-ndc-cta="true"],
.ndc-glass-panel + p[data-ndc-cta="true"],
.ndc-deals-wrap + p[data-ndc-cta="true"],
.ndc-featured-slider + p.ndc-cta-auto,
.ndc-discover + p.ndc-cta-auto,
.ndc-glass-panel + p.ndc-cta-auto,
.ndc-deals-wrap + p.ndc-cta-auto {
    margin-top: 15px !important;
}

/* Welcome content at top of deals panel */
.ndc-welcome-content {
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    padding-top: 0 !important;
}

.ndc-welcome-content h2 {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}

/* Consistent spacing in welcome content */
.ndc-welcome-content p {
    margin-bottom: 15px !important;
}

.ndc-welcome-content p:last-child {
    margin-bottom: 0 !important;
}

.ndc-welcome-content ul {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

/* ============================================================
   MOBILE RESPONSIVE STYLES
   ============================================================ */

/* Base Mobile Styles - Applies to all screens below 1100px */
@media (max-width: 1099px) {
    /* Typography Scaling */
    html {
        font-size: 16px;
    }
    
    h1, .h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
    
    h2, .h2, .ndc-page-title, .ndc-discover-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    
    h3, .h3 {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }
    
    h4, .h4 {
        font-size: 18px !important;
    }
    
    /* Header Mobile Styles */
    .site-header {
        padding: 15px 0;
        position: relative;
    }
    
    .header-container {
        padding: 0 15px;
        justify-content: space-between;
    }
    
    .site-logo {
        flex-shrink: 0;
        z-index: 1;
    }
    
    .site-logo img {
        max-height: 60px;
    }
    
    /* Pill on mobile - right side */
    .header-container .ndc-header-float {
        position: relative;
        z-index: 1;
        flex-shrink: 0;
    }
    
    /* Hide desktop menu on mobile */
    .site-navigation {
        display: none;
    }
    
    /* Mobile Menu Toggle Button - Centered */
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        background: transparent;
        border: 2px solid #333;
        border-radius: 6px;
        cursor: pointer;
        padding: 0;
        margin: 0;
        transition: all 0.3s ease;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10000;
    }
    
    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus {
        background: #f5f5f5;
        outline: none;
    }
    
    .mobile-menu-toggle.active {
        border-color: #ff7a1a;
    }
    
    .hamburger-icon {
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 24px;
        height: 18px;
    }
    
    .hamburger-icon span {
        display: block;
        width: 100%;
        height: 2px;
        background: #333;
        transition: all 0.3s ease;
        border-radius: 2px;
    }
    
    /* Hamburger stays as hamburger - no X transformation */
    
    /* Mobile Menu Backdrop */
    .mobile-menu-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9997;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }
    
    .mobile-menu-backdrop.active {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
    
    /* Mobile Menu Drawer - Right Side */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        max-width: 85vw;
        height: 100vh;
        background: #2a2a2a;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
        z-index: 9998;
        overflow-y: auto;
        padding: 70px 0 40px;
        transition: right 0.3s ease-in-out;
    }
    
    .mobile-menu.active {
        right: 0;
    }
    
    .mobile-navigation {
        width: 100%;
        padding: 0;
    }
    
    .mobile-main-menu,
    .mobile-navigation ul,
    .mobile-navigation .mobile-main-menu {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .mobile-main-menu li,
    .mobile-navigation li,
    .mobile-navigation ul li {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        display: block !important;
        float: none !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .mobile-main-menu li:last-child,
    .mobile-navigation li:last-child {
        border-bottom: none;
    }
    
    .mobile-main-menu a,
    .mobile-navigation a,
    .mobile-navigation ul a,
    .mobile-navigation .menu-item a {
        display: block !important;
        width: 100% !important;
        padding: 20px 24px !important;
        color: #ffffff !important;
        text-decoration: none !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        transition: all 0.2s ease;
        background: transparent !important;
        box-sizing: border-box !important;
    }
    
    .mobile-main-menu a:hover,
    .mobile-main-menu a:focus,
    .mobile-main-menu a.active,
    .mobile-navigation a:hover,
    .mobile-navigation a:focus,
    .mobile-navigation a.active {
        background: #ff7a1a !important;
        color: #fff !important;
        padding-left: 32px !important;
    }
    
    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
    
    /* Close button inside drawer */
    .mobile-menu-close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.1);
        border: 3px solid #ff7a1a;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        transition: all 0.2s ease;
        padding: 0;
    }
    
    .mobile-menu-close:hover {
        background: #ff7a1a;
        border-color: #ff7a1a;
    }
    
    .mobile-menu-close span {
        display: block;
        width: 20px;
        height: 20px;
        position: relative;
    }
    
    .mobile-menu-close span::before,
    .mobile-menu-close span::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 20px;
        background: #fff;
        transform-origin: center;
    }
    
    .mobile-menu-close span::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    
    .mobile-menu-close span::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    
    .mobile-menu-close:hover span::before,
    .mobile-menu-close:hover span::after {
        background: #fff;
    }
    
    /* Main Content Padding */
    .site-main {
        padding: 0;
        width: 100%;
        overflow-x: hidden; /* Prevent horizontal scroll */
    }
    
    /* Content Wrapper */
    .content-wrapper {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    /* Glass Panels - Mobile */
    /* NOTE: Full-width edge-to-edge on mobile, overridden by mobile-fixes.css */
    .ndc-glass-panel,
    .ndc-orange-panel,
    .ndc-cta-panel {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 20px;
    }
    
    /* Panels - Full Width on Very Small Screens */
    .ndc-glass-panel,
    .ndc-orange-panel,
    .ndc-cta-panel,
    .ndc-discover {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* CTA Title Mobile */
    p[data-ndc-cta="true"] .ndc-cta-title,
    p.ndc-cta-auto .ndc-cta-title {
        font-size: 24px !important;
    }
    
    /* Footer Mobile Styles */
    .footer-container {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
        padding: 0 15px;
    }
    
    .footer-logo {
        order: 1;
    }
    
    .social-links {
        order: 2;
        justify-content: center;
    }
    
    .copyright {
        order: 3;
        white-space: normal;
        font-size: 12px;
    }
}

/* Tablet Styles - 768px to 1024px */
/* Desktop menu styles - show at 1100px and above */
@media (min-width: 1100px) {
    /* Reduce menu gap on smaller desktop screens */
    .main-menu {
        gap: 1.5rem !important;
    }
}

/* Mobile Menu Toggle - Hidden on Desktop */
@media (min-width: 1100px) {
    .mobile-menu-toggle {
        display: none !important;
        visibility: hidden !important;
    }
    
    .mobile-menu {
        display: none !important;
    }
    
    .site-navigation {
        display: block !important;
    }
}

/* Ensure hamburger is visible on mobile */
@media (max-width: 1099px) {
    .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Large Mobile / Small Tablet (481px - 1099px) */
@media (min-width: 481px) and (max-width: 1099px) {
    .mobile-menu a {
        font-size: 20px;
        padding: 20px 24px;
    }
    
    .site-logo img {
        max-height: 66px;
    }
}

/* Small Mobile - Below 480px */
@media (max-width: 480px) {
    /* Further reduce padding */
    .header-container,
    .footer-container {
        padding: 0 12px;
    }
    
    /* Smaller logo on very small screens */
    .site-logo img {
        max-height: 48px;
    }
    
    /* Tighter spacing in panels */
    .ndc-glass-panel,
    .ndc-orange-panel,
    .ndc-cta-panel {
        padding: 15px;
        margin-left: 12px;
        margin-right: 12px;
    }
    
    /* Smaller titles */
    h2, .h2 {
        font-size: 22px !important;
    }
    
    p[data-ndc-cta="true"] .ndc-cta-title,
    p.ndc-cta-auto .ndc-cta-title {
        font-size: 20px !important;
    }
    
    /* Mobile menu smaller text */
    .mobile-main-menu a {
        font-size: 16px;
        padding: 16px 15px;
    }
}

/* Touch-friendly buttons and inputs */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    button,
    .ndc-btn,
    a.button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Larger inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 14px 16px;
        min-height: 44px;
    }
    
    /* Larger links */
    a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}