/*
Theme Name: ActivePedal - Cycling Tools & Fitness
Theme URI: https://www.activepedal.com
Description: Professional AdSense-ready cycling tools and fitness child theme for OceanWP. Features 6 functional cycling calculators with comprehensive educational content.
Author: ActivePedal Development Team
Author URI: https://www.activepedal.com
Template: oceanwp
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: activepedal
Tags: cycling, fitness, calculators, tools, adsense, two-columns, responsive-layout, accessibility-ready
*/

/* ========================================================================
   CSS VARIABLES - Cycling Brand Identity
   ======================================================================== */
:root {
   /* Brand Colors - Cycling Energy & Trust */
   --brand-primary: #FF6B35;       /* Vibrant Orange - Energy, Movement, Action */
   --brand-secondary: #004E89;     /* Deep Blue - Trust, Professionalism, Sky */
   --brand-accent: #1A936F;        /* Teal Green - Health, Growth, Success */

   /* Semantic Colors - NEVER change names */
   --color-success: #1A936F;       /* Success states */
   --color-warning: #F77F00;       /* Warning states */
   --color-danger: #D62828;        /* Error states */
   --color-info: #0077B6;          /* Info states */

   /* Typography Colors - NEVER change names */
   --text-primary: #1A1A2E;        /* Main text - Deep charcoal */
   --text-secondary: #4A4A68;      /* Secondary text */
   --text-muted: #7A7A96;          /* 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: #E8EDF2;            /* Muted backgrounds */
   --bg-dark: #1A1A2E;             /* Dark backgrounds */

   /* Border & Shadow - NEVER change names */
   --border-color: #D0D7DE;
   --border-radius: 8px;
   --border-radius-sm: 4px;
   --border-radius-lg: 12px;
   --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
   --shadow-md: 0 4px 8px rgba(0,0,0,0.12);
   --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);

   /* 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: 46px;           /* Form inputs */
   --height-button: 46px;          /* Buttons */
   --height-header: 80px;          /* Site header */
}

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

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

.container-fluid {
   width: 100%;
   padding: 0 var(--space-lg);
}

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

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

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

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

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

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

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

.card-title {
   margin: 0;
   font-size: var(--font-xl);
   font-weight: 600;
   color: var(--text-primary);
}

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

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

/* Tool Cards */
.tool-card {
   display: flex;
   flex-direction: column;
   height: 100%;
   text-decoration: none;
   color: inherit;
}

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

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

.tool-description {
   color: var(--text-secondary);
   font-size: var(--font-base);
   line-height: 1.6;
   flex-grow: 1;
}

/* ========================================================================
   BUTTON COMPONENTS
   ======================================================================== */
.btn {
   display: inline-block;
   padding: 12px 28px;
   font-size: var(--font-base);
   font-weight: 600;
   line-height: 1.5;
   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);
   min-width: 120px;
}

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

.btn-primary:hover {
   background: #E55A28;
   border-color: #E55A28;
   transform: translateY(-1px);
   box-shadow: var(--shadow-md);
}

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

.btn-secondary:hover {
   background: #003D6B;
   border-color: #003D6B;
   transform: translateY(-1px);
   box-shadow: var(--shadow-md);
}

.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);
   font-size: var(--font-base);
}

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

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

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

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

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

.form-message {
   padding: var(--space-md);
   border-radius: var(--border-radius);
   margin-bottom: var(--space-lg);
}

.form-message.success {
   background: rgba(26, 147, 111, 0.1);
   border-left: 4px solid var(--color-success);
   color: var(--color-success);
}

.form-message.error {
   background: rgba(214, 40, 40, 0.1);
   border-left: 4px solid var(--color-danger);
   color: var(--color-danger);
}

/* ========================================================================
   APP INTERFACE STANDARDS
   ======================================================================== */
.app-container {
   max-width: 900px;
   margin: 0 auto;
   padding: var(--space-2xl) var(--space-lg);
}

.app-header {
   text-align: center;
   margin-bottom: var(--space-2xl);
}

.app-title {
   font-size: var(--font-3xl);
   font-weight: 700;
   color: var(--text-primary);
   margin-bottom: var(--space-md);
   line-height: 1.2;
}

.app-description {
   font-size: var(--font-lg);
   color: var(--text-secondary);
   max-width: 700px;
   margin: 0 auto;
   line-height: 1.6;
}

.app-form {
   background: var(--bg-primary);
   border: 2px solid var(--border-color);
   border-radius: var(--border-radius-lg);
   padding: var(--space-2xl);
   margin-bottom: var(--space-2xl);
   box-shadow: var(--shadow-sm);
}

.app-results {
   background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
   color: var(--text-inverse);
   padding: var(--space-2xl);
   border-radius: var(--border-radius-lg);
   margin-bottom: var(--space-2xl);
   box-shadow: var(--shadow-lg);
}

.results-title {
   font-size: var(--font-2xl);
   font-weight: 700;
   margin-bottom: var(--space-lg);
   text-align: center;
}

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

.results-item {
   text-align: center;
   padding: var(--space-lg);
   background: rgba(255, 255, 255, 0.1);
   border-radius: var(--border-radius);
}

.results-label {
   font-size: var(--font-sm);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: var(--space-sm);
   opacity: 0.9;
}

.results-value {
   font-size: var(--font-3xl);
   font-weight: 700;
   line-height: 1.2;
}

.results-unit {
   font-size: var(--font-lg);
   opacity: 0.8;
   margin-left: var(--space-xs);
}

.app-error {
   background: rgba(214, 40, 40, 0.1);
   border: 2px solid var(--color-danger);
   border-radius: var(--border-radius);
   padding: var(--space-lg);
   color: var(--color-danger);
   margin-bottom: var(--space-lg);
   text-align: center;
   font-weight: 600;
}

/* ========================================================================
   PAGE TEMPLATE COMPONENTS
   ======================================================================== */
.page-wrapper {
   max-width: 1200px;
   margin: 0 auto;
   padding: var(--space-2xl) var(--space-lg);
}

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

.page-title {
   font-size: var(--font-4xl);
   font-weight: 700;
   color: var(--text-primary);
   margin-bottom: var(--space-md);
   line-height: 1.2;
}

.page-subtitle {
   font-size: var(--font-xl);
   color: var(--text-secondary);
   max-width: 800px;
   margin: 0 auto;
   line-height: 1.6;
}

.page-meta {
   display: flex;
   justify-content: center;
   gap: var(--space-lg);
   margin-top: var(--space-lg);
   font-size: var(--font-sm);
   color: var(--text-muted);
}

.page-content {
   font-size: var(--font-lg);
   line-height: 1.8;
   color: var(--text-primary);
}

.page-content h2 {
   font-size: var(--font-2xl);
   font-weight: 700;
   color: var(--text-primary);
   margin: var(--space-2xl) 0 var(--space-lg);
}

.page-content h3 {
   font-size: var(--font-xl);
   font-weight: 600;
   color: var(--text-primary);
   margin: var(--space-xl) 0 var(--space-md);
}

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

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

.page-content li {
   margin-bottom: var(--space-sm);
}

/* ========================================================================
   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-lg);
}

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

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

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

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

.widget-content a {
   color: var(--text-primary);
   text-decoration: none;
   transition: var(--transition-fast);
}

.widget-content a:hover {
   color: var(--brand-primary);
}

/* Help Widget */
.help-widget {
   background: linear-gradient(135deg, #FFF5F0 0%, #F0F8FF 100%);
   border: 2px solid var(--brand-primary);
}

.help-section {
   margin-bottom: var(--space-lg);
}

.help-section:last-child {
   margin-bottom: 0;
}

.help-section h4 {
   font-size: var(--font-base);
   font-weight: 600;
   color: var(--brand-primary);
   margin-bottom: var(--space-sm);
}

/* ========================================================================
   SEARCH COMPONENTS
   ======================================================================== */
.search-form {
   display: flex;
   gap: var(--space-sm);
   margin-bottom: var(--space-lg);
}

.search-input {
   flex: 1;
}

.search-button {
   flex-shrink: 0;
}

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

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

.search-result-title {
   font-size: var(--font-xl);
   font-weight: 600;
   margin-bottom: var(--space-sm);
}

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

.search-result-title a:hover {
   text-decoration: underline;
}

.search-result-excerpt {
   color: var(--text-secondary);
   line-height: 1.6;
}

/* ========================================================================
   NAVIGATION COMPONENTS
   ======================================================================== */
.breadcrumbs {
   padding: var(--space-md) 0;
   font-size: var(--font-sm);
   color: var(--text-muted);
}

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

.breadcrumbs a:hover {
   color: var(--brand-primary);
}

.breadcrumb-separator {
   margin: 0 var(--space-sm);
}

.menu-item {
   list-style: none;
}

.menu-link {
   color: var(--text-primary);
   text-decoration: none;
   transition: var(--transition-fast);
}

.menu-link:hover {
   color: var(--brand-primary);
}

/* ========================================================================
   MESSAGE COMPONENTS
   ======================================================================== */
.notice {
   padding: var(--space-lg);
   border-radius: var(--border-radius);
   margin-bottom: var(--space-lg);
   border-left: 4px solid;
}

.notice-success {
   background: rgba(26, 147, 111, 0.1);
   border-color: var(--color-success);
   color: var(--color-success);
}

.notice-warning {
   background: rgba(247, 127, 0, 0.1);
   border-color: var(--color-warning);
   color: var(--color-warning);
}

.notice-error {
   background: rgba(214, 40, 40, 0.1);
   border-color: var(--color-danger);
   color: var(--color-danger);
}

.notice-info {
   background: rgba(0, 119, 182, 0.1);
   border-color: var(--color-info);
   color: var(--color-info);
}

/* ========================================================================
   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-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

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

/* ========================================================================
   SPACING UTILITIES
   ======================================================================== */
.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); }

.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); }

.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); }

/* ========================================================================
   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; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }

/* ========================================================================
   RESPONSIVE DESIGN
   ======================================================================== */
@media (max-width: 479px) {
   /* Small mobile - xs */
   .container {
       padding: 0 var(--space-md);
   }

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

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

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

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

@media (max-width: 767px) {
   /* Mobile - sm */
   .app-form {
       padding: var(--space-lg);
   }

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

   .btn {
       width: 100%;
   }

   .page-wrapper {
       padding: var(--space-lg) var(--space-md);
   }

   /* Header Mobile Adjustments */
   .activepedal-header {
       padding: var(--space-sm) 0;
   }

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

   .site-description {
       font-size: var(--font-xs);
   }

   .site-branding .custom-logo-link img {
       max-height: 45px;
   }
}

@media (max-width: 1023px) {
   /* Tablet - md */
   .grid-3,
   .grid-4 {
       grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 1199px) {
   /* Desktop - lg */
   .section {
       padding: var(--space-2xl) 0;
   }
}

@media (min-width: 1400px) {
   /* Large desktop - xl */
   .container {
       max-width: 1320px;
   }
}

/* ========================================================================
   OCEANWP INTEGRATION & OVERRIDES
   ======================================================================== */

/* Hide OceanWP default header - use custom header instead */
#site-header,
#site-header-inner,
#site-navigation-wrap,
.oceanwp-mobile-menu-icon,
#mobile-dropdown,
#site-logo,
.oceanwp-social-menu,
.header-replace {
   display: none !important;
}

/* Force show our custom header */
#activepedal-header,
.activepedal-header {
   display: block !important;
}

/* Ensure OceanWP top bar is hidden */
#top-bar-wrap,
.top-bar {
   display: none !important;
}

/* Hide OceanWP page header */
.page-header-wrap,
.page-header {
   display: none !important;
}

/* Logo Scaling (if OceanWP logo appears) */
#site-logo img {
   max-height: 60px;
   width: auto;
   transition: var(--transition-base);
}

@media (max-width: 767px) {
   #site-logo img {
       max-height: 45px;
   }
}

/* Navigation Enhancement (backup styles) */
#site-navigation-wrap .dropdown-menu > li > a {
   transition: var(--transition-fast);
}

#site-navigation-wrap .dropdown-menu > li > a:hover {
   color: var(--brand-primary);
   background: rgba(255, 107, 53, 0.05);
}

/* Footer Styling */
#footer-widgets {
   background: var(--bg-dark);
   color: var(--text-inverse);
}

#footer-widgets a {
   color: var(--text-inverse);
   opacity: 0.8;
   transition: var(--transition-fast);
}

#footer-widgets a:hover {
   opacity: 1;
   color: var(--brand-primary);
}

/* Content Area */
.entry-content {
   font-size: var(--font-lg);
   line-height: 1.8;
   color: var(--text-primary);
}

/* Sidebar */
#right-sidebar .sidebar-box {
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   padding: var(--space-lg);
   margin-bottom: var(--space-lg);
}

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

.hero-title {
   font-size: var(--font-4xl);
   font-weight: 700;
   margin-bottom: var(--space-lg);
   line-height: 1.2;
}

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

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

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

.section-title {
   text-align: center;
   font-size: var(--font-3xl);
   font-weight: 700;
   margin-bottom: var(--space-2xl);
   color: var(--text-primary);
}

.section-description {
   text-align: center;
   font-size: var(--font-lg);
   color: var(--text-secondary);
   max-width: 700px;
   margin: 0 auto var(--space-2xl);
   line-height: 1.6;
}

.trust-signals {
   background: var(--bg-secondary);
   padding: var(--space-2xl) 0;
   text-align: center;
}

.trust-stats {
   display: flex;
   justify-content: center;
   gap: var(--space-3xl);
   flex-wrap: wrap;
}

.trust-stat {
   text-align: center;
}

.trust-stat-value {
   font-size: var(--font-4xl);
   font-weight: 700;
   color: var(--brand-primary);
   line-height: 1;
   margin-bottom: var(--space-sm);
}

.trust-stat-label {
   font-size: var(--font-base);
   color: var(--text-secondary);
}

/* ========================================================================
   HEADER & NAVIGATION
   ======================================================================== */

/* Standalone Header Styles */
.activepedal-header {
   position: sticky;
   top: 0;
   z-index: var(--z-sticky);
   background: var(--bg-primary);
   border-bottom: 1px solid var(--border-color);
   box-shadow: var(--shadow-sm);
   padding: var(--space-md) 0;
}

.header-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--space-lg);
}

.site-branding {
   flex-shrink: 0;
}

.site-branding .custom-logo-link img {
   max-height: 60px;
   width: auto;
   display: block;
}

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

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

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

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

/* Primary Navigation Menu */
.main-navigation {
   display: flex;
   justify-content: flex-end;
   align-items: center;
}

.primary-menu {
   display: flex;
   list-style: none;
   margin: 0;
   padding: 0;
   gap: var(--space-lg);
   align-items: center;
}

.primary-menu li {
   position: relative;
   margin: 0;
   padding: 0;
}

.primary-menu > li > a {
   color: var(--text-primary);
   text-decoration: none;
   font-weight: 600;
   font-size: var(--font-base);
   padding: var(--space-sm) var(--space-md);
   display: block;
   transition: var(--transition-fast);
   border-radius: var(--border-radius-sm);
}

.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current_page_item > a {
   color: var(--brand-primary);
   background: rgba(255, 107, 53, 0.1);
}

/* Dropdown Menu Styles */
.primary-menu li {
   position: relative;
}

.primary-menu .sub-menu {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   min-width: 220px;
   background: var(--bg-primary);
   box-shadow: var(--shadow-lg);
   border-radius: var(--border-radius);
   border: 1px solid var(--border-color);
   padding: var(--space-sm) 0;
   margin-top: var(--space-xs);
   z-index: var(--z-dropdown);
   list-style: none;
}

.primary-menu li:hover > .sub-menu {
   display: block;
}

.primary-menu .sub-menu li {
   margin: 0;
   padding: 0;
}

.primary-menu .sub-menu a {
   color: var(--text-primary);
   text-decoration: none;
   padding: var(--space-sm) var(--space-lg);
   display: block;
   font-size: var(--font-sm);
   transition: var(--transition-fast);
}

.primary-menu .sub-menu a:hover {
   background: var(--bg-secondary);
   color: var(--brand-primary);
   padding-left: calc(var(--space-lg) + 4px);
}

/* Menu Item with Children Indicator */
.primary-menu .menu-item-has-children > a::after {
   content: '▼';
   font-size: 0.7em;
   margin-left: var(--space-xs);
   opacity: 0.6;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
   display: none;
   background: transparent;
   border: 2px solid var(--border-color);
   border-radius: var(--border-radius-sm);
   padding: var(--space-sm);
   cursor: pointer;
   font-size: var(--font-2xl);
   line-height: 1;
   color: var(--text-primary);
   transition: var(--transition-fast);
   width: 44px;
   height: 44px;
   align-items: center;
   justify-content: center;
}

.mobile-menu-toggle:hover {
   border-color: var(--brand-primary);
   color: var(--brand-primary);
   background: rgba(255, 107, 53, 0.05);
}

.mobile-menu-toggle.active {
   background: var(--brand-primary);
   border-color: var(--brand-primary);
   color: white;
}

.menu-icon {
   display: block;
   line-height: 1;
}

/* Mobile Navigation */
@media (max-width: 1023px) {
   .main-navigation {
       position: fixed;
       top: 0;
       right: -100%;
       width: 280px;
       height: 100vh;
       background: var(--bg-primary);
       box-shadow: var(--shadow-lg);
       padding: var(--space-2xl) var(--space-lg);
       transition: right 0.3s ease;
       z-index: var(--z-modal);
       overflow-y: auto;
   }

   .main-navigation.open {
       right: 0;
   }

   .mobile-menu-toggle {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 44px;
       height: 44px;
   }

   .primary-menu {
       flex-direction: column;
       align-items: stretch;
       gap: 0;
   }

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

   .primary-menu > li > a {
       padding: var(--space-md);
   }

   .primary-menu .sub-menu {
       position: static;
       opacity: 1;
       visibility: visible;
       transform: none;
       box-shadow: none;
       border: none;
       background: var(--bg-secondary);
       margin: 0;
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.3s ease;
   }

   .primary-menu li.open > .sub-menu {
       max-height: 500px;
   }

   .primary-menu .sub-menu a {
       padding: var(--space-sm) var(--space-xl);
   }
}

/* Screen Reader Text */
.screen-reader-text {
   clip: rect(1px, 1px, 1px, 1px);
   position: absolute !important;
   height: 1px;
   width: 1px;
   overflow: hidden;
}

.screen-reader-text:focus {
   background-color: var(--bg-primary);
   border-radius: var(--border-radius);
   box-shadow: var(--shadow-md);
   clip: auto !important;
   color: var(--text-primary);
   display: block;
   font-size: var(--font-base);
   font-weight: 600;
   height: auto;
   left: var(--space-sm);
   line-height: normal;
   padding: var(--space-md) var(--space-lg);
   text-decoration: none;
   top: var(--space-sm);
   width: auto;
   z-index: 100000;
}

/* ========================================================================
   PRINT STYLES
   ======================================================================== */
@media print {
   .app-form,
   .btn,
   .hero-section,
   #site-navigation-wrap,
   #footer-widgets,
   .mobile-menu-toggle,
   .main-navigation {
       display: none;
   }

   .app-results {
       background: white;
       color: black;
       border: 2px solid black;
   }
}