/* ============================================================================
   Theme: ink-noir — for tattoo studios and dark craft brands.

   Pairs with a dark siteconfig palette (near-black background, bone text,
   antique gold accent, crimson secondary highlights) and display typography
   (e.g. Bebas Neue headings + Inter body via Theme.Fonts.GoogleFontsUrl).

   Design language: heavy ink, engraved lines, gold leaf, subtle grain.
   Public pages get the full treatment; the admin area is re-scoped to a
   neutral light surface so data stays highly readable.
   ========================================================================== */

:root {
    --ink-line: color-mix(in srgb, var(--brand-accent) 34%, transparent);
    --radius: 4px;
    --radius-sm: 3px;
    --shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
    --border-color: color-mix(in srgb, var(--brand-text) 16%, transparent);
    --section-pad: 5.5rem;
}

/* ---- Grain + vignette over the page background ---- */
body {
    position: relative;
    background-attachment: fixed;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(1100px 500px at 15% -10%, color-mix(in srgb, var(--brand-secondary) 30%, transparent), transparent 60%),
        radial-gradient(900px 600px at 110% 15%, color-mix(in srgb, var(--brand-accent) 9%, transparent), transparent 55%),
        repeating-conic-gradient(rgba(255, 255, 255, 0.012) 0% 25%, transparent 0% 50%);
    background-size: auto, auto, 3px 3px;
}
.site-main, .site-header, .site-footer, .announcement-bar { position: relative; z-index: 1; }

/* ---- Typography: engraved display headings ---- */
h1, h2, h3, .brand-text {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.section-title { letter-spacing: 0.09em; }
.section-eyebrow { letter-spacing: 0.34em; }
.hero-headline {
    letter-spacing: 0.05em;
    text-shadow: 0 4px 34px rgba(0, 0, 0, 0.65);
}

/* ---- Ornamental rules under section headings ---- */
.section-heading .section-title { position: relative; padding-bottom: 0.85rem; }
.section-heading .section-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 72px; height: 2px;
    background: linear-gradient(90deg, var(--brand-accent), transparent);
}
.section-heading.center .section-title::after {
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--brand-accent), transparent);
    width: 120px;
}

/* ---- Header: blackened steel bar ---- */
.site-header {
    background: color-mix(in srgb, var(--brand-bg) 72%, transparent);
    border-bottom: 1px solid var(--ink-line);
}
.nav-link:hover { color: var(--brand-accent); }
.announcement-bar {
    background: linear-gradient(90deg, var(--brand-secondary), color-mix(in srgb, var(--brand-secondary) 60%, var(--brand-accent)));
    color: var(--brand-text);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.8rem;
}

/* ---- Hero: deep ink wash even without an image ---- */
.hero-full { min-height: min(88vh, 820px); }
.hero { background: var(--brand-bg); }
.hero-media:has(.ai-placeholder)::before,
.hero-media:not(:has(img)):not(:has(video))::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 65% 90% at 70% 20%, color-mix(in srgb, var(--brand-secondary) 55%, transparent), transparent 70%),
        radial-gradient(ellipse 50% 70% at 20% 90%, color-mix(in srgb, var(--brand-accent) 14%, transparent), transparent 65%),
        linear-gradient(160deg, #101014, #060607 70%);
}
.hero-overlay {
    background:
        linear-gradient(rgba(4, 4, 6, calc(var(--hero-overlay-opacity) - 0.15)), rgba(4, 4, 6, var(--hero-overlay-opacity))),
        radial-gradient(85% 60% at 50% 100%, rgba(0, 0, 0, 0.55), transparent);
}
.hero-content { padding-top: 7rem; padding-bottom: 7rem; }
.hero .btn-primary {
    background: var(--brand-accent);
    color: var(--brand-text-on-accent, #121212);
    border: 1px solid color-mix(in srgb, var(--brand-accent) 60%, #fff 8%);
}
.hero .btn-primary:hover { box-shadow: 0 0 34px color-mix(in srgb, var(--brand-accent) 55%, transparent); }

/* ---- Cards: engraved plates ---- */
.surface-card {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--brand-surface) 92%, #fff 3%),
        var(--brand-surface));
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}
.surface-card:hover { border-color: var(--ink-line); }
.service-card, .plan-card, .team-card, .testimonial-card, .post-card { transition: transform 0.18s ease, border-color 0.18s ease; }
.service-card:hover, .plan-card:hover, .team-card:hover, .post-card:hover { transform: translateY(-4px); }

/* ---- Blog: cards as engraved plates, imagery with the flash-sheet grade ---- */
.post-card-media { background: linear-gradient(160deg, #101014, #060607 70%); }
.post-card-img, .post-hero { filter: saturate(0.92) contrast(1.06); }
.post-card:hover .post-card-img { filter: saturate(1) contrast(1.1); }
.post-hero { border-color: var(--ink-line); box-shadow: var(--shadow); }
.post-body h2, .post-body h3 { letter-spacing: 0.08em; }
.post-body blockquote { border-left-color: var(--brand-accent); color: var(--brand-text); }
.post-body a { color: var(--brand-accent); }
.post-featured { text-shadow: 0 0 12px color-mix(in srgb, var(--brand-accent) 60%, transparent); }
.post-author-avatar { border: 1px solid var(--ink-line); box-shadow: 0 0 0 2px var(--brand-bg); filter: saturate(0.92) contrast(1.06); }

.price-tag { letter-spacing: 0.04em; }
.plan-highlight { box-shadow: 0 0 0 1px var(--brand-accent), 0 18px 50px rgba(0, 0, 0, 0.6); }
.plan-badge { color: var(--brand-text-on-accent, #121212); letter-spacing: 0.1em; }
.plan-features li::before { content: "✠"; font-size: 0.8em; top: 0.15em; position: relative; }

/* ---- Gallery: framed flash sheets ---- */
.gallery-item {
    border: 1px solid var(--ink-line);
    box-shadow: inset 0 0 0 5px var(--brand-bg), inset 0 0 0 6px var(--ink-line), var(--shadow);
}
.gallery-item img { filter: saturate(0.92) contrast(1.06); }
.gallery-item:hover img { filter: saturate(1) contrast(1.1); }
.tag-chip.active { background: var(--brand-accent); color: var(--brand-text-on-accent, #121212); border-color: var(--brand-accent); }

/* ---- Testimonials: gold quote marks ---- */
.testimonial-quote { position: relative; padding-left: 1.4rem; }
.testimonial-quote::before {
    content: "❝";
    position: absolute; left: 0; top: -0.15em;
    color: var(--brand-accent); font-size: 1.3em;
}
.star-rating .star.filled { text-shadow: 0 0 12px color-mix(in srgb, var(--brand-accent) 60%, transparent); }

/* ---- CTA band: crimson seal ---- */
.cta-band {
    background:
        radial-gradient(60% 130% at 50% 0%, color-mix(in srgb, var(--brand-secondary) 70%, transparent), transparent),
        linear-gradient(180deg, #101014, #08080a);
    border-top: 1px solid var(--ink-line);
    border-bottom: 1px solid var(--ink-line);
}

/* ---- Booking chips ---- */
.option-chip { background: color-mix(in srgb, var(--brand-surface) 80%, transparent); }
.option-chip.active { background: var(--brand-accent); color: var(--brand-text-on-accent, #121212); border-color: var(--brand-accent); }
.step-num { background: var(--brand-accent); color: var(--brand-text-on-accent, #121212); }

/* ---- Forms on dark ---- */
.form-control { background: color-mix(in srgb, var(--brand-bg) 70%, var(--brand-surface)); }

/* ---- Footer ---- */
.site-footer {
    background: linear-gradient(180deg, #0a0a0c, #050506);
    border-top: 1px solid var(--ink-line);
}

/* ---- Badges tuned for dark ---- */
.badge-success { background: rgba(46, 160, 92, 0.16); color: #6fd39a; }
.badge-danger { background: rgba(203, 69, 56, 0.16); color: #ef8d81; }
.badge-warning { background: rgba(212, 164, 24, 0.14); color: #e6c46a; }
.alert-success { background: rgba(46, 160, 92, 0.12); color: #8fdcb0; border-color: rgba(46, 160, 92, 0.35); }
.alert-danger { background: rgba(203, 69, 56, 0.12); color: #f0a89e; border-color: rgba(203, 69, 56, 0.35); }
.alert-warning { background: rgba(212, 164, 24, 0.1); color: #e6c46a; border-color: rgba(212, 164, 24, 0.3); }

/* ============================================================================
   ADMIN + AUTH RESCOPE — keep operational surfaces neutral and readable.
   The dark brand palette stays on the public site; dashboards get daylight.
   ========================================================================== */
.admin-shell, .auth-page {
    --brand-bg: #f6f7f9;
    --brand-surface: #ffffff;
    --brand-text: #1d2530;
    --brand-text-muted: #5b6875;
    --border-color: rgba(20, 28, 38, 0.14);
    --shadow: 0 8px 26px rgba(15, 22, 32, 0.1);
    background: var(--brand-bg);
    color: var(--brand-text);
}
.admin-shell h1, .admin-shell h2, .admin-shell h3,
.auth-page h1, .auth-page h2, .auth-page h3 {
    text-transform: none;
    letter-spacing: normal;
    color: var(--brand-text);
}
.admin-sidebar { background: #14161c; }
.auth-page .auth-card { box-shadow: 0 18px 44px rgba(10, 14, 20, 0.16); }
.auth-page .brand-text { color: var(--brand-text); }
.admin-shell .badge-success { background: #e6f6ec; color: #1c7c3f; }
.admin-shell .badge-danger { background: #fdebe9; color: #b03024; }
.admin-shell .badge-warning { background: #fdf3d8; color: #93690e; }
.admin-shell .badge-muted { background: #eef0f3; color: #5b6875; }