@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Agbalumo&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Chela+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Carter+One&display=swap");

/* --- 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: 100dvh; /* FIX 1: Added 100 to fix the collapsing background */
    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;
}

/* FIX 2: Target the input text directly to kill the white-on-white bug */
.pagefind-ui__search-input {
    color: #2d2d32 !important;
}
.pagefind-ui__search-input::placeholder {
    color: rgba(45, 45, 50, 0.5) !important;
}

/* --- 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: 40px !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 */
    font-family: "Agbalumo";
    font-size: 2rem;
}

/* --- 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;
    font-family: "Berkshire Swash" !important;
    color: #452c51 !important;
    margin-bottom: 15px !important;
    border-bottom: none !important; /* Kills the default Hugo underline */
}

/* the default font welcome code block */
.suf-welcome-banner p {
    font-size: 1.5rem !important;
    line-height: 1.6 !important;
    color: #4e4e4e !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: 550 !important;
    font-family:
        "Merriweather", "PT Serif", Georgia, "Times New Roman", serif !important;
}

/* My attempt at styling the h2 title in welcome banner - worked but it doesn't look good */
/* .suf-welcome-banner h2 {
/*    font-family: 'Lobster', cursive !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% + 180px) !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;
}

/* =========================================
   SUF STUDIOS: MINIMALIST SCROLLBARS
   ========================================= */

/* 1. For Chrome, Opera, and Safari (Chromium/Webkit) */
#sidebar::-webkit-scrollbar {
    width: 4px; /* Very thin [4mm approx on standard DPI] */
}

#sidebar::-webkit-scrollbar-track {
    background: rgba(85, 174, 215, 0.196); /* Makes the track invisible */
}

#sidebar::-webkit-scrollbar-thumb {
    background: rgba(
        163,
        188,
        203,
        0.3
    ); /* Your signature purple, but subtle */
    border-radius: 7px;
}

#sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(170, 203, 214, 0.242); /* Pops when you actually use it */
}

/* 2. For Firefox and Zen (Standardized CSS) */
#sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(127, 178, 207, 0.242) transparent;
}

/* =========================================
   SUF STUDIOS: MOBILE SIDEBAR SAFE ZONE
   ========================================= */

/* Hardware Detection: Only activates on screens smaller than 768px (Phones/Small Tablets) */
@media only screen and (max-width: 768px) {
    /* Target the bottom section containing the Theme Toggle and More Drawer */
    #sidebar > div:last-of-type {
        /* * The Magic Formula:
         * We tell it to add a massive 80px padding to the bottom.
         * The 'env(safe-area-inset-bottom)' protects against iPhones with the bottom swipe bar.
         * The 'max()' function picks whichever number is bigger to guarantee clearance.
         */
        padding-bottom: max(
            100px,
            env(safe-area-inset-bottom, 90px)
        ) !important;
    }
}

/* =========================================
   SUF STUDIOS: PAGEFIND BUG FIXES & DARK MODE
   ========================================= */

/* 1. Mobile Freeze Fix (Forces hardware acceleration so the input doesn't lock up) */
#suf-search-overlay {
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* 2. Kill the Default Browser Yellow Highlights (Light Mode) */
#suf-search-container mark,
.pagefind-ui__mark {
    background-color: rgba(
        183,
        0,
        255,
        0.15
    ) !important; /* Subtle Studio Purple highlight */
    color: #2d2d32 !important; /* Keeps the text dark and legible */
    padding: 0 3px !important;
    border-radius: 3px !important;
}

/* 3. Dark Mode: Search Box Tweaks */
body.suf-is-dark #suf-search-container .pagefind-ui__search-input {
    border: 1px solid #5a5a60 !important; /* Subtle dark border */
    color: #f5f3ef !important; /* Crisp light text */
    background-color: transparent !important;
}

body.suf-is-dark #suf-search-container .pagefind-ui__search-input::placeholder {
    color: rgb(245, 243, 239) !important; /* Soft light-grey placeholder */
}

/* 4. Dark Mode: Word Highlights */
body.suf-is-dark #suf-search-container mark,
body.suf-is-dark .pagefind-ui__mark {
    background-color: rgba(
        183,
        0,
        255,
        0.5
    ) !important; /* Stronger Studio Purple for dark bg */
    color: #ffffff !important; /* White text inside the highlight */
}

/* =========================================
   SUF STUDIOS: CUSTOM FONT WRAPPERS
   ========================================= */
.lobster-text {
    font-family: "Lobster", cursive !important;
    font-size: 2rem; /* Adjust size as needed */
    font-weight: normal !important; /* Lobster is naturally thick */
    letter-spacing: 1px;
}

.swash-text {
    font-family: "Berkshire Swash", cursive;
}

.agbalumo-text {
    font-family: "Agbalumo", system-ui !important;
    font-weight: normal !important;
    font-size: 2rem;
}

.chelaone-text {
    font-family: "Chela One", system-ui !important;
    font-weight: normal !important;
    font-size: 2rem;
}

.carterone-text {
    font-family: "Carter One", system-ui !important;
    font-weight: normal !important;
    font-size: 2rem;
}

/* =========================================
   SUF STUDIOS: BERKSHIRE SWASH MAIN TITLES
   ========================================= */

/* 1. Homepage Article Feed Titles */
body .postShorten .postShorten-title,
body .postShorten .postShorten-title a {
    font-family: "Carter One", system-ui !important;
    font-weight: normal !important;
    letter-spacing: 0.2px !important;
}

/* 2. Inside the Article (Top Headers & Cover Images) */
body .post-header .post-title,
body .post-header-cover .post-title {
    font-family: "Berkshire Swash", cursive !important;
    font-weight: normal !important;
    letter-spacing: 1px !important;
}

/* =========================================
   SUF STUDIOS: DYNAMIC PROMO DRAWER
   ========================================= */

/* 1. The Main Hidden Drawer */
#suf-promo-drawer {
    position: fixed;
    top: 75%; /* Places it exactly where you asked */
    right: -320px; /* Hides it completely off the right edge */
    width: 320px;
    transform: translateY(
        -50%
    ); /* Keeps it perfectly vertically centered at the 70% mark */

    background: rgba(240, 240, 240, 0.6); /* Dark frosted glass */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-right: none;
    border-radius: 12px 0 0 12px;
    box-shadow: -5px 10px 30px rgba(0, 0, 0, 0.4);

    /* The sliding animation */
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    z-index: 9998;
}

/* When the JS adds this class, it slides into view! */
#suf-promo-drawer.suf-drawer-open {
    right: 0px !important;
}

/* 2. The Interactive Tab */
#suf-promo-tab {
    position: absolute;
    left: -40px; /* Pushes the tab out to the left of the hidden box */
    top: 20px;
    width: 40px;
    background: #55068a; /* Studio Purple */
    padding: 15px 0;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    box-shadow: -4px 0px 15px rgba(183, 0, 255, 0.4);
    transition: background 0.2s ease;
}

#suf-promo-tab:hover {
    background: #c833ff; /* Lighter purple on hover */
}

/* 3. The Vertical Text */
.suf-vertical-text {
    writing-mode: vertical-rl; /* Turns the text sideways! */
    text-orientation: mixed;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 0.85rem;
}

/* 4. The "Live" Pulsing Dot Animation */
.suf-live-pulse {
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    border-radius: 50%;
    /* The animation calls the keyframes below */
    animation: suf-radar-pulse 2s infinite;
}

@keyframes suf-radar-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* 5. Typography Inside the Drawer */
#suf-promo-content {
    padding: 25px;
}

#suf-promo-content h3 {
    color: #41294c !important;
    margin-top: 0 !important;
    font-size: 1.7rem !important;
    font-family: "Carter One" !important;
    border-bottom: none !important;
}

#suf-promo-content p {
    color: #464646 !important;
    font-size: 1.4rem !important;
    font-family: "Montserrat", sans-serif !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
}

.suf-promo-btn {
    display: block;
    text-align: center;
    background: #55068a;
    color: #ffffff !important;
    padding: 4px;
    border-radius: 4px;
    font-weight: 700;
    font-family: "Carter One" !important;
    text-decoration: none !important;
    transition: transform 0.2s ease;
}

.suf-promo-btn:hover {
    transform: translateY(-2px);
}