/*
Theme Name: Outgrid Child
Theme URI: https://kidlavie.club
Description: Kidlavie Child Theme for Outgrid — styled according to Kidlavie Brand Guidelines 2025
Author: Kidlavie
Author URI: https://kidlavie.club
Template: outgrid
Version: 1.3.0
Text Domain: outgrid-child
*/

/* ============================================================
   KIDLAVIE BRAND GUIDELINES — CSS VARIABLES
   Colors from official Brandbook (2025)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Brand Colors */
  --kidlavie-pink:       #F3598A;
  --kidlavie-red:        #E9484A;
  --kidlavie-green:      #82D44F;
  --kidlavie-turquoise:  #32C49D;
  --kidlavie-blue:       #44A2C9;
  --kidlavie-purple:     #A46BC7;

  /* Semantic mapping */
  --kidlavie-primary:    #F3598A;
  --kidlavie-secondary:  #E9484A;
  --kidlavie-text:       #1A1A1A;
  --kidlavie-text-light: #555555;
  --kidlavie-bg-light:   #FFF5F7;
  --kidlavie-white:      #FFFFFF;
}

/* ============================================================
   TYPOGRAPHY — Inter font (brand typeface)
   ============================================================ */

body,
p,
li,
td,
th,
input,
textarea,
select,
.uicore-body-content {
  font-family: 'Inter', sans-serif !important;
  color: var(--kidlavie-text);
}

h1, h2, h3, h4, h5, h6,
.uicore-h1, .uicore-h2, .uicore-h3, .uicore-h4, .uicore-h5, .uicore-h6 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

/* ============================================================
   NAVIGATION — Header & Menu
   ============================================================ */

.uicore-nav .uicore-menu > li > a,
.uicore-nav .uicore-menu > li > .uicore-menu-item-text,
header nav ul li a,
.main-navigation ul li a {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}

.uicore-nav .uicore-menu > li > a:hover,
header nav ul li a:hover {
  color: var(--kidlavie-primary) !important;
}

.uicore-nav .uicore-menu > li.current-menu-item > a,
.uicore-nav .uicore-menu > li.current_page_item > a {
  color: var(--kidlavie-primary) !important;
}

/* ============================================================
   BUTTONS — Primary CTA (Pink brand color)
   ============================================================ */

.uicore-btn,
.uicore-btn-primary,
a.uicore-btn,
button.uicore-btn,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.uicore-header-btn,
a[class*="btn-primary"],
button[class*="btn-primary"] {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  background-color: var(--kidlavie-primary) !important;
  color: var(--kidlavie-white) !important;
  border-color: var(--kidlavie-primary) !important;
  border-radius: 50px !important;
  transition: background-color 0.25s ease, transform 0.15s ease !important;
}

.uicore-btn:hover,
.uicore-btn-primary:hover,
a.uicore-btn:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background-color: var(--kidlavie-red) !important;
  border-color: var(--kidlavie-red) !important;
  color: var(--kidlavie-white) !important;
  transform: translateY(-1px) !important;
}

.uicore-btn-outline,
a.uicore-btn-outline,
button.uicore-btn-outline {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  background-color: transparent !important;
  color: var(--kidlavie-primary) !important;
  border: 2px solid var(--kidlavie-primary) !important;
  border-radius: 50px !important;
  transition: all 0.25s ease !important;
}

.uicore-btn-outline:hover,
a.uicore-btn-outline:hover {
  background-color: var(--kidlavie-primary) !important;
  color: var(--kidlavie-white) !important;
}

/* ============================================================
   LINKS
   ============================================================ */

a {
  color: var(--kidlavie-primary);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--kidlavie-red);
}

/* ============================================================
   WOOCOMMERCE
   ============================================================ */

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  border-top-color: var(--kidlavie-primary) !important;
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
  color: var(--kidlavie-primary) !important;
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  background-color: var(--kidlavie-green) !important;
  border-radius: 50px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

.woocommerce .price,
.woocommerce .amount {
  color: var(--kidlavie-secondary) !important;
  font-weight: 700 !important;
}

/* ============================================================
   HEADER STICKY
   ============================================================ */

.uicore-sticky-header,
.uicore-header-sticky {
  box-shadow: 0 2px 20px rgba(243, 89, 138, 0.12) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

.uicore-footer,
footer,
.site-footer {
  font-family: 'Inter', sans-serif !important;
}

.uicore-footer a:hover,
footer a:hover,
.site-footer a:hover {
  color: var(--kidlavie-primary) !important;
}

/* ============================================================
   FORMS
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select {
  font-family: 'Inter', sans-serif !important;
  border-radius: 8px !important;
  border-color: #E0E0E0 !important;
  transition: border-color 0.2s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: var(--kidlavie-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(243, 89, 138, 0.15) !important;
}

/* ============================================================
   CARDS & BLOCKS
   ============================================================ */

.uicore-post-card,
.uicore-card,
.wp-block-group {
  border-radius: 16px !important;
  overflow: hidden;
}

/* ============================================================
   SELECTION COLOR
   ============================================================ */

::selection {
  background-color: var(--kidlavie-primary);
  color: var(--kidlavie-white);
}

::-moz-selection {
  background-color: var(--kidlavie-primary);
  color: var(--kidlavie-white);
}

/* ============================================================
   HEADER — Styled like omaha.kidlavie.club
   ============================================================ */

/* Header wrapper — white background, full width like omaha.kidlavie.club */
.uicore-header-wrapper {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* Full width navbar — no max-width restriction */
.uicore-navbar,
.uicore-navbar.uicore-transparent,
.uicore-navbar.uicore-h-classic {
  max-width: 100% !important;
  width: 100% !important;
}

/* Header nav container height */
.uicore-header-wrapper > nav,
.uicore-header-wrapper .uicore-container {
  height: 82px !important;
  min-height: 82px !important;
}

/* White background on sticky/scrolled too */
.uicore-header-wrapper.uicore-sticky,
.uicore-header-wrapper.uicore-is-sticky,
.uicore-header-wrapper.sticky,
.uicore-header-wrapper.scrolled {
  background-color: #ffffff !important;
  background: #ffffff !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Navigation menu links — Nunito, dark navy blue like omaha */
.uicore-header-wrapper .uicore-menu > li > a,
.uicore-header-wrapper .uicore-menu > li > a span,
.uicore-header-wrapper nav ul li a,
.uicore-header-wrapper .uicore-menu-item-text {
  font-family: 'Nunito', sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #1E4C89 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

/* Nav links hover */
.uicore-header-wrapper .uicore-menu > li > a:hover,
.uicore-header-wrapper .uicore-menu > li > a:hover span,
.uicore-header-wrapper nav ul li a:hover {
  color: #FF18D4 !important;
}

/* Active/current menu item */
.uicore-header-wrapper .uicore-menu > li.current-menu-item > a,
.uicore-header-wrapper .uicore-menu > li.current_page_item > a,
.uicore-header-wrapper .uicore-menu > li.current-menu-ancestor > a {
  color: #FF18D4 !important;
}

/* Nav icon color (SVG icons next to menu items like Book) */
.uicore-header-wrapper .ui-svg-wrapp,
.uicore-header-wrapper .ui-svg-wrapp svg,
.uicore-header-wrapper .ui-svg-wrapp svg path {
  color: #FF18D4 !important;
  stroke: #FF18D4 !important;
}

/* Dropdown submenu */
.uicore-header-wrapper .sub-menu {
  background-color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
  border: none !important;
}

.uicore-header-wrapper .sub-menu li a,
.uicore-header-wrapper .sub-menu li a span {
  font-family: 'Nunito', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #1E4C89 !important;
}

.uicore-header-wrapper .sub-menu li a:hover,
.uicore-header-wrapper .sub-menu li a:hover span {
  color: #FF18D4 !important;
  background-color: #FFF0FB !important;
}

/* CTA Button "Choose park" — bright pink, pill shape */
.uicore-header-wrapper .uicore-btn,
.uicore-header-wrapper .uicore-header-btn,
.uicore-header-wrapper a.btn-solid,
.uicore-header-wrapper .uicore-navbar .btn-solid,
.uicore-header-wrapper a[class*="btn"],
.uicore-header-wrapper button[class*="btn"] {
  font-family: 'Nunito', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  background-color: #FF18D4 !important;
  color: #ffffff !important;
  border-color: #FF18D4 !important;
  border-radius: 100px !important;
  padding: 16px 26px !important;
  transition: background-color 0.25s ease, transform 0.15s ease !important;
  text-decoration: none !important;
}

.uicore-header-wrapper .uicore-btn:hover,
.uicore-header-wrapper .uicore-header-btn:hover,
.uicore-header-wrapper a.btn-solid:hover,
.uicore-header-wrapper a[class*="btn"]:hover {
  background-color: #d400b0 !important;
  border-color: #d400b0 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* Logo sizing */
.uicore-header-wrapper .uicore-logo.uicore-main,
.uicore-header-wrapper .uicore-branding img {
  height: 34px !important;
  width: auto !important;
  max-width: 140px !important;
}

/* Mobile hamburger */
.uicore-header-wrapper .uicore-hamburger span,
.uicore-header-wrapper .uicore-hamburger-inner,
.uicore-header-wrapper .uicore-hamburger-inner::before,
.uicore-header-wrapper .uicore-hamburger-inner::after {
  background-color: #1E4C89 !important;
}

/* Mobile menu */
@media (max-width: 1024px) {
  .uicore-header-wrapper .uicore-mobile-menu,
  .uicore-header-wrapper .uicore-mobile-nav {
    background-color: #ffffff !important;
  }

  .uicore-header-wrapper .uicore-mobile-menu li a,
  .uicore-header-wrapper .uicore-mobile-nav li a {
    font-family: 'Nunito', sans-serif !important;
    color: #1E4C89 !important;
    font-size: 18px !important;
  }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: var(--kidlavie-primary);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--kidlavie-red);
}