/*
 Theme Name:   BirdieChaser
 Theme URI:    https://www.birdiechaser.com
 Description:  Custom child theme for BirdieChaser website built on GeneratePress framework
 Author:       Smoking Gun Creative Agency
 Author URI:   https://www.nosmokenofire.com
 Template:     generatepress
 Version:      3.6
 
 REFACTOR NOTES:
 - v3.6: Fixed mobile account page - username size/padding, full-width badge, vertical stacked tabs
 - v3.5: Fixed mobile cross-sells to show 2 products in column layout, 18px text for title/tagline/price
 - Consolidated duplicate page-specific styles into reusable components
 - Fixed form input border specificity issues
 - Styled radio buttons, tooltips, and request buttons to match design system
 - Added iframe-safe styles for Three.js integration
 - Preserved all spacing/sizing to prevent visual regression
 - Fixed iframe layout issues by separating container expansion from content centering
 - v3.4: Updated account page banner to match new mockup design
*/

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&family=Outfit:wght@500;600;700&display=swap');

/* ========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   Design token system - modify here for site-wide updates
   ======================================== */
:root {
  /* Color Palette */
  --color-cream-light: #fbe8c6;
  --color-cream-medium: #f2d8a2;
  --color-cream-glow: #f9e0b2;
  --color-brown-dark: #412818;
  --color-brown-medium: #703f06;
  --color-brown-darker: #29170d;
  --color-brown-inner-glow: #2b180e;
  --color-yellow-bright: #ffbc00;
  --color-text-muted: #927f67;
  --color-link-gold: #b8860b;
  
  /* Typography - Font Families */
  --font-heading: 'Libre Baskerville', serif;
  --font-body: 'Outfit', sans-serif;
  
  /* Typography - Heading Sizes (responsive via clamp) */
  --font-size-h1: clamp(2.5rem, 5vw, 3.688rem); /* 40px -> 59px */
  --font-size-h2: clamp(2.25rem, 4.5vw, 3.188rem); /* 36px -> 51px */
  --font-size-h3: clamp(2rem, 4vw, 2.813rem); /* 32px -> 45px */
  --font-size-h4: clamp(1.75rem, 3.5vw, 2.375rem); /* 28px -> 38px */
  --font-size-h5: clamp(1.5rem, 3vw, 2.188rem); /* 24px -> 35px */
  
  /* Typography - Body Sizes */
  --font-size-xl: 1.625rem; /* 26pt */
  --font-size-lg: 1.438rem; /* 23pt */
  --font-size-md: 1.25rem;  /* 20pt */
  --font-size-base: 1.188rem; /* 19pt */
  --font-size-sm: 1.125rem; /* 18pt */
  --font-size-xs: 1rem;     /* 16pt */
  --font-size-xxs: 0.938rem; /* 15pt */
  
  /* Typography - Weights */
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  
  /* Border Radius */
  --radius-standard: 20px;
  --radius-small: 8px;
  --radius-corner-sm: 100px;
  --radius-corner-lg: 200px;
  
  /* Borders/Strokes */
  --stroke-thin: 3px;
  --stroke-medium: 5px;
  
  /* Shadows & Effects */
  --glow-cream: inset 0 0 20px rgba(249, 224, 178, 0.5);
  --glow-brown: inset 0 0 20px rgba(43, 24, 14, 0.5);
  
  /* Gradients */
  --gradient-cream: linear-gradient(180deg, #fbe8c6 0%, #f9e0b2 100%);
  --gradient-brown: linear-gradient(180deg, #412818 0%, #29170d 100%);
  
  /* Transitions - consistent timing across site */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  
  /* Spacing Scale - not actively used yet but available for future */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
}

/* ========================================
   BASE TYPOGRAPHY
   Global text styling for body and headings
   ======================================== */
body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  color: var(--color-brown-dark);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  margin-top: 0;
}

/* Using clamp() for responsive sizing - eliminates need for some media queries */
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }

/* Ensure smooth scrolling on iOS devices within iframe */
body {
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}

/* ========================================
   GLOBAL BUTTONS
   Standard WooCommerce and form buttons
   Note: Excludes Ultimate Member buttons (styled separately below)
   ======================================== */
button[type="submit"]:not(.um-button),
.woocommerce-button {
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  text-transform: uppercase;
  color: var(--color-cream-light);
  background-color: var(--color-brown-dark);
  border: none;
  border-radius: var(--radius-standard);
  padding: 12px 32px;
  cursor: pointer;
  transition: opacity var(--transition-base);
}

button[type="submit"]:not(.um-button):hover,
.woocommerce-button:hover {
  opacity: 0.9;
}

/* Secondary button variant - Yellow/Gold */
.button-secondary {
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  text-transform: uppercase;
  color: var(--color-brown-dark);
  background-color: var(--color-yellow-bright);
  border: none;
  border-radius: var(--radius-standard);
  padding: 12px 32px;
  cursor: pointer;
  transition: opacity var(--transition-base);
}

.button-secondary:hover {
  opacity: 0.9;
}

/* ----------------------------------------
   RESPONSIVE UTILITY CLASSES
   ---------------------------------------- */
@media (max-width: 340px) {
  .hide-uimob340 { display: none !important; }
}

@media (max-width: 500px) {
  .hide-uimob500 { display: none !important; }
}

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

/* ----------------------------------------
   LEGAL PAGES: Privacy (460), Terms (523), 524, 526
   ---------------------------------------- */
.page-id-460 .entry-content,
.page-id-460 .entry-content p,
.page-id-523 .entry-content,
.page-id-523 .entry-content p,
.page-id-524 .entry-content,
.page-id-524 .entry-content p,
.page-id-526 .entry-content,
.page-id-526 .entry-content p {
  font-size: 16px !important;
  line-height: 1.7 !important;
}
.page-id-460 .entry-content h1,
.page-id-460 .wp-block-heading.h1,
.page-id-523 .entry-content h1,
.page-id-523 .wp-block-heading.h1,
.page-id-524 .entry-content h1,
.page-id-524 .wp-block-heading.h1,
.page-id-526 .entry-content h1,
.page-id-526 .wp-block-heading.h1 {
  font-size: 32px !important;
}
.page-id-460 .entry-content h2,
.page-id-460 h2.wp-block-heading,
.page-id-523 .entry-content h2,
.page-id-523 h2.wp-block-heading,
.page-id-524 .entry-content h2,
.page-id-524 h2.wp-block-heading,
.page-id-526 .entry-content h2,
.page-id-526 h2.wp-block-heading {
  font-family: 'Outfit', sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
}
.page-id-460 .entry-content h3,
.page-id-460 h3.wp-block-heading,
.page-id-523 .entry-content h3,
.page-id-523 h3.wp-block-heading,
.page-id-524 .entry-content h3,
.page-id-524 h3.wp-block-heading,
.page-id-526 .entry-content h3,
.page-id-526 h3.wp-block-heading {
  font-family: 'Outfit', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}
.page-id-460 .entry-content h4,
.page-id-460 h4.wp-block-heading,
.page-id-523 .entry-content h4,
.page-id-523 h4.wp-block-heading,
.page-id-524 .entry-content h4,
.page-id-524 h4.wp-block-heading,
.page-id-526 .entry-content h4,
.page-id-526 h4.wp-block-heading {
  font-size: 16px !important;
  font-family: 'Outfit', sans-serif !important;
}
/* Legal Pages - Cream Background (Full Coverage) */
.page-id-460,
.page-id-523,
.page-id-524,
.page-id-526,
.page-id-460 body,
.page-id-523 body,
.page-id-524 body,
.page-id-526 body {
  background-color: var(--color-cream-light) !important;
}

.page-id-460 .site,
.page-id-460 .site-content,
.page-id-460 .content-area,
.page-id-460 .inside-article,
.page-id-460 .entry-content,
.page-id-460 article,
.page-id-523 .site,
.page-id-523 .site-content,
.page-id-523 .content-area,
.page-id-523 .inside-article,
.page-id-523 .entry-content,
.page-id-523 article,
.page-id-524 .site,
.page-id-524 .site-content,
.page-id-524 .content-area,
.page-id-524 .inside-article,
.page-id-524 .entry-content,
.page-id-524 article,
.page-id-526 .site,
.page-id-526 .site-content,
.page-id-526 .content-area,
.page-id-526 .inside-article,
.page-id-526 .entry-content,
.page-id-526 article {
  background-color: var(--color-cream-light) !important;
}