/**
 * Adhesives e-Brochure - Main Stylesheet
 * This file contains custom fonts, keyframe animations, scrollbar styling, 
 * and specific utility classes extracted from the HTML.
 */

/* ==========================================================================
   1. CUSTOM TYPOGRAPHY (CODEC WARM)
   ========================================================================== */

/* Regular weight */
@font-face {
    font-family: 'Codec Warm';
    src: url('../font/CodecWarm%20-%20Regular%20Mac.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Bold weight */
@font-face {
    font-family: 'Codec Warm';
    src: url('../font/CodecWarm%20-%20Bold%20Mac.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Extra Bold weight */
@font-face {
    font-family: 'Codec Warm';
    src: url('../font/CodecWarm%20-%20Extra%20Bold%20Mac.ttf') format('truetype');
    font-weight: 800; 
    font-style: normal;
}

/* Forced independent declaration for the Extra Bold title to avoid font-weight conflicts */
@font-face {
    font-family: 'Codec Warm ExtraBold';
    src: url('../font/CodecWarm%20-%20Extra%20Bold%20Mac.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Light Italic */
@font-face {
    font-family: 'Codec Warm';
    src: url('../font/CodecWarm%20-%20Light%20Italic%20Mac.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

/* ==========================================================================
   2. GLOBAL BEHAVIORS
   ========================================================================== */

/* Enable smooth scrolling for anchor links across the entire page */
html { 
    scroll-behavior: smooth; 
}

/* ==========================================================================
   3. MODAL TRANSITION CLASSES (Vue/React style enter/leave classes)
   ========================================================================== */
.modal-enter { opacity: 0; transform: scale(0.95); }
.modal-enter-active { opacity: 1; transform: scale(1); transition: opacity 300ms, transform 300ms; }
.modal-leave { opacity: 1; transform: scale(1); }
.modal-leave-active { opacity: 0; transform: scale(0.95); transition: opacity 300ms, transform 300ms; }

/* ==========================================================================
   4. CUSTOM BACKGROUND EFFECTS
   ========================================================================== */

/* Creates a large, subtle semi-transparent gradient circle behind specific elements */
.hug-bg {
    position: relative;
    overflow: hidden;
}
.hug-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 120%;
    height: 150%;
    background: linear-gradient(180deg, #6F2595 0%, #AA0061 100%);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.1;
}

/* ==========================================================================
   5. ANIMATIONS
   ========================================================================== */

/* Smooth Floating Effect (Used for the hero section image) */
@keyframes float-slow {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-15px) scale(1.02); } /* Moves up slightly and scales */
}

/* Utility class to apply the floating animation */
.animate-float-slow { 
    animation: float-slow 6s ease-in-out infinite; 
}

/* ==========================================================================
   6. CUSTOM SCROLLBAR STYLING
   ========================================================================== */

/* Styles the scrollbar specifically for elements containing the .custom-scrollbar class (e.g., modals and horizontal tables) */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px; /* Vertical scrollbar width */
    height: 8px; /* Horizontal scrollbar height */
}

/* The track (background) of the scrollbar */
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* The draggable handle of the scrollbar */
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}

/* Hover effect for the draggable handle */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ==========================================================================
   7. UTILITY CLASSES (Extracted from HTML inline attributes)
   ========================================================================== */

/* Forces the specific ExtraBold font family for main headers */
.hero-title-font {
    font-family: 'Codec Warm ExtraBold', sans-serif !important;
}

/* Applies the specific background image for the Healthy Bonds section */
.healthy-bonds-bg {
    background-image: url('../image/healthybonds_background.png');
}

/* Fixed sizing for Lord Icons based on design requirements */
.lord-icon-28 {
    width: 28px;
    height: 28px;
}

.lord-icon-32 {
    width: 32px;
    height: 32px;
}

/* Fixed widths for the "Under-recognized" statistics bars */
.under-recognized-bar-patients {
    width: 86%;
}

.under-recognized-bar-nurses {
    width: 70%;
}