/* =============================================
   SPIRIT COLLECTIVE VARIABLES & UTILITY CLASSES
   =============================================
   
  File location: /wp-content/plugins/spirit-collective/shared/styles/sc-styles.css

   NAMING CONVENTIONS:
   ------------------
   .sc-*           = Spirit Collective global components/utilities
   .sc-btn-*       = Button variants
   .sc-text-*      = Text/typography utilities
   .sc-bg-*        = Background color utilities
   .sc-container-* = Container/layout utilities
   .sc-card-*      = Card components
   
   Page-specific styles should use:
   .sc-[pagename]-* = e.g., .sc-homepage-*, .sc-shop-*, etc.
   
   ================================================================== */

/**
 * Spirit Collective Homepage Components
 * High-performance native WordPress homepage with custom shortcodes
 * File location: /wp-content/plugins/spirit-collective-custom-code/includes/homepage.php
 */

/* #region CSS Variables & Root Settings  */
/* ====================================== */

:root {
    /* Primary Brand Colors */
    --sc-color-primary: #D52975; /* Primary color (use sparingly), Primary Button Background Color Hover, Primary Button Border Color Hover, and others */
    --sc-color-primary-hover: #c02468;
    
    /* Background Colors - Hierarchical System */
    --sc-color-bg-base: #FEFBFA;        /* Header/Buddypanel - lightest */
    --sc-color-bg-page: #FAFBFD;        /* Main page background */
    --sc-color-bg-section: #F7F8FA;     /* Section backgrounds - slightly darker */
    --sc-color-bg-section-alt: #FAF2ED; /* Alternate section bg - warm tan */
    --sc-color-bg-section-alt-2: #F2F4F5; /* Second Alternate section bg - light gray */
    --sc-color-bg-card: #FFFFFF;        /* Card/inner content - pure white, pops forward */
    --sc-color-bg-accent: #FCEFF2;      /* Attention sections - subtle pink tint */
    
    /* Neutral Colors */
    --sc-color-text: #252423; /* Headings/Text Color, Primary Button Text Color, Secondary Button Text Color, Secondary Button Text Color Hover, and others */
    --sc-color-text-light: #757370; /* Gray */
    --sc-color-border: #D6D9DD; /*Content Border Color, Primary Button Border Color, Secondary Button Border Color, Secondary Button Border Color Hover, and others */
    --sc-color-white: #FFFFFF; /* Primary Button Text Color Hover, and others */
    --sc-color-active-menu-item: #EDE6E0; /* Medium Tan */
    
    /* Button Colors */
    --sc-color-btn-primary: #FCEFF2; /* Medium-Light Slightly Saturated Tan; Primary Button Background Color, Secondary Button Background Color Hover, and others*/
    --sc-color-btn-secondary: #F2F4F5; /* Desaturated Light Tan; Secondary Button Background Color Default and others*/
    --sc-color-btn-hover: #F6E9E3; /* Medium-Light Slightly Saturated Tan */
    --sc-color-active: #D8AE8D; /* Burnt Orange */
    
    /* Alert Colors */
    --sc-color-info: #98acd6;
    --sc-color-success: #87a96b;
    --sc-color-warning: #d4a574;
    --sc-color-error: #c08081;
    
    /* Typography */
    --sc-font-heading: 'Big Bird', sans-serif;
    --sc-font-body: 'Brewery', sans-serif;
    
    /* Spacing Scale */

    /* Base spacing unit that scales with content width */
    /* At max content width (~1400px), unit = 14px. At mobile (~375px), unit = 3.75px */
    --sc-space-unit: calc(var(--content-width) / 100);
    
    /* Fluid Spacing Scale - numbers match desktop max values */
    --sc-space-0: 0;
    --sc-space-5: clamp(3px, calc(var(--sc-space-unit) * 0.36), 5px);
    --sc-space-8: clamp(5px, calc(var(--sc-space-unit) * 0.57), 8px);
    --sc-space-10: clamp(6px, calc(var(--sc-space-unit) * 0.71), 10px);
    --sc-space-12: clamp(7px, calc(var(--sc-space-unit) * 0.86), 12px);
    --sc-space-15: clamp(9px, calc(var(--sc-space-unit) * 1.07), 15px);
    --sc-space-18: clamp(12px, calc(var(--sc-space-unit) * 1.29), 18px);
    --sc-space-20: clamp(13px, calc(var(--sc-space-unit) * 1.43), 20px);
    --sc-space-22: clamp(14.5px, calc(var(--sc-space-unit) * 1.57), 22px);
    --sc-space-25: clamp(17px, calc(var(--sc-space-unit) * 1.78), 25px);
    --sc-space-30: clamp(18px, calc(var(--sc-space-unit) * 2.14), 30px);
    --sc-space-40: clamp(24px, calc(var(--sc-space-unit) * 2.86), 40px);
    --sc-space-50: clamp(30px, calc(var(--sc-space-unit) * 3.57), 50px);
    --sc-space-60: clamp(36px, calc(var(--sc-space-unit) * 4.29), 60px);
    --sc-space-80: clamp(48px, calc(var(--sc-space-unit) * 5.71), 80px);
    
    /* Border Radius */
    --sc-radius-3: 3px;
    --sc-radius-5: 5px;
    --sc-radius-checkbox: 5.4px;
    --sc-radius-6: 6px;
    --sc-radius-10: 10px;
    --sc-radius-15: 15px;
    --sc-radius-30: 30px;
    --sc-radius-full: 50px;
    
    /* Shadows */
    --sc-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    --sc-shadow-hover: 0 15px 45px rgba(213, 41, 117, 0.15);
    --sc-shadow-subnav: 0 3px 13px 0 rgba(18, 43, 70, .1);
    
    /* Transitions */
    --sc-transition: 0.3s ease;

    /* Setup: Track sidebar widths as CSS variables */
    --buddypanel-width: 0px;
    --subnav-width: 0px;
    --content-width: 100vw;

    /* RGB equivalents for key colors */
    --sc-color-primary-rgb: 213, 41, 117;
    --sc-color-text-rgb: 37, 36, 35;
    --sc-color-white-rgb: 255, 255, 255;
    --sc-color-bg-page-rgb: 250, 251, 253;
    --sc-color-border-rgb: 214, 217, 221;
    
    /* Footer Colors */
    --sc-color-footer-text: #5A5A5A;
    --sc-color-footer-link: #5A5A5A;
    --sc-color-footer-link-hover: var(--sc-color-primary);
    --sc-color-footer-link-active: var(--sc-color-text);
    
    /* Login/Register Colors */
    --sc-color-login-link: var(--sc-color-primary);
    --sc-color-login-link-hover: #D60060;
    --sc-color-login-button-bg: var(--sc-color-primary);
    --sc-color-login-button-bg-hover: #D60060;
    --sc-color-login-button-text: var(--sc-color-white);
    --sc-color-login-heading: var(--sc-color-white);
    
    /* Label Colors */
    --sc-color-label-bg: var(--sc-color-btn-primary);
    --sc-color-label-text: var(--sc-color-primary);
    
    /* Tooltip Colors */
    --sc-color-tooltip-bg: var(--sc-color-primary);
    --sc-color-tooltip-text: var(--sc-color-bg-base);
    
    /* Cover Image */
    --sc-color-cover-bg: #647385;
    
    /* Admin Screen */
    --sc-color-admin-bg: #FEFBFA;
    --sc-color-admin-text: var(--sc-color-text);
    
    /* Focus Shadows */
    --sc-shadow-button-focus: 0px 0px 1px 2px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 2px rgba(0, 0, 0, 0.08);
    --sc-shadow-input-focus: 0px 0px 0px 2px rgba(213, 41, 117, 0.1);
    
    /* Header specific */
    --sc-header-height: 60px;
    --sc-header-mobile-logo-size: 50px;
    --sc-logo-width: 143px;
    
    /* Typography Transform */
    --sc-widget-title-transform: none;

    /* Grid column width targets based on content width */
    --sc-grid-min-col: clamp(150px, calc(var(--content-width) / 8), 250px);
    --sc-grid-ideal-col: clamp(200px, calc(var(--content-width) / 6), 350px);
    --sc-grid-max-col: clamp(250px, calc(var(--content-width) / 4), 450px);
}

/* Dark mode overrides */
[data-theme="dark"] {
    /* Primary Brand Colors - slightly brighter for dark backgrounds */
    --sc-color-primary: #E73A81;
    --sc-color-primary-hover: #F04D92;
    
    /* Background Colors - warm dark tones, not harsh black */
    --sc-color-bg-base: #1A1918;      /* Header/Buddypanel - darkest */
    --sc-color-bg-page: #1E1D1C;      /* Main page background */
    --sc-color-bg-section: #242221;   /* Section backgrounds - lighter */
    --sc-color-bg-section-alt: #2d2925; /* Alternate section - warm dark */
    --sc-color-bg-section-alt-2: #2D2A28; /* Second Alternate section bg - medium dark gray */
    --sc-color-bg-card: #1A1918;      /* Card/inner content - matches base */
    --sc-color-bg-accent: #2D2328;    /* Attention sections - subtle purple tint */
    --bb-body-background-color: #1A1918;
    --sc-color-active-menu-item: #3D3836; /* Warm dark brown */

    /* Text Colors - softer whites */
    --sc-color-text: #F5F0ED;
    --sc-color-text-light: #B8B2AD;
    --sc-color-border: #4A4543;
    --sc-color-white: #1A1918; /* Inverted */
    
    /* Button Colors - adjusted for dark mode */
    --sc-color-btn-primary: #3A3533;
    --sc-color-btn-secondary: #2D2A28;
    --sc-color-btn-hover: #4A4543;
    
    /* Alert Colors - keep these mostly the same for consistency */
    --sc-color-info: #9FABC9;
    --sc-color-success: #95A67C;
    --sc-color-warning: #D9A97E;
    --sc-color-error: #C99091;
    
    /* Shadows - lighter shadows for dark mode */
    --sc-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    --sc-shadow-hover: 0 15px 45px rgba(231, 58, 129, 0.2);
    --sc-shadow-subnav: 0 3px 13px 0 rgba(237, 212, 185, 0.1);
    
    /* Additional dark mode specific adjustments */
    --sc-opacity-overlay: 0.9;
    --sc-image-brightness: 0.9;

    /* RGB equivalents for dark mode */
    --sc-color-primary-rgb: 231, 58, 129;
    --sc-color-text-rgb: 245, 240, 237;
    --sc-color-bg-page-rgb: 26, 25, 24;
    --sc-color-border-rgb: 74, 69, 67;
    
    /* Footer Colors Dark */
    --sc-color-footer-text: #B8B2AD;
    --sc-color-footer-link: #B8B2AD;
    --sc-color-footer-link-hover: var(--sc-color-primary);
    --sc-color-footer-link-active: var(--sc-color-text);
    
    /* Login/Register Dark */
    --sc-color-login-link: var(--sc-color-primary);
    --sc-color-login-link-hover: var(--sc-color-primary-hover);
    --sc-color-login-button-bg: var(--sc-color-primary);
    --sc-color-login-button-bg-hover: var(--sc-color-primary-hover);
    --sc-color-login-button-text: #1A1918;
    --sc-color-login-heading: var(--sc-color-text);
    
    /* Label Colors Dark */
    --sc-color-label-bg: var(--sc-color-bg-section-alt);
    --sc-color-label-text: var(--sc-color-primary);
    
    /* Tooltip Dark */
    --sc-color-tooltip-bg: var(--sc-color-primary);
    --sc-color-tooltip-text: #1A1918;
    
    /* Cover Image Dark */
    --sc-color-cover-bg: #3A3533;
    
    /* Admin Screen Dark */
    --sc-color-admin-bg: var(--sc-color-bg-base);
    --sc-color-admin-text: var(--sc-color-text);
    
    /* Focus Shadows Dark */
    --sc-shadow-button-focus: 0px 0px 1px 2px rgba(255, 255, 255, 0.1), inset 0px 0px 0px 2px rgba(255, 255, 255, 0.15);
    --sc-shadow-input-focus: 0px 0px 0px 2px rgba(231, 58, 129, 0.2);
}

/* Desktop: 1051px+ */
@media (min-width: 1051px) {
  body:not(.buddypanel-open) {
    --buddypanel-width: 68px;
  }
  
  body.buddypanel-open {
    --buddypanel-width: 230px;
  }
  
  body:has(#custom-subnav.collapsed) {
    --subnav-width: 68px;
  }
  
  body:has(#custom-subnav:not(.collapsed)) {
    --subnav-width: 250px;
  }
}

/* Tablet: 800-1050px */
@media (min-width: 800px) and (max-width: 1050px) {
  body:not(.buddypanel-open) {
    --buddypanel-width: 68px;
  }
  
  body.buddypanel-open {
    --buddypanel-width: 230px;
  }
  
  /* Subnav is header bar, doesn't affect horizontal space */
  body:has(#custom-subnav) {
    --subnav-width: 0px;
  }
}

/* Mobile: Below 800px */
@media (max-width: 799px) {
  body {
    --buddypanel-width: 0px;
    --subnav-width: 0px;
  }
}

/* Calculate actual content width */
body {
  --content-width: calc(100vw - var(--buddypanel-width) - var(--subnav-width));
}

/* #endregion CSS Variables */

/* #region Dark/Light Mode Utilities            */
/* ======================================== */

/* Dark mode specific utilities */
[data-theme="dark"] {
    /* Adjust images to be less bright */
    img:not(.no-dark-adjust) {
        filter: brightness(var(--sc-image-brightness));
    }
    
    /* Adjust input fields */
    input, textarea, select {
        background: var(--sc-color-bg-section-alt);
        color: var(--sc-color-text);
        border-color: var(--sc-color-border);
    }
    
    /* Code blocks */
    pre, code {
        background: var(--sc-color-bg-page);
        color: var(--sc-color-text);
    }
}

/* Dark/Light Mode toggle in header - Tutor LMS style */
#bb-toggle-theme {
    background-color: transparent;
    color: var(--sc-color-primary);
    font-family: var(--sc-font-body);
    font-size: 16px;
    line-height: 16px;
    padding: 0 8px;
    text-decoration: none;
    outline: none;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    position: relative;
    display: inline-block;
}

#bb-toggle-theme .sfwd-dark-mode,
#bb-toggle-theme .sfwd-light-mode {
    color: var(--sc-color-primary);
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    display: inline-block;
}

#bb-toggle-theme i {
    color: var(--sc-color-text);
    display: inline-block;
    font-family: bb-icons;
    font-size: 24px;
    font-style: normal;
    font-weight: 100;
    line-height: 24px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    width: 24px;
    text-align: center;
}

/* Icon visibility based on theme */
[data-theme="light"] #bb-toggle-theme .sfwd-dark-mode {
    display: inline-block;
}

[data-theme="light"] #bb-toggle-theme .sfwd-light-mode {
    display: none;
}

[data-theme="dark"] #bb-toggle-theme .sfwd-dark-mode {
    display: none;
}

[data-theme="dark"] #bb-toggle-theme .sfwd-light-mode {
    display: inline-block;
}

.header-aside-inner #bb-toggle-theme:hover i {
    color: var(--sc-color-primary);
}

[data-theme="dark"] .header-aside-inner #bb-toggle-theme:hover i {
    color: var(--sc-color-primary);
}

/* Tooltip styles for dark mode toggle - matching Tutor LMS */
.site-header .header-aside [data-balloon]::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(213,41,117,1)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
    background-size: 100%;
    height: 6px;
    width: 18px;
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: all 0.18s ease-out;
    transition-delay: 0.18s;
    z-index: 1003;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    top: 100%;
    margin-top: 5px;
}

.site-header .header-aside [data-balloon]::after {
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
    border-radius: var(--sc-radius-3);
    content: attr(data-balloon);
    font-size: 12px;
    line-height: 1;
    padding: 6px 10px;
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: all 0.18s ease-out;
    transition-delay: 0.18s;
    white-space: nowrap;
    z-index: 1002;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    top: 100%;
    margin-top: 11px;
}

.site-header .header-aside [data-balloon]:hover::before,
.site-header .header-aside [data-balloon]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Dark mode tooltip adjustments */
[data-theme="dark"] .site-header .header-aside [data-balloon]::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(231,58,129,1)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
}

/* Logo switching based on theme */
/* Hide dark logo by default (light mode) */
[data-theme="light"] .bb-logo-dark {
    display: none !important;
}

[data-theme="light"] .bb-logo:not(.bb-logo-dark) {
    display: inline-block !important;
}

/* Show dark logo in dark mode */
[data-theme="dark"] .bb-logo-dark {
    display: inline-block !important;
}

[data-theme="dark"] .bb-logo:not(.bb-logo-dark) {
    display: none !important;
}

/* Also handle buddypanel logo if it exists */
[data-theme="light"] .buddypanel-logo .bb-logo-dark {
    display: none !important;
}

[data-theme="light"] .buddypanel-logo .bb-logo:not(.bb-logo-dark) {
    display: inline-block !important;
}

[data-theme="dark"] .buddypanel-logo .bb-logo-dark {
    display: inline-block !important;
}

[data-theme="dark"] .buddypanel-logo .bb-logo:not(.bb-logo-dark) {
    display: none !important;
}

/* #endregion Dark Mode Utilities */

/* #region Typography System              */
/* ======================================== */

/* Body Text */
.sc-text {
    font-family: var(--sc-font-body);
    line-height: 1.333;
    color: var(--sc-color-text);
}

.sc-heading {
    font-family: var(--sc-font-heading);
    line-height: 1.333;
    color: var(--sc-color-text);
}

/* Text Utilities */
.sc-text-center { text-align: center; }
.sc-text-left { text-align: left; }
.sc-text-right { text-align: right; }
.sc-text-light { color: var(--sc-color-text-light); }
.sc-text-primary { color: var(--sc-color-primary); }
.sc-text-uppercase { text-transform: uppercase; }
.sc-text-capitalize { text-transform: capitalize; }


/* Fluid typography that scales with content width */
/* Formula: clamp(min, preferred, max) where preferred scales with --content-width */

/* Headings - fluid scaling */
.sc-h1 {
    font-family: var(--sc-font-heading);
    font-size: clamp(32px, calc(28px + 2vw), 55px);
    font-weight: 400;
    line-height: 1.333;
    color: var(--sc-color-text);
    margin-bottom: var(--sc-space-30);
}

.sc-h2 {
    font-family: var(--sc-font-heading);
    font-size: clamp(28px, calc(24px + 1.5vw), 42px);
    font-weight: 400;
    line-height: 1.333;
    color: var(--sc-color-text);
    margin-bottom: var(--sc-space-30);
}

.sc-h3 {
    font-family: var(--sc-font-heading);
    font-size: clamp(24px, calc(20px + 1.2vw), 32px);
    font-weight: 400;
    line-height: 1.333;
    color: var(--sc-color-text);
    margin-bottom: var(--sc-space-30);
}

.sc-h4 {
    font-family: var(--sc-font-heading);
    font-size: clamp(20px, calc(18px + 0.8vw), 26px);
    font-weight: 400;
    line-height: 1.333;
    color: var(--sc-color-text);
    margin-bottom: var(--sc-space-25);
}

.sc-h5 {
    font-family: var(--sc-font-heading);
    font-size: clamp(18px, calc(17px + 0.7vw), 24px);
    font-weight: 400;
    line-height: 1.333;
    color: var(--sc-color-text);
    margin-bottom: var(--sc-space-25);
}

.sc-h6 {
    font-family: var(--sc-font-heading);
    font-size: clamp(17px, calc(16px + 0.6vw), 22px);
    font-weight: 400;
    line-height: 1.333;
    color: var(--sc-color-text);
    margin-bottom: var(--sc-space-22);
}

.sc-h7 {
    font-family: var(--sc-font-heading);
    font-size: clamp(16px, calc(15px + 0.5vw), 20px);
    font-weight: 400;
    line-height: 1.333;
    color: var(--sc-color-text);
    margin-bottom: var(--sc-space-20);
}

.sc-bold { font-weight: bold; }

/* Body Text Sizes - fluid scaling */
/* Named by their max size for clarity */
.sc-font-size-19 { font-size: clamp(16px, calc(14px + 0.5vw), 19px); margin-bottom: var(--sc-space-20); }
.sc-font-size-18 { font-size: clamp(15px, calc(13px + 0.5vw), 18px); margin-bottom: var(--sc-space-18); }
.sc-font-size-17 { font-size: clamp(15px, calc(12px + 0.5vw), 17px); margin-bottom: var(--sc-space-18); }
.sc-font-size-16 { font-size: clamp(14px, calc(12px + 0.4vw), 16px); margin-bottom: var(--sc-space-15); }
.sc-font-size-15 { font-size: clamp(13px, calc(11px + 0.4vw), 15px); margin-bottom: var(--sc-space-15); }
.sc-font-size-14 { font-size: clamp(12px, calc(11px + 0.3vw), 14px); margin-bottom: var(--sc-space-15); }
.sc-font-size-13 { font-size: clamp(11px, calc(10px + 0.3vw), 13px); margin-bottom: var(--sc-space-12); }
.sc-font-size-12 { font-size: clamp(11px, calc(10px + 0.2vw), 12px); margin-bottom: var(--sc-space-12); }

/* Content-width based scaling for desktop (above 799px) */
@media (min-width: 800px) {
    /* Use content-width-based calculation for more accurate scaling */
    .sc-h1 { font-size: clamp(36px, calc(36px + (var(--content-width) - 600px) * 0.03), 55px); }
    .sc-h2 { font-size: clamp(30px, calc(30px + (var(--content-width) - 600px) * 0.02), 42px); }
    .sc-h3 { font-size: clamp(26px, calc(26px + (var(--content-width) - 600px) * 0.01), 32px); }
    .sc-h4 { font-size: clamp(22px, calc(22px + (var(--content-width) - 600px) * 0.007), 26px); }
    .sc-h5 { font-size: clamp(20px, calc(20px + (var(--content-width) - 600px) * 0.007), 24px); }
    .sc-h6 { font-size: clamp(18px, calc(18px + (var(--content-width) - 600px) * 0.007), 22px); }
    .sc-h7 { font-size: clamp(17px, calc(17px + (var(--content-width) - 600px) * 0.005), 20px); }
    
    .sc-font-size-19 { font-size: clamp(16px, calc(16px + (var(--content-width) - 600px) * 0.005), 19px); }
    .sc-font-size-18 { font-size: clamp(15px, calc(15px + (var(--content-width) - 600px) * 0.005), 18px); }
    .sc-font-size-17 { font-size: clamp(14px, calc(15px + (var(--content-width) - 600px) * 0.005), 17px); }
    .sc-font-size-16 { font-size: clamp(14px, calc(14px + (var(--content-width) - 600px) * 0.003), 16px); }
    .sc-font-size-15 { font-size: clamp(13px, calc(13px + (var(--content-width) - 600px) * 0.003), 15px); }
    .sc-font-size-14 { font-size: clamp(12px, calc(12px + (var(--content-width) - 600px) * 0.003), 14px); }
    .sc-font-size-13 { font-size: clamp(11px, calc(11px + (var(--content-width) - 600px) * 0.003), 13px); }
    .sc-font-size-12 { font-size: clamp(11px, calc(11px + (var(--content-width) - 600px) * 0.002), 12px); }
}

/* #endregion Typography */

/* #region Button System                  */
/* ======================================== */

.sc-btn {
    display: inline-block;
    font-family: var(--sc-font-body);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all var(--sc-transition);
    border: 1px solid var(--sc-color-border);
    outline: none;
    position: relative;
    overflow: hidden;
    box-shadow: unset;
}

/* Button Sizes */
.sc-btn-sm {
    padding: 8px 20px;
    font-size: 14px;
    border-radius: var(--sc-radius-full);
    min-height: 34px;
}

.sc-btn-md {
    padding: 15px 40px;
    font-size: 14px;
    line-height: 14px;
    border-radius: var(--sc-radius-full);
}

.sc-btn-lg {
    padding: 15px 40px;
    font-size: 16px;
    line-height: 16px;
    border-radius: var(--sc-radius-full);
}

/* Button Variants */
.sc-btn-primary {
    background: var(--sc-color-btn-primary);
    color: var(--sc-color-text);
    border-color: var(--sc-color-border);
}

.sc-btn-primary:hover {
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
    border-color: var(--sc-color-primary);
    transform: translateY(-2px);
    box-shadow: var(--sc-shadow-hover);
}

.sc-btn-secondary {
    background: var(--sc-color-btn-secondary);
    color: var(--sc-color-text);
    border-color: var(--sc-color-border);
}

.sc-btn-secondary:hover {
    background: var(--sc-color-btn-hover);
    border-color: var(--sc-color-border);
}

.sc-btn-accent {
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
    border-color: var(--sc-color-primary);
}

.sc-btn-accent:hover {
    background: var(--sc-color-primary-hover);
    color: var(--sc-color-white);
    border-color: var(--sc-color-primary-hover);
    transform: translateY(-2px);
}

.sc-btn-outline {
    background: transparent;
    color: var(--sc-color-text);
    border-color: var(--sc-color-border);
}

.sc-btn-outline:hover {
    background: var(--sc-color-bg-base);
    border-color: var(--sc-color-text);
}

/* Button States */
.sc-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.sc-btn-full { width: 100%; }

/* #endregion Buttons */

/* #region Container & Layout System      */
/* ======================================== */

.sc-width-100 { width: 100%;}
.sc-container-400 { max-width: 400px; }
.sc-container-800 { max-width: 800px; }
.sc-container-850 { max-width: 850px; }
.sc-container-1140 { max-width: 1140px; }
.sc-container-1400 { max-width: 1400px; }
.sc-container-full { max-width: 100%; }

.sc-middle { margin-left: auto; margin-right: auto;}

/* Background Utilities - Semantic naming */
.sc-bg-base { background-color: var(--sc-color-bg-base); }
.sc-bg-page { background-color: var(--sc-color-bg-page); }
.sc-bg-section { background-color: var(--sc-color-bg-section); }
.sc-bg-section-alt { background-color: var(--sc-color-bg-section-alt); }
.sc-bg-section-alt-2 { background-color: var(--sc-color-bg-section-alt-2); }
.sc-bg-card { background-color: var(--sc-color-bg-card); }
.sc-bg-accent { background-color: var(--sc-color-bg-accent); }
.sc-bg-info { background-color: var(--sc-color-info); }
.sc-bg-success { background-color: var(--sc-color-success); }
.sc-bg-warning { background-color: var(--sc-color-warning); }
.sc-bg-error { background-color: var(--sc-color-error); }

/* Gradient backgrounds for subtle transitions */
.sc-bg-gradient-down {
    background: linear-gradient(180deg, var(--sc-color-bg-section) 0%, var(--sc-color-bg-page) 100%);
}

.sc-bg-gradient-up {
    background: linear-gradient(180deg, var(--sc-color-bg-page) 0%, var(--sc-color-bg-section) 100%);
}

/* #endregion Layout */

/* #region Cards Components */
/* Use sc-h4, sc-h5, or sc-h6 for card titles
   Card image is optional */
/* ======================================== */

.sc-card {
    background: var(--sc-color-white);
    border-radius: var(--sc-radius-15);
    box-shadow: var(--sc-shadow);
    border: 1px solid rgba(214, 217, 221, 0.3);
    transition: all var(--sc-transition);
    overflow: hidden;
}

.sc-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--sc-shadow-hover);
}

/* Card Image */
.sc-card-image {
    position: relative;
    padding-bottom: 100%; /* 1:1 Aspect ratio */
    overflow: hidden;
    background: #f5f5f5;
}

.sc-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.sc-card:hover .sc-card-image img {
    transform: scale(1.1);
}

/* Overlay */
.sc-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, 
        rgba(0, 0, 0, 0) 0%, 
        rgba(0, 0, 0, 0.4) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-card:hover .sc-card-overlay {
    opacity: 1;
}

/* #endregion Cards */

/* #region Utility Classes                */
/* ======================================== */

/* Borders */
.sc-border { border: 1px solid var(--sc-color-border); }
.sc-border-top { border-top: 1px solid var(--sc-color-border); }
.sc-border-bottom { border-bottom: 1px solid var(--sc-color-border); }

/* Radius */
.sc-radius-6 { border-radius: var(--sc-radius-6); }
.sc-radius-10 { border-radius: var(--sc-radius-10); }
.sc-radius-15 { border-radius: var(--sc-radius-15); }
.sc-radius-full { border-radius: var(--sc-radius-full); }

/* Shadows */
.sc-shadow { box-shadow: var(--sc-shadow); }

/* Spacing */
.sc-mt-0 { margin-top: var(--sc-space-0); }
.sc-mt-5 { margin-top: var(--sc-space-5); }
.sc-mt-8 { margin-top: var(--sc-space-8); }
.sc-mt-10 { margin-top: var(--sc-space-10); }
.sc-mt-12 { margin-top: var(--sc-space-12); }
.sc-mt-15 { margin-top: var(--sc-space-15); }
.sc-mt-20 { margin-top: var(--sc-space-20); }
.sc-mt-30 { margin-top: var(--sc-space-30); }
.sc-mt-40 { margin-top: var(--sc-space-40); }
.sc-mt-50 { margin-top: var(--sc-space-50); }
.sc-mt-60 { margin-top: var(--sc-space-60); }
.sc-mt-80 { margin-top: var(--sc-space-80); }

.sc-mb-0 { margin-bottom: var(--sc-space-0); }
.sc-mb-5 { margin-bottom: var(--sc-space-5); }
.sc-mb-8 { margin-bottom: var(--sc-space-8); }
.sc-mb-10 { margin-bottom: var(--sc-space-10); }
.sc-mb-12 { margin-bottom: var(--sc-space-12); }
.sc-mb-15 { margin-bottom: var(--sc-space-15); }
.sc-mb-20 { margin-bottom: var(--sc-space-20); }
.sc-mb-30 { margin-bottom: var(--sc-space-30); }
.sc-mb-40 { margin-bottom: var(--sc-space-40); }
.sc-mb-50 { margin-bottom: var(--sc-space-50); }
.sc-mb-60 { margin-bottom: var(--sc-space-60); }
.sc-mb-80 { margin-bottom: var(--sc-space-80); }

.sc-p-0 { padding: var(--sc-space-0); }
.sc-p-5 { padding: var(--sc-space-5); }
.sc-p-8 { padding: var(--sc-space-8); }
.sc-p-10 { padding: var(--sc-space-10); }
.sc-p-12 { padding: var(--sc-space-12); }
.sc-p-15 { padding: var(--sc-space-15); }
.sc-p-20 { padding: var(--sc-space-20); }
.sc-p-30 { padding: var(--sc-space-30); }
.sc-p-40 { padding: var(--sc-space-40); }
.sc-p-50 { padding: var(--sc-space-50); }
.sc-p-60 { padding: var(--sc-space-60); }
.sc-p-80 { padding: var(--sc-space-80); }

/* Section Padding Classes - scales with content width */
/* Vertical (top/bottom) padding */
.sc-py-12 {
    padding-top: clamp(8.5px, calc(var(--sc-space-unit) * 0.86), 12px);
    padding-bottom: clamp(8.5px, calc(var(--sc-space-unit) * 0.86), 12px);
}

.sc-py-15 {
    padding-top: clamp(11.3px, calc(var(--sc-space-unit) * 1.07), 15px);
    padding-bottom: clamp(11.3px, calc(var(--sc-space-unit) * 1.07), 15px);
}

.sc-py-20 {
    padding-top: clamp(14px, calc(var(--sc-space-unit) * 1.43), 20px);
    padding-bottom: clamp(14px, calc(var(--sc-space-unit) * 1.43), 20px);
}

.sc-py-25 {
    padding-top: clamp(17.5px, calc(var(--sc-space-unit) * 1.79), 25px);
    padding-bottom: clamp(17.5px, calc(var(--sc-space-unit) * 1.79), 25px);
}

.sc-py-40 {
    padding-top: clamp(20px, calc(var(--sc-space-unit) * 2.9), 40px);
    padding-bottom: clamp(20px, calc(var(--sc-space-unit) * 2.9), 40px);
}

.sc-py-50 {
    padding-top: clamp(25px, calc(var(--sc-space-unit) * 3.6), 50px);
    padding-bottom: clamp(25px, calc(var(--sc-space-unit) * 3.6), 50px);
}

.sc-py-60 {
    padding-top: clamp(30px, calc(var(--sc-space-unit) * 4.3), 60px);
    padding-bottom: clamp(30px, calc(var(--sc-space-unit) * 4.3), 60px);
}

.sc-py-80 {
    padding-top: clamp(40px, calc(var(--sc-space-unit) * 5.7), 80px);
    padding-bottom: clamp(40px, calc(var(--sc-space-unit) * 5.7), 80px);
}

.sc-py-100 {
    padding-top: clamp(50px, calc(var(--sc-space-unit) * 7.1), 100px);
    padding-bottom: clamp(50px, calc(var(--sc-space-unit) * 7.1), 100px);
}

.sc-py-xl {
    padding-top: clamp(60px, calc(var(--sc-space-unit) * 8.6), 120px);
    padding-bottom: clamp(60px, calc(var(--sc-space-unit) * 8.6), 120px);
}

/* Horizontal (left/right) padding */
.sc-px-12 {
    padding-left: clamp(8.5px, calc(var(--sc-space-unit) * 0.86), 12px);
    padding-right: clamp(8.5px, calc(var(--sc-space-unit) * 0.86), 12px);
}

.sc-px-15 {
    padding-left: clamp(11.3px, calc(var(--sc-space-unit) * 1.07), 15px);
    padding-right: clamp(11.3px, calc(var(--sc-space-unit) * 1.07), 15px);
}

.sc-px-20 {
    padding-left: clamp(14px, calc(var(--sc-space-unit) * 1.43), 20px);
    padding-right: clamp(14px, calc(var(--sc-space-unit) * 1.43), 20px);
}

.sc-px-25 {
    padding-left: clamp(17.5px, calc(var(--sc-space-unit) * 1.79), 25px);
    padding-right: clamp(17.5px, calc(var(--sc-space-unit) * 1.79), 25px);
}

.sc-px-30 {
    padding-left: clamp(20px, calc(var(--sc-space-unit) * 2.14), 30px);
    padding-right: clamp(20px, calc(var(--sc-space-unit) * 2.14), 30px);
}

.sc-px-40 {
    padding-left: clamp(25px, calc(var(--sc-space-unit) * 2.86), 40px);
    padding-right: clamp(25px, calc(var(--sc-space-unit) * 2.86), 40px);
}

.sc-gap-0 { gap: var(--sc-space-0); }
.sc-gap-5 { gap: var(--sc-space-5); }
.sc-gap-8 { gap: var(--sc-space-8); }
.sc-gap-10 { gap: var(--sc-space-10); }
.sc-gap-12 { gap: var(--sc-space-12); }
.sc-gap-15 { gap: var(--sc-space-15); }
.sc-gap-20 { gap: var(--sc-space-20); }
.sc-gap-30 { gap: var(--sc-space-30); }
.sc-gap-40 { gap: var(--sc-space-40); }
.sc-gap-50 { gap: var(--sc-space-50); }
.sc-gap-60 { gap: var(--sc-space-60); }
.sc-gap-80 { gap: var(--sc-space-80); }

/* Display */
.sc-hidden { display: none; }
.sc-block { display: block; }
.sc-inline-block { display: inline-block; }
.sc-flex { display: flex; }

/* Flexbox */
.sc-flex-col { flex-direction: column; }
.sc-flex-row { flex-direction: row; }

.sc-flex-align-center { align-items: center; }
.sc-flex-justify-center { justify-content: center; }
.sc-flex-justify-between { justify-content: space-between; }
.sc-flex-justify-around { justify-content: space-around; }

/* Scrollbar */
.sc-scroll-thin { /* Firefox */
  scrollbar-width: thin; 
  scrollbar-color: rgba(var(--sc-color-border-rgb), 0.45) var(--sc-color-bg-section);
  -webkit-overflow-scrolling: touch;
}

.sc-scroll-thin::-webkit-scrollbar { /* Chrome, Edge, Safari */
  width: 8px;
  height: 8px;
}

.sc-scroll-thin::-webkit-scrollbar-track {
  background: var(--sc-color-bg-section);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(var(--sc-color-bg-page-rgb), 0.04);
}

.sc-scroll-thin::-webkit-scrollbar-thumb {
  background: rgba(var(--sc-color-border-rgb), 0.45);
  border-radius: 999px;
  border: 2px solid var(--sc-color-bg-section); /* creates a small gap */
  min-height: 30px;
}

/* Thumb hover/active */
.sc-scroll-thin::-webkit-scrollbar-thumb:hover,
.sc-scroll-thin::-webkit-scrollbar-thumb:active,
.sc-scroll-thin:focus-within::-webkit-scrollbar-thumb {
  background: rgba(var(--sc-color-primary-rgb), 0.85);
  border-color: var(--sc-color-bg-section);
}


/* #endregion Utility Classes */

/* Responsive Grid Classes - auto-adjusting columns */
/* The "auto" grid classes Will auto-adjust columns based on available space */
/* The numbered grid classes will create a fixed maximum number of columns, but will still be responsive down to one column */
/* #region Responsive Grid System         */
/* ======================================== */

/* Base grid definitions */
.sc-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sc-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sc-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sc-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.sc-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Desktop adjustments for buddypanel state (1051px+) */
@media (min-width: 1051px) and (max-width: 1400px) {
    body.buddypanel-open .sc-grid-6 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    body.buddypanel-open .sc-grid-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1051px) and (max-width: 1300px) {
    body:has(#custom-subnav:not(.collapsed)) .sc-grid-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1051px) and (max-width: 1200px) {
    body:has(#custom-subnav:not(.collapsed)) .sc-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1051px) and (max-width: 1100px) {
    body.buddypanel-open .sc-grid-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body.buddypanel-open .sc-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.buddypanel-open .sc-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Both buddypanel and subnav open - desktop only */
@media (min-width: 1051px) and (max-width: 1400px) {
    body.buddypanel-open:has(#custom-subnav:not(.collapsed)) .sc-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1051px) and (max-width: 1300px) {
    body.buddypanel-open:has(#custom-subnav:not(.collapsed)) .sc-grid-5,
    body.buddypanel-open:has(#custom-subnav:not(.collapsed)) .sc-grid-4 { 
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
    }
}

/* Tablet range (800-1050px) - buddypanel can be open but doesn't affect layout much */
@media (min-width: 800px) and (max-width: 1050px) {
    body.buddypanel-open .sc-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.buddypanel-open .sc-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.buddypanel-open .sc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.buddypanel-open .sc-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Standard responsive breakpoints - override ALL specificity with !important below 800px */
@media (max-width: 1300px) {
    .sc-grid-6 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .sc-grid-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
    .sc-grid-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sc-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sc-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Below 800px - buddypanel is hidden, use !important to override any body.buddypanel-open rules */
@media (max-width: 799px) {
    .sc-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .sc-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .sc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .sc-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Mobile - use !important to ensure these always win */
@media (max-width: 600px) {
    .sc-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .sc-grid-5 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .sc-grid-4 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .sc-grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .sc-grid-2 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
}

/* #endregion Responsive Grid System */

/* #region Responsive Utilities           */
/* ======================================== */

/* Hide/Show at breakpoints */
@media (max-width: 768px) {
    .sc-hide-mobile { display: none !important; }
    .sc-show-mobile { display: block !important; }
}

@media (min-width: 769px) {
    .sc-hide-desktop { display: none !important; }
    .sc-show-desktop { display: block !important; }
}

@media (max-width: 1024px) {
    .sc-hide-tablet { display: none !important; }
    .sc-show-tablet { display: block !important; }
}

/* #endregion Responsive */

/* #region Simple Animations */
.sc-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.sc-fade-in.sc-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .sc-fade-in { opacity: 1; transform: none; }
    .sc-fade-in.sc-visible { transition: none; }
}
/* #endregion */


/* Content background box */
#content .content-bg {
    background: var(--sc-color-bg-base);
    border: 1px solid var(--sc-color-border);
    border-radius: var(--sc-radius-10);
    padding: 50px 55px;
}

@media screen and (max-width: 1050px) {
    body #content .content-bg {
        padding: 30px;
    }
}
@media (max-width: 799px) {
    body #content .content-bg {
        padding: 15px;
    }
}

.p-no-margin { margin-bottom: 0; }

body #content > .container:first-child {
    padding: 0;
}

/* Shadow in header */
#masthead:before {
    box-shadow: var(--sc-shadow-subnav);
}

body.bp-search aside.buddypanel {
    z-index: 614;
}