/* TII Data Portal - Official Brand Colour Palette */
:root {
    /* Primary Palette */
    --tii-navy:       #1A226D; /* Pantone 2756 - Deep Navy (AppBar, primary) */
    --tii-sky:        #72C7E7; /* Pantone 297  - Sky Blue (links, icons) */
    /* Secondary Palette */
    --tii-purple:     #742F8A; /* Pantone 526  - Purple */
    --tii-amber:      #FFC844; /* Pantone 1225 - Amber (CTA buttons) */
    /* Tertiary / Background Palette */
    --tii-dark-bg:    #1A2732; /* Pantone 7547 - Very Dark Navy (page bg) */
    --tii-darker-bg:  #131e27; /* Darker variant for section backgrounds */
    --tii-card-bg:    #1e2e3e; /* Card / surface bg */
    --tii-mid-blue:   #21578A; /* Pantone 7462 - Medium Blue */
    --tii-slate:      #51626F; /* Pantone 7545 - Dark Blue-Grey */
    --tii-steel:      #A4B3C9; /* Pantone 644  - Steel Blue (muted text) */
    --tii-pale:       #C4D9E4; /* Pantone 545  - Pale Blue (primary text) */
}

html, body {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--tii-dark-bg);
    color: var(--tii-pale);
    margin: 0;
    padding: 0;
}

a { color: inherit; }

/* ── Hero ──────────────────────────────────────────────── */
.hero-section {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    background-image: url('https://data.tii.ie/assets/img/home-bg.jpg');
    background-size: cover;
    background-position: center;
    color: white;
}
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(26,34,109,0.82) 0%, rgba(114,199,231,0.35) 100%); }
.hero-content { position: relative; z-index: 1; padding: 2rem; max-width: 800px; }
.hero-content h1 { font-size: 2.2rem; font-weight: 600; margin-bottom: 0.5rem; color: white; }
.hero-content h2 { font-size: 1.2rem; font-weight: 300; margin-bottom: 1.5rem; color: rgba(255,255,255,0.85); }

/* ── Dataset sections ──────────────────────────────────── */
.dataset-section { padding: 3rem 0; background-color: var(--tii-darker-bg); }
.section-title { color: var(--tii-sky) !important; font-size: 1.8rem; font-weight: 600; margin-bottom: 0.75rem; }
.section-desc { color: var(--tii-steel); margin-bottom: 2rem; line-height: 1.7; }
.section-desc a { color: var(--tii-sky); }

/* ── Dataset cards ─────────────────────────────────────── */
.dataset-card { background-color: var(--tii-card-bg) !important; border: 1px solid rgba(114,199,231,0.15) !important; height: 100%; }
.dataset-card .mud-card-content { color: var(--tii-pale); }
.dataset-card h3 { color: white; font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; }
.dataset-card p { color: var(--tii-steel); font-size: 0.9rem; line-height: 1.6; }
.dataset-card p a { color: var(--tii-sky); }

/* ── Content pages (T&C, Accessibility etc.) ───────────── */
.content-page { padding: 2rem 0; color: var(--tii-pale); }
.content-page h1 { color: white; margin-bottom: 1.5rem; }
.content-page h2 { color: var(--tii-sky); font-size: 1.3rem; margin-top: 2rem; margin-bottom: 0.75rem; }
.content-page p, .content-page li { color: var(--tii-steel); line-height: 1.8; }
.content-page a { color: var(--tii-sky); }
.content-page ol, .content-page ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.content-page dl dt { color: white; font-weight: 600; margin-top: 0.75rem; }
.content-page dl dd { color: var(--tii-steel); margin-left: 1.5rem; line-height: 1.7; }

/* ── Licence section ───────────────────────────────────── */
.licence-section { padding: 3rem 0; background-color: var(--tii-darker-bg); }
.licence-section a { color: var(--tii-sky); }

/* ── Footer ────────────────────────────────────────────── */
.tii-footer { background-color: #0f1820; color: var(--tii-steel); padding: 2rem 0; }
.tii-footer .footer-logo { height: 50px; margin-bottom: 0.5rem; }
.tii-footer p { margin: 0.25rem 0; font-size: 0.85rem; }
.tii-footer a { color: var(--tii-sky); text-decoration: none; }
.tii-footer a:hover { text-decoration: underline; }

/* ── MudBlazor overrides ───────────────────────────────── */
.mud-appbar { background-color: var(--tii-navy) !important; }
.mud-drawer { background-color: var(--tii-navy) !important; }
.mud-nav-link { color: var(--tii-pale) !important; }
.mud-nav-link:hover, .mud-nav-link.active {
    color: var(--tii-amber) !important;
    background-color: rgba(255,200,68,0.12) !important;
}

/* ── Blazor loading / error ────────────────────────────── */
#blazor-error-ui {
    background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem; }
.loading-progress circle { fill: none; stroke: var(--tii-steel); stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--tii-amber); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto; color: var(--tii-pale); }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }