/* ============================================================
   Bottled Bliss Blocks — Global Styles & Design Tokens
   ============================================================ */

:root {
  --font-heading: 'Playfair Display', serif;
  --font-body:    'Inter', sans-serif;

  --bbb-bg:            hsl(30, 25%, 96%);
  --bbb-fg:            hsl(20, 10%, 12%);
  --bbb-primary:       hsl(350, 30%, 28%);
  --bbb-secondary:     hsl(30, 15%, 90%);
  --bbb-muted:         hsl(20, 5%, 45%);
  --bbb-accent:        hsl(38, 50%, 55%);
  --bbb-border:        hsl(30, 15%, 85%);
  --bbb-card:          hsl(30, 20%, 98%);
}

/* ── Typography helpers ─────────────────────────────────── */
.bbb-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--bbb-accent);
}

.bbb-heading {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.15;
  color: var(--bbb-fg);
}

.bbb-body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--bbb-muted);
}

.bbb-divider {
  display: block;
  width: 4rem;
  height: 1px;
  background: var(--bbb-accent);
  margin: 2.5rem auto 0;
  border: none;
}

/* ── Buttons ────────────────────────────────────────────── */
.bbb-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 2.5rem;
  border: 1px solid;
  transition: background 0.4s, color 0.4s;
  cursor: pointer;
  background: transparent;
}

.bbb-btn--light {
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}
.bbb-btn--light:hover {
  background: #fff;
  color: var(--bbb-fg);
}

.bbb-btn--dark {
  color: var(--bbb-fg);
  border-color: rgba(0,0,0,0.25);
}
.bbb-btn--dark:hover {
  background: var(--bbb-fg);
  color: var(--bbb-bg);
}

/* ── Shared section padding ─────────────────────────────── */
.bbb-section {
  padding: 6rem 1.5rem;
}
@media (min-width: 1024px) {
  .bbb-section { padding: 8rem 1.5rem; }
}

.bbb-container {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.bbb-container--narrow {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

/* ── Subtle fade-in animation (CSS-only, no JS) ─────────── */
@keyframes bbbFadeUp {
  from { opacity: 0; transform: translateY(2rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.bbb-animate {
  animation: bbbFadeUp 0.8s ease both;
}

/* ============================================================
   Editor-only tweaks
   ============================================================ */
.wp-block-bottledbliss-blocks-hero-section img,
.wp-block-bottledbliss-blocks-page-hero img {
  pointer-events: none; /* avoid accidental image drags in editor */
}

/* ── Per-block section options ───────────────────────────── */
.bbb-bg--none { background: transparent; }
.bbb-bg--bg { background: var(--bbb-bg); }
.bbb-bg--secondary { background: hsl(30, 15%, 90%, .5); }
.bbb-bg--card { background: var(--bbb-card); }
.bbb-bg--primary { background: var(--bbb-primary); }
.bbb-bg--dark { background: var(--bbb-fg); }

.bbb-bg--primary,
.bbb-bg--dark,
.bbb-bg--primary .bbb-heading,
.bbb-bg--dark .bbb-heading {
  color: #fff;
}
.bbb-bg--primary .bbb-body,
.bbb-bg--dark .bbb-body {
  color: rgba(255,255,255,.72);
}
.bbb-bg--primary .bbb-divider,
.bbb-bg--dark .bbb-divider {
  background: rgba(255,255,255,.35);
}
.bbb-bg--primary .bbb-btn--dark,
.bbb-bg--dark .bbb-btn--dark {
  color: #fff;
  border-color: rgba(255,255,255,.35);
}
.bbb-bg--primary .bbb-btn--dark:hover,
.bbb-bg--dark .bbb-btn--dark:hover {
  background: #fff;
  color: var(--bbb-fg);
}

.bbb-section.bbb-pad--both { padding-top: 6rem; padding-bottom: 6rem; }
.bbb-section.bbb-pad--top { padding-top: 6rem; padding-bottom: 0; }
.bbb-section.bbb-pad--bottom { padding-top: 0; padding-bottom: 6rem; }
.bbb-section.bbb-pad--none { padding-top: 0; padding-bottom: 0; }

.bbb-wines__row.bbb-pad--both { padding-top: 4rem; padding-bottom: 4rem; }
.bbb-wines__row.bbb-pad--top { padding-top: 4rem; padding-bottom: 0; }
.bbb-wines__row.bbb-pad--bottom { padding-top: 0; padding-bottom: 4rem; }
.bbb-wines__row.bbb-pad--none { padding-top: 0; padding-bottom: 0; }

@media (min-width: 1024px) {
  .bbb-section.bbb-pad--both { padding-top: 8rem; padding-bottom: 8rem; }
  .bbb-section.bbb-pad--top { padding-top: 8rem; padding-bottom: 0; }
  .bbb-section.bbb-pad--bottom { padding-top: 0; padding-bottom: 8rem; }
  .bbb-section.bbb-pad--none { padding-top: 0; padding-bottom: 0; }

  .bbb-wines__row.bbb-pad--both { padding-top: 6rem; padding-bottom: 6rem; }
  .bbb-wines__row.bbb-pad--top { padding-top: 6rem; padding-bottom: 0; }
  .bbb-wines__row.bbb-pad--bottom { padding-top: 0; padding-bottom: 6rem; }
  .bbb-wines__row.bbb-pad--none { padding-top: 0; padding-bottom: 0; }
}

/* ── Image display modes ─────────────────────────────────── */
.bbb-textimg__img--cover img { object-fit: cover; }
.bbb-textimg__img--contain img { object-fit: contain; background: var(--bbb-secondary); }
.bbb-textimg__img--natural img { height: auto; aspect-ratio: auto; object-fit: contain; background: transparent; }

.bbb-sfeer.bbb-pad--both { padding-top: 6rem; padding-bottom: 6rem; }
.bbb-sfeer.bbb-pad--top { padding-top: 6rem; padding-bottom: 0; }
.bbb-sfeer.bbb-pad--bottom { padding-top: 0; padding-bottom: 6rem; }
.bbb-sfeer.bbb-pad--none { padding-top: 0; padding-bottom: 0; }
@media (min-width: 1024px) {
  .bbb-sfeer.bbb-pad--both { padding-top: 8rem; padding-bottom: 8rem; }
  .bbb-sfeer.bbb-pad--top { padding-top: 8rem; padding-bottom: 0; }
  .bbb-sfeer.bbb-pad--bottom { padding-top: 0; padding-bottom: 8rem; }
  .bbb-sfeer.bbb-pad--none { padding-top: 0; padding-bottom: 0; }
}

.bbb-quote-section.bbb-pad--both { padding-top: 8rem; padding-bottom: 8rem; }
.bbb-quote-section.bbb-pad--top { padding-top: 8rem; padding-bottom: 0; }
.bbb-quote-section.bbb-pad--bottom { padding-top: 0; padding-bottom: 8rem; }
.bbb-quote-section.bbb-pad--none { padding-top: 0; padding-bottom: 0; }


/* v2.3.5 Gutenberg button normalization
   Core Button blocks can receive .bbb-btn classes on the wrapper. Reset the wrapper
   and style the actual link so buttons keep the Bottled Bliss look everywhere. */
.wp-block-button.bbb-btn,
.wp-block-buttons .wp-block-button.bbb-btn,
.bbb-section .wp-block-button,
.bbb-hero .wp-block-button,
.bbb-page-hero .wp-block-button,
.bbb-cta .wp-block-button,
.bbb-textimg .wp-block-button,
.bbb-wines .wp-block-button,
.bbb-tastings .wp-block-button,
.bbb-events .wp-block-button,
.bbb-contact .wp-block-button,
.bbb-titlecols .wp-block-button,
.bbb-intro .wp-block-button,
.bbb-quote .wp-block-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
.wp-block-buttons {
  gap: 1rem !important;
  align-items: center;
}
.wp-block-button.bbb-btn .wp-block-button__link,
.bbb-section .wp-block-button__link,
.bbb-hero .wp-block-button__link,
.bbb-page-hero .wp-block-button__link,
.bbb-cta .wp-block-button__link,
.bbb-textimg .wp-block-button__link,
.bbb-wines .wp-block-button__link,
.bbb-tastings .wp-block-button__link,
.bbb-events .wp-block-button__link,
.bbb-contact .wp-block-button__link,
.bbb-titlecols .wp-block-button__link,
.bbb-intro .wp-block-button__link,
.bbb-quote .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 13rem;
  min-height: 3.25rem;
  padding: .95rem 2.35rem !important;
  border: 1px solid rgba(34,31,30,.24) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--bbb-fg) !important;
  box-shadow: none !important;
  outline: 0 !important;
  font-family: var(--font-body) !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: normal;
  transition: background .25s ease, color .25s ease, border-color .25s ease !important;
}
.wp-block-button.bbb-btn--dark .wp-block-button__link,
.wp-block-button.bbb-btn .wp-block-button__link:hover,
.bbb-section .wp-block-button__link:hover,
.bbb-cta .wp-block-button__link:hover,
.bbb-textimg .wp-block-button__link:hover,
.bbb-wines .wp-block-button__link:hover,
.bbb-tastings .wp-block-button__link:hover,
.bbb-events .wp-block-button__link:hover,
.bbb-contact .wp-block-button__link:hover,
.bbb-titlecols .wp-block-button__link:hover,
.bbb-intro .wp-block-button__link:hover,
.bbb-quote .wp-block-button__link:hover {
  background: var(--bbb-fg) !important;
  border-color: var(--bbb-fg) !important;
  color: #fff !important;
}
.wp-block-button.bbb-btn--dark .wp-block-button__link:hover {
  background: var(--bbb-fg) !important;
  border-color: var(--bbb-fg) !important;
  color: var(--bbb-bg) !important;
}
.wp-block-button.bbb-btn--light .wp-block-button__link,
.bbb-hero .wp-block-button__link,
.bbb-page-hero .wp-block-button__link,
.bbb-bg--primary .wp-block-button__link,
.bbb-bg--dark .wp-block-button__link {
  color: #fff !important;
  border-color: rgba(255,255,255,.35) !important;
  background: transparent !important;
}
.wp-block-button.bbb-btn--light .wp-block-button__link:hover,
.bbb-hero .wp-block-button__link:hover,
.bbb-page-hero .wp-block-button__link:hover,
.bbb-bg--primary .wp-block-button__link:hover,
.bbb-bg--dark .wp-block-button__link:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--bbb-fg) !important;
}
.bbb-btn.wp-block-button__link,
a.bbb-btn {
  border-radius: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 640px) {
  .wp-block-button.bbb-btn .wp-block-button__link,
  .bbb-section .wp-block-button__link,
  .bbb-hero .wp-block-button__link,
  .bbb-page-hero .wp-block-button__link,
  .bbb-cta .wp-block-button__link,
  .bbb-textimg .wp-block-button__link,
  .bbb-wines .wp-block-button__link,
  .bbb-tastings .wp-block-button__link,
  .bbb-events .wp-block-button__link,
  .bbb-contact .wp-block-button__link,
  .bbb-titlecols .wp-block-button__link,
  .bbb-intro .wp-block-button__link,
  .bbb-quote .wp-block-button__link {
    min-width: 0;
    width: 100%;
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
  }
}