/*
 * Industrial Hypertext — site-wide theme.
 *
 * Re-skins Bootstrap 3 components in the industrial palette (ink #0f1d2b,
 * safety orange #f76707, warm paper) with the Barlow / Barlow Condensed
 * pairing, so every page that uses includes/header.php matches the homepage
 * without per-page rewrites. Visual-only: colors, type, radii — no layout.
 *
 * Loaded by includes/header.php AFTER the Bootstrap CDN stylesheet.
 * CACHE-BUST: header.php links this as `ih-theme.css?v=N` — bump that ?v=
 * whenever this file changes (grep the repo for `ih-theme.css?v=`).
 */

:root {
    --iht-ink: #0f1d2b;
    --iht-ink-2: #16293c;
    --iht-orange: #f76707;
    --iht-orange-dark: #d9580a;
    --iht-paper: #fbfaf7;
    --iht-card: #ffffff;
    --iht-line: #e3e0d8;
    --iht-heading-bg: #f4f1ea;
    --iht-slate: #51606f;
    --iht-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --iht-body: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---- base ------------------------------------------------------------- */
body {
    font-family: var(--iht-body);
    background-color: var(--iht-paper);
    color: #233242;
}
h1, h2, h3 {
    font-family: var(--iht-display);
    font-weight: 700;
    color: var(--iht-ink);
    letter-spacing: 0.4px;
}
h4, h5, h6 { font-family: var(--iht-body); font-weight: 700; color: var(--iht-ink); }
.lead { color: var(--iht-slate); }
.text-muted, .muted { color: var(--iht-slate); }

a { color: var(--iht-orange-dark); }
a:hover, a:focus { color: #b34607; }

/* ---- buttons: two-tone system — orange = act, ink = navigate ----------- */
.btn {
    font-family: var(--iht-display);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 6px;
    text-shadow: none;
    box-shadow: none;
}
.btn-primary, .btn-warning {
    background-color: var(--iht-orange);
    border-color: var(--iht-orange);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:active:hover,
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning:active:hover {
    background-color: var(--iht-orange-dark);
    border-color: var(--iht-orange-dark);
    color: #fff;
}
.btn-success, .btn-info {
    background-color: var(--iht-ink);
    border-color: var(--iht-ink);
    color: #fff;
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success:active:hover,
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info:active:hover {
    background-color: var(--iht-ink-2);
    border-color: var(--iht-ink-2);
    color: #fff;
}
.btn-default {
    background-color: #fff;
    border-color: #c9ccd2;
    color: var(--iht-ink);
}
.btn-default:hover, .btn-default:focus, .btn-default:active {
    background-color: var(--iht-heading-bg);
    border-color: var(--iht-orange);
    color: var(--iht-ink);
}

/* ---- panels: one calm treatment instead of five colourways ------------- */
.panel {
    border-radius: 10px;
    border-color: var(--iht-line);
    box-shadow: 0 1px 3px rgba(15, 29, 43, 0.05);
}
.panel-default, .panel-primary, .panel-info, .panel-success, .panel-warning, .panel-danger {
    border-color: var(--iht-line);
}
.panel > .panel-heading {
    background-color: var(--iht-heading-bg);
    background-image: none;
    color: var(--iht-ink);
    border-color: var(--iht-line);
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
}
.panel-primary > .panel-heading,
.panel-info > .panel-heading,
.panel-success > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger > .panel-heading {
    background-color: var(--iht-ink);
    background-image: none;
    color: #fff;
    border-color: var(--iht-ink);
}
.panel-title {
    font-family: var(--iht-display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.6px;
}
.panel-primary > .panel-heading .panel-title::before,
.panel-info > .panel-heading .panel-title::before,
.panel-success > .panel-heading .panel-title::before,
.panel-warning > .panel-heading .panel-title::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    background: var(--iht-orange);
    border-radius: 2px;
    margin-right: 9px;
    vertical-align: 1px;
}

/* ---- wells & jumbotrons ------------------------------------------------ */
.well {
    background-color: var(--iht-card);
    border: 1px solid var(--iht-line);
    border-radius: 10px;
    box-shadow: none;
}
.jumbotron {
    background-color: var(--iht-ink);
    background-image: radial-gradient(700px 280px at 88% -15%, rgba(247, 103, 7, 0.16), transparent 60%);
    color: #c5d2de;
    border-radius: 14px;
}
.jumbotron h1, .jumbotron h2, .jumbotron h3 { color: #fff; }
.jumbotron .lead { color: #b9c6d2; }
.jumbotron a:not(.btn) { color: #ffb27a; }
.jumbotron a:not(.btn):hover { color: #fff; }

/* ---- alerts: quiet cards with a coloured spine -------------------------- */
.alert {
    border-radius: 10px;
    background-image: none;
    box-shadow: none;
}
.alert-info, .alert-success, .alert-warning {
    background-color: var(--iht-card);
    border: 1px solid var(--iht-line);
    color: #233242;
}
.alert-info { border-left: 4px solid var(--iht-ink); }
.alert-success { border-left: 4px solid #2f9e44; }
.alert-warning { border-left: 4px solid var(--iht-orange); }
.alert a { color: var(--iht-orange-dark); }

/* ---- misc -------------------------------------------------------------- */
.label-primary, .label-info, .label-success { background-color: var(--iht-ink); }
.label-warning { background-color: var(--iht-orange); }
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: var(--iht-ink);
    border-color: var(--iht-ink);
}
.table > thead > tr > th {
    font-family: var(--iht-display);
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--iht-ink);
    border-bottom: 2px solid var(--iht-orange);
}
blockquote { border-left: 4px solid var(--iht-orange); color: var(--iht-slate); }
hr { border-top-color: var(--iht-line); }