/*
Theme Name:   Hexses Child
Theme URI:    https://hexses.com
Description:  Child theme for Hexses Outlet — built on Kadence 1.4.5. All frontend
              customisations live here. Deactivate to instantly revert to the parent theme.
Author:       Hexses Outlet
Template:     kadence
Version:      1.0.0
Text Domain:  hexses-child
*/

/* =============================================================================
   DESIGN TOKENS — Global CSS Custom Properties
   All colours, typography, spacing, and radii are defined here once and
   referenced throughout the stylesheet. Change a value here to update the
   entire site.
   ============================================================================= */

:root {

  /* --- Colour Palette ---
     Warm, family-friendly palette. Cream background, teal accent,
     coral highlight for CTAs and badges, charcoal for text.         */

  --hx-cream:          #FAF8F5;   /* Page background — warm white              */
  --hx-cream-mid:      #F2EDE6;   /* Subtle section divider / card background  */
  --hx-cream-dark:     #E8E0D5;   /* Borders, dividers                         */

  --hx-teal:           #3D9EA0;   /* Primary brand accent — links, icons       */
  --hx-teal-dark:      #2E7E80;   /* Hover state for teal elements             */
  --hx-teal-light:     #E8F5F5;   /* Teal tint for badges, subtle backgrounds  */

  --hx-coral:          #E8715A;   /* CTA buttons, sale badges, highlights      */
  --hx-coral-dark:     #C95C47;   /* Hover state for coral elements            */
  --hx-coral-light:    #FDF0ED;   /* Coral tint for banners, soft highlights   */

  --hx-charcoal:       #2D2D2D;   /* Primary text — not harsh black            */
  --hx-charcoal-mid:   #5A5A5A;   /* Secondary text, labels                   */
  --hx-charcoal-light: #8A8A8A;   /* Muted text, placeholders                 */

  --hx-white:          #FFFFFF;
  --hx-black:          #1A1A1A;   /* Reserved for absolute-contrast needs      */

  /* --- Typography --- */

  --hx-font-heading:   'Nunito', 'Poppins', 'Segoe UI', sans-serif;
  --hx-font-body:      'Inter', 'Segoe UI', system-ui, sans-serif;

  --hx-size-xs:        0.75rem;   /* 12px */
  --hx-size-sm:        0.875rem;  /* 14px */
  --hx-size-base:      1rem;      /* 16px */
  --hx-size-md:        1.125rem;  /* 18px */
  --hx-size-lg:        1.25rem;   /* 20px */
  --hx-size-xl:        1.5rem;    /* 24px */
  --hx-size-2xl:       1.875rem;  /* 30px */
  --hx-size-3xl:       2.25rem;   /* 36px */
  --hx-size-4xl:       3rem;      /* 48px */

  --hx-weight-regular: 400;
  --hx-weight-medium:  500;
  --hx-weight-semibold:600;
  --hx-weight-bold:    700;
  --hx-weight-extrabold:800;

  --hx-leading-tight:  1.2;
  --hx-leading-snug:   1.35;
  --hx-leading-normal: 1.6;
  --hx-leading-loose:  1.8;

  /* --- Spacing Scale --- */

  --hx-space-1:   0.25rem;   /*  4px */
  --hx-space-2:   0.5rem;    /*  8px */
  --hx-space-3:   0.75rem;   /* 12px */
  --hx-space-4:   1rem;      /* 16px */
  --hx-space-5:   1.25rem;   /* 20px */
  --hx-space-6:   1.5rem;    /* 24px */
  --hx-space-8:   2rem;      /* 32px */
  --hx-space-10:  2.5rem;    /* 40px */
  --hx-space-12:  3rem;      /* 48px */
  --hx-space-16:  4rem;      /* 64px */
  --hx-space-20:  5rem;      /* 80px */
  --hx-space-24:  6rem;      /* 96px */

  /* --- Layout --- */

  --hx-max-width:      1280px;  /* Max content width              */
  --hx-content-pad:   clamp(1rem, 4vw, 2rem); /* Responsive horizontal padding */

  /* --- Border Radii --- */

  --hx-radius-sm:   4px;
  --hx-radius:      8px;
  --hx-radius-md:   12px;
  --hx-radius-lg:   16px;
  --hx-radius-xl:   24px;
  --hx-radius-full: 9999px;

  /* --- Shadows --- */

  --hx-shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --hx-shadow:     0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --hx-shadow-md:  0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --hx-shadow-lg:  0 16px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08);

  /* --- Transitions --- */

  --hx-transition-fast:   150ms ease;
  --hx-transition:        250ms ease;
  --hx-transition-slow:   400ms ease;
}


/* =============================================================================
   BASE RESETS & BODY
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--hx-cream);
  color: var(--hx-charcoal);
  font-family: var(--hx-font-body);
  font-size: var(--hx-size-base);
  font-weight: var(--hx-weight-regular);
  line-height: var(--hx-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--hx-teal);
  text-decoration: none;
  transition: color var(--hx-transition-fast);
}

a:hover {
  color: var(--hx-teal-dark);
}

/* =============================================================================
   TYPOGRAPHY — Headings
   ============================================================================= */

h1, h2, h3, h4, h5, h6,
.hx-heading {
  font-family: var(--hx-font-heading);
  font-weight: var(--hx-weight-bold);
  line-height: var(--hx-leading-tight);
  color: var(--hx-charcoal);
  margin-top: 0;
}

h1 { font-size: clamp(var(--hx-size-2xl), 5vw, var(--hx-size-4xl)); }
h2 { font-size: clamp(var(--hx-size-xl),  4vw, var(--hx-size-3xl)); }
h3 { font-size: clamp(var(--hx-size-lg),  3vw, var(--hx-size-2xl)); }
h4 { font-size: var(--hx-size-xl); }
h5 { font-size: var(--hx-size-lg); }
h6 { font-size: var(--hx-size-md); }

p {
  margin-top: 0;
  margin-bottom: var(--hx-space-4);
}

.hx-overline {
  font-family: var(--hx-font-heading);
  font-size: var(--hx-size-xs);
  font-weight: var(--hx-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hx-teal);
}

.hx-section-title {
  font-family: var(--hx-font-heading);
  font-size: clamp(var(--hx-size-xl), 3vw, var(--hx-size-3xl));
  font-weight: var(--hx-weight-extrabold);
  color: var(--hx-charcoal);
  margin-bottom: var(--hx-space-2);
}

.hx-section-subtitle {
  font-size: var(--hx-size-md);
  color: var(--hx-charcoal-mid);
  margin-bottom: var(--hx-space-8);
}


/* =============================================================================
   BUTTONS — Global Button Styles
   ============================================================================= */

.button,
button,
input[type="submit"],
input[type="button"],
.wp-element-button,
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hx-space-2);
  font-family: var(--hx-font-heading);
  font-size: var(--hx-size-sm);
  font-weight: var(--hx-weight-semibold);
  line-height: 1;
  letter-spacing: 0.03em;
  padding: var(--hx-space-3) var(--hx-space-6);
  border-radius: var(--hx-radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--hx-transition-fast),
              border-color var(--hx-transition-fast),
              color var(--hx-transition-fast),
              transform var(--hx-transition-fast),
              box-shadow var(--hx-transition-fast);
  white-space: nowrap;
}

/* Primary — coral CTA */
.button.hx-btn-primary,
.hx-btn-primary {
  background-color: var(--hx-coral);
  color: var(--hx-white);
  border-color: var(--hx-coral);
}

.button.hx-btn-primary:hover,
.hx-btn-primary:hover {
  background-color: var(--hx-coral-dark);
  border-color: var(--hx-coral-dark);
  color: var(--hx-white);
  transform: translateY(-1px);
  box-shadow: var(--hx-shadow-md);
}

/* Secondary — teal outlined */
.button.hx-btn-secondary,
.hx-btn-secondary {
  background-color: transparent;
  color: var(--hx-teal);
  border-color: var(--hx-teal);
}

.button.hx-btn-secondary:hover,
.hx-btn-secondary:hover {
  background-color: var(--hx-teal);
  color: var(--hx-white);
  transform: translateY(-1px);
}

/* Ghost — light on dark backgrounds */
.hx-btn-ghost {
  background-color: rgba(255,255,255,0.15);
  color: var(--hx-white);
  border-color: rgba(255,255,255,0.5);
  backdrop-filter: blur(4px);
}

.hx-btn-ghost:hover {
  background-color: var(--hx-white);
  color: var(--hx-charcoal);
  border-color: var(--hx-white);
}

/* WooCommerce default button override */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background-color: var(--hx-teal);
  color: var(--hx-white);
  border-color: var(--hx-teal);
  font-family: var(--hx-font-heading);
  font-weight: var(--hx-weight-semibold);
  border-radius: var(--hx-radius-full);
  padding: var(--hx-space-3) var(--hx-space-5);
  font-size: var(--hx-size-sm);
  height: auto;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--hx-teal-dark);
  color: var(--hx-white);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background-color: var(--hx-coral);
  color: var(--hx-white);
  border-color: var(--hx-coral);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: var(--hx-coral-dark);
  color: var(--hx-white);
}


/* =============================================================================
   LAYOUT UTILITIES
   ============================================================================= */

.hx-container {
  width: 100%;
  max-width: var(--hx-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--hx-content-pad);
  padding-right: var(--hx-content-pad);
}

.hx-section {
  padding-top:    var(--hx-space-16);
  padding-bottom: var(--hx-space-16);
}

.hx-section-sm {
  padding-top:    var(--hx-space-10);
  padding-bottom: var(--hx-space-10);
}

.hx-section-lg {
  padding-top:    var(--hx-space-24);
  padding-bottom: var(--hx-space-24);
}

/* Background variants */
.hx-bg-cream    { background-color: var(--hx-cream); }
.hx-bg-mid      { background-color: var(--hx-cream-mid); }
.hx-bg-teal     { background-color: var(--hx-teal); }
.hx-bg-coral    { background-color: var(--hx-coral); }
.hx-bg-charcoal { background-color: var(--hx-charcoal); }

/* Text colour utilities */
.hx-text-teal    { color: var(--hx-teal); }
.hx-text-coral   { color: var(--hx-coral); }
.hx-text-muted   { color: var(--hx-charcoal-mid); }
.hx-text-white   { color: var(--hx-white); }


/* =============================================================================
   BADGES & LABELS
   ============================================================================= */

.hx-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--hx-font-heading);
  font-size: var(--hx-size-xs);
  font-weight: var(--hx-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px var(--hx-space-2);
  border-radius: var(--hx-radius-sm);
  line-height: 1.4;
}

.hx-badge-coral   { background-color: var(--hx-coral);       color: var(--hx-white); }
.hx-badge-teal    { background-color: var(--hx-teal);        color: var(--hx-white); }
.hx-badge-outline { background-color: transparent; border: 1px solid var(--hx-teal); color: var(--hx-teal); }

/* WooCommerce sale badge */
.woocommerce span.onsale {
  background-color: var(--hx-coral);
  color: var(--hx-white);
  font-family: var(--hx-font-heading);
  font-size: var(--hx-size-xs);
  font-weight: var(--hx-weight-bold);
  border-radius: var(--hx-radius-full);
  min-height: auto;
  min-width: auto;
  padding: var(--hx-space-1) var(--hx-space-3);
  line-height: 1.6;
}


/* =============================================================================
   FORMS — Global Input Styles
   ============================================================================= */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
  font-family: var(--hx-font-body);
  font-size: var(--hx-size-base);
  color: var(--hx-charcoal);
  background-color: var(--hx-white);
  border: 1.5px solid var(--hx-cream-dark);
  border-radius: var(--hx-radius);
  padding: var(--hx-space-3) var(--hx-space-4);
  width: 100%;
  transition: border-color var(--hx-transition-fast),
              box-shadow var(--hx-transition-fast);
  outline: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--hx-teal);
  box-shadow: 0 0 0 3px var(--hx-teal-light);
}


/* =============================================================================
   KADENCE OVERRIDES — Align Kadence to our design tokens
   These target Kadence's own classes without breaking its structure.
   ============================================================================= */

/* Page background */
.site,
#page {
  background-color: var(--hx-cream);
}

/* Inner content area */
.wp-site-blocks,
.entry-content {
  background-color: var(--hx-cream);
}

/* Kadence heading font injection */
.kadence-heading-tag,
.kt-heading,
.wp-block-kadence-heading .kt-heading {
  font-family: var(--hx-font-heading) !important;
}

/* Kadence button base */
.kt-btn-wrap a,
.kadence-button {
  border-radius: var(--hx-radius-full) !important;
}


/* =============================================================================
   WOOCOMMERCE — Price Colours & Star Ratings
   ============================================================================= */

.woocommerce .price,
.woocommerce-Price-amount {
  color: var(--hx-teal-dark);
  font-family: var(--hx-font-heading);
  font-weight: var(--hx-weight-bold);
}

.woocommerce .price del,
.woocommerce-Price-amount del {
  color: var(--hx-charcoal-light);
  font-weight: var(--hx-weight-regular);
}

.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
  color: var(--hx-coral);
}


/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */

:focus-visible {
  outline: 2px solid var(--hx-teal);
  outline-offset: 3px;
  border-radius: 3px;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}