/* ============================================================
   1. VARIABLES & GLOBAL RESET
   ============================================================ */
:root {
    --bg: #FFFFFF;
    --bg-alt: #F8F8F8;
    --accent1: #8D1A52;      /* Plum */
    --accent2: #FF5300;      /* Orange */
    --text: #1A1A1A;
    --muted: #444444;        /* Darkened from #666 for better legibility */
    --border: #E0E0E0;
    --font-head: 'Montserrat', sans-serif;
    --font-body: 'Montserrat', sans-serif;
}

/* THE BLOB FIX */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF !important; /* The base white */
}

/* 1. THE FIXED BACKGROUND LAYER */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Gradient Blobs */
    background-image: 
        radial-gradient(at 0% 0%, rgba(141, 26, 82, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(255, 83, 0, 0.15) 0px, transparent 50%),
        radial-gradient(at 50% 100%, rgba(141, 26, 82, 0.1) 0px, transparent 50%);
    background-size: 150% 150%;
    animation: stripeFlow 14s ease-in-out infinite alternate;
    z-index: -1; 
}

/* 2. THE TRANSPARENCY FIX */
html, body {
    margin: 0;
    padding: 0;
    background-color: transparent !important; /* CRITICAL: Removes the solid white wall */
}

/* Base canvas color (if blobs fail, it defaults to white) */
html { background-color: #FFFFFF; }

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

/* Force Montserrat globally and increase base size */
body {
    font-family: var(--font-body);
    font-size: 18px; /* Increased base size for modern feel */
    color: var(--text);
}

p {
    font-size: 1.1rem !important; /* Larger paragraph text */
    line-height: 1.7;
    color: var(--muted);
}

* { box-sizing: border-box; }

/* ============================================================
   STRIPE-INSPIRED BACKGROUND (ADD TO TOP OF BODY)
   ============================================================ */
/* ============================================================
   ANIMATED STRIPE-INSPIRED BACKGROUND
   ============================================================ */
/* ============================================================
   1. THE STRIPE ANIMATED BACKGROUND
   ============================================================ */
body {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px; /* Larger base size */
    -webkit-font-smoothing: antialiased;
    margin: 0;
    background: #FFFFFF;
    /* Increased opacity slightly to ensure visibility */
    background-image: 
        radial-gradient(at 0% 0%, rgba(141, 26, 82, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(255, 83, 0, 0.15) 0px, transparent 50%),
        radial-gradient(at 50% 100%, rgba(141, 26, 82, 0.1) 0px, transparent 50%);
    background-attachment: fixed;
    background-size: 150% 150%;
    animation: stripeFlow 14s ease-in-out infinite alternate;
}

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

/* Clear out any white backgrounds blocking the view */
.page-wrap, main, section, header { background: transparent !important; }

a {
    text-decoration: none !important;
    color: inherit;
    transition: all 0.3s ease;
}

h1, h2, h3 {
    color: #000000;
    font-family: var(--font-head);
    font-weight: 700;
}

p {
    font-size: 1rem !important;
    line-height: 1.6;
    color: var(--muted);
}

.page-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 60px 1.5rem;
}

/* ============================================================
   2. NAVIGATION & HEADER
   ============================================================ */
header {
    padding: 2rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.brand {
    font-family: var(--font-head);
    font-size: 1.2rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #000000;
    text-align: center;
    margin-bottom: 1.5rem;
}

.brand span {
    background: linear-gradient(135deg, var(--accent1), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.main-nav {
    display: flex;
    gap: 6rem; 
    justify-content: center;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 1.2rem 0;
}

.nav-link {
    font-family: var(--font-head);
    color: #333333 !important;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
}

.nav-link:hover, .nav-link.active { 
    color: var(--accent2) !important; 
}

/* ============================================================
   3. HERO & LAYOUT LOGIC
   ============================================================ */
.hero-wrap, .page-wrap h1 {
    text-align: center !important;
    margin-bottom: 1rem;
}

/* ============================================================
   HERO WIDTH ALIGNMENT
   ============================================================ */
.hero-image-container {
    max-width: 1120px; /* Perfectly matches the grid width */
    margin: 0 auto 4rem auto;
    width: 100%;
    display: flex;
    justify-content: center;
}

.hero-image-container img {
    width: 100%;
    max-width: 1120px;
    height: auto;
    border-radius: 24px;
    /* This shadow is more complex (the "Stripe" shadow) */
    box-shadow: 
        0 50px 100px -20px rgba(50, 50, 93, 0.25), 
        0 30px 60px -30px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s ease;
}

.hero-image-container img:hover {
    transform: translateY(-5px); /* Subtle lift on hover */
}

/* Heritage Split Logic */
.hero-split-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    margin: 2rem auto 4rem;
    max-width: 1120px;
}

/* Fix for Video CLS */
.hero-video-wrapper {
    aspect-ratio: 16 / 9; /* Matches your reel dimensions */
    background: #1a1a1a; /* Placeholder color so there's no "flash" of white */
    overflow: hidden;
}

.hero-video-wrapper video {
    width: 100%;
    display: block;
}

.hero-content-right {
    flex: 1;
    text-align: left;
}

/* ============================================================
   4. THE BLACK SERVICE CARDS (UNIVERSAL)
   ============================================================ */
.pp-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem; /* Tightened from 2.5rem for a more compact, professional feel */
    max-width: 1120px;
    margin: 3rem auto;
}

/* ============================================================
   SERVICE CARD COLOR LOGIC (Fixes "Double Orange")
   ============================================================ */
.includes-text {
    color: #8D1A52 !important; /* Your specific Plum hex */
    font-size: 1rem;
    line-height: 1.6;
    margin: 1.5rem 0;
    padding-left: 18px; /* Space for the bar */
    border-left: 4px solid #8D1A52; /* The Vertical Plum Bar */
    text-align: left;
    font-weight: 500; /* Medium weight for Montserrat legibility */
}

    /* The Vertical Bar: Using the Plum color to tie it to the brand */
    border-left: 3px solid var(--accent1); 
    
    text-align: left;
    font-family: 'Montserrat', sans-serif;
}

/* THE BOX STYLING FOR AI PRODUCTION */
.pp-service-card {
    background: #111111 !important; /* Deep black contrast */
    padding: 3rem 2rem;
    border-radius: 20px;
    color: #FFFFFF !important;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* THE YELLOW TEXT + VERTICAL PLUM BAR */
.includes-text {
    color: #FFA900 !important; /* Your Yellow/Gold */
    font-size: 1rem;
    line-height: 1.6;
    margin: 1.5rem 0;
    padding-left: 18px;
    border-left: 4px solid var(--accent1); /* The Plum Vertical Bar */
    text-align: left;
    font-weight: 500;
}

/* THE PRICE (Orange) */
.pp-service-card strong {
    color: var(--accent2) !important;
    font-size: 1.0rem;
    margin-top: auto;
    display: block;
}

.pp-service-card .includes-text {
    color: #A09BA0 !important; /* Muted Plum-Grey for professional look */
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 1.5rem 0;
    padding-left: 15px;
    border-left: 2px solid var(--accent1); /* Plum accent bar */
    text-align: left;
}

/* Price stays Orange - the only orange in the box */
.pp-service-card strong, .heritage-card strong {
    color: var(--accent2) !important;
    font-size: 1.3rem;
    margin-top: auto;
    display: block;
}

/* Pricing remains the only Orange element for high conversion */
.pp-service-card strong {
    color: var(--accent2) !important; 
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: block;
    margin-top: auto; /* Pushes price to the bottom */
    padding-top: 1rem;
}

/* Ensure Montserrat is clean and large */
.pp-service-card h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: #FFFFFF !important; margin-top: 0;
}

.pp-service-card {
    background: #111111 !important; /* Keep the pop */
    padding: 3rem 2rem;
    border-radius: 20px;
    color: #FFFFFF !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.05);
}

.pp-service-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent2);
}

.pp-service-card p { color: #BBBBBB !important; font-size: 0.95rem !important; }

/* "Includes..." Section - Muted Plum/Silver */
.pp-service-card ul, .pp-service-card .includes-text {
    color: #B0A4AA !important; /* Subdued Plum-Grey */
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    border-left: 2px solid var(--accent1); /* Plum accent line */
    padding-left: 15px;
}

.pp-service-card .includes-text {
    color: #A09BA0 !important; /* Muted Plum-Grey */
    font-size: 0.85rem;
    line-height: 1.5;
    margin-top: 1rem;
    padding-left: 12px;
    border-left: 1px solid var(--accent1);
}

.pp-service-card strong {
    color: var(--accent2) !important; /* Bold Orange */
    font-size: 1.2rem;
    margin-top: 2rem;
    display: block;
}

/* Link as Gradient Text */
.pp-service-card a {
    background: linear-gradient(135deg, var(--accent1), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    display: inline-block;
}

.pp-service-card.popular {
    border: 2px solid #8D1A52; /* Plum border for the most popular tier */
    transform: scale(1.02); /* Very slight lift */
}

/* ============================================================
   HERITAGE RESTORATION GRID BLOCKS
   ============================================================ */
@media (max-width: 768px) {
    .heritage-grid { /* Or whatever class your tile container uses */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
    }
    .heritage-card {
        width: 90%; /* Ensures it doesn't hit the very edge but stays centered */
        margin-left: auto;
        margin-right: auto;
    }
}

.heritage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 3rem auto;
}

.heritage-card {
    background: #FFFFFF !important; /* Clean White */
    padding: 3rem 2.5rem;
    border-radius: 12px;
    border: 1px solid #EAEAEA;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.heritage-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent1); /* Plum border on hover */
}

.heritage-card h3 {
    color: #1A1A1A !important;
    margin-top: 0;
    font-size: 1.5rem;
}

.heritage-card p {
    color: #555555 !important;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

/* The Plum Vertical Bar + Plum Text you requested */
.heritage-card .includes-text {
    color: #8D1A52 !important; /* Plum */
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    padding-left: 18px;
    border-left: 4px solid #8D1A52; /* Plum Bar */
    font-weight: 500;
}

.heritage-card strong {
    color: var(--accent2) !important; /* Orange Price */
    font-size: 1.3rem;
    margin-top: auto;
}

/* ============================================================
   SUCCESS PAGE CONTAINTER
   ============================================================ */
/* Add this to the <style> block on the upload-success page specifically */
body.success-page {
    padding: 0 !important; 
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* This pushes the container down naturally without "cutting off" the top */
.success-container { 
    max-width: 600px; 
    margin: 80px auto 40px auto; /* 80px top margin ensures it clears your header */
    padding: 40px; 
    background: #FFFFFF; 
    border-radius: 24px; 
    box-shadow: 0 15px 50px rgba(0,0,0,0.08); 
}

/* ============================================================
   PORTFOLIO HIERARCHY & CONTRAST
   ============================================================ */
/* ============================================================
   PORTFOLIO HIERARCHY (1 LARGE, 2 SMALL)
   ============================================================ */
.portfolio-masonry {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Column Grid */
    gap: 2rem;
}

/* Force the first image to be the Hero */
.portfolio-item:first-child {
    grid-column: span 2;
    height: 500px; /* Big top image */
}

/* The two small images below */
.portfolio-item {
    height: 350px; 
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

/* Better Overlay Contrast */
.portfolio-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

@media (max-width: 768px) {
    .portfolio-masonry {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
    .portfolio-item:first-child, .portfolio-item {
        grid-column: span 1;
        height: 350px;
    }
}

/* Forces the first item to be the "Hero" top image */
.portfolio-item.featured {
    grid-column: span 2;
    min-height: 500px; /* Adjust height as needed */
}

/* High-Contrast Overlay (Fixes "Washed Out" text) */
.portfolio-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3rem 1.5rem 1.5rem; /* More padding at bottom */
    /* Darker, higher gradient for better text pop */
    background: linear-gradient(to top, 
        rgba(0, 0, 0, 0.95) 0%, 
        rgba(0, 0, 0, 0.7) 40%, 
        rgba(0, 0, 0, 0) 100%);
    color: white;
    transform: translateY(0); /* Keep visible or use your hover logic */
    opacity: 1;
}

.portfolio-overlay h3 {
    color: #FFFFFF !important;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5); /* extra contrast */
    margin-bottom: 5px;
}

/* Add this to your style.css if not already there */
@media (max-width: 768px) {
    .portfolio-masonry {
        grid-template-columns: 1fr; /* Stack to 1 column on mobile */
    }
    .portfolio-item.featured {
        grid-column: span 1; /* Reset featured item width */
        min-height: 300px;
    }
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    max-width: 1120px;
    margin: 0 auto;
}

.portfolio-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #111;
    min-height: 350px;
}

/* Every 3rd item spans 2 columns (The "Feature" look) */
.portfolio-item.featured {
    grid-column: span 2;
    min-height: 450px;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

.portfolio-item:hover img {
    transform: scale(1.05);
    opacity: 1;
}

/* ============================================================
   ENHANCED PORTFOLIO TEXT LEGIBILITY
   ============================================================ */
.portfolio-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem 1.5rem;
    /* Deeper, darker gradient for text contrast */
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
    color: white;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.portfolio-item:hover .portfolio-overlay {
    transform: translateY(0);
    opacity: 1;
}

.portfolio-overlay h3 {
    color: #FFFFFF !important;
    margin: 0 0 5px 0;
    font-size: 1.3rem;
    /* Text shadow adds a final layer of protection against bright images */
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8); /* Depth */
}

.portfolio-overlay p {
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0;
    font-size: 0.9rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.notice-box {
    background: #FFF9F2; /* Soft orange tint */
    border-left: 5px solid var(--accent2); /* Orange bar */
    padding: 1.5rem;
    max-width: 800px;
    margin: 0 auto 2rem;
    border-radius: 0 8px 8px 0;
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.6;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* ============================================================
   5. CONTACT FORM & UI
   ============================================================ */
.pp-contact-form input, 
.pp-contact-form textarea {
    width: 100%;
    padding: 16px;
    background: #FFFFFF !important; /* Pure white for contrast */
    border: 2px solid #D0D0D0 !important; /* Darker border */
    color: #1A1A1A !important;
    border-radius: 8px;
    margin-bottom: 20px;
    font-family: var(--font-body);
}

/* When clicking into the field */
.pp-contact-form input:focus, 
.pp-contact-form textarea:focus {
    border-color: var(--accent1) !important; /* Plum border on focus */
    box-shadow: 0 0 12px rgba(141, 26, 82, 0.1);
}

.btn-gradient {
    background: linear-gradient(135deg, var(--accent1), var(--accent2));
    color: #fff !important;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 700;
    display: inline-block;
    border: none;
    cursor: pointer;
}

/* Specific styling for the Contact Page floating button */
.contact-page .floating-book-btn {
    background: var(--accent1) !important; /* Solid Plum for a "Resource" feel */
    font-size: 0.85rem;
    letter-spacing: 0.1em;
}

/* Specific look for the Scan Guide button on the Contact page */
.contact-page-btn {
    background: var(--accent1) !important;
    box-shadow: 0 10px 20px rgba(141, 26, 82, 0.2) !important;
}

.floating-book-btn {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    background: linear-gradient(135deg, var(--accent1), var(--accent2)) !important; 
    color: white !important;
    padding: 16px 32px !important;
    border-radius: 50px !important;
    z-index: 999;
    font-family: var(--font-head);
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(141, 26, 82, 0.4);
    border: 1px solid rgba(255,255,255,0.2) !important;
}

/* Fix for Client Portal Header Readability */
.portal-header-subtitle {
    color: #ffffff !important;
    opacity: 0.9;
    font-size: 0.9rem;
    font-weight: 500;
}

.portal-header-client {
    color: #ffd7e6 !important; /* A light pink to distinguish the name */
    font-weight: bold;
}

/* ============================================================
   6. PREMIUM GLOBAL FOOTER
   ============================================================ */
.footer {
    background: rgba(255, 255, 255, 0.5); /* Semi-transparent to show Stripe BG */
    backdrop-filter: blur(10px); /* Modern glass effect */
    padding: 4rem 1.5rem 2rem !important;
    border-top: 1px solid var(--border);
    margin-top: 6rem;
    text-align: center;
}

/* Kills the plain text brand name if it's in a <p> or <div> */
.footer-brand, .plain-brand-text {
    display: none !important;
}

/* The automated Footer branding we discussed */
.footer::before {
    content: "PHOENIX PHOTOGRAPHY NASHVILLE";
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: 0.3em;
    font-size: 0.8rem;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, var(--accent1), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-nav {
    display: flex;
    gap: 2.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.footer-nav a {
    color: var(--text) !important;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: var(--accent2) !important;
}

.footer-copy {
    font-size: 0.8rem;
    color: var(--muted);
    opacity: 0.7;
    border-top: 1px solid var(--border);
    padding-top: 2rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Hide the plain text footer brand */
.footer-inner p:first-of-type, .footer-brand {
    display: none !important;
}

/* Fix for Button/Badge CLS */
.floating-badge, .btn-gradient {
    contain: layout; /* Tells the browser these won't affect the size of other elements */
}

@media (max-width: 768px) {
    .hero-split-container { flex-direction: column; text-align: center; }
    .hero-content-right { text-align: center; }
    .portfolio-masonry {
        grid-template-columns: 1fr; /* Stack to 1 column */
    }
    .portfolio-item.featured {
        grid-column: span 1; /* Reset to single width on mobile */
        min-height: 300px;
    }
    .main-nav {
        gap: 1.5rem; /* Tighten nav for smaller screens */
    }
}

/* Phoenix Lab Global Styles */
#privacy-banner {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    width: 90%;
    max-width: 600px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid #8D1A52;
    padding: 15px 25px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.banner-text {
    font-size: 0.75rem;
    color: #444;
    margin: 0;
    line-height: 1.4;
}

.banner-btn {
    background: #8D1A52;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    margin-left: 15px;
    transition: 0.3s;
}

.banner-btn:hover {
    background: #6b133e;
}

/* Global Safety Buffer - ensures floating buttons don't crowd content */
main.page-wrap {
    padding-bottom: 120px; 
}

.nav-link:hover, .btn:hover, .floating-cta:hover {
    transform: translateY(-2px) scale(1.03); /* Lifts up and grows slightly */
    box-shadow: 0 10px 20px rgba(141, 26, 82, 0.2);
    transition: all 0.3s ease-in-out;
}

.credential-tag {
    opacity: 0.5;
    transition: all 0.3s ease;
    cursor: default;
    display: inline-block;
}

.credential-bar:hover .credential-tag {
    opacity: 0.2; /* Dim everything else when hovering over the bar */
}

.credential-tag:hover {
    opacity: 1 !important; /* Highlight the specific one you're on */
    color: #8D1A52;
    transform: scale(1.1);
}

/* ============================================================
   MOBILE OPTIMIZATION (Thumb-Friendly UI)
   ============================================================ */
@media (max-width: 768px) {
    /* Stack the masonry grid into a single, clean column */
    .portfolio-masonry {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 10px;
    }

    /* Reset the "Featured" item so it doesn't try to span 2 columns on a tiny screen */
    .portfolio-item.featured {
        grid-column: span 1;
        min-height: 280px;
    }

    /* Shrink the Nav gaps so they don't wrap awkwardly */
    .main-nav {
        gap: 1.2rem;
        padding: 1rem 0;
    }

    .nav-link {
        font-size: 0.7rem; /* Slightly smaller for mobile width */
    }
}

/* Certification Ribbon Styling */
.cert-ribbon {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding: 3rem 0;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.4s ease-in-out; /* Smooth fade effect */
    border-top: 1px solid rgba(141, 26, 82, 0.1);
}

.cert-ribbon:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.cert-label {
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: #8D1A52; /* Your brand Plum */
}

.cert-item {
    font-size: 0.8rem;
    font-weight: 700;
    color: #444;
}

/* Mobile Footer Clearance for Floating Button */
/* ============================================================
   ULTIMATE MOBILE DOCKING (Final Overrides)
   ============================================================ */
@media (max-width: 768px) {
    /* Target EVERY page with these body classes */
    .index-page, .portfolio-page, .contact-page, .privacy-page, .terms-page {
        
        /* 1. Force the Floating Button to a set position */
        .floating-book-btn {
            position: fixed !important;
            bottom: 25px !important;
            right: 20px !important;
            left: 20px !important; /* Forces it to span the width minus margins */
            width: auto !important;
            text-align: center;
            z-index: 1000 !important;
        }

        /* 2. Force the Pulse Notification to sit exactly above it */
        .pulse-container {
            position: fixed !important;
            bottom: 95px !important; /* Balanced gap of ~70px */
            right: 20px !important;
            left: 20px !important;
            width: auto !important;
            z-index: 1001 !important; /* Sits 'above' the button layer */
        }

        /* 3. The Footer Buffer - increased to prevent overlap on short pages */
        footer.footer {
            padding-bottom: 200px !important;
        }
    }
}

/* ============================================================
   TARGETED PAGE ALIGNMENT (The "Nuclear" Option)
   ============================================================ */

/* 1. Fix for Privacy & Terms (Pages with less content) */
.privacy-page body, .terms-page body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 2. Ensuring the footer never "eats" the buttons on short pages */
.contact-page main, .privacy-page main, .terms-page main {
    padding-bottom: 250px !important; 
}

/* 3. Mobile Stacking specifically for the Index and Portfolio */
@media (max-width: 768px) {
    .index-page .floating-book-btn, 
    .portfolio-page .floating-book-btn {
        bottom: 30px !important;
        /* Ensures the button stays centered even if content shifts */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90% !important;
    }

    .index-page .pulse-container, 
    .portfolio-page .pulse-container {
        bottom: 100px !important; /* Positions it 70px above the button */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90% !important;
    }
}