/* --- HOMEPAGE BANNER (IMAGE ONLY, DETACHED) --- */
.suf-banner-container {
    width: calc(100% - 60px) !important; /* Creates the 30px gap on left and right */
    height: 400px !important; /* [10.58 cm] height */
    margin: 20px auto 40px auto !important; /* Top gap, centered horizontally, Bottom gap */
    border-radius: 6px !important; 
    
    /* UPDATED: Now strictly pointing to your new banner file */
    background-image: url('/images/home-banner.webp') !important; 
    
    background-size: cover;
    background-position: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4); 
}

/* --- PAGEFIND SEARCH OVERLAY (LIGHT STUDIO MODE) --- */
#suf-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.553); /* Clean, frosted glass look */
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 10vh;
    overflow-y: auto; 
    padding-bottom: 10vh;
}

#suf-search-container {
    width: 90%;
    max-width: 800px;
    background: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); /* Soft, elevated shadow */
    position: relative;
    border: 1px solid #eaeaea;
}

#suf-search-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #333333; /* Dark text so it's visible on the white overlay */
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
}

/* Force Pagefind UI into Light Mode to match Tranquilpeak */
:root {
    --pagefind-ui-primary: #39424E; /* Matches Tranquilpeak's dark text */
    --pagefind-ui-text: #39424E;
    --pagefind-ui-background: #ffffff;
    --pagefind-ui-border: #eeeeee;
    --pagefind-ui-tag: #f4f4f4;
    --pagefind-ui-border-width: 2px;
    --pagefind-ui-border-radius: 4px;
    --pagefind-ui-font: inherit;
}

/* --- ARTICLE FEED TYPOGRAPHY --- */

/* 1. Shrink the Homepage Article Titles */
.postShorten-title {
    font-size: 2.3rem !important; /* Adjust this number (Default is usually 1.7rem) */
    line-height: 1.2 !important;  /* Keeps multi-line titles looking tight and clean */
    margin-bottom: 10px !important;
}

/* --- THE PERFECT 404 STUDIO CARD --- */
#suf-error-card {
    background: rgba(87, 62, 102, 0.85) !important; 
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    padding: 60px 50px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    max-width: 600px !important;
    width: 100% !important;
    text-align: center !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.8) !important;
}

#suf-error-card h1 {
    color: #ffffff !important;
    font-size: 5rem !important;
    margin: 0 0 10px 0 !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    border-bottom: 30px !important; /* Kills the theme's default underline */
}

#suf-error-card p {
    color: #ffffff !important;
    font-size: 1.6rem !important;
    font-weight: 550 !important;
    margin-bottom: 30px !important;
}

#suf-error-card a {
    display: inline-block !important;
    padding: 15px 35px !important;
    background: #ffffff !important;
    color: #111111 !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.2s ease !important;
}

#suf-error-card a:hover {
    background: #cccccc !important;
    transform: translateY(-2px) !important;
}

/* --- STUDIO BLOCKQUOTE TYPOGRAPHY --- */
.post blockquote,
.post blockquote p {
    font-size: 1.5rem !important; /* Shrinks the text (default is usually 1rem or 1.1rem) */
    font-weight: 500 !important;
    line-height: 1.5 !important;   /* Keeps the lines breathing comfortably */
    color: #7b7b7b !important;     /* Optional: Fades the text slightly to look more like a citation */
}

/* --- SECONDARY "MORE" SIDEBAR MENU --- */
.suf-hidden-list {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.15s ease-in-out !important;
    margin: 0 !important;
    padding-left: 0px !important; 
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body .suf-hidden-list .sidebar-button-link {
    padding-right: 15px !important;
}

.suf-hidden-list.suf-list-open {
    max-height: 400px;
    opacity: 1;
    margin-bottom: 10px !important;
}

/* Force exact native sizing with high specificity */
body .suf-hidden-list .sidebar-button-icon {
    font-size: 1.25rem !important; /* Matches the fa-lg size of main links */
}

body .suf-hidden-list .sidebar-button-desc {
    font-size: 16px !important; /* Standard theme base size */
    color: #d1d1d1 !important;
    text-shadow: 2px 2px 4px #000000d0;
    letter-spacing: normal !important;
    font-weight: 600 !important;
}

body .suf-hidden-list .sidebar-button-link:hover .sidebar-button-desc {
    color: #ffffff !important;
}

/* --- THE ACTUAL DOM 16:9 OVERRIDE --- */

/* 1. Target the Article Tag directly. Turn off the legacy floats/tables. */
body article.postShorten:not(.postShorten--thumbnailimg-top) {
    display: flex !important;
    /* This is the magic trick: The image is 2nd in the HTML, so row-reverse puts it on the left! */
    flex-direction: row-reverse !important; 
    align-items: flex-start !important; /* Absolute top alignment for both */
    justify-content: flex-end !important;
    gap: 25px !important;
}

/* 2. The Text Wrapper */
body article.postShorten:not(.postShorten--thumbnailimg-top) .postShorten-wrap {
    width: 100% !important; /* Allows text to fluidly fill remaining space */
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. The Image Link Wrapper (Direct child of the article) */
body article.postShorten:not(.postShorten--thumbnailimg-top) > a {
    display: block !important;
    width: 260px !important; /* High-quality Widescreen Width */
    flex-shrink: 0 !important; /* Prevents text from squishing the image */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* 4. The 16:9 Container & Image Crop */
body article.postShorten:not(.postShorten--thumbnailimg-top) .postShorten-thumbnailimg {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 6px !important;
    overflow: hidden !important; 
    margin: 0 !important;
}

body article.postShorten:not(.postShorten--thumbnailimg-top) .postShorten-thumbnailimg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
}

/* 5. Mobile Override (Snaps image to the top on phones) */
@media only screen and (max-width: 767px) {
    body article.postShorten:not(.postShorten--thumbnailimg-top) {
        flex-direction: column-reverse !important; /* Image jumps to the top */
        gap: 15px !important;
    }
    body article.postShorten:not(.postShorten--thumbnailimg-top) > a {
        width: 100% !important;
    }
}

/* --- HOMEPAGE BANNER SPACING --- */
.suf-banner-container {
    margin-bottom: 30px !important; /* Adjust this value to dial in the exact gap */
}

/* --- HOMEPAGE TITLE & EXCERPT SPACING --- */

/* 1. Reduce the bottom margin of the header (which holds the title and date) */
body .postShorten .postShorten-header {
    margin-bottom: -10px !important; /* Default is usually around 15-20px */
}

/* 2. Ensure the excerpt text itself isn't pushing down */
body .postShorten .postShorten-excerpt {
    margin-top: 0px !important;
}

/* Optional: If you also want to tighten the gap between the Title and the Date/Meta info */
body .postShorten .postShorten-title {
    margin-bottom: 0px !important; 
}

/* --- HOMEPAGE TITLE COLOR --- */

/* 1. The dark purple variant for the resting state */
body .postShorten .postShorten-title a {
    color: #452c51 !important; 
    transition: color 0.2s ease-in-out !important; /* Makes the hover effect smooth */
}

/* 2. The bright #b700ff glow on hover */
body .postShorten .postShorten-title a:hover {
    color: #b700ff !important; 
}

/* --- HOMEPAGE EXCERPT TEXT & SEPARATOR COLOR --- */


/* 1. The Separator Line between articles */
body .postShorten {
    /* Adjust the #333333 to make the line darker or lighter */
    border-bottom: 1px solid #d2d0d0 !important; 
    padding-bottom: 10px !important; /* Breathing room above the line */
    margin-bottom: 80px !important;  /* Breathing room below the line */
}

/* 2. Remove the separator line from the very last article in the list */
body .postShorten:last-of-type {
    border-bottom: none !important;
}

/* --- LIGHT THEME CONTRAST & TYPOGRAPHY TWEAKS --- */

/* 1. Date and Meta Info on the Homepage Article List */
body .postShorten .postShorten-meta,
body .postShorten .postShorten-meta a,
body .postShorten .postShorten-meta time {
    color: #555555 !important; /* Darkens the date/category text */
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* 2. Pagination Buttons (Older/Newer Posts) */
body .pagination .btn,
body .post-actions-pagination .btn {
    color: #333333 !important; /* Darkens the button text and arrows */
    border-color: #cccccc !important; /* Slightly darkens the button outline so it doesn't vanish */
}

/* 3. Share Buttons (Inside the article) */
body #share-options-bar .btn,
body .post-actions .btn {
    color: #333333 !important; /* Darkens the share icons */
}

/* 4. "SUF Studios" Text Weight in the Top Header Bar */
body .header-title,
body .header-title-link,
body .header-right-picture { /* Targets the text specifically */
    font-weight: 800 !important; /* Bumps it up to Extra Bold */
    letter-spacing: 0.5px !important; /* Adds a tiny bit of spacing to balance the heavy weight */
    color: #747474 !important; /* Ensures the header text is a sharp, near-black */
}

/* --- HOMEPAGE "READ MORE" LINK TYPOGRAPHY --- */

body .postShorten .postShorten-excerpt_link {
    font-weight: 700 !important; /* Bumps it to bold */
    letter-spacing: 0.5px !important; /* Gives the bold letters room to breathe */
    text-transform: uppercase !important; /* Optional: Makes it look more like a button/call to action */
    font-size: 1.4rem !important; /* Optional: Keeps it slightly smaller than body text for a clean UI look */
}

/* Add a subtle underline when hovering over it */
body .postShorten .postShorten-excerpt_link:hover {
    text-decoration: underline !important;
}

/* --- SIDEBAR MENU BOTTOM ALIGNMENT (FIXED) --- */

/* 1. Make the master sidebar nav the Flex column */
#sidebar {
    display: flex !important;
    flex-direction: column !important;
}

/* 2. Reset the inner container so your main menus stay grouped at the top */
#sidebar .sidebar-container {
    display: block !important; 
    min-height: 0 !important;
}

#sidebar .sidebar-buttons:first-of-type {
    margin-top: 0 !important; 
}

/* 3. The Flex Spring: Targets your custom Legal Drawer div and pushes ONLY it to the bottom */
#sidebar > div:last-of-type {
    margin-top: auto !important; /* Forces it to the floor */
    padding-bottom: 5px !important; /* Breathing room off the bottom edge */
    width: 100% !important;
}


/* --- LOCK SIDEBAR HEIGHT --- */
#sidebar {
    height: 100vh !important; /* Forces the sidebar to be exactly 100% of the screen height */
    max-height: 100vh !important; /* Strictly forbids it from stretching any further */
    overflow-y: auto !important; /* If the drawer opens and needs space, it will scroll internally instead of breaking the layout */
}

/* --- MORE DRAWER ICON SHADOWS (BULLETPROOF) --- */

/* Targets the icon whether it is a font character (i) or an image graphic (svg) */
body #sidebar #suf-more-list i,
body #sidebar #suf-more-list svg,
body #sidebar #suf-more-list .sidebar-button-icon {
    /* For webfont rendering */
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4) !important; 
    
    /* For SVG rendering */
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4)) !important; 
}

/* --- MORE DRAWER ICON SIZING --- */

body #sidebar #suf-more-list i,
body #sidebar #suf-more-list svg,
body #sidebar #suf-more-list .sidebar-button-icon {
    font-size: 1.2em !important; /* 1.2em means 20% larger than the text. Adjust to 1.1em or 1.3em to dial it in! */
    vertical-align: middle !important; /* Ensures the larger icon stays perfectly centered next to the text */
}

/* --- HOMEPAGE WELCOME BANNER & SEPARATOR --- */
.suf-welcome-banner {
    text-align: left !important;
    padding: 0 20px 40px 20px !important; /* The 40px pushes the separator line down away from the text */
    margin-top: 0 !important;
    margin-bottom: 50px !important; /* The 50px pushes the first article down away from the line */
    border-bottom: 1px solid #d2d0d0 !important; /* Matches your article separators perfectly */
}

.suf-welcome-banner h2 {margin-top: 0 !important;
    font-size: 3rem !important;
    color: #452c51 !important;
    margin-bottom: 15px !important;
    border-bottom: none !important; /* Kills the default Hugo underline */
}

.suf-welcome-banner p {
    font-size: 1.5rem !important;
    line-height: 1.6 !important;
    color: #656565 !important; /* Crisp dark grey for readability */
    max-width: 800px !important; /* Keeps the text from stretching too wide on big screens */
    margin: 0 auto !important; /* Centers the paragraph perfectly */
    font-weight: 500 !important;
    font-family: "Merriweather", "PT Serif", Georgia, "Times New Roman", serif !important; 
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .suf-welcome-banner {
        margin-bottom: 30px !important;
    }
    .suf-welcome-banner h2 {
        padding-left: 20px  !important;
        padding-right: 20px  !important;
    }
    .suf-welcome-banner p {
        padding-left: 20px  !important;
        padding-right: 20px  !important;
    }
}

/* --- THE GLOBAL SCROLL INDICATOR --- */

/* 1. The Homepage Version (Inline) */
.suf-scroll-arrow {
    display: block !important;
    text-align: center !important;
    font-size: 2rem !important;
    color: #d2d0d0 !important; /* Matches your separator line perfectly */
    margin: -30px auto 25px auto !important; /* Spaces it between the welcome text and the line */
    animation: suf-bounce 2s infinite ease-in-out !important;
    transition: color 0.3s ease !important;
}

.suf-scroll-arrow:hover {
    color: #b700ff !important; /* Studio purple on hover */
}

/* 2. The Article Cover Version (Pinned below the Title) */
.suf-cover-scroll {
    position: absolute !important;
    top: calc(50% + 120px) !important; 
    left: 50% !important;
    transform: translateX(-50%); /* REMOVED !important so the animation can actually move it! */
    font-size: 2.5rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    animation: suf-bounce 2s infinite ease-in-out !important; 
    z-index: 100 !important;
    transition: color 0.3s ease !important;
    text-shadow: 0px 4px 10px rgba(0,0,0,0.8) !important;
}

.suf-cover-scroll:hover {
    color: #ffffff !important;
}

.suf-cover-scroll:hover {
    color: #ffffff !important;
}

/* The Smooth Bounce Physics */
@keyframes suf-bounce {
    0%, 100% { transform: translateY(0) translateX(-50%); } /* Includes translateX to keep absolute centering intact */
    50% { transform: translateY(15px) translateX(-50%); }
}

/* Override for the inline homepage arrow to not use translateX */
.suf-scroll-arrow {
    animation-name: suf-bounce-inline !important;
}
@keyframes suf-bounce-inline {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(15px); }
}

/* --- GLOBAL SMOOTH SCROLLING --- */
html {
    scroll-behavior: smooth !important;
}

/* --- LOCK THE ARROW TO THE COVER IMAGE --- */
/*.suf-relative-cover {
    position: relative !important; 
} */

/* =========================================
   SUF STUDIOS: DARK READER EXCEPTIONS
   ========================================= */

/* 1. Stop the wrappers from painting solid backgrounds */
body.suf-is-dark,
body.suf-is-dark #blog {
    background-color: transparent !important; 
}

/* 2. Paint ONLY the reading area */
body.suf-is-dark #main {
    background-color: #2D2D32 !important;
}

/* 3. Maintain the Frosted Glass on the Sidebar */
body.suf-is-dark #sidebar,
body.suf-is-dark .sidebar-container {
    background-color: rgba(24, 26, 27, 0.093) !important; 
}

/* 4. Protect the Article Cover Titles */
body.suf-is-dark .post-header-cover .post-title,
body.suf-is-dark .post-header-cover .post-meta time,
body.suf-is-dark .post-header-cover .post-meta a {
    color: #ffffff !important; 
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important; 
}