/* SPS Trade – simplified site styles (on top of Bootstrap 5) */
:root {
    --sps-blue: #163f87;
    --sps-blue-dark: #133877;
    --sps-nav-link: #87a0ce;
    --sps-text: #101010;
    --bs-body-font-family: "PT Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --bs-body-color: var(--sps-text);
    --bs-link-color: var(--sps-blue);
    --bs-link-color-rgb: 22, 63, 135;
    --bs-link-hover-color: var(--sps-blue-dark);
    --bs-link-hover-color-rgb: 19, 56, 119;
}

body { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; padding: 2.5rem 0 3rem; }

h1, h2, h3, .brand, .hero h1, .page-title { font-family: "PT Serif", Georgia, "Times New Roman", serif; font-weight: 700; }

/* Header */
.site-header { background: var(--sps-blue); color: #fff; }
.site-header .brand { color: #fff; text-decoration: none; font-size: 2rem; line-height: 1.05; display: inline-block; letter-spacing: .02em; }
.header-info { font-size: .8125rem; line-height: 1.45; color: #dfe7f5; }
.header-info strong { color: #fff; font-weight: 400; }
.header-info a { color: #fff; text-decoration: none; }
.header-info a:hover { text-decoration: underline; }

/* Navigation */
.site-nav { background: var(--sps-blue-dark); padding-top: 0; padding-bottom: 0; }
.site-nav .nav-link {
    color: var(--sps-nav-link); font-weight: 700; text-transform: uppercase; font-size: .8125rem;
    letter-spacing: .03em; padding: .9rem 1rem !important;
}
.site-nav .navbar-nav .nav-item:first-child .nav-link { padding-left: 0 !important; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus, .site-nav .nav-link.active { color: #fff; }
.site-nav .navbar-toggler { border: 0; color: #fff; padding: .6rem 0; }
.site-nav .navbar-toggler:focus { box-shadow: none; }
@media (max-width: 767.98px) {
    .site-nav .navbar-nav .nav-link { padding-left: 0 !important; border-top: 1px solid rgba(255,255,255,.08); }
}

/* Hero (homepage) */
.hero {
    background-size: cover; background-position: center 78%;
    color: #fff; min-height: 360px; display: flex; align-items: center; position: relative;
}
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 70%); }
.hero .container { position: relative; }
.hero h1 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); max-width: 22em; margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,.35); }
@media (max-width: 991.98px) { .hero { min-height: 260px; } }

/* Map (contact page) */
.map-wrap { height: 340px; background: #e9ecef; }
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Content */
.page-title { font-size: 2rem; margin-bottom: 1.5rem; }
.content { font-size: 1rem; line-height: 1.65; }
.content ul { padding-left: 1.25rem; }
.content li { margin-bottom: .35rem; }
.signature { margin-top: 1.5rem; }
.breadcrumb { font-size: .875rem; margin-bottom: 1.25rem; }
.breadcrumb a { text-decoration: none; font-weight: 700; color: var(--sps-text); }

.btn-primary { --bs-btn-bg: var(--sps-blue); --bs-btn-border-color: var(--sps-blue); --bs-btn-hover-bg: var(--sps-blue-dark); --bs-btn-hover-border-color: var(--sps-blue-dark); --bs-btn-active-bg: var(--sps-blue-dark); }

.contact-item { display: flex; gap: .75rem; align-items: flex-start; }
.contact-item svg { color: var(--sps-blue); flex: none; margin-top: .2rem; }
.contact-item a { text-decoration: none; }

/* Contact form */
.sps-form fieldset { border-top: 1px solid #dee2e6; padding-top: 1.25rem; margin-bottom: 2rem; }
.sps-form legend { font-family: "PT Serif", Georgia, serif; font-weight: 700; font-size: 1.25rem; }
.sps-form .req { color: #b02a37; }
.sps-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sps-form .form-label { font-size: .9375rem; }

/* NumCaptcha: grid of numbered cells, the click path is drawn on a canvas on top of it */
.numcaptcha-task { display: block; max-width: 100%; }
.numcaptcha-area {
    box-sizing: content-box; position: relative; margin-top: .5rem;
    background: #9f9f9f; border-left: 1px dashed #fff; border-top: 1px dashed #fff;
}
.numcaptcha-area canvas { position: absolute; top: 0; left: 0; z-index: 3; opacity: .55; pointer-events: none; }
.numcaptcha-cell {
    box-sizing: content-box; position: absolute; z-index: 2; padding: 0; margin: 0; cursor: pointer;
    border: 0; border-right: 1px dashed #fff; border-bottom: 1px dashed #fff; border-radius: 0;
    background-color: transparent; background-repeat: no-repeat;
}

/* Footer */
.site-footer { border-top: 1px solid #e5e5e5; padding: 1.25rem 0; font-size: .8125rem; color: #555; }
.site-footer a { color: var(--sps-blue); text-decoration: none; }

/* Date picker in site colours */
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus { background: var(--sps-blue); border-color: var(--sps-blue); }
.flatpickr-day.today { border-color: var(--sps-blue); }
.sps-form input[data-datepicker] + input.form-control {
    background-color: #fff; cursor: pointer; padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath d='M4.5 0a.5.5 0 0 1 .5.5V1h6V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5ZM2 5v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5H2Zm2 2h2v2H4V7Zm3 0h2v2H7V7Zm3 0h2v2h-2V7Zm-6 3h2v2H4v-2Zm3 0h2v2H7v-2Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 16px;
}