/**
 * Muskoka Marketing Co. - Custom Styles
 * 
 * Color scheme, glass panels, typography, and parallax
 * background support for the Avada child theme.
 *
 * v1.0.0
 */

/* =========================================================
   CSS Custom Properties (Design Tokens)
   Ported from the Loveable source
   ========================================================= */
:root {
    --mmc-bg:             hsl(220, 20%, 10%);
    --mmc-bg-rgb:         24, 27, 33;
    --mmc-fg:             hsl(40, 30%, 92%);
    --mmc-fg-rgb:         237, 231, 218;

    --mmc-primary:        hsl(34, 40%, 64%);
    --mmc-primary-fg:     hsl(220, 20%, 10%);
    --mmc-accent:         hsl(174, 35%, 53%);
    --mmc-accent-fg:      hsl(220, 20%, 10%);

    --mmc-muted:          hsl(220, 15%, 18%);
    --mmc-muted-fg:       hsl(220, 10%, 60%);

    --mmc-glass-bg:       rgba(12, 14, 18, 0.88);
    --mmc-glass-border:   rgba(237, 231, 218, 0.1);
    --mmc-glass-radius:   0.75rem;

    --mmc-font-heading:   'Playfair Display', Georgia, serif;
    --mmc-font-body:      'Raleway', 'Helvetica Neue', Arial, sans-serif;
}


/* =========================================================
   Parallax Background (applied directly to body by JS)
   ========================================================= */


/* =========================================================
   Page-Level Overrides (when parallax is active)
   ========================================================= */
body.mmc-has-parallax {
    background-color: var(--mmc-bg) !important;
    color: var(--mmc-fg) !important;
}

/* Make Avada's main content area transparent so parallax shows through */
body.mmc-has-parallax #wrapper,
body.mmc-has-parallax #main,
body.mmc-has-parallax .fusion-page-title-bar,
body.mmc-has-parallax .avada-page-titlebar-wrapper,
body.mmc-has-parallax #content,
body.mmc-has-parallax .fusion-footer-widget-area,
body.mmc-has-parallax .fusion-footer-copyright-area,
body.mmc-has-parallax .fusion-body,
body.mmc-has-parallax #boxed-wrapper,
body.mmc-has-parallax .wrapper {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Make individual Avada sections/containers transparent by default */
body.mmc-has-parallax .fusion-fullwidth,
body.mmc-has-parallax .fusion-builder-row {
    background-color: transparent !important;
    background-image: none !important;
}


/* =========================================================
   Glass Panel Components
   Use these classes on Avada containers/columns
   ========================================================= */
.mmc-glass {
    background: var(--mmc-glass-bg) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--mmc-glass-border) !important;
    border-radius: var(--mmc-glass-radius) !important;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Lighter glass variant */
.mmc-glass-light {
    background: rgba(var(--mmc-bg-rgb), 0.7) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--mmc-glass-border) !important;
    border-radius: var(--mmc-glass-radius) !important;
}

/* AI service card gradient */
.mmc-glass-ai {
    background: linear-gradient(135deg, hsla(174, 35%, 53%, 0.12), hsla(220, 20%, 10%, 0.8)) !important;
    border: 1px solid hsla(174, 35%, 53%, 0.25) !important;
    border-radius: var(--mmc-glass-radius) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.mmc-glass-ai:hover {
    border-color: hsla(174, 35%, 53%, 0.5) !important;
    box-shadow: 0 0 30px hsla(174, 35%, 53%, 0.15);
}


/* =========================================================
   Typography (applied on parallax pages)
   ========================================================= */
body.mmc-has-parallax {
    font-family: var(--mmc-font-body) !important;
}

body.mmc-has-parallax h1,
body.mmc-has-parallax h2,
/* body.mmc-has-parallax h3, */
body.mmc-has-parallax h4,
body.mmc-has-parallax h5,
body.mmc-has-parallax h6,
body.mmc-has-parallax .fusion-title,
body.mmc-has-parallax .entry-title {
    font-family: var(--mmc-font-heading) !important;
    color: var(--mmc-fg) !important;
}
body.mmc-has-parallax h3 {
	font-family: var(--mmc-font-heading) !important;
}

/* Text legibility on light parallax backgrounds */
body.mmc-has-parallax h1,
body.mmc-has-parallax h2,
body.mmc-has-parallax h3,
body.mmc-has-parallax h4,
body.mmc-has-parallax h5,
body.mmc-has-parallax h6,
body.mmc-has-parallax .fusion-title,
body.mmc-has-parallax .entry-title {
    text-shadow: 0 2px 16px hsla(220, 20%, 2%, 0.85),
                 0 1px 4px hsla(220, 20%, 2%, 0.7);
}

body.mmc-has-parallax .fusion-title + .fusion-text,
body.mmc-has-parallax .fusion-fullwidth p {
    text-shadow: 0 1px 10px hsla(220, 20%, 2%, 0.7),
                 0 1px 3px hsla(220, 20%, 2%, 0.5);
	    color: #FFF !important;
}

/* Nav link legibility on transparent header */
body.mmc-has-parallax .fusion-main-menu > ul > li > a,
body.mmc-has-parallax .fusion-logo a {
    color: #ffffff !important;
    text-shadow: 0 2px 16px hsla(220, 20%, 2%, 0.85),
                 0 1px 4px hsla(220, 20%, 2%, 0.7);
}

/* Section heading style */
.mmc-heading {
    font-family: var(--mmc-font-heading) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--mmc-fg) !important;
    text-shadow: 0 2px 12px hsla(220, 20%, 4%, 0.7),
                 0 1px 3px hsla(220, 20%, 4%, 0.5);
}

/* Subheading style */
.mmc-subheading {
    font-family: var(--mmc-font-body) !important;
    font-weight: 300 !important;
    color: var(--mmc-muted-fg) !important;
    text-shadow: 0 1px 8px hsla(220, 20%, 4%, 0.6);
    line-height: 1.7;
}

/* Items list - inline pill tags */
.items-list ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.items-list ul li {
    display: inline-flex;
    padding: 0.35rem 1rem;
    border-radius: 9999px;
    border: 1px solid rgba(237, 231, 218, 0.12);
    font-size: 0.8rem;
    color: var(--mmc-muted-fg);
    background: rgba(var(--mmc-bg-rgb), 0.3);
    line-height: 1.4;
}

/* Muted text utility */
.mmc-text-muted {
    color: var(--mmc-muted-fg) !important;
}

/* Primary color text */
.mmc-text-primary {
    color: var(--mmc-primary) !important;
}

/* Accent color text */
.mmc-text-accent {
    color: var(--mmc-accent) !important;
}


/* =========================================================
   Buttons
   ========================================================= */
.mmc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    font-family: var(--mmc-font-body) !important;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none !important;
}

.mmc-btn-primary {
    background: var(--mmc-primary) !important;
    color: var(--mmc-primary-fg) !important;
    border: none !important;
}

.mmc-btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background: hsl(34, 50%, 58%) !important;
    color: var(--mmc-primary-fg) !important;
}

.mmc-btn-outline {
    background: transparent !important;
    color: var(--mmc-primary) !important;
    border: 2px solid var(--mmc-primary) !important;
}

.mmc-btn-outline:hover {
    background: hsla(34, 40%, 64%, 0.15) !important;
    transform: scale(1.05);
}


/* =========================================================
   Utility: Fade-in animation (for scroll reveals)
   ========================================================= */
.mmc-fade-in {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.mmc-fade-in.mmc-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   Star ratings (for testimonials)
   ========================================================= */
.mmc-stars {
    color: var(--mmc-primary);
    font-size: 1rem;
    letter-spacing: 0.15em;
}


/* =========================================================
   Tag / pill badges
   ========================================================= */
.mmc-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid var(--mmc-glass-border);
    font-size: 0.75rem;
    color: var(--mmc-muted-fg);
    background: rgba(var(--mmc-bg-rgb), 0.3);
}

.mmc-tag-primary {
    background: hsla(34, 40%, 64%, 0.2);
    color: var(--mmc-primary);
    border-color: hsla(34, 40%, 64%, 0.3);
}

.mmc-tag-accent {
    background: hsla(174, 35%, 53%, 0.2);
    color: var(--mmc-accent);
    border-color: hsla(174, 35%, 53%, 0.3);
}


/* =========================================================
   Custom scrollbar (matches Loveable version)
   ========================================================= */
body.mmc-has-parallax::-webkit-scrollbar {
    width: 8px;
}

body.mmc-has-parallax::-webkit-scrollbar-track {
    background: var(--mmc-bg);
}

body.mmc-has-parallax::-webkit-scrollbar-thumb {
    background: hsla(34, 40%, 64%, 0.3);
    border-radius: 4px;
}

body.mmc-has-parallax::-webkit-scrollbar-thumb:hover {
    background: hsla(34, 40%, 64%, 0.5);
}


/* Avada Header/Footer - controlled via Avada Theme Options, not CSS */


/* =========================================================
   Responsive adjustments
   ========================================================= */
@media (max-width: 768px) {
    .mmc-glass {
        border-radius: 0.5rem !important;
    }

    .mmc-heading {
        font-size: 1.75rem !important;
    }
}


/* Tour page - push map below header and force scrolled header look */
.page-id-105 .flyover-tour-wrap {
    margin-top: 80px;
}
.page-id-105 .fusion-header-wrapper .fusion-header {
    background-color: #8b7355 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
}
.page-id-105 .fusion-logo img {
    max-height: 40px !important;
}
.page-id-105 .fusion-main-menu > ul > li > a {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    height: auto !important;
}
.page-id-105 .fusion-header .fusion-row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Contact page - FAQ accordion gold text */
body.mmc-has-parallax .fusion-accordian .panel-title a,
body.mmc-has-parallax .fusion-accordian .panel-title a .fusion-toggle-heading {
    color: #c8a87e !important;
}

/* Tour page - force compact header (no scroll = no sticky trigger) */
body.page-id-105 .fusion-header-sticky-height {
    display: none !important;
}
body.page-id-105 .fusion-header-wrapper {
    height: auto !important;
    background-color: #8b7355 !important;
}
body.page-id-105 .fusion-header-v1 {
    height: auto !important;
    min-height: 0 !important;
}
body.page-id-105 .fusion-header {
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    background-color: #8b7355 !important;
}
body.page-id-105 .fusion-header .fusion-row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body.page-id-105 .fusion-logo {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body.page-id-105 .fusion-logo img {
    max-height: 40px !important;
    height: auto !important;
}
body.page-id-105 .fusion-main-menu > ul > li > a {
    height: 50px !important;
    line-height: 50px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    color: #ffffff !important;
}
body.page-id-105 .fusion-main-menu > ul > li > a:hover {
    color: #c8a87e !important;
}
body.page-id-105 .flyover-tour-wrap {
    margin-top: 50px;
}



/* =========================================================
   Wavy Video Edge - Home Page
   The waterline where sky meets underwater.
   Clips the video container so the parallax bg shows through.
   ========================================================= */
body.page-id-9 .fusion-fullwidth.video-background .fullwidth-video {
    clip-path: url(#waveClip);
    -webkit-clip-path: url(#waveClip);
}






/* =========================================================
   Typography Sizing (Defaults for Parallax Pages)
   color + font-family for h1/h2/h4–h6 already set above.
   This adds size/spacing + completes h3, scoped to fusion_text
   so widget headings in footer/sidebar are unaffected.
   ========================================================= */
body.mmc-has-parallax .fusion-text h1 {
    font-size: 48px;
    margin-bottom: 16px;
}
body.mmc-has-parallax .fusion-text h2 {
    font-size: 32px;
    margin-bottom: 20px;
}
body.mmc-has-parallax .fusion-text h3 {
    font-size: 24px;
    margin-bottom: 16px;
    color: var(--mmc-fg);
}
body.mmc-has-parallax .fusion-text h4 {
    font-size: 20px;
    margin-bottom: 12px;
}

/* Body paragraphs and lists inside fusion_text */
body.mmc-has-parallax .fusion-text p {
    color: #c4c9d4;
    font-size: 18px;
    line-height: 1.8;
}
body.mmc-has-parallax .fusion-text ul,
body.mmc-has-parallax .fusion-text ol {
    color: #c4c9d4;
    font-size: 18px;
    line-height: 2.0;
    padding-left: 24px;
}

/* Lead/intro paragraph — muted, slightly larger.
   Usage: <p class="mmc-lead">Marketing That Reflects...</p>  */
.mmc-lead {
    color: #8f96a3 !important;
    font-size: 20px !important;
}

/* H2 size variants
   Use .mmc-band-heading for the centered transparent band ("Agriculture Marketing Services" 36px)
   Use .mmc-card-heading-sm for h2s in 1/2-width cards (28px) */
.mmc-band-heading {
    font-size: 36px !important;
    text-align: center;
}
.mmc-card-heading-sm {
    font-size: 28px !important;
}

/* =========================================================
   CTA Button
   Usage: <a class="mmc-cta-button" href="/contact/">Get in Touch</a>
   ========================================================= */
.mmc-cta-button {
    display: inline-block;
    background: linear-gradient(135deg, #c8893a, #d4a04a);
    color: #0b1318 !important;
    padding: 16px 40px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mmc-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(200, 137, 58, 0.3);
    color: #0b1318 !important;
}