/* ============================================================
   The Hudstead — booth palette
   ============================================================

   The site was cream and terracotta. The brand — the boards behind the
   festival table, the labels, the signs — is black, bone and brass. This
   file moves the whole site onto the brand.

   It works by redefining the --rustic-* custom properties rather than by
   editing pages. rustic-theme.css declares those tokens and roughly 370
   rules across the stylesheets and the page templates read them, so
   changing them here re-skins every page at once, including the inline
   styles inside individual Blade files. Editing twenty templates would
   have left twenty places to drift.

   Loaded after rustic-theme.css so it wins on order, with the specificity
   raised wherever that file uses !important.

   Contrast, measured rather than assumed, all against #000:
     bone   #E4D3AE  14.23:1
     body   #CFC2A2  11.89:1
     brass  #C49558   7.79:1
     tan    #D3A97B   9.73:1
   The palette this replaces did not pass: terracotta on cream was 2.83:1
   and sage 2.66:1, both below the 4.5:1 floor for body text.
   ============================================================ */

:root {
    /* --- the booth, named --- */
    --hs-ink:        #000000;   /* page ground */
    --hs-ink-raised: #0A0A0A;   /* cards, wells, anything that lifts */
    --hs-bone:       #E4D3AE;   /* headings */
    --hs-cream-type: #EFE0C0;   /* high emphasis */
    --hs-body:       #CFC2A2;   /* body copy */
    --hs-brass:      #C49558;   /* accent: rules, links, buttons */
    --hs-brass-deep: #B8874A;   /* accent, pressed */
    --hs-tan:        #D3A97B;   /* secondary text */
    --hs-line:       rgba(196, 149, 88, 0.32);
    --hs-line-firm:  rgba(196, 149, 88, 0.55);

    /* --- the same colours, under the names the site already uses ---
       The old names describe the old palette, so they read oddly now.
       They are kept because every page references them; renaming would
       mean touching every page, which is the thing this file exists to
       avoid. */
    --rustic-cream:      var(--hs-ink);          /* was a light ground */
    --rustic-beige:      var(--hs-ink-raised);   /* was a secondary light ground */
    --rustic-charcoal:   var(--hs-body);         /* was dark text, now light text */
    --rustic-terracotta: var(--hs-brass);
    --rustic-sage:       var(--hs-brass);
    --rustic-sand:       var(--hs-line-firm);    /* borders */
    --rustic-taupe:      var(--hs-tan);
    --rustic-forest:     var(--hs-brass-deep);
    --rustic-burnt:      var(--hs-brass-deep);
    --rustic-wheat:      var(--hs-bone);
    --rustic-success:    var(--hs-brass);
    --rustic-hover:      var(--hs-bone);
}

/* ------------------------------------------------------------
   Grounds
   ------------------------------------------------------------ */

html,
body {
    background-color: var(--hs-ink) !important;
    color: var(--hs-body);
}

.page {
    background-color: var(--hs-ink);
    /* style.css starts this at opacity 0 and left it to the preloader's
       callback to reveal. The preloader is gone, so the page reveals
       itself. Removing this makes the whole site render blank. */
    opacity: 1 !important;
}

/* Belt and braces: if a cached view still emits the markup, it stays down. */
.preloader { display: none !important; }

.bg-default,
.bg-gray-100,
.bg-gray-4,
section.bg-default {
    background-color: var(--hs-ink) !important;
}

/* ------------------------------------------------------------
   Type
   ------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6,
[class^='heading-'] {
    color: var(--hs-bone) !important;
}

p, li, td, th, dd, dt, address, figcaption, label, small {
    color: var(--hs-body);
}

strong, b { color: var(--hs-cream-type); }

a { color: var(--hs-brass); }

a:hover,
a:focus {
    color: var(--hs-bone);
}

/* The theme's utility text colours were written for a light ground. */
.text-muted,
.text-secondary { color: var(--hs-tan) !important; }

/* ------------------------------------------------------------
   Buttons

   rustic-theme.css paints every form submit with the accent and white
   text, using !important. The accent is brass now, and white on brass is
   2.4:1 — unreadable. Brass wants black on it, not white.
   ------------------------------------------------------------ */

form button[type="submit"],
form input[type="submit"],
button[type="submit"]:not(.btn):not(.button):not(.rd-navbar-toggle):not(.menu-toggle),
input[type="button"],
input[type="submit"],
.btn-primary,
a.btn-primary {
    background-color: var(--hs-brass) !important;
    border-color: var(--hs-brass) !important;
    color: #000000 !important;
    font-weight: 600;
}

form button[type="submit"]:hover,
form input[type="submit"]:hover,
button[type="submit"]:not(.btn):not(.button):not(.rd-navbar-toggle):not(.menu-toggle):hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.btn-primary:hover,
a.btn-primary:hover {
    background-color: var(--hs-bone) !important;
    border-color: var(--hs-bone) !important;
    color: #000000 !important;
}

/* ------------------------------------------------------------
   Form fields

   White fields punch holes in a black page. Dark fields with a brass
   edge match the boards. 16px on the value, or iOS zooms the page the
   moment a field takes focus.
   ------------------------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea,
.form-input,
.input {
    background-color: var(--hs-ink-raised) !important;
    border: 1px solid var(--hs-line-firm) !important;
    color: var(--hs-body) !important;
    font-size: 16px;
}

input::placeholder,
textarea::placeholder,
.form-input::placeholder {
    color: var(--hs-tan);
    opacity: 0.65;
}

.form-input:focus,
.input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--hs-brass) !important;
    box-shadow: 0 0 0 3px rgba(196, 149, 88, 0.18) !important;
}

.form-label,
.form-wrap .form-label { color: var(--hs-tan); }

/* ------------------------------------------------------------
   Surfaces the theme fills with white
   ------------------------------------------------------------ */

.card,
.panel,
.well,
.list-group-item,
.table,
.modal-content,
.dropdown-menu {
    background-color: var(--hs-ink-raised) !important;
    color: var(--hs-body) !important;
    border-color: var(--hs-line) !important;
}

.table > thead > tr > th,
.table > tbody > tr > td,
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border-color: var(--hs-line) !important;
    color: var(--hs-body);
}

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

/* ------------------------------------------------------------
   Images

   Photography shot on white now sits on black. Nothing is recoloured —
   this only softens the hard white edge on decorative artwork that was
   drawn for a light page. Product photography is shot on black already
   and is left alone.
   ------------------------------------------------------------ */

.gallery-item img,
.owl-carousel img {
    border-radius: 3px;
}

/* ------------------------------------------------------------
   Selection and focus
   ------------------------------------------------------------ */

::selection {
    background: var(--hs-brass);
    color: #000000;
}

:focus-visible {
    outline: 2px solid var(--hs-brass);
    outline-offset: 2px;
}


/* ------------------------------------------------------------
   Breadcrumbs

   The strip under every page title was #f9faf9 — a white band across an
   otherwise black page, with the "Home" link nearly invisible on it.
   ------------------------------------------------------------ */

.breadcrumbs-custom-footer {
    background: var(--hs-ink) !important;
    border-top: 1px solid var(--hs-line);
    border-bottom: 1px solid var(--hs-line);
}

.breadcrumbs-custom-path a,
.breadcrumbs-custom-path li,
.breadcrumbs-custom-path li::after {
    color: var(--hs-tan) !important;
}

.breadcrumbs-custom-path a:hover { color: var(--hs-brass) !important; }

.breadcrumbs-custom-path li.active,
.breadcrumbs-custom-path .active { color: var(--hs-bone) !important; }

.breadcrumbs-custom-title,
.breadcrumbs-custom-body h1,
.breadcrumbs-custom-body h2 {
    color: var(--hs-bone) !important;
}

.breadcrumbs-custom-body,
.breadcrumbs-custom {
    background-color: var(--hs-ink);
}

/* ------------------------------------------------------------
   The stock template's teal

   #27ae93 is the accent the theme shipped with. It survives in 205 rules
   in style.css — tab underlines, hover fills, dividers, list markers —
   and every one of them was invisible against cream so nobody noticed.
   On black they read as a foreign colour, so they are answered here.
   ------------------------------------------------------------ */

.tabs-custom .nav-tabs .nav-link.active,
.tabs-custom .nav-tabs .nav-link:hover,
.tabs-line .nav-link.active {
    color: var(--hs-brass) !important;
}

/* The active-tab underline is a ::after with a teal background, not a
   border, which is why colouring borders alone left it teal. */
.tabs-line .nav-link::after,
.tabs-custom .nav-link::after {
    background: var(--hs-brass) !important;
}

.tabs-line .nav-tabs-wrap::before,
.tabs-line .nav-tabs-wrap::after { background: var(--hs-line) !important; }

.tabs-custom .nav-tabs,
.tabs-line .nav-tabs { border-color: var(--hs-line) !important; }

.quote-classic-mark,
.quote-default-mark,
blockquote cite,
.quote-classic cite { color: var(--hs-brass) !important; }

.divider,
.divider-decorate { background: var(--hs-brass) !important; }

/* ------------------------------------------------------------
   Anything brass-filled needs black on it, not white.
   White on #C49558 is 2.4:1.
   ------------------------------------------------------------ */

.fu-directions,
.fu-directions:hover,
.fu-directions:focus,
.gmp-cta-buttons a:hover,
.lotion-buy-btn,
.preview-btn.btn-primary-preview {
    color: #000000 !important;
}