/* =========================================================
   RAE Retail – FMI 2026 TotalStore Solutions
   Recreates the WordPress (Impreza) page layout and theme.
   ========================================================= */

/* Montserrat (SIL Open Font License), self-hosted so the page makes no third-party requests */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/montserrat-latin.woff2') format('woff2');
}

:root {
    --color-white: #fff;
    --color-blue: #5587ce;
    --color-green: #68b847;
    --color-bg-alt: #f2f4f7;
    --color-border: #e3e7f0;
    --color-text: #9c9c9c;

    --font-family: Montserrat, sans-serif;
    --site-content-width: 1140px;
    --site-border-radius: 0.3rem;
    --padding-inline: 2.5rem;

    --header-height: 120px;
    --header-sticky-height: 60px;
    --logo-height: 100px;
    --logo-sticky-height: 35px;

    --h1-font-size: calc(32px + 2vw);
    --h2-font-size: calc(22px + 1.3vw);
    --h3-font-size: calc(17px + .9vw);
    --h4-font-size: calc(13px + .7vw);
    --h5-font-size: calc(10px + .7vw);
    --h6-font-size: calc(12px + .5vw);
}

/* ---------- Base ---------- */

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

html {
    -webkit-text-size-adjust: 100%;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--color-bg-alt);
    -webkit-tap-highlight-color: rgba(104, 184, 71, .15);
}

@media (min-width: 1025px) {
    body { display: flex; flex-direction: column; min-height: 100vh; }
}

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

a {
    color: var(--color-blue);
    text-decoration: none;
    transition: background .2s, color .2s, opacity .2s, transform .2s;
}

b, strong { font-weight: 700; }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 1.5rem;
    padding-top: 1.5rem;
    color: var(--color-blue);
    font-family: inherit;
    font-weight: 400;
    line-height: 1.2;
}

h1 { font-size: var(--h1-font-size); line-height: 1; }
h2 { font-size: var(--h2-font-size); font-weight: 600; color: var(--color-green); }
h3 { font-size: var(--h3-font-size); }
h4 { font-size: var(--h4-font-size); }
h5 { font-size: var(--h5-font-size); }
h6 { font-size: var(--h6-font-size); }

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child,
h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6 { padding-top: 0; }

p, ul, ol { margin: 0 0 1.5rem; }
p:empty { display: none; }
ul { list-style-type: disc; margin-inline-start: 2.5rem; padding: 0; }
li { margin: 0 0 .5rem; }

/* Bullets spaced like separate paragraphs (matches the original WordPress markup) */
.list-spaced > li { margin-bottom: 1.5rem; }
.list-spaced > li:last-child { margin-bottom: 0; }

h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child,
p:last-child, ul:last-child, ol:last-child, li:last-child { margin-bottom: 0; }

.text-center { text-align: center; }
.text-blue { color: var(--color-blue); }
.text-green { color: var(--color-green); }

/* ---------- Page canvas ---------- */

.l-canvas {
    margin: 0 auto;
    width: 100%;
    flex-grow: 1;
    background: var(--color-white);
    color: var(--color-text);
}

/* ---------- Header ---------- */

.l-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 111;
}

.l-subheader {
    height: var(--header-height);
    padding-left: var(--padding-inline);
    padding-right: var(--padding-inline);
    background: var(--color-white);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
    transition: height .3s cubic-bezier(.78, .13, .15, .86);
}

.l-subheader-h {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1250px;
    height: 100%;
    margin: 0 auto;
}

.header-logo {
    height: var(--logo-height);
    transition: height .3s;
}

.header-logo img {
    display: block;
    width: auto;
    height: 100%;
}

.l-header.sticky .l-subheader { height: var(--header-sticky-height); }
.l-header.sticky .header-logo { height: var(--logo-sticky-height); }

/* ---------- Sections ---------- */

.l-section {
    position: relative;
    margin: 0 auto;
    padding-left: var(--padding-inline);
    padding-right: var(--padding-inline);
}

.l-section-h {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: var(--site-content-width);
}

.l-section.width_custom { --site-content-width: 1250px; }

.l-section.height_small { padding-top: 2rem; padding-bottom: 2rem; }
.l-section.height_medium { padding-top: 4rem; padding-bottom: 4rem; }
.l-section.height_large { padding-top: 6rem; padding-bottom: 6rem; }

/* First section clears the fixed header */
.l-main > .l-section:first-of-type > .l-section-h { padding-top: var(--header-height); }

/* ---------- Columns ---------- */

.g-cols {
    display: grid;
    gap: var(--columns-gap, 3rem);
}

.g-col {
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
}

.g-cols.cols_2 { grid-template-columns: repeat(2, 1fr); }
.g-cols.cols_2-3 { grid-template-columns: 2fr 3fr; }
.g-cols.cols_3-2 { grid-template-columns: 3fr 2fr; }
.g-cols.valign_middle > .g-col { justify-content: center; }
.g-cols.equal_height > .g-col > :only-child { height: 100%; }

@media (max-width: 1380px) {
    .g-cols.laptops-cols_2 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    .g-cols.tablets-cols_1 { grid-template-columns: 100%; }
    .g-cols.tablets-cols_1.reversed > .g-col:last-of-type { order: -1; }
}

@media (max-width: 600px) {
    .g-cols.mobiles-cols_1 { grid-template-columns: 100%; }
    .g-cols.mobiles-cols_1.reversed > .g-col:last-of-type { order: -1; }
    .g-cols:not([style*="--columns-gap"]) { gap: 1.5rem; }
}

/* ---------- Text blocks ---------- */

.section-title h3 { text-align: left; color: var(--color-green); }
.max-500 { max-width: 500px; }

/* ---------- Separators ---------- */

.w-separator {
    position: relative;
    clear: both;
    overflow: hidden;
    line-height: 0;
    height: 1.5rem;
}

.w-separator.size_small { height: 1.5rem; }
.w-separator.size_medium { height: 3rem; }
.w-separator.size_huge { height: 6rem; }
.w-separator.size_small.with_line { height: 4rem; }
.w-separator.size_medium.with_line { height: 6rem; }

.w-separator.with_line::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    margin-top: -1px;
    border-top: 2px solid var(--color-border);
    transform: translateX(-50%);
}

/* ---------- Images ---------- */

.w-image { max-width: 100%; }
.w-image img { vertical-align: top; object-fit: cover; }
.w-image.align_center { text-align: center; }
.w-image.align_left { text-align: left; }

/* Equal-height columns stretch a lone image to the column height (cropped via object-fit) */
.g-cols.equal_height > .g-col > .w-image:only-child img { height: 100%; }

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

.w-btn-wrapper { margin: .3rem 0; }
.w-btn-wrapper.align_none { display: inline-block; vertical-align: top; margin-inline-end: .6rem; }
.w-btn-wrapper.align_justify > .w-btn { width: 100%; }

.w-btn {
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding: 1em 2em;
    border-radius: .3em;
    background: var(--color-green);
    color: var(--color-white) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2 !important;
    text-align: center;
    transition: background .3s ease;
}

.w-btn:hover { background: var(--color-blue); }
.w-btn-label { display: inline-block; vertical-align: top; }

:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; }

/* ---------- Customer care box ---------- */

.care-box {
    position: relative;
    padding: 5%;
    background: var(--color-bg-alt);
}

.care-title {
    color: var(--color-green);
    font-weight: 400;
    text-wrap: balance;
}

/* ---------- Footer ---------- */

.l-footer {
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    background: var(--color-white);
    color: var(--color-text);
}

.footer-top {
    background: var(--color-bg-alt);
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.footer-logo { padding-bottom: 20px; }

.footer-bottom {
    background: linear-gradient(90deg, var(--color-green) 0%, var(--color-blue) 100%);
}

.footer-bottom-text {
    padding: 5px 0;
    color: var(--color-white);
    text-align: center;
}

/* ---------- Back to top ---------- */

.w-toplink {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    aspect-ratio: 1;
    margin: 15px;
    border-radius: var(--site-border-radius);
    background: rgba(0, 0, 0, .3);
    color: var(--color-white);
    transform: translate3d(0, 150%, 0);
    transition: transform .3s, background .3s;
}

.w-toplink:hover { color: var(--color-white); background: var(--color-green); }
.w-toplink.visible, .w-toplink:focus-visible { transform: translate3d(0, 0, 0); }

/* ---------- Responsive ---------- */

@media (max-width: 1380px) {
    :root { --logo-sticky-height: 30px; }
}

@media (max-width: 1024px) {
    :root { --logo-sticky-height: 25px; }

    .l-subheader { padding-left: 1rem; padding-right: 1rem; }

    .l-section.height_medium { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .footer-top { padding-top: 6vmax; padding-bottom: 6vmax; }

    .w-separator.size_small { height: 1rem; }
    .w-separator.size_medium { height: calc(1rem + 2.5vw); }
    .w-separator.size_huge { height: calc(1rem + 7.5vw); }
    .w-separator.size_small.with_line { height: calc(1.5rem + 2vw); }
    .w-separator.size_medium.with_line { height: calc(1.5rem + 4vw); }
}

@media (max-width: 600px) {
    :root {
        --padding-inline: 1.5rem;
        --header-height: 101px;
        --logo-height: 80px;
        --logo-sticky-height: 20px;
    }

    p { margin-bottom: 1rem; }
    h1, h2, h3, h4, h5, h6 { padding-top: 1rem; }

    .l-section.height_small,
    .l-section.height_medium { padding-top: 1.5rem; padding-bottom: 1.5rem; }

    .w-toplink { margin: 10px; }
}