/*
 * MHC Brand System — Manitoba Habitat Conservancy
 * Source: "Brand Guidelines V 1.0 // JULY 5, 2023" (MHC Brand Guidelines.pdf)
 *
 * Loaded last (after Bootstrap and the site/scoped stylesheets) so these
 * rules win the cascade without needing !important. See _Layout.cshtml.
 *
 * Guardrails from the guide's "Unacceptable Use" / colour-palette rules —
 * keep these in mind before adding new brand-colour usages anywhere in the app:
 *   - Never rotate or recolour the fingerprint icon/logo; never apply drop
 *     shadows, embossing, or stretch/skew to logo images.
 *   - Tertiary colours (--mhc-shade-*) are for iconography and background
 *     shapes only — never body text or interactive controls.
 *   - Tints of the secondary colours (gold/peach/green/sky-blue) are reserved
 *     for data-visualization contexts (charts/graphs) — not general UI.
 *   - Teal, Turquoise, Navy and Stone Grey (primary colours) permit tints
 *     and Teal additionally permits shades; secondary/tertiary colours do not.
 */

/* Licensed web-font files (wwwroot/fonts/, shared with the email theme's Quill editor — see
   email-quill-fonts.css). Only Bold (700) and Medium (500) weights of Arboria and Bold (700)
   of Grad are licensed for web embedding — there's no Book/Regular weight, so body copy stays
   on the guide's own documented Arial fallback (see --mhc-font-primary below); only headings/
   subheads and .mhc-stat pick up the real brand fonts. */
@font-face {
    font-family: "Arboria";
    src: url("/fonts/arboria-bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Arboria";
    src: url("/fonts/arboria-medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Grad";
    src: url("/fonts/grad.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Primary */
    --mhc-teal: #00676A;
    --mhc-teal-rgb: 0, 103, 106;
    --mhc-stone-grey: #E8E8E8;
    --mhc-turquoise: #20A59F;
    --mhc-navy: #212832;

    /* Secondary */
    --mhc-gold-light: #FFC700;   /* for dark backgrounds */
    --mhc-gold-dark: #E8AA00;    /* for light backgrounds */
    --mhc-peach: #FE945B;
    --mhc-green: #8EBC00;
    --mhc-sky-blue: #51BBE2;

    /* Tertiary — iconography / background shapes only, paired with the
       matching secondary colour above. Not for text or controls. */
    --mhc-shade-gold: #D28D31;
    --mhc-shade-peach: #D35339;
    --mhc-shade-green: #518C27;
    --mhc-shade-blue: #306FAB;

    /* Typography (p.14-15). Body copy has no licensed Arboria weight to use (the guide's
       "Arboria Book" isn't among the files we have), so it stays on the guide's own
       documented Arial fallback. Headings/subheads and statistics use the real brand fonts
       via the @font-face rules above, falling back to the guide's Arial/Times New Roman
       stack if a font ever fails to load. */
    --mhc-font-primary: Arial, Helvetica, sans-serif;
    --mhc-font-heading: "Arboria", Arial, Helvetica, sans-serif;
    --mhc-font-stat: "Grad", "Times New Roman", Times, serif;

    /* Bootstrap theme hooks — retheme "primary" to brand Teal. success/
       danger are left untouched: they carry granted/denied status meaning
       throughout the app (see AccessRequest/Details, CaslReport, etc.). */
    --bs-primary: var(--mhc-teal);
    --bs-primary-rgb: var(--mhc-teal-rgb);
    --bs-primary-text-emphasis: #013638;
    --bs-primary-bg-subtle: #d7ecec;
    --bs-primary-border-subtle: #a8d3d3;

    --bs-link-color: var(--mhc-green);
    --bs-link-color-rgb: 142, 188, 0;
    --bs-link-hover-color: var(--mhc-shade-green);
    --bs-link-hover-color-rgb: 81, 140, 39;
}

body {
    font-family: var(--mhc-font-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mhc-font-heading);
    font-weight: 700; /* Arboria Bold / Arial Bold — Titles & Subheads Level 1 */
}

/* Subheads Level 2 (p.14): Arboria Medium, uppercase, tracking 100 — not yet applied to any
   view; add this class wherever that hierarchy level is needed. */
.mhc-subhead-2 {
    font-family: var(--mhc-font-heading);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Body-copy inline links: "bold, underlined and in Green colour" (p.14).
   Bare `a` has lower specificity than Bootstrap's own component classes
   (.nav-link, .dropdown-item, .navbar-brand, .btn, .card-link, ...), so
   navigation chrome is unaffected — only prose/table/footer-style links. */
a {
    font-weight: 700;
    text-decoration: underline;
}

a:hover, a:focus {
    color: var(--mhc-shade-green);
}

/* Statistics / important dates (p.14): Grad (Times New Roman fallback),
   used large, for 1-3 highlighted numbers/dates at a time — don't overuse. */
.mhc-stat {
    font-family: var(--mhc-font-stat);
    font-weight: 700;
    color: var(--mhc-teal);
    line-height: 1;
}

/* ---- Bootstrap component retheme (Bootstrap 5.3 bakes concrete colours
   into each component's own --bs-btn-* / --bs-nav-* custom properties rather
   than referencing --bs-primary, so those need explicit overrides here). ---- */

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--mhc-teal);
    --bs-btn-border-color: var(--mhc-teal);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #004d4f;
    --bs-btn-hover-border-color: #004d4f;
    --bs-btn-focus-shadow-rgb: var(--mhc-teal-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #004044;
    --bs-btn-active-border-color: #004044;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--mhc-teal);
    --bs-btn-disabled-border-color: var(--mhc-teal);
}

.btn-outline-primary {
    --bs-btn-color: var(--mhc-teal);
    --bs-btn-border-color: var(--mhc-teal);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--mhc-teal);
    --bs-btn-hover-border-color: var(--mhc-teal);
    --bs-btn-focus-shadow-rgb: var(--mhc-teal-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--mhc-teal);
    --bs-btn-active-border-color: var(--mhc-teal);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--mhc-teal);
}

.form-check-input {
    border-color: #6c757d;
}

.form-check-input:checked {
    background-color: var(--mhc-teal);
    border-color: var(--mhc-teal);
}

/* Native date/datetime-local inputs (used throughout for DateOnly fields and the local half of
   the UTC datetime-local pattern — see CLAUDE.md's DateTime Conventions) aren't Bootstrap
   components at all; the browser draws their calendar-picker popup itself, ignoring Bootstrap's
   theme entirely. `accent-color` is the one standard hook browsers expose into that native UI —
   Chromium/Firefox use it to colour the picker's selected/today date instead of browser-default
   blue. Text selected inside the input (e.g. dragging across "yyyy-mm-dd") is separate — that's
   the browser's plain text-selection highlight, restyled here via ::selection. */
input[type="date"],
input[type="datetime-local"] {
    accent-color: var(--mhc-teal);
}

input[type="date"]::selection,
input[type="datetime-local"]::selection {
    background-color: var(--mhc-teal);
    color: #fff;
}

.page-link {
    color: var(--mhc-teal);
}

.page-item.active .page-link {
    background-color: var(--mhc-teal);
    border-color: var(--mhc-teal);
}

/* Rounded "pill" pagination (_PaginationPartial.cshtml) — each page number/arrow is its own
   circular pill inside one faint Stone Grey capsule, rather than Bootstrap's default
   edge-to-edge joined rectangles. Scoped to .mhc-pagination so the plain .pagination look
   above (if ever used elsewhere) is untouched. */
.mhc-pagination-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.mhc-pagination {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    background-color: rgba(232, 232, 232, 0.35); /* --mhc-stone-grey, near-transparent */
    border: 1px solid var(--mhc-stone-grey);
    padding: 0.25rem;
    border-radius: 999px;
}

.mhc-pagination .page-item {
    display: flex;
}

.mhc-pagination .page-link {
    border: none;
    border-radius: 50%;
    min-width: 2rem;
    height: 2rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    background-color: transparent;
    color: var(--mhc-teal);
}

/* Bootstrap's .page-item:first-child/:last-child rules (border-top/bottom-left-radius on the
   first, -right-radius on the last — for its default joined-rectangle pagination look) carry
   higher specificity (0,3,0) than the plain rule above (0,2,0), so they were winning on just
   one side of each end pill — squaring off the side that should mirror the capsule's own
   rounded end instead of matching the circular 50% every other pill gets. */
.mhc-pagination .page-item:first-child .page-link,
.mhc-pagination .page-item:last-child .page-link {
    border-radius: 50%;
}

.mhc-pagination .page-link:hover {
    background-color: rgba(var(--mhc-teal-rgb), 0.15);
    color: var(--mhc-teal);
}

.mhc-pagination .page-item.disabled .page-link {
    color: #adb5bd;
    background-color: transparent;
}

/* Bootstrap's own .page-link.active sets color: #fff, but it's the same (0,2,0) specificity
   as the plain .mhc-pagination .page-link rule above and mhc-brand.css loads after Bootstrap,
   so that plain rule was winning and leaving the active pill's number in Teal-on-Teal (near
   unreadable) instead of white. Needs to win over :hover too — hovering the current page
   shouldn't make it fade to the same light tint as every other pill. */
.mhc-pagination .page-item.active .page-link,
.mhc-pagination .page-item.active .page-link:hover {
    color: #fff;
    background-color: var(--mhc-teal);
}

/* Bootstrap bakes a concrete blue (#0d6efd) into .list-group-item.active's own
   --bs-list-group-active-* custom properties rather than referencing --bs-primary — same
   pattern as .btn-primary/.dropdown-menu above. Without this, the PropertyDetail "Key
   Locations" list (property-dashboard-detail.js toggles .active on the row matching an open
   map marker popup) highlights in Bootstrap blue instead of brand Teal.
   --bs-secondary-color is also redefined here: .text-muted is `color: var(--bs-secondary-color)
   !important`, so overriding `color` directly on a .text-muted descendant (even scoped to
   .active) can't win — redefining the custom property itself on the highlighted row inherits
   down to the nested <ul> instead. Without it, the Key Locations note text (e.g.
   "Gate Code: 123456") was unreadable, near-black against the Teal highlight. */
.list-group-item.active {
    --bs-list-group-active-bg: var(--mhc-teal);
    --bs-list-group-active-border-color: var(--mhc-teal);
    --bs-secondary-color: rgba(255, 255, 255, 0.85);
}

/* Bootstrap bakes a concrete blue (#0d6efd) into .dropdown-menu's own
   --bs-dropdown-link-active-bg rather than referencing --bs-primary — same
   pattern as .btn-primary above. Without this override, clicking a
   dropdown-item (which briefly matches :active) or navigating to one that's
   .active shows Bootstrap blue instead of brand Teal. */
.dropdown-menu {
    /* Gold is a secondary colour, and the guardrails above reserve secondary
       colours for data-viz rather than general UI — used here anyway per
       explicit direction. mhc-gold-dark is the "for light backgrounds"
       variant (p.29), matching this menu's white background. */
    --bs-dropdown-link-hover-bg: var(--mhc-gold-dark);
    --bs-dropdown-link-active-bg: var(--mhc-teal);
}

/* Focus-ring colour lives in site.css (.btn:focus, .form-control:focus, ...)
   — already updated there to brand Turquoise (#20A59F). */

/* Main navbar — reversed logo lives on this dark Teal background per the
   guide's "Reversed // For dark backgrounds" logo rule (p.3). Scoped to the
   navbar specifically, not a blanket .bg-dark override — bg-dark/navbar-dark
   isn't used elsewhere in the app. */
.navbar.bg-dark {
    background-color: var(--mhc-teal) !important;
}

/* Table headers use Bootstrap's .table-dark utility throughout the app (property lists,
   permission grants, admin CRUD screens, ...) — override its background to the brand Teal so it
   reads as part of the same brand as the (already Teal) navbar, instead of Bootstrap's generic
   near-black default clashing with it. Text stays white via Bootstrap's own --bs-table-color. */
.table-dark {
    --bs-table-bg: var(--mhc-teal);
    --bs-table-border-color: var(--mhc-teal);
}

.navbar-brand-logo {
    height: 42px;
    width: auto;
}

/* Mobile nav bar only (below the lg breakpoint where navbar-expand-lg collapses
   into the toggler menu): Bootstrap's default navbar-dark .nav-link colour is a
   translucent rgba(255,255,255,.55), which reads low-contrast against the teal
   background in the collapsed menu. Bump it closer to solid white there; the
   desktop horizontal nav is unaffected. */
@media (max-width: 991.98px) {
    .navbar.navbar-dark .navbar-nav .nav-link {
        color: rgba(255, 255, 255, 0.9);
    }

    .navbar.navbar-dark .navbar-nav .nav-link:hover,
    .navbar.navbar-dark .navbar-nav .nav-link:focus {
        color: #fff;
    }
}

/* Popover header (e.g. the "Provincially maintained data" ⓘ notice on PropertyDashboard) defaults
   to Bootstrap's neutral --bs-secondary-bg grey and inherited text colour — unbranded. Retheme to
   the same soft Teal tint already defined above for subtle/emphasis use (--bs-primary-bg-subtle /
   --bs-primary-text-emphasis), and tint the border to match so the whole popover reads as one
   on-brand unit rather than a grey-headed box. */
.popover {
    --bs-popover-header-bg: var(--bs-primary-bg-subtle);
    --bs-popover-header-color: var(--bs-primary-text-emphasis);
    --bs-popover-border-color: var(--bs-primary-border-subtle);
}

/* Reusable branded callout card (e.g. the Home page "add a party member" nudge) — same
   soft Teal tint as .popover above, for on-brand highlight boxes outside the alert/card
   defaults Bootstrap ships with. */
.card-brand-subtle {
    background-color: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
}

.card-brand-subtle .card-title {
    color: var(--bs-primary-text-emphasis);
}

/* My Permissions grant cards — faint fingerprint-icon watermark. Per the guardrails at the
   top of this file, the icon itself is never rotated, skewed, recoloured, or given a drop
   shadow/emboss; the only treatment applied is reduced opacity, which is how the mark stays
   legible as a background texture without competing with the card's actual content. */
.permission-card > .card-body {
    position: relative;
    overflow: hidden;
}

.permission-card > .card-body::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/img/MHC-icon-darkbkg-RGB.png");
    background-repeat: no-repeat;
    background-position: center;
    /* `contain` against the full card-body box (rather than a fixed px size) scales the mark
       to the body's own height — card bodies run wider than the icon's aspect ratio, so
       height is always the limiting dimension. */
    background-size: contain;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
    /* Chrome/Safari drop background-images by default when printing unless the browser's own
       "Background graphics" print option is checked; this override (see MyPermissions.cshtml's
       Print Permissions button) forces this specific watermark to print regardless of that
       setting, so a printed permission still carries the mark. */
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

/* A past (expired) permission isn't the "your permission is live" state this watermark exists
   to reinforce, so desaturate it on those cards rather than let a branded mark sit under a
   grant that's no longer in effect. `filter` works on a pseudo-element the same as any other
   box, so no separate greyscale asset is needed. _PermissionGrantCard.cshtml adds .is-past when
   the grant is neither active nor upcoming. */
.permission-card.is-past > .card-body::before {
    filter: grayscale(100%);
}

.permission-card > .card-body > * {
    position: relative;
    z-index: 1;
}

/* Home page hero — full-bleed background photo behind the welcome text,
   filling the whole space between the navbar and the footer (no white bars
   above or below). Achieving that takes two parts:
   - `<main>` (see _Layout.cshtml) is `d-flex flex-column h-100` so it
     actually fills its flex-grow-1 wrapper's height instead of collapsing
     to content height, and this element uses `flex: 1 0 auto` to claim all
     of that leftover vertical space.
   - Negative margins cancel the navbar's `mb-3` (top), `main`'s `pb-4`
     (bottom), and the layout wrapper's `container-fluid px-4` (sides), so
     the photo runs flush to the navbar, the footer, and both browser edges
     instead of sitting in a padded box.
   Backed by the brand photo at wwwroot/img/background.jpg; the teal/turquoise gradient is a
   separate background layer beneath it, so a slow-loading (or missing) photo doesn't blank
   the section. */
.home-hero {
    margin-top: -1rem;
    margin-bottom: -1.5rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    width: calc(100% + 3rem);
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    background-image: url("/img/background.jpg"), linear-gradient(135deg, var(--mhc-teal) 0%, var(--mhc-turquoise) 100%);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

/* The two floating sections (party-member nudge, general permissions text)
   stack in a single centered column on top of the hero photo. */
.home-hero-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
}

.home-hero-card {
    background-color: rgba(255, 255, 255, 0.93);
    border: none;
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
}

.home-hero-card strong {
    color: var(--mhc-teal);
}

.home-hero-card h1 {
    color: var(--mhc-teal);
}

.home-hero-card h5 {
    color: var(--mhc-teal);
}

/* The hero already reaches the bottom edge of its flex-grow-1 wrapper (see
   .home-hero above), but footer's own `mt-3` (see _Layout.cshtml) still adds
   a 1rem gap of blank page background between that edge and the footer's
   `border-top` line. Home/Index.cshtml sets ViewData["BodyClass"] = "has-hero"
   to opt into closing that gap here, so the border-top sits flush against the
   photo instead of floating below it — scoped to this page so footer spacing
   elsewhere is untouched. */
body.has-hero footer {
    margin-top: 0;
}