/*
Theme Name: Den Den Financial
Theme URI: https://wpapirunner.com/
Author: WP API RUNNER
Author URI: https://wpapirunner.com/
Description: Premium, responsive insurance services WordPress theme with advanced Elementor integration, built specifically for Den Den Financial.
Version: 1.6.1
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: den-den-financial
Tags: insurance, financial-services, elementor, responsive-layout, custom-widgets, translation-ready
*/

/* ==========================================================================
   CSS Design Tokens & Variables
   ========================================================================== */
:root {
  /* ==========================================================================
     Extracted Authentic Den Den Financial Brand Palette (from PDF Vector/Raster)
     - Logo Accent Gold: #FFDE59 (RGB: 255, 222, 89 | CMYK: 0%, 13%, 65%, 0%)
     - Logo Monogram/Text Black: #000000 (RGB: 0, 0, 0 | CMYK: 0%, 0%, 0%, 100%)
     - Clean Canvas White: #FFFFFF (RGB: 255, 255, 255 | CMYK: 0%, 0%, 0%, 0%)
     ========================================================================== */
  --den-color-primary: #0B0F19;           /* Deep Onyx Black */
  --den-color-primary-dark: #000000;      /* Pure Logo Black */
  --den-color-primary-light: #1E293B;     /* Rich Slate */
  
  --den-color-accent: #FFDE59;            /* Authentic Logo Canary Gold */
  --den-color-accent-hover: #F5D040;      /* Rich Gold Hover */
  --den-color-accent-light: #FEF08A;      /* Light Gold Highlight */
  --den-color-accent-dark: #B45309;       /* Accessible Text Gold (Amber-700, 5.6:1 contrast on white) */
  --den-color-accent-tint: #FEF9C3;       /* 10% Gold Tint (Pills & Badges) */
  --den-color-accent-border: #FDE047;     /* Gold Accent Border */

  --den-color-gold: #FFDE59;              /* Compatibility Alias */
  --den-color-gold-light: #FEF08A;
  --den-color-gold-dark: #B45309;

  /* Responsive Logo Sizing Tokens (Medium, Balanced) */
  --den-logo-width-desktop: 240px;
  --den-logo-height-desktop: 62px;
  --den-logo-width-tablet: 190px;
  --den-logo-height-tablet: 52px;
  --den-logo-width-mobile: 150px;
  --den-logo-height-mobile: 44px;

  /* Surfaces & Backgrounds */
  --den-color-bg: #FFFFFF;
  --den-color-bg-alt: #F8FAFC;
  --den-color-surface: #FFFFFF;
  --den-color-surface-hover: #F1F5F9;
  
  /* Borders & Dividers */
  --den-color-border: #E2E8F0;
  --den-color-border-dark: #CBD5E1;
  --den-color-border-focus: #FFDE59;
  
  /* Typography Colors */
  --den-color-text-heading: #000000;      /* Logo Black */
  --den-color-text-body: #334155;         /* High-contrast readable slate */
  --den-color-text-muted: #64748B;
  --den-color-text-light: #94A3B8;
  --den-color-text-white: #FFFFFF;
  
  /* Status Colors */
  --den-color-success: #10B981;
  --den-color-warning: #F59E0B;
  --den-color-error: #EF4444;
  --den-color-info: #0284C7;
  
  /* Typography Scale */
  --den-font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --den-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  /* Elevation & Shadows */
  --den-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --den-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --den-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --den-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --den-shadow-gold: 0 4px 14px rgba(255, 222, 89, 0.35);
  --den-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.06);
  --den-shadow-hover: 0 18px 36px rgba(0, 0, 0, 0.12);
  
  /* Radii */
  --den-radius-sm: 4px;
  --den-radius-md: 8px;
  --den-radius-lg: 12px;
  --den-radius-xl: 16px;
  --den-radius-pill: 9999px;
  
  /* Transitions */
  --den-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --den-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --den-transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  
  /* Containers */
  --den-container-width: 1240px;
  --den-container-narrow: 880px;
  --den-container-wide: 1400px;
  --den-container-padding: 24px;
}

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

html {
  font-family: var(--den-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--den-color-text-body);
  background-color: var(--den-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--den-font-heading);
  color: var(--den-color-text-heading);
  font-weight: 700;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

h1 { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3vw + 0.5rem, 2.35rem); }
h3 { font-size: clamp(1.25rem, 2vw + 0.25rem, 1.65rem); }
h4 { font-size: 1.25rem; font-weight: 600; }
h5 { font-size: 1.1rem; font-weight: 600; }
h6 { font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

p {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

a {
  color: var(--den-color-accent-dark);
  text-decoration: none;
  transition: color var(--den-transition-fast);
}

a:hover, a:focus {
  color: var(--den-color-primary);
  text-decoration: underline;
}

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

/* Accessibility Focus Ring */
:focus-visible {
  outline: 3px solid var(--den-color-accent);
  outline-offset: 3px;
}

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

.screen-reader-text:focus {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}