/*
    break-small: 600px
    break-medium: 782px
    break-large: 960px
    break-wide: 1280px
*/

/* Define all CSS variables here, then refer to them in theme.json, should be imported into style.css */
:root {

    /* Accent Colors */
    --color-accent: #862483; /* LOCKED: Main Accent */
    --color-accent-stronger: #681765; /* Darker shade for hovers. */
    --color-accent-highlight: #b731b3; /* Added: Kept the cyan here if you need a "bright" pop */
    --color-accent-alt: #5fc6ae;

    /* Status Colors */
    --color-happy: #35C859;
    --color-mad: #D64545; /* Adjusted to be slightly more vibrant to match the blue */
    --color-less-mad: #fcabab;

    /* Palette - Greys (adjusted to "Cool Grey" to match your #2C3338 main text) */
    --color-light: #7E8890; /* Darkened from #aaaaaa for accessibility */
    --color-lighter: #DDE2E6; /* Slight blue tint added */
    --color-coolgray: #E1E4E8; /* Cool grey tint */

    /* Text Colors */
    --font-family-body: var(--wp--preset--font-family--lato, Lato, sans-serif);
    --font-family-heading: var(--wp--preset--font-family--kameron, Kameron, Georgia, serif);
    --font-body: var(--font-family-body);
    --font-heading: var(--font-family-heading);
    --heading-font-family: var(--font-family-heading);
    --heading-color: var(--color-text);
    --heading-font-weight: 600;
    --heading-line-height: 1.2;
    --heading-margin-block-start: 1.2em;
    --heading-margin-block-end: 0.65em;
    --h1-font-size: clamp(1.5rem, 1.43rem + 1.5vw, 2.7rem);
    --h1-line-height: 1.2;
    --h1-margin-block-end: clamp(1.25rem, 1rem + 0.75vw, 1.75rem);
    --h2-font-size: clamp(1.35rem, 1.15rem + 1vw, 2rem);
    --h2-line-height: 1.3;
    --h2-margin-block-end: var(--spacer-md);
    --h3-font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
    --h3-font-weight: 500;
    --h3-line-height: 1.4;
    --h3-margin-block-end: var(--spacer-sm);
    --h4-font-size: clamp(1.1rem, 1.05rem + 0.25vw, 1.25rem);
    --h4-font-weight: 500;
    --h4-line-height: 1.5;
    --h4-margin-block-end: var(--spacer-sm);
    --paragraph-font-family: var(--font-family-body);
    --paragraph-font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --paragraph-font-weight: 400;
    --paragraph-line-height: 1.6;
    --paragraph-color: var(--color-text-mid);
    --panel-paragraph-font-size: 1.1em;
    --panel-paragraph-line-height: 1.55;
    --panel-paragraph-color: var(--color-text);
    --paragraph-margin-block-start: 0;
    --paragraph-margin-block-end: 1.5em;
    --color-text: #3f213e; /* LOCKED: Main Text */
    --color-text-inv:#FFFFFF;
    --color-text-mid: #6c576b; /* Glenmore adjusted */
    --color-slate: #3B5060;
    --color-text-light: var(--color-light); /* Now passes WCAG AA for large text */
    --color-text-lighter: #9FA7AD; /* Adjusted for placeholders, visible but subtle */
    --color-text-placeholder: #BFC4CB;

    /* Borders & Backgrounds */
    --color-border: #979797;
    --color-border-light: var(--color-coolgray);
    --bg-color: #FFFFFF;
    --bg-color-med: #f0f2f5;
    --bg-color-inv: #383838;
    --bg-color-half-inv: #464646;
    --bg-color-light: #F6F7F8; /* Cool grey tint to match palette */
    --width-border: 1px;

    --radius-small:6px;
    --radius-med:10px;
    --radius-large:0.75rem;

    /* links and buttons */
    --color-link: var(--color-accent);
    --color-link-alt: var(--color-text);
    --color-button: transparent;
    --color-button-text: var(--color-text);
    --border-button: 2px solid var(--color-text);
    --radius-button: 999px;
    --padding-button: 1rem;
    --font-weight-button: 400;

    --color-button-primary: var(--color-accent); /* Usually main buttons use the base accent */
    --color-button-primary-hover: var(--color-accent-stronger); /* Added for hover states */
    --color-button-primary-text: var(--color-text-inv);
    --border-button-primary: 2px solid var(--color-accent);
    --color-button-alt-accent: var(--color-accent-alt);
    --color-button-alt-accent-hover: color-mix(in srgb, var(--color-accent-alt) 86%, black 14%);
    --color-button-alt-accent-text: var(--color-text-inv);
    --border-button-alt-accent: 2px solid var(--color-accent-alt);

    --color-button-secondary-text: var(--color-accent);
    --border-button-secondary: 2px solid var(--color-accent);
    --glenmore-card-button-inline-size: auto;
    --glenmore-card-button-min-inline-size: 10.5em;
    --glenmore-card-button-min-block-size: 2.2em;
    --glenmore-card-button-padding: 0.45em 1.2em;
    --glenmore-card-button-radius: 999px;
    --glenmore-card-button-font-size: 0.9em;
    --glenmore-card-button-font-weight: 700;
    --glenmore-card-button-line-height: 1.15;

    /* panels */
    --bg-color-panel: var(--bg-color);
    --border-panel: none;
    --shadow-panel: rgb(100 100 111 / 33%) 0px 0px 1rem 0.25rem;
    --hr-width: var(--width-border);

    /* gradients */
    --gradient-header: linear-gradient(108deg, #A73AA4 0%, #862483 100%);
    --gradient-accent: linear-gradient(180deg, #60C7AF 0%, #3EA58D 100%);
    --gradient-to-light-bg: linear-gradient(180deg, var(--bg-color) 0%, var(--bg-color-light) 100%);
    --gradient-footer: linear-gradient(180deg, #2C3338 95%, #1B1F20 100%);



    /* site dimensions */
    --site-min-width: 300px;
    --site-padding-width: 1rem;
    --vertical-block-offset: clamp(1.75rem, 8vw, 4rem);
    --narrow-content-padding: 1.5rem;

    --elevation-page: 0;
    --elevation-page-menus: 1000;
    --elevation-base: 2000;
    --elevation-low: 3000;
    --elevation-normal: 4000;
    --elevation-high: 5000;
    --elevation-very-high: 10000;

    /* content spacing */
    --spacer-sm: 0.5em;
    --spacer-md: 0.75em;
    --spacer-lg: 1.5em;
    --spacer-xl: 2em;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    min-width: var(--site-min-width);
    color: var(--color-text);
    color-scheme: light;
    background-color: var(--bg-color);
}

:where(.page-link.btn.btn-alt-accent, [data-type="link"].page-link.btn.btn-alt-accent, .btn.btn-alt-accent, button.btn-alt-accent) {
    background-color: var(--color-button-alt-accent);
    border: var(--border-button-alt-accent);
    color: var(--color-button-alt-accent-text);
}

:where(.page-link.btn.btn-alt-accent, [data-type="link"].page-link.btn.btn-alt-accent, .btn.btn-alt-accent, button.btn-alt-accent):hover,
:where(.page-link.btn.btn-alt-accent, [data-type="link"].page-link.btn.btn-alt-accent, .btn.btn-alt-accent, button.btn-alt-accent):focus-visible {
    background-color: var(--color-button-alt-accent-hover);
    border-color: var(--color-button-alt-accent-hover);
    color: var(--color-button-alt-accent-text);
    text-decoration: none;
}

/* Sticky header sizing */
:root {
    --ggc-page-header-height: 3rem;
    --sticky-header-height: var(--ggc-page-header-height);
}
/* Widescreen sizing */
@media (min-width: 960px) {
    :root {
        --ggc-page-header-height: 4.5rem;
        --sticky-header-height: var(--ggc-page-header-height);
    }
}

/* Widescreen sizing */
@media (min-width: 960px) {
    :root {
        --site-padding-width: 2.5rem;
        --narrow-content-padding: 6rem;
    }
}

/* Elevation Classes */
.elevation-page {z-index: var(--elevation-page);}
.elevation-page-menus {z-index: var(--elevation-page-menus);}
.elevation-base {z-index: var(--elevation-base);}
.elevation-low {z-index: var(--elevation-low);}
.elevation-normal {z-index: var(--elevation-normal);}
.elevation-high {z-index: var(--elevation-high);}
.elevation-very-high {z-index: var(--elevation-very-high);}

/* Standardized content margin and spacing */
.margin-none {margin: 0 !important;} /* Fixed 'none' to '0' */
.margin-top-sm { margin-top: var(--spacer-sm);}
.margin-bottom-sm {margin-bottom: var(--spacer-sm);}
.margin-left-sm {margin-left: var(--spacer-sm);}
.margin-right-sm {margin-right: var(--spacer-sm);}
.margin-top-md { margin-top: var(--spacer-md);}
.margin-bottom-md {margin-bottom: var(--spacer-md);}
.margin-left-md {margin-left: var(--spacer-md);}
.margin-right-md {margin-right: var(--spacer-md);}
.margin-top-lg { margin-top: var(--spacer-lg);}
.margin-bottom-lg {margin-bottom: var(--spacer-lg);}
.margin-left-lg {margin-left: var(--spacer-lg);}
.margin-right-lg {margin-right: var(--spacer-lg);}
.margin-top-xl { margin-top: var(--spacer-xl);}
.margin-bottom-xl {margin-bottom: var(--spacer-xl);}
.margin-left-xl {margin-left: var(--spacer-xl);}
.margin-right-xl {margin-right: var(--spacer-xl);}

.padding-none {padding: 0 !important;} /* Fixed 'none' to '0' */
.padding-top-sm { padding-top: var(--spacer-sm);}
.padding-bottom-sm {padding-bottom: var(--spacer-sm);}
.padding-left-sm {padding-left: var(--spacer-sm);}
.padding-right-sm {padding-right: var(--spacer-sm);}
.padding-top-md { padding-top: var(--spacer-md);}
.padding-bottom-md {padding-bottom: var(--spacer-md);}
.padding-left-md {padding-left: var(--spacer-md);}
.padding-right-md {padding-right: var(--spacer-md);}
.padding-top-lg { padding-top: var(--spacer-lg);}
.padding-bottom-lg {padding-bottom: var(--spacer-lg);}
.padding-left-lg {padding-left: var(--spacer-lg);}
.padding-right-lg {padding-right: var(--spacer-lg);}
.padding-top-xl { padding-top: var(--spacer-xl);}
.padding-bottom-xl {padding-bottom: var(--spacer-xl);}
.padding-left-xl {padding-left: var(--spacer-xl);}
.padding-right-xl {padding-right: var(--spacer-xl);}

.flex-justify-center {justify-content: center;}
.flex-align-center {align-items: center;}