/**
 * @file
 * Icon styles and color variations for the Baylor United 2 theme.
 *
 * This file defines CSS custom properties for icon colors and backgrounds,
 * including FontAwesome (FA) primary/secondary colors and opacity.
 * It provides contextual overrides based on section backgrounds and component styles.
 */

:root {
    /* Default icon color using the current text color */
    --color-icon: currentColor;
    /* Default background for icons (none) */
    --bg-icon: transparent;
    /* Default hover color for icons matches the base icon color */
    --color-icon-hover: var(--color-icon);
    /* Default background color for icons on hover (none) */
    --bg-icon-hover: transparent;
    /* FontAwesome primary color set to Baylor Green */
    --fa-primary-color: var(--baylorGreen);
    /* Full opacity for FontAwesome secondary layer */
    --fa-secondary-opacity: 1;
    /* FontAwesome secondary color set to University Gold */
    --fa-secondary-color: var(--universityGold);
}

/**
 * Gold Background Context
 *
 * When icons are placed within a gold background section, adjust colors
 * for better contrast and brand alignment.
 */
.section__background--gold {
    /* Use Baylor Green for icons on gold backgrounds */
    --color-icon: var(--baylorGreen);
    /* Maintain Green on hover */
    --color-icon-hover: var(--baylorGreen);
    /* Use White for FA secondary elements for clarity */
    --fa-secondary-color: var(--white);
}

/**
 * Dark and Saturated Background Contexts
 *
 * Targets green/charcoal backgrounds, navigation bars, and specific dark-themed widgets/cards.
 * These contexts require high-contrast gold icons.
 */
.section__background--green,
.section__background--charcoal,
.uiTopNav,
.uiPrimaryNav,
.uiWidget-box_touts[data-show_image="1"],
[data-style="card_green"],
[data-style="panel_dark"],
/* Targets the first item in a light panel if an introduction is present */
[data-style="panel_light"][data-show_introduction="1"] .uiWidget-item:first-child {
    /* Use University Gold for primary icon elements */
    --color-icon: var(--universityGold);
    /* Keep Gold on hover */
    --color-icon-hover: var(--color-icon);
    /* Ensure FA primary color is Gold */
    --fa-primary-color: var(--universityGold);
    /* Lower opacity for FA secondary elements to create a subtle two-tone effect */
    --fa-secondary-opacity: .4;
}

/**
 * Navigation Sub-menu Context
 *
 * Overrides for menus that are not top-level within the top navigation bar.
 */
.uiTopNav .not-top-level-menu {
    /* Use White for both FA primary and secondary layers in sub-menus */
    --fa-primary-color: var(--white);
    --fa-secondary-color: var(--white);
    /* Keep secondary layer at lower opacity */
    --fa-secondary-opacity: .4;
}

/**
 * Light Card Contexts
 *
 * Default icon colors for white and gray cards.
 */
[data-style="card_white"],
[data-style="card_gray"] {
    /* Use Baylor Green for primary FA color */
    --fa-primary-color: var(--baylorGreen);
    /* Full opacity for the secondary FA layer */
    --fa-secondary-opacity: 1;
    /* Use University Gold for the secondary FA layer */
    --fa-secondary-color: var(--universityGold);
}

/**
 * Image and Light Panel Contexts
 *
 * Handles cases where images are shown without gradients, light panels,
 * and specific first-item overrides in dark panels.
 */
[data-show_image="1"] [data-use_gradient="0"],
[data-style="panel_light"],
[data-style="panel_dark"][data-show_introduction="1"] .uiWidget-item:first-child {
    /* Standard Baylor Green for primary icon elements */
    --fa-primary-color: var(--baylorGreen);
    /* Full opacity for secondary layer */
    --fa-secondary-opacity: 1;
    /* Use White for the secondary FA layer */
    --fa-secondary-color: var(--white);
}

/* Circle styling for icon touts */
/* Default circle style for standard backgrounds (white, charcoal, green) */
[data-style="icon_tout_circle"] {
    /* Baylor Green icon on a Gold circular background */
    --color-icon: var(--baylorGreen);
    --bg-icon: var(--universityGold);
    /* Invert on hover: icon color becomes background color (Gold) */
    --color-icon-hover: var(--bg-icon);
    /* Make background transparent on hover */
    --bg-icon-hover: transparent;
    /* FA specific colors for the circle context */
    --fa-primary-color: var(--baylorGreen);
    --fa-secondary-opacity: 1;
    --fa-secondary-color: var(--white);
}

/**
 * Contextual Overrides for Circle Icons
 */

/* Prevent hover color change on white backgrounds */
.section__background--white [data-style="icon_tout_circle"] {
    --color-icon-hover: var(--color-icon);
}

/* Update FA secondary color on hover within gold backgrounds */
.section__background--gold [data-style="icon_tout_circle"] a:hover {
    --fa-secondary-color: var(--white);
}

/* Update FA secondary color on hover within white backgrounds */
.section__background--white [data-style="icon_tout_circle"] a:hover {
    --fa-secondary-color: var(--universityGold);
}

/* Contrast adjustments for circle icons on green or charcoal backgrounds on hover */
.section__background--green [data-style="icon_tout_circle"] a:hover,
.section__background--charcoal [data-style="icon_tout_circle"] a:hover {
    /* Switch to Gold for better visibility on dark backgrounds */
    --color-icon: var(--universityGold);
    --fa-primary-color: var(--universityGold);
    --fa-secondary-color: var(--universityGold);
    /* Subtle opacity for the secondary layer */
    --fa-secondary-opacity: .4;
}

/* Base styles for circle icons on gold or gray backgrounds */
.section__background--gold [data-style="icon_tout_circle"],
.section__background--gray [data-style="icon_tout_circle"] {
    /* Baylor Green icon on a White circular background */
    --color-icon: var(--baylorGreen);
    --bg-icon: var(--white);
    /* No color change on hover */
    --color-icon-hover: var(--color-icon);
    /* Background disappears on hover */
    --bg-icon-hover: transparent;
    /* FA colors for these specific backgrounds */
    --fa-primary-color: var(--baylorGreen);
    --fa-secondary-opacity: 1;
    --fa-secondary-color: var(--universityGold);
}

/* end circle stylings */