/* ==========================================================================
   Suparat — the only stylesheet besides Bootstrap.
   Colours come from the logo. To change a colour, change it in :root below.
   ========================================================================== */

/* Thai font "Sarabun", stored in wwwroot/fonts (licence: fonts/OFL.txt). */
@font-face {
    font-family: "Sarabun";
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/sarabun-400-thai.woff2") format("woff2");
    unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
    font-family: "Sarabun";
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/sarabun-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}
@font-face {
    font-family: "Sarabun";
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/sarabun-700-thai.woff2") format("woff2");
    unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
    font-family: "Sarabun";
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/sarabun-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}

:root {
    --brand-red: #fd011a;        /* exact logo red: thin accents only */
    --brand-red-dark: #d90016;   /* buttons and links (readable with white text) */
    --brand-grey: #7f7f7f;       /* logo grey: borders and icons */
    --brand-grey-light: #f2f2f2; /* light section backgrounds */

    /* Tell Bootstrap to use our colours. */
    --bs-primary: var(--brand-red-dark);
    --bs-primary-rgb: 217, 0, 22;
    --bs-link-color: var(--brand-red-dark);
    --bs-link-color-rgb: 217, 0, 22;
    --bs-link-hover-color: #a80011;
    --bs-link-hover-color-rgb: 168, 0, 17;
    --bs-body-color: #333333;
    --bs-body-font-family: "Sarabun", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
    --bs-body-font-size: 1.0625rem; /* 17px */
    --bs-body-line-height: 1.7;
}

/* Bootstrap buttons don't read the variables above, so set them here. */
.btn-primary {
    --bs-btn-bg: var(--brand-red-dark);
    --bs-btn-border-color: var(--brand-red-dark);
    --bs-btn-hover-bg: #b80013;
    --bs-btn-hover-border-color: #b80013;
    --bs-btn-active-bg: #a80011;
    --bs-btn-active-border-color: #a80011;
}
.btn-outline-primary {
    --bs-btn-color: var(--brand-red-dark);
    --bs-btn-border-color: var(--brand-red-dark);
    --bs-btn-hover-bg: var(--brand-red-dark);
    --bs-btn-hover-border-color: var(--brand-red-dark);
    --bs-btn-active-bg: #a80011;
    --bs-btn-active-border-color: #a80011;
}
.btn-line { /* LINE green */
    --bs-btn-color: #fff;
    --bs-btn-bg: #06a73a;
    --bs-btn-border-color: #06a73a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #058a30;
    --bs-btn-hover-border-color: #058a30;
}

h1, h2, h3, h4, h5 { line-height: 1.4; }

/* ---------- Header and menu ---------- */
.site-header { border-top: 4px solid var(--brand-red); }
.site-header .nav-link { color: #333; font-weight: 700; }
.site-header .nav-link:hover,
.site-header .nav-link:focus { color: var(--brand-red-dark); }

/* ---------- Footer ---------- */
.site-footer { background: #2b2b2b; color: #e6e6e6; }
.site-footer a:not(.btn) { color: #fff; }
.site-footer hr { border-color: #555; }
.site-footer .btn-outline-secondary { /* map button: light outline on the dark footer */
    --bs-btn-color: #fff;
    --bs-btn-border-color: #bbb;
    --bs-btn-hover-color: #222;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
}

/* ---------- Home page ---------- */
.hero {
    background: #222 url("../images/home/slide-5-2340x850.jpg") center / cover no-repeat;
    color: #fff;
}
.hero-inner { background: rgba(0, 0, 0, .55); }
.section-grey { background: var(--brand-grey-light); }

/* ---------- Product pages: numbered feature lists ---------- */
.page-header { border-bottom: 3px solid var(--brand-red); padding-bottom: 1rem; }
.feature { margin-bottom: .75rem; }
.feature-no { font-weight: 700; color: var(--brand-red-dark); margin-right: .25rem; }
.feature-sub1 { margin-left: 1.5rem; }
.feature-sub2 { margin-left: 3rem; }
.feature strong { color: var(--brand-red-dark); }

/* Small screens: less indent so text keeps enough room. */
@media (max-width: 575.98px) {
    .feature-sub1 { margin-left: .75rem; }
    .feature-sub2 { margin-left: 1.5rem; }
}