/* =========================================
   ESAR DIGITAL
   Base / Global Styles
   ========================================= */


/* ---------- Design Variables ---------- */

:root {

    /* =========================================
       ESAR DIGITAL BRAND COLORS
       ========================================= */

    --esar-navy: #071A33;
    --esar-gold: #FFCC00;


    /* =========================================
       DARK THEME
       ========================================= */

    --dark-bg: #071A33;
    --dark-bg-secondary: #0B2342;

    --dark-text: #FFFFFF;
    --dark-text-secondary: #B8C4D3;
    --dark-text-muted: #8796A8;

    --dark-border: rgba(255, 255, 255, 0.10);


    /* =========================================
       LIGHT THEME
       ========================================= */

    --light-bg: #F7F9FC;
    --light-bg-secondary: #FFFFFF;

    --light-text: #071A33;
    --light-text-secondary: #405066;
    --light-text-muted: #64748B;

    --light-border: #E2E8F0;


    /* =========================================
       GLOBAL
       ========================================= */

    --white: #FFFFFF;
    --black: #000000;


    /* =========================================
       TYPOGRAPHY
       ========================================= */

    --text-primary: var(--light-text);
    --text-secondary: var(--light-text-secondary);
    --text-muted: var(--light-text-muted);


    /* =========================================
       LAYOUT
       ========================================= */

    --container-width: 1240px;

    --section-padding: 90px;


    /* =========================================
       UI
       ========================================= */

    --border-dark: var(--dark-border);

    --transition: 0.3s ease;

}


/* ---------- Reset ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;

    font-family: Arial, Helvetica, sans-serif;

    color: var(--text-dark);
    background: var(--bg-white);

    line-height: 1.6;
}


img {
    max-width: 100%;
    height: auto;
    display: block;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
input,
textarea,
select {
    font: inherit;
}


/* ---------- Container ---------- */

.container {
    width: min(
        calc(100% - 40px),
        var(--container-width)
    );

    margin-inline: auto;
}


/* ---------- Typography ---------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    line-height: 1.2;
}


p {
    margin-top: 0;
}


/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 13px 26px;

    border: 1px solid transparent;
    border-radius: var(--radius-small);

    font-weight: 600;

    cursor: pointer;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition);
}


.btn:hover {
    transform: translateY(-2px);
}


.btn-primary {
    color: var(--esar-dark);
    background: var(--esar-gold);
}


.btn-primary:hover {
    background: var(--esar-yellow);
}


/* ---------- WordPress ---------- */

.wp-caption {
    max-width: 100%;
}


.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* =========================================
   SECTION THEMES
   ========================================= */

   .section {
    width: 100%;

    padding: var(--section-padding) 0;
}


/* =========================================
   DARK SECTION
   ========================================= */

.section--dark {
    background: var(--dark-bg);

    color: var(--dark-text);
}


.section--dark .section-heading__title {
    color: var(--dark-text);
}


.section--dark .section-heading__description {
    color: var(--dark-text-secondary);
}


.section--dark .section-heading__eyebrow {
    color: var(--esar-gold);
}


/* =========================================
   LIGHT SECTION
   ========================================= */

.section--light {
    background: var(--light-bg);

    color: var(--light-text);
}


.section--light .section-heading__title {
    color: var(--light-text);
}


.section--light .section-heading__description {
    color: var(--light-text-secondary);
}


.section--light .section-heading__eyebrow {
    color: var(--esar-navy);
}


/* =========================================
   WHITE SECTION
   ========================================= */

.section--white {
    background: var(--white);

    color: var(--light-text);
}