/*
Theme Name: Kadence Child
Theme URI: https://urbanlegend.co.nz
Description: Child theme for Kadence, customized for WordPress content/maintenance service site.
Author: Your Name
Author URI: https://urbanlegend.co.nz
Template: kadence
Version: 1.0.0
Text Domain: kadence-child
*/

/* Import parent theme styles */
/* @import url("../kadence/style.css");*/

/* -----------------------------
   CSS VARIABLES
   Define global variables for colors, fonts, spacing
   DRIFT.TRADE LIGHT THEME INSPIRED
------------------------------ */
:root {
  /* Primary Colors - Drift.trade Light Theme */
  --primary-color: #9945FF;        /* Vibrant Purple (main brand color) */
  --secondary-color: #F8F9FB;      /* Very Light Gray/Off-White background */
  --accent-color: #14F195;         /* Bright Teal/Green (positive actions) */
  --text-color: #1A1A1A;           /* Almost Black text */
  --heading-color: #0D0D0D;        /* Deep Black headings */
  
  /* Additional accent colors */
  --purple-light: #B87FFF;         /* Lighter purple for hover states */
  --purple-dark: #7B2CBF;          /* Darker purple for active states */
  --teal-bright: #14F195;          /* Bright teal for CTAs */
  --teal-light: #A3F7D4;           /* Light teal for backgrounds */
  
  /* Neutral colors */
  --gray-50: #FAFBFC;              /* Lightest gray */
  --gray-100: #F3F4F6;             /* Light gray backgrounds */
  --gray-200: #E5E7EB;             /* Borders */
  --gray-300: #D1D5DB;             /* Subtle borders */
  --gray-400: #9CA3AF;             /* Muted text */
  --gray-500: #6B7280;             /* Secondary text */
  --gray-600: #4B5563;             /* Body text alternative */
  
  /* Semantic colors */
  --success-color: #14F195;        /* Green for success */
  --warning-color: #FFC107;        /* Amber for warnings */
  --error-color: #FF4757;          /* Red for errors */
  --info-color: #9945FF;           /* Purple for info */

  /* Typography */
  --body-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --heading-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --mono-font: 'JetBrains Mono', 'Courier New', monospace;
  --base-font-size: 16px;
  --heading-line-height: 1.2;
  --body-line-height: 1.6;

  /* Spacing */
  --spacing-unit: 1rem;
  --section-padding: calc(var(--spacing-unit) * 3);
  --section-margin: calc(var(--spacing-unit) * 4);
  
  /* Border Radius */
  --border-radius-sm: 6px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  
  /* Purple glow effect for buttons/interactive elements */
  --glow-purple: 0 0 20px rgba(153, 69, 255, 0.3);
  --glow-teal: 0 0 20px rgba(20, 241, 149, 0.3);
}

/* -----------------------------
   BODY & TYPOGRAPHY
------------------------------ */
body {
  font-family: var(--body-font);
  font-size: var(--base-font-size);
  color: var(--text-color);
  background-color: var(--secondary-color) !important;
  line-height: var(--body-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  color: var(--heading-color);
  line-height: var(--heading-line-height);
  margin-bottom: calc(var(--spacing-unit) * 1.5);
  font-weight: 700;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

/* -----------------------------
   LINKS & BUTTONS
------------------------------ */
a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

button, .button {
  background-color: var(--primary-color);
  color: #fff;
  padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.5);
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  font-weight: 600;
  font-family: var(--body-font);
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

button:hover, .button:hover {
  background-color: var(--purple-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

button:active, .button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Secondary button style */
.button-secondary {
  background-color: var(--gray-100);
  color: var(--text-color);
  border: 1px solid var(--gray-300);
}

.button-secondary:hover {
  background-color: var(--gray-200);
  border-color: var(--gray-400);
}

/* Accent/CTA button style */
.button-accent {
  background: linear-gradient(135deg, var(--accent-color) 0%, #0EC880 100%);
  box-shadow: var(--glow-teal);
}

.button-accent:hover {
  box-shadow: 0 0 25px rgba(20, 241, 149, 0.5);
}

/* -----------------------------
   SECTIONS / WRAPPERS
------------------------------ */
.section {
  padding: var(--section-padding);
  margin-bottom: var(--section-margin);
}

.widget-area {
  margin-bottom: calc(var(--spacing-unit) * 2);
  background-color: #fff;
  padding: calc(var(--spacing-unit) * 1.5);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
}

/* Card style containers */
.card {
  background-color: #fff;
  border-radius: var(--border-radius-md);
  padding: calc(var(--spacing-unit) * 1.5);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-200);
}

/* -----------------------------
   HEADER & NAVIGATION
------------------------------ */
.site-header {
  background-color: #fff;
  color: var(--text-color);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}

.site-header a {
  color: var(--text-color);
  font-weight: 500;
}

.site-header a:hover {
  color: var(--primary-color);
}

/* Active nav item */
.site-header a.active,
.site-header .current-menu-item > a {
  color: var(--primary-color);
  position: relative;
}

/* Optional: Add underline to active nav items */
.site-header a.active::after,
.site-header .current-menu-item > a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--primary-color);
}

/* -----------------------------
   FOOTER
------------------------------ */
.site-footer {
  background-color: var(--gray-100);
  color: var(--gray-600);
  padding: var(--section-padding);
  border-top: 1px solid var(--gray-200);
}

.site-footer a {
  color: var(--gray-600);
}

.site-footer a:hover {
  color: var(--primary-color);
}

/* -----------------------------
   CUSTOM CLASSES
------------------------------ */
.hero-section {
  background: linear-gradient(135deg, #F8F9FB 0%, #EEF0F9 100%);
  padding: calc(var(--spacing-unit) * 6) 0;
  text-align: center;
  border-radius: var(--border-radius-xl);
  margin-bottom: var(--section-margin);
}

.hero-section h1 {
  font-size: 3.5rem;
  margin-bottom: calc(var(--spacing-unit) * 1);
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--purple-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-button {
  background: linear-gradient(135deg, var(--accent-color) 0%, #0EC880 100%);
  color: var(--text-color);
  padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(20, 241, 149, 0.5);
}

/* Gradient text utility */
.gradient-text {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--purple-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Badge/Tag styles */
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  background-color: var(--gray-100);
  color: var(--gray-600);
}

.badge-purple {
  background-color: rgba(153, 69, 255, 0.1);
  color: var(--primary-color);
}

.badge-teal {
  background-color: rgba(20, 241, 149, 0.1);
  color: #0D9668;
}

/* Divider */
.divider {
  height: 1px;
  background-color: var(--gray-200);
  margin: var(--section-padding) 0;
}

/* -----------------------------
   UTILITY CLASSES
------------------------------ */
.text-muted {
  color: var(--gray-500);
}

.text-primary {
  color: var(--primary-color);
}

.text-accent {
  color: var(--accent-color);
}

.bg-light {
  background-color: var(--gray-50);
}

.bg-white {
  background-color: #fff;
}

.rounded {
  border-radius: var(--border-radius-md);
}

.shadow {
  box-shadow: var(--shadow-md);
}

/* -----------------------------
   FOOTER WIDGETS - 4 COLUMN LAYOUT
   4 widgets = 25% each
   3 widgets = 25% each, justified right (25% gap on left)
   2 widgets = 25% each, spaced equally
------------------------------ */

/* Base footer container */
#wrapper .custom-footer-widgets .footer-widgets-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
}

/* Default: Each footer column takes 25% width */
#wrapper .custom-footer-widgets .footer-column {
    max-width: 25%;
    flex: 0 0 25%;
    box-sizing: border-box;
    padding: 0 15px;
}

/* When there are 4 widgets - fill the full width equally */
#wrapper .custom-footer-widgets .footer-widgets-container:has(.footer-column:nth-child(4)) {
    justify-content: space-between;
    padding-left: 0;
}

/* When there are 3 widgets - leave 25% gap on the left, align right */
#wrapper .custom-footer-widgets .footer-widgets-container:has(.footer-column:nth-child(3):last-child) {
    justify-content: flex-end;
    margin-left: 25%;
}

/* When there are 2 widgets - space them equally */
#wrapper .custom-footer-widgets .footer-widgets-container:has(.footer-column:nth-child(2):last-child) {
    justify-content: space-between;
    padding-left: 0;
    margin-left: 0;
}

#wrapper .custom-footer-widgets .footer-widgets-container:has(.footer-column:nth-child(2):last-child) .footer-column {
    flex: 0 0 25%;
}

/* -----------------------------
   SITE TITLE TEXT SHADOW
   Inspired by headlamp.legendweb.link but with purple theme
------------------------------ */

/* Main site title - desktop header */
#wrapper .site-branding .site-title,
#wrapper .site-branding .site-title a,
#wrapper .site-title-wrap .site-title {
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.3),
        4px 4px 8px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(153, 69, 255, 0.4);
    font-weight: 700;
    font-family:Oswald,sans-serif;
}

/* Add a subtle glow effect on hover */
.site-branding .site-title a:hover {
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.3),
        4px 4px 8px rgba(0, 0, 0, 0.2),
        0 0 30px rgba(153, 69, 255, 0.6),
        0 0 40px rgba(153, 69, 255, 0.4);
    transition: text-shadow 0.3s ease;
}

/* Mobile site title */
.mobile-site-branding .site-title {
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.3),
        3px 3px 6px rgba(0, 0, 0, 0.2),
        0 0 15px rgba(153, 69, 255, 0.3);
}

/* Tablet: 768px - 1024px - Stack 2 columns per row */
@media (max-width: 1024px) and (min-width: 768px) {
    #wrapper .custom-footer-widgets .footer-column {
        max-width: 50%;
        flex: 0 0 50%;
    }
    
    #wrapper .custom-footer-widgets .footer-widgets-container:has(.footer-column:nth-child(3):last-child),
    #wrapper .custom-footer-widgets .footer-widgets-container:has(.footer-column:nth-child(2):last-child) {
        margin-left: 0;
        padding-left: 0;
        justify-content: flex-start;
    }
}

/* Mobile: Below 768px - Stack all columns vertically */
@media (max-width: 767px) {
    #wrapper .custom-footer-widgets .footer-column {
        max-width: 100%;
        flex: 0 0 100%;
        margin-bottom: calc(var(--spacing-unit) * 2);
    }
    
    #wrapper .custom-footer-widgets .footer-widgets-container {
        justify-content: flex-start;
        padding-left: 0;
        margin-left: 0;
    }
    
    /* Remove bottom margin from last widget on mobile */
    #wrapper .custom-footer-widgets .footer-column:last-child {
        margin-bottom: 0;
    }
}