@charset "UTF-8";
/* =========================================================
   main.scss — Rainbow Cookies & Fudge
   ========================================================= */
/* Color tokens */
/* Bootstrap helpers (optional future use) */
/* ------------------------------------
   Base / Tokens
------------------------------------ */
:root {
  --brand-red: #c1121f;
  --brand-black: #0b0b0c;
  --brand-gold: #c8a154;
}

html, body {
  background: #0b0b0c;
  color: #f6f3ef;
}

a {
  transition: color 0.2s ease, opacity 0.2s ease;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: from-font;
}

.bg-black {
  background-color: #0b0b0c !important;
}

.text-gradient {
  background: linear-gradient(135deg, #ff5470, #ffd166, #06d6a0, #118ab2, #9b5de5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.link-gold {
  color: #c8a154;
}

.link-gold:hover {
  color: #f6f3ef;
}

.navbar {
  letter-spacing: 0.02em;
}

.brand-mark {
  letter-spacing: 0.06em;
}

/* Focus & selection (a11y) */
:focus-visible {
  outline: 3px solid rgba(200, 161, 84, 0.55);
  outline-offset: 2px;
}

::selection {
  background: rgba(200, 161, 84, 0.35);
  color: #fff;
}

/* ------------------------------------
   Buttons
------------------------------------ */
.btn-outline-gold {
  --bs-btn-color: #c8a154;
  --bs-btn-border-color: #c8a154;
  --bs-btn-hover-bg: #c8a154;
  --bs-btn-hover-color: #0b0b0c;
  --bs-btn-hover-border-color: #c8a154;
  font-weight: 600;
}

/* Gold filled button (CDN Bootstrap compatible) */
.btn-gold {
  background-color: var(--brand-gold);
  color: #0b0b0c !important;
  border: 1px solid var(--brand-gold);
  font-weight: 600;
}

.btn-gold:hover,
.btn-gold:focus {
  background-color: #b5893f;
  border-color: #b5893f;
  color: #0b0b0c !important;
}

/* ------------------------------------
   Hero
------------------------------------ */
.hero {
  background: radial-gradient(1200px 400px at 80% -10%, rgba(200, 161, 84, 0.15), transparent 60%), linear-gradient(180deg, rgba(193, 18, 31, 0.12), transparent 60%);
}

.hero-stripe {
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: linear-gradient(90deg, #c1121f, #c8a154);
}

/* ------------------------------------
   Cards + Product tiles
------------------------------------ */
.card.product {
  background: #101012;
  border-width: 1px;
}

.card.product .card-title {
  color: #f6f3ef;
}

.card {
  background: #101012;
  border-color: rgba(193, 18, 31, 0.25);
}

.card-footer {
  background: #0e0e10;
}

/* Hover lift */
.card:hover, .recipe-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* ------------------------------------
   Card image wrappers (16:9)
------------------------------------ */
.card-img-wrap {
  position: relative;
  overflow: hidden;
  background: #0f0f11;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.card-img-wrap.img-16x9 {
  aspect-ratio: 16/9;
}

.card-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------
   Glass effect for hero image
------------------------------------ */
.glass-card {
  background: rgba(16, 16, 18, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(200, 161, 84, 0.25);
}

/* ------------------------------------
   Utilities
------------------------------------ */
.border-danger-subtle {
  border-color: rgba(193, 18, 31, 0.35) !important;
}

.shadow-xl {
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
}

img {
  object-fit: cover;
}

/* Hover: rainbow underline; Active: solid white underline */
.navbar .nav-link {
  position: relative;
}

.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.25rem;
  height: 2px;
  background: linear-gradient(90deg, #ff0040 0%, #ff7a00 16%, #ffd400 33%, #6dff00 50%, #00e5ff 66%, #7a00ff 83%);
  border-radius: 2px;
  opacity: 0; /* hidden by default */
  transition: opacity 0.2s ease; /* fade only */
}

/* show rainbow on hover/focus */
.navbar .nav-link:hover::after,
.navbar .nav-link:focus::after {
  opacity: 1;
}

/* Footer */
footer a {
  opacity: 0.9;
}

footer a:hover {
  opacity: 1;
}

/* ------------------------------------
   Blog / Article Typography
------------------------------------ */
.blog-post {
  max-width: 78ch;
  margin-inline: auto;
  /* base text */
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #e9e6e2;
  /* headings */
  /* rhythm */
  /* links */
  /* lists */
  /* figures */
  /* blockquotes */
  /* code */
  /* tables */
  /* hr */
  /* callouts */
}
.blog-post h1, .blog-post .h1, .blog-post h2, .blog-post .h2, .blog-post h3, .blog-post .h3 {
  color: #f6f3ef;
  letter-spacing: 0.015em;
  line-height: 1.25;
  margin-top: 2.2rem;
  margin-bottom: 0.8rem;
}
.blog-post h1, .blog-post .h1 {
  font-size: clamp(1.8rem, 2.2vw + 1.4rem, 2.4rem);
}
.blog-post h2, .blog-post .h2 {
  font-size: clamp(1.4rem, 1.2vw + 1.1rem, 1.8rem);
  border-bottom: 1px solid rgba(193, 18, 31, 0.35);
  padding-bottom: 0.35rem;
}
.blog-post h3, .blog-post .h3 {
  font-size: clamp(1.2rem, 0.9vw + 1rem, 1.4rem);
  color: #f0ede8;
}
.blog-post p, .blog-post ul, .blog-post ol, .blog-post blockquote, .blog-post pre, .blog-post table, .blog-post figure {
  margin: 0 0 1.1rem;
}
.blog-post .lead {
  font-size: 1.15em;
  color: #d9d5d0;
}
.blog-post a {
  color: var(--brand-gold);
  text-decoration-color: rgba(200, 161, 84, 0.45);
}
.blog-post a:hover {
  color: #fff;
  text-decoration-color: currentColor;
}
.blog-post ul, .blog-post ol {
  padding-left: 1.25rem;
}
.blog-post li + li {
  margin-top: 0.35rem;
}
.blog-post li::marker {
  color: var(--brand-gold);
}
.blog-post figure {
  margin: 1.25rem 0;
}
.blog-post img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}
.blog-post figcaption {
  color: #a8a39c;
  font-size: 0.9rem;
  margin-top: 0.4rem;
}
.blog-post blockquote {
  border-left: 4px solid rgba(193, 18, 31, 0.6);
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, rgba(193, 18, 31, 0.08), rgba(200, 161, 84, 0.06));
  border-radius: 0.5rem;
  color: #e9e6e2;
}
.blog-post blockquote footer {
  color: #b7b2ad;
  font-size: 0.9rem;
}
.blog-post code {
  background: #141416;
  padding: 0.15rem 0.35rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(200, 161, 84, 0.25);
}
.blog-post pre {
  background: #101013;
  padding: 1rem;
  border-radius: 0.6rem;
  overflow: auto;
  border: 1px solid rgba(193, 18, 31, 0.25);
}
.blog-post pre code {
  background: transparent;
  border: 0;
  padding: 0;
}
.blog-post table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(193, 18, 31, 0.25);
}
.blog-post th, .blog-post td {
  padding: 0.6rem 0.75rem;
  border-top: 1px solid rgba(193, 18, 31, 0.25);
}
.blog-post thead th {
  background: #0e0e10;
  color: #f6f3ef;
}
.blog-post hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(193, 18, 31, 0.35), rgba(200, 161, 84, 0.35));
  margin: 2rem 0;
}
.blog-post .callout {
  padding: 0.9rem 1rem;
  border-radius: 0.6rem;
  margin: 1rem 0;
  border: 1px solid rgba(200, 161, 84, 0.35);
  background: rgba(200, 161, 84, 0.08);
}
.blog-post .callout.warn {
  border-color: rgba(193, 18, 31, 0.5);
  background: rgba(193, 18, 31, 0.08);
}

/* Drop-cap disabled globally */
.dropcap:first-letter {
  float: none !important;
  font-size: inherit !important;
  padding: 0 !important;
  color: inherit !important;
}

/* ------------------------------------
   Universal Card polish (matches site)
------------------------------------ */
.card,
.recipe-card {
  background: linear-gradient(180deg, rgba(200, 161, 84, 0.06), rgba(193, 18, 31, 0.05)) #101012;
  border: 1px solid rgba(193, 18, 31, 0.3);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.card-header, .card-footer {
  background: #0e0e10;
  border-color: rgba(193, 18, 31, 0.25);
}

/* Images inside cards (legacy card-img-top) */
.card-img-top, .recipe-card img {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  object-fit: cover;
}

/* ------------------------------------
   Recipe Card (pretty + responsive)
------------------------------------ */
.recipe-card {
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
}
.recipe-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-red), var(--brand-gold));
  opacity: 0.9;
}
.recipe-card h3 {
  color: #f6f3ef;
  margin-top: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.recipe-card h4 {
  color: var(--brand-gold);
  margin-top: 1rem;
}
.recipe-card .rc-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr; /* mobile: single column */
}
.recipe-card ul, .recipe-card ol {
  margin: 0;
}
.recipe-card li::marker {
  color: var(--brand-gold);
}
.recipe-card .info {
  background: rgba(14, 14, 16, 0.7);
  border: 1px solid rgba(193, 18, 31, 0.25);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  color: #b7b2ad;
  font-size: 0.95rem;
}
.recipe-card .note {
  margin-top: 1rem;
  border: 1px dashed rgba(193, 18, 31, 0.45);
  background: rgba(193, 18, 31, 0.08);
  border-radius: 12px;
  padding: 0.75rem 1rem;
}

/* Meta chips */
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(200, 161, 84, 0.12);
  border: 1px solid rgba(200, 161, 84, 0.35);
  font-size: 0.85rem;
  color: #e9e6e2;
}

.meta-chip .dot, span.dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #c8a154;
  opacity: 0.9;
}

/* Helper: section titles inside cards */
.section-title {
  border-bottom: 1px solid rgba(200, 161, 84, 0.28);
  padding-bottom: 0.35rem;
  margin-bottom: 0.75rem;
}

/* Breakpoints */
@media (min-width: 768px) {
  .recipe-card .rc-grid {
    grid-template-columns: 1fr 1.35fr;
    align-items: start;
  }
}
@media (min-width: 992px) {
  .blog-post {
    max-width: 82ch;
  }
}
@media (max-width: 576px) {
  .blog-post {
    font-size: 1rem;
    line-height: 1.7;
  }
  .blog-post h1, .blog-post .h1 {
    margin-top: 1.6rem;
  }
  .blog-post h2, .blog-post .h2 {
    margin-top: 1.4rem;
  }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
/* ------------------------------------
   ORDER PAGE OVERRIDES (no inline CSS)
------------------------------------ */
body.order-page .bg-panel {
  background: #1e232a; /* lighter panel for the item grid */
  border: 1px solid rgba(200, 161, 84, 0.42);
  border-radius: 14px;
  padding: 1rem;
}

body.order-page .section-title {
  color: #f6f3ef;
  border-bottom: 1px solid rgba(200, 161, 84, 0.5);
  padding-bottom: 0.35rem;
  margin-bottom: 0.75rem;
}

body.order-page .help {
  color: #e2ddd6 !important;
}

/* brighter helper text */
body.order-page .text-secondary {
  color: #d2cdc6 !important;
}

/* brighter product cards inside the panel */
body.order-page .card.product,
body.order-page .card.border-danger-subtle {
  background: #20252c; /* lighter than normal dark */
  border-color: rgba(200, 161, 84, 0.48);
}

body.order-page .card.product .card-body {
  color: #f0ece7;
}

/* Inputs */
body.order-page .form-label {
  color: #f6f3ef;
  font-weight: 600;
}

body.order-page .form-control,
body.order-page .form-select {
  background: #242a33;
  color: #f6f3ef;
  border-color: rgba(200, 161, 84, 0.65);
}

body.order-page .form-control::placeholder {
  color: #c9c4bd;
}

body.order-page .form-control:focus,
body.order-page .form-select:focus {
  border-color: #c8a154;
  box-shadow: 0 0 0 0.25rem rgba(200, 161, 84, 0.2);
}

/* -------- Global readability tune -------- */
/* Old muted: #b7b2ad — a bit too low-contrast on #101012 */
.text-secondary {
  color: #d2cdc6 !important;
}

/* If you ever need the older, softer grey: */
.text-subtle {
  color: #b7b2ad !important;
}

/* -------- Accent headlines (not for small text) -------- */
.heading-gold {
  color: var(--brand-gold);
}

/* solid gold */
.heading-gold-soft {
  color: rgb(220.7, 197.9, 153.75);
}

/* warmer off-gold */
/* -------- Products page polish (scoped) -------- */
body.products-page h2 {
  color: var(--brand-gold);
}

/* section headings: Cookies, Fudge */
body.products-page .card.product .card-title {
  color: #f6f3ef;
}

/* product card titles = bright white */
body.products-page dl dt {
  color: #e8e3dd;
}

/* “Sizes”, “Allergens” labels */
body.products-page .card.product .text-secondary { /* make card body text brighter */
  color: #d2cdc6 !important;
}

/* -------- Blog page polish (scoped) -------- */
body.blog-page h2 {
  color: var(--brand-gold);
}

/* section headings: Cookies, Fudge */
body.blog-page .card.product .card-title {
  color: #f6f3ef;
}

/* product card titles = bright white */
body.blog-page dl dt {
  color: #e8e3dd;
}

/* “Sizes”, “Allergens” labels */
body.blog-page .card.product .text-secondary { /* make card body text brighter */
  color: #d2cdc6 !important;
}

/* Fix video positioning and spacing within cards */
.card .video-container {
  position: relative; /* Ensure proper positioning */
  width: 100%; /* Take up full width of the card */
  margin-bottom: 1rem; /* Add spacing below the video */
}

.card .ratio iframe {
  position: relative; /* Ensure iframe stays in place */
  z-index: 1; /* Prevent iframe from misunderstanding layers */
  pointer-events: auto; /* Ensure iframe is clickable */
}

.card-body {
  position: relative; /* Ensure content layers properly */
  z-index: 0; /* Keep below video */
}

.card .stretched-link {
  z-index: 0; /* Prevent overlap with interactive video */
}

/* =========================================================
   PRINT — white paper / black text (fixed)
   ========================================================= */
@page {
  margin: 12mm;
}
@media print {
  .navbar, .hero, .hero-stripe, footer,
  .btn, .badge, .badges, .card-footer,
  .post-header .meta {
    display: none !important;
  }
  html, body {
    background: #fff !important;
    color: #000 !important;
    font: 12pt/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  img, svg {
    background: transparent !important;
  }
  .bg-dark, .bg-black, .text-light,
  header, main, .post-header,
  .card, .glass-card,
  .container, .container *:not(img) {
    background: #fff !important;
    color: #000 !important;
  }
  .container {
    max-width: none !important;
  }
  .blog-post {
    max-width: 100% !important;
    margin: 0 !important;
  }
  h1, h2, h3, h4, h5 {
    border: 0 !important;
    page-break-after: avoid;
  }
  h1 {
    font-size: 20pt;
  }
  h2 {
    font-size: 16pt;
    margin-top: 12pt;
  }
  h3 {
    font-size: 13pt;
    margin-top: 10pt;
  }
  p, ul, ol {
    margin: 0 0 8pt;
  }
  ul, ol {
    padding-left: 18pt;
    list-style-type: disc;
  }
  li {
    break-inside: avoid;
  }
  li::marker {
    color: #000 !important;
  }
  a {
    color: #000 !important;
    text-decoration: underline;
  }
  a[href^="#"]::after,
  a[role=button]::after,
  a[href^="javascript:"]::after,
  a[href^="mailto:"]::after {
    content: "";
  }
  a[href^=http]:not(.no-print-url)::after {
    content: " (" attr(href) ")";
    font-size: 0.9em;
  }
  .dropcap:first-letter {
    float: none !important;
    font-size: inherit !important;
    padding: 0 !important;
    color: #000 !important;
  }
  figure {
    break-inside: avoid;
  }
  img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 8pt 0;
    border: 0 !important;
    border-radius: 0 !important;
  }
  figcaption {
    font-size: 9pt;
    margin-top: 3pt;
    color: #000 !important;
    background: #fff !important;
  }
  .recipe-card {
    border: 1px solid #000 !important;
    background: #fff !important;
    padding: 12pt !important;
    border-radius: 0 !important;
    position: static !important;
  }
  .recipe-card::before {
    display: none !important;
  }
  .recipe-card *, .callout, .note, .info, blockquote, table, th, td {
    color: #000 !important;
    background: #fff !important;
    border-color: #000 !important;
  }
  .recipe-card .rc-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 16pt;
    row-gap: 8pt;
  }
  blockquote, .callout, .note, .info {
    border: 1px solid #000 !important;
    padding: 8pt 10pt !important;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #000;
  }
  th, td {
    border-top: 1px solid #000;
    padding: 6pt 8pt;
  }
  hr {
    background: #000 !important;
    height: 1px !important;
    border: 0 !important;
  }
}

/*# sourceMappingURL=main.css.map */