/* ==========================================================================
   Ifmira overrides — layered on top of the Oilix template's custom.css.
   Keep this file small: prefer the template's own classes wherever possible.
   ========================================================================== */

:root {
    /* Template accent nudged to Ifmira's safety amber. */
    --main-color: #f5a623;
    --ifmira-navy: #0b2545;
}

/* --------------------------------------------------------------------------
   Typographic logo (stands in until a vector logo is supplied)
   -------------------------------------------------------------------------- */
.sis-logo {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    line-height: 1.05;
}

.sis-logo-mark {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    background: var(--main-color);
    color: var(--primary-color);
    font-family: var(--heading-font);
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 6px;
}

.sis-logo-name {
    display: block;
    font-family: var(--heading-font);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: .04em;
    /* Header sits on a light background; the footer flips both to white below. */
    color: var(--primary-color);
    white-space: nowrap;
}

.sis-logo-tag {
    display: block;
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-color);
    white-space: nowrap;
}

.main-footer .sis-logo-name {
    color: var(--white-color);
}

.main-footer .sis-logo-tag {
    color: rgba(255, 255, 255, .62);
}

.sis-preloader .sis-brand-mark {
    font-family: var(--heading-font);
    font-size: 2rem;
    font-weight: 700;
    color: var(--main-color);
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
.sis-skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 3000;
    padding: .75rem 1.25rem;
    background: var(--main-color);
    color: var(--primary-color);
    font-weight: 700;
    border-radius: 4px;
}

.sis-skip-link:focus {
    top: 1rem;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--main-color);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Banner lead paragraph
   -------------------------------------------------------------------------- */
.sisf-banner-lead {
    max-width: 46rem;
    margin-inline: auto;
    opacity: .88;
}

/* --------------------------------------------------------------------------
   Project cards
   -------------------------------------------------------------------------- */
.sis-project-item .sisf-e-inner {
    height: 100%;
    background: var(--secondary-color);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

.sis-project-item:hover .sisf-e-inner {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(26, 26, 26, .12);
}

.sis-project-client {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--main-color);
}

.sis-project-title {
    font-size: 1.125rem;
    line-height: 1.4;
    margin-bottom: .625rem;
}

.sis-project-title a {
    color: var(--primary-color);
}

.sis-project-title a:hover {
    color: var(--main-color);
}

.sis-project-summary {
    font-size: .9375rem;
    margin-bottom: 1rem;
}

.sis-project-meta {
    padding-top: .875rem;
    border-top: 1px solid rgba(26, 26, 26, .1);
    font-size: .8125rem;
    color: var(--text-color);
}

/* --------------------------------------------------------------------------
   Data tables (equipment register, capability facts)
   -------------------------------------------------------------------------- */
.sis-data-table {
    width: 100%;
    background: var(--white-color);
}

.sis-data-table thead th {
    background: var(--primary-color);
    color: var(--white-color);
    font-family: var(--heading-font);
    font-size: .8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .875rem 1rem;
    white-space: nowrap;
}

.sis-data-table tbody td,
.sis-data-table tbody th {
    padding: .8125rem 1rem;
    border-bottom: 1px solid rgba(26, 26, 26, .08);
    vertical-align: middle;
    font-weight: 500;
}

.sis-data-table tbody tr:nth-child(even) {
    background: var(--secondary-color);
}

.sis-fact-table th {
    width: 40%;
    color: var(--text-color);
    font-weight: 600;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Checklists
   -------------------------------------------------------------------------- */
.sis-checklist {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.sis-checklist li {
    position: relative;
    padding-left: 1.875rem;
    margin-bottom: .75rem;
}

.sis-checklist li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    font-size: .8125rem;
    color: var(--main-color);
}

.sis-checklist.light li,
.sis-checklist.light li a {
    color: rgba(255, 255, 255, .85);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.sis-form-panel {
    background: var(--white-color);
    border-top: 4px solid var(--main-color);
    padding: clamp(1.5rem, 1.25rem + 1vw, 2.5rem);
    box-shadow: 0 12px 36px rgba(26, 26, 26, .08);
}

.sis-form-panel .form-label {
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: .9375rem;
    color: var(--primary-color);
    margin-bottom: .375rem;
}

.sis-form-panel .form-control,
.sis-form-panel .form-select {
    border: 1px solid rgba(26, 26, 26, .18);
    border-radius: 4px;
    padding: .75rem 1rem;
    background: var(--white-color);
    color: var(--primary-color);
    height: auto;
}

.sis-form-panel .form-control:focus,
.sis-form-panel .form-select:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 .1875rem rgba(245, 166, 35, .25);
}

.required-mark {
    color: var(--error-color);
    margin-left: .125rem;
}

/* Honeypot: off-screen rather than display:none so naive bots still fill it. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sis-contact-panel {
    background: var(--primary-color);
    color: rgba(255, 255, 255, .82);
    padding: clamp(1.5rem, 1.25rem + 1vw, 2.5rem);
    height: 100%;
}

.sis-contact-panel h2,
.sis-contact-panel h3 {
    color: var(--white-color);
}

/* Buttons keep their own palette — otherwise the amber button gets white text. */
.sis-contact-panel a:not(.sis-btn-default) {
    color: var(--white-color);
}

.sis-contact-panel a:not(.sis-btn-default):hover {
    color: var(--main-color);
}

.sis-contact-row {
    display: flex;
    gap: 1rem;
    padding-block: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.sis-contact-row:last-child {
    border-bottom: 0;
}

.sis-contact-row .sis-contact-label {
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--main-color);
    margin-bottom: .25rem;
}

.sis-contact-row i {
    color: var(--main-color);
    margin-top: .25rem;
}

/* --------------------------------------------------------------------------
   WhatsApp floating button
   -------------------------------------------------------------------------- */
.sis-whatsapp-float {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    transition: transform .2s ease;
}

.sis-whatsapp-float:hover {
    color: #fff;
    transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.sis-badge-pill {
    display: inline-block;
    padding: .375rem .875rem;
    margin: 0 .375rem .5rem 0;
    background: var(--secondary-color);
    border: 1px solid rgba(26, 26, 26, .12);
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--primary-color);
}

.sis-note {
    padding: 1.25rem;
    border-left: 3px solid var(--main-color);
    background: var(--secondary-color);
}

.sis-vacancy-card {
    background: var(--white-color);
    border: 1px solid rgba(26, 26, 26, .1);
    border-left: 3px solid var(--main-color);
    padding: 1.75rem;
    margin-bottom: 1.25rem;
}

.sis-download-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    background: var(--white-color);
    border: 1px solid rgba(26, 26, 26, .1);
    margin-bottom: .875rem;
}

.sis-download-row .sis-download-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    background: var(--secondary-color);
    color: var(--main-color);
    font-size: 1.125rem;
}

.sis-legal-body h2 {
    font-size: 1.375rem;
    margin-top: 2rem;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    header, footer, .sis-cta-section, .sis-whatsapp-float, .sis-preloader { display: none !important; }
}

/* --------------------------------------------------------------------------
   Navigation — Ifmira has more top-level items than the template ships with,
   so keep labels on one line and tighten spacing on mid-size desktops.
   -------------------------------------------------------------------------- */
.sis-main-menu .navbar-nav > li > .nav-link {
    white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1399px) {
    .sis-main-menu .navbar-nav > li > .nav-link {
        padding-left: .55rem;
        padding-right: .55rem;
        font-size: .9375rem;
    }

    .sisf-centered-header-wrapper .header-btn .sis-btn-default {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* --------------------------------------------------------------------------
   Panel contrast fix

   `.sisf-sis-comman-drop-bg` is rgba(255,255,255,.1) — a translucent WHITE
   panel the template only ever places on dark sections. Where we use it on a
   light section (Corporate facts, policy lists, client cards…) it renders
   almost white, and the white text inside becomes unreadable.

   Give it a solid dark surface whenever it sits on a light background, so the
   white text it carries keeps its contrast.
   -------------------------------------------------------------------------- */
.sis-comman-background .sisf-sis-comman-drop-bg,
.sis-secondary-background .sisf-sis-comman-drop-bg,
body > main .section:not(.sis-primary-background) .sisf-sis-comman-drop-bg {
    background-color: var(--primary-color);
}

/* Muted text inside those panels needs lifting off near-black too. */
.sis-comman-background .sisf-sis-comman-drop-bg .text-white-50,
body > main .section:not(.sis-primary-background) .sisf-sis-comman-drop-bg .text-white-50 {
    color: rgba(255, 255, 255, .78) !important;
}

.sisf-sis-comman-drop-bg .sis-fact-table th,
.sisf-sis-comman-drop-bg .table > :not(caption) > * > * {
    background-color: transparent;
    border-color: rgba(255, 255, 255, .16);
}

/* --------------------------------------------------------------------------
   Top bar — #666 body text on the amber bar is only 2.8:1.
   -------------------------------------------------------------------------- */
.sis-header-top,
.sis-header-top a,
.sis-header-top .sisf-e-title-text {
    color: var(--primary-color);
}

.sis-header-top a:hover {
    color: var(--white-color);
}

/* --------------------------------------------------------------------------
   Amber label on light surfaces is only 1.85:1 — readable as an accent, not as
   text. Darken it on light backgrounds; keep the bright amber on dark panels.
   -------------------------------------------------------------------------- */
.sis-project-client {
    color: #8a5200;
}

.sisf-sis-comman-drop-bg .sis-project-client,
.sis-primary-background .sis-project-client,
.sis-contact-panel .sis-project-client,
.sis-hero .sis-project-client {
    color: var(--main-color);
}

/* --------------------------------------------------------------------------
   Project gallery — square thumbnails so mixed portrait/landscape site photos
   sit on a tidy grid; the lightbox shows each frame uncropped.
   -------------------------------------------------------------------------- */
.sis-gallery-item a {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: var(--primary-color);
}

.sis-gallery-item figure {
    margin: 0;
    aspect-ratio: 4 / 3;
}

.sis-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.sis-gallery-item a::after {
    content: "\f00e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: var(--white-color);
    background: rgba(26, 26, 26, .45);
    opacity: 0;
    transition: opacity .3s ease;
}

.sis-gallery-item a:hover img,
.sis-gallery-item a:focus-visible img {
    transform: scale(1.06);
}

.sis-gallery-item a:hover::after,
.sis-gallery-item a:focus-visible::after {
    opacity: 1;
}

/* Magnific Popup sits above the sticky header. */
.mfp-bg, .mfp-wrap {
    z-index: 2000;
}

/* --------------------------------------------------------------------------
   Lead project image — the profile photographs are a mix of portrait and
   landscape, so frame them consistently instead of letting a portrait shot
   run a thousand pixels tall.
   -------------------------------------------------------------------------- */
.sis-project-detail-image figure {
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
}

.sis-project-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Page banner

   The template positions `.sisf-page-title` absolutely inside a box whose
   height comes from the banner photograph. Ifmira's project titles are far
   longer than the template's ("Loading Bay and Associated Piping — Civil Base
   Construction"), so on narrow screens the text outgrew the photo and the
   overflowing lines landed as white text on the white section below.

   Let the content set the height, cover the area with the photograph, and keep
   a dark surface behind it so text always has something to sit on.
   -------------------------------------------------------------------------- */
.sisf-banner {
    position: relative;
    background-color: var(--primary-color);
    overflow: hidden;
}

.sisf-banner .banner-img {
    position: absolute;
    inset: 0;
}

.sisf-banner .banner-img figure {
    height: 100%;
    margin: 0;
}

.sisf-banner .banner-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sisf-banner .sisf-page-title {
    position: relative;
    min-height: 0;
    display: flex;
    align-items: center;
    padding-block: clamp(2.75rem, 2rem + 5vw, 5.5rem);
}

/* Long titles must wrap rather than run under the sticky header. */
.sisf-banner .sisf-m-title {
    overflow-wrap: break-word;
}

.sisf-banner .sisf-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* Projects with no photography of their own show this rather than a stock photo. */
.sis-project-placeholder {
    display: grid;
    place-items: center;
    gap: .5rem;
    aspect-ratio: 4 / 3;
    background: var(--primary-color);
    /* .45 alpha measured 4.47:1 — just under AA for small text. */
    color: rgba(255, 255, 255, .58);
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: 6px;
}

.sis-project-placeholder i {
    font-size: 1.5rem;
}