/* ============================================================
   Enigma PG LLC — Site Stylesheet
   Author: Bryant De Luna-Peralta

   Consolidated again to remove duplicates that crept back in
   (header-container and nav-toggle were each defined twice, and
   one header-container override had escaped its media query,
   meaning it was silently affecting ALL screen sizes instead of
   just mobile). Every selector now appears exactly once, and
   every mobile-only rule lives inside a media query.
   ============================================================ */

/* ---- General Reset ---- */
body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    color: #CCC;

    /* Uniform dark gradient + subtle diagonal gold hairlines, used
       site-wide as the base background texture behind every section. */
    background: linear-gradient(180deg, #000000 0%, #111111 100%),
                repeating-linear-gradient(
                    135deg,
                    rgba(212, 175, 55, 0.1) 0px,
                    rgba(212, 175, 55, 0.1) 2px,
                    transparent 2px,
                    transparent 60px
                );
    background-size: cover;
    position: relative;
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at center,
        transparent 70%,
        rgba(0, 0, 0, 0.6) 100%
    );
    z-index: -1;
    pointer-events: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ============================================================
   SITE HEADER / NAVIGATION
   ============================================================ */

.site-header {
    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
    padding: 10px 0;
    border-bottom: 4px solid rgba(212, 175, 55, 0.7);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
}

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

.logo img {
    max-height: 10vh;
    width: auto;
}

@media (max-width: 768px) {
    .logo img {
        max-height: 60px;
    }
}

@media (max-width: 480px) {
    .logo img {
        max-height: 50px;
    }
}

/* Navigation */
.site-navigation {
    display: flex;
    justify-content: flex-end;
}

.nav-menu {
    list-style: none;
    display: flex;
    gap: 32px;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    display: inline-block;
}

.nav-menu a {
    text-decoration: none;
    color: #FFF;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: #D4AF37;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.8), rgba(255, 215, 0, 0.8));
    transition: width 0.3s ease-in-out;
}

.nav-menu a:hover::after {
    width: 100%;
}

/* ---- Hamburger button ---- */
/* Hidden by default (desktop); shown only below the 768px breakpoint. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    width: 44px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #D4AF37;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Animate the three bars into an X when open */
.nav-toggle.nav-toggle-open span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.nav-toggle.nav-toggle-open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.nav-toggle-open span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* ---- Mobile nav menu ---- */
@media (max-width: 768px) {
    .header-container {
        padding: 0 20px;
    }

    .nav-toggle {
        display: flex;
    }

    .site-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
    }

    .nav-menu {
        flex-direction: column;
        align-items: center;
        gap: 0;
        background: linear-gradient(180deg, #1f1f1f 0%, #161616 100%);
        border-bottom: 3px solid rgba(212, 175, 55, 0.6);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.25s ease;
    }

    .nav-menu.nav-open {
        max-height: 400px;
        opacity: 1;
    }

    .nav-menu li {
        width: 100%;
        text-align: center;
    }

    .nav-menu a {
        display: block;
        padding: 18px 0;
        font-size: 16px;
        letter-spacing: 1.5px;
    }

    /* The underline-on-hover effect doesn't translate well to a
       full-width tap target on mobile, so it's turned off here. */
    .nav-menu a::after {
        display: none;
    }
}

/* ============================================================
   HERO SECTION
   ============================================================ */

.hero {
    position: relative;
    height: 600px;
    overflow: hidden;
    /* Same dark gradient family as the header/footer, layered over
       whatever carousel image sits underneath, so the whole hero
       reads as one continuous surface rather than a flat photo. */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.75), rgba(20, 20, 20, 0.85));
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.5);
}

.hero-carousel {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-content {
    position: absolute;
    top: 40%;
    left: 50px;
    transform: translateY(-40%);
    color: #FFF;
    z-index: 10;
    max-width: 600px;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 30px 40px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.hero-content h1 {
    font-size: 54px;
    margin-bottom: 20px;
    font-weight: bold;
    color: #D4AF37;
    text-transform: uppercase;
}

.hero-content p {
    font-size: 20px;
    margin-bottom: 30px;
    line-height: 1.6;
    color: #FFF;
}

.btn-primary {
    background-color: #D4AF37;
    color: #000;
    padding: 12px 24px;
    border-radius: 5px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-primary:hover {
    background-color: #B8860B;
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .hero {
        height: 480px;
    }

    .hero-content {
        left: 16px;
        right: 16px;
        max-width: none;
        padding: 24px 22px;
    }

    .hero-content h1 {
        font-size: 32px;
    }

    .hero-content p {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .hero {
        height: 420px;
    }

    .hero-content h1 {
        font-size: 26px;
    }
}

/* ============================================================
   FEATURES SECTION (Durable Materials / Luxury Finish / Custom Designs)
   ============================================================ */

.features {
    padding: 60px 20px;
    /* Matches the header's gradient direction/tones so the page
       reads as one consistent surface as you scroll down it. */
    background: linear-gradient(180deg, #1f1f1f 0%, #161616 100%);
    text-align: center;
    color: #FFF;
}

.feature-grid {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 240px;
}

.feature-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #D4AF37;
    border-radius: 50%;
    color: #D4AF37;
}

.feature-icon svg {
    width: 28px;
    height: 28px;
}

.feature-item h3 {
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #FFF;
    margin: 0 0 8px 0;
}

.feature-item p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    color: #BBB;
}

/* ============================================================
   GALLERY SECTION (homepage preview grid)
   ============================================================ */

.gallery {
    padding: 50px 60px;
    /* Slightly darker than .features, continuing the same gradient
       family so the page gets gradually darker toward the footer. */
    background: linear-gradient(180deg, #141414 0%, #0c0c0c 100%);
    color: #FFF;
    text-align: center;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 80%; /* Maintain square aspect ratio */
    border-radius: 5px;
    transition: transform 0.2s linear;

    /* Subtle shimmer shown while the image inside is still loading.
       Removed via JS once the image's load event fires (see gallery.js
       and the inline script in gallery.php for the photos PHP renders
       directly). */
    background: linear-gradient(
        100deg,
        #161616 30%,
        #232323 50%,
        #161616 70%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
}

.gallery-item.is-loaded {
    background: #000;
    animation: none;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.gallery-item a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.gallery-item img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    transition: transform 0.2s linear, box-shadow 0.2s linear;
}

.gallery-item:hover {
    transform: scale(1.1);
    z-index: 10;
}

.gallery-item img:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
}

/* Full gallery page — bigger tiles than the homepage preview */
.full-gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    max-width: 1400px;
    margin: 0 auto;
}

/* View More Button */
.view-more-container {
    text-align: center;
    margin: 40px 0;
}

.view-more-button {
    display: inline-block;
    background-color: #D4AF37;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.view-more-button:hover {
    background-color: #B8860B;
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   SERVICES SECTION (sits between Features and Gallery)
   ============================================================ */

.services {
    padding: 50px 20px;
    background: linear-gradient(180deg, #1a1a1a 0%, #141414 100%);
    text-align: center;
    color: #FFF;
}

.services h2 {
    margin-bottom: 30px;
    font-size: 28px;
}

.services-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 24px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
}

.services-list li {
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 30px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: #E8C766;
}

/* ============================================================
   GALLERY PAGE (gallery.php standalone page header)
   ============================================================ */

.gallery-page {
    padding: 40px 20px;
    font-family: 'Poppins', sans-serif;
}

.gallery-hero {
    text-align: center;
    margin-bottom: 30px;
}

.gallery-hero h1 {
    font-size: 2.5em;
    font-family: 'Playfair Display', serif;
}

.gallery-hero .subtitle {
    color: #BBB;
    font-size: 16px;
}

.gallery-category {
    max-width: 1400px;
    margin: 0 auto 60px;
    padding: 0 20px;
}

.gallery-category-title {
    text-align: center;
    font-size: 1.8em;
    color: #D4AF37;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.gallery-empty-message {
    text-align: center;
    color: #BBB;
    padding: 40px 20px;
}

/* ============================================================
   CLOSING CALL-TO-ACTION (end of homepage, before footer)
   ============================================================ */

.cta-strip {
    padding: 70px 20px;
    background: linear-gradient(135deg, #1f1a0f 0%, #0c0c0c 100%);
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    text-align: center;
    color: #FFF;
}

.cta-strip h2 {
    font-size: 30px;
    color: #D4AF37;
    margin-bottom: 12px;
}

.cta-strip p {
    font-size: 16px;
    color: #CCC;
    margin-bottom: 24px;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.contact-page {
    padding: 70px 20px;
    max-width: 640px;
    margin: 0 auto;
}

.contact-page h1 {
    text-align: center;
    font-size: 2.5em;
    color: #D4AF37;
    margin-bottom: 10px;
}

.contact-page .subtitle {
    text-align: center;
    color: #BBB;
    margin-bottom: 40px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 14px;
    font-weight: 600;
    color: #E8C766;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input,
.form-group select,
.form-group textarea {
    background: #1a1a1a;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 6px;
    padding: 12px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #FFF;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #D4AF37;
}

.contact-form button[type="submit"] {
    border: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    align-self: center;
    margin-top: 10px;
}

.contact-form button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-status {
    text-align: center;
    font-size: 14px;
    min-height: 20px;
    margin: 0;
}

.form-status-success {
    color: #6fcf97;
}

.form-status-error {
    color: #eb5757;
}

/* Honeypot field — invisible to real visitors (off-screen, not just
   display:none, since some bots specifically skip display:none
   fields when auto-filling forms) but still present in the DOM
   for bots that fill in every input indiscriminately. */
.honeypot-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ============================================================
   BACK TO TOP BUTTON
   ============================================================ */

#backToTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid rgba(212, 175, 55, 0.7);
    background-color: rgba(20, 20, 20, 0.9);
    color: #D4AF37;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;

    /* Hidden by default — fades and slides in once .visible is added */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

#backToTopBtn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#backToTopBtn:hover {
    background-color: #D4AF37;
    color: #000;
}

#backToTopBtn svg {
    width: 22px;
    height: 22px;
}

@media (max-width: 480px) {
    #backToTopBtn {
        width: 42px;
        height: 42px;
        bottom: 20px;
        right: 20px;
    }
}

/* ============================================================
   SITE FOOTER
   ============================================================ */

.site-footer {
    background: linear-gradient(180deg, #0c0c0c 0%, #000000 100%);
    border-top: 2px solid rgba(212, 175, 55, 0.4);
    padding: 50px 0 0;
    color: #999;
    font-size: 14px;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 30px;
}

.footer-column {
    flex: 1 1 220px;
}

.footer-column h4 {
    color: #D4AF37;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 14px 0;
}

.footer-column p {
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.footer-service-area {
    color: #999;
}

.footer-phone-link {
    color: #CCC;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-phone-link:hover {
    color: #D4AF37;
}

.footer-link {
    color: #D4AF37;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: #E8C766;
}

.social-icons {
    display: flex;
    gap: 14px;
}

.social-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 50%;
    color: #D4AF37;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.social-icon svg {
    width: 18px;
    height: 18px;
}

.social-icon:hover {
    background-color: #D4AF37;
    color: #000;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 18px 0;
    font-size: 13px;
}

.footer-bottom p {
    margin: 0;
}