/* Custom styles for about-me.html page */

/* ========================================= */
/* IMAGE POSITION CONTROL - ADJUST THE "top" VALUE BELOW */
/* ========================================= */
/* CRITICAL: Must override theme.css line 2714-2721 which sets top:0, bottom:0, height:100%, align-items:center */
/* 
 * NOTE: The "top" value is measured from the TOP OF THE VIEWPORT (browser window)
 * The header (logo/menu) takes ~40-60px, so the image starts BELOW the header
 * If image appears too close to URL bar, INCREASE the top value
 */
/* Using multiple selectors with maximum specificity */
#page-header.ph-full.ph-center.ph-image-cropped .ph-image,
#page-header.ph-full.ph-center .ph-image,
#page-header.ph-full .ph-image,
#page-header .ph-image {
    position: absolute !important;
    display: block !important; /* Override display: flex from theme.css */
    
    /* ⬇️ CHANGE THIS VALUE TO ADJUST IMAGE DISTANCE FROM TOP OF VIEWPORT ⬇️ */
    /* Smaller number = closer to top | Larger number = more space below header */
    /* Examples: 120px (comfortable), 80px (closer), 140px (more space), 60px (very close) */
    top: 180px !important; /* ← EDIT THIS LINE TO CONTROL SPACING */
    
    bottom: auto !important; /* Override the theme.css bottom: 0 rule */
    height: auto !important; /* Override the theme.css height: 100% rule */
    align-items: flex-start !important; /* Override center alignment */
    justify-content: flex-start !important; /* Align to top */
}

/* Apply horizontal centering and scale for ph-center class */
#page-header.ph-center:not(.ph-bg-image) .ph-image {
    right: 50% !important;
    transform: translate(50%, 0) scale(1.5) !important;
    transform-origin: center !important;
}

/* Target inner wrappers - prevent vertical transforms from JS but allow the image to display */
#page-header .ph-image .ph-bg-image,
#page-header .ph-image .ph-image-inner {
    position: relative !important;
    display: block !important;
}

/* Tablet screens (≤1024px) - Adjust spacing for medium screens */
@media (max-width: 1024px) {
    #page-header.ph-full .ph-image,
    #page-header .ph-image {
        top: 90px !important; /* ← EDIT THIS for tablet spacing */
        bottom: auto !important;
        height: auto !important;
    }
}

/* Mobile screens (≤768px) - Adjust spacing for small screens */
@media (max-width: 768px) {
    #page-header.ph-full .ph-image,
    #page-header .ph-image {
        top: 80px !important; /* ← EDIT THIS for mobile spacing */
        bottom: auto !important;
        height: auto !important;
    }
}

/* Small mobile screens (≤540px) - Adjust spacing for very small screens */
@media (max-width: 540px) {
    #page-header.ph-full .ph-image,
    #page-header .ph-image {
        top: 70px !important; /* ← EDIT THIS for small mobile spacing */
        bottom: auto !important;
        height: auto !important;
    }
}

/* Position the "About" text below the image inside page-header */
/* Now positioned INSIDE #page-header div, below the image with 150px spacing */

/* Style the new About caption section container */
#about-caption-section {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1282px; /* Match tt-wrap max-width for boxed layout */
    padding: 0 15px 15px 15px !important; /* Reduced from 25px to 15px to bring paragraph even lower */
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Changed from center to flex-start for left alignment */
    justify-content: flex-end;
    z-index: 10;
    /* This positions it at the bottom of page-header, below the image */
}

/* Create 300px spacing between image bottom and About me title - ensures text doesn't cover image at all */
#page-header .ph-image {
    margin-bottom: 300px !important;
}

/* Style the caption wrapper inside the section */
#about-caption-section .ph-caption {
    position: relative;
    display: flex;
    align-items: center; /* Center the title */
    justify-content: center; /* Center the title */
    width: 100%;
    max-width: 900px; /* Match page-content max-width */
    margin: 0 auto; /* Center the container itself */
}

/* Style the normal "About" title */
#about-caption-section .ph-caption .ph-caption-title {
    position: relative;
    margin: 0 0 30px 0;
    z-index: 9;
    font-size: clamp(20px, 2.5vw, 47px) !important; /* Reduced to exactly half: was clamp(40px, 5vw, 94px), now half of that */
    color: #FFF;
    text-align: center; /* Center the title */
    width: 100%;
    /* 30px margin-bottom maintains spacing between "About me" and first paragraph */
}

/* Position the ghost "About" title behind the normal title - scaled to half size */
#about-caption-section .ph-caption .ph-caption-title-ghost {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    height: auto;
    padding-top: 0 !important;
    display: flex;
    align-items: center;
    z-index: 1;
    /* Original: calc(16px + 9vw) - Half size: calc(8px + 4.5vw) */
    font-size: calc(8px + 4.5vw) !important;
}

/* Style the first paragraph inside page-header to match page-content */
#about-caption-section .about-first-paragraph {
    max-width: 900px;
    width: 100%;
    margin: 0 auto; /* Center the container */
    padding: 0 0 0 15px; /* Add 15px left padding to match tt-wrap padding and align with page-content */
    text-align: left; /* Ensure left alignment */
}

/* Remove custom styling - let the text-xxlg class handle it */
#about-caption-section .about-first-paragraph p {
    /* Font size, family, and color are now handled by text-xxlg, font-alter, text-gray-2 classes */
    text-align: left; /* Ensure left alignment */
}

/* Adjust the first section's padding to account for the new spacing */
#page-content .tt-section:first-child {
    padding-top: 0 !important;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1024px) {
    #page-header .ph-image {
        margin-bottom: 220px !important; /* Increased proportionally to match desktop ratio */
    }
    
    #about-caption-section {
        padding: 0 5% 12px 5% !important; /* Reduced to bring paragraph lower */
    }
    
    #about-caption-section .ph-caption .ph-caption-title {
        font-size: clamp(15px, 2vw, 30px) !important; /* Reduced to half of original tablet size */
        margin-bottom: 20px;
    }
}

@media (max-width: 540px) {
    #page-header .ph-image {
        margin-bottom: 150px !important; /* Increased proportionally to match desktop ratio */
    }
    
    #about-caption-section {
        padding: 0 5% 10px 5% !important; /* Reduced to bring paragraph lower */
    }
    
    #about-caption-section .ph-caption .ph-caption-title {
        font-size: clamp(12px, 3vw, 20px) !important; /* Reduced to half of original mobile size */
        margin-bottom: 15px;
    }
}

/* ========================================= */
/* Signature Image Spacing Adjustments */
/* ========================================= */

/* CRITICAL: Override the default text-xxlg paragraph margins for page-content only */
#page-content .text-xxlg p,
#page-content p.text-xxlg {
    margin-bottom: 20px !important; /* Reduce from 5.5% to fixed 20px for tighter spacing */
}

/* Reduce margin for page-header paragraph to bring it closer to page-content */
#about-caption-section .about-first-paragraph.text-xxlg p {
    margin-bottom: 10px !important; /* Reduced from 5.5% to 10px to decrease space to next paragraph */
}

/* Remove margin from the very last paragraph before signature */
.text-xxlg p:last-child,
.text-xxlg p:last-of-type {
    margin-bottom: 0 !important;
}

/* Target the specific section containing signature - remove ALL padding and margin */
.tt-section.padding-bottom-xlg-150 {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Also override the default tt-section padding */
#page-content .tt-section.padding-bottom-xlg-150 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove bottom margin from the text container div */
.tt-section .text-xxlg {
    margin-bottom: 0 !important;
}

/* Remove ALL spacing from signature image and override margin-top-30 class */
img[src*="signature"],
img[alt="Signature"],
.margin-top-30[src*="signature"],
.margin-top-30[alt="Signature"] {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    line-height: 0 !important;
    max-width: 500px !important;
    width: 500px !important;
    height: auto !important;
}

/* Remove spacing from the container holding the signature */
.tt-section-inner.max-width-900 {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Control page-content padding - reduced top spacing between About text and first paragraph */
#page-content {
    padding-top: 10px !important; /* Reduced from 20px to 10px to decrease space between paragraphs */
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove ALL padding from footer */
#tt-footer {
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove padding from footer inner */
.tt-footer-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure footer columns don't add extra spacing */
#tt-footer .footer-col {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove any padding from footer column inner */
#tt-footer .footer-col-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}