/* =====================================================================
   ReportHawk public site  -  brand overrides on top of the NexGen theme
   Palette pulled from the existing reporthawk.co.uk app:
     Navy   : #1d2244   (primary)
     Gold   : #bb9257   (accent / highlights)
     Grey   : #e1e6ef   (light borders / dividers)
     Body   : #323435   (text)
   ===================================================================== */

:root {
    --rh-navy:   #1d2244;
    --rh-navy-soft: rgba(29, 34, 68, .92);
    --rh-gold:   #bb9257;
    --rh-gold-soft: #d3b787;
    --rh-grey:   #e1e6ef;
    --rh-grey-2: #c0cadd;
    --rh-text:   #323435;
    --rh-light:  #f9f9fa;

    /* Override the NexGen theme's teal everywhere it cascades from */
    --primary-color: #1d2244;
    --secondary-color: #bb9257;

    /* Body copy scale. Root stays at the browser default 16px (1rem = 16px) so the
       rem-based hero headings are unaffected; we only lift the body text here.
       Everything below is expressed in rem so the whole site scales from one place. */
    --p-size: 1.1875rem;   /* 19px  (was 1rem / 16px) */
}

/* ---------- Headings & body text ---------- */
body, p, li, .description, .card p, .text { color: var(--rh-text); }

/* Global body-copy size. Headings set their own rem sizes, so this lifts running
   text (paragraphs, lists, leads, nav, buttons) without touching the headlines. */
body { font-size: 1.1875rem; line-height: 1.6; }
/* The theme pins <li> to 1rem, so list items (e.g. the service checklists) don't
   follow the body size. Lift them to the same body-copy scale. */
li { font-size: var(--p-size); }

/* Hero subtitle (e.g. "A complete toolkit for medico-legal reporting...") sits above
   body copy in the hierarchy, so give it its own larger size. */
.hero .description { font-size: 1.5rem !important; line-height: 1.5; }
@media (max-width: 767px) {
    .hero .description { font-size: 1.2rem !important; }
}
h1, h2, h3, h4, h5, h6, .title { color: var(--rh-navy); }

/* ---------- NexGen "featured" highlight band → solid gold ----------
   The theme draws .featured:before as a 15%-opacity tinted box behind the text.
   We make it solid gold and white the text on top. */
h1 .featured,
h2 .featured,
h3 .featured,
h4 .featured,
.title .featured {
    color: #fff !important;
}
h1 .featured:before,
h2 .featured:before,
h3 .featured:before,
h4 .featured:before,
.title .featured:before,
.odd h1 .featured:before,
.odd h2 .featured:before,
.odd h3 .featured:before,
.odd h4 .featured:before {
    background-color: var(--rh-gold) !important;
    opacity: 1 !important;
}
h1 .featured.bottom:before,
h2 .featured.bottom:before {
    background-color: var(--rh-gold) !important;
    opacity: 1 !important;
}
.featured span { color: #fff !important; }
/* The gold-boxed word reads larger/heavier than the navy word beside it (white-on-gold
   pops more than navy-on-white). Ease its size and weight so the two balance. */
h1 .featured span,
h2 .featured span,
h3 .featured span,
h4 .featured span,
.title .featured span {
    font-size: 0.9em;
    font-weight: 700;
}

/* ---------- Pre-titles (small caps over each heading) ---------- */
.pre-title { color: var(--rh-gold) !important; letter-spacing: .12em; }

/* ---------- Buttons (gold fill, navy border) ---------- */
.primary-button,
.btn.primary-button {
    background-color: var(--rh-gold) !important;
    border: 2px solid var(--rh-navy) !important;
    color: #fff !important;
    font-weight: 600;
}
.primary-button:hover,
.btn.primary-button:hover {
    background-color: var(--rh-navy) !important;
    border-color: var(--rh-gold) !important;
    color: #fff !important;
}
.outline-button,
.btn.outline-button {
    border: 2px solid var(--rh-navy) !important;
    color: var(--rh-navy) !important;
    background: transparent !important;
}
.outline-button:hover,
.btn.outline-button:hover {
    background-color: var(--rh-gold) !important;
    border-color: var(--rh-navy) !important;
    color: #fff !important;
}
/* On dark navy sections, swap outline button to a readable contrast */
.navbar.sub .outline-button,
section.section-4 .outline-button,
section.section-6 .outline-button,
footer .outline-button {
    border-color: var(--rh-gold) !important;
    color: var(--rh-gold) !important;
}
.navbar.sub .outline-button:hover,
section.section-4 .outline-button:hover,
section.section-6 .outline-button:hover,
footer .outline-button:hover {
    background-color: var(--rh-gold) !important;
    color: #fff !important;
}

/* ---------- Navbar ---------- */
.navbar.top { background: var(--rh-navy) !important; }
.navbar.top .nav-link { color: rgba(255,255,255,.85) !important; }
.navbar.top .nav-link:hover { color: var(--rh-gold) !important; }

.navbar.sub { background: var(--rh-navy) !important; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.navbar.sub .nav-link {
    color: #fff !important;
    font-weight: 600;
}
.navbar.sub .nav-link:hover,
.navbar.sub .nav-link.active { color: var(--rh-gold) !important; }

.navbar-brand .rh-logo {
    width: auto;
    display: block;
}
/* The theme sizes the brand <img> via --nav-brand-height (35px) on a selector more
   specific than .rh-logo, so we target the <img> directly to win and control size. */
header .navbar-expand .navbar-brand img.rh-logo { height: 66px; }
footer .navbar-brand img.rh-logo-footer { height: 72px; }

/* ---------- Hero block (right-aligned form panel) ---------- */
.hero .right.alt {
    background: var(--rh-navy-soft);
    padding: 40px;
    border-radius: 6px;
}
.hero .right.alt h1,
.hero .right.alt h1 .pre-title,
.hero .right.alt .description { color: #fff !important; }
.hero .right.alt h1 .pre-title { color: var(--rh-gold-soft) !important; }
.hero .right.alt .form-control { background: rgba(255,255,255,.96); border: 0; }
.hero .form-alert { color: #fff; }

/* Breadcrumb hero (Services/About/Contact) */
.hero.featured .breadcrumb-item a { color: var(--rh-gold) !important; }
.hero.featured .breadcrumb-item.active { color: #fff !important; }
.hero.featured .title { color: var(--rh-navy) !important; }

/* Hide the theme's teal-tinted dot-grid texture under hero blocks */
section.featured:before,
section.featured:after,
.hero.featured:before,
.hero.featured:after {
    display: none !important;
}

/* Ensure hero h1 doesn't overflow its container */
.hero h1,
.hero .title { word-wrap: break-word; max-width: 100%; }
.hero.featured .title .featured { display: inline-block; max-width: 100%; }

/* ---------- Custom mobile hamburger (position fixed so it never gets clipped) ---------- */
.rh-mobile-toggle {
    display: none;
    position: fixed;
    top: 14px;
    right: 16px;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    background: var(--rh-navy);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(29, 34, 68, .35);
}
.rh-mobile-toggle svg { display: block; }
.rh-mobile-toggle:hover { background: var(--rh-gold); }
.rh-mobile-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--rh-navy);
    border-radius: 2px;
    margin: 4px 0;
}
.rh-mobile-toggle:hover span { background: var(--rh-gold); }
.rh-mobile-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--rh-navy);
    border-radius: 2px;
    margin: 4px 0;
}
.rh-mobile-toggle:hover span { background: var(--rh-gold); }

@media (max-width: 1199px) {
    .rh-mobile-toggle { display: flex; }
    /* Hide the theme's flaky toggle since we use our own */
    body header .navbar.sub .navbar-nav.toggle { display: none !important; }
    body header .navbar.sub .navbar-nav.toggle .nav-link {
        color: var(--rh-navy) !important;
        padding: 8px 4px !important;
    }
    body header .navbar.sub .navbar-nav.toggle .nav-link i {
        color: var(--rh-navy) !important;
        font-size: 1.625rem !important;
        line-height: 1;
    }
    /* Logo a touch smaller on mobile, with a max-width to leave room for the toggle */
    header .navbar-expand .navbar-brand img.rh-logo { height: 54px; max-width: calc(100vw - 90px); }
}

/* ---------- Mobile hero: shrink huge headlines so they fit ---------- */
@media (max-width: 767px) {
    .hero h1,
    .hero .title,
    .hero .effect-static-text {
        font-size: 2.5rem !important;
        line-height: 1.15 !important;
    }
    .hero .right.alt {
        padding: 24px !important;
    }
    .hero .right.alt h1 .pre-title {
        font-size: 0.85rem !important;
        bottom: 6px;
    }
    .hero.featured .title {
        text-align: center;
    }
    .hero.featured .title .featured {
        padding: 4px 10px !important;
    }
    /* Bring hero down so logo doesn't sit on top of a huge empty navy strip */
    .hero.p-0 .swiper-container { min-height: auto !important; }
}

/* ---------- Cookie notice fallback (in case JS still injects something) ---------- */
#cookie-notice, .cookie-notice,
[id*="cookie-notice"], [class*="cookie-notice"],
[id*="gdpr-cookie"], [class*="gdpr-cookie"] {
    display: none !important;
}

/* ---------- Section backgrounds ---------- */
section.section-1 { background: #fff; }
section.section-2 { background: var(--rh-light); }
section.section-3 { background: #fff; }
section.section-4 { background: var(--rh-navy); color: #fff; }
section.section-5 { background: #fff; }
section.section-6 { background: var(--rh-navy); color: #fff; }
section.section-6 h2,
section.section-6 .pre-title,
section.section-6 p { color: #fff !important; }
section.section-6 .featured span { background: var(--rh-gold) !important; color: #fff !important; }

/* ---------- Feature & audience cards ---------- */
.audience .card,
section.section-2 .card {
    background: #fff;
    border: 1px solid var(--rh-grey);
    border-radius: 6px;
    padding: 32px 24px;
    text-align: center;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
}
.audience .card:hover,
section.section-2 .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(29, 34, 68, .12);
    border-color: var(--rh-gold-soft);
}
.audience .card i.icon,
section.section-2 .card i.icon,
.offers .items .item .icon,
.offers .item .card .icon,
section .card .icon {
    font-size: 2.625rem;
    color: var(--rh-navy) !important;
    display: block;
    margin: 0 auto 18px;
    text-align: center;
    width: 100%;
}
section.section-4 .card .icon,
section.section-6 .card .icon {
    color: var(--rh-gold) !important;
}

/* ---------- Why-choose checklist ---------- */
.why-list { list-style: none; padding: 0; margin: 0; }
.why-list li { padding: 10px 0 10px 32px; position: relative; color: var(--rh-text); }
.why-list li::before {
    content: "\2713";
    color: var(--rh-gold);
    font-weight: 700;
    position: absolute; left: 0; top: 10px;
    font-size: 1.125rem;
}

/* ---------- Services page rows ---------- */
.service-detail { padding: 60px 0; border-bottom: 1px solid var(--rh-grey); }
.service-detail:last-child { border-bottom: 0; }
.service-detail h3 { margin-bottom: 12px; color: var(--rh-navy); }
.service-detail .lead { font-size: 1.25rem; color: #5a6770; margin-bottom: 24px; }
.service-detail .icon { color: var(--rh-navy) !important; }
.service-detail ul { padding-left: 22px; }

/* ---------- About team cards ---------- */
.team-grid { padding-top: 30px; }
.team-card {
    background: #fff;
    border: 1px solid var(--rh-grey);
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
    margin-bottom: 30px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(29, 34, 68, .12);
    border-color: var(--rh-gold-soft);
}
.team-card .photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--rh-grey) url('../images/team-placeholder.svg') center/55% no-repeat;
}
.team-card .body { padding: 22px 18px; }
.team-card h4 { margin: 0; color: var(--rh-navy); }
.team-card .role { color: var(--rh-gold); margin: 6px 0 12px; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.team-card .bio { font-size: 0.875rem; color: #5a6770; margin: 0; }

/* ---------- Footer ---------- */
footer #footer { background: var(--rh-navy); color: #fff; }
footer #footer h4 { color: #fff; }
footer #footer p, footer #footer a, footer #footer .nav-link { color: rgba(255,255,255,.78); }
footer #footer a:hover, footer #footer .nav-link:hover { color: var(--rh-gold); }
footer #footer .navbar-brand .brand .last { color: #fff !important; }
footer #footer .card { background: transparent; border: 0; padding: 0; }
footer #footer .card h4 { padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 16px; }
footer .seo { font-size: 0.8125rem; line-height: 1.65; color: rgba(255,255,255,.55); }

#copyright { background: #14172e !important; color: rgba(255,255,255,.55); }
#copyright p, #copyright a { color: rgba(255,255,255,.55); }

/* ---------- Form banner ---------- */
.form-banner {
    display: none;
    padding: 18px 22px !important;
    border-radius: 4px;
    margin: 0 0 22px 0 !important;
    line-height: 1.5;
}
.form-banner.show { display: block; }
.form-banner.success { background: #e6f5ec; color: #1b6a3e; border: 1px solid #cfe7d8; }
.form-banner.error   { background: #fdecea; color: #a3261b; border: 1px solid #f5c7c2; }

/* ---------- Contact page details column ---------- */
.contact-details .nav-item { color: var(--rh-text); padding: 8px 0 !important; }
.contact-details .nav-item a { color: var(--rh-navy); }
.contact-details .nav-item a:hover { color: var(--rh-gold); }
.contact-details i { color: var(--rh-gold); }

/* ---------- Home CTA monogram (fills the empty navy space) ----------
   rh-icon.png is the gold RH monogram on navy, so on the navy CTA band the
   circle blends away and only the gold monogram shows (matches the login page). */
.cta-monogram {
    display: block;
    height: 150px;
    width: auto;
    margin: 40px auto 0;
    opacity: .95;
}
@media (max-width: 767px) {
    .cta-monogram { height: 110px; margin-top: 28px; }
}

/* ---------- Contact: Senior Management + Departments ---------- */
.mgmt-card {
    background: #fff;
    border: 1px solid var(--rh-grey);
    border-radius: 6px;
    padding: 26px 22px;
    height: 100%;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
}
.mgmt-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(29, 34, 68, .12);
    border-color: var(--rh-gold-soft);
}
.mgmt-card h4 { margin: 0; color: var(--rh-navy); }
.mgmt-card .role {
    color: var(--rh-gold);
    margin: 6px 0 12px;
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}
/* Title-only card (no name line) */
.mgmt-card .role-title {
    margin: 0 0 12px;
}
.mgmt-card a { color: var(--rh-navy); font-weight: 600; }
.mgmt-card a:hover { color: var(--rh-gold); }

.dept-list { list-style: none; padding: 0; margin: 0; }
.dept-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rh-grey);
}
.dept-list li:last-child { border-bottom: 0; }
.dept-list .dept-name { color: var(--rh-navy); font-weight: 600; }
.dept-list .dept-name i { color: var(--rh-gold); margin-right: 10px; }
.dept-list a { color: var(--rh-navy); }
.dept-list a:hover { color: var(--rh-gold); }

/* ---------- Mobile menu: LOGIN / BOOK A DEMO (header hides these below 1200px) ---------- */
#menu .mobile-actions { margin-top: 28px; }
#menu .mobile-actions .btn {
    display: block;
    margin: 12px auto 0;
    max-width: 280px;
}

/* ---------- Always-visible LOGIN in the mobile/tablet header ----------
   Experts were missing the login hidden in the burger menu. Below 1200px
   the header shows a compact LOGIN (and BOOK A DEMO on tablets); both
   remain in the burger menu too. */
@media (max-width: 1199px) {
    body header .navbar-expand .navbar-nav.action { display: flex !important; }
    body header .navbar.sub .container.header { padding-right: 72px; } /* clear the fixed burger */
    header .navbar.sub .navbar-nav.action .nav-item { margin-left: 8px !important; }
    header .navbar.sub .navbar-nav.action .btn {
        padding: 8px 14px;
        font-size: .8rem;
        white-space: nowrap;
    }
    /* keep the logo in proportion while leaving room for the buttons */
    header .navbar-expand .navbar-brand img.rh-logo {
        height: auto;
        max-height: 54px;
        max-width: calc(100vw - 320px);
    }
}
@media (max-width: 767px) {
    /* phones: header shows LOGIN only; BOOK A DEMO stays in the burger menu */
    header .navbar.sub .navbar-nav.action .nav-item:last-child { display: none; }
    header .navbar-expand .navbar-brand img.rh-logo { max-width: calc(100vw - 200px); }
}