:root {
    --color-primary: #ff5900;
    --color-dark:    #2e2b29;
    --color-bg:      #F8F8F8;
    --color-text:    #1A1A1A;
    --color-muted:   #bec3c5;
}

html, body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.05rem;
    overflow-x: hidden;
}
html { scroll-padding-top: 64px; }  /* offset anchor scrolls past the fixed navbar */

/* Navbar */
.navbar-brand { font-weight: 700; color: var(--color-primary) !important; font-size: 1.3rem; }
.navbar { background-color: var(--color-dark) !important; min-height: 64px; }
.nav-link { color: #e0e0e0 !important; }
.nav-link:hover { color: var(--color-primary) !important; }
@media (max-width: 991.98px) {
    .navbar-nav .nav-link {
        padding-left: 1rem;
        font-size: 1.15rem;
    }
}

/* Headings */
h1, h2, h3 { color: var(--color-dark); }
.section-heading { color: var(--color-primary); border-bottom: 2px solid var(--color-primary); padding-bottom: .5rem; margin-bottom: 1.5rem; }

/* Buttons */
.btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn-primary:hover { background-color: #e05000; border-color: #e05000; }
.btn-outline-primary { border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline-primary:hover { background-color: var(--color-primary); color: #fff; }

/* Hero */
.hero-section {
    background-color: var(--color-dark);
    color: #fff;
    padding: 3rem 0;
    text-align: center;
}
.hero-section h1 { color: #fff; font-size: 2.8rem; font-weight: 700; }
.hero-section p {
    font-size: 1.5rem;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .55);
    margin-bottom: 0;
}
.hero-section .btn { font-size: 1.1rem; padding: .75rem 2rem; }
@media (max-width: 767.98px) {
    .hero-section p { font-size: 1.2rem; }
}

/* Hero with uploaded image. Both modes have the same total section height
   and button y-position; only the image area differs.
   - Fade mode: image at top of section (clamp height), bottom of image
     fades into the section's dark-grey background via mask-image. Text +
     button live in the in-flow .container below the image, on the grey.
   - Full-bleed mode: image is absolutely positioned to fill the entire
     section (covering both image + text areas). A bottom-up dark gradient
     overlays the image for text readability. The .container is offset
     down by margin-top:clamp(...) so the button lands at the same y as
     in fade mode. */
.hero-image {
    display: block;
    width: 100%;
    height: clamp(220px, 32vh, 360px);
    object-fit: cover;
}
.hero-section--fade .hero-image {
    -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
}
.hero-section--full-bleed {
    position: relative;
    overflow: hidden;
}
.hero-section--full-bleed .hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.hero-section--full-bleed::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 50%);
    z-index: 1;
    pointer-events: none;
}
.hero-section--full-bleed .container {
    position: relative;
    z-index: 2;
    margin-top: clamp(220px, 32vh, 360px);
    color: #fff;
}
@media (max-width: 767.98px) {
    .hero-section                        { padding: 16px 0; }
    .hero-image                          { height: 150px; }
    .hero-section--full-bleed .container { margin-top: 150px; }
}

/* Admin hero preview — mirrors public hero treatment at smaller scale so
   admins can adjust object-position with WYSIWYG fidelity. Desktop preview
   is wider (~5:1) to match typical desktop hero ratios; mobile preview is
   smaller and ~2:1 to match the actual mobile public hero. */
.hero-preview {
    position: relative;
    overflow: hidden;
    border-radius: .375rem;
    background: var(--color-dark);
}
.hero-preview > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-preview--desktop {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 3/1;
}
.hero-preview--mobile {
    width: 140px;
    aspect-ratio: 4/3;
}
.hero-preview--fade > img {
    -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
}
.hero-preview--full-bleed::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 50%);
    z-index: 1;
    pointer-events: none;
}

/* Sections */
section { padding: 64px 0; }
@media (max-width: 767.98px) {
    section { padding: 32px 0; }
}
section:nth-child(even) { background-color: #fff; }

/* Cards */
.card { border: none; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.card-img-top { height: 220px; object-fit: cover; }

/* Footer */
footer {
    background-color: var(--color-dark);
    color: var(--color-muted);
    padding: 2.5rem 0;
    font-size: .95rem;
}
footer a { color: var(--color-primary); text-decoration: none; }

/* Admin – desktop sidebar */
.admin-sidebar { background-color: var(--color-dark); min-height: 100vh; padding: 1.5rem; }
.admin-sidebar a { color: #e0e0e0; display: block; padding: .5rem 0; text-decoration: none; }
.admin-sidebar a:hover { color: var(--color-primary); }
.admin-sidebar a.active { color: var(--color-primary); font-weight: 600; }

/* Admin – mobile top bar */
.admin-mobile-bar {
    background-color: var(--color-dark);
    height: 52px;
    position: sticky;
    top: 0;
    z-index: 1030;
    width: 100%;
}
.admin-hamburger {
    background: none;
    border: none;
    color: #e0e0e0;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-hamburger:hover { color: var(--color-primary); }

/* Admin – mobile drawer */
.admin-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1040;
}
.admin-drawer {
    position: fixed;
    top: 52px;
    left: 0;
    bottom: 0;
    width: 240px;
    background-color: var(--color-dark);
    z-index: 1050;
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
}
.admin-drawer a { color: #e0e0e0; display: block; padding: .5rem 0; text-decoration: none; }
.admin-drawer a:hover { color: var(--color-primary); }
.admin-drawer a.active { color: var(--color-primary); font-weight: 600; }

/* Placeholder image */
.employee-placeholder { width: 100%; height: 220px; background-color: var(--color-muted); display:flex; align-items:center; justify-content:center; }

/* Confirm modal */
.modal-backdrop-custom {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1040;
}
.modal-custom {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    width: 100%;
}

/* Blazor error UI */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

/* Carousel */
.ref-carousel-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.4s ease;
    will-change: transform;
}
.ref-card-slot {
    flex: 0 0 calc((100% - 3rem) / 3);
    min-width: 0;
}
@media (max-width: 767.98px) {
    .ref-carousel-track { gap: 0; }
    .ref-card-slot      { flex: 0 0 100%; }
    .ref-carousel {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-areas:
            "viewport viewport"
            "left     right";
        gap: 0.75rem 0.75rem;
        justify-content: center;
        padding: 0 !important;  /* override the inline padding="0 28px" on .ref-carousel */
    }
    .ref-carousel-viewport { grid-area: viewport; min-width: 0; }
    .carousel-arrow        { position: static !important; transform: none !important; }
    .carousel-arrow.left   { grid-area: left;  justify-self: end; }
    .carousel-arrow.right  { grid-area: right; justify-self: start; }
}
.carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.35); color: #fff; border: none;
    width: 36px; height: 36px; border-radius: 50%;
    cursor: pointer; z-index: 10; padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.carousel-arrow:hover { background: rgba(0,0,0,.6); }
.carousel-arrow.left  { left:  -18px; }
.carousel-arrow.right { right: -18px; }
.carousel-arrow:disabled        { opacity: 0.35; cursor: not-allowed; }
.carousel-arrow:disabled:hover  { background: rgba(0,0,0,.35); }

/* Lightbox */
.lightbox-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.85);
    z-index: 2000; display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.lightbox-img { max-width: 90vw; max-height: 85vh; border-radius: 4px; cursor: default; }
.lightbox-close {
    position: absolute; top: 1rem; right: 1.25rem;
    color: #fff; font-size: 2rem; cursor: pointer;
    background: none; border: none; line-height: 1;
}
.lightbox-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.15); color: #fff; border: none;
    width: 44px; height: 44px; border-radius: 50%; padding: 0;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lightbox-arrow.left  { left:  1rem; }
.lightbox-arrow.right { right: 1rem; }
.lightbox-arrow:hover { background: rgba(255,255,255,.3); }

/* Social icons */
.social-icon { color: var(--color-muted); transition: color .2s; text-decoration: none; }
.social-icon:hover { color: var(--color-primary); }
.social-icon svg { width: 24px; height: 24px; fill: currentColor; }

/* Admin image delete button */
.img-thumb-wrap { position: relative; display: inline-block; }
.img-delete-btn {
    position: absolute; top: 4px; right: 4px;
    background: rgba(0,0,0,.55); color: #fff; border: none;
    width: 22px; height: 22px; border-radius: 50%;
    font-size: .75rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
}
.img-delete-btn:hover { background: #dc3545; }

/* Drag handle */
.drag-handle {
    cursor: grab;
    color: var(--color-muted);
    user-select: none;
    font-size: 1.1rem;
    padding: 0 4px;
}
.drag-handle:active { cursor: grabbing; }