/* Cahaya Ameng Metalindo — load after style.css.
 * Palette supplied by the owner. Existing layout/type/spacing stay intact.
 * Small text never uses red on navy (4.15:1) or white on red (3.57:1).
 * Tested pairs: paper/navy 14.83, taupe/navy 7.13, ink/red 5.08:1.
 */
:root {
    --brand-navy: #162051;
    --brand-red: #fc3231;
    --brand-paper: #fbfafa;
    --brand-ink: #160f12;
    --brand-taupe: #bbaea2;
    --ink: var(--brand-ink);
    --coal: var(--brand-navy);
    --steel: var(--brand-navy);
    --line: var(--brand-taupe);
    --paper: var(--brand-paper);
    --text: var(--brand-paper);
    --muted: var(--brand-taupe);
    --amber: var(--brand-red);
    --amber-2: var(--brand-paper);
    --shadow: 0 18px 40px rgba(22, 15, 18, 0.35);
    color-scheme: dark;
}

body { background: var(--brand-ink); color: var(--brand-paper); }
::selection { background: var(--brand-taupe); color: var(--brand-ink); }
a { color: var(--brand-taupe); }
a:hover { color: var(--brand-paper); }

/* Keep focus visible on red controls and both dark/light sections. */
:focus-visible {
    outline: 3px solid var(--brand-paper);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--brand-ink);
}
.section-paper :focus-visible {
    outline-color: var(--brand-navy);
    box-shadow: 0 0 0 6px var(--brand-paper);
}
.form-field input:focus-visible,
.form-field textarea:focus-visible {
    outline: 3px solid var(--brand-paper);
    outline-offset: 3px;
    border-color: var(--brand-taupe);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--brand-taupe); opacity: 1; }

.site-header,
.site-header.scrolled { background: var(--brand-ink); }
.site-header.scrolled { border-bottom-color: var(--brand-taupe); }
.brand,
.brand:hover,
.nav-list a,
.footer-title { color: var(--brand-paper); }
.brand-sub,
.nav-list a:hover,
.nav-list a.active,
.footer-nav a:hover,
.footer-bottom a:hover { color: var(--brand-taupe); }
.nav-list a.active { border-bottom-color: var(--brand-red); }
.nav-toggle { border-color: var(--brand-taupe); }
.nav-toggle-bar { background: var(--brand-paper); }

/* Use the actual album logo instead of the old decorative SVG; the existing
 * brand link still supplies its accessible name. No generated logo artwork.
 * :has() avoids duplication if the PHP owner later supplies an actual <img>.
 */
.brand:has(> svg.brand-mark)::before {
    content: "";
    display: block;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 4px;
    background: var(--brand-paper) url("../img/brand-logo-96.webp") center / contain no-repeat;
}
.brand:has(> svg.brand-mark) > svg.brand-mark { display: none; }
.brand-logo,
.brand > img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 4px;
    background: var(--brand-paper);
}

.btn-amber,
.nav-list a.btn-amber,
.skip-link,
.card-tag,
.pill.active,
.pagination a.active,
.produk-badge {
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: var(--brand-ink);
}
.btn-amber:hover,
.nav-list a.btn-amber:hover,
.skip-link:focus,
.pill.active:hover,
.pagination a.active:hover {
    background: var(--brand-taupe);
    border-color: var(--brand-taupe);
    color: var(--brand-ink);
}
.btn-dark,
.btn-dark:hover {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: var(--brand-paper);
}
.btn-dark:hover { text-decoration: underline; }
.btn-outline,
.btn-outline:hover {
    background: var(--brand-ink);
    border-color: var(--brand-taupe);
    color: var(--brand-paper);
}
.btn-outline:hover { border-color: var(--brand-paper); }

/* Existing photo layout is retained. Opaque-enough overlays keep text legible
 * independently of the brightness of the original album photograph.
 */
.hero-overlay {
    background: linear-gradient(90deg, rgba(22, 15, 18, 0.94), rgba(22, 32, 81, 0.92));
}
.hero::after { background: linear-gradient(to bottom, transparent, var(--brand-ink)); }
.hero-kicker,
.hero-sub,
.hero-title .text-amber,
.hero-stat span,
.hero-stat strong { color: var(--brand-paper); }
.hero-stat strong::after { background: var(--brand-red); }
.hero-scroll { color: var(--brand-taupe); }
.marquee-band { background: var(--brand-navy); border-color: var(--brand-taupe); }
.marquee { background: var(--brand-navy); color: var(--brand-taupe); }
.marquee-track,
.marquee-sep { color: var(--brand-taupe); }
.text-amber,
.detail-label,
.note-strip strong,
.footer-links a:hover,
.footer-social a:hover,
.kontak-value a:hover,
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { color: var(--brand-taupe); }
.layanan-num { color: var(--brand-taupe); }
.btn-dark-ghost,
.btn-dark-ghost:hover {
    color: var(--brand-ink);
    border-color: var(--brand-ink);
    background: var(--brand-paper);
}

.section-kicker,
.card-kategori-num,
.card-link,
.card-link:hover,
.point-num,
.timeline-title,
.timeline-item h3,
.pill:hover,
.pagination a:hover,
.artikel-back a,
.artikel-back a:hover,
.artikel-isi a,
.artikel-isi a:hover,
.breadcrumb a,
.breadcrumb a:hover,
.filter-note strong,
.err-desc a,
.err-desc a:hover,
.dropcap::first-letter { color: var(--brand-taupe); }
.artikel-isi a,
.err-desc a { text-decoration: underline; text-underline-offset: 0.18em; }
.card-link:hover { text-decoration: underline; }
.card-kategori:hover .card-kategori-arrow { color: var(--brand-paper); }
.usp-num { color: var(--brand-taupe); }
.sec-no { -webkit-text-stroke-color: rgba(187, 174, 162, 0.35); }
.page-hero-overlay {
    background: linear-gradient(120deg, rgba(252, 50, 49, 0.07), transparent 55%);
}

.section-paper { background: var(--brand-paper); color: var(--brand-ink); color-scheme: light; }
.section-title-dark,
.section-kicker-dark,
.tentang-preview-text,
.section-paper .section-lead { color: var(--brand-navy); }
.section-paper a { color: var(--brand-navy); }
.section-paper a:hover { color: var(--brand-ink); }
.section-paper .btn-dark,
.section-paper .btn-dark:hover { color: var(--brand-paper); }
.section-paper .btn-amber,
.section-paper .btn-amber:hover,
.section-paper .card-tag { color: var(--brand-ink); }
.sec-no-dark { -webkit-text-stroke-color: rgba(22, 32, 81, 0.2); }

.cta-band {
    background: var(--brand-red);
    color: var(--brand-ink);
    border-top-color: var(--brand-ink);
    border-bottom-color: var(--brand-ink);
}
.cta-title { color: var(--brand-ink); }
.cta-band .btn-outline,
.cta-band .btn-outline:hover {
    color: var(--brand-ink);
    border-color: var(--brand-ink);
    background: var(--brand-paper);
}
.proyek-overlay {
    background: linear-gradient(to top, rgba(22, 15, 18, 0.98), rgba(22, 15, 18, 0.8));
}
.proyek-kat { color: var(--brand-taupe); }
.proyek-lokasi { color: var(--brand-paper); }
.layanan-item:nth-of-type(odd),
.artikel-isi blockquote { background: var(--brand-navy); }
.artikel-isi blockquote { color: var(--brand-paper); border-left-color: var(--brand-red); }
.timeline-dot { box-shadow: 0 0 0 2px var(--brand-red); }
.alert,
.alert-success,
.alert-danger {
    background: var(--brand-navy);
    color: var(--brand-paper);
    border-color: var(--brand-taupe);
}
.alert-danger { border-left: 4px solid var(--brand-red); }
.footer-bottom,
.footer-bottom a { color: var(--brand-taupe); }
.btn-wa-float,
.btn-wa-float:hover {
    background: var(--brand-red);
    color: var(--brand-ink);
    box-shadow: 0 8px 28px rgba(22, 15, 18, 0.35);
}
.btn-wa-float::after { background: var(--brand-red); }
.btn-wa-float::before {
    background: var(--brand-paper);
    color: var(--brand-ink);
    border-color: var(--brand-taupe);
}
.err-title { color: var(--brand-paper); }
.err-code {
    color: var(--brand-red);
    text-shadow: 0 0 70px rgba(252, 50, 49, 0.1);
}
.err-stripe {
    background: repeating-linear-gradient(-45deg, var(--brand-red) 0 12px, transparent 12px 24px);
}
.err-bg-grid {
    background-image: linear-gradient(rgba(187, 174, 162, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(187, 174, 162, 0.08) 1px, transparent 1px);
}

@media (max-width: 1024px) {
    .site-nav { background: var(--brand-ink); }
}
@media (max-width: 640px) {
    .brand:has(> svg.brand-mark)::before,
    .brand-logo,
    .brand > img { width: 42px; height: 42px; flex-basis: 42px; }
}
@media (prefers-reduced-motion: reduce) {
    .btn-wa-float::after { animation: none; }
}