/* ============================================================
 * Marine Mods Inc - Custom Theme Override
 * Dark/Industrial aesthetic for performance marine
 * ============================================================ */

/* ---- Import Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Barlow:wght@300;400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700&display=swap');

/* ---- CSS Variables ---- */
:root {
    --mm-bg-primary:     #0a0c0f;
    --mm-bg-secondary:   #12161c;
    --mm-bg-card:        #181d26;
    --mm-bg-elevated:    #1e2430;
    --mm-accent:         #00b4d8;
    --mm-accent-bright:  #48cae4;
    --mm-accent-dim:     #0077b6;
    --mm-warn:           #e63946;
    --mm-success:        #06d6a0;
    --mm-text-primary:   #e8edf3;
    --mm-text-secondary: #8b95a5;
    --mm-text-muted:     #5a6474;
    --mm-border:         #2a3140;
    --mm-border-accent:  rgba(0, 180, 216, 0.3);
    --mm-glow:           0 0 20px rgba(0, 180, 216, 0.15);
    --mm-shadow:         0 4px 24px rgba(0, 0, 0, 0.4);
    --mm-font-display:   'Rajdhani', sans-serif;
    --mm-font-body:      'Barlow', sans-serif;
    --mm-font-condensed: 'Barlow Condensed', sans-serif;
    --mm-radius:         4px;
    --mm-radius-lg:      8px;
    --mm-transition:     0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Global Reset & Base ---- */
body {
    background-color: var(--mm-bg-primary) !important;
    color: var(--mm-text-primary) !important;
    font-family: var(--mm-font-body) !important;
    font-weight: 400;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* Subtle noise texture overlay */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

body > * { position: relative; z-index: 1; }

*, *::before, *::after {
    box-sizing: border-box;
}

a {
    color: var(--mm-accent) !important;
    text-decoration: none !important;
    transition: color var(--mm-transition);
}
a:hover {
    color: var(--mm-accent-bright) !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mm-font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mm-text-primary) !important;
}

p { color: var(--mm-text-secondary); }

::selection {
    background: var(--mm-accent);
    color: var(--mm-bg-primary);
}

/* ---- Header / Navigation ---- */
.site-header,
#masthead {
    background: var(--mm-bg-secondary) !important;
    border-bottom: 1px solid var(--mm-border) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.site-title a,
.site-title {
    font-family: var(--mm-font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--mm-text-primary) !important;
    font-size: 1.8rem !important;
}

.site-description {
    font-family: var(--mm-font-condensed) !important;
    color: var(--mm-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.8rem !important;
}

/* Nav links */
.main-navigation a,
.primary-menu a,
.menu a,
#site-navigation a {
    font-family: var(--mm-font-condensed) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--mm-text-secondary) !important;
    font-size: 0.9rem !important;
    padding: 8px 16px !important;
    transition: all var(--mm-transition) !important;
    position: relative;
}

.main-navigation a:hover,
.primary-menu a:hover,
.menu a:hover,
#site-navigation a:hover {
    color: var(--mm-accent) !important;
}

/* Active nav indicator */
.main-navigation .current-menu-item > a,
.primary-menu .current-menu-item > a {
    color: var(--mm-accent) !important;
    border-bottom: 2px solid var(--mm-accent);
}

/* Dropdown menus */
.main-navigation ul ul,
.sub-menu {
    background: var(--mm-bg-elevated) !important;
    border: 1px solid var(--mm-border) !important;
    box-shadow: var(--mm-shadow) !important;
}

.sub-menu a {
    color: var(--mm-text-secondary) !important;
}

/* ---- Hero / Slider Section ---- */
.mm-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--mm-bg-primary) 0%, var(--mm-bg-secondary) 100%);
    padding: 0;
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.mm-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        linear-gradient(180deg, transparent 40%, var(--mm-bg-primary) 100%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 180, 216, 0.02) 2px,
            rgba(0, 180, 216, 0.02) 4px
        );
    pointer-events: none;
    z-index: 1;
}

.mm-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 80px 40px;
}

.mm-hero h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 0.5em;
    background: linear-gradient(135deg, var(--mm-text-primary) 0%, var(--mm-accent-bright) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mm-hero p {
    font-size: 1.2rem;
    color: var(--mm-text-secondary);
    max-width: 600px;
}

.mm-hero .mm-accent-line {
    width: 80px;
    height: 3px;
    background: var(--mm-accent);
    margin: 24px 0;
    box-shadow: var(--mm-glow);
}

/* ---- Buttons ---- */
.mm-btn {
    display: inline-block;
    font-family: var(--mm-font-condensed);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 12px 32px;
    border: none;
    cursor: pointer;
    transition: all var(--mm-transition);
    font-size: 0.9rem;
}

.mm-btn-primary {
    background: var(--mm-accent);
    color: var(--mm-bg-primary) !important;
    box-shadow: 0 0 20px rgba(0, 180, 216, 0.25);
}
.mm-btn-primary:hover {
    background: var(--mm-accent-bright);
    box-shadow: 0 0 30px rgba(0, 180, 216, 0.4);
    transform: translateY(-1px);
    color: var(--mm-bg-primary) !important;
}

.mm-btn-outline {
    background: transparent;
    color: var(--mm-accent) !important;
    border: 1px solid var(--mm-accent);
}
.mm-btn-outline:hover {
    background: rgba(0, 180, 216, 0.1);
    box-shadow: var(--mm-glow);
}

/* ---- Section Layout ---- */
.mm-section {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.mm-section-dark {
    background: var(--mm-bg-secondary);
    border-top: 1px solid var(--mm-border);
    border-bottom: 1px solid var(--mm-border);
}

.mm-section-title {
    font-size: 2rem;
    margin-bottom: 8px;
    position: relative;
    display: inline-block;
}

.mm-section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--mm-accent);
    box-shadow: var(--mm-glow);
}

.mm-section-subtitle {
    font-family: var(--mm-font-condensed);
    color: var(--mm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 1.2rem;
    margin-bottom: 4px;
}

/* ---- Cards ---- */
.mm-card {
    background: var(--mm-bg-card);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-lg);
    padding: 32px;
    transition: all var(--mm-transition);
    position: relative;
    overflow: hidden;
}

.mm-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--mm-accent), transparent);
    opacity: 0;
    transition: opacity var(--mm-transition);
}

.mm-card:hover {
    border-color: var(--mm-border-accent);
    box-shadow: var(--mm-glow);
    transform: translateY(-2px);
}

.mm-card:hover::before { opacity: 1; }

.mm-card h3 {
    font-size: 1.8rem;
    margin-bottom: 12px;
}

.mm-card p {
    font-size: 1.3rem;
    line-height: 1.7;
}

/* ---- Grid Layouts ---- */
.mm-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.mm-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

/* ---- Distributor Cards ---- */
.mm-distributor-card {
    background: var(--mm-bg-card);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-lg);
    overflow: hidden;
    transition: all var(--mm-transition);
}

.mm-distributor-card:hover {
    border-color: var(--mm-border-accent);
    box-shadow: var(--mm-glow);
    transform: translateY(-3px);
}

.mm-distributor-screenshot {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: top;
    border-bottom: 1px solid var(--mm-border);
    filter: brightness(0.9);
    transition: filter var(--mm-transition);
}

.mm-distributor-card:hover .mm-distributor-screenshot {
    filter: brightness(1);
}

.mm-distributor-info {
    padding: 24px;
}

.mm-distributor-info h3 {
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.mm-distributor-meta {
    font-family: var(--mm-font-condensed);
    color: var(--mm-text-muted);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.mm-distributor-meta span {
    margin-right: 16px;
}

/* ---- Tech Support Page ---- */
.mm-tech-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--mm-border);
    padding-bottom: 16px;
}

.mm-tech-nav a {
    font-family: var(--mm-font-condensed) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 20px;
    color: var(--mm-text-muted) !important;
    border: 1px solid transparent;
    border-radius: var(--mm-radius);
    transition: all var(--mm-transition);
    font-size: 1.2rem;
}

.mm-tech-nav a:hover,
.mm-tech-nav a.active {
    color: var(--mm-accent) !important;
    border-color: var(--mm-border-accent);
    background: rgba(0, 180, 216, 0.05);
}

/* FAQ Accordion */
.mm-faq-item {
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius);
    margin-bottom: 8px;
    overflow: hidden;
    background: var(--mm-bg-card);
}

.mm-faq-question {
    width: 100%;
    background: none;
    border: none;
    color: var(--mm-text-primary);
    font-family: var(--mm-font-body);
    font-weight: 600;
    font-size: 1rem;
    padding: 20px 24px;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background var(--mm-transition);
}

.mm-faq-question:hover {
    background: rgba(0, 180, 216, 0.03);
}

.mm-faq-question::after {
    content: '+';
    font-family: var(--mm-font-display);
    font-size: 1.5rem;
    color: var(--mm-accent);
    transition: transform var(--mm-transition);
    flex-shrink: 0;
    margin-left: 16px;
}

.mm-faq-item.active .mm-faq-question::after {
    content: '−';
}

.mm-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

.mm-faq-item.active .mm-faq-answer {
    max-height: 500px;
    padding: 0 24px 20px;
}

.mm-faq-answer p {
    color: var(--mm-text-secondary);
    line-height: 1.8;
}

/* Wiring Diagram Cards */
.mm-diagram-card {
    background: var(--mm-bg-card);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-lg);
    padding: 24px;
    text-align: center;
    transition: all var(--mm-transition);
}

.mm-diagram-card:hover {
    border-color: var(--mm-border-accent);
    box-shadow: var(--mm-glow);
}

.mm-diagram-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    background: rgba(0, 180, 216, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mm-diagram-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--mm-accent);
    fill: none;
    stroke-width: 2;
}

/* Download Items */
.mm-download-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--mm-bg-card);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius);
    margin-bottom: 8px;
    transition: all var(--mm-transition);
}

.mm-download-item:hover {
    border-color: var(--mm-border-accent);
    background: var(--mm-bg-elevated);
}

.mm-download-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mm-download-icon {
    width: 40px;
    height: 40px;
    background: rgba(0, 180, 216, 0.1);
    border-radius: var(--mm-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mm-download-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--mm-accent);
    fill: none;
    stroke-width: 2;
}

.mm-download-name {
    font-weight: 600;
    color: var(--mm-text-primary);
}

.mm-download-meta {
    font-size: 1.35rem;
    color: var(--mm-text-muted);
    font-family: var(--mm-font-condensed);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Troubleshooting Steps */
.mm-trouble-step {
    display: flex;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid var(--mm-border);
}

.mm-trouble-step:last-child { border-bottom: none; }

.mm-step-number {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: rgba(0, 180, 216, 0.1);
    border: 1px solid var(--mm-border-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--mm-accent);
}

.mm-trouble-content h4 {
    font-family: var(--mm-font-body) !important;
    font-weight: 600 !important;
    font-size: 1.35rem;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 4px;
}

.mm-trouble-content p {
    font-size: 1.3rem;
}

/* ---- Feature Icons Row ---- */
.mm-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    padding: 60px 0;
}

.mm-feature {
    text-align: center;
    padding: 32px 20px;
}

.mm-feature-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    background: rgba(0, 180, 216, 0.08);
    border: 1px solid var(--mm-border-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mm-feature-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--mm-accent);
    fill: none;
    stroke-width: 1.5;
}

.mm-feature h4 {
    font-size: 1.45rem;
    margin-bottom: 8px;
}

.mm-feature p {
    font-size: 1.25rem;
    color: var(--mm-text-muted);
}

/* ---- Contact / CTA Bar ---- */
.mm-cta-bar {
    background: linear-gradient(135deg, var(--mm-bg-secondary) 0%, var(--mm-bg-elevated) 100%);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-lg);
    padding: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    margin: 40px 0;
}

.mm-cta-bar h3 {
    font-size: 1.6rem;
    margin-bottom: 4px;
}

.mm-cta-bar p {
    color: var(--mm-text-muted);
}

.mm-cta-contact {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.mm-cta-contact a {
    font-family: var(--mm-font-condensed);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1.25rem;
}

/* ---- Footer ---- */
.site-footer,
#colophon {
    background: var(--mm-bg-primary) !important;
    border-top: 1px solid var(--mm-border) !important;
    color: var(--mm-text-muted) !important;
    padding: 40px 20px !important;
}

.site-footer a { color: var(--mm-text-muted) !important; }
.site-footer a:hover { color: var(--mm-accent) !important; }

/* ---- Utility Classes ---- */
.mm-text-accent  { color: var(--mm-accent) !important; }
.mm-text-muted   { color: var(--mm-text-muted) !important; }
.mm-mt-sm        { margin-top: 16px; }
.mm-mt-md        { margin-top: 32px; }
.mm-mt-lg        { margin-top: 64px; }
.mm-mb-sm        { margin-bottom: 16px; }
.mm-mb-md        { margin-bottom: 32px; }
.mm-mb-lg        { margin-bottom: 64px; }

/* ---- Badge / Tag ---- */
.mm-badge {
    display: inline-block;
    font-family: var(--mm-font-condensed);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1.0rem;
    padding: 5px 14px;
    border-radius: 2px;
    background: rgba(0, 180, 216, 0.1);
    color: var(--mm-accent);
    border: 1px solid var(--mm-border-accent);
}

.mm-badge-warn {
    background: rgba(230, 57, 70, 0.1);
    color: var(--mm-warn);
    border-color: rgba(230, 57, 70, 0.3);
}

.mm-badge-success {
    background: rgba(6, 214, 160, 0.1);
    color: var(--mm-success);
    border-color: rgba(6, 214, 160, 0.3);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .mm-hero h1 { font-size: 2.2rem; }
    .mm-hero-content { padding: 60px 20px; }
    .mm-section { padding: 50px 16px; }
    .mm-cta-bar { padding: 32px 20px; flex-direction: column; text-align: center; }
    .mm-cta-contact { justify-content: center; }
    .mm-grid-3 { grid-template-columns: 1fr; }
    .mm-tech-nav { justify-content: center; }
}

@media (max-width: 480px) {
    .mm-hero h1 { font-size: 1.8rem; }
    .mm-card { padding: 20px; }
    .mm-distributor-screenshot { height: 160px; }
}

/* ---- Scrollbar Styling ---- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--mm-bg-primary); }
::-webkit-scrollbar-thumb {
    background: var(--mm-border);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--mm-text-muted); }

/* ---- Image Slider Override ---- */
.entry-content img,
.wp-block-image img {
    border-radius: var(--mm-radius);
    border: 1px solid var(--mm-border);
}

/* ---- WP Block Overrides ---- */
.entry-content,
.page-content {
    color: var(--mm-text-secondary);
}

.entry-title,
.page-title {
    font-family: var(--mm-font-display) !important;
    color: var(--mm-text-primary) !important;
}

/* ---- Animations ---- */
@keyframes mm-fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes mm-slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.mm-animate-fade {
    animation: mm-fadeUp 0.6s ease forwards;
}

.mm-animate-slide {
    animation: mm-slideIn 0.5s ease forwards;
}

/* Stagger delays */
.mm-delay-1 { animation-delay: 0.1s; opacity: 0; }
.mm-delay-2 { animation-delay: 0.2s; opacity: 0; }
.mm-delay-3 { animation-delay: 0.3s; opacity: 0; }
.mm-delay-4 { animation-delay: 0.4s; opacity: 0; }