/* ========================================
   LINKHUB UK - UNIFIED TYPOGRAPHY SYSTEM
   ======================================== */

/* Import Roboto font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* ========================================
   BASE FONT SETTINGS
   ======================================== */
* {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #333 !important;
    background: #f8f9fa !important;
}

/* ========================================
   MODULE BACKGROUNDS
   ======================================== */
.linkhubuk-dashboard,
.linkhubuk-company-profile,
.linkhubuk-module,
.dashboard-module,
.company-profile-module,
.advertising-module,
.payment-module,
.referral-module,
.quote-module,
.shoutout-module,
.registration-module {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.1);
    padding: 24px;
    margin-bottom: 20px;
}

/* Specific module styling */
.linkhubuk-dashboard {
    background: #ffffff;
    min-height: 100vh;
}

.linkhubuk-company-profile {
    background: #ffffff;
    max-width: 800px;
    margin: 40px auto;
}

/* Form and input containers */
.form-container,
.input-group,
.field-group {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin-bottom: 16px;
}

/* Modal and popup backgrounds */
.modal-content,
.popup-content,
.dialog-content {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}

/* ========================================
   UNIFIED HEADING SYSTEM
   ======================================== */

/* H1 - Main Page Titles */
h1 {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 1.5rem 0 !important;
    color: #333 !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
}

/* H2 - Section Headers */
h2 {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 2rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 0 1.25rem 0 !important;
    color: #333 !important;
    letter-spacing: -0.01em !important;
    text-align: left !important;
}

/* H3 - Subsection Headers */
h3 {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 0 1rem 0 !important;
    color: #333 !important;
    text-align: left !important;
}

/* H4 - Minor Headers */
h4 {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin: 0 0 0.75rem 0 !important;
    color: #333 !important;
    text-align: left !important;
}

/* H5 - Small Headers */
h5 {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin: 0 0 0.5rem 0 !important;
    color: #333 !important;
    text-align: left !important;
}

/* H6 - Micro Headers */
h6 {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin: 0 0 0.5rem 0 !important;
    color: #333 !important;
    text-align: left !important;
}

/* ========================================
   TEXT ELEMENTS
   ======================================== */
p {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    margin: 0 0 1rem 0 !important;
    color: #333 !important;
}

a {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-weight: 500 !important;
    color: #c5a85b !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

a:hover {
    color: #a8944a;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
input, textarea, select, button {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
}

label {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-weight: 500 !important;
    color: #333 !important;
}

/* ========================================
   BUTTON TYPOGRAPHY
   ======================================== */
.btn, button, .linkhubuk-btn {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    letter-spacing: 0.01em !important;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.text-light {
    font-weight: 300;
}

.text-regular {
    font-weight: 400;
}

.text-medium {
    font-weight: 500;
}

.text-semibold {
    font-weight: 600;
}

.text-bold {
    font-weight: 700;
}

.text-black {
    font-weight: 900;
}

.text-small {
    font-size: 0.875rem;
}

.text-large {
    font-size: 1.125rem;
}

.text-xl {
    font-size: 1.25rem;
}

.text-2xl {
    font-size: 1.5rem;
}

.text-3xl {
    font-size: 2rem;
}

.text-4xl {
    font-size: 2.5rem;
}

/* ========================================
   RESPONSIVE TYPOGRAPHY
   ======================================== */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
        margin-bottom: 1.25rem;
    }
    
    h2 {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }
    
    h3 {
        font-size: 1.375rem;
        margin-bottom: 0.875rem;
    }
    
    h4 {
        font-size: 1.125rem;
        margin-bottom: 0.625rem;
    }
    
    body {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }
    
    h2 {
        font-size: 1.5rem;
        margin-bottom: 0.875rem;
    }
    
    h3 {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }
    
    h4 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    body {
        font-size: 14px;
    }
}

/* ========================================
   MONOSPACE FONT (for code/debug)
   ======================================== */
code, pre, .debug-log, .console-output {
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-size: 0.875rem;
    font-weight: 400;
}

/* ========================================
   SPECIAL HEADING STYLES
   ======================================== */
.heading-primary {
    color: #c5a85b; /* Keep brand color for special cases */
}

.heading-secondary {
    color: #333; /* Updated to match standard */
}

.heading-accent {
    color: #a61a8c; /* Keep accent color for special cases */
}

.heading-success {
    color: #28a745; /* Keep success color for status indicators */
}

.heading-warning {
    color: #ffc107; /* Keep warning color for alerts */
}

.heading-danger {
    color: #dc3545; /* Keep danger color for errors */
}

.heading-info {
    color: #17a2b8; /* Keep info color for informational content */
}

/* Standard heading color override */
.heading-standard {
    color: #333;
}

/* ========================================
   SHOUT OUT SECTIONS - OVERRIDE INLINE STYLES
   ======================================== */
#linkhubuk-shoutout-request,
#linkhubuk-shoutout-previous,
#linkhubuk-shoutout-inbox,
#linkhubuk-team-shoutout-requests {
    background: #ffffff !important;
    padding: 24px !important;
    text-align: left !important;
    min-height: auto !important;
}

#linkhubuk-shoutout-request h2,
#linkhubuk-shoutout-previous h2,
#linkhubuk-shoutout-inbox h2,
#linkhubuk-team-shoutout-requests h2 {
    color: #333 !important;
    font-size: 2rem !important;
    text-align: left !important;
}

/* Modal content styling */
#team-request-modal-content,
#user-shoutout-modal-content {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15) !important;
}

/* Ensure modals are hidden by default */
#user-shoutout-modal,
#team-request-modal {
    display: none;
}

/* Modal positioning fix */
#user-shoutout-modal-content,
#team-request-modal-content {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
}

/* Ensure modal background doesn't interfere */
#user-shoutout-modal,
#team-request-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background: rgba(0,0,0,0.4) !important;
}

/* Force modal visibility when needed */
#user-shoutout-modal.show,
#team-request-modal.show {
    display: block !important;
}

/* Override any conflicting inline styles */
#user-shoutout-modal[style*="display:block"],
#team-request-modal[style*="display:block"] {
    display: block !important;
}

/* Override any remaining inline heading colors */
h2[style*="color:#bfa14a"],
h2[style*="color: #bfa14a"] {
    color: #333 !important;
}

/* Ensure all dashboard modules have white backgrounds */
.linkhubuk-dashboard-module {
    background: #ffffff !important;
}