/*
 * SGK Home Delivery website look for the accounts app.
 *
 * Tokens are taken from sgkhomedelivery.co.uk (its Tailwind build): orange
 * #f15b27, ink #15181d, slate/warm-grey text, cool grey "sand" surfaces and
 * fine #e3e6ea lines; Lota Grotesque for headings, Arimo for everything else;
 * 6px-radius buttons. Layered over the admin theme, scoped to body.sgk-site.
 */

@font-face { font-family: "Lota Grotesque"; src: url("fonts/lota-grotesque-regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lota Grotesque"; src: url("fonts/lota-grotesque-semibold.otf") format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Lota Grotesque"; src: url("fonts/lota-grotesque-bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lota Grotesque"; src: url("fonts/lota-grotesque-black.otf") format("opentype"); font-weight: 800 900; font-display: swap; }

:root {
    --sgk-orange: #f15b27;
    --sgk-orange-hover: #d6461a;
    --sgk-orange-tint: #fef2ec;
    --sgk-ink: #15181d;
    --sgk-charcoal: #1b1f25;
    --sgk-slate: #4b5360;
    --sgk-warm-grey: #6b7280;
    --sgk-sand: #f5f6f8;
    --sgk-line: #e3e6ea;
    --sgk-grey: #cdd1d6;
    --sgk-font-sans: "Arimo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --sgk-font-display: "Lota Grotesque", "Arimo", system-ui, sans-serif;
}

/* ---- Base ------------------------------------------------------------ */
body.sgk-site {
    font-family: var(--sgk-font-sans);
    color: var(--sgk-ink);
    background: var(--sgk-sand);
    -webkit-font-smoothing: antialiased;
}
body.sgk-site .wrapper,
body.sgk-site .content-wrapper { background: var(--sgk-sand); }
body.sgk-site h1, body.sgk-site h2, body.sgk-site h3, body.sgk-site h4,
body.sgk-site .page-title, body.sgk-site .box-title {
    font-family: var(--sgk-font-display);
    color: var(--sgk-ink);
    letter-spacing: -.01em;
}
body.sgk-site .page-title { font-weight: 700; font-size: 1.875rem; letter-spacing: -.025em; }
body.sgk-site .content-header .page-title { display: block; color: var(--sgk-ink); padding-right: 0; }
body.sgk-site .content-header .sgk-eyebrow { display: flex; width: max-content; }
body.sgk-site a { color: var(--sgk-orange); }
body.sgk-site a:hover { color: var(--sgk-orange-hover); }
body.sgk-site .text-fade, body.sgk-site .text-muted { color: var(--sgk-warm-grey) !important; }
body.sgk-site .text-primary { color: var(--sgk-orange) !important; }
body.sgk-site .bg-primary { background-color: var(--sgk-orange) !important; }
body.sgk-site .bg-primary-light { background-color: var(--sgk-orange-tint) !important; color: var(--sgk-orange) !important; }

/* The website's eyebrow label: small caps, wide tracking, orange slash. */
.sgk-eyebrow {
    display: inline-flex; align-items: center; gap: .625rem;
    font-family: var(--sgk-font-sans);
    font-size: .75rem; line-height: 1rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .16em;
    color: var(--sgk-orange);
}
.sgk-eyebrow::before {
    content: ""; display: inline-block; width: .375rem; height: .75rem;
    background: var(--sgk-orange); transform: skewX(-12deg); border-radius: 1px;
}

/* ---- Header (white bar, fine bottom line, charcoal strip above) -------- */
.sgk-topstrip {
    background: var(--sgk-charcoal); color: rgba(255, 255, 255, .7);
    font-size: .75rem; height: 2.25rem;
    display: flex; align-items: center; padding: 0 1.5rem; gap: .5rem;
    position: relative; z-index: 1001;
}
.sgk-topstrip .sgk-slash {
    display: inline-block; width: .375rem; height: .625rem;
    background: var(--sgk-orange); transform: skewX(-12deg); border-radius: 1px;
}
.sgk-topstrip a, body.sgk-site .sgk-topstrip a { color: rgba(255, 255, 255, .7); margin-left: auto; text-decoration: none; }
.sgk-topstrip a:hover, body.sgk-site .sgk-topstrip a:hover { color: #fff; }

/* The theme pins .main-header to the top (body.fixed); pin the strip above it
   and push the header + content down by the strip's height. */
body.sgk-site .sgk-topstrip { position: fixed; top: 0; left: 0; right: 0; }
body.sgk-site.fixed .main-header { top: 2.25rem; }
body.sgk-site.fixed .content-wrapper { margin-top: calc(72px + 2.25rem); }

body.sgk-site .main-header {
    min-height: 72px;
    background: rgba(255, 255, 255, .97) !important;
    border-bottom: 1px solid var(--sgk-line);
    box-shadow: none !important;
}
body.sgk-site .main-header .navbar { background: transparent !important; }
body.sgk-site .main-header div.logo-box {
    background: transparent !important;
    width: auto !important; padding: 0 1.5rem;
    display: flex; align-items: center;
}
body.sgk-site .main-header .logo { display: flex; align-items: center; height: 72px; }
body.sgk-site .main-header .logo img.sgk-logo { height: 36px; width: auto; }

body.sgk-site .fleet-topnav { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
body.sgk-site .fleet-topnav .nav-link {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .85rem; border-radius: .375rem;
    font-family: var(--sgk-font-sans); font-size: .875rem; font-weight: 600;
    color: rgba(21, 24, 29, .8) !important;
    background: transparent;
    transition: color .15s, background-color .15s;
}
body.sgk-site .fleet-topnav .nav-link svg { width: 16px; height: 16px; }
body.sgk-site .fleet-topnav .nav-link:hover { background: var(--sgk-sand); color: var(--sgk-ink) !important; }
body.sgk-site .fleet-topnav .nav-item.active .nav-link { color: var(--sgk-orange) !important; background: var(--sgk-orange-tint); }

body.sgk-site .user-menu .avatar { border: 2px solid var(--sgk-line); }
body.sgk-site .dropdown-menu {
    border: 1px solid var(--sgk-line); border-radius: .5rem;
    box-shadow: 0 12px 30px -12px rgba(21, 24, 29, .18);
}
body.sgk-site .dropdown-item { font-size: .875rem; color: rgba(21, 24, 29, .8); border-radius: .375rem; }
body.sgk-site .dropdown-item:hover { background: var(--sgk-sand); color: var(--sgk-ink); }

/* ---- Content ---------------------------------------------------------- */
body.sgk-site .content-header { padding-top: 1.75rem; }
body.sgk-site .box, body.sgk-site .card {
    background: #fff;
    border: 1px solid var(--sgk-line);
    border-radius: .5rem;
    box-shadow: none;
}
body.sgk-site .box-header.with-border { border-bottom: 1px solid var(--sgk-line); }
body.sgk-site .box-footer { border-top: 1px solid var(--sgk-line); background: transparent; }
body.sgk-site .hover-shadow { transition: border-color .15s, box-shadow .15s, transform .15s; }
body.sgk-site .hover-shadow:hover {
    border-color: var(--sgk-grey);
    box-shadow: 0 16px 36px -18px rgba(21, 24, 29, .28);
    transform: translateY(-2px);
}

/* Buttons — the website's .btn-primary / .btn-outline / .btn-dark. */
body.sgk-site .btn {
    font-family: var(--sgk-font-sans); font-weight: 600; font-size: .875rem;
    border-radius: .375rem; padding: .6rem 1.25rem;
    transition: color .15s, background-color .15s, border-color .15s;
}
body.sgk-site .btn-sm { padding: .35rem .8rem; font-size: .8125rem; }
body.sgk-site .btn-primary, body.sgk-site .btn-success {
    background: var(--sgk-orange) !important; border-color: var(--sgk-orange) !important; color: #fff !important;
}
body.sgk-site .btn-primary:hover, body.sgk-site .btn-success:hover {
    background: var(--sgk-orange-hover) !important; border-color: var(--sgk-orange-hover) !important;
}
body.sgk-site .btn-secondary, body.sgk-site .btn-light, body.sgk-site .btn-default,
body.sgk-site .btn-outline-secondary, body.sgk-site .btn-outline-primary {
    background: #fff !important; color: var(--sgk-ink) !important;
    border: 1px solid rgba(21, 24, 29, .2) !important;
}
body.sgk-site .btn-secondary:hover, body.sgk-site .btn-light:hover, body.sgk-site .btn-default:hover,
body.sgk-site .btn-outline-secondary:hover, body.sgk-site .btn-outline-primary:hover {
    background: var(--sgk-sand) !important; border-color: rgba(21, 24, 29, .4) !important;
}
body.sgk-site .btn-dark { background: var(--sgk-charcoal) !important; border-color: var(--sgk-charcoal) !important; color: #fff !important; }

/* Forms */
body.sgk-site .form-control, body.sgk-site .form-select {
    font-family: var(--sgk-font-sans);
    border: 1px solid var(--sgk-grey); border-radius: .375rem;
    color: var(--sgk-ink); background-color: #fff;
}
body.sgk-site .form-control:focus, body.sgk-site .form-select:focus {
    border-color: var(--sgk-orange);
    box-shadow: 0 0 0 3px rgba(241, 91, 39, .15);
}
body.sgk-site .form-label, body.sgk-site label { font-weight: 600; color: var(--sgk-slate); }
body.sgk-site .form-check-input:checked { background-color: var(--sgk-orange); border-color: var(--sgk-orange); }

/* Tables */
body.sgk-site .table { color: var(--sgk-ink); }
body.sgk-site .table > thead th,
body.sgk-site .table > thead > tr > th {
    font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
    color: var(--sgk-warm-grey); border-bottom: 1px solid var(--sgk-line) !important;
}
body.sgk-site .table td { border-color: var(--sgk-line); }
body.sgk-site .table-hover > tbody > tr:hover > * { background: var(--sgk-sand); }

/* Badges & alerts */
body.sgk-site .badge { border-radius: .375rem; font-weight: 600; }
body.sgk-site .badge-primary, body.sgk-site .badge.bg-primary { background: var(--sgk-orange) !important; color: #fff; }
body.sgk-site .badge-info, body.sgk-site .badge.bg-info { background: var(--sgk-orange-tint) !important; color: var(--sgk-orange) !important; }
body.sgk-site .badge-secondary, body.sgk-site .badge.bg-secondary { background: var(--sgk-sand) !important; color: var(--sgk-slate) !important; border: 1px solid var(--sgk-line); }
body.sgk-site .alert { border-radius: .5rem; border-width: 1px; }
body.sgk-site .pagination .page-item.active .page-link { background: var(--sgk-orange); border-color: var(--sgk-orange); }
body.sgk-site .pagination .page-link { color: var(--sgk-ink); border-color: var(--sgk-line); }

/* Portal app tiles */
.sgk-app-tile .sgk-app-icon {
    width: 56px; height: 56px; border-radius: .5rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sgk-orange-tint); color: var(--sgk-orange);
    margin-bottom: 1rem;
}
.sgk-app-tile h4 { font-weight: 700; margin-bottom: .25rem; }
.sgk-app-tile .sgk-app-open {
    display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem;
    font-size: .8125rem; font-weight: 600; color: var(--sgk-orange);
}
.sgk-app-tile:hover .sgk-app-open { color: var(--sgk-orange-hover); }

/* Footer line */
.sgk-footer { text-align: center; font-size: .75rem; color: var(--sgk-warm-grey); padding: 2rem 1rem 2.5rem; }

@media (max-width: 991px) {
    body.sgk-site .main-header .logo img.sgk-logo { height: 28px; }
    .sgk-topstrip { padding: 0 1rem; }
}
@media (max-width: 575px) {
    .sgk-topstrip a { display: none; }
    .sgk-topstrip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}