/*
Theme Name:   Buds and Grabba Child
Description:  Child theme for Buds and Grabba — custom redesign
Author:       Buds and Grabba
Template:     blocksy
Version:      1.0.0
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --bg-base:        #0a0a0a;
  --bg-surface:     #141414;
  --bg-elevated:    #1a1a1a;
  --bg-featured:    #1a1f0c;
  --accent:         #c8f04a;
  --accent-dark:    #a8cc35;
  --text-primary:   #f0ebe0;
  --text-muted:     rgba(240, 235, 224, 0.55);
  --text-faint:     rgba(240, 235, 224, 0.35);
  --text-ghost:     rgba(240, 235, 224, 0.2);
  --border-subtle:  rgba(240, 235, 224, 0.08);
  --border-light:   rgba(240, 235, 224, 0.12);

  --font-display:   'Syne', sans-serif;
  --font-body:      'DM Sans', sans-serif;

  --radius-sm:      4px;
  --radius-md:      8px;

  --max-width:      1200px;
  --gutter:         clamp(20px, 4vw, 60px);
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Remove Blocksy defaults that fight the dark design */
body,
.site,
#page,
.site-content,
.content-wrap {
  background-color: var(--bg-base) !important;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text-primary); }

img { display: block; max-width: 100%; height: auto; }

/* ============================================================
   GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;1,9..40,300&display=swap');

/* ============================================================
   HEADER / NAV — overriding Blocksy Header Builder
   ============================================================ */
.site-header,
#header,
.header-wrapper {
  background: rgba(10, 10, 10, 0.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 0.5px solid var(--border-subtle) !important;
  position: sticky !important;
  top: 0;
  z-index: 100;
}

/* Logo */
.site-header .site-logo,
.site-header .custom-logo-link {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--text-primary) !important;
}

/* Nav links */
.site-header .nav-links-list li a,
.site-header #primary-menu a,
.site-header .ct-menu a {
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  transition: color 0.2s !important;
}

.site-header .ct-menu a:hover,
.site-header #primary-menu a:hover {
  color: var(--text-primary) !important;
}

/* CTA button in header */
.site-header .ct-header-button a,
.site-header .wp-block-button__link,
.header-cta-btn {
  background: var(--accent) !important;
  color: var(--bg-base) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 10px 20px !important;
  transition: background 0.2s !important;
}

.site-header .ct-header-button a:hover {
  background: var(--accent-dark) !important;
  color: var(--bg-base) !important;
}

/* ============================================================
   PAGE WRAPPER
   ============================================================ */
.site-main,
main#main,
.entry-content {
  background: var(--bg-base) !important;
  padding: 0 !important;
  max-width: 100% !important;
}

.wp-block-group,
.alignfull {
  max-width: 100% !important;
}

/* ============================================================
   SECTION: HERO
   ============================================================ */
.bg-hero-section {
  padding: clamp(48px, 8vw, 100px) var(--gutter) clamp(40px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}

/* Optional subtle noise texture overlay */
.bg-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.4;
}

.bg-hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.bg-hero-eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

.bg-hero-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(42px, 8vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
  color: var(--text-primary);
}

.bg-hero-headline em {
  font-style: italic;
  font-family: var(--font-body);
  font-weight: 300;
  color: rgba(240, 235, 224, 0.4);
  font-size: 0.85em;
}

.bg-hero-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 420px;
  margin-bottom: 40px;
}

.bg-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.bg-btn-primary,
.bg-btn-primary a {
  display: inline-block;
  background: var(--accent);
  color: var(--bg-base) !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  padding: 15px 32px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  text-decoration: none !important;
}

.bg-btn-primary:hover,
.bg-btn-primary a:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}

.bg-btn-ghost,
.bg-btn-ghost a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none !important;
  transition: color 0.2s;
}

.bg-btn-ghost::after { content: ' →'; }
.bg-btn-ghost:hover,
.bg-btn-ghost a:hover { color: var(--text-primary) !important; }

/* ============================================================
   SECTION: EVENT BANNER
   ============================================================ */
.bg-event-banner {
  background: var(--accent);
  color: var(--bg-base);
  padding: 20px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.bg-event-banner-left {}

.bg-event-banner-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 2px;
}

.bg-event-banner-date {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.bg-event-banner-middle {
  flex: 1;
  padding: 0 20px;
}

.bg-event-banner-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
}

.bg-event-banner-sub {
  font-size: 12px;
  opacity: 0.55;
  margin-top: 3px;
}

.bg-event-banner-cta,
.bg-event-banner-cta a {
  display: inline-block;
  background: var(--bg-base);
  color: var(--accent) !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  padding: 12px 22px;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.bg-event-banner-cta:hover { opacity: 0.85; }

/* ============================================================
   SECTION: TICKER / MARQUEE
   ============================================================ */
.bg-ticker {
  overflow: hidden;
  border-top: 0.5px solid var(--border-subtle);
  border-bottom: 0.5px solid var(--border-subtle);
  padding: 13px 0;
  background: rgba(240, 235, 224, 0.03);
}

.bg-ticker-inner {
  display: flex;
  width: max-content;
  animation: bg-ticker-scroll 22s linear infinite;
}

@keyframes bg-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.bg-ticker-item {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 28px;
  white-space: nowrap;
}

.bg-ticker-item span {
  color: var(--accent);
}

/* Pause on hover */
.bg-ticker:hover .bg-ticker-inner {
  animation-play-state: paused;
}

/* ============================================================
   SECTION SHARED
   ============================================================ */
.bg-section {
  padding: clamp(40px, 6vw, 80px) var(--gutter);
}

.bg-section-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.bg-section-label::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--border-light);
}

/* ============================================================
   SECTION: MISSION GRID
   ============================================================ */
.bg-mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.bg-mission-cell {
  background: var(--bg-surface);
  padding: clamp(22px, 3vw, 36px);
}

.bg-mission-cell--wide {
  grid-column: 1 / -1;
  background: var(--bg-elevated);
}

.bg-mission-big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
  color: var(--text-primary);
}

.bg-mission-big span { color: var(--accent); }

.bg-mission-sub {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 480px;
}

.bg-mission-cell-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.bg-mission-cell-body {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(240, 235, 224, 0.42);
}

/* ============================================================
   SECTION: EVENTS LIST
   ============================================================ */
.bg-events-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bg-event-card {
  background: var(--bg-surface);
  padding: 24px var(--gutter);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  text-decoration: none !important;
  transition: background 0.15s;
  border-left: 2px solid transparent;
}

.bg-event-card:hover {
  background: #1c1c1c;
  text-decoration: none !important;
}

.bg-event-card--featured {
  background: var(--bg-featured);
  border-left-color: var(--accent);
}

.bg-event-card--featured:hover {
  background: #1f2612;
}

.bg-event-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-ghost);
  min-width: 30px;
  padding-top: 3px;
}

.bg-event-card--featured .bg-event-num {
  color: var(--accent);
}

.bg-event-content { flex: 1; }

.bg-event-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  color: var(--text-primary) !important;
  margin-bottom: 6px;
}

.bg-event-meta {
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.05em;
}

.bg-event-arrow {
  font-size: 16px;
  color: var(--text-ghost);
  margin-top: 3px;
  transition: color 0.15s, transform 0.15s;
  flex-shrink: 0;
}

.bg-event-card:hover .bg-event-arrow {
  color: var(--accent);
  transform: translateX(4px);
}

/* ============================================================
   FOOTER OVERRIDE
   ============================================================ */
.site-footer,
#footer,
footer {
  background: var(--bg-base) !important;
  border-top: 0.5px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  padding: clamp(28px, 4vw, 48px) var(--gutter) !important;
}

.site-footer a { color: var(--text-muted) !important; }
.site-footer a:hover { color: var(--accent) !important; }

.bg-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
}

.bg-footer-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.bg-footer-logo span { color: var(--accent); }

.bg-footer-tagline {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-ghost);
  margin-top: 6px;
}

.bg-footer-copy {
  font-size: 11px;
  color: var(--text-ghost);
  text-align: right;
  line-height: 1.8;
}

/* ============================================================
   NEWSLETTER / CTA STRIP
   ============================================================ */
.bg-newsletter {
  background: var(--bg-surface);
  padding: clamp(32px, 5vw, 60px) var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.bg-newsletter-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.1;
  color: var(--text-primary);
}

.bg-newsletter-heading span { color: var(--accent); }

.bg-newsletter-form {
  display: flex;
  gap: 0;
  flex: 1;
  max-width: 420px;
}

.bg-newsletter-form input[type="email"] {
  flex: 1;
  background: var(--bg-elevated);
  border: 0.5px solid var(--border-light);
  border-right: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 13px 18px;
  border-radius: 0;
  outline: none;
}

.bg-newsletter-form input[type="email"]::placeholder {
  color: var(--text-faint);
}

.bg-newsletter-form input[type="email"]:focus {
  border-color: var(--accent);
}

.bg-newsletter-form button {
  background: var(--accent);
  color: var(--bg-base);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  padding: 13px 22px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.bg-newsletter-form button:hover {
  background: var(--accent-dark);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .bg-mission-grid {
    grid-template-columns: 1fr;
  }

  .bg-mission-cell--wide {
    grid-column: 1;
  }

  .bg-event-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .bg-event-banner-middle {
    padding: 0;
  }

  .bg-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .bg-footer-copy {
    text-align: left;
  }

  .bg-newsletter {
    flex-direction: column;
    align-items: flex-start;
  }

  .bg-newsletter-form {
    max-width: 100%;
    width: 100%;
  }
}
/* ── Logo size fix ── */
.bgh-logo img,
.bgh-logo .custom-logo,
.site-header .custom-logo,
.site-header .custom-logo-link img,
#header .custom-logo,
#header img.custom-logo {
  max-height: 50px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}

/* Keep the header locked at 64px no matter what */
.bgh-inner {
  height: 64px !important;
  overflow: hidden;
}
/* ── Contact page mobile fix ── */
@media (max-width: 800px) {
  .bgc-body {
    display: flex;
    flex-direction: column;
    padding: 28px 20px;
  }

  .bgc-info {
    position: static;
    top: auto;
  }

  .bgc-form-wrap {
    width: 100%;
    overflow: hidden;
  }

  /* Force WPForms / any form plugin to respect container width */
  .bgc-form-wrap form,
  .bgc-form-wrap .wpforms-form,
  .bgc-form-wrap .wpcf7-form,
  .bgc-form-wrap .frm-fluent-form {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .bgc-form-wrap input,
  .bgc-form-wrap textarea,
  .bgc-form-wrap select,
  .bgc-form-wrap .wpforms-field input,
  .bgc-form-wrap .wpforms-field textarea,
  .bgc-form-wrap .wpforms-field select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }

  /* Fix two-column form rows collapsing badly */
  .bgc-form-row--half {
    grid-template-columns: 1fr !important;
  }
}