/*
Theme Name: Mak Muzak
Theme URI: https://www.makmuzak.com
Author: Mak Muzak / DJ Flex
Author URI: https://www.makmuzak.com
Description: Custom WordPress theme for Mak Muzak DJ services (DC/MD/VA). A faithful, lightweight replica of the Mak Muzak single-page site with a sticky header, anchored smooth-scroll sections, and a self-contained, spam-hardened contact form. Built for a LAMP + WordPress stack with security in mind.
Version: 1.0.3
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: makmuzak
*/

/* =================================================================
   DESIGN TOKENS
   ================================================================= */
:root {
    --slate:        #2e3a45;   /* header, intro band */
    --slate-deep:   #28333d;   /* footer */
    --ink:          #20272e;   /* dark headings on white */
    --offwhite:     #f4f4f3;   /* gallery band */
    --white:        #ffffff;
    --serif-grey:   #6d6863;   /* serif body copy */
    --quote-blue:   #6c83ff;   /* testimonial quote marks */
    --accent-orange:#e0743b;   /* "Contact Us" inline links */
    --accent-green: #7eb338;   /* Send Message button */
    --accent-green-d:#6c9c2f;
    --cream:        #f5f0e8;   /* contact page left panel */
    --line:         rgba(255,255,255,.12);

    --font-display: 'Jost', system-ui, sans-serif;       /* nav, section titles, UI */
    --font-round:   'Quicksand', system-ui, sans-serif;  /* hero + friendly statements */
    --font-body:    'PT Serif', Georgia, serif;          /* paragraph + testimonials */

    --header-h: 80px;
    --maxw: 1200px;
}

/* =================================================================
   RESET / BASE
   ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--white);
    line-height: 1.6;
    padding-top: var(--header-h);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
p { margin: 0 0 1em; }

.mm-container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* =================================================================
   BUTTONS
   ================================================================= */
.mm-btn {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: .2px;
    padding: 15px 34px;
    cursor: pointer;
    border: 0;
    transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.mm-btn--light { background: var(--white); color: var(--ink); }
.mm-btn--light:hover { box-shadow: 0 8px 22px rgba(0,0,0,.18); transform: translateY(-2px); }
.mm-btn--dark { background: var(--slate); color: var(--white); }
.mm-btn--dark:hover { background: var(--ink); transform: translateY(-2px); }

/* =================================================================
   HEADER (sticky)
   ================================================================= */
.mm-header {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--header-h);
    background: var(--slate);
    border-top: 3px solid rgba(255,255,255,.14);
    z-index: 1000;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.mm-header .mm-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.mm-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    max-width: min(260px, 32vw);
    min-width: 0;
    overflow: hidden;
}
.mm-brand__mark { width: 40px; height: 40px; flex: 0 0 auto; }
.mm-brand__logo,
.mm-brand img,
.custom-logo {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: min(220px, 28vw);
    max-height: 54px;
    object-fit: contain;
}
.mm-brand__name {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 3px;
    font-size: 19px;
    color: var(--white);
    text-transform: uppercase;
}
.mm-nav { flex: 1 1 auto; }
.mm-nav ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; justify-content: center; gap: clamp(14px, 2vw, 30px);
}
.mm-nav a {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 16px;
    color: rgba(255,255,255,.82);
    padding: 6px 2px;
    white-space: nowrap;
    transition: color .2s ease;
}
.mm-nav a:hover,
.mm-nav .current-menu-item > a,
.mm-nav a.is-active { color: var(--white); font-weight: 600; }
.mm-header__cta { flex: 0 0 auto; }

/* Mobile nav toggle */
.mm-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.mm-burger span { display: block; width: 24px; height: 2px; background: var(--white); margin: 5px 0; transition: .2s; }

/* =================================================================
   HERO
   ================================================================= */
.mm-hero {
    position: relative;
    min-height: calc(100vh - var(--header-h));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    /* Gradient fallback shows even before the photo is added */
    background:
        linear-gradient(rgba(20,12,28,.55), rgba(12,10,24,.78)),
        radial-gradient(120% 90% at 70% 30%, #3a1d4d 0%, #1a1426 55%, #0c0a18 100%);
    background-size: cover;
    background-position: center;
}
.mm-hero__inner { max-width: 760px; padding: 40px 24px; }
.mm-hero h1 {
    font-family: var(--font-round);
    font-weight: 600;
    font-size: clamp(40px, 6vw, 64px);
    margin-bottom: 36px;
}
/* drop your photo at assets/img/hero.jpg and this layers it under the overlay */
.mm-hero[data-has-photo="1"] {
    background-image:
        linear-gradient(rgba(20,12,28,.45), rgba(12,10,24,.72)),
        var(--hero-photo);
    /* Keep the banner/hero image proportional and centered. */
    background-size: cover, cover;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
}

/* =================================================================
   INTRO BAND (slate)
   ================================================================= */
.mm-intro {
    background: var(--slate);
    color: var(--white);
    text-align: center;
    padding: 92px 0;
}
.mm-intro__text {
    font-family: var(--font-round);
    font-weight: 500;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.35;
    max-width: 900px;
    margin: 0 auto 44px;
}

/* =================================================================
   SECTION HEADINGS
   ================================================================= */
.mm-section { padding: 96px 0; }
.mm-section__title {
    font-family: var(--font-display);
    font-weight: 500;
    text-align: center;
    color: var(--ink);
    font-size: clamp(34px, 4.5vw, 52px);
    margin-bottom: 56px;
}

/* =================================================================
   SERVICES / WEDDING PACKAGES (3 columns)
   ================================================================= */
.mm-services { background: var(--white); }
.mm-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1080px;
    margin: 0 auto;
}
.mm-service {
    border: 1px solid rgba(32,39,46,.12);
    padding: 30px 28px;
    min-height: 100%;
    background: var(--white);
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
}
.mm-service h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 19px;
    color: var(--ink);
    margin-bottom: 10px;
}
.mm-service p {
    font-family: var(--font-body);
    color: var(--serif-grey);
    font-size: 16px;
    margin-bottom: 16px;
}
.mm-service__eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 12px;
}
.mm-service__list,
.mm-checker__list {
    margin: 0;
    padding-left: 1.2em;
    color: var(--serif-grey);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
}
.mm-service__list li,
.mm-checker__list li { margin-bottom: 8px; }
.mm-services__cta { text-align: center; margin-top: 52px; }

/* =================================================================
   GALLERY BAND
   ================================================================= */
.mm-gallery { background: var(--offwhite); }
.mm-gallery__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 980px;
    margin: 0 auto;
}
.mm-gallery__grid figure { margin: 0; }
.mm-gallery__grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.mm-gallery__ph {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #3a1d4d, #16213e);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.5);
    font-family: var(--font-display);
    font-size: 14px; letter-spacing: 1px;
}

/* =================================================================
   TESTIMONIALS
   ================================================================= */
.mm-testimonials { background: var(--white); }
.mm-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
}
.mm-testimonial__avatar {
    width: 96px; height: 96px; border-radius: 50%;
    object-fit: cover; margin: 0 auto 8px;
}
.mm-testimonial__avatar--ph {
    width: 96px; height: 96px; border-radius: 50%;
    margin: 0 auto 8px;
    background: #d9d9d9;
}
.mm-testimonial__quote-mark {
    color: var(--quote-blue);
    font-family: var(--font-display);
    font-size: 40px; font-weight: 700;
    line-height: 1; margin-bottom: 10px;
}
.mm-testimonial p {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--serif-grey);
    font-size: 16px;
    margin-bottom: 18px;
}
.mm-testimonial__name {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--ink);
    font-size: 16px;
}

/* =================================================================
   FOOTER
   ================================================================= */
.mm-footer {
    background: var(--slate-deep);
    color: rgba(255,255,255,.82);
    padding: 64px 0 56px;
}
.mm-footer .mm-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.2fr 1fr;
    gap: 32px;
    align-items: start;
}
.mm-footer__brand { display: flex; align-items: center; gap: 10px; }
.mm-footer__brand .mm-brand__name { font-size: 16px; }
.mm-footer__col h4 {
    font-family: var(--font-display);
    font-weight: 700; color: var(--white);
    font-size: 16px; margin: 0 0 10px;
}
.mm-footer__col ul { list-style: none; margin: 0; padding: 0; }
.mm-footer__col li { margin-bottom: 10px; font-family: var(--font-display); font-size: 15px; }
.mm-footer__col a:hover { color: var(--white); }
.mm-footer__cta { justify-self: end; }

/* =================================================================
   CONTACT FORM
   ================================================================= */
.mm-contact { background: var(--offwhite); }
.mm-form {
    max-width: 640px; margin: 0 auto;
    background: var(--white);
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,.06);
}
.mm-form__row { margin-bottom: 24px; }
.mm-form__row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mm-form label {
    display: block;
    font-family: var(--font-display);
    font-weight: 500; font-size: 14px;
    color: var(--ink); margin-bottom: 6px;
}
.mm-form input,
.mm-form textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 16px;
    padding: 8px 2px;
    border: 0;
    border-bottom: 1px solid #d8d2c8;
    background: transparent;
    color: var(--ink);
}
.mm-form input:focus,
.mm-form textarea:focus { outline: none; border-bottom: 2px solid var(--accent-orange); }
.mm-form textarea { min-height: 90px; resize: vertical; }
.mm-btn--green { background: var(--accent-green); color: #fff; }
.mm-btn--green:hover { background: var(--accent-green-d); transform: translateY(-2px); }
/* Honeypot — hidden from humans, visible to dumb bots */
.mm-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 0; overflow: hidden; }
.mm-form__notice { padding: 14px 16px; margin-bottom: 22px; font-family: var(--font-display); font-size: 15px; }
.mm-form__notice--ok  { background: #e6f6ec; color: #1d6b3a; border: 1px solid #b6e2c5; }
.mm-form__notice--err { background: #fdeaea; color: #9a2222; border: 1px solid #f3c2c2; }
.mm-form .cf-turnstile { margin-bottom: 20px; }

/* =================================================================
   INNER-PAGE BANNER (shorter hero used on About / Offering / Contact)
   ================================================================= */
.mm-page-banner {
    position: relative;
    min-height: clamp(280px, 38vh, 460px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    padding: 60px 24px;
    background:
        linear-gradient(rgba(16,18,28,.45), rgba(10,12,22,.68)),
        radial-gradient(120% 120% at 60% 40%, #16314d 0%, #11203a 55%, #0a1322 100%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.mm-page-banner[style] {
    /* Keep custom banner art proportional. Do not stretch to 100% x 100%. */
    background-size: cover, cover;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
}
.mm-page-banner h1 {
    font-family: var(--font-round);
    font-weight: 600;
    font-size: clamp(36px, 5vw, 58px);
    max-width: 760px;
}

/* =================================================================
   STATEMENT BLOCK (big rounded heading + serif sub-paragraph)
   ================================================================= */
.mm-statement { background: var(--white); text-align: center; }
.mm-statement__head {
    font-family: var(--font-round);
    font-weight: 600;
    color: var(--ink);
    font-size: clamp(28px, 3.8vw, 46px);
    line-height: 1.3;
    max-width: 880px;
    margin: 0 auto 24px;
}
.mm-statement__sub {
    font-family: var(--font-body);
    color: var(--serif-grey);
    font-size: 18px;
    line-height: 1.9;
    max-width: 720px;
    margin: 0 auto;
}

/* =================================================================
   FEATURE BLOCK (background image with a centered white card)
   ================================================================= */
.mm-feature {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    background:
        linear-gradient(rgba(8,10,20,.35), rgba(8,10,20,.5)),
        radial-gradient(120% 120% at 30% 50%, #2a1640 0%, #121a36 60%, #0a1020 100%);
    background-size: cover;
    background-position: center;
}
.mm-feature__card {
    background: var(--white);
    max-width: 540px;
    width: 100%;
    padding: 56px 48px;
    text-align: center;
}
.mm-feature__card h2 {
    font-family: var(--font-round);
    font-weight: 600;
    color: var(--ink);
    font-size: clamp(30px, 3.4vw, 40px);
    margin-bottom: 20px;
}
.mm-feature__card p {
    font-family: var(--font-body);
    color: var(--serif-grey);
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 28px;
}

/* Statement heading variant: angular display font (Our Offering page) */
.mm-statement__head--display {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(24px, 3vw, 36px);
}

/* =================================================================
   CHECKERBOARD GRID (alternating image / text — Our Offering)
   ================================================================= */
.mm-checker__row { display: grid; grid-template-columns: 1fr 1fr; }
.mm-checker__media { position: relative; min-height: 420px; }
.mm-checker__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.mm-checker__media-ph {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #3a1d4d, #16213e);
}
.mm-checker__text {
    background: var(--offwhite);
    padding: 64px 72px;
    display: flex; flex-direction: column; justify-content: center;
}
.mm-checker__text h3 {
    font-family: var(--font-display);
    font-weight: 600; font-size: 20px;
    color: var(--ink); margin-bottom: 16px;
}
.mm-checker__text p {
    font-family: var(--font-body);
    color: var(--serif-grey); font-size: 16px;
    margin-bottom: 18px;
}
.mm-checker__link {
    font-family: var(--font-display);
    font-weight: 600; font-size: 15px;
    color: var(--accent-orange);
    text-decoration: underline;
    text-underline-offset: 3px;
    align-self: flex-start;
}
.mm-checker__link:hover { color: var(--ink); }
/* reversed row: text on the left, image on the right */
.mm-checker__row--reverse .mm-checker__media { order: 2; }
.mm-checker__row--reverse .mm-checker__text  { order: 1; }

/* =================================================================
   CONTACT PAGE — split hero with overlapping form card
   ================================================================= */
.mm-contact-hero {
    position: relative;
    /* cream on the top ~58%, dark photo behind the lower portion */
    background:
        linear-gradient(var(--cream) 0 58%, transparent 58% 100%),
        radial-gradient(120% 120% at 30% 60%, #16331f 0%, #0c1f14 55%, #060d09 100%);
    background-size: cover;
    background-position: center;
    padding: 0;
}
.mm-contact-hero .mm-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    padding-top: 70px;
    padding-bottom: 70px;
}
.mm-contact-hero__text {
    font-family: var(--font-round);
    font-weight: 600;
    color: var(--ink);
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.3;
    padding-top: 20px;
}
.mm-contact-hero__text h1 {
    font-family: var(--font-round);
    font-weight: 600;
    color: var(--ink);
    font-size: clamp(34px, 4.4vw, 56px);
    line-height: 1.15;
    margin-bottom: 20px;
}
.mm-contact-hero__lead {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--serif-grey);
    font-size: 18px;
    line-height: 1.85;
    max-width: 560px;
}
.mm-eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent-orange);
    font-size: 13px;
    margin-bottom: 14px;
}
.mm-contact-quick {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
}
.mm-contact-quick a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.mm-contact-quick a:hover { color: var(--accent-orange); }
.mm-contact-hero__form {
    background: var(--white);
    padding: 48px;
}
.mm-contact-hero__form .mm-form {
    box-shadow: none; padding: 0; max-width: none; margin: 0;
}
.mm-contact-hero__form--embed {
    box-shadow: 0 18px 48px rgba(0,0,0,.12);
}
.mm-contact-hero__title {
    font-family: var(--font-round);
    font-weight: 600;
    text-align: center;
    color: var(--ink);
    font-size: 34px;
    margin-bottom: 16px;
}
.mm-contact-hero__note,
.mm-contact-form-fallback {
    font-family: var(--font-display);
    color: var(--serif-grey);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}
.mm-contact-hero__note { margin-bottom: 22px; }
.mm-google-form-wrap {
    width: 100%;
    min-height: 920px;
    overflow: hidden;
    background: var(--offwhite);
    border: 1px solid #e4ded4;
}
.mm-google-form {
    display: block;
    width: 100%;
    min-height: 920px;
    border: 0;
    background: var(--white);
}
.mm-contact-form-fallback { margin: 18px 0 0; }
.mm-contact-form-fallback a {
    color: var(--accent-orange);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* "Our Contact Info" block */
.mm-contact-info { background: var(--white); }
.mm-contact-info .mm-container { max-width: 1000px; }
.mm-contact-info h2 {
    font-family: var(--font-round);
    font-weight: 600; color: var(--ink);
    font-size: clamp(30px, 3.4vw, 42px);
    margin-bottom: 28px;
}
.mm-contact-info ul { list-style: none; margin: 0; padding: 0; }
.mm-contact-info li {
    font-family: var(--font-body);
    color: var(--serif-grey);
    font-size: 17px; margin-bottom: 14px;
}
.mm-contact-info a:hover { color: var(--accent-orange); }

/* =================================================================
   COPYRIGHT + SOCIAL BAR (site-wide, below footer)
   ================================================================= */
.mm-copyright {
    background: #181b1f;
    color: rgba(255,255,255,.6);
}
.mm-copyright .mm-container {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 20px; padding-bottom: 20px; gap: 16px;
}
.mm-copyright p {
    margin: 0; font-family: var(--font-body); font-size: 14px;
}
.mm-social { display: flex; gap: 12px; }
.mm-social a {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.4);
    display: flex; align-items: center; justify-content: center;
    color: #fff; transition: background .2s ease, color .2s ease;
}
.mm-social a:hover { background: #fff; color: #181b1f; }
.mm-social svg { width: 16px; height: 16px; fill: currentColor; }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 900px) {
    .mm-services__grid,
    .mm-testimonials__grid { grid-template-columns: 1fr; gap: 40px; }
    .mm-footer .mm-container { grid-template-columns: 1fr 1fr; }
    .mm-footer__cta { justify-self: start; }
    .mm-checker__row,
    .mm-checker__row--reverse { grid-template-columns: 1fr; }
    .mm-checker__row--reverse .mm-checker__media { order: 1; }
    .mm-checker__row--reverse .mm-checker__text  { order: 2; }
    .mm-checker__media { min-height: 280px; }
    .mm-contact-hero .mm-container { grid-template-columns: 1fr; }
    .mm-contact-hero { background: var(--cream); }
    .mm-contact-info .mm-container { max-width: var(--maxw); }
}
@media (max-width: 760px) {
    .mm-brand { max-width: 190px; }
    .mm-brand__logo,
    .mm-brand img,
    .custom-logo { max-width: 170px; max-height: 48px; }
    .mm-burger { display: block; }
    .mm-nav {
        position: absolute; top: var(--header-h); left: 0; right: 0;
        background: var(--slate);
        max-height: 0; overflow: hidden; transition: max-height .25s ease;
    }
    .mm-nav.is-open { max-height: 360px; }
    .mm-nav ul { flex-direction: column; gap: 0; padding: 8px 0; }
    .mm-nav li { text-align: center; }
    .mm-nav a { display: block; padding: 14px; }
    .mm-header__cta { display: none; }
    .mm-gallery__grid { grid-template-columns: 1fr; }
    .mm-form { padding: 28px 20px; }
    .mm-feature__card { padding: 36px 24px; }
    .mm-feature { min-height: 0; }
    .mm-form__row--split { grid-template-columns: 1fr; gap: 24px; }
    .mm-contact-hero__form { padding: 28px 22px; }
    .mm-google-form-wrap, .mm-google-form { min-height: 980px; }
    .mm-checker__text { padding: 40px 28px; }
    .mm-copyright .mm-container { flex-direction: column; text-align: center; }
}