/* ============================================================
   blackburnlpg.com — public site stylesheet
   Brand kept from the original site: black ground, flame red,
   the field photo, and the Blackburn logo. The red stripe that
   ran across the old card plates (and runs across every tank
   truck) is promoted into the heading system site-wide.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
    --ink: #0c0c0c;
    --coal: #151515;
    --steel: #1d1d1d;
    --line: #2b2b2b;
    --flame: #ed2024;
    --flame-deep: #a90b0e;
    --cream: #f3f1ec;
    --smoke: #a9a9a2;
    --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
    background: var(--ink);
    color: var(--cream);
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

img { max-width: 100%; height: auto; }

a { color: var(--flame); text-decoration: none; }
a:hover { color: #ff5a5d; text-decoration: underline; }
a:focus-visible, button:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--flame);
    outline-offset: 3px;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- type ---------- */

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.12;
    margin: 0 0 .6em;
    text-transform: uppercase;
}
h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.35rem, 3vw, 1.8rem); }
h4 { font-size: 1.25rem; }

.lead { font-size: 1.2rem; color: var(--cream); }

/* The signature: a red stripe under section headings, echoing the
   stripe on the trucks. One device, used consistently. */
.striped {
    padding-bottom: .45rem;
    position: relative;
}
.striped::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 4px;
    background: var(--flame);
}

.eyebrow {
    font-family: var(--display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .8rem;
    color: var(--smoke);
    display: block;
    margin-bottom: .5rem;
}

/* ---------- buttons ---------- */

.btn {
    display: inline-block;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .65rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-flame { background: var(--flame); color: #fff; }
.btn-flame:hover { background: var(--flame-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--cream); border-color: var(--smoke); }
.btn-ghost:hover { border-color: var(--cream); color: #fff; }
.btn-lg { font-size: 1.2rem; padding: .8rem 2rem; }

/* ---------- header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 10, 10, .96);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
}
.site-header .bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .65rem 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
}
.brand {
    flex: 0 0 auto;
    display: block;
    width: 210px;
    height: 52px;
    background: url('https://cdn.csdurant.com/media/blackburnlpg.com/img/logo.png') no-repeat center left / contain;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}
.site-nav {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-left: auto;
}
.site-nav a {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cream);
    padding: .35rem 0;
    border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] {
    color: #fff;
    border-bottom-color: var(--flame);
    text-decoration: none;
}
/* .site-nav a wins specificity over .btn — restore button box model for CTAs */
.site-nav a.btn { margin-left: .4rem; padding: .5rem 1.2rem; border-bottom: 1px solid transparent; }
.site-nav a.btn-flame { border: 1px solid var(--flame); }
.site-nav a.btn-flame:hover { border-color: var(--flame-deep); }
.site-nav a.btn-ghost { border: 1px solid var(--smoke); }
.site-nav a.btn-ghost:hover { border-color: var(--cream); }

.nav-toggle {
    display: none;
    margin-left: auto;
    background: none;
    border: 1px solid var(--line);
    border-radius: 3px;
    color: var(--cream);
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .95rem;
    padding: .45rem .9rem;
}

.call-strip {
    background: var(--coal);
    border-bottom: 1px solid var(--line);
    font-size: .95rem;
    padding: .35rem 0;
    color: var(--smoke);
}
.call-strip .inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
    text-align: right;
}
@media (max-width: 860px) {
    .call-strip .inner { text-align: center; }
}
.call-strip a { color: var(--cream); font-weight: 600; }
.call-strip a:hover { color: #fff; }

@media (max-width: 860px) {
    .nav-toggle { display: block; }
    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--coal);
        border-bottom: 1px solid var(--line);
        padding: .5rem 1.25rem 1rem;
    }
    .site-nav.open { display: flex; }
    .site-nav a { width: 100%; padding: .7rem 0; border-bottom: 1px solid var(--line); }
    .site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--flame); }
    .site-nav .btn { margin: .8rem 0 0; width: 100%; text-align: center; }
}

/* ---------- hero (homepage) ---------- */

.hero {
    position: relative;
    background: url('https://cdn.csdurant.com/media/blackburnlpg.com/img/field.jpg') no-repeat center 62% / cover;
    min-height: min(46vh, 520px);
    display: flex;
    align-items: flex-end;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(12,12,12,.45) 0%, rgba(12,12,12,.62) 55%, var(--ink) 100%);
}
.hero .wrap {
    position: relative;
    padding-top: 3rem;
    padding-bottom: 2.8rem;
    animation: rise .7s ease both;
}
.hero-cols {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2.5rem;
}
.hero-copy { flex: 1 1 auto; min-width: 0; }
.hero-gauge { flex: 0 0 auto; padding-bottom: .4rem; }
@media (max-width: 780px) {
    .hero-cols { flex-direction: column; align-items: flex-start; }
    .hero-gauge { padding-bottom: 0; }
}
@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
.hero .eyebrow { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.hero h1 { max-width: 16ch; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.hero p { max-width: 60ch; font-size: 1.15rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }

/* ---------- tank gauge (signature) ---------- */

.tank-gauge { width: 100%; max-width: 200px; display: block; }
.tank-gauge .track {
    fill: none;
    stroke: var(--line);
    stroke-width: 10;
    stroke-linecap: round;
}
.tank-gauge .redzone {
    fill: none;
    stroke: var(--flame);
    stroke-width: 10;
    stroke-linecap: round;
}
.tank-gauge .ticks line { stroke: var(--smoke); stroke-width: 2; }
.tank-gauge .labels text {
    fill: var(--smoke);
    font-family: var(--display);
    font-size: 12px;
    font-weight: 600;
    text-anchor: middle;
    letter-spacing: .06em;
}
.tank-gauge .needle {
    transform-origin: 100px 100px;
    transform: rotate(var(--gauge-angle, 0deg));
    transition: transform .6s cubic-bezier(.3, 1.2, .4, 1);
}
.tank-gauge .needle line { stroke: var(--cream); stroke-width: 4; stroke-linecap: round; }
.tank-gauge .hub { fill: var(--cream); }

/* Hero variant: needle sweeps up from empty on load. */
.hero-gauge { text-align: center; max-width: 230px; }
.hero-gauge .tank-gauge { margin: 0 auto; }
/* Needle drains from half a tank down into the red — the reason you order. */
.hero-gauge .tank-gauge .needle { animation: gauge-sweep 1.6s cubic-bezier(.4, 0, .3, 1.15) both .35s; }
@keyframes gauge-sweep {
    from { transform: rotate(90deg); }
    to { transform: rotate(var(--gauge-angle, 0deg)); }
}
.hero-gauge .reading {
    font-family: var(--display);
    font-weight: 700;
    font-size: 2rem;
    color: var(--flame);
    display: block;
    margin-top: .2rem;
    line-height: 1;
}
.hero-gauge .rule {
    color: var(--smoke);
    font-size: .92rem;
    line-height: 1.45;
    margin: .5rem 0 0;
}
.hero-gauge .rule a { color: var(--cream); text-decoration: underline; }

/* Order-form variant: gauge mirrors the percentage select. */
.gauge-field { display: flex; align-items: flex-start; gap: 1.2rem; }
.gauge-field > .select { flex: 1 1 auto; }
.gauge-field .tank-gauge { flex: 0 0 108px; max-width: 108px; margin-top: 1.4rem; }

/* Inner pages get a slimmer band over the darker field photo. */
.page-head {
    background: url('https://cdn.csdurant.com/media/blackburnlpg.com/img/field-dark.jpg') no-repeat center 40% / cover;
    position: relative;
}
.page-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(12,12,12,.45), var(--ink));
}
.page-head .wrap { position: relative; padding-top: 3.2rem; padding-bottom: 1.6rem; }
.page-head h1 { margin-bottom: 0; }

/* ---------- sections ---------- */

main { flex: 1 1 auto; }
.section { padding: 2.6rem 0; }
.section + .section { border-top: 1px solid var(--line); }

/* home quick tiles */
.tile-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.1rem;
}
.tile {
    display: block;
    background: var(--steel);
    border: 1px solid var(--line);
    border-top: 3px solid var(--flame);
    border-radius: 4px;
    padding: 1.3rem 1.4rem 1.4rem;
    color: var(--cream);
    transition: transform .15s ease, border-color .15s ease;
}
.tile:hover { transform: translateY(-3px); border-color: #3a3a3a; text-decoration: none; color: #fff; }
.tile h3 { margin-bottom: .3rem; }
.tile p { margin: 0; color: var(--smoke); font-size: .98rem; }

/* ---------- catalog cards (services & products) ---------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.4rem;
    margin: 1.6rem 0 .6rem;
}
.photo-card {
    background: var(--steel);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, border-color .15s ease;
}
.photo-card:hover { transform: translateY(-3px); border-color: #3a3a3a; }
.photo-card img { display: block; width: 100%; aspect-ratio: 350 / 236; object-fit: cover; }
.photo-card .plate {
    border-left: 4px solid var(--flame);
    padding: .9rem 1.1rem 1rem;
}
.photo-card .plate h4 { margin: 0 0 .35rem; }
.photo-card .plate p { margin: 0; color: var(--smoke); font-size: .95rem; line-height: 1.55; }

/* social + visit cards (About page) */
.about-cards { display: grid; gap: 1.1rem; }
.social-card, .visit-card {
    background: var(--steel);
    border: 1px solid var(--line);
    border-top: 3px solid var(--flame);
    border-radius: 4px;
    padding: 1.6rem 1.6rem 1.8rem;
}
.social-card { text-align: center; }
.social-card .icon-facebook { width: 52px; height: 52px; margin-bottom: .8rem; color: #1877f2; }
.social-card h3, .visit-card h3 { margin-bottom: .5rem; }
.social-card p { color: var(--smoke); margin: 0 0 1.2rem; }
.visit-card p { color: var(--smoke); margin: 0; line-height: 1.8; }
/* CMS-driven contact info card */
.contact-cms h3 { font-size: 1.2rem; margin: 1.1rem 0 .3rem; }
.contact-cms h3:first-child { margin-top: 0; }
.contact-cms div { color: var(--smoke); line-height: 1.7; }
.contact-cms .btn { margin-top: 1.3rem; }

/* brand logo strip on Products */
.brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    align-items: center;
}
/* Uniform white logo wall — several source logos are light-on-
   transparent, so normalize all of them to one-color marks. */
.brand-grid img {
    width: 100%;
    max-width: 150px;
    margin: 0 auto;
    display: block;
    filter: brightness(0) invert(1);
    opacity: .72;
    transition: opacity .15s ease;
}
.brand-grid img:hover { opacity: 1; }

/* ---------- forms ---------- */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; max-width: 900px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

.input, .select, .textarea { margin-bottom: 1.1rem; }
form label {
    display: block;
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .85rem;
    color: var(--smoke);
    margin-bottom: .3rem;
}
form input[type="text"], form input[type="email"], form input[type="tel"],
form input[type="number"], form input[type="date"], form input[type="password"],
form select, form textarea {
    width: 100%;
    background: var(--coal);
    color: var(--cream);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: .65rem .8rem;
    font: inherit;
    transition: border-color .15s ease;
}
form input:focus, form select:focus, form textarea:focus {
    outline: none;
    border-color: var(--flame);
}
form textarea { resize: vertical; min-height: 9rem; }
.error-message { color: #ff8a8c; font-size: .9rem; margin-top: .3rem; }
/* Choices.js dark theme (order-form dropdowns). Scoped under .form-grid
   so these out-rank choices.css, which loads after this sheet. */
.form-grid .choices { margin-bottom: 0; }
.form-grid .choices__inner {
    background: var(--coal);
    border: 1px solid var(--line);
    border-radius: 3px;
    color: var(--cream);
    font-size: inherit;
    min-height: 0;
    padding: .55rem .8rem .4rem;
}
.form-grid .is-focused .choices__inner, .form-grid .is-open .choices__inner { border-color: var(--flame); }
.form-grid .choices__list--single { padding: 0; color: var(--cream); }
.form-grid .choices__list--dropdown, .form-grid .choices__list[aria-expanded] {
    background: var(--steel);
    border: 1px solid var(--line);
    border-radius: 3px;
}
.form-grid .choices__list--dropdown .choices__item, .form-grid .choices__list[aria-expanded] .choices__item { color: var(--cream); }
.form-grid .choices__list--dropdown .choices__item--selectable.is-highlighted,
.form-grid .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background: var(--coal); }
.form-grid .choices__placeholder { opacity: .55; }
.form-grid .choices[data-type*="select-one"]::after { border-color: var(--smoke) transparent transparent; }
.form-grid .choices[data-type*="select-one"].is-open::after { border-color: transparent transparent var(--smoke); }

/* reCAPTCHA v3 runs truly invisibly — hide Google's floating badge. */
.grecaptcha-badge { visibility: hidden !important; }

/* flash messages */
.message {
    border: 1px solid var(--line);
    border-left: 4px solid var(--flame);
    background: var(--coal);
    padding: .8rem 1.1rem;
    border-radius: 3px;
    margin: 1.2rem 0;
}
.message.success { border-left-color: #3f9e57; }
.message.error { border-left-color: var(--flame); }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--line); background: var(--coal); margin-top: 3rem; }
.site-footer .cols {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 0;
}
.site-footer address { text-align: left; }
.site-footer address { font-style: normal; color: var(--smoke); line-height: 1.7; }
.site-footer address strong { color: var(--cream); }
.site-footer .propane-mark img { max-width: 220px; }
.site-footer .fb-link { color: var(--smoke); }
.site-footer .fb-link:hover { color: var(--cream); }
.site-footer .fb-link .icon-facebook { width: 26px; height: 26px; transition: color .15s ease; }
.footer-base {
    border-top: 1px solid var(--line);
    padding: .9rem 0;
    font-size: .9rem;
    color: var(--smoke);
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.4rem;
    align-items: center;
    justify-content: space-between;
}
.footer-base .base-links { display: flex; align-items: center; gap: 1.4rem; }
.footer-base a { color: var(--smoke); }
.footer-base a:hover { color: var(--cream); }

/* ---------- sitemap page ---------- */

.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.4rem;
    margin-top: 1.4rem;
}
.sitemap-group { background: var(--steel); border: 1px solid var(--line); border-top: 3px solid var(--flame); border-radius: 4px; padding: 1.2rem 1.4rem; }
.sitemap-group ul { list-style: none; margin: 0; padding: 0; }
.sitemap-group li { border-bottom: 1px solid var(--line); }
.sitemap-group li:last-child { border-bottom: 0; }
.sitemap-group a { display: block; padding: .55rem 0; color: var(--cream); }
.sitemap-group a:hover { color: #fff; text-decoration: none; padding-left: .3rem; transition: padding-left .15s ease; }

/* ---------- error pages ---------- */

.errpage { text-align: center; padding: 4.5rem 0; }
.errpage .code {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(4rem, 12vw, 7rem);
    line-height: 1;
    color: var(--flame);
    margin: 0 0 .5rem;
}
.errpage p { max-width: 46ch; margin: 0 auto 1rem; color: var(--smoke); }
.errpage .btns { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.6rem; }

/* ---------- legacy CMS content compatibility ----------
   Body HTML stored in the contents table still carries
   Bootstrap-3-era classes; keep them rendering sensibly. */

.row { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 1rem 0; }
.row > [class*="col-"] { flex: 1 1 100%; min-width: 0; }
@media (min-width: 720px) {
    .row > .col-sm-4 { flex: 1 1 calc(33.333% - 1rem); }
    .row > .col-sm-5 { flex: 1 1 calc(41.666% - .9rem); }
    .row > .col-sm-6 { flex: 1 1 calc(50% - .7rem); }
    .row > .col-sm-7 { flex: 1 1 calc(58.333% - .6rem); }
    .row > .col-sm-12 { flex: 1 1 100%; }
}
.grey-bg {
    background: var(--steel);
    border: 1px solid var(--line);
    border-left: 4px solid var(--flame);
    border-radius: 4px;
    padding: 1.1rem 1.3rem;
    height: 100%;
}
.grey-bg h3 { margin-top: 0; }
h3 small, h4 small { display: block; font-size: .7em; color: var(--flame); letter-spacing: .06em; }
.img-circle { border-radius: 50%; }
.img-padding { padding: 0 .8rem .8rem 0; }
/* CMS content columns that lead with an image are the legacy
   "propane facts" trio — their source PNGs are tiny circle-cropped
   assets, so drop the images and promote the columns to tiles. */
.content-body .row > [class*="col-"]:has(> img) {
    background: var(--steel);
    border: 1px solid var(--line);
    border-top: 3px solid var(--flame);
    border-radius: 4px;
    padding: 1.3rem 1.4rem 1.4rem;
}
.content-body .row > [class*="col-"]:has(> img) > img { display: none; }
.content-body .row > [class*="col-"]:has(> img) h4 { margin-bottom: .4rem; }
.content-body .row > [class*="col-"]:has(> img) p { color: var(--smoke); margin: 0; font-size: .98rem; }
.pull-left { float: left; }
.pull-right { float: right; margin: 0 0 1rem 1.4rem; max-width: 40%; }
figure.pull-right { margin: 0 0 1rem 1.4rem; }
.img-thumbnail { border: 1px solid var(--line); border-radius: 4px; background: var(--coal); padding: 0; }
/* Pull-quote treatment for emphasized CMS headings
   ("We are your hometown business"). */
.content-body h3:has(> em) {
    border-left: 4px solid var(--flame);
    padding-left: 1.1rem;
    margin: 2rem 0 1.6rem;
    font-size: clamp(1.6rem, 3.4vw, 2.1rem);
    text-transform: none;
    letter-spacing: .01em;
}
.content-body h3 > em { font-style: italic; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.center-block { margin-left: auto; margin-right: auto; display: block; }
.content-body::after { content: ''; display: block; clear: both; }
.content-body p { color: var(--cream); }
.content-body h3 { margin-top: 1.6rem; }
@media (max-width: 600px) {
    .pull-right, figure.pull-right { float: none; margin: 0 auto 1rem; max-width: 70%; }
}