/*
 * Theme base layer (hybrid mode)
 * - Static, editable CSS rules
 * - Reads dynamic values from CSS variables set in includes/header.php
 */

.uk-button,
.uk-icon-button {
    border-radius: var(--ui-radius-button) !important;
}

.uk-button-primary {
    background-color: var(--primary-color) !important;
    color: var(--ui-button-primary-text) !important;
    border-radius: var(--ui-radius-button) !important;
}

.uk-button-secondary {
    background-color: var(--secondary-color) !important;
    color: var(--ui-button-secondary-text) !important;
    border-radius: var(--ui-radius-button) !important;
}

.uk-heading-bullet::before {
    display: var(--heading-marker-h3-display, none);
    content: "";
    position: absolute;
    left: calc(-1 * var(--heading-marker-width, 14px) - 12px);
    width: var(--heading-marker-width, 14px);
    height: var(--heading-marker-height, 42px);
    background: var(--primary-color) !important;
    border-left: 0 !important;
    border-radius: var(--heading-marker-radius, 3px);
    transform: var(--heading-marker-transform, none);
    top: calc(50% - (var(--heading-marker-height, 42px) / 2));
    vertical-align: middle;
}

h1::before {
    display: var(--heading-marker-h1-display, none);
    content: "";
    position: absolute;
    left: calc(-1 * var(--heading-marker-width, 14px) - 12px);
    width: var(--heading-marker-width, 14px);
    height: var(--heading-marker-height, 42px);
    background: var(--primary-color) !important;
    border-left: 0 !important;
    border-radius: var(--heading-marker-radius, 3px);
    transform: var(--heading-marker-transform, none);
    top: calc(50% - (var(--heading-marker-height, 42px) / 2));
    vertical-align: middle;
}

h2::before {
    display: var(--heading-marker-h2-display, none);
    content: "";
    position: absolute;
    left: calc(-1 * var(--heading-marker-width, 14px) - 12px);
    width: var(--heading-marker-width, 14px);
    height: var(--heading-marker-height, 42px);
    background: var(--primary-color) !important;
    border-left: 0 !important;
    border-radius: var(--heading-marker-radius, 3px);
    transform: var(--heading-marker-transform, none);
    top: calc(50% - (var(--heading-marker-height, 42px) / 2));
    vertical-align: middle;
}

h3::before {
    display: var(--heading-marker-h3-display, none);
    content: "";
    position: absolute;
    left: calc(-1 * var(--heading-marker-width, 14px) - 12px);
    width: var(--heading-marker-width, 14px);
    height: var(--heading-marker-height, 42px);
    background: var(--primary-color) !important;
    border-left: 0 !important;
    border-radius: var(--heading-marker-radius, 3px);
    transform: var(--heading-marker-transform, none);
    top: calc(50% - (var(--heading-marker-height, 42px) / 2));
    vertical-align: middle;
}

h4::before {
    display: var(--heading-marker-h4-display, none);
    content: "";
    position: absolute;
    left: calc(-1 * var(--heading-marker-width, 14px) - 12px);
    width: var(--heading-marker-width, 14px);
    height: var(--heading-marker-height, 42px);
    background: var(--primary-color) !important;
    border-left: 0 !important;
    border-radius: var(--heading-marker-radius, 3px);
    transform: var(--heading-marker-transform, none);
    top: calc(50% - (var(--heading-marker-height, 42px) / 2));
    vertical-align: middle;
}

h5::before {
    display: var(--heading-marker-h5-display, none);
    content: "";
    position: absolute;
    left: calc(-1 * var(--heading-marker-width, 14px) - 12px);
    width: var(--heading-marker-width, 14px);
    height: var(--heading-marker-height, 42px);
    background: var(--primary-color) !important;
    border-left: 0 !important;
    border-radius: var(--heading-marker-radius, 3px);
    transform: var(--heading-marker-transform, none);
    top: calc(50% - (var(--heading-marker-height, 42px) / 2));
    vertical-align: middle;
}

h6::before {
    display: var(--heading-marker-h6-display, none);
    content: "";
    position: absolute;
    left: calc(-1 * var(--heading-marker-width, 14px) - 12px);
    width: var(--heading-marker-width, 14px);
    height: var(--heading-marker-height, 42px);
    background: var(--primary-color) !important;
    border-left: 0 !important;
    border-radius: var(--heading-marker-radius, 3px);
    transform: var(--heading-marker-transform, none);
    top: calc(50% - (var(--heading-marker-height, 42px) / 2));
    vertical-align: middle;
}

h1, h2, h3, h4, h5, h6 {
    position: relative;
}

.uk-button-default,
.uk-button-text,
.uk-button-link {
    border-radius: var(--ui-radius-button) !important;
}

.uk-input,
.uk-select,
.uk-textarea {
    border-radius: var(--ui-radius-input);
    border-width: var(--ui-border-width);
    border-style: var(--ui-border-style);
    border-color: var(--border-color);
}

.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus,
.uk-button:focus,
.uk-icon-button:focus {
    box-shadow: var(--ui-focus-ring);
    outline: none;
}

/* Fix for UIkit SVG icons collapsing to 0 width in certain flex wrappers due to max-width: 100% */
[uk-icon] svg, .uk-icon svg {
    max-width: none !important;
}