/*
Theme Name: ToDye Textile Tools Child Theme
Theme URI: https://www.todye.com
Template: oceanwp
Author: ToDye Development Team
Author URI: https://www.todye.com
Description: Professional textile dyeing tools and calculators WordPress theme with AdSense optimization
Version: 1.0.0
Text Domain: todye-com
*/

/* =====================================================
   CSS VARIABLES - STANDARDIZED NAMING
   ===================================================== */
:root {
   /* Brand Colors - Textile Industry Theme */
   --brand-primary: #1E5F8E;       /* Deep indigo blue - dye industry */
   --brand-secondary: #52B3D9;     /* Cyan blue - water/washing */
   --brand-accent: #E67E22;        /* Orange - chemical processes */

   /* Semantic Colors - NEVER change names */
   --color-success: #27AE60;       /* Success states */
   --color-warning: #F39C12;       /* Warning states */
   --color-danger: #E74C3C;        /* Error states */
   --color-info: #3498DB;          /* Info states */

   /* Typography Colors - NEVER change names */
   --text-primary: #2C3E50;        /* Main text */
   --text-secondary: #7F8C8D;      /* Secondary text */
   --text-muted: #95A5A6;          /* Muted text */
   --text-inverse: #FFFFFF;        /* Light text on dark */

   /* Background Colors - NEVER change names */
   --bg-primary: #FFFFFF;          /* Main background */
   --bg-secondary: #F8F9FA;        /* Section backgrounds */
   --bg-muted: #ECF0F1;            /* Muted backgrounds */
   --bg-dark: #2C3E50;             /* Dark backgrounds */

   /* Border & Shadow - NEVER change names */
   --border-color: #E0E6ED;
   --border-radius: 6px;
   --border-radius-sm: 4px;
   --border-radius-lg: 12px;
   --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
   --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
   --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);

   /* Spacing System - NEVER change names */
   --space-xs: 4px;    /* 0.25rem */
   --space-sm: 8px;    /* 0.5rem */
   --space-md: 16px;   /* 1rem */
   --space-lg: 24px;   /* 1.5rem */
   --space-xl: 32px;   /* 2rem */
   --space-2xl: 48px;  /* 3rem */
   --space-3xl: 64px;  /* 4rem */

   /* Typography Scale - NEVER change names */
   --font-xs: 12px;    /* 0.75rem */
   --font-sm: 14px;    /* 0.875rem */
   --font-base: 16px;  /* 1rem */
   --font-lg: 18px;    /* 1.125rem */
   --font-xl: 20px;    /* 1.25rem */
   --font-2xl: 24px;   /* 1.5rem */
   --font-3xl: 32px;   /* 2rem */
   --font-4xl: 48px;   /* 3rem */

   /* Z-index Scale - NEVER change names */
   --z-dropdown: 1000;
   --z-sticky: 1020;
   --z-modal: 1030;
   --z-tooltip: 1040;

   /* Transitions - NEVER change names */
   --transition-fast: all 0.15s ease;
   --transition-base: all 0.3s ease;
   --transition-slow: all 0.5s ease;

   /* Component Heights - NEVER change names */
   --height-input: 44px;           /* Form inputs */
   --height-button: 44px;          /* Buttons */
   --height-header: 70px;          /* Site header */

   /* Responsive Breakpoints */
   --bp-xs: 480px;     /* Small mobile */
   --bp-sm: 768px;     /* Mobile */
   --bp-md: 1024px;    /* Tablet */
   --bp-lg: 1200px;    /* Desktop */
   --bp-xl: 1400px;    /* Large desktop */
}

/* =====================================================
   GLOBAL STYLES
   ===================================================== */
* {
   box-sizing: border-box;
}

body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: var(--font-base);
   line-height: 1.6;
   color: var(--text-primary);
   background-color: var(--bg-primary);
}

/* =====================================================
   LAYOUT COMPONENTS
   ===================================================== */
.container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 var(--space-lg);
}

.section {
   padding: var(--space-3xl) 0;
}

.grid {
   display: grid;
   gap: var(--space-lg);
}

.grid-cols-2 {
   grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
   grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
   grid-template-columns: repeat(4, 1fr);
}

/* =====================================================
   CARD COMPONENTS
   ===================================================== */
.card {
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   box-shadow: var(--shadow-sm);
   overflow: hidden;
   transition: var(--transition-base);
}

.card:hover {
   box-shadow: var(--shadow-md);
   transform: translateY(-2px);
}

.card-header {
   padding: var(--space-lg);
   background: var(--bg-secondary);
   border-bottom: 1px solid var(--border-color);
}

.card-body {
   padding: var(--space-lg);
}

.card-footer {
   padding: var(--space-lg);
   background: var(--bg-secondary);
   border-top: 1px solid var(--border-color);
}

/* =====================================================
   BUTTON COMPONENTS
   ===================================================== */
.btn {
   display: inline-block;
   padding: 12px 24px;
   font-size: var(--font-base);
   font-weight: 600;
   text-align: center;
   text-decoration: none;
   border: 2px solid transparent;
   border-radius: var(--border-radius);
   cursor: pointer;
   transition: var(--transition-base);
   height: var(--height-button);
   line-height: 20px;
}

.btn-primary {
   background: var(--brand-primary);
   color: var(--text-inverse);
   border-color: var(--brand-primary);
}

.btn-primary:hover {
   background: #164A70;
   border-color: #164A70;
   transform: translateY(-1px);
}

.btn-secondary {
   background: var(--brand-secondary);
   color: var(--text-inverse);
   border-color: var(--brand-secondary);
}

.btn-secondary:hover {
   background: #3D9EC8;
   border-color: #3D9EC8;
}

.btn-outline {
   background: transparent;
   color: var(--brand-primary);
   border-color: var(--brand-primary);
}

.btn-outline:hover {
   background: var(--brand-primary);
   color: var(--text-inverse);
}

.btn-block {
   display: block;
   width: 100%;
}

/* =====================================================
   FORM COMPONENTS
   ===================================================== */
.form-group {
   margin-bottom: var(--space-lg);
}

.form-label {
   display: block;
   margin-bottom: var(--space-sm);
   font-weight: 600;
   color: var(--text-primary);
}

.form-input,
.form-select,
.form-textarea {
   width: 100%;
   padding: 12px 16px;
   font-size: var(--font-base);
   color: var(--text-primary);
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   transition: var(--transition-base);
   height: var(--height-input);
}

.form-textarea {
   min-height: 120px;
   resize: vertical;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
   outline: none;
   border-color: var(--brand-primary);
   box-shadow: 0 0 0 3px rgba(30, 95, 142, 0.1);
}

.form-help {
   margin-top: var(--space-sm);
   font-size: var(--font-sm);
   color: var(--text-muted);
}

.form-error {
   color: var(--color-danger);
   font-size: var(--font-sm);
   margin-top: var(--space-sm);
}

.form-success {
   color: var(--color-success);
   font-size: var(--font-sm);
   margin-top: var(--space-sm);
}

/* =====================================================
   APP INTERFACE STANDARDS
   ===================================================== */
.app-container {
   background: var(--bg-primary);
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow-md);
   padding: var(--space-xl);
   margin: var(--space-2xl) 0;
}

.app-header {
   text-align: center;
   margin-bottom: var(--space-2xl);
   padding-bottom: var(--space-lg);
   border-bottom: 2px solid var(--border-color);
}

.app-title {
   font-size: var(--font-3xl);
   color: var(--brand-primary);
   margin: 0 0 var(--space-md) 0;
}

.app-description {
   font-size: var(--font-lg);
   color: var(--text-secondary);
   margin: 0;
}

.app-form {
   margin-bottom: var(--space-xl);
}

.app-results {
   background: var(--bg-secondary);
   border-radius: var(--border-radius);
   padding: var(--space-lg);
   margin-top: var(--space-xl);
}

.results-title {
   font-size: var(--font-xl);
   font-weight: 600;
   color: var(--brand-primary);
   margin: 0 0 var(--space-md) 0;
}

.results-value {
   font-size: var(--font-2xl);
   font-weight: 700;
   color: var(--brand-accent);
}

.results-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: var(--space-lg);
   margin-top: var(--space-lg);
}

.result-item {
   background: var(--bg-primary);
   padding: var(--space-md);
   border-radius: var(--border-radius);
   border: 1px solid var(--border-color);
}

.result-label {
   font-size: var(--font-sm);
   color: var(--text-muted);
   margin-bottom: var(--space-xs);
}

.result-value {
   font-size: var(--font-xl);
   font-weight: 600;
   color: var(--text-primary);
}

.app-error {
   background: rgba(231, 76, 60, 0.1);
   border: 1px solid var(--color-danger);
   color: var(--color-danger);
   padding: var(--space-md);
   border-radius: var(--border-radius);
   margin-top: var(--space-lg);
}

/* =====================================================
   PAGE TEMPLATE COMPONENTS
   ===================================================== */
.page-wrapper {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

.page-header {
   background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
   color: var(--text-inverse);
   padding: var(--space-3xl) 0;
   text-align: center;
}

.page-title {
   font-size: var(--font-4xl);
   margin: 0 0 var(--space-md) 0;
}

.page-subtitle {
   font-size: var(--font-xl);
   opacity: 0.9;
   margin: 0;
}

.page-content {
   flex: 1;
   padding: var(--space-3xl) 0;
}

.page-meta {
   display: flex;
   align-items: center;
   gap: var(--space-lg);
   font-size: var(--font-sm);
   color: var(--text-muted);
   margin: var(--space-lg) 0;
   padding: var(--space-md) 0;
   border-top: 1px solid var(--border-color);
   border-bottom: 1px solid var(--border-color);
}

/* =====================================================
   WIDGET COMPONENTS
   ===================================================== */
.widget {
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   padding: var(--space-lg);
   margin-bottom: var(--space-xl);
}

.widget-title {
   font-size: var(--font-xl);
   font-weight: 600;
   color: var(--text-primary);
   margin: 0 0 var(--space-md) 0;
   padding-bottom: var(--space-md);
   border-bottom: 2px solid var(--brand-primary);
}

.widget-content {
   margin-top: var(--space-md);
}

.widget-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.widget-list li {
   padding: var(--space-sm) 0;
   border-bottom: 1px solid var(--border-color);
}

.widget-list li:last-child {
   border-bottom: none;
}

/* =====================================================
   NAVIGATION COMPONENTS
   ===================================================== */
.breadcrumbs {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   font-size: var(--font-sm);
   color: var(--text-muted);
   margin-bottom: var(--space-xl);
}

.breadcrumbs a {
   color: var(--brand-primary);
   text-decoration: none;
}

.breadcrumbs a:hover {
   text-decoration: underline;
}

.breadcrumbs .separator {
   color: var(--text-muted);
}

.menu-item {
   display: block;
   padding: var(--space-sm) var(--space-md);
   color: var(--text-primary);
   text-decoration: none;
   transition: var(--transition-base);
}

.menu-item:hover {
   background: var(--bg-secondary);
   color: var(--brand-primary);
}

.menu-item.active {
   background: var(--brand-primary);
   color: var(--text-inverse);
}

/* =====================================================
   MESSAGE COMPONENTS
   ===================================================== */
.notice {
   padding: var(--space-md) var(--space-lg);
   border-radius: var(--border-radius);
   margin: var(--space-lg) 0;
   border: 1px solid;
}

.notice-success {
   background: rgba(39, 174, 96, 0.1);
   border-color: var(--color-success);
   color: var(--color-success);
}

.notice-warning {
   background: rgba(243, 156, 18, 0.1);
   border-color: var(--color-warning);
   color: var(--color-warning);
}

.notice-error {
   background: rgba(231, 76, 60, 0.1);
   border-color: var(--color-danger);
   color: var(--color-danger);
}

.notice-info {
   background: rgba(52, 152, 219, 0.1);
   border-color: var(--color-info);
   color: var(--color-info);
}

.form-message {
   padding: var(--space-md);
   border-radius: var(--border-radius);
   margin-top: var(--space-md);
   text-align: center;
   font-weight: 500;
}

.form-message.success {
   background: rgba(39, 174, 96, 0.1);
   color: var(--color-success);
   border: 1px solid var(--color-success);
}

.form-message.error {
   background: rgba(231, 76, 60, 0.1);
   color: var(--color-danger);
   border: 1px solid var(--color-danger);
}

/* =====================================================
   SEARCH COMPONENTS
   ===================================================== */
.search-form {
   position: relative;
   margin-bottom: var(--space-xl);
}

.search-input {
   width: 100%;
   padding: 12px 48px 12px 16px;
   font-size: var(--font-base);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   transition: var(--transition-base);
}

.search-input:focus {
   outline: none;
   border-color: var(--brand-primary);
   box-shadow: 0 0 0 3px rgba(30, 95, 142, 0.1);
}

.search-button {
   position: absolute;
   right: 8px;
   top: 50%;
   transform: translateY(-50%);
   background: var(--brand-primary);
   color: var(--text-inverse);
   border: none;
   border-radius: var(--border-radius-sm);
   padding: 8px 16px;
   cursor: pointer;
   transition: var(--transition-base);
}

.search-button:hover {
   background: #164A70;
}

.search-results {
   margin-top: var(--space-xl);
}

.search-result-item {
   padding: var(--space-lg);
   border-bottom: 1px solid var(--border-color);
}

.search-result-item:last-child {
   border-bottom: none;
}

/* =====================================================
   TYPOGRAPHY UTILITIES
   ===================================================== */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-inverse { color: var(--text-inverse); }
.text-brand { color: var(--brand-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.text-info { color: var(--color-info); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.font-xs { font-size: var(--font-xs); }
.font-sm { font-size: var(--font-sm); }
.font-base { font-size: var(--font-base); }
.font-lg { font-size: var(--font-lg); }
.font-xl { font-size: var(--font-xl); }
.font-2xl { font-size: var(--font-2xl); }
.font-3xl { font-size: var(--font-3xl); }
.font-4xl { font-size: var(--font-4xl); }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* =====================================================
   SPACING UTILITIES
   ===================================================== */
.m-0 { margin: 0; }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }
.m-2xl { margin: var(--space-2xl); }
.m-3xl { margin: var(--space-3xl); }

.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
.p-3xl { padding: var(--space-3xl); }

/* =====================================================
   DISPLAY UTILITIES
   ===================================================== */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; }

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* =====================================================
   HOMEPAGE SPECIFIC
   ===================================================== */
.hero-section {
   background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
   color: var(--text-inverse);
   padding: var(--space-3xl) 0;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.hero-title {
   font-size: clamp(var(--font-2xl), 5vw, var(--font-4xl));
   margin: 0 0 var(--space-lg) 0;
   font-weight: 700;
}

.hero-subtitle {
   font-size: var(--font-xl);
   opacity: 0.95;
   margin: 0 0 var(--space-2xl) 0;
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
}

.hero-buttons {
   display: flex;
   gap: var(--space-md);
   justify-content: center;
   flex-wrap: wrap;
}

.tools-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: var(--space-xl);
   margin-top: var(--space-2xl);
}

.tool-card {
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius-lg);
   padding: var(--space-xl);
   text-align: center;
   transition: var(--transition-base);
   position: relative;
   overflow: hidden;
}

.tool-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-lg);
   border-color: var(--brand-primary);
}

.tool-icon {
   font-size: 48px;
   margin-bottom: var(--space-md);
   display: block;
}

.tool-name {
   font-size: var(--font-xl);
   font-weight: 600;
   color: var(--text-primary);
   margin: 0 0 var(--space-sm) 0;
}

.tool-description {
   color: var(--text-secondary);
   margin: 0 0 var(--space-lg) 0;
}

.stats-section {
   background: var(--bg-secondary);
   padding: var(--space-3xl) 0;
}

.stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: var(--space-xl);
   text-align: center;
}

.stat-item {
   padding: var(--space-lg);
}

.stat-number {
   font-size: var(--font-3xl);
   font-weight: 700;
   color: var(--brand-primary);
   margin: 0;
}

.stat-label {
   font-size: var(--font-base);
   color: var(--text-secondary);
   margin: var(--space-sm) 0 0 0;
}

/* =====================================================
   BLOG COMPONENTS
   ===================================================== */
.blog-hero {
   background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
   color: var(--text-inverse);
   padding: var(--space-3xl) 0;
   text-align: center;
}

.blog-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: var(--space-xl);
}

.post-card {
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   overflow: hidden;
   transition: var(--transition-base);
}

.post-card:hover {
   box-shadow: var(--shadow-lg);
   transform: translateY(-2px);
}

.post-thumbnail {
   width: 100%;
   height: 200px;
   object-fit: cover;
   background: var(--bg-secondary);
}

.post-content {
   padding: var(--space-lg);
}

.post-category {
   display: inline-block;
   padding: var(--space-xs) var(--space-sm);
   background: var(--brand-primary);
   color: var(--text-inverse);
   font-size: var(--font-xs);
   border-radius: var(--border-radius-sm);
   margin-bottom: var(--space-sm);
}

.post-title {
   font-size: var(--font-xl);
   margin: 0 0 var(--space-sm) 0;
   color: var(--text-primary);
}

.post-excerpt {
   color: var(--text-secondary);
   margin: 0 0 var(--space-md) 0;
}

.post-meta {
   display: flex;
   justify-content: space-between;
   font-size: var(--font-sm);
   color: var(--text-muted);
}

.sidebar {
   background: var(--bg-primary);
   padding: var(--space-lg);
   border-radius: var(--border-radius);
   border: 1px solid var(--border-color);
}

/* =====================================================
   FOOTER STYLES
   ===================================================== */
.site-footer {
   background: var(--bg-dark);
   color: var(--text-inverse);
   padding: var(--space-3xl) 0 var(--space-xl) 0;
   margin-top: var(--space-3xl);
}

.footer-content {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: var(--space-2xl);
   margin-bottom: var(--space-2xl);
}

.footer-widget h3 {
   font-size: var(--font-xl);
   margin: 0 0 var(--space-lg) 0;
   color: var(--text-inverse);
}

.footer-widget ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.footer-widget ul li {
   margin-bottom: var(--space-sm);
}

.footer-widget a {
   color: rgba(255, 255, 255, 0.8);
   text-decoration: none;
   transition: var(--transition-base);
}

.footer-widget a:hover {
   color: var(--text-inverse);
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   padding-top: var(--space-xl);
   text-align: center;
   color: rgba(255, 255, 255, 0.6);
}

.social-links {
   display: flex;
   gap: var(--space-md);
   justify-content: center;
   margin-top: var(--space-lg);
}

.social-links a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   color: var(--text-inverse);
   transition: var(--transition-base);
}

.social-links a:hover {
   background: var(--brand-primary);
   transform: translateY(-2px);
}

/* =====================================================
   HELP WIDGET
   ===================================================== */
.help-widget {
   background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
   color: var(--text-inverse);
   padding: var(--space-xl);
   border-radius: var(--border-radius-lg);
   text-align: center;
   margin: var(--space-2xl) 0;
}

.help-widget h3 {
   font-size: var(--font-2xl);
   margin: 0 0 var(--space-md) 0;
}

.help-widget p {
   margin: 0 0 var(--space-lg) 0;
   opacity: 0.95;
}

/* =====================================================
   RESPONSIVE DESIGN
   ===================================================== */
@media (max-width: 1199px) {
   .container {
      max-width: 960px;
   }
}

@media (max-width: 1023px) {
   .grid-cols-4 {
      grid-template-columns: repeat(2, 1fr);
   }

   .grid-cols-3 {
      grid-template-columns: repeat(2, 1fr);
   }

   .tools-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 767px) {
   .container {
      padding: 0 var(--space-md);
   }

   .section {
      padding: var(--space-2xl) 0;
   }

   .grid-cols-2,
   .grid-cols-3,
   .grid-cols-4 {
      grid-template-columns: 1fr;
   }

   .tools-grid,
   .blog-grid {
      grid-template-columns: 1fr;
   }

   .hero-title {
      font-size: var(--font-2xl);
   }

   .hero-subtitle {
      font-size: var(--font-lg);
   }

   .hero-buttons {
      flex-direction: column;
      align-items: center;
   }

   .hero-buttons .btn {
      width: 100%;
      max-width: 300px;
   }

   .stats-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .footer-content {
      grid-template-columns: 1fr;
   }

   .app-container {
      padding: var(--space-lg);
   }

   .results-grid {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 479px) {
   .page-title {
      font-size: var(--font-2xl);
   }

   .stats-grid {
      grid-template-columns: 1fr;
   }

   .btn {
      font-size: var(--font-sm);
      padding: 10px 20px;
   }
}

/* =====================================================
   OCEANWP INTEGRATION
   ===================================================== */
/* Extend OceanWP styles without aggressive overrides */
#site-header {
   background: var(--bg-primary);
   border-bottom: 1px solid var(--border-color);
}

#site-navigation-wrap .dropdown-menu > li > a {
   color: var(--text-primary);
   transition: var(--transition-base);
}

#site-navigation-wrap .dropdown-menu > li > a:hover {
   color: var(--brand-primary);
   background: var(--bg-secondary);
}

/* Ensure OceanWP mobile menu works */
.mobile-menu {
   background: var(--bg-primary);
}

.mobile-menu a {
   color: var(--text-primary);
   border-bottom: 1px solid var(--border-color);
}

/* =====================================================
   PRINT STYLES
   ===================================================== */
@media print {
   .no-print,
   .site-header,
   .site-footer,
   .sidebar,
   .breadcrumbs,
   .social-links {
      display: none;
   }

   body {
      font-size: 12pt;
      line-height: 1.5;
      color: #000;
      background: #fff;
   }

   .container {
      max-width: 100%;
      padding: 0;
   }

   a {
      color: #000;
      text-decoration: underline;
   }
}

/* =====================================================
   ACCESSIBILITY
   ===================================================== */
.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

:focus {
   outline: 2px solid var(--brand-primary);
   outline-offset: 2px;
}

.skip-link {
   position: absolute;
   top: -40px;
   left: 0;
   background: var(--brand-primary);
   color: var(--text-inverse);
   padding: var(--space-sm) var(--space-md);
   text-decoration: none;
   z-index: 100;
}

.skip-link:focus {
   top: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
   :root {
      --brand-primary: #003D5B;
      --text-primary: #000000;
      --bg-primary: #FFFFFF;
      --border-color: #000000;
   }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
   * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }
}

/* =====================================================
   LOADING STATES
   ===================================================== */
.loading {
   position: relative;
   pointer-events: none;
   opacity: 0.6;
}

.loading::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   width: 24px;
   height: 24px;
   margin: -12px 0 0 -12px;
   border: 3px solid var(--brand-primary);
   border-top-color: transparent;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
}

@keyframes spin {
   to { transform: rotate(360deg); }
}

/* =====================================================
   CUSTOM SCROLLBAR
   ===================================================== */
::-webkit-scrollbar {
   width: 10px;
   height: 10px;
}

::-webkit-scrollbar-track {
   background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
   background: var(--brand-primary);
   border-radius: var(--border-radius);
}

::-webkit-scrollbar-thumb:hover {
   background: #164A70;
}

/* =====================================================
   MISSING CLASSES & UTILITIES
   ===================================================== */

/* Button Size Variants */
.btn-lg {
   padding: 16px 32px;
   font-size: var(--font-lg);
   height: 52px;
}

.btn-sm {
   padding: 8px 16px;
   font-size: var(--font-sm);
   height: 36px;
}

/* Section Specific Classes */
.blog-main,
.archive-main,
.search-main {
   flex: 1;
   min-width: 0;
}

.contact-form {
   max-width: 600px;
}

.content-area {
   font-size: var(--font-base);
   line-height: 1.7;
   color: var(--text-primary);
}

.entry-content {
   font-size: var(--font-base);
   line-height: 1.8;
}

.entry-content h2 {
   font-size: var(--font-2xl);
   margin: var(--space-2xl) 0 var(--space-lg) 0;
}

.entry-content h3 {
   font-size: var(--font-xl);
   margin: var(--space-xl) 0 var(--space-md) 0;
}

.entry-content p {
   margin-bottom: var(--space-lg);
}

.entry-content ul,
.entry-content ol {
   margin: var(--space-lg) 0;
   padding-left: var(--space-xl);
}

.entry-header {
   margin-bottom: var(--space-2xl);
}

/* Navigation Classes */
.header-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: var(--space-md) 0;
}

.main-navigation {
   flex: 1;
   display: flex;
   justify-content: flex-end;
}

.nav-menu {
   list-style: none;
   padding: 0;
   margin: 0;
}

.nav-menu li {
   position: relative;
}

.nav-menu a {
   color: var(--text-primary);
   text-decoration: none;
   padding: var(--space-sm) var(--space-md);
   display: block;
   transition: var(--transition-base);
}

.nav-menu a:hover,
.nav-menu .current a {
   color: var(--brand-primary);
   background: var(--bg-secondary);
}

.current > a {
   color: var(--brand-primary);
   font-weight: 600;
}

/* Calculator Fields */
.calc-fields {
   margin-bottom: var(--space-lg);
   padding: var(--space-lg);
   background: var(--bg-secondary);
   border-radius: var(--border-radius);
}

/* Width Utilities */
.w-100 {
   width: 100%;
}

.w-50 {
   width: 50%;
}

/* Margin Right Utilities */
.mr-xs { margin-right: var(--space-xs); }
.mr-sm { margin-right: var(--space-sm); }
.mr-md { margin-right: var(--space-md); }
.mr-lg { margin-right: var(--space-lg); }

/* Form Error States */
.form-input.error,
.form-select.error,
.form-textarea.error {
   border-color: var(--color-danger);
   background: rgba(231, 76, 60, 0.05);
}

.form-input.error:focus,
.form-select.error:focus,
.form-textarea.error:focus {
   border-color: var(--color-danger);
   box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

input.error,
textarea.error,
select.error {
   border-color: var(--color-danger) !important;
   background: rgba(231, 76, 60, 0.05) !important;
}

/* Responsive Tables */
.table-responsive {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   margin-bottom: var(--space-lg);
}

table {
   width: 100%;
   border-collapse: collapse;
}

table th,
table td {
   padding: var(--space-sm) var(--space-md);
   text-align: left;
   border-bottom: 1px solid var(--border-color);
}

table th {
   font-weight: 600;
   background: var(--bg-secondary);
   border-bottom: 2px solid var(--border-color);
}

table tbody tr:hover {
   background: var(--bg-secondary);
}

/* Mobile Menu Toggle */
.menu-toggle {
   display: none;
   background: transparent;
   border: none;
   font-size: var(--font-2xl);
   cursor: pointer;
   padding: var(--space-sm);
}

@media (max-width: 767px) {
   .menu-toggle {
      display: block;
   }

   .main-navigation {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--bg-primary);
      box-shadow: var(--shadow-lg);
      z-index: var(--z-dropdown);
   }

   .main-navigation.active {
      display: block;
   }

   .nav-menu {
      flex-direction: column;
   }

   .nav-menu li {
      border-bottom: 1px solid var(--border-color);
   }

   .calc-fields {
      padding: var(--space-md);
   }

   table {
      font-size: var(--font-sm);
   }

   table th,
   table td {
      padding: var(--space-xs) var(--space-sm);
   }
}

/* Sub-menu Styles */
.sub-menu {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   background: var(--bg-primary);
   box-shadow: var(--shadow-md);
   min-width: 200px;
   list-style: none;
   padding: 0;
   margin: 0;
   z-index: var(--z-dropdown);
}

.menu-item-has-children:hover .sub-menu {
   display: block;
}

.sub-menu li {
   border-bottom: 1px solid var(--border-color);
}

.sub-menu li:last-child {
   border-bottom: none;
}

.sub-menu a {
   padding: var(--space-sm) var(--space-md);
   font-size: var(--font-sm);
}

/* Site Branding */
.site-branding {
   flex-shrink: 0;
}

.site-title {
   margin: 0;
   font-size: var(--font-2xl);
   font-weight: 700;
}

.site-title a {
   color: var(--brand-primary);
   text-decoration: none;
}

.site-description {
   margin: var(--space-xs) 0 0 0;
   font-size: var(--font-sm);
   color: var(--text-secondary);
}

/* Additional WordPress Classes */
.page-links {
   margin: var(--space-xl) 0;
   font-weight: 600;
}

.screen-reader-text {
   position: absolute;
   left: -9999px;
}