/**
 * Navig8 Marine Pro - Responsive Stylesheet
 * Mobile-first approach
 *
 * @package Navig8_Marine_Pro
 * @version 1.0.0
 */

/* ==========================================================================
   Mobile First - Base Styles (Default for small devices)
   ========================================================================== */

/* Top Bar Mobile — compact single-row layout */
.top-bar {
    padding: 0.5rem 0;
}

.top-bar-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
}

.top-bar-left {
    flex-direction: row;
    gap: 0.75rem;
    min-width: 0; /* allow shrinking */
}

.top-contact {
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-contact i {
    font-size: 0.8rem;
}

/* On very small screens, hide the text and show only icons as tappable links */
@media (max-width: 479px) {
    .top-contact-text {
        display: none;
    }

    .top-contact i {
        font-size: 1rem;
        margin-right: 0;
    }

    .top-bar-left {
        gap: 1rem;
    }
}

.top-bar-right .social-icons {
    justify-content: flex-end;
    gap: 0.6rem;
    flex-shrink: 0;
}

.top-bar-right .social-icons a {
    font-size: 0.95rem;    /* match contact icon size */
    opacity: 0.9;
}

/* Mobile Navigation */
.menu-toggle {
    display: flex;
}

.nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    padding: var(--spacing-md);
    box-shadow: var(--shadow-lg);
    gap: 0;
}

.nav-menu.active {
    display: flex;
}

.nav-menu li {
    border-bottom: 1px solid var(--light-gray);
}

.nav-menu li:last-child {
    border-bottom: none;
}

.nav-menu li a {
    display: block;
    padding: var(--spacing-sm) 0;
}

/* Mobile Menu Toggle Animation */
.menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Hero Slider Mobile */
.hero-slider {
    height: 450px;
    margin-top: 100px; /* top-bar (~35px) + header (~65px) */
}

.slide-content h1 {
    font-size: 1.8rem;
}

.slide-content p {
    font-size: 1rem;
}

/* Legacy Hero Mobile */
.hero-section {
    min-height: 400px;
    padding: var(--spacing-2xl) var(--spacing-md);
    margin-top: 100px;
}

.hero-heading {
    font-size: 2rem;
}

.hero-subheading {
    font-size: 1rem;
}

/* About Section Mobile */
.about-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

.about-content .section-heading {
    text-align: center;
}

/* Services Section Mobile */
.services-grid {
    grid-template-columns: 1fr;
}

/* Why Choose Section Mobile */
.why-choose-grid {
    grid-template-columns: 1fr;
}

.section-subheading {
    margin: -1rem auto var(--spacing-xl);
    font-size: 1rem;
}

/* Ship Repair Section Mobile */
.scope-grid {
    grid-template-columns: 1fr;
}

.sets-apart-wrapper {
    grid-template-columns: 1fr;
    padding: var(--spacing-lg);
}

.sets-apart-content .subsection-heading {
    text-align: center;
}

/* Target Clients Mobile */
.clients-grid {
    grid-template-columns: 1fr;
}

/* Single Service Page Mobile */
.service-content-wrapper {
    grid-template-columns: 1fr;
}

.service-sidebar {
    position: static;
}

.service-page-header {
    margin-top: 100px;
}

/* Contact Section Mobile */
.contact-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

/* Footer Mobile */
.footer-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    text-align: center;
}

.footer-column {
    align-items: center;
}

.footer-social-icons {
    justify-content: center;
}

.footer-widgets {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

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

.footer-menu {
    flex-wrap: wrap;
    justify-content: center;
}

/* Archive/Blog Mobile */
.posts-grid {
    grid-template-columns: 1fr;
}

/* Sidebar Mobile */
.content-with-sidebar {
    grid-template-columns: 1fr;
}

/* 404 Page Mobile */
.error-404 h1 {
    font-size: 5rem;
}

/* Page Header Mobile */
.page-header,
.archive-header {
    margin-top: 100px;
}

/* ==========================================================================
   Medium devices (tablets, 768px and up)
   ========================================================================== */

@media (min-width: 768px) {
    /* Top Bar */
    .top-bar-container {
        flex-direction: row;
        text-align: left;
    }

    .top-bar-left {
        flex-direction: row;
        gap: var(--spacing-md);
    }

    /* Hero Slider */
    .hero-slider {
        height: 500px;
        margin-top: 120px;
    }

    .slide-content h1 {
        font-size: 2.5rem;
    }

    .slide-content p {
        font-size: 1.1rem;
    }

    /* Legacy Hero */
    .hero-section {
        margin-top: 120px;
    }

    .hero-heading {
        font-size: 2.5rem;
    }

    .hero-subheading {
        font-size: 1.1rem;
    }

    /* About Section */
    .about-grid {
        grid-template-columns: 1fr 1fr;
    }

    .about-content .section-heading {
        text-align: left;
    }

    /* Services Section */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Why Choose Section */
    .why-choose-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Ship Repair Section */
    .scope-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sets-apart-wrapper {
        grid-template-columns: 1fr 1fr;
    }

    .sets-apart-content .subsection-heading {
        text-align: left;
    }

    /* Target Clients */
    .clients-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Contact Section */
    .contact-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        text-align: left;
    }

    .footer-column {
        align-items: flex-start;
    }

    .footer-social-icons {
        justify-content: flex-start;
    }

    .footer-widgets {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-bottom {
        flex-direction: row;
        text-align: left;
    }

    /* Archive/Blog */
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Page Header */
    .page-header,
    .archive-header,
    .service-page-header {
        margin-top: 120px;
    }

    /* Single Service Page */
    .service-content-wrapper {
        grid-template-columns: 1fr 300px;
    }

    /* 404 Page */
    .error-404 h1 {
        font-size: 6rem;
    }
}

/* ==========================================================================
   Large devices (desktops, 1024px and up)
   ========================================================================== */

@media (min-width: 1024px) {
    /* Navigation */
    .menu-toggle {
        display: none;
    }

    .nav-menu {
        display: flex;
        position: static;
        flex-direction: row;
        background: transparent;
        padding: 0;
        box-shadow: none;
        gap: var(--spacing-lg);
    }

    .nav-menu li {
        border-bottom: none;
    }

    .nav-menu li a {
        padding: var(--spacing-xs) 0;
    }

    /* Hero Slider */
    .hero-slider {
        height: 600px;
    }

    .slide-content h1 {
        font-size: var(--font-size-h1);
    }

    .slide-content p {
        font-size: 1.25rem;
    }

    /* Legacy Hero Section */
    .hero-section {
        min-height: 500px;
        padding: var(--spacing-3xl) var(--spacing-md);
    }

    .hero-heading {
        font-size: var(--font-size-h1);
    }

    .hero-subheading {
        font-size: 1.25rem;
    }

    /* Services Section */
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Why Choose Section - keep last 2 cards centered */
    .why-choose-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Footer */
    .footer-content {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-widgets {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Sidebar */
    .content-with-sidebar {
        grid-template-columns: 1fr 300px;
    }

    /* 404 Page */
    .error-404 h1 {
        font-size: 8rem;
    }
}

/* ==========================================================================
   Extra large devices (large desktops, 1200px and up)
   ========================================================================== */

@media (min-width: 1200px) {
    /* Container max-width is already set in main.css */

    /* Larger spacing for hero */
    .hero-slider {
        height: 650px;
    }

    .hero-section {
        min-height: 550px;
    }

    /* Services Grid */
    .services-grid {
        gap: var(--spacing-xl);
    }

    /* About Grid */
    .about-grid {
        gap: var(--spacing-3xl);
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .site-header,
    .site-footer,
    .top-bar,
    .menu-toggle,
    .cta-button,
    .contact-form,
    .slider-dots {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    .hero-slider,
    .hero-section {
        background: #f5f5f5 !important;
        color: #000 !important;
        margin-top: 0;
        height: auto;
        min-height: auto;
        padding: 2rem;
    }

    .slide-overlay {
        display: none;
    }

    .slide-content h1,
    .slide-content p,
    .hero-heading,
    .hero-subheading {
        color: #000 !important;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    .container {
        max-width: 100%;
    }
}