/*
Theme Name: HappiKiddo
Theme URI: https://protoxen.com/
Author: ProtoXen
Author URI: https://protoxen.com/
Description: A modern WooCommerce theme for kids' products marketplace. Sells toys, clothing, care products, books, accessories and more. Built with Alpine.js and Tailwind CSS. Features include advanced product filtering by category and age group, wishlist, quick cart, reviews, and responsive design.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: happikiddo
Tags: e-commerce, woocommerce, responsive, custom-header, custom-menu

Brand: Friendly, playful, safe, caring, energetic but not overwhelming.
Color strategy: 60% neutral, 30% primary (yellow/orange), 10% accent (blue/pink/mint)

Design system: See /design-system/ for tokens, components, and Alpine.js interactivity.
*/

:root {
  /* Neutrals */
  --hk-bg: #F9FAFB;
  --hk-surface: #FFFFFF;
  --hk-text: #1F2937;
  --hk-muted: #6B7280;
  --hk-border: #e5e7eb;

  /* Brand Colors */
  --hk-primary: #FFC107;
  --hk-primary-600: #E0A800;
  --hk-secondary: #2D9CDB;
  --hk-accent: #FF4D8D;
  --hk-mint: #A8D5BA;
  --hk-orange: #F59E0B;

  /* Shadows */
  --hk-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
  --hk-shadow-lg: 0 18px 45px rgba(17, 24, 39, 0.14);
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--hk-bg);
  color: var(--hk-text);
  overflow-x: hidden;
}

/* prevent WP wrapper from constraining header width */
#page.site {
  max-width: none !important;
  margin: 0 !important;
}

#masthead.site-header {
  left: 0;
  right: 0;
  width: 100%;
}

/* Keep header bars full-bleed */
#masthead .main-header {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.announcement-bar {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.top-bar {
  background-color: #0F172A !important;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.footer-bottom {
  background-color: var(--hk-dark) !important;
}

.hk-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .hk-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 2.5rem;
  }

  .hk-footer-about,
  .hk-footer-contact {
    grid-column: span 2;
  }
}

@media (min-width: 1200px) {
  .hk-footer-grid {
    grid-template-columns: 3fr 2fr 2fr 2fr 3fr;
    gap: 2rem;
  }

  .hk-footer-about,
  .hk-footer-shop,
  .hk-footer-support,
  .hk-footer-company,
  .hk-footer-contact {
    grid-column: auto;
  }
}

/* Logo image constraint — override all including WooCommerce */
.hk-logo-img,
.woocommerce .hk-logo-img,
.woocommerce-page .hk-logo-img,
img.hk-logo-img {
  height: 40px !important;
  max-width: 180px !important;
  width: auto !important;
  object-fit: contain !important;
}
@media (min-width: 768px) {
  .hk-logo-img,
  .woocommerce .hk-logo-img,
  .woocommerce-page .hk-logo-img,
  img.hk-logo-img {
    height: 48px !important;
    max-width: 220px !important;
  }
}

/* unified focus / transitions */
a, button, input, select, textarea {
  transition: all 0.22s ease;
}

/* Consistent card behavior */
.rounded-xl.shadow-md,
.rounded-2xl.shadow-md,
.bg-white.rounded-xl,
.bg-white.rounded-2xl {
  border: 1px solid var(--hk-border);
  box-shadow: var(--hk-shadow);
}

.rounded-xl.shadow-md:hover,
.rounded-2xl.shadow-md:hover {
  box-shadow: var(--hk-shadow-lg);
}

/* Sticky header behavior */
.site-header {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: white;
}

.announcement-bar, .top-bar, .main-header {
  width: 100% !important;
  margin: 0 !important;
  max-width: none !important;
}

.announcement-bar, .top-bar {
  flex-shrink: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

.announcement-bar { max-height: none; }
.top-bar { max-height: 32px; }

@media (max-width: 767px) {
  .announcement-bar {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    line-height: 1.35;
  }
}

.site-header.is-stuck .announcement-bar,
.site-header.is-stuck .top-bar {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.main-header {
  flex-shrink: 0;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  transition: box-shadow 0.3s ease;
}

.site-header.is-stuck .main-header {
  box-shadow: 0 2px 16px rgba(0,0,0,0.12);
}

#page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}