/*
Theme Name: Puff Hut Cafe - Littie Sweets Tiki Theme
Theme URI: https://thepuffhut.com
Description: Custom Divi child theme tailored for The Puff Hut Cafe & Littie Sweets edible line, matching the vintage tiki comic flyer aesthetic.
Author: The Puff Hut Cafe
Author URI: https://thepuffhut.com
Template: Divi
Version: 1.0.0
*/

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Boogaloo&family=Fredoka+One&family=Montserrat:wght@400;600;700;800&family=Permanent+Marker&display=swap');

/* --- Root Color Variables Matching the Flyer --- */
:root {
  --tiki-teal: #49B6BB;
  --tiki-dark-teal: #23898E;
  --tiki-orange: #FF7B38;
  --tiki-tan: #EEDBB2;
  --tiki-light-sand: #F7EBD4;
  --tiki-pink: #FF3377;
  --tiki-yellow: #FFC024;
  --tiki-dark-border: #1B1E24;
  --tiki-brown: #5C3A21;
}

/* --- Global Comic / Tiki Flyer Styling --- */
body {
  background-color: var(--tiki-light-sand) !important;
  font-family: 'Montserrat', sans-serif !important;
  color: var(--tiki-dark-border) !important;
}

/* Headings with Comic Comic / Tiki Display */
h1, h2, h3, .tiki-title {
  font-family: 'Bangers', cursive, Impact, sans-serif !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

/* Flyer Header Pink Pop Typography */
.littie-sweets-title {
  font-family: 'Bangers', cursive, Impact, sans-serif !important;
  color: var(--tiki-pink) !important;
  -webkit-text-stroke: 2px var(--tiki-dark-border);
  text-shadow: 3px 3px 0 var(--tiki-dark-border) !important;
  letter-spacing: 3px !important;
  font-size: 3.5rem !important;
  line-height: 1.1 !important;
}

.tiki-subtitle {
  font-family: 'Boogaloo', cursive, sans-serif !important;
  color: var(--tiki-dark-border) !important;
  font-size: 1.8rem !important;
}

/* Comic / Vintage Card Border Style */
.tiki-card, .tiki-tier-box {
  background: #FFFFFF;
  border: 3.5px solid var(--tiki-dark-border) !important;
  border-radius: 14px !important;
  box-shadow: 6px 6px 0px var(--tiki-dark-border) !important;
  padding: 24px !important;
  transition: all 0.25s ease-in-out !important;
}

.tiki-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 8px 8px 0px var(--tiki-dark-border) !important;
}

/* Teal Box Variant (Tier 1 & Left Column) */
.tiki-box-teal {
  background-color: #8ED8DC !important;
  border: 3px solid var(--tiki-dark-border) !important;
  box-shadow: 5px 5px 0px var(--tiki-dark-border) !important;
  border-radius: 12px !important;
}

/* Orange Box Variant (Tier 2 & Right Column) */
.tiki-box-orange {
  background-color: #FFA466 !important;
  border: 3px solid var(--tiki-dark-border) !important;
  box-shadow: 5px 5px 0px var(--tiki-dark-border) !important;
  border-radius: 12px !important;
}

/* Tier 3 Brookies Banner Header */
.tiki-tier3-banner {
  background: linear-gradient(135deg, #FF7B38 0%, #FFB347 100%) !important;
  border: 3.5px solid var(--tiki-dark-border) !important;
  box-shadow: 6px 6px 0px var(--tiki-dark-border) !important;
  border-radius: 14px !important;
  color: var(--tiki-dark-border) !important;
  padding: 16px !important;
  text-align: center !important;
}

/* Custom Tiki SMS Order Buttons */
.tiki-order-btn, .et_pb_button.tiki-order-btn {
  background: linear-gradient(135deg, #FF3377 0%, #FF7B38 100%) !important;
  color: #FFFFFF !important;
  font-family: 'Bangers', cursive, Impact, sans-serif !important;
  font-size: 1.4rem !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border: 3px solid var(--tiki-dark-border) !important;
  border-radius: 50px !important;
  padding: 14px 28px !important;
  box-shadow: 4px 4px 0px var(--tiki-dark-border) !important;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  display: inline-block !important;
  text-align: center !important;
  text-decoration: none !important;
}

.tiki-order-btn:hover, .et_pb_button.tiki-order-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 6px 6px 0px var(--tiki-dark-border) !important;
  background: linear-gradient(135deg, #FF7B38 0%, #FFC024 100%) !important;
  color: #1B1E24 !important;
}

/* Ribbon Header Effect */
.tiki-ribbon {
  background: #FFC024;
  border: 3px solid var(--tiki-dark-border);
  box-shadow: 4px 4px 0px var(--tiki-dark-border);
  font-family: 'Bangers', cursive, Impact, sans-serif;
  padding: 8px 20px;
  display: inline-block;
  transform: rotate(-1deg);
  border-radius: 8px;
}