/**
 * ELREDA Global Styles
 * --------------------------------------------------------------------------
 * Keep this file conservative. Astra and Elementor remain responsible for
 * typography/layout controls that they already handle well.
 */

html {
    /* Improves anchor navigation without affecting normal page scrolling. */
    scroll-behavior: smooth;
}

body {
    background: var(--elreda-bg);
    color: var(--elreda-text);
    font-family: var(--elreda-font-ar);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Make media responsive by default. */
img,
svg,
video {
    max-inline-size: 100%;
    block-size: auto;
}

/* Accessible keyboard focus. Do not remove outlines without replacement. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgb(10 85 162 / 28%);
    outline-offset: 3px;
}

/* Safe brand link utility for custom sections. */
.elreda-link {
    color: var(--elreda-blue);
    transition: color var(--elreda-transition);
}

.elreda-link:hover,
.elreda-link:focus-visible {
    color: var(--elreda-blue-hover);
}

/**
 * Optional content container for sections built outside Elementor.
 * Elementor sections do not need to use this class.
 */
.elreda-container {
    inline-size: min(100% - (2 * var(--elreda-gutter)), var(--elreda-content-width));
    margin-inline: auto;
}

/* Reusable surface/card utility for small custom components. */
.elreda-surface {
    background: var(--elreda-surface);
    border: 1px solid var(--elreda-border);
    border-radius: var(--elreda-radius-lg);
    box-shadow: var(--elreda-shadow-xs);
}

/* Utility for visually hidden but screen-reader-accessible labels. */
.elreda-sr-only {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}