/* ==========================================================================
   DARK-WEIGHTED THEME
   Loaded after custom.css. Flips the light content surfaces to dark charcoal
   while deliberately keeping a few LIGHT elements — product cards, the CEO
   card, the HACCP certificate — so bright objects float on dark ground.
   That contrast is the point: it reads premium rather than merely "dark".

   Everything here is additive. Removing the <link> in includes/header.php
   restores the light design exactly.
   ========================================================================== */

:root {
    /* Dark surface ramp */
    --d-bg: #14161a;
    /* page ground */
    --d-bg-2: #191c21;
    /* alternating band */
    --d-card: #ffffff;
    /* light cards stay light */
    --d-elev: #1f232a;
    /* elevated dark panels */
    --d-line: rgba(255, 255, 255, .09);

    /* Text on dark */
    --d-text: #e9ebee;
    --d-text-2: #c9c9c9;
    --d-text-3: #b3b9c0;

    /* Re-point shared tokens so custom.css rules inherit the dark palette */
    --c-ink: var(--d-text);
    --c-ink-2: var(--d-text-2);
    --c-muted: var(--d-text-3);
    --c-line: var(--d-line);
    --c-surface: var(--d-elev);
    --c-surface-2: var(--d-bg-2);
    --shadow-1: 0 2px 10px rgba(0, 0, 0, .35);
    --shadow-2: 0 22px 50px -14px rgba(0, 0, 0, .75);
}

/* --------------------------------------------------------------------------
   Ground
   -------------------------------------------------------------------------- */
body,
.wrapper {
    background-color: var(--d-bg);
    color: var(--d-text-2);
}

.section {
    background-color: var(--d-bg);
}

/* the theme's light band becomes the alternating dark band */
.light.section,
.light {
    background-color: var(--d-bg-2);
}

.dark.section {
    background-color: var(--d-bg);
}

.super-dark {
    background-color: #101216;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h5,
header h2,
.description-content h2,
.description-content h3 {
    color: var(--d-text);
}

p,
li,
.description-content,
.description-content p,
.description-content li,
.description-content span,
.description-content div {
    color: var(--d-text-2);
}

/* the theme scopes white text to .dark — keep that working on our grounds */
.dark h2,
.dark h3,
.dark p {
    color: var(--d-text);
}

blockquote {
    background: var(--d-elev);
    color: var(--d-text);
    border-color: var(--c-accent);
}

hr {
    border-color: var(--d-line);
}

/* --------------------------------------------------------------------------
   LIGHT-ON-DARK: product cards keep a white surface so the bottle cutouts pop
   -------------------------------------------------------------------------- */
.product-wrapper .product {
    background: var(--d-card);
    border-color: rgba(0, 0, 0, .06);
}

.product-wrapper .product h3 {
    color: #1b1d1e;
}

.product-wrapper .product:hover {
    border-color: rgba(0, 0, 0, .10);
}

/* --------------------------------------------------------------------------
   Section imagery
   -------------------------------------------------------------------------- */
.section-block img.img-responsive {
    border-color: var(--d-line);
}

/* The HACCP certificate is a white document scan — keep the white mat so it
   reads as a framed document on the dark ground. */
.section-block img[src*="haccp-certificate"] {
    background: #fff;
}

/* --------------------------------------------------------------------------
   CEO message — light card on dark ground
   -------------------------------------------------------------------------- */
.ceo-message-section {
    background-color: var(--d-bg-2);
}

.ceo-message-card {
    background: var(--d-elev);
    border-color: var(--d-line);
    box-shadow: var(--shadow-2);
}

.ceo-quote {
    color: var(--d-text);
}

.ceo-text {
    color: var(--d-text-2);
}

.signature-name {
    color: var(--d-text);
}

.ceo-signature {
    border-top-color: var(--d-line);
}

/* --------------------------------------------------------------------------
   News article
   -------------------------------------------------------------------------- */
.single-blog .description-content,
.single-blog p {
    color: var(--d-text-2);
}

.single-blog header h2 {
    color: var(--d-text);
}

/* --------------------------------------------------------------------------
   Product detail tabs
   -------------------------------------------------------------------------- */
/* style.css:2129 `.tabs>div` paints the whole description panel white, and
   :2108 gives the active tab a white pill. Both need matching specificity. */
.tabs>div {
    background: var(--d-bg-2);
}

.tabs ul {
    border-top-color: var(--d-line);
}

.tabs ul li a {
    color: var(--d-text-3);
    background: transparent;
}

.tabs ul li.ui-tabs-active a {
    color: var(--c-accent);
    background: var(--d-bg-2);
    box-shadow: inset 0 2px 0 var(--c-accent);
}

.tabs ul li a:hover {
    color: var(--d-text);
}

/* jQuery UI also stamps .ui-widget-content (white) onto the panel at runtime */
.ui-tabs-panel,
.ui-widget-content,
.ui-tabs .ui-tabs-panel {
    color: var(--d-text-2);
    border: 0;
}

/* --------------------------------------------------------------------------
   Forms (contact)
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    color: var(--d-text);
    background: transparent;
    border-color: var(--d-line);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-color: var(--c-accent);
    outline: none;
}

::placeholder {
    color: var(--d-text-3);
}

label {
    color: var(--c-accent);
}

/* contact page's light info panel */
.grey-background {
    background: var(--d-bg-2);
}

/* style.css:1004 hardcodes #1b1d1e on the address/email/phone values, which
   renders them invisible on the dark ground (only the coral labels showed). */
ul.contact-list li span {
    color: var(--d-text);
}

/* Google's map embed is inherently light; frame it so it reads as a
   deliberate panel rather than a blown-out hole in the layout. */
#map {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--d-line);
}

/* --------------------------------------------------------------------------
   Footer sits on the same ground; give it a hairline so it reads as a band
   -------------------------------------------------------------------------- */
footer {
    background: #101216;
    border-top: 1px solid var(--d-line);
}