/**
 * Plutonium CMS - Root CSS Variables
 * Tobias Crichton October 2025. V1
 * This file defines the core design system values for both the CMS admin
 * and front-end themes. All colors use HSLA for easy customization.
 * 
 * Color System:
 * - Base colors: 12 hues in 30° increments around the color wheel
 * - modify to match client brand specs. Almost all colors should fit these generic names
 * - To match Pantone colors, use pantone Color Bridge RGB values, and then convert to HSL. Note HSB is not the same!
 * - Light variant: 50% saturation, 100% lightness
 * - Dark variant: 100% saturation, 20% lightness
 */

/* ============================================================================
   GOOGLE FONTS IMPORT
   Must be at top of file before any CSS rules
   Remember to  update the matching root typography styles to match what is made available here.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* Material Symbols Outlined - Icon Font */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');



:root {
    /* ========================================================================
       COLOR PALETTE - Primary Colors (30° increments)
       NOTE: Colors are defined as HSL values WITHOUT alpha channel.
       Apply alpha when using: color: hsla(var(--Red), 0.8);
       ======================================================================== */
    
    /* Red (0° / 360°) */
    --Red: 0, 100%, 50%;
    --RedLight: 0, 50%, 50%;
    --RedDark: 0, 100%, 20%;
    
    /* Orange (30°) */
    --Orange: 30, 100%, 50%;
    --OrangeLight: 30, 50%, 50%;
    --OrangeDark: 30, 100%, 20%;
    
    /* Yellow (60°) */
    --Yellow: 60, 100%, 50%;
    --YellowLight: 60, 50%, 50%;
    --YellowDark: 60, 100%, 20%;
    
    /* Chartreuse (90°) */
    --Chartreuse: 90, 100%, 50%;
    --ChartreuseLight: 90, 50%, 50%;
    --ChartreuseDark: 90, 100%, 20%;
    
    /* Green (120°) */
    --Green: 120, 100%, 50%;
    --GreenLight: 120, 50%, 50%;
    --GreenDark: 120, 100%, 20%;
    
    /* Spring Green (150°) */
    --SpringGreen: 150, 100%, 50%;
    --SpringGreenLight: 150, 50%, 50%;
    --SpringGreenDark: 150, 100%, 20%;
    
    /* Cyan (180°) */
    --Cyan: 180, 100%, 50%;
    --CyanLight: 180, 50%, 50%;
    --CyanDark: 180, 100%, 20%;
    
    /* Azure (210°) */
    --Azure: 202, 83%, 37%;
    --AzureLight: 202, 83%, 57%;
    --AzureDark: 202, 100%, 20%;
    
    /* Blue (240°) */
    --Blue: 232, 47%, 46%;
    --BlueLight: 232, 25%, 68%;
    --BlueDark: 232, 100%, 8%;
    
    /* Violet (270°) */
    --Violet: 299, 58.2%, 30%;
    --VioletLight: 299, 50%, 60%;
    --VioletDark: 299, 100%, 20%;
    
    /* Magenta (300°) */
    --Magenta: 300, 100%, 50%;
    --MagentaLight: 300, 50%, 50%;
    --MagentaDark: 300, 100%, 20%;
    
    /* Rose (330°) */
    --Rose: 335, 100%, 60.8%;
    --RoseLight: 335, 50%, 84%;
    --RoseDark: 335, 100%, 30%;


    /* ========================================================================
       GRAYSCALE PALETTE
       ======================================================================== */
    
    --White: 0, 0%, 100%;
    --Black: 285, 50%, 5%;
    
    /* Grayscale in 10% increments */
    --Gray10: 0, 0%, 10%;
    --Gray20: 0, 0%, 20%;
    --Gray30: 0, 0%, 30%;
    --Gray40: 0, 0%, 40%;
    --Gray50: 0, 0%, 50%;
    --Gray60: 0, 0%, 60%;
    --Gray70: 0, 0%, 70%;
    --Gray80: 0, 0%, 80%;
    --Gray90: 0, 0%, 90%;
    --Gray95: 0, 0%, 95%;
    
    
    /* ========================================================================
       SEMANTIC COLOR MAPPINGS
       Use these for consistent UI elements across admin and front-end
       Apply with hsla(): background: hsla(var(--ColorBrand), 1);
       ======================================================================== */
    
    /* Brand Colors - Azure Theme */
    --ColorBrand: var(--Violet);
    --ColorBrandLight: var(--VioletLight);
    --ColorBrandDark: var(--VioletDark);
    --ColorBrand2: var(--Azure);
    --ColorBrand2Light: var(--AzureLight);
    --ColorBrand2Dark: var(--AzureDark);
    --ColorBrand3: var(--Rose);
    --ColorBrand3Light: var(--RoseLight);
    --ColorBrand3Dark: var(--RoseDark);
    --ColorBrand4: var(--Gray40);
    --ColorBrand4Light: var(--Gray60);
    --ColorBrand4Dark: var(--Gray20);
    --ColorBrand5: var(--Orange);
    --ColorBrand5Light: var(--OrangeLight);
    --ColorBrand5Dark: var(--OrangeDark);

    /* UI State Colors */
    --ColorPrimary: var(--Violet);
    --ColorSecondary: var(--BlueLight);
    --ColorSuccess: var(--Green);
    --ColorDanger: var(--Red);
    --ColorWarning: var(--Orange);
    --ColorInfo: var(--Cyan);
    
    /* Text Colors */
    --ColorTextPrimary: var(--Gray10);
    --ColorTextSecondary: var(--Gray50);
    --ColorTextMuted: var(--Gray60);
    --ColorTextInverse: var(--White);
    
    /* Background Colors */
    --ColorBgPrimary: var(--White);
    --ColorBgSecondary: var(--Gray95);
    --ColorBgTertiary: var(--Gray90);
    --ColorBgDark: var(--Gray10);
    
    /* Border Colors */
    --ColorBorder: var(--ColorBrandDark);
    --ColorBorderLight: var(--Gray90);
    --ColorBorderDark: var(--Gray60);
    
    
    /* ========================================================================
       TYPOGRAPHY
       Google Fonts imported at top of file (required by CSS spec)
       ======================================================================== */
    
    /* Font Families */
    --FontFamily: 'Work Sans', sans-serif;
    --FontFamilyMono: "Courier New", Courier, monospace;
    --FontFamilyHeading: 'Playfair Display', serif;
    
    /* Font Size Scale System
       Adjust --FontSizeMultiplier to scale all typography up or down
       1.0 = standard (16px base), 0.8 = compact (12.8px base), 1.2 = large (19.2px base) */
    --FontSizeMultiplier: 1.2;
    
    /* Font Sizes - Base is 1rem, others are calculated relative to base */
    --FontSizeBase: 1rem;        /* Default: 16px) */
    --FontSizeXS: calc(0.75rem * var(--FontSizeMultiplier));       /* 0.75x base */
    --FontSizeSM: calc(0.875rem * var(--FontSizeMultiplier));      /* 0.875x base */
    --FontSizeLG: calc(1.25rem * var(--FontSizeMultiplier));       /* 1.25x base */
    --FontSizeXL: calc(1.75rem * var(--FontSizeMultiplier));        /* 1.75x base */
    --FontSize2XL: calc(2rem * var(--FontSizeMultiplier));         /* 2x base */
    --FontSize3XL: calc(2.5rem * var(--FontSizeMultiplier));       /* 2.5x base */
    --FontSize4XL: calc(3rem * var(--FontSizeMultiplier));         /* 3x base */
    
    /* Font Weights */
    --FontWeightLight: 300;
    --FontWeightNormal: 400;
    --FontWeightMedium: 500;
    --FontWeightSemibold: 600;
    --FontWeightBold: 700;
    --FontWeightExtrabold: 800;
    
    /* Line Heights */
    --LineHeightTight: 1;
    --LineHeightNormal: 1.1;
    --LineHeightRelaxed: 1.3;
    
    
    /* ========================================================================
       SPACING SYSTEM
       Based on 0.25rem (4px) increments
       ======================================================================== */
    
    --Space0: 0;
    --Space1: 0.25rem;    /* 4px */
    --Space2: 0.5rem;     /* 8px */
    --Space3: 0.75rem;    /* 12px */
    --Space4: 1rem;       /* 16px */
    --Space5: 1.25rem;    /* 20px */
    --Space6: 1.5rem;     /* 24px */
    --Space8: 2rem;       /* 32px */
    --Space10: 2.5rem;    /* 40px */
    --Space12: 3rem;      /* 48px */
    --Space16: 4rem;      /* 64px */
    --Space20: 5rem;      /* 80px */
    --Space24: 6rem;      /* 96px */
    
    
    /* ========================================================================
       BORDER RADIUS
       ======================================================================== */
    
    --RadiusNone: 0;
    --RadiusSM: 0.125rem;   /* 2px */
    --RadiusBase: 0.25rem;  /* 4px */
    --RadiusMD: 0.375rem;   /* 6px */
    --RadiusLG: 0.5rem;     /* 8px */
    --RadiusXL: 0.75rem;    /* 12px */
    --Radius2XL: 1rem;      /* 16px */
    --RadiusFull: 9999px;   /* Pill shape */
    
    
    /* ========================================================================
       SHADOWS
       ======================================================================== */
    
    --ShadowSM: 0 1px 2px 0 hsla(var(--Black), 0.5);
    --ShadowBase: 0 1px 3px 0 hsla(var(--Black), 0.5);
    --ShadowMD: 0 4px 6px -1px hsla(var(--Black), 0.15);
    --ShadowLG: 0 10px 15px -3px hsla(var(--Black), 0.5);
    --ShadowXL: 0 20px 25px -5px hsla(var(--Black), 0.5);
    --Shadow2XL: 0 25px 50px -12px hsla(var(--Black), 0.5);
    --ShadowInner: inset 0 2px 4px 0 hsla(var(--Black), 0.5);
    --ShadowNone: none;
    
    
    /* ========================================================================
       Z-INDEX SCALE
       Consistent layering system
       ======================================================================== */
    
    --ZIndexBase: 0;
    --ZIndexDropdown: 1000;
    --ZIndexSticky: 1020;
    --ZIndexFixed: 1030;
    --ZIndexModalBackdrop: 1040;
    --ZIndexModal: 1050;
    --ZIndexPopover: 1060;
    --ZIndexTooltip: 1070;
    
    
    /* ========================================================================
       TRANSITIONS
       ======================================================================== */
    
    --TransitionFast: 150ms ease-in-out;
    --TransitionBase: 300ms ease-in-out;
    --TransitionSlow: 500ms ease-in-out;
    
    
    /* ========================================================================
       BREAKPOINTS (for reference in media queries)
       Note: CSS custom properties don't work in media queries,
       but these are here for documentation
       ======================================================================== */
    
    --BreakpointXS: 0;
    --BreakpointSM: 576px;
    --BreakpointMD: 768px;
    --BreakpointLG: 992px;
    --BreakpointXL: 1200px;
    --Breakpoint2XL: 1400px;
}

/* ============================================================================
   BASE ELEMENT STYLES
   Consistent typography for CKEditor and front-end
   ============================================================================ */

/* Ensure all elements use border-box by default */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Body/Global Defaults */
body {
    font-family: var(--FontFamilyHeading);
    font-size: var(--FontSizeBase);
    line-height: var(--LineHeightNormal);
    color: hsla(var(--ColorTextPrimary), 1);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--FontFamilyHeading);
    font-weight: var(--FontWeightBold);
    line-height: var(--LineHeightTight);
    margin-top: 0;
    color: hsla(var(--ColorTextPrimary), 1);
}

h1 {
    font-size: var(--FontSize4XL);
    margin-top: var(--Space6);
    margin-bottom: var(--Space6);
}

h2 {
    font-size: var(--FontSize2XL);
    font-weight: var(--FontWeightMedium);
    margin-top: var(--Space8);
    margin-bottom: var(--Space4) !important;
}

h3 {
    font-weight: var(--FontWeightNormal);
    font-size: var(--FontSizeXL);
    margin-top: var(--Space2);
    margin-bottom: var(--Space2);
}

h4 {
    font-size: var(--FontSizeBase);
    font-weight: var(--FontWeightSemibold);
    line-height: var(--LineHeightRelaxed);
}

h5 {
    font-size: var(--FontSizeLG);
}

h6 {
    font-size: var(--FontSizeBase);
    line-height: var(--LineHeightRelaxed);
    font-weight: var(--FontWeightSemibold);
}

/* Paragraphs */
p {
    font-family: var(--FontFamilyHeading);
    font-size: var(--FontSizeBase);
    margin-top: 0;
    margin-bottom: var(--Space4);
    line-height: var(--LineHeightRelaxed);
    text-align: justify;
}
@media screen and (max-width: 768px) {
    h1 {
        font-size: calc(var(--FontSize4XL) * 0.75);
    }
    p {
        font-size: calc(var(--FontSizeBase) * 1.1);
    }
}

p:last-child {
    margin-bottom: 0;
}

/* Lead/Intro Paragraph */
p.lead {
    font-size: var(--FontSizeLG);
    line-height: var(--LineHeightRelaxed);
    margin-bottom: var(--Space6);
    color: hsla(var(--ColorTextPrimary), 0.9);
}

/* Links */
a {
    color: hsla(var(--ColorBrand), 1);
    text-decoration: none;
    transition: var(--TransitionFast);
}

a:hover {
    color: hsla(var(--ColorBrandDark), 1);
    text-decoration: underline;
}

a:focus {
    outline: 2px solid hsla(var(--ColorBrand), 0.5);
    outline-offset: 2px;
}

/* Lists */
ul, ol {
    margin-top: 0;
    margin-bottom: var(--Space4);
    padding-left: var(--Space6);
}

ul ul, ul ol, ol ul, ol ol {
    margin-bottom: 0;
    list-style-position: inside;
}

li {
    margin-bottom: var(--Space2);
    line-height: var(--LineHeightRelaxed);
    list-style-position: inside;
}

li:last-child {
    margin-bottom: 0;
}

/* Unordered lists */
ul {
    list-style-type: disc;
}

ul ul {
    list-style-type: circle;
}

ul ul ul {
    list-style-type: square;
}

/* Ordered lists */
ol {
    list-style-type: decimal;
}

ol ol {
    list-style-type: lower-alpha;
}

ol ol ol {
    list-style-type: lower-roman;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 0;
}

/* Inline images */
p img,
li img {
    display: inline-block;
    vertical-align: middle;
}

/* Blockquotes */
blockquote {
    margin: var(--Space6) 0;
    padding-left: var(--Space6);
    border-left: 4px solid hsla(var(--ColorBrand), 1);
    font-style: italic;
    color: hsla(var(--ColorTextSecondary), 1);
}

blockquote p:last-child {
    margin-bottom: 0;
}

/* Horizontal Rule */
hr {
    border: 0;
    border-top: 1px solid hsla(var(--Gray80), 1);
    margin: var(--Space8) 0;
    height: 0;
    display: block;
}

/* Strong/Bold */
strong, b {
    font-weight: var(--FontWeightBold);
}

/* Emphasis/Italic */
em, i {
    font-style: italic;
}

/* Small Text */
small {
    font-size: var(--FontSizeSM);
    color: hsla(var(--ColorTextMuted), 1);
}

/* Code */
code {
    font-family: var(--FontFamilyMono);
    font-size: 0.9em;
    padding: 2px 6px;
    background: hsla(var(--Gray90), 1);
    border-radius: var(--RadiusSM);
    color: hsla(var(--ColorDanger), 1);
}

pre {
    font-family: var(--FontFamilyMono);
    font-size: var(--FontSizeSM);
    padding: var(--Space4);
    background: hsla(var(--Gray95), 1);
    border-radius: var(--RadiusBase);
    overflow-x: auto;
    margin: var(--Space4) 0;
}

pre code {
    padding: 0;
    background: transparent;
    color: inherit;
}

/* Tables (Basic Styling) */
table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--Space6) 0;
}

th, td {
    padding: var(--Space3) var(--Space4);
    text-align: left;
    border-bottom: 1px solid hsla(var(--ColorBorder), 1);
}

th {
    font-weight: var(--FontWeightSemibold);
    background: hsla(var(--Gray95), 1);
    color: hsla(var(--ColorTextPrimary), 1);
}

tr:hover {
    background: hsla(var(--Gray95), 0.5);
}

/* Section */
section {
    margin-bottom: var(--Space12);
}

section:last-child {
    margin-bottom: 0;
}

/* Buttons */
button,
.button,
a.button,
input[type="submit"],
input[type="button"] {
    display: inline-block;
    background: linear-gradient(135deg, 
        hsla(var(--ColorBrand4), 1) 0%, 
        hsla(var(--ColorBrand4Dark), 1) 100%);
    color: hsla(var(--White), 1);
    border: none;
    padding: var(--Space3) var(--Space6);
    border-radius: var(--Radius2XL);
    font-weight: var(--FontWeightMedium);
    font-size: var(--FontSizeBase);
    text-decoration: none !important;
    text-align: center;
    cursor: pointer;
    transition: var(--TransitionFast);
    box-shadow: var(--ShadowSM);
}

button:hover,
.button:hover,
a.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--ShadowMD);
    color: hsla(var(--White), 1);
}

button:active,
.button:active,
a.button:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: translateY(0);
    box-shadow: var(--ShadowSM);
}

/* Override link states for buttons */
a.button:visited,
a.button:focus {
    color: hsla(var(--White), 1) !important;
    text-decoration: none !important;
    outline: none;
}

a.button:focus-visible {
    outline: 2px solid hsla(var(--ColorBrand), 0.5);
    outline-offset: 2px;
}

.buttonGray,
a.buttonGray{
    display: inline-block;
    margin: 4px;
    background:hsla(var(--ColorBrand4), 0.5);
    color: hsla(var(--White), 1);
    border: none;
    padding: var(--Space3) var(--Space6);
    border-radius: var(--Radius2XL);
    font-weight: var(--FontWeightMedium);
    font-size: var(--FontSizeBase);
    text-decoration: none !important;
    text-align: center;
    cursor: pointer;
    transition: all var(--TransitionBase);
    box-shadow: var(--ShadowSM);
    border: 1px solid hsla(var(--ColorBrand), 0);
}


.buttonGray:hover,
a.buttonGray:hover {
    background: 
        hsla(var(--ColorBrand4Dark), 1);
    transform: translateY(-2px);
    box-shadow: var(--ShadowMD);
    color: hsla(var(--White), 1);
    border: 1px solid hsla(var(--ColorBrand), 1);
}

.buttonGray:active,
a.buttonGray:active {
    transform: translateY(0);
    box-shadow: var(--ShadowSM);
}

.buttonBrand,
a.buttonBrand{
    margin: 4px;
    display: inline-block;
    background:
        hsla(var(--ColorBrandDark), 0.5);
    color: hsla(var(--White), 1);
    border: none;
    padding: var(--Space3) var(--Space6);
    border-radius: var(--Radius2XL);
    font-weight: var(--FontWeightMedium);
    font-size: var(--FontSizeBase);
    text-decoration: none !important;
    text-align: center;
    cursor: pointer;
    transition: all var(--TransitionBase);
    box-shadow: var(--ShadowSM);
    border: 1px solid hsla(var(--ColorBrand2), 0);
}


.buttonBrand:hover,
a.buttonBrand:hover {
    background: 
        hsla(var(--ColorBrandDark), 1);
    transform: translateY(-2px);
    box-shadow: var(--ShadowMD);
    color: hsla(var(--White), 1);
    border: 1px solid hsla(var(--ColorBrand2), 1);
}

.buttonBrand:active,
a.buttonBrand:active {
    transform: translateY(0);
    box-shadow: var(--ShadowSM);
}



/* ============================================================================
   TEXT COLOR CLASSES
   Used by CKEditor PlutoColor plugin and front-end content
   ============================================================================ */

/* Primary Spectrum Colors */
.Red { color: hsla(var(--Red), 1) !important; }
.Orange { color: hsla(var(--Orange), 1) !important; }
.Yellow { color: hsla(var(--Yellow), 1) !important; }
.Chartreuse { color: hsla(var(--Chartreuse), 1) !important; }
.Green { color: hsla(var(--Green), 1) !important; }
.SpringGreen { color: hsla(var(--SpringGreen), 1) !important; }
.Cyan { color: hsla(var(--Cyan), 1) !important; }
.Azure { color: hsla(var(--Azure), 1) !important; }
.Blue { color: hsla(var(--Blue), 1) !important; }
.Violet { color: hsla(var(--Violet), 1) !important; }
.Magenta { color: hsla(var(--Magenta), 1) !important; }
.Rose { color: hsla(var(--Rose), 1) !important; }

/* Grayscale */
.White { color: hsla(var(--White), 1) !important; }
.Gray20 { color: hsla(var(--Gray20), 1) !important; }
.Gray50 { color: hsla(var(--Gray50), 1) !important; }
.Gray70 { color: hsla(var(--Gray70), 1) !important; }
.Black { color: hsla(var(--Black), 1) !important; }

/* Brand Colors */
.ColorBrand { color: hsla(var(--ColorBrand), 1) !important; }
.ColorBrandLight { color: hsla(var(--ColorBrandLight), 1) !important; }
.ColorBrandDark { color: hsla(var(--ColorBrandDark), 1) !important; }
.ColorBrand2 { color: hsla(var(--ColorBrand2), 1) !important; }
.ColorBrand2Light { color: hsla(var(--ColorBrand2Light), 1) !important; }
.ColorBrand2Dark { color: hsla(var(--ColorBrand2Dark), 1) !important; }
.ColorBrand3 { color: hsla(var(--ColorBrand3), 1) !important; }
.ColorBrand3Light { color: hsla(var(--ColorBrand3Light), 1) !important; }
.ColorBrand3Dark { color: hsla(var(--ColorBrand3Dark), 1) !important; }
.ColorBrand4 { color: hsla(var(--ColorBrand4), 1) !important; }
.ColorBrand4Light { color: hsla(var(--ColorBrand4Light), 1) !important; }
.ColorBrand4Dark { color: hsla(var(--ColorBrand4Dark), 1) !important; }
.ColorBrand5 { color: hsla(var(--ColorBrand5), 1) !important; }
.ColorBrand5Light { color: hsla(var(--ColorBrand5Light), 1) !important; }
.ColorBrand5Dark { color: hsla(var(--ColorBrand5Dark), 1) !important; }

/* Semantic Colors */
.ColorSuccess { color: hsla(var(--ColorSuccess), 1) !important; }
.ColorWarning { color: hsla(var(--ColorWarning), 1) !important; }
.ColorDanger { color: hsla(var(--ColorDanger), 1) !important; }
.ColorInfo { color: hsla(var(--ColorInfo), 1) !important; }



/* ============================================================================
   LAYOUT UTILITY CLASSES
   Multi-column text layouts for CKEditor and front-end
   ============================================================================ */

/* Multi-column Text Layouts */
.twoColumnText {
    column-count: 2;
    column-gap: var(--Space6);
    column-rule: 1px solid hsla(var(--ColorBorder), 0.3);
}

/* Fix for floated images in multi-column layouts - they don't mix well with CSS columns */
.twoColumnText img.alignLeft,
.twoColumnText img.alignRight {
    float: none;
    display: block;
    margin: 0 auto var(--Space4);
}

.threeColumnText {
    column-count: 3;
    column-gap: var(--Space6);
    column-rule: 1px solid hsla(var(--ColorBorder), 0.3);
}

.fourColumnText {
    column-count: 4;
    column-gap: var(--Space4);
    column-rule: 1px solid hsla(var(--ColorBorder), 0.3);
}

/* Responsive column adjustments */
@media (max-width: 768px) {
    .twoColumnText,
    .threeColumnText,
    .fourColumnText {
        column-count: 1 !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .threeColumnText,
    .fourColumnText {
        column-count: 2 !important;
    }
}

/* Visibility Classes */
.show {
    display: block !important;
}

.hide {
    display: none !important;
}

/* Clear Fix / Section Break - prevents floated elements from breaking into this element */
.clear,
.clearFloat {
    clear: both;
    display: block;
}

.clear::after {
    content: "";
    display: table;
    clear: both;
}


/* ============================================================================
   ACCORDION / COLLAPSIBLE SECTIONS
   Click to show/hide content blocks
   ============================================================================ */

/* Accordion container */
.accordion {
    border: 1px solid hsla(var(--ColorBorder), 1);
    border-radius: var(--RadiusBase);
    margin: var(--Space4) 0;
    overflow: hidden;
}

/* Individual accordion item */
.accordion-item {
    border-bottom: 1px solid hsla(var(--ColorBorder), 1);
}

.accordion-item:last-child {
    border-bottom: none;
}

/* Accordion header/trigger */
.accordion-header {
    background: hsla(var(--ColorBgSecondary), 1);
    padding: var(--Space3) var(--Space4);
    cursor: pointer;
    user-select: none;
    transition: var(--TransitionFast);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: var(--FontWeightMedium);
}

.accordion-header:hover {
    background: hsla(var(--ColorBgTertiary), 1);
}

/* Accordion icon (using CSS arrow) */
.accordion-header::after {
    content: '▼';
    font-size: var(--FontSizeSM);
    transition: transform var(--TransitionFast);
    color: hsla(var(--ColorBrand), 1);
}

.accordion-item.active .accordion-header::after {
    transform: rotate(180deg);
}

/* Accordion content panel */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--TransitionBase) ease-out;
    background: hsla(var(--ColorBgPrimary), 1);
}

.accordion-item.active .accordion-content {
    max-height: 2000px; /* Large enough for most content */
    transition: max-height var(--TransitionBase) ease-in;
}

.accordion-content-inner {
    padding: var(--Space4);
}


/* ============================================================================
   IMAGE SIZING CLASSES
   Responsive image width controls
   ============================================================================ */

.img25 {
    max-width: 25%;
    height: auto;
}

.img50 {
    margin-right: var(--Space4);
    max-width: 50%;
    height: auto;
}

.img75 {
    max-width: 75%;
    height: auto;
}

.img100 {
    max-width: 100%;
    height: auto;
}

/* Make images responsive on mobile */
@media (max-width: 768px) {
    .img25,
    .img50,
    .img75 {
        max-width: 100% !important;
    }
}


/* ============================================================================
   ALIGNMENT CLASSES
   Contextual alignment for both images and text elements
   ============================================================================ */

/* Image Alignment (uses float for left/right, margin for center) */
img.alignLeft {
    float: left;
    margin: 0 var(--Space4) var(--Space4) 0;
    clear: left;
}

img.alignRight {
    float: right;
    margin: 0 0 var(--Space4) var(--Space4);
    clear: right;
}

img.alignCenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--Space4);
    float: none;
    clear: both;
}

/* Text Alignment (uses text-align) */
h1.alignLeft,
h2.alignLeft,
h3.alignLeft,
h4.alignLeft,
h5.alignLeft,
h6.alignLeft,
p.alignLeft,
div.alignLeft,
blockquote.alignLeft {
    text-align: left;
}

h1.alignRight,
h2.alignRight,
h3.alignRight,
h4.alignRight,
h5.alignRight,
h6.alignRight,
p.alignRight,
div.alignRight,
blockquote.alignRight {
    text-align: right;
}

h1.alignCenter,
h2.alignCenter,
h3.alignCenter,
h4.alignCenter,
h5.alignCenter,
h6.alignCenter,
p.alignCenter,
div.alignCenter,
blockquote.alignCenter {
    text-align: center;
}

/* Justify alignment for text blocks */
p.alignJustify,
div.alignJustify,
blockquote.alignJustify {
    text-align: justify;
}



/* ========================================
   IMAGE STYLE CLASSES
   ======================================== */

img.imgRoundedCorners {
    border-radius: var(--RadiusMD);
}

img.imgDropShadow {
    box-shadow: var(--ShadowLG);
}

img.imgBorder {
    border: 2px solid hsla(var(--ColorBorder), 1);
    background: hsla(var(--ColorBgPrimary), 1);
}

/* ========================================
   SECTION LAYOUT CLASSES
   ======================================== */

/* Base section - 100% width, CSS Grid, single column */
section,
.section {
    width: 100%;
}

/* Section background color variants using brand colors (dark variants) */

section.sectionBrand1, section.sectionBrand2,
section.sectionBrand3, section.sectionBrand4,
section.sectionBrand5, section.sectionPlain {
    width: 90%; 
    max-width: 1920px; 
    margin: 0 auto;
    border-radius: var(--RadiusXL);
    margin-bottom: var(--Space6);
    padding: var(--Space8) var(--Space6);
}
section.sectionPlain,
.section.sectionPlain {
    background: hsla(var(--White), 1);
}

section.sectionBrand1,
.section.sectionBrand1 {
    background: hsla(var(--ColorBrandDark), 1);
    color: hsla(var(--White), 1);
}

section.sectionBrand2,
.section.sectionBrand2 {
    background: hsla(var(--ColorBrand2Dark), 1);
    color: hsla(var(--White), 1);
}

section.sectionBrand3,
.section.sectionBrand3 {
    background: hsla(var(--ColorBrand3Dark), 1);
    color: hsla(var(--White), 1);
}

section.sectionBrand4,
.section.sectionBrand4 {
    background: hsla(var(--ColorBrand4Dark), 1);
    color: hsla(var(--White), 1);
}

section.sectionBrand5,
.section.sectionBrand5 {
    background: hsla(var(--ColorBrand5Dark), 1);
    color: hsla(var(--White), 1);
}

/* Light/white background section */
section.sectionLight,
.section.sectionLight {
    background: hsla(var(--White), 1);
    color: hsla(var(--ColorTextPrimary), 1);
}

/* Gray background section */
section.sectionGray,
.section.sectionGray {
    background: hsla(var(--Gray95), 1);
    color: hsla(var(--ColorTextPrimary), 1);
}
section.sectionWhite, .section.sectionWhite {
    position: relative;
    background: hsla(var(--White), 1);
    color: hsla(var(--ColorTextPrimary), 1);
    width: 90%;
    margin: 0 auto;
    max-width: 1920px;
    margin-bottom: var(--Space6);
    box-shadow: var(--ShadowBase);
    display: block; /* Override grid to allow float to work */
    padding: var(--Space8) var(--Space6);
    border-radius: var(--RadiusXL);
}

/* Ensure text elements inherit white color in dark sections */
section.sectionBrand1 h1,
section.sectionBrand1 h2,
section.sectionBrand1 h3,
section.sectionBrand1 h4,
section.sectionBrand1 h5,
section.sectionBrand1 h6,
section.sectionBrand1 p,
section.sectionBrand1 ul,
section.sectionBrand1 ol,
section.sectionBrand1 a,
section.sectionBrand2 h1,
section.sectionBrand2 h2,
section.sectionBrand2 h3,
section.sectionBrand2 h4,
section.sectionBrand2 h5,
section.sectionBrand2 h6,
section.sectionBrand2 p,
section.sectionBrand2 ul,
section.sectionBrand2 ol,
section.sectionBrand2 a,
section.sectionBrand3 h1,
section.sectionBrand3 h2,
section.sectionBrand3 h3,
section.sectionBrand3 h4,
section.sectionBrand3 h5,
section.sectionBrand3 h6,
section.sectionBrand3 p,
section.sectionBrand3 ul,
section.sectionBrand3 ol,
section.sectionBrand3 a,
section.sectionBrand4 h1,
section.sectionBrand4 h2,
section.sectionBrand4 h3,
section.sectionBrand4 h4,
section.sectionBrand4 h5,
section.sectionBrand4 h6,
section.sectionBrand4 p,
section.sectionBrand4 ul,
section.sectionBrand4 ol,
section.sectionBrand4 a,
section.sectionBrand5 h1,
section.sectionBrand5 h2,
section.sectionBrand5 h3,
section.sectionBrand5 h4,
section.sectionBrand5 h5,
section.sectionBrand5 h6,
section.sectionBrand5 p,
section.sectionBrand5 ul,
section.sectionBrand5 ol,
section.sectionBrand5 a {
    color: hsla(var(--White), 1);
}

/* ========================================
   SECTION GRID COLUMN VARIANTS
   Advanced layout options for sections
   ======================================== */

/* Two column grid */
section.sectionTwoColumn,
.section.sectionTwoColumn {
    grid-template-columns: 1fr 1fr;
    gap: var(--Space6);
}

/* Three column grid */
section.sectionThreeColumn,
.section.sectionThreeColumn {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--Space6);
}

/* Auto-fit grid - responsive columns using min-width calculation
   Creates as many columns as will fit, minimum 250px each
   Great for card layouts, feature blocks, etc. */
section.sectionAutoFit,
.section.sectionAutoFit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--Space6);
}

/* Mobile responsiveness - all multi-column sections become single column */
@media (max-width: 768px) {
    section.sectionTwoColumn,
    .section.sectionTwoColumn,
    section.sectionThreeColumn,
    .section.sectionThreeColumn,
    section.sectionAutoFit,
    .section.sectionAutoFit {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   PORTRAIT WITH GRADIENT BACKGROUND
   ============================================================================ */