/*
Theme Name: flow
Description: A modern, elegant WordPress blog theme with clean minimalist design, magazine-style layout, and glass-morphism effects. Perfect for home building and construction content.
Author: GoBuildYourHouse
Version: 1.5.5
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gobuildyourhouse
Tags: blog, magazine, responsive, accessibility-ready, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
*/

/* CSS Custom Properties - Color Palette */
:root {
  --primary-color: #fb8500;
  --secondary-color: #023047;
  --accent-color: #ffb703;
  --text-primary: #333333;
  --text-secondary: #4a5568;
  --text-light: #6b7280;
  --background-primary: #ffffff;
  --background-secondary: #f8f9fa;
  --border-color: #e9ecef;
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.15);
  --transition-smooth: all 0.3s ease;
  --border-radius: 5px;
  --border-radius-small: 3px;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
}

/* Reset and Base Styles */
* {
  box-sizing: border-box;
}

/* Prevent horizontal overflow - but allow sticky positioning */
html {
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--background-primary);
  font-size: 16px;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  min-width: 0;
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--spacing-sm) 0;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

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: 1.125rem; }

p {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--text-secondary);
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: var(--transition-smooth);
}

a:hover {
  color: var(--secondary-color);
}

/* Container and Layout */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

.container-wide {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* Comprehensive Overflow Prevention */
.site-header,
.site-main,
.site-footer,
.entry-content,
.post-content,
.page-content {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Apply overflow-x: hidden only to content areas that need it, not containers with sticky elements */
.entry-content,
.post-content,
.page-content {
  overflow-x: hidden;
}

/* Prevent specific elements from causing overflow */
img,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

/* Prevent text overflow */
pre,
code {
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
}

/* Prevent table overflow */
table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  display: block;
  white-space: nowrap;
}

@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* Prevent form elements from overflowing */
input,
textarea,
select,
button {
  max-width: 100%;
  box-sizing: border-box;
}

/* Prevent grid and flex items from overflowing - but not content-grid which contains sticky sidebar */
.grid:not(.content-grid),
.flex,
[class*="grid"]:not(.content-grid),
[class*="flex"] {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

/* Prevent WordPress blocks from overflowing */
.wp-block,
.wp-block-group,
.wp-block-columns,
.wp-block-column {
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* Accessibility */
.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(--background-primary);
  border-radius: var(--border-radius-small);
  box-shadow: var(--shadow-medium);
  clip: auto !important;
  color: var(--text-primary);
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  height: auto;
  left: 6px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 7px;
  width: auto;
  z-index: 100000;
}

/* Skip Link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 6px;
  z-index: 999999999;
  text-decoration: underline;
}

.skip-link:focus {
  display: block;
  left: 6px;
  top: 7px;
  z-index: 999999999;
  padding: 8px 16px;
  background: var(--background-primary);
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--border-radius-small);
  box-shadow: var(--shadow-medium);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(251, 133, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn:hover::before {
  left: 100%;
}

.btn:hover {
  background-color: var(--secondary-color);
  color: white;
  box-shadow: 0 6px 16px rgba(251, 133, 0, 0.3);
}

.btn:active {
  box-shadow: 0 2px 8px rgba(251, 133, 0, 0.3);
}

.btn-secondary {
  background-color: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  box-shadow: 0 2px 8px rgba(251, 133, 0, 0.1);
}

.btn-secondary:hover {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(251, 133, 0, 0.3);
}

/* Glass-morphism Effects */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
}

/* Responsive Images */
img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius-small);
}

/* WordPress Core Styles */
.alignleft {
  float: left;
  margin: 0 var(--spacing-sm) var(--spacing-sm) 0;
}

.alignright {
  float: right;
  margin: 0 0 var(--spacing-sm) var(--spacing-sm);
}

.aligncenter {
  display: block;
  margin: 0 auto var(--spacing-sm);
}

.wp-caption {
  max-width: 100%;
  margin-bottom: var(--spacing-sm);
}

.wp-caption-text {
  font-size: 0.875rem;
  color: var(--text-light);
  text-align: center;
  margin-top: var(--spacing-xs);
}

/* Responsive Design */
@media (max-width: 768px) {
  :root {
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
  }
  
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  
  .container,
  .container-wide {
    padding: 0 var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
}

/* Extra small devices (320px and below) */
@media (max-width: 320px) {
  :root {
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
  }

  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.125rem; }

  .container,
  .container-wide {
    padding: 0 var(--spacing-xs);
  }
}

/* Header Styles */
.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: var(--transition-smooth);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  gap: var(--spacing-md);
}

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

.site-logo img {
  max-height: 50px;
  width: auto;
}

.site-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

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

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

/* Custom HTML Logo */
.custom-html-logo {
  display: flex;
  align-items: center;
}

.custom-logo-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: var(--transition-smooth);
}

.custom-logo-link:hover {
  transform: translateY(-1px);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: rgba(251, 133, 0, 0.1);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 12px;
  border: 1px solid rgba(251, 133, 0, 0.2);
  transition: var(--transition-smooth);
}

.logo-container:hover {
  background: rgba(251, 133, 0, 0.15);
  border-color: rgba(251, 133, 0, 0.3);
  box-shadow: 0 4px 15px rgba(251, 133, 0, 0.1);
}

.logo-icon-circle {
  width: 32px;
  height: 32px;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(251, 133, 0, 0.3);
  transition: var(--transition-smooth);
  flex-shrink: 0;
  position: relative;
}

.logo-icon-circle:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(251, 133, 0, 0.4);
}

.logo-icon-circle i {
  font-size: 14px;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  font-style: normal;
  text-align: center;
}

/* Font Awesome specific styling */
.logo-icon-circle i.fas {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
}

.logo-icon-circle i.far {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 400;
}

.logo-icon-circle i.fab {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", FontAwesome;
  font-weight: 400;
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.site-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  transition: var(--transition-smooth);
}

.custom-logo-link:hover .site-name {
  color: var(--primary-color);
}

/* Logo Padding Variations */
.logo-padding-none {
  padding: 0;
}

.logo-padding-small {
  padding: 4px 8px;
}

.logo-padding-medium {
  padding: var(--spacing-xs) var(--spacing-sm);
}

.logo-padding-large {
  padding: var(--spacing-sm) var(--spacing-md);
}

.logo-padding-xlarge {
  padding: var(--spacing-md) var(--spacing-lg);
}

.logo-padding-custom {
  /* Custom padding will be applied via inline styles */
}

/* Logo Circle Size Variations */
.logo-circle-small {
  width: 24px;
  height: 24px;
}

.logo-circle-small i {
  font-size: 10px; /* ~42% of circle width for better proportion */
}

.logo-circle-medium {
  width: 32px;
  height: 32px;
}

.logo-circle-medium i {
  font-size: 14px; /* ~44% of circle width */
}

.logo-circle-large {
  width: 40px;
  height: 40px;
}

.logo-circle-large i {
  font-size: 18px; /* ~45% of circle width */
}

.logo-circle-xlarge {
  width: 48px;
  height: 48px;
}

.logo-circle-xlarge i {
  font-size: 22px; /* ~46% of circle width */
}

/* Ensure all circle sizes maintain perfect centering */
.logo-circle-small i,
.logo-circle-medium i,
.logo-circle-large i,
.logo-circle-xlarge i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  text-align: center;
  font-style: normal;
}

/* Logo Text Size Variations */
.logo-text-small {
  font-size: 0.875rem;
}

.logo-text-medium {
  font-size: 1.125rem;
}

.logo-text-large {
  font-size: 1.25rem;
}

.logo-text-xlarge {
  font-size: 1.5rem;
}

/* Logo Border Radius Variations */
.logo-radius-none {
  border-radius: 0;
}

.logo-radius-small {
  border-radius: 6px;
}

.logo-radius-medium {
  border-radius: 12px;
}

.logo-radius-large {
  border-radius: 16px;
}

.logo-radius-round {
  border-radius: 50px;
}

/* Logo Icon-Text Spacing Variations */
.logo-spacing-none {
  gap: 0;
}

.logo-spacing-small {
  gap: 4px;
}

.logo-spacing-medium {
  gap: var(--spacing-xs);
}

.logo-spacing-large {
  gap: 12px;
}

.logo-spacing-xlarge {
  gap: 16px;
}

.logo-spacing-custom {
  /* Custom spacing will be applied via inline styles */
}

/* Logo Font Family Variations */
.logo-font-inherit {
  font-family: inherit;
}

.logo-font-arial {
  font-family: Arial, sans-serif;
}

.logo-font-helvetica {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.logo-font-georgia {
  font-family: Georgia, "Times New Roman", Times, serif;
}

.logo-font-times {
  font-family: "Times New Roman", Times, serif;
}

.logo-font-courier {
  font-family: "Courier New", Courier, monospace;
}

.logo-font-verdana {
  font-family: Verdana, Geneva, sans-serif;
}

.logo-font-trebuchet {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}

.logo-font-tahoma {
  font-family: Tahoma, Geneva, sans-serif;
}

.logo-font-palatino {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.logo-font-garamond {
  font-family: Garamond, serif;
}

.logo-font-bookman {
  font-family: "Bookman Old Style", serif;
}

.logo-font-comic-sans {
  font-family: "Comic Sans MS", cursive;
}

.logo-font-impact {
  font-family: Impact, Charcoal, sans-serif;
}

.logo-font-lucida {
  font-family: "Lucida Console", Monaco, monospace;
}

.logo-font-system-ui {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Google Fonts */
.logo-font-roboto {
  font-family: "Roboto", sans-serif;
}

.logo-font-open-sans {
  font-family: "Open Sans", sans-serif;
}

.logo-font-lato {
  font-family: "Lato", sans-serif;
}

.logo-font-montserrat {
  font-family: "Montserrat", sans-serif;
}

.logo-font-poppins {
  font-family: "Poppins", sans-serif;
}

.logo-font-nunito {
  font-family: "Nunito", sans-serif;
}

.logo-font-raleway {
  font-family: "Raleway", sans-serif;
}

.logo-font-source-sans {
  font-family: "Source Sans Pro", sans-serif;
}

.logo-font-ubuntu {
  font-family: "Ubuntu", sans-serif;
}

.logo-font-playfair {
  font-family: "Playfair Display", serif;
}

/* Logo Font Weight Variations */
.logo-weight-300 {
  font-weight: 300;
}

.logo-weight-400 {
  font-weight: 400;
}

.logo-weight-500 {
  font-weight: 500;
}

.logo-weight-600 {
  font-weight: 600;
}

.logo-weight-700 {
  font-weight: 700;
}

.logo-weight-800 {
  font-weight: 800;
}

.logo-weight-900 {
  font-weight: 900;
}

/* Logo Text Style Variations */
.logo-text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.logo-text-italic {
  font-style: italic;
}

/* Logo Text Gradient Variations */
.logo-text-gradient {
  background: linear-gradient(to right, var(--primary-color), var(--accent-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* Gradient Direction Classes */
.logo-gradient-to-right {
  background: linear-gradient(to right, var(--primary-color), var(--accent-color));
}

.logo-gradient-to-left {
  background: linear-gradient(to left, var(--primary-color), var(--accent-color));
}

.logo-gradient-to-bottom {
  background: linear-gradient(to bottom, var(--primary-color), var(--accent-color));
}

.logo-gradient-to-top {
  background: linear-gradient(to top, var(--primary-color), var(--accent-color));
}

.logo-gradient-to-bottom-right {
  background: linear-gradient(to bottom right, var(--primary-color), var(--accent-color));
}

.logo-gradient-to-bottom-left {
  background: linear-gradient(to bottom left, var(--primary-color), var(--accent-color));
}

.logo-gradient-to-top-right {
  background: linear-gradient(to top right, var(--primary-color), var(--accent-color));
}

.logo-gradient-to-top-left {
  background: linear-gradient(to top left, var(--primary-color), var(--accent-color));
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (-webkit-background-clip: text) {
  .logo-text-gradient {
    background: none;
    color: var(--primary-color);
    -webkit-text-fill-color: unset;
  }
}

.site-description {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-light);
  line-height: 1.3;
}

/* Desktop Navigation */
.main-navigation {
  display: none;
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--spacing-md);
}

.nav-menu li {
  position: relative;
  height: 70px;
  display: flex;
  align-items: center;
}

.nav-menu a {
  display: block;
  padding: 0 var(--spacing-xs);
  color: var(--text-primary);
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: var(--transition-smooth);
}

.nav-menu li::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: var(--transition-smooth);
}

.nav-menu a:hover,
.nav-menu .current-menu-item > a {
  color: var(--primary-color);
}

.nav-menu li:hover::after,
.nav-menu .current-menu-item::after {
  background: var(--primary-color);
}

/* Desktop Submenu Styles */
.nav-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--background-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  min-width: 220px;
  padding: var(--spacing-xs) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: var(--transition-smooth);
  z-index: 99999;
  list-style: none;
  margin: 0;
}

.nav-menu li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu .sub-menu li {
  height: auto;
  display: block;
  margin: 0;
}

.nav-menu .sub-menu a {
  display: block;
  padding: 12px var(--spacing-md);
  color: var(--text-primary);
  font-weight: 400;
  font-size: 0.9rem;
  border-bottom: none;
  transition: var(--transition-smooth);
}

.nav-menu .sub-menu a:hover,
.nav-menu .sub-menu .current-menu-item > a {
  background: rgba(251, 133, 0, 0.1);
  color: var(--primary-color);
}

.nav-menu .sub-menu li::after {
  display: none;
}

/* Submenu indicator arrow */
.nav-menu .menu-item-has-children > a {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-menu .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}

.nav-menu .menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
}

/* Multi-level submenu support */
.nav-menu .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  margin-left: -1px;
}

.nav-menu .sub-menu li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Submenu indicator for nested items */
.nav-menu .sub-menu .menu-item-has-children > a {
  justify-content: space-between;
}

.nav-menu .sub-menu .menu-item-has-children > a::after {
  border-left: 4px solid currentColor;
  border-right: none;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-left: auto;
  margin-right: 0;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Search Form */
.header-search {
  position: relative;
}

.search-form {
  display: flex;
  align-items: center;
  background: var(--background-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: var(--transition-smooth);
  position: relative;
}

.search-form:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(251, 133, 0, 0.1);
}

.search-form-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

.search-field {
  border: none !important;
  background: transparent;
  padding: 10px 12px;
  font-size: 0.875rem;
  color: var(--text-primary);
  width: 200px;
  outline: none;
  flex: 1;
  box-shadow: none !important;
  height: 40px;
  line-height: 1.4;
  box-sizing: border-box;
}

.search-field:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.search-field::placeholder {
  color: var(--text-light);
}

.search-submit {
  border: none !important;
  background: transparent;
  padding: 0;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  height: 40px;
  width: 40px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.search-submit:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.search-submit:hover {
  color: var(--primary-color);
}

/* Search icon SVG styling */
.search-submit svg {
  width: 20px !important;
  height: 20px !important;
  display: block;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

/* Ensure proper alignment in search form */
.search-form {
  height: 42px;
  display: flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: white;
}

.search-form .search-field {
  height: 40px;
  border: none;
  margin: 0;
  padding: 0 12px;
}

.search-form .search-submit {
  height: 40px;
  width: 40px;
  border: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--border-color);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hamburger-line {
  width: 20px;
  height: 2px;
  background: var(--text-primary);
  transition: var(--transition-smooth);
}

.mobile-menu-toggle:hover .hamburger-line {
  background: var(--primary-color);
}

/* Mobile Navigation - Clean Implementation */
.mobile-navigation {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  z-index: 999999;
  transition: right 0.3s ease;
}

.mobile-navigation.is-open {
  right: 0;
}

.mobile-nav-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.mobile-nav-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 85vw;
  height: 100%;
  background: var(--background-primary);
  box-shadow: var(--shadow-medium);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  background: rgba(251, 133, 0, 0.05);
}

.mobile-nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.mobile-nav-logo img {
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.mobile-nav-logo a {
  display: inline-block;
  line-height: 0;
}

/* Mobile Custom Logo Styles */
.mobile-custom-logo {
  display: flex;
  align-items: center;
}

.mobile-custom-logo .logo-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(251, 133, 0, 0.1);
  transition: var(--transition-smooth);
}

.mobile-custom-logo .logo-icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-color);
  flex-shrink: 0;
}

.mobile-custom-logo .logo-icon-circle i {
  color: #ffffff;
  font-size: 14px;
  line-height: 1;
}

.mobile-custom-logo .logo-text {
  display: flex;
  align-items: center;
}

.mobile-custom-logo .site-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1.2;
}

.mobile-site-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
}

.mobile-site-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--secondary-color);
}

.mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--border-radius-small);
  transition: var(--transition-smooth);
}

.mobile-nav-close:hover {
  background: var(--background-secondary);
  color: var(--primary-color);
}

.mobile-nav-menu {
  flex: 1;
  padding: var(--spacing-md);
}

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

.mobile-nav-list li {
  margin-bottom: var(--spacing-xs);
}

.mobile-nav-list > li:last-child {
  margin-bottom: 0;
}

.mobile-nav-list a {
  display: block;
  padding: 12px 16px;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--border-radius-small);
  transition: var(--transition-smooth);
  font-weight: 500;
}

.mobile-nav-list a:hover,
.mobile-nav-list .current-menu-item > a {
  background: rgba(251, 133, 0, 0.1);
  color: var(--primary-color);
}

/* Mobile Submenu Styles - Clean Implementation */
.mobile-nav-list .sub-menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.02);
  border-radius: var(--border-radius-small);
  margin-top: var(--spacing-xs);
}

.mobile-nav-list .menu-item-has-children.submenu-open .sub-menu {
  display: block;
  padding: var(--spacing-xs) 0;
}

.mobile-nav-list .sub-menu li {
  margin-bottom: 0;
  position: relative;
}

.mobile-nav-list .sub-menu li:last-child {
  margin-bottom: 0;
}

.mobile-nav-list .sub-menu a {
  padding: 14px var(--spacing-md) 14px calc(var(--spacing-lg) + var(--spacing-xs));
  font-size: 0.9rem;
  color: var(--text-secondary);
  position: relative;
  margin: 0;
  border-radius: 0;
  transition: all var(--transition-smooth);
}

.mobile-nav-list .sub-menu a::before {
  content: '';
  position: absolute;
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--border-color);
  border-radius: 50%;
  transition: var(--transition-smooth);
}

.mobile-nav-list .sub-menu a:hover,
.mobile-nav-list .sub-menu .current-menu-item > a {
  background: rgba(251, 133, 0, 0.08);
  color: var(--primary-color);
  padding-left: calc(var(--spacing-lg) + var(--spacing-sm));
}

.mobile-nav-list .sub-menu a:hover::before,
.mobile-nav-list .sub-menu .current-menu-item > a::before {
  background: var(--primary-color);
  transform: translateY(-50%) scale(1.2);
}

/* Mobile submenu toggle button */
.mobile-nav-list .menu-item-has-children > a {
  position: relative;
  padding-right: 56px;
}

/* Ensure menu items without children don't have extra padding */
.mobile-nav-list li:not(.menu-item-has-children) > a {
  padding-right: var(--spacing-md);
}

.mobile-nav-list .submenu-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  transition: var(--transition-smooth);
  z-index: 10;
  outline: none;
}

.mobile-nav-list .submenu-toggle:focus {
  background: rgba(251, 133, 0, 0.1);
  color: var(--primary-color);
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.mobile-nav-list .submenu-toggle:hover,
.mobile-nav-list .submenu-toggle:focus {
  background: rgba(251, 133, 0, 0.15);
  color: var(--primary-color);
  transform: translateY(-50%) scale(1.05);
}

.mobile-nav-list .submenu-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-list .menu-item-has-children.submenu-open .submenu-toggle {
  background: rgba(251, 133, 0, 0.1);
  color: var(--primary-color);
}

.mobile-nav-list .menu-item-has-children.submenu-open .submenu-toggle svg {
  transform: rotate(180deg);
}

/* Nested mobile submenus */
.mobile-nav-list .sub-menu .sub-menu {
  background: rgba(0, 0, 0, 0.03);
  border-radius: var(--border-radius-small);
  margin: var(--spacing-xs) 0 0 var(--spacing-md);
}

.mobile-nav-list .sub-menu .sub-menu a {
  padding-left: calc(var(--spacing-xl) + var(--spacing-xs));
  font-size: 0.85rem;
  color: var(--text-light);
}

.mobile-nav-list .sub-menu .sub-menu a::before {
  left: var(--spacing-lg);
  width: 4px;
  height: 4px;
  background: var(--border-light);
}

.mobile-nav-list .sub-menu .sub-menu a:hover,
.mobile-nav-list .sub-menu .sub-menu .current-menu-item > a {
  padding-left: calc(var(--spacing-xl) + var(--spacing-sm));
  background: rgba(251, 133, 0, 0.06);
}

.mobile-nav-list .sub-menu .sub-menu a:hover::before,
.mobile-nav-list .sub-menu .sub-menu .current-menu-item > a::before {
  background: var(--primary-color);
  transform: translateY(-50%) scale(1.5);
}

/* Third level and beyond */
.mobile-nav-list .sub-menu .sub-menu .sub-menu {
  margin-left: var(--spacing-lg);
  background: rgba(0, 0, 0, 0.04);
}

.mobile-nav-list .sub-menu .sub-menu .sub-menu a {
  padding-left: calc(var(--spacing-xl) + var(--spacing-lg));
  font-size: 0.8rem;
}

.mobile-nav-list .sub-menu .sub-menu .sub-menu a::before {
  left: calc(var(--spacing-lg) + var(--spacing-md));
  width: 3px;
  height: 3px;
}

/* Mobile submenu animation states */
.mobile-nav-list .menu-item-has-children.submenu-opening .sub-menu {
  animation: submenuSlideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.mobile-nav-list .menu-item-has-children.submenu-closing .sub-menu {
  animation: submenuSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes submenuSlideDown {
  from {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    max-height: 600px;
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes submenuSlideUp {
  from {
    max-height: 600px;
    opacity: 1;
    transform: translateY(0);
  }
  to {
    max-height: 0;
    opacity: 0;
    transform: translateY(-5px);
  }
}

/* Improved mobile menu item styling */
.mobile-nav-list > li {
  border-radius: var(--border-radius-small);
  overflow: hidden;
  margin-bottom: var(--spacing-xs);
  transition: var(--transition-smooth);
}

.mobile-nav-list > li:hover {
  background: rgba(0, 0, 0, 0.02);
}

.mobile-nav-list > li > a {
  font-weight: 500;
  position: relative;
}

/* Active menu item indicator */
.mobile-nav-list .current-menu-item > a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: var(--primary-color);
  border-radius: 0 2px 2px 0;
}

/* Submenu loading state */
.mobile-nav-list .menu-item-has-children.submenu-loading .submenu-toggle {
  opacity: 0.6;
  pointer-events: none;
}

.mobile-nav-list .menu-item-has-children.submenu-loading .submenu-toggle svg {
  animation: spin 0.8s linear infinite;
}

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

.mobile-nav-search {
  padding: var(--spacing-md);
  border-top: 1px solid var(--border-color);
  background: var(--background-secondary);
}

.mobile-search-form {
  display: flex;
  align-items: center;
  background: var(--background-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: var(--transition-smooth);
  position: relative;
}

.mobile-search-form:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(251, 133, 0, 0.1);
}

.mobile-search-field {
  border: none !important;
  background: transparent;
  padding: 10px 12px;
  font-size: 0.875rem;
  color: var(--text-primary);
  width: 100%;
  outline: none;
  flex: 1;
  box-shadow: none !important;
}

.mobile-search-field:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.mobile-search-field::placeholder {
  color: var(--text-light);
}

.mobile-search-submit {
  border: none !important;
  background: transparent;
  padding: 10px 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}

.mobile-search-submit:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.mobile-search-submit:hover {
  color: var(--primary-color);
}

/* Desktop Navigation Display */
@media (min-width: 1024px) {
  .main-navigation {
    display: block;
  }

  .mobile-menu-toggle {
    display: none;
  }

  .search-field {
    width: 250px;
  }

  .mobile-navigation {
    display: none;
  }
}

/* Mobile Search Icon */
.mobile-search-icon {
  display: none;
}

.mobile-search-toggle {
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: 6px;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.mobile-search-toggle:hover {
  background: rgba(251, 133, 0, 0.1);
  color: var(--primary-color);
}

/* Search icon transformation to close icon */
.mobile-search-toggle .search-icon {
  transition: var(--transition-smooth);
}

.mobile-search-toggle .close-icon {
  display: none;
  transition: var(--transition-smooth);
}

.mobile-search-toggle.active .search-icon {
  display: none;
}

.mobile-search-toggle.active .close-icon {
  display: block;
}

.mobile-search-toggle.active {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

.mobile-search-toggle.active:hover {
  background: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}

/* Mobile Search Bar */
.mobile-search-bar {
  display: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(251, 133, 0, 0.2);
  border-bottom: 1px solid rgba(251, 133, 0, 0.1);
  padding: var(--spacing-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  animation: slideDown 0.3s ease;
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.mobile-search-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  opacity: 0.8;
}

.mobile-search-form {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  max-width: 100%;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.mobile-search-field {
  flex: 1;
  padding: var(--spacing-md);
  border: 2px solid rgba(251, 133, 0, 0.2);
  border-radius: 12px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-primary);
  transition: var(--transition-smooth);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  min-height: 48px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.mobile-search-field:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(251, 133, 0, 0.1), 0 4px 15px rgba(0, 0, 0, 0.1);
  outline: none;
  background: white;
}

.mobile-search-field::placeholder {
  color: var(--text-light);
  font-style: italic;
}

.mobile-search-submit {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
  border: none;
  color: white;
  padding: var(--spacing-sm);
  /* border-radius: 10px; */
  cursor: pointer;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  box-shadow: 0 4px 15px rgba(251, 133, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.mobile-search-submit::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.mobile-search-submit:hover::before {
  left: 100%;
}

.mobile-search-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(251, 133, 0, 0.4);
}

.mobile-search-submit:active {
  transform: translateY(0);
}

/* Desktop Search - Hide on mobile */
.desktop-search {
  display: block;
}

/* Mobile Search Animation */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 100px;
  }
}

/* Mobile Header Adjustments */
@media (max-width: 768px) {
  /* Comprehensive mobile overflow prevention */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }

  .header-content {
    min-height: 60px;
    gap: var(--spacing-sm);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    align-items: center;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  /* Mobile: Search icon on left */
  .mobile-search-icon {
    display: flex;
    justify-content: flex-start;
    min-width: 0;
    overflow: hidden;
  }

  /* Mobile: Logo in center */
  .site-branding {
    display: flex;
    justify-content: center;
    order: 0;
    min-width: 0;
    overflow: hidden;
  }

  /* Mobile: Hide desktop search */
  .desktop-search {
    display: none;
  }

  /* Mobile: Header actions on right */
  .header-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0;
    min-width: 0;
    overflow: hidden;
  }

  .search-field {
    width: 150px;
    font-size: 0.875rem;
  }

  .site-title {
    font-size: 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* Custom logo mobile adjustments */
  .logo-container {
    gap: 8px;
  }

  /* Responsive padding adjustments */
  .logo-padding-small {
    padding: 2px 6px;
  }

  .logo-padding-medium {
    padding: 4px 8px;
  }

  .logo-padding-large {
    padding: 6px var(--spacing-xs);
  }

  .logo-padding-xlarge {
    padding: 8px var(--spacing-sm);
  }

  /* Responsive circle size adjustments */
  .logo-circle-small {
    width: 20px;
    height: 20px;
  }

  .logo-circle-small i {
    font-size: 8px; /* ~40% of mobile circle width */
  }

  .logo-circle-medium {
    width: 28px;
    height: 28px;
  }

  .logo-circle-medium i {
    font-size: 12px; /* ~43% of mobile circle width */
  }

  .logo-circle-large {
    width: 36px;
    height: 36px;
  }

  .logo-circle-large i {
    font-size: 16px; /* ~44% of mobile circle width */
  }

  .logo-circle-xlarge {
    width: 44px;
    height: 44px;
  }

  .logo-circle-xlarge i {
    font-size: 20px; /* ~45% of mobile circle width */
  }

  /* Maintain perfect centering on mobile */
  .logo-circle-small i,
  .logo-circle-medium i,
  .logo-circle-large i,
  .logo-circle-xlarge i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
  }

  /* Responsive text size adjustments */
  .logo-text-small {
    font-size: 0.75rem;
  }

  .logo-text-medium {
    font-size: 1rem;
  }

  .logo-text-large {
    font-size: 1.125rem;
  }

  .logo-text-xlarge {
    font-size: 1.25rem;
  }

  .site-description {
    display: none;
  }

  .desktop-nav {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  /* Mobile Custom Logo Responsive Adjustments */
  .mobile-custom-logo .logo-container {
    gap: 6px;
    padding: 4px 8px;
  }

  .mobile-custom-logo .logo-icon-circle {
    width: 28px;
    height: 28px;
  }

  .mobile-custom-logo .logo-icon-circle i {
    font-size: 12px;
  }

  .mobile-custom-logo .site-name {
    font-size: 0.875rem;
  }

  /* Show mobile search bar when active */
  .mobile-search-bar.active {
    display: block;
  }

  /* Comprehensive mobile overflow prevention */
  .site-header,
  .header-container,
  .header-content,
  .site-branding,
  .header-actions,
  .mobile-search-icon,
  .mobile-search-bar,
  .mobile-search-form,
  .mobile-search-field {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}

/* Very Small Screens (≤320px) */
@media (max-width: 320px) {
  /* Extra small mobile custom logo adjustments */
  .mobile-custom-logo .logo-container {
    gap: 4px;
    padding: 3px 6px;
  }

  .mobile-custom-logo .logo-icon-circle {
    width: 24px;
    height: 24px;
  }

  .mobile-custom-logo .logo-icon-circle i {
    font-size: 10px;
  }

  .mobile-custom-logo .site-name {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .header-content {
    grid-template-columns: minmax(0, 50px) minmax(0, 1fr) minmax(0, 50px);
    gap: var(--spacing-xs);
    width: 100%;
    max-width: 100%;
  }

  .mobile-search-toggle {
    width: 36px;
    height: 36px;
  }

  .mobile-menu-toggle {
    width: 36px;
    height: 36px;
  }

  .site-title {
    font-size: 1.125rem;
  }

  .search-field {
    width: 120px;
  }

  .header-actions {
    gap: 0;
  }

  /* Mobile custom logo adjustments for small screens */
  .mobile-custom-logo .logo-container {
    gap: 5px;
    padding: 3px 7px;
  }

  .mobile-custom-logo .logo-icon-circle {
    width: 26px;
    height: 26px;
  }

  .mobile-custom-logo .logo-icon-circle i {
    font-size: 11px;
  }

  .mobile-custom-logo .site-name {
    font-size: 0.8rem;
  }

  .mobile-search-field {
    font-size: 0.875rem;
    padding: var(--spacing-sm);
    min-height: 44px;
  }

  .mobile-search-submit {
    width: 44px;
    height: 44px;
  }
}

/* Extra small devices - Header adjustments */
@media (max-width: 320px) {
  .header-content {
    min-height: 50px;
    gap: var(--spacing-xs);
    grid-template-columns: minmax(0, 40px) minmax(0, 1fr) minmax(0, 40px);
    width: 100%;
    max-width: 100%;
  }

  .site-title {
    font-size: 1rem;
  }

  .mobile-search-toggle,
  .mobile-menu-toggle {
    width: 32px;
    height: 32px;
  }

  .mobile-search-toggle svg,
  .mobile-menu-toggle svg {
    width: 16px;
    height: 16px;
  }

  .search-field {
    width: 100px;
    font-size: 0.875rem;
  }

  .header-actions {
    gap: 0;
  }

  .mobile-search-bar {
    padding: var(--spacing-sm);
  }

  .mobile-search-field {
    font-size: 0.875rem;
    padding: var(--spacing-sm);
    min-height: 40px;
  }

  .mobile-search-submit {
    width: 40px;
    height: 40px;
  }

  .mobile-menu-toggle span {
    height: 2px;
  }

  /* Extra small device logo circle adjustments */
  .logo-circle-small {
    width: 18px;
    height: 18px;
  }

  .logo-circle-small i {
    font-size: 7px; /* ~39% of extra small circle width */
  }

  .logo-circle-medium {
    width: 24px;
    height: 24px;
  }

  .logo-circle-medium i {
    font-size: 10px; /* ~42% of extra small circle width */
  }

  .logo-circle-large {
    width: 30px;
    height: 30px;
  }

  .logo-circle-large i {
    font-size: 13px; /* ~43% of extra small circle width */
  }

  .logo-circle-xlarge {
    width: 36px;
    height: 36px;
  }

  .logo-circle-xlarge i {
    font-size: 16px; /* ~44% of extra small circle width */
  }
}

/* Header Scroll Effects */
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-light);
}

/* Keyboard Navigation Support */
.keyboard-navigation *:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Focus Styles for Better Accessibility */
button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Remove outline for mouse users */
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* Hero Section */
.hero-section {
  padding: var(--spacing-xl) 0;
  background: linear-gradient(135deg, var(--background-primary) 0%, var(--background-secondary) 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(3, 200px);
  gap: var(--spacing-md);
  max-width: 1400px;
  margin: 0 auto;
}

/* Hero Article Base Styles */
.hero-article {
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: var(--transition-smooth);
}

.hero-article:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-medium);
}

.hero-article__link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.hero-article__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-article__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: var(--transition-smooth);
}

.hero-article:hover .hero-article__image img {
  transform: scale(1.05);
}

.hero-article__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
  transition: var(--transition-smooth);
}

.hero-article:hover .hero-article__overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

.hero-article__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-md);
  color: white;
  z-index: 2;
}

.hero-article__category {
  display: inline-block;
  padding: 4px 12px;
  background: var(--primary-color);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--border-radius-small);
  margin-bottom: var(--spacing-xs);
}

.hero-article__title {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: white;
}

.hero-article__excerpt {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

.hero-article__meta {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

/* Hero Article Layouts */
.hero-article--large {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
}

.hero-article--large .hero-article__title {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
}

.hero-article--large .hero-article__content {
  padding: var(--spacing-lg);
}

.hero-article--medium {
  grid-column: 2 / 4;
  height: 200px;
}

.hero-article--medium:nth-child(2) {
  grid-row: 1 / 2;
}

.hero-article--medium:nth-child(3) {
  grid-row: 2 / 3;
}

.hero-article--small {
  grid-column: 2 / 3;
  height: 200px;
}

.hero-article--small:nth-child(4) {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

.hero-article--small:nth-child(5) {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

/* Hero Section Responsive */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 300px 200px 200px;
    gap: var(--spacing-sm);
  }

  .hero-article--large {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }

  .hero-article--medium:nth-child(2) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .hero-article--medium:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  .hero-article--small:nth-child(4) {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }

  .hero-article--small:nth-child(5) {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }

  .hero-article--large .hero-article__title {
    font-size: 1.75rem;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: var(--spacing-lg) 0 var(--spacing-sm) 0;
    padding-top: 14px;
    
  }

  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(auto-fit, 250px);
    gap: 0;
  }

  .hero-grid {
    gap: var(--spacing-sm) 0;
  }

  .hero-article--large,
  .hero-article--medium,
  .hero-article--small {
    grid-column: 1 / 2;
    grid-row: auto;
    height: 250px;
  }

  .hero-article--large .hero-article__title {
    font-size: 1.5rem;
  }

  .hero-article--large .hero-article__content {
    padding: var(--spacing-md);
  }

  .hero-article__title {
    font-size: 1.125rem;
  }
}

@media (max-width: 480px) {
  .hero-grid {
    grid-template-rows: repeat(auto-fit, 200px);
  }

  .hero-article--large,
  .hero-article--medium,
  .hero-article--small {
    height: 200px;
  }

  .hero-article__content {
    padding: var(--spacing-sm);
  }

  .hero-article--large .hero-article__content {
    padding: var(--spacing-sm);
  }

  .hero-article--large .hero-article__title {
    font-size: 1.25rem;
  }

  .hero-article__title {
    font-size: 1rem;
  }

  .hero-article__excerpt {
    display: none;
  }
}

/* Extra small devices - Hero adjustments */
@media (max-width: 320px) {
  .hero-section {
    padding: var(--spacing-md) 0 var(--spacing-xs) 0;
  }

  .hero-grid {
    grid-template-rows: repeat(auto-fit, 180px);
    gap: var(--spacing-xs) 0;
  }

  .hero-article--large,
  .hero-article--medium,
  .hero-article--small {
    height: 180px;
  }

  .hero-article__content {
    padding: var(--spacing-xs);
  }

  .hero-article--large .hero-article__content {
    padding: var(--spacing-xs);
  }

  .hero-article--large .hero-article__title {
    font-size: 1.125rem;
  }

  .hero-article__title {
    font-size: 0.875rem;
    line-height: 1.2;
  }

  .hero-article__category {
    font-size: 0.625rem;
    padding: 2px 8px;
  }

  .hero-article__meta {
    font-size: 0.625rem;
  }
}

/* Content Section */
.content-section {
  /* padding: var(--spacing-xl) 0; */
}

.content-section .container {
  max-width: 1400px;
  margin: 0 auto;
  /* padding: 0 var(--spacing-sm); */
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--spacing-xl);
  align-items: start;
  padding-top: var(--spacing-xl);
}

.content-primary {
  min-width: 0;
}

/* Sidebar positioning */
.content-sidebar {
  position: relative;
}

/* Sidebar sticky positioning - only on desktop */
@media (min-width: 1025px) {
  .content-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--header-height, 70px) + var(--spacing-md));
    height: fit-content;
  }

  /* Fallback for browsers that don't support CSS custom properties */
  .content-sidebar {
    top: calc(70px + 24px);
  }
}

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

/* Ensure sticky positioning works by preventing parent overflow issues */
.content-section {
  overflow: visible;
}

.container {
  overflow: visible;
}

.content-grid {
  overflow: visible;
}

/* Debug sticky positioning (remove in production) */
@media (min-width: 1025px) {
  .content-sidebar.sticky-debug {
    background: rgba(251, 133, 0, 0.1);
    border: 2px solid var(--primary-color);
  }

  /* Ensure content has enough height for testing */
  .sticky-debug-mode .content-primary {
    min-height: 200vh;
  }

  .sticky-debug-mode .content-primary::after {
    content: "Debug mode: Content extended for sticky testing";
    display: block;
    padding: var(--spacing-lg);
    background: rgba(251, 133, 0, 0.1);
    border: 1px dashed var(--primary-color);
    margin-top: var(--spacing-xl);
    text-align: center;
    color: var(--primary-color);
  }
}

/* Page Header */
.page-header {
  margin-bottom: 16px;
  text-align: left;
  /* padding-bottom: var(--spacing-xs); */
  border-bottom: 1px solid var(--border-color);
}

.page-title {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-color);
}

.page-description {
  font-size: 1.125rem;
  color: var(--text-secondary);
  max-width: 600px;
  /* margin: 0 auto; */
}

/* Posts Grid */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 16px;
  margin-bottom: var(--spacing-xl);
}

/* Post Cards */
.post-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: var(--transition-smooth);
  background: rgba(248, 249, 250, 0.6);
  padding: var(--spacing-md);
  border: 1px solid rgba(233, 236, 239, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.post-card:hover {
  border-color: var(--primary-color);
}

.post-card__image {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-md);
}

.post-card__image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: var(--transition-smooth);
  border-radius: var(--border-radius);
}

.post-card:hover .post-card__image img {
  transform: scale(1.05);
}

.post-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.post-card__header {
  margin-bottom: var(--spacing-sm);
}

.post-card__categories {
  margin-bottom: var(--spacing-xs);
}

.post-card__category {
  display: inline-block;
  padding: 4px 12px;
  background: var(--primary-color);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--border-radius-small);
  text-decoration: none;
  margin-right: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
  transition: var(--transition-smooth);
}

.post-card__category:hover {
  background: var(--secondary-color);
  color: white;
}

.post-card__title {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.post-card__title a {
  color: var(--text-primary);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.post-card__title a:hover {
  color: var(--primary-color);
}

.post-card__excerpt {
  flex: 1;
  margin-bottom: var(--spacing-md);
  color: var(--text-secondary);
  line-height: 1.6;
}

.post-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-color);
}

.post-card__meta {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 0.875rem;
  color: var(--text-light);
  flex-wrap: wrap;
}

/* Add middle dots between meta items */
.post-card__meta > *:not(:last-child)::after {
  content: " • ";
  margin: 0 var(--spacing-xs);
  color: var(--text-light);
  font-weight: normal;
}

.post-card__meta a {
  color: var(--text-light);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.post-card__meta a:hover {
  color: var(--primary-color);
}

.post-card__read-more {
  display: block;
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-md);
  background: rgba(251, 133, 0, 0.1);
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.875rem;
  text-align: center;
  border-radius: var(--border-radius);
  transition: var(--transition-smooth);
}

.post-card__read-more:hover {
  background: rgba(251, 133, 0, 0.15);
  color: var(--primary-color);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  margin: var(--spacing-xl) 0;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  background: transparent;
  color: var(--text-primary);
  text-decoration: none;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-small);
  font-weight: 500;
  transition: var(--transition-smooth);
}

.page-numbers:hover,
.page-numbers.current {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.page-numbers.prev,
.page-numbers.next {
  padding: 0 16px;
}

/* Post Navigation */
.post-navigation {
  margin: var(--spacing-xl) 0;
}

.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.post-nav__item {
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(248, 249, 250, 0.5);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  transition: var(--transition-smooth);
}

.post-nav__item:hover {
  background: rgba(248, 249, 250, 0.8);
  border-color: var(--primary-color);
}

.post-nav__direction {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  font-size: 0.875rem;
  color: var(--text-light);
  font-weight: 500;
}

.post-nav__next .post-nav__direction {
  justify-content: flex-end;
}

.post-nav__label {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.post-nav__content {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.post-nav__next .post-nav__content {
  flex-direction: row-reverse;
  text-align: right;
}

.post-nav__image {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--border-radius);
  overflow: hidden;
  background: var(--background-secondary);
}

.post-nav__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-nav__text {
  flex: 1;
  min-width: 0;
}

.post-nav__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  color: var(--text-primary);
}

/* No Posts Message */
.no-posts {
  text-align: center;
  padding: var(--spacing-xl);
  background: var(--background-secondary);
  border-radius: var(--border-radius);
}

.no-posts h2 {
  color: var(--secondary-color);
  margin-bottom: var(--spacing-md);
}

/* Content Section Responsive */
@media (max-width: 1024px) {
  .content-grid {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-lg);
  }

  .content-sidebar {
    position: static;
    order: -1;
  }

  .content-primary {
    order: 1;
  }

  /* Left sidebar: maintain order on tablet */
  .sidebar-left .content-sidebar {
    order: -1 !important;
  }

  .sidebar-left .content-primary {
    order: 1 !important;
  }

  .posts-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
  }
}

@media (max-width: 768px) {
  .content-section {
    padding: 0 0 var(--spacing-lg) 0;
  }

  .content-grid {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-md);
  }

  .content-sidebar {
    position: static;
    order: 2;
  }

  .content-primary {
    order: 1;
  }

  /* Left sidebar: should also appear below content on mobile */
  .sidebar-left .content-sidebar {
    order: 2 !important;
  }

  .sidebar-left .content-primary {
    order: 1 !important;
  }

  .posts-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    padding: 0 var(--spacing-sm);
  }

  .page-title {
    font-size: 2rem;
  }

  .page-header {
    padding: 0 var(--spacing-sm);
  }

  .widget {
    margin-left: var(--spacing-sm);
    margin-right: var(--spacing-sm);
  }

  .post-nav {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .post-nav__next .post-nav__direction {
    justify-content: flex-start;
  }

  .post-nav__next .post-nav__content {
    flex-direction: row;
    text-align: left;
  }
}



@media (max-width: 480px) {
  .post-card__footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-xs);
  }

  .post-card__meta {
    flex-direction: row;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
  }

  .post-card__read-more {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.875rem;
  }

  .pagination {
    flex-wrap: wrap;
    gap: 4px;
  }

  .page-numbers {
    min-width: 40px;
    height: 40px;
    font-size: 0.875rem;
  }
}

/* Extra small devices - Content and layout adjustments */
@media (max-width: 320px) {
  .content-section {
    padding: 0 0 var(--spacing-md) 0;
  }

  .page-header {
    padding: 0 var(--spacing-xs);
  }

  .page-title {
    font-size: 1.5rem;
  }

  .posts-grid {
    padding: 0 var(--spacing-xs);
  }

  .post-card {
    padding: var(--spacing-sm);
  }

  .post-card__title {
    font-size: 1rem;
    line-height: 1.2;
  }

  .post-card__excerpt {
    font-size: 0.8rem;
    line-height: 1.3;
  }

  .post-card__meta {
    font-size: 0.7rem;
  }

  .post-card__read-more {
    font-size: 0.8rem;
    padding: var(--spacing-xs);
  }

  .widget {
    margin-left: var(--spacing-xs);
    margin-right: var(--spacing-xs);
    padding: var(--spacing-sm);
  }

  .widget-title {
    font-size: 1rem;
  }

  .page-numbers {
    min-width: 35px;
    height: 35px;
    font-size: 0.8rem;
  }
}

/* Landscape orientation on mobile devices */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-section {
    padding: var(--spacing-sm) 0;
  }

  .hero-grid {
    grid-template-rows: repeat(auto-fit, 180px);
  }

  .hero-article--large,
  .hero-article--medium,
  .hero-article--small {
    height: 180px;
  }

  .header-content {
    min-height: 50px;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero-article__image img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Scroll to Top Button */
.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all var(--transition-smooth);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background: var(--secondary-color);
  transform: translateY(-3px);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

.scroll-to-top:active {
  transform: translateY(-1px);
}

/* Scroll to top responsive */
@media (max-width: 768px) {
  .scroll-to-top {
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    font-size: 1.125rem;
  }
}

@media (max-width: 480px) {
  .scroll-to-top {
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}

/* Footer */
.site-footer {
  background: var(--secondary-color);
  color: white;
  margin-top: var(--spacing-xl);
}

.footer-widgets {
  padding: var(--spacing-xl) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-widgets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.footer-widgets .widget {
  margin-bottom: var(--spacing-lg);
}

.footer-widgets .widget-title {
  color: white;
  font-size: 1.25rem;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--primary-color);
  display: inline-block;
}

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

.footer-widgets .widget a:hover {
  color: var(--accent-color);
}

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

.footer-widgets .widget li {
  margin-bottom: var(--spacing-xs);
  padding-left: 0;
}

.footer-bottom {
  padding: var(--spacing-lg) 0;
  background: rgba(0, 0, 0, 0.2);
  margin: 0 auto;
}

.footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.footer-info {
  flex: 1;
}

.site-info {
  margin: 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}

.site-info a {
  color: white;
  text-decoration: none;
  font-weight: 600;
}

.site-info a:hover {
  color: var(--accent-color);
}

.footer-bottom .site-description {
  margin: var(--spacing-xs) 0 0 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.footer-menu a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.875rem;
  transition: var(--transition-smooth);
}

.footer-menu a:hover {
  color: var(--accent-color);
}

/* Footer Responsive */
@media (max-width: 768px) {
  .footer-widgets {
    padding: var(--spacing-lg) 0;
  }

  .footer-widgets-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    width: 100%;
    max-width: none;
    padding: 0 var(--spacing-sm);
  }

  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-sm);
    width: 100%;
    max-width: none;
    padding: 0 var(--spacing-sm);
  }

  .footer-menu {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .footer-widgets {
    padding: var(--spacing-md) 0;
  }

  .footer-widgets-grid {
    padding: 0 var(--spacing-xs);
    gap: var(--spacing-sm);
  }

  .footer-widgets .widget-title {
    font-size: 1.125rem;
  }

  .footer-bottom {
    padding: var(--spacing-md) 0;
  }

  .footer-bottom-content {
    padding: 0 var(--spacing-xs);
    gap: var(--spacing-xs);
  }

  .footer-menu {
    display: none;
  }

  .site-info {
    font-size: 0.8rem;
  }

  .footer-bottom .site-description {
    font-size: 0.7rem;
  }
}

/* Extra small devices - Footer */
@media (max-width: 320px) {
  .footer-widgets {
    padding: var(--spacing-sm) 0;
  }

  .footer-widgets-grid {
    padding: 0 var(--spacing-xs);
    gap: var(--spacing-xs);
  }

  .footer-widgets .widget {
    margin-bottom: var(--spacing-sm);
  }

  .footer-widgets .widget-title {
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
  }

  .footer-bottom {
    padding: var(--spacing-sm) 0;
  }

  .footer-bottom-content {
    padding: 0 var(--spacing-xs);
  }

  .site-info {
    font-size: 0.75rem;
    line-height: 1.4;
  }

  .footer-bottom .site-description {
    font-size: 0.65rem;
  }

  .footer-menu a {
    font-size: 0.8rem;
  }
}

/* Enhanced Glass-morphism Effects */
.glass-card {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--border-radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  padding: var(--spacing-xl);
}

.glass-overlay {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Enhanced Micro-interactions */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.02);
}

.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 30px rgba(251, 133, 0, 0.3);
}

/* Animated Borders */
.animated-border {
  position: relative;
  overflow: hidden;
}

.animated-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
  transition: left 0.5s ease;
}

.animated-border:hover::before {
  left: 100%;
}

/* Pulse Animation */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pulse {
  animation: pulse 2s infinite;
}

/* Fade In Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease forwards;
}

/* Stagger Animation for Lists */
.stagger-animation > * {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}

.stagger-animation > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-animation > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-animation > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-animation > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-animation > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-animation > *:nth-child(6) { animation-delay: 0.6s; }

/* Enhanced Button Interactions */
.btn-enhanced {
  position: relative;
  overflow: hidden;
  transform: perspective(1px) translateZ(0);
}

.btn-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-enhanced:hover::before {
  left: 100%;
}

.btn-enhanced:active {
  transform: scale(0.98);
}

/* Floating Elements */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.floating {
  animation: float 3s ease-in-out infinite;
}

/* Gradient Text Effect */
.gradient-text {
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Enhanced Card Hover Effects */
.card-3d {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.card-3d:hover {
  transform: rotateX(5deg) rotateY(5deg);
}

/* Shimmer Effect */
@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite;
}

/* Loading Spinner */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  border: 3px solid rgba(251, 133, 0, 0.1);
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
}

/* Button Spinner - Smaller size for buttons */
.btn .spinner {
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid currentColor;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 1s linear infinite;
  display: inline-block;
  margin-right: var(--spacing-xs);
  vertical-align: middle;
}

/* Single Post Header Section - Matching Homepage Hero */
.single-post-header-section {
  padding: var(--spacing-lg) 0;
  background: linear-gradient(135deg, var(--background-primary) 0%, var(--background-secondary) 100%);
  border-bottom: 1px solid var(--border-color);
}

.single-post-header-section .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.875rem;
  color: var(--text-light);
}

.breadcrumb-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.breadcrumb-nav a:hover {
  color: var(--primary-color);
}

.breadcrumb-separator {
  color: var(--text-light);
  font-weight: 300;
}

.breadcrumb-current {
  color: var(--text-primary);
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

/* Responsive breadcrumb truncation only when needed */
@media (max-width: 768px) {
  .breadcrumb-current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Single Post Styles - Clean & Minimal */
.single-post {
  background: white;
  /* border-radius: var(--border-radius); */
  /* padding: var(--spacing-xl); */
  /* border: 1px solid var(--border-color); */
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); */
  /* margin-bottom: var(--spacing-xl); */
}

.single-post__header {
  /* margin-bottom: var(--spacing-xl); */
  /* padding-bottom: var(--spacing-lg); */
}

.single-post__categories {
  margin-bottom: var(--spacing-md);
}

.single-post__category {
  display: inline-block;
  padding: 4px 12px;
  background: var(--primary-color);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--border-radius-small);
  text-decoration: none;
  margin-right: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
  transition: var(--transition-smooth);
}

.single-post__category:hover {
  background: var(--secondary-color);
  color: white;
}

.single-post__title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 var(--spacing-md) 0;
  color: var(--text-primary);
}

.single-post__meta {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 0.875rem;
  color: var(--text-light);
  flex-wrap: wrap;
  padding: var(--spacing-md) 0;
  margin: var(--spacing-md) 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  background: rgba(248, 249, 250, 0.5);
  border-radius: var(--border-radius);
  padding: var(--spacing-md) var(--spacing-lg);
}

/* Add middle dots between meta items on desktop */
.single-post__meta-item:not(:last-child)::after {
  content: " • ";
  margin: 0 var(--spacing-sm);
  color: var(--text-light);
  font-weight: normal;
}

.single-post__meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-weight: 500;
  transition: var(--transition-smooth);
}

.single-post__meta-item:hover {
  color: var(--primary-color);
}

.single-post__meta-icon {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  transition: var(--transition-smooth);
}

.single-post__meta-item:hover .single-post__meta-icon {
  opacity: 1;
  color: var(--primary-color);
}

/* Author Avatar Styles */
.author-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--background-secondary);
  border: 1px solid var(--border-color);
  transition: var(--transition-smooth);
}

.author-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.single-post__meta-item:hover .author-avatar {
  border-color: var(--primary-color);
  transform: scale(1.05);
}

.author-avatar .default-avatar {
  font-size: 0.75rem;
  background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
  border: none;
}

.single-post__date {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-secondary);
  font-weight: 500;
}

.single-post__author {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.single-post__author a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition-smooth);
  border-bottom: 1px solid transparent;
}

.single-post__author a:hover {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.single-post__comments {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.single-post__comments a {
  color: var(--text-light);
  text-decoration: none;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--border-radius-small);
  transition: var(--transition-smooth);
}

.single-post__comments a:hover {
  color: var(--primary-color);
  background: rgba(251, 133, 0, 0.1);
}

.single-post__reading-time {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-light);
  font-weight: 500;
  padding: 4px 8px;
  background: rgba(251, 133, 0, 0.1);
  border-radius: var(--border-radius-small);
  font-size: 0.8rem;
}

/* .meta-separator {
  width: 4px;
  height: 4px;
  background: var(--text-light);
  border-radius: 50%;
  opacity: 0.5;
} */

/* Enhanced responsive meta layout */
@media (max-width: 768px) {
  .content-grid {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-lg);
  }

  .content-sidebar {
    position: static;
    order: 2;
  }

  .content-primary {
    order: 1;
  }

  /* Left sidebar: should also appear below content on mobile */
  .sidebar-left .content-sidebar {
    order: 2 !important;
  }

  .sidebar-left .content-primary {
    order: 1 !important;
  }

  .single-post__meta {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
    flex-wrap: wrap;
  }

  .single-post__meta-item {
    flex: none;
    width: auto;
    justify-content: flex-start;
  }

  /* Hide comments on mobile/tablet, show read time */
  .single-post__comments {
    display: none;
  }

  /* Hide icons in date and author meta items on mobile */
  .single-post__meta-icon {
    display: none;
  }

  /* Hide author avatar on mobile */
  .author-avatar {
    display: none;
  }

  /* Hide "by" text before author on mobile */
  .author-by {
    display: none;
  }

  /* Add middle dots between all meta items on mobile */
  .single-post__meta-item:not(:last-child)::after {
    content: " • ";
    color: var(--text-light);
    font-weight: normal;
    margin: 0 var(--spacing-xs);
    display: inline;
  }

  .meta-separator {
    display: none;
  }

  .single-post__content {
    padding: 0;
    margin: var(--spacing-md) 0;
  }

  .single-post__header {
    padding-bottom: var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  .single-post__meta {
    font-size: 0.8rem;
    gap: var(--spacing-xs);
    justify-content: space-between;
  }

  .single-post__meta-item {
    flex: 1;
    justify-content: center;
    text-align: center;
  }

  .single-post__reading-time {
    font-size: 0.75rem;
  }
}

.single-post__featured-image {
  margin-bottom: var(--spacing-xl);
  border-radius: var(--border-radius);
  overflow: hidden;
  height: 400px;
  position: relative;
  box-shadow: var(--shadow-medium);
}

.single-post__featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  transition: transform 0.3s ease;
}

.single-post__featured-image:hover img {
  transform: scale(1.02);
}

/* Desktop featured image - larger height for more impact */
@media (min-width: 1024px) {
  .single-post__featured-image {
    height: 450px;
    margin-bottom: 20px;
  }
}

.single-post__content {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xl);
  /* padding-top: var(--spacing-lg); */
}

.single-post__content h2,
.single-post__content h3,
.single-post__content h4 {
  color: var(--text-primary);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
}

.single-post__content p {
  margin-bottom: var(--spacing-md);
}

.single-post__content blockquote {
  background: var(--background-secondary);
  border-left: 4px solid var(--primary-color);
  padding: var(--spacing-md) var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  font-style: italic;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.single-post__content img {
  border-radius: var(--border-radius);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin: var(--spacing-lg) 0;
}

.single-post__footer {
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-color);
  margin-top: var(--spacing-xl);
}

.single-post__tags {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.tags-label {
  font-weight: 600;
  color: var(--text-primary);
}

.single-post__tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--background-secondary);
  color: var(--text-secondary);
  font-size: 0.875rem;
  border-radius: var(--border-radius-small);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.single-post__tag:hover {
  background: var(--primary-color);
  color: white;
}

/* Article Sharing - Clean & Modern */
.article-sharing {
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-lg);
  background: rgba(2, 48, 71, 0.015);
  border: 1px solid rgba(2, 48, 71, 0.05);
  border-radius: var(--border-radius);
  text-align: center;
  position: relative;
}

.sharing-prompt {
  margin-bottom: var(--spacing-lg);
}

.sharing-prompt__text {
  font-size: 1.125rem;
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

/* Native Share Button */
.native-share-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.native-share-wrapper .share-btn {
  flex: 1;
  width: 100%;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: 10px 20px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: white;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-smooth);
  min-width: 44px;
  min-height: 44px;
}

.share-btn--native {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.share-btn--native:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(251, 133, 0, 0.2);
}

.share-btn svg {
  flex-shrink: 0;
}

/* Fallback Share Options */
.fallback-share-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.share-options {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  width: 100%;
}

.share-options .share-btn {
  flex: 1;
  justify-content: center;
}

.share-btn--facebook {
  background: #1877f2 !important;
  color: white !important;
  border-color: #1877f2 !important;
}

.share-btn--facebook:hover {
  background: #166fe5 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3) !important;
}

.share-btn--twitter {
  background: #1da1f2 !important;
  color: white !important;
  border-color: #1da1f2 !important;
}

.share-btn--twitter:hover {
  background: #1a91da !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(29, 161, 242, 0.3) !important;
}

.share-btn--linkedin {
  background: #0077b5 !important;
  color: white !important;
  border-color: #0077b5 !important;
}

.share-btn--linkedin:hover {
  background: #006ba1 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 119, 181, 0.3) !important;
}

.share-btn--reddit {
  background: #ff4500 !important;
  color: white !important;
  border-color: #ff4500 !important;
}

.share-btn--reddit:hover {
  background: #e63e00 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 69, 0, 0.3) !important;
}

/* Responsive Sharing */
@media (max-width: 768px) {
  .article-sharing {
    padding: var(--spacing-md);
    margin: var(--spacing-lg) 0;
  }

  .sharing-prompt__text {
    font-size: 1rem;
    font-weight: 600;
  }

  .share-options {
    gap: var(--spacing-xs);
  }

  .share-btn {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .share-btn span {
    display: none;
  }

  .share-btn--native span {
    display: inline;
  }
}

@media (max-width: 480px) {
  .share-options {
    justify-content: center;
    flex-wrap: wrap;
  }

  .share-btn {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
  }
}



.share-btn svg {
  width: 20px;
  height: 20px;
}

/* Desktop social sharing */
@media (min-width: 768px) {
  .social-sharing {
    padding: var(--spacing-xl) var(--spacing-xxl);
  }
}

/* Mobile social sharing */
@media (max-width: 767px) {
  .social-sharing {
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
  }

  .social-sharing__title {
    font-size: 1.1rem;
  }

  .share-btn {
    padding: 14px 24px;
    font-size: 0.875rem;
  }

  .share-btn svg {
    width: 18px;
    height: 18px;
  }
}



/* Construction Loan Calculator Styles */
.calculator-page-section {
  padding: var(--spacing-xl) 0;
  background: linear-gradient(135deg, var(--background-primary) 0%, var(--background-secondary) 100%);
}

.calculator-page {
  background: transparent;
}

.calculator-header {
  text-align: left;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.calculator-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-md);
  line-height: 1.2;
}

.calculator-description {
  font-size: 1.125rem;
  color: var(--text-secondary);
  max-width: 800px;
  margin: 0;
  line-height: 1.6;
}

.calculator-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.calculator-inputs-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.calculator-results {
  padding: var(--spacing-xl);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: var(--transition-smooth);
}

.calculator-results:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.room-card {
  padding: var(--spacing-xl);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: var(--transition-smooth);
}

.room-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.room-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.remove-room-btn {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.remove-room-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  transform: scale(1.1);
}

/* Results Design */
.results-hero {
  text-align: center;
  padding: var(--spacing-xl) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: var(--spacing-xl);
  position: relative;
}

.results-hero::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
  border-radius: 2px;
}

.total-display {
  margin-bottom: var(--spacing-lg);
}

.total-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-xs);
}

.total-value {
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1;
  margin-bottom: var(--spacing-xs);
}

.total-unit {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.conversions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  max-width: 300px;
  margin: 0 auto;
}

.conversion-item {
  text-align: center;
}

.conversion-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}

.conversion-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
}

.results-section {
  margin-bottom: var(--spacing-xl);
}

.section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--primary-color);
}

.section-title svg {
  color: var(--primary-color);
}

/* Room Result Cards */
.room-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.room-result-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: var(--spacing-lg);
  transition: var(--transition-smooth);
}

.room-result-card:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.room-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.room-result-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1.125rem;
}

.room-result-area {
  font-weight: 700;
  color: var(--primary-color);
  font-size: 1.125rem;
}

.room-result-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.room-result-shape {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.room-result-calc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-family: 'Courier New', monospace;
  background: rgba(0, 0, 0, 0.1);
  padding: var(--spacing-xs);
  border-radius: 4px;
}

/* Material Cards */
.material-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.material-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  transition: var(--transition-smooth);
}

.material-card:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.material-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}

.material-info {
  flex: 1;
}

.material-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.2;
}

.material-note {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.material-amount {
  font-weight: 700;
  color: var(--primary-color);
  font-size: 1.125rem;
  text-align: right;
  flex-shrink: 0;
}

/* Export Options */
.export-options {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.export-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.export-buttons .btn {
  width: 100%;
  justify-content: center;
  padding: var(--spacing-md) var(--spacing-lg);
  font-weight: 600;
}

/* Down Payment Toggle Styles */
.toggle-group {
  display: flex;
  gap: 4px;
  margin-bottom: var(--spacing-lg);
  padding: 4px;
  background: var(--background-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.toggle-option {
  flex: 1;
  display: block;
  cursor: pointer;
  transition: var(--transition-smooth);
  border-radius: 6px;
  overflow: hidden;
}

.toggle-option:hover .toggle-label:not(.active) {
  background: rgba(251, 133, 0, 0.1);
  color: var(--primary-color);
}

.toggle-option input[type="radio"] {
  display: none;
}

.toggle-option input[type="radio"]:checked + .toggle-label {
  background: var(--primary-color);
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-label {
  display: block;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.3s ease;
  text-align: center;
  background: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
}

.input-section {
  margin-bottom: var(--spacing-sm);
}

.input-sublabel {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

/* Material Cost Calculator Styles */
.material-categories {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.material-category {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--background-secondary);
  overflow: hidden;
}

.category-header {
  padding: var(--spacing-md);
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--border-color);
}

.category-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  font-weight: 600;
  color: var(--text-primary);
}

.category-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-color);
}

.category-name {
  font-size: 1rem;
  font-weight: 600;
}

.category-options {
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Material Results */
.results-hero {
  text-align: center;
  padding: var(--spacing-xl) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: var(--spacing-xl);
}

.total-display {
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: linear-gradient(135deg, rgba(251, 133, 0, 0.1) 0%, rgba(251, 133, 0, 0.05) 100%);
  border: 2px solid rgba(251, 133, 0, 0.2);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.total-display::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
}

.total-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-xs);
}

.total-value {
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1;
  margin-bottom: var(--spacing-xs);
  text-shadow: 0 2px 4px rgba(251, 133, 0, 0.1);
}

.total-unit {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}

.total-unit::before {
  content: '📏';
  font-size: 1rem;
  opacity: 0.7;
}

.cost-breakdown {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  max-width: 500px;
  margin: 0 auto;
}

.breakdown-item {
  text-align: center;
}

.breakdown-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}

.breakdown-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
}

/* Enhanced Cost Breakdown Cards */
.cost-breakdown-enhanced {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-md);
  max-width: 600px;
  margin: 0 auto;
}

.breakdown-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(251, 133, 0, 0.2);
  border-radius: 12px;
  transition: var(--transition-smooth);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.breakdown-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  border-color: var(--primary-color);
}

.breakdown-icon {
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0.8;
}

.breakdown-content {
  flex: 1;
  text-align: left;
}

.breakdown-card .breakdown-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.2;
  margin-bottom: 2px;
}

.breakdown-card .breakdown-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

/* Special styling for different breakdown card types */
.breakdown-card.materials {
  border-left: 4px solid #4CAF50;
}

.breakdown-card.installation {
  border-left: 4px solid #2196F3;
}

.breakdown-card.zones {
  border-left: 4px solid #FF9800;
}

/* Animation for breakdown cards */
.breakdown-card {
  animation: slideInUp 0.6s ease-out;
}

.breakdown-card:nth-child(1) { animation-delay: 0.1s; }
.breakdown-card:nth-child(2) { animation-delay: 0.2s; }
.breakdown-card:nth-child(3) { animation-delay: 0.3s; }

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Material Result Cards - Improved Layout */
.material-results {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.material-result-card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: var(--spacing-md);
  transition: var(--transition-smooth);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.material-result-card:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.material-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.material-result-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.4;
}

.material-result-cost {
  font-weight: 700;
  color: var(--primary-color);
  font-size: 1.125rem;
  line-height: 1;
}

.material-result-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-sm);
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) 0;
}

.detail-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.detail-value {
  font-size: 0.875rem;
  color: var(--text-primary);
  font-weight: 600;
}

/* Cost Summary */
.cost-summary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: var(--spacing-lg);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-row:last-child {
  border-bottom: none;
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-md);
  border-top: 2px solid var(--primary-color);
}

.summary-row.total-row {
  font-size: 1.125rem;
  font-weight: 700;
}

.summary-label {
  font-weight: 500;
  color: var(--text-secondary);
}

.summary-row:last-child .summary-label {
  color: var(--text-primary);
  font-weight: 700;
}

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

.summary-value.positive {
  color: var(--primary-color);
}

.summary-value.negative {
  color: #ef4444;
}

.summary-row:last-child .summary-value {
  color: var(--primary-color);
  font-weight: 700;
}

.panel-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--primary-color);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.panel-icon {
  font-size: 1.25rem;
  opacity: 0.8;
}

/* PDF Generation Spinner */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  margin-right: 8px;
}

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

/* PDF Viewer Modal */
.pdf-viewer-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.pdf-viewer-modal.active {
  opacity: 1;
  visibility: visible;
}

.pdf-viewer-content {
  width: 90%;
  height: 90%;
  max-width: 1200px;
  max-height: 800px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.pdf-viewer-modal.active .pdf-viewer-content {
  transform: scale(1);
}

.pdf-viewer-header {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
  color: white;
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.pdf-viewer-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.pdf-viewer-actions {
  display: flex;
  gap: var(--spacing-sm);
}

.pdf-action-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pdf-action-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.pdf-action-btn:active {
  transform: translateY(0);
}

.save-pdf-btn:hover {
  background: rgba(76, 175, 80, 0.3);
  border-color: rgba(76, 175, 80, 0.5);
}

.close-pdf-btn:hover {
  background: rgba(244, 67, 54, 0.3);
  border-color: rgba(244, 67, 54, 0.5);
}

.pdf-viewer-frame {
  flex: 1;
  background: #f5f5f5;
  position: relative;
}

.pdf-viewer-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.pdf-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--text-secondary);
  z-index: 10;
}

.pdf-loading p {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}





/* Redesigned Landscaping Results Styles */
.results-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: linear-gradient(135deg, rgba(251, 133, 0, 0.1) 0%, rgba(251, 133, 0, 0.05) 100%);
  border-radius: 16px;
  border: 1px solid rgba(251, 133, 0, 0.2);
}

.results-title h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}

.results-subtitle {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.results-main-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.results-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  width: 100%;
}

/* Cost Summary Card */
.cost-summary-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: var(--spacing-lg);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  width: 100%;
}

.card-header {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid rgba(251, 133, 0, 0.1);
}

.card-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.total-cost-highlight {
  text-align: center;
  padding: var(--spacing-lg);
  background: linear-gradient(135deg, rgba(251, 133, 0, 0.1) 0%, rgba(251, 133, 0, 0.05) 100%);
  border-radius: 12px;
  margin-bottom: var(--spacing-lg);
}

.total-amount {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1;
  margin-bottom: var(--spacing-xs);
}

.total-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-xs);
}

.cost-per-unit {
  font-size: 1rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.cost-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.breakdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background: rgba(251, 133, 0, 0.05);
  border: 1px solid rgba(251, 133, 0, 0.1);
  border-radius: 8px;
  transition: var(--transition-smooth);
}

.breakdown-item:hover {
  background: rgba(251, 133, 0, 0.1);
  border-color: rgba(251, 133, 0, 0.2);
}

.breakdown-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1;
}

.breakdown-icon {
  font-size: 1.25rem;
  opacity: 0.8;
}

.breakdown-name {
  font-weight: 600;
  color: var(--text-primary);
}

.breakdown-amount {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-right: var(--spacing-sm);
}

.breakdown-percentage {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 600;
  background: rgba(251, 133, 0, 0.1);
  padding: 2px 8px;
  border-radius: 12px;
}

/* Project Details Card */
.project-details-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: var(--spacing-lg);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  width: 100%;
}

.project-specs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.spec-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(251, 133, 0, 0.05);
  border-radius: 8px;
}

.spec-label {
  font-weight: 600;
  color: var(--text-secondary);
}

.spec-value {
  font-weight: 700;
  color: var(--text-primary);
}

/* Materials List Card */
.materials-list-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: var(--spacing-lg);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  width: 100%;
}

.materials-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.material-item {
  padding: var(--spacing-lg);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  transition: var(--transition-smooth);
}

.material-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}

.material-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

.material-info {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  flex: 1;
}

.material-icon {
  font-size: 2rem;
  opacity: 0.8;
  margin-top: 4px;
}

.material-details {
  flex: 1;
}

.material-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs) 0;
}

.material-description {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.material-cost {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  text-align: right;
}

.material-quantities {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.quantity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(251, 133, 0, 0.05);
  border-radius: 8px;
}

.quantity-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex: 1;
}

.quantity-label {
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.quantity-value {
  font-weight: 700;
  color: var(--text-primary);
  margin-right: var(--spacing-md);
}

.quantity-badge {
  background: var(--primary-color);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quantity-note {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.coverage-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(33, 150, 243, 0.05);
  border: 1px solid rgba(33, 150, 243, 0.1);
  border-radius: 8px;
  margin-top: var(--spacing-sm);
}

.coverage-icon {
  font-size: 1rem;
  opacity: 0.7;
}

.coverage-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Plants-specific styling */
.plants-item .material-quantities {
  gap: 0;
}

.plants-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.plant-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(76, 175, 80, 0.05);
  border: 1px solid rgba(76, 175, 80, 0.1);
  border-radius: 8px;
  transition: var(--transition-smooth);
}

.plant-row:hover {
  background: rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.2);
}

.plant-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.plant-icon {
  font-size: 1.25rem;
  opacity: 0.8;
}

.plant-name {
  font-weight: 600;
  color: var(--text-primary);
}

.plant-quantity {
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}

.plant-cost {
  font-weight: 700;
  color: var(--primary-color);
  text-align: right;
}

.plant-unit {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-align: right;
}

.spacing-note {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(33, 150, 243, 0.05);
  border: 1px solid rgba(33, 150, 243, 0.1);
  border-radius: 8px;
  margin-top: var(--spacing-md);
}

.spacing-icon {
  font-size: 1rem;
  opacity: 0.7;
}

.spacing-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
}



.project-summary-card {
  background: linear-gradient(135deg, rgba(251, 133, 0, 0.1) 0%, rgba(251, 133, 0, 0.05) 100%);
  border: 2px solid rgba(251, 133, 0, 0.2);
  border-radius: 20px;
  padding: var(--spacing-xl);
  position: relative;
  overflow: hidden;
}

.project-summary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
}

.project-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.project-icon {
  font-size: 3rem;
  opacity: 0.8;
}

.project-info {
  flex: 1;
}

.project-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}

.project-details {
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.detail-item {
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.cost-summary-section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--spacing-xl);
  align-items: center;
}

.total-cost-display {
  text-align: center;
  padding: var(--spacing-lg);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  border: 1px solid rgba(251, 133, 0, 0.2);
}

.cost-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-xs);
}

.cost-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1;
  margin-bottom: var(--spacing-xs);
  text-shadow: 0 2px 4px rgba(251, 133, 0, 0.1);
}

.cost-per-sqft {
  font-size: 1rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.cost-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-md);
}

.cost-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  transition: var(--transition-smooth);
}

.cost-item:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
}

.cost-icon {
  font-size: 1.5rem;
  opacity: 0.8;
}

.cost-details {
  flex: 1;
}

.cost-amount {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.cost-percentage {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}



/* Enhanced Material Cards */
.material-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: var(--spacing-xl);
  transition: var(--transition-smooth);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.material-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  border-color: var(--primary-color);
}

.material-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.material-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  background: rgba(251, 133, 0, 0.1);
  border: 1px solid rgba(251, 133, 0, 0.2);
  border-radius: 20px;
}

.badge-icon {
  font-size: 1.25rem;
}

.badge-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.material-priority {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
  border: 1px solid rgba(76, 175, 80, 0.2);
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.material-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.material-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.material-description {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.quantity-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.quantity-option {
  padding: var(--spacing-md);
  border-radius: 12px;
  border: 2px solid transparent;
  transition: var(--transition-smooth);
}

.quantity-option.primary {
  background: rgba(251, 133, 0, 0.05);
  border-color: rgba(251, 133, 0, 0.2);
}

.quantity-option.secondary {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
}

.quantity-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.option-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.option-icon {
  font-size: 1.25rem;
  opacity: 0.8;
}

.option-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.option-badge {
  padding: 2px 8px;
  background: var(--primary-color);
  color: white;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.option-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.quantity-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.quantity-cost {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-color);
}

.quantity-coverage,
.quantity-note {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.material-tips {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: rgba(33, 150, 243, 0.05);
  border: 1px solid rgba(33, 150, 243, 0.1);
  border-radius: 12px;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.tip-icon {
  font-size: 1rem;
  opacity: 0.7;
}

.tip-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Plants Card Specific Styles */
.plants-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: rgba(76, 175, 80, 0.05);
  border: 1px solid rgba(76, 175, 80, 0.1);
  border-radius: 12px;
}

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

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-top: var(--spacing-xs);
}

.plant-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-md);
}

.plant-type-item {
  padding: var(--spacing-md);
  background: rgba(76, 175, 80, 0.05);
  border: 1px solid rgba(76, 175, 80, 0.1);
  border-radius: 12px;
  transition: var(--transition-smooth);
}

.plant-type-item:hover {
  background: rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.2);
  transform: translateY(-1px);
}

.plant-type-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.plant-type-icon {
  font-size: 1.5rem;
  opacity: 0.8;
}

.plant-type-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.plant-type-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.plant-quantity {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.plant-cost {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-color);
}

.plant-unit-cost {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.planting-timeline {
  padding: var(--spacing-md);
  background: rgba(33, 150, 243, 0.05);
  border: 1px solid rgba(33, 150, 243, 0.1);
  border-radius: 12px;
}

.timeline-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.timeline-icon {
  font-size: 1.25rem;
  opacity: 0.8;
}

.timeline-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.timeline-items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.timeline-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
}

.season {
  font-weight: 600;
  color: var(--text-primary);
}

.plants {
  font-size: 0.875rem;
  color: var(--text-secondary);
}



/* Enhanced Download Section */
.download-actions-section {
  background: linear-gradient(135deg, rgba(251, 133, 0, 0.1) 0%, rgba(251, 133, 0, 0.05) 100%);
  border: 2px solid rgba(251, 133, 0, 0.2);
  border-radius: 20px;
  padding: var(--spacing-xl);
  text-align: center;
  margin-bottom: var(--spacing-xl);
  width: 100%;
}

.download-header {
  margin-bottom: var(--spacing-lg);
}

.download-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}

.download-description {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.download-buttons {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  max-width: 400px;
  margin: 0 auto;
}

.download-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-radius: 16px;
  border: 2px solid transparent;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.download-btn.primary {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
  color: white;
  border-color: var(--primary-color);
}

.download-btn.secondary {
  background: rgba(255, 255, 255, 0.8);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.3);
}

.download-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.download-btn.primary:hover {
  box-shadow: 0 8px 25px rgba(251, 133, 0, 0.4);
}

.download-btn .btn-icon {
  font-size: 1.5rem;
}

.btn-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.btn-title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
}

.btn-subtitle {
  font-size: 0.875rem;
  opacity: 0.8;
  font-weight: 500;
}



/* Material type specific styling */
.mulch-card {
  border-left: 4px solid #8BC34A;
}

.soil-card {
  border-left: 4px solid #795548;
}

.plants-card {
  border-left: 4px solid #4CAF50;
}



/* Results separator */
.results-separator {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(251, 133, 0, 0.3) 50%, transparent 100%);
  margin: var(--spacing-xl) 0;
  position: relative;
}

.results-separator::after {
  content: '✦';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--background-primary);
  color: var(--primary-color);
  padding: 0 var(--spacing-sm);
  font-size: 0.875rem;
  opacity: 0.6;
}

/* Form Styles */
.calculator-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.input-group.inline {
  flex: 1;
}

.input-label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.875rem;
  margin-bottom: var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
}

.draw-inputs .input-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-sm);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.input-field {
  width: 100%;
  padding: var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  transition: border-color 0.3s ease;
}

.input-field:focus {
  border-color: var(--primary-color);
}

/* Question Container */
.quiz-question-container {
  width: 100vw;
  max-width: 1400px;
  margin: var(--spacing-xl) auto;
  padding: 0 var(--spacing-sm);
  background: var(--background-primary);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Fix quiz container overflow on mobile */
@media (max-width: 768px) {
  .quiz-question-container {
    width: 100%;
    left: auto;
    right: auto;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }
}

.input-field:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.input-field:focus {
  outline: none;
  border-color: var(--primary-color);
}

.input-field.small {
  padding: 12px 14px;
  font-size: 0.875rem;
  border-radius: 8px;
  height: 48px;
  box-sizing: border-box;
}

.select-field {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 18px;
  padding-right: 45px;
  appearance: none;
  font-weight: 500;
  letter-spacing: 0.025em;
  position: relative;
}

.select-field:hover {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23fb8500' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

.select-field:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23fb8500' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}



/* Cross-browser dropdown option styling - limited but consistent */
.select-field option {
  padding: 12px 16px;
  font-weight: 500;
  background: white;
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.4;
}

.select-field option:checked,
.select-field option:hover {
  background: var(--primary-color) !important;
  color: white !important;
  font-weight: 600;
}

.select-field option[disabled] {
  background: #f5f5f5 !important;
  color: #9ca3af !important;
  font-weight: 400;
}

/* Enhanced select field container for better visual feedback */
.select-field {
  position: relative;
}

.select-field::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  transition: opacity 0.3s ease;
  opacity: 0;
}

.select-field:hover::after {
  opacity: 1;
}



.input-note {
  font-size: 0.75rem;
  color: var(--text-light);
  font-style: italic;
  margin-top: var(--spacing-xs);
}

.error-message {
  color: #dc2626;
  font-size: 0.875rem;
  font-weight: 500;
  min-height: 1.25rem;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.error-message:empty {
  display: none;
}

/* Segmented Control */
.segmented-control {
  display: flex;
  background: var(--background-secondary);
  border-radius: 8px;
  padding: 4px;
  border: 1px solid var(--border-color);
}

.segment-option {
  flex: 1;
  padding: 8px 16px;
  text-align: center;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition-smooth);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: transparent;
  border: none;
}

.segment-option.active {
  background: var(--primary-color);
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.segment-option:hover:not(.active) {
  background: rgba(251, 133, 0, 0.1);
  color: var(--primary-color);
}

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

/* Custom Draw Section */
.custom-draw-section {
  /* margin-top: var(--spacing-md); */
  /* padding: var(--spacing-md); */
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  border-radius: 12px;
}

.subsection-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

.add-draw-form {
  margin-bottom: var(--spacing-lg);
}

.draw-inputs {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-end;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

.draw-inputs .input-group {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.draw-inputs .input-label {
  height: 20px;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.draw-inputs .btn {
  height: 48px;
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  flex-shrink: 0;
  align-self: flex-end;
}

/* Remove double border effect on ALL calculator form elements */
.calculator-form .input-field:focus,
.calculator-form .select-field:focus,
.calculator-form select:focus,
.calculator-form input:focus {
  outline: none !important;
}

.calculator-form .input-field:focus-visible,
.calculator-form .select-field:focus-visible,
.calculator-form select:focus-visible,
.calculator-form input:focus-visible {
  outline: none !important;
}

/* Specific override for calculator page select elements */
.calculator-page select:focus,
.calculator-page select:focus-visible {
  outline: none !important;
}

/* Enhanced styling for all calculator select fields */
.calculator-form select,
.calculator-page select {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.88) 100%);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(251, 133, 0, 0.2);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(251, 133, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
  appearance: none;
  cursor: pointer;
  font-weight: 500;
  color: var(--text-primary);
}

.calculator-form select:hover,
.calculator-page select:hover {
  border-color: rgba(251, 133, 0, 0.4);
  box-shadow: 0 6px 20px rgba(251, 133, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.calculator-form select:focus,
.calculator-page select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 6px 20px rgba(251, 133, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Modern dropdown arrows for all calculator selects */
.calculator-form select,
.calculator-page select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e");
  background-size: 18px;
  background-position: right 12px center;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.calculator-form select:hover,
.calculator-page select:hover {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='%23fb8500' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e");
}

.custom-draws-table-container {
  margin-top: var(--spacing-lg);
  position: relative;
  z-index: 1;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.table-header h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.btn-link {
  background: none;
  border: none;
  color: var(--primary-color);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  transition: var(--transition-smooth);
}

.btn-link:hover {
  color: var(--secondary-color);
}

.draws-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.draws-table th,
.draws-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid rgba(251, 133, 0, 0.1);
}

.draws-table th {
  background: rgba(251, 133, 0, 0.1);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.draws-table td {
  color: var(--text-secondary);
}

.draws-table tbody tr {
  transition: background-color 0.3s ease;
}

.draws-table tbody tr:hover {
  background: rgba(251, 133, 0, 0.05);
}

.remove-draw-btn {
  background: none;
  border: 2px solid #dc2626;
  color: #dc2626;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.remove-draw-btn:hover {
  background: #dc2626;
  color: white;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.empty-state {
  text-align: center;
  color: var(--text-secondary);
  font-style: italic;
  padding: var(--spacing-lg) !important;
}

.draw-summary {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: rgba(251, 133, 0, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(251, 133, 0, 0.2);
}

.summary-text {
  font-weight: 600;
  color: var(--text-primary);
}

.draw-validation {
  margin-top: var(--spacing-xs);
  font-size: 0.875rem;
  font-weight: 500;
}

.draw-validation.warning {
  color: #dc2626;
}

.draw-validation.note {
  color: #d97706;
}



/* Accessibility and UX Enhancements */
.section-description {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: 1.5;
}

.required {
  color: #dc2626;
  font-weight: 700;
  margin-left: 2px;
}

.input-note {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
  line-height: 1.4;
}

fieldset.draw-inputs {
  border: none;
  padding: 0;
  margin: 0;
}

fieldset.draw-inputs legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus Management */
.input-field:focus-visible,
.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-link:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .custom-draw-section {
    border: 2px solid var(--text-primary);
    background: var(--background-primary);
  }

  .input-field {
    border-width: 3px;
    background: var(--background-primary);
  }

  .btn {
    border: 2px solid currentColor;
  }
}

.calculate-button {
  margin-top: var(--spacing-lg);
  padding: 16px 32px;
  font-size: 1.125rem;
  font-weight: 600;
  width: 100%;
  border-radius: 8px;
}

/* Results Section */
.results-content {
  min-height: 400px;
}

.results-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  text-align: center;
  color: var(--text-light);
  font-style: italic;
}

/* Loan Summary */
.loan-summary {
  background: linear-gradient(135deg, rgba(251, 133, 0, 0.05) 0%, rgba(251, 133, 0, 0.02) 100%);
  border: 1px solid rgba(251, 133, 0, 0.15);
  border-radius: 12px;
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.summary-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-sm);
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  border: 1px solid rgba(251, 133, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.summary-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.summary-value {
  font-size: 0.875rem;
  color: var(--primary-color);
  font-weight: 600;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}

.kpi-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.kpi-card {
  background: white;
  padding: var(--spacing-lg);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  text-align: center;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.kpi-label {
  font-size: 0.875rem;
  color: var(--text-light);
  font-weight: 500;
  margin-bottom: auto;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
}

.kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-top: auto;
}

/* Chart Section */
.chart-section {
  margin-bottom: var(--spacing-xl);
}

.chart-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

.chart-container {
  background: white;
  padding: var(--spacing-lg);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  overflow: visible;
}

.interest-chart {
  width: 100%;
  height: 350px;
  max-width: 100%;
}

.chart-bar {
  fill: var(--primary-color);
  transition: var(--transition-smooth);
}

.chart-bar:hover {
  fill: var(--secondary-color);
}

.chart-axis {
  stroke: var(--border-color);
  stroke-width: 1;
}

.chart-label {
  font-size: 12px;
  fill: var(--text-secondary);
  font-family: inherit;
}

.chart-value {
  font-size: 11px;
  fill: var(--text-primary);
  font-family: inherit;
  font-weight: 600;
}

.chart-axis-label {
  font-size: 12px;
  fill: var(--text-secondary);
  font-family: inherit;
  font-weight: 500;
}

.chart-axis-title {
  font-size: 14px;
  fill: var(--text-primary);
  font-family: inherit;
  font-weight: 600;
}

.chart-grid-line {
  stroke: var(--border-color);
  stroke-width: 0.5;
  stroke-dasharray: 2,2;
  opacity: 0.6;
}

/* Results Table */
.results-table-section {
  margin-bottom: var(--spacing-xl);
}

.results-table-container {
  background: white;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

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

.results-table th,
.results-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.results-table th {
  background: var(--background-secondary);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.875rem;
  position: sticky;
  top: 0;
  z-index: 1;
}

.results-table td {
  color: var(--text-secondary);
}

.results-table tbody tr:hover {
  background: rgba(251, 133, 0, 0.05);
}

.results-table .currency {
  text-align: right;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  padding-left: 24px;
}

/* Download Section */
.download-section {
  text-align: center;
  padding: var(--spacing-lg);
  background: rgba(251, 133, 0, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(251, 133, 0, 0.2);
}

.download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: 16px 24px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-smooth);
  cursor: pointer;
  width: 100%;
}

.download-btn:hover {
  background: var(--secondary-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(251, 133, 0, 0.3);
}

.download-btn svg {
  width: 16px;
  height: 16px;
}

.download-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.download-btn:disabled:hover {
  background: var(--primary-color);
  transform: none;
  box-shadow: none;
}

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

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Construction Cost Calculator Specific Styles */
.cost-summary {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.98) 100%);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(251, 133, 0, 0.2);
  border-radius: 16px;
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  box-shadow: 0 8px 32px rgba(251, 133, 0, 0.1),
              0 4px 16px rgba(0, 0, 0, 0.05),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
}

.cost-summary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
}

.cost-summary .summary-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
  text-align: center;
  position: relative;
  padding-bottom: var(--spacing-sm);
}

.cost-summary .summary-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
  border-radius: 2px;
}

.cost-summary .summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-lg);
}

.cost-summary .summary-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-lg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
  border-radius: 12px;
  border: 1px solid rgba(251, 133, 0, 0.15);
  box-shadow: 0 4px 16px rgba(251, 133, 0, 0.08),
              0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.cost-summary .summary-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.cost-summary .summary-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(251, 133, 0, 0.12),
              0 4px 12px rgba(0, 0, 0, 0.06);
  border-color: rgba(251, 133, 0, 0.25);
}

.cost-summary .summary-item:hover::before {
  transform: scaleX(1);
}

.cost-summary .summary-label {
  font-size: 0.875rem;
  color: var(--text-light);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-xs);
}

.cost-summary .summary-value {
  font-size: 1.125rem;
  color: var(--primary-color);
  font-weight: 700;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  line-height: 1.2;
}

/* Cost comparison styling */
.cost-higher {
  color: #dc2626 !important;
}

.cost-lower {
  color: #16a34a !important;
}

/* Cost chart specific styles */
.cost-chart {
  width: 100%;
  height: 350px;
  max-width: 100%;
  overflow: visible;
}

/* Payment chart specific styles */
.payment-chart {
  width: 100%;
  height: 350px;
  max-width: 100%;
  overflow: visible;
}

/* Interest chart specific styles */
.interest-chart {
  width: 100%;
  height: 350px;
  max-width: 100%;
  overflow: visible;
}

.payment-chart .chart-category-above {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  pointer-events: none;
}

.payment-chart .chart-value-above {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  pointer-events: none;
}

/* Calculator Disclaimer */
.calculator-disclaimer {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: rgba(248, 249, 250, 0.8);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  text-align: center;
}

.calculator-disclaimer p {
  margin: 0;
  color: var(--text-light);
  line-height: 1.5;
}

/* Square Footage Calculator Specific Styles */
.shape-inputs {
  margin-top: var(--spacing-md);
}

.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

/* Additional Rooms Container */
#additional-rooms-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.additional-room {
  padding: var(--spacing-xl);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: var(--transition-smooth);
  position: relative;
}

.additional-room:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Calculator Actions */
.calculator-actions {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.calculator-actions .btn {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 40px;
}

.room-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid rgba(251, 133, 0, 0.2);
}

.room-header h4,
.room-header h5 {
  margin: 0;
  color: var(--primary-color);
  font-weight: 600;
}

.remove-room-btn {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  transition: var(--transition-smooth);
}

.remove-room-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  transform: scale(1.1);
}

.room-inputs h5 {
  margin: var(--spacing-md) 0 var(--spacing-sm) 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.checkbox-input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-color);
}

.checkbox-label {
  color: var(--text-primary);
  font-weight: 500;
  cursor: pointer;
}

/* Calculator Tips Section */
.calculator-tips {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-xl);
}

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

.tip-item {
  padding: var(--spacing-md);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(251, 133, 0, 0.1);
}

.tip-item h4 {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--primary-color);
  font-size: 1rem;
  font-weight: 600;
}

.tip-item p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Calculator Responsive Styles */
@media (max-width: 1024px) {
  .calculator-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .calculator-results,
  .room-card {
    padding: var(--spacing-lg);
    max-width: 100%;
    overflow-x: hidden;
  }

  .kpi-cards {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-sm);
  }

  /* Chart responsiveness */
  .chart-container {
    padding: var(--spacing-lg);
    overflow-x: auto;
    max-width: 100%;
  }

  .interest-chart,
  .cost-chart,
  .payment-chart {
    height: 300px;
    min-width: 600px;
    max-width: 100%;
  }

  /* Table responsiveness */
  .results-table-container {
    overflow-x: auto;
    max-width: 100%;
  }

  .results-table {
    min-width: 500px;
  }

  .draw-inputs {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-md);
    padding: 0;
  }

  .draw-inputs .btn {
    height: auto;
    margin-top: 0;
  }





  .calculator-form select,
  .calculator-page select {
    background-size: 16px;
    background-position: right 10px center;
    padding-right: 35px;
  }

  .input-group.inline {
    flex: none;
  }

  .custom-draw-section {
    padding: var(--spacing-sm);
    margin-top: var(--spacing-sm);
  }

  .draw-inputs .btn {
    height: auto;
    margin-top: 0;
  }

  .draws-table th,
  .draws-table td {
    padding: 12px 16px;
    font-size: 0.875rem;
  }

  .remove-draw-btn {
    padding: 4px 8px;
    font-size: 0.75rem;
  }
}

@media (max-width: 768px) {
  .calculator-title {
    font-size: 2rem;
  }

  .calculator-description {
    font-size: 1rem;
  }

  .calculator-inputs,
  .calculator-results {
    padding: var(--spacing-md);
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Square Footage Calculator responsive */
  .input-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .additional-room {
    padding: var(--spacing-lg);
  }

  .tips-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  #additional-rooms-container {
    gap: var(--spacing-md);
  }

  .calculator-actions .btn {
    font-size: 0.95rem;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  /* Results responsive */
  .total-value {
    font-size: 2.5rem;
  }

  .conversions-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .material-cards {
    grid-template-columns: 1fr;
  }

  /* Toggle responsive */
  .toggle-label {
    padding: 10px 12px;
    font-size: 0.8rem;
  }

  .panel-title {
    font-size: 1.25rem;
  }

  .draw-inputs {
    gap: var(--spacing-sm);
  }

  .loan-summary {
    padding: var(--spacing-md);
  }

  .summary-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .kpi-cards {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .results-table-container {
    overflow-x: auto;
    max-width: 100%;
  }

  .chart-container {
    padding: var(--spacing-md);
    overflow-x: auto;
    max-width: 100%;
  }

  .interest-chart,
  .cost-chart,
  .payment-chart {
    height: 250px;
    min-width: 500px;
    max-width: 100%;
  }

  .cost-summary {
    padding: var(--spacing-lg);
    border-radius: 12px;
  }

  .cost-summary .summary-title {
    font-size: 1.25rem;
  }

  .cost-summary .summary-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  .cost-summary .summary-item {
    padding: var(--spacing-md);
  }

  .cost-summary .summary-value {
    font-size: 1rem;
  }

  .results-table {
    min-width: 500px;
  }

  .chart-container {
    padding: var(--spacing-md);
  }

  .interest-chart {
    height: 250px;
    min-width: 350px;
  }
}

@media (max-width: 480px) {
  .calculator-header {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
  }

  .calculator-title {
    font-size: 1.75rem;
  }

  .calculator-inputs,
  .calculator-results {
    padding: var(--spacing-sm);
    max-width: 100%;
    overflow-x: hidden;
  }

  .additional-room {
    padding: var(--spacing-md);
  }

  .calculator-actions {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .calculator-actions .btn {
    font-size: 0.9rem;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  /* Results mobile responsive */
  .total-value {
    font-size: 2rem;
  }

  .results-hero {
    padding: var(--spacing-lg) 0;
  }

  .material-card {
    padding: var(--spacing-md);
  }

  .room-result-card {
    padding: var(--spacing-md);
  }

  /* Toggle mobile responsive */
  .toggle-label {
    padding: 8px 10px;
    font-size: 0.75rem;
  }

  /* Material calculator mobile responsive */
  .cost-breakdown {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .material-result-details {
    grid-template-columns: 1fr;
  }

  /* Mobile optimization for material results */
  .material-results {
    gap: var(--spacing-xs);
  }

  .material-result-card {
    padding: var(--spacing-sm);
  }

  .material-result-name {
    font-size: 0.95rem;
  }

  .material-result-cost {
    font-size: 1rem;
  }

  /* Responsive cost breakdown */
  .cost-breakdown {
    gap: var(--spacing-md);
    max-width: 100%;
    flex-wrap: wrap;
  }

  .breakdown-item {
    min-width: 80px;
  }

  /* Enhanced breakdown cards responsive */
  .cost-breakdown-enhanced {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-sm);
  }

  .breakdown-card {
    padding: var(--spacing-sm);
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-xs);
  }

  .breakdown-card .breakdown-value {
    font-size: 1.125rem;
  }

  .breakdown-card .breakdown-label {
    font-size: 0.75rem;
  }

  /* Enhanced total display responsive */
  .total-display {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
  }

  .total-value {
    font-size: 2.5rem;
  }

  .total-unit {
    font-size: 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .total-unit::before {
    display: none;
  }

  /* PDF Viewer Modal Responsive */
  .pdf-viewer-content {
    width: 95%;
    height: 95%;
    max-height: none;
  }

  .pdf-viewer-header {
    padding: var(--spacing-sm) var(--spacing-md);
    flex-direction: column;
    gap: var(--spacing-sm);
    text-align: center;
  }

  .pdf-viewer-header h3 {
    font-size: 1.125rem;
  }

  .pdf-viewer-actions {
    justify-content: center;
    width: 100%;
  }

  .pdf-action-btn {
    flex: 1;
    justify-content: center;
    padding: var(--spacing-sm);
    font-size: 0.8rem;
  }

  /* Enhanced landscaping calculator responsive */
  .material-details-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .plant-breakdown {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--spacing-sm);
  }

  .material-card-header {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-sm);
  }

  .material-cost {
    text-align: center;
    font-size: 1.25rem;
  }

  .spacing-info {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-xs);
  }

  /* Enhanced landscaping calculator responsive */
  .project-header {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-md);
  }

  .project-details {
    justify-content: center;
    gap: var(--spacing-md);
  }

  .cost-summary-section {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .cost-breakdown-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .section-header {
    flex-direction: column;
    gap: var(--spacing-md);
    text-align: center;
  }

  .section-actions {
    justify-content: center;
  }

  .quantity-options {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .plants-summary {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: var(--spacing-sm);
  }

  .plant-types-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }



  .download-buttons {
    max-width: 100%;
  }

  .download-btn {
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
  }

  .btn-content {
    align-items: center;
    text-align: center;
  }



  /* Redesigned results responsive */
  .results-main-grid {
    gap: var(--spacing-lg);
  }

  .results-column {
    gap: var(--spacing-md);
  }

  .total-amount {
    font-size: 2rem;
  }

  .breakdown-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .breakdown-info {
    width: 100%;
  }

  .breakdown-amount,
  .breakdown-percentage {
    align-self: flex-end;
  }

  .material-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .material-cost {
    align-self: flex-start;
    font-size: 1.25rem;
  }

  .quantity-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .plant-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
    text-align: left;
  }

  .plant-quantity,
  .plant-cost,
  .plant-unit {
    text-align: left;
  }


}

@media (max-width: 480px) {
  .total-value {
    font-size: 2rem;
  }

  .input-field {
    padding: 10px 12px;
    font-size: 0.875rem;
  }

  .calculate-button {
    padding: 12px 24px;
    font-size: 1rem;
    width: 100%;
  }

  .kpi-card {
    padding: var(--spacing-md);
  }

  .kpi-cards {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }

  .chart-container {
    padding: var(--spacing-sm);
    overflow-x: auto;
    max-width: 100%;
  }

  .interest-chart,
  .cost-chart,
  .payment-chart {
    height: 200px;
    min-width: 320px;
    max-width: 100%;
  }

  .results-table-container {
    overflow-x: auto;
    max-width: 100%;
    margin: 0 -var(--spacing-sm);
    padding: 0 var(--spacing-sm);
  }

  .kpi-value {
    font-size: 1.25rem;
  }

  .results-table th,
  .results-table td {
    padding: 8px 12px;
    font-size: 0.875rem;
  }

  .interest-chart {
    height: 200px;
    min-width: 300px;
  }

  .download-btn {
    padding: 10px 20px;
    font-size: 0.875rem;
  }
}

@media (max-width: 320px) {
  .calculator-title {
    font-size: 1.5rem;
  }

  .calculator-inputs,
  .calculator-results {
    padding: var(--spacing-xs);
    max-width: 100%;
    overflow-x: hidden;
  }

  .panel-title {
    font-size: 1.125rem;
  }

  .loan-summary {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
  }

  .chart-container {
    padding: var(--spacing-xs);
    overflow-x: auto;
    max-width: 100%;
  }

  .interest-chart,
  .cost-chart,
  .payment-chart {
    height: 180px;
    min-width: 280px;
    max-width: 100%;
  }

  .results-table-container {
    overflow-x: auto;
    max-width: 100%;
    margin: 0 -var(--spacing-xs);
    padding: 0 var(--spacing-xs);
  }

  .calculate-button {
    width: 100%;
    padding: 10px 16px;
    font-size: 0.9rem;
  }

  .download-btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.9rem;
  }

  .download-section {
    margin-top: var(--spacing-md);
  }

  .summary-title {
    font-size: 1rem;
  }

  .summary-item {
    padding: var(--spacing-xs);
  }

  .summary-label,
  .summary-value {
    font-size: 0.8rem;
  }

  .input-field {
    padding: 8px 10px;
    font-size: 0.875rem;
  }

  .custom-draw-section {
    padding: var(--spacing-sm);
    border-radius: 8px;
  }

  .draw-inputs {
    padding: 0;
    gap: var(--spacing-sm);
  }





  .calculator-form select,
  .calculator-page select {
    font-size: 0.85rem;
    background-size: 14px;
    background-position: right 8px center;
    padding-right: 30px;
  }

  .section-description {
    font-size: 0.8rem;
  }



  .draws-table {
    font-size: 0.8rem;
  }

  .draws-table th,
  .draws-table td {
    padding: 8px 12px;
  }

  .btn {
    padding: 8px 16px;
    font-size: 0.875rem;
  }

  .btn-secondary {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
}

  .segment-option {
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
  }

  .kpi-cards {
    gap: var(--spacing-xs);
  }

  .kpi-card {
    padding: var(--spacing-sm);
  }

  .kpi-value {
    font-size: 1.125rem;
  }

  .results-table th,
  .results-table td {
    padding: 6px 8px;
    font-size: 0.8rem;
  }

  .cost-summary {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-radius: 12px;
  }

  .cost-summary .summary-title {
    font-size: 1.125rem;
    margin-bottom: var(--spacing-md);
  }

  .cost-summary .summary-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .cost-summary .summary-item {
    padding: var(--spacing-sm);
  }

  .cost-summary .summary-label {
    font-size: 0.75rem;
  }

  .cost-summary .summary-value {
    font-size: 0.95rem;
  }

  .interest-chart {
    height: 180px;
    min-width: 280px;
  }

  .calculator-disclaimer {
    padding: var(--spacing-sm);
  }


/* Calculators Index Page Styles */
.calculators-page-section {
  padding: var(--spacing-xl) 0;
  background: linear-gradient(135deg, var(--background-primary) 0%, var(--background-secondary) 100%);
}

.calculators-page {
  background: transparent;
}

.calculators-header {
  text-align: left;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.calculators-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-md);
  line-height: 1.2;
}

.calculators-description {
  max-width: 900px;
  margin: 0;
}

.calculators-description p {
  font-size: 1.125rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.calculators-benefits {
  margin-top: var(--spacing-lg);
}

.benefits-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.benefits-list li {
  padding: var(--spacing-md);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.875rem;
  line-height: 1.5;
}

.benefits-list li strong {
  color: var(--primary-color);
  font-weight: 600;
}

/* Section Styles */
.section-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.calculators-categories {
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-xl);
  background: rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.category-item {
  text-align: center;
  padding: var(--spacing-lg);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: var(--transition-smooth);
}

.category-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.category-item h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: var(--spacing-sm);
}

.category-item p {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

/* Calculator Grid */
.calculators-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

/* Calculator Cards */
.calculator-card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-xl);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.calculator-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  border-color: var(--primary-color);
}

.calculator-card.coming-soon {
  opacity: 0.5;
  filter: grayscale(60%);
  pointer-events: none;
  position: relative;
}

.calculator-card.coming-soon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  pointer-events: none;
  border-radius: 12px;
}

.calculator-card.coming-soon .calculator-card__title {
  color: #999;
}

.calculator-card.coming-soon .calculator-card__description {
  color: #bbb;
}

.calculator-card.coming-soon .calculator-card__icon {
  opacity: 0.4;
}

.calculator-card.coming-soon .calculator-card__meta {
  opacity: 0.6;
}

.calculator-card.coming-soon:hover {
  transform: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.calculator-card.coming-soon:hover::after {
  content: 'Coming Soon';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(2, 48, 71, 0.9);
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  z-index: 10;
  pointer-events: none;
}

/* Ensure coming-soon cards are completely non-interactive */
.calculator-card.coming-soon * {
  pointer-events: none;
}

.calculator-card__icon {
  width: 60px;
  height: 60px;
  background: var(--primary-color);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
  color: white;
  transition: var(--transition-smooth);
}

.calculator-card:hover .calculator-card__icon {
  background: var(--secondary-color);
  transform: scale(1.1);
}

.calculator-card__icon svg {
  width: 32px;
  height: 32px;
}

.calculator-card__content {
  flex: 1;
  margin-bottom: var(--spacing-lg);
}

.calculator-card__header {
  margin-bottom: var(--spacing-md);
}

.calculator-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  line-height: 1.3;
}

.calculator-card__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.completion-time {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.875rem;
  color: var(--text-light);
  font-weight: 500;
}

.completion-time svg {
  width: 16px;
  height: 16px;
}

.difficulty-level {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.difficulty-level.beginner {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.difficulty-level.intermediate {
  background: rgba(251, 133, 0, 0.1);
  color: var(--primary-color);
  border: 1px solid rgba(251, 133, 0, 0.2);
}

.difficulty-level.advanced {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.calculator-card__description {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

.calculator-card__features {
  margin-top: var(--spacing-md);
}

.calculator-card__features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.calculator-card__features li {
  position: relative;
  padding-left: var(--spacing-md);
  margin-bottom: var(--spacing-xs);
  font-size: 0.875rem;
  color: var(--text-light);
}

.calculator-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: 600;
}

/* Calculator Card Footer */
.calculator-card__footer {
  margin-top: auto;
}

.calculator-card__button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 12px 24px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-smooth);
  width: 100%;
  justify-content: center;
}

.calculator-card__button:hover {
  background: var(--secondary-color);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(251, 133, 0, 0.3);
}

.calculator-card__button svg {
  width: 16px;
  height: 16px;
  transition: var(--transition-smooth);
}

.calculator-card__button:hover svg {
  transform: translateX(2px);
}

.calculator-card__coming-soon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: #f5f5f5;
  color: #999;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-weight: 600;
  width: 100%;
  cursor: not-allowed;
  position: relative;
}

.calculator-card__coming-soon::before {
  content: '🚧';
  margin-right: 8px;
  font-size: 16px;
  cursor: not-allowed;
}

/* FAQ Section */
.calculators-faq {
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-xl);
  background: rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.faq-item {
  padding: var(--spacing-lg);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.faq-item h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  line-height: 1.3;
}

.faq-item p {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

/* Benefits Detailed Section */
.calculators-benefits-detailed {
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-xl);
  background: rgba(251, 133, 0, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(251, 133, 0, 0.2);
}

.benefits-detailed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.benefit-item {
  padding: var(--spacing-lg);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: var(--transition-smooth);
}

.benefit-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.benefit-item h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: var(--spacing-sm);
}

.benefit-item p {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

/* Calculators Footer */
.calculators-footer {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--border-color);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-xl);
}

.help-section {
  text-align: center;
  padding: var(--spacing-xl);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.help-section h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

.help-section p {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

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

.btn-outline {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-smooth);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-outline:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(251, 133, 0, 0.3);
}

.related-resources {
  padding: var(--spacing-lg);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.related-resources h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

.related-resources ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.related-resources li {
  margin-bottom: var(--spacing-sm);
}

.related-resources a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition-smooth);
  display: block;
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid transparent;
}

.related-resources a:hover {
  color: var(--secondary-color);
  border-bottom-color: var(--secondary-color);
}

/* Calculators Responsive Styles */
@media (max-width: 1024px) {
  .calculators-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
  }
}

@media (max-width: 768px) {
  .calculators-title {
    font-size: 2rem;
  }

  .calculators-description p {
    font-size: 1rem;
  }

  .calculators-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .benefits-list {
    grid-template-columns: 1fr;
  }

  .categories-grid,
  .faq-grid,
  .benefits-detailed-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .calculators-categories,
  .calculators-faq,
  .calculators-benefits-detailed {
    padding: var(--spacing-lg);
  }

  .calculators-footer {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

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

  .calculator-card {
    padding: var(--spacing-lg);
  }

  .calculator-card__icon {
    width: 50px;
    height: 50px;
  }

  .calculator-card__icon svg {
    width: 28px;
    height: 28px;
  }

  .calculator-card__title {
    font-size: 1.25rem;
  }

  .help-section {
    padding: var(--spacing-lg);
  }

  .help-section h2 {
    font-size: 1.5rem;
  }

  .help-section p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .calculators-title {
    font-size: 1.75rem;
  }

  .calculator-card {
    padding: var(--spacing-md);
  }

  .calculator-card__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .calculator-card__button {
    padding: 10px 20px;
    font-size: 0.875rem;
  }

  .help-section {
    padding: var(--spacing-md);
  }
}

@media (max-width: 320px) {
  .calculators-title {
    font-size: 1.5rem;
  }

  .calculator-card {
    padding: var(--spacing-sm);
  }

  .calculator-card__icon {
    width: 40px;
    height: 40px;
  }

  .calculator-card__icon svg {
    width: 24px;
    height: 24px;
  }

  .calculator-card__title {
    font-size: 1.125rem;
  }

  .calculator-card__description {
    font-size: 0.875rem;
  }

  .calculator-card__features li {
    font-size: 0.8rem;
  }
}

/* Related Articles */
.related-articles {
  margin: var(--spacing-xl) 0;
  border-radius: var(--border-radius);
}

.related-articles__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
  color: var(--text-primary);
  text-align: left;
}

.related-articles__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.related-article {
  background: rgba(248, 249, 250, 0.5);
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.related-article:hover {
  border-color: var(--primary-color);
}

.related-article__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.related-article__image {
  width: 100%;
  height: 150px;
  overflow: hidden;
}

.related-article__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.related-article:hover .related-article__image img {
  transform: scale(1.05);
}

.related-article__content {
  padding: var(--spacing-md);
}

.related-article__category {
  display: inline-block;
  padding: 4px 8px;
  background: var(--primary-color);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--border-radius-small);
  margin-bottom: var(--spacing-xs);
}

.related-article__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--spacing-xs) 0;
  color: var(--text-primary);
}

.related-article__date {
  font-size: 0.875rem;
  color: var(--text-light);
}

/* Page Styles - Flat Design Matching Archive Pages */

/* Page Subtitle */
.page-subtitle {
  font-size: 1.125rem;
  color: var(--text-light);
  font-weight: 400;
  margin: 0;
  line-height: 1.4;
  font-style: italic;
}

/* Page Featured Image - Flat Style */
.page-featured-image {
  margin-bottom: var(--spacing-xl);
}

.page-featured-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius);
}

.page-featured-caption {
  margin-top: var(--spacing-sm);
  font-size: 0.875rem;
  color: var(--text-light);
  font-style: italic;
  text-align: center;
}

/* Page Content - Flat Style */
.page-content {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
  color: var(--text-primary);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
}

.page-content h2 {
  font-size: 2rem;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: var(--spacing-sm);
}

.page-content h3 {
  font-size: 1.5rem;
}

.page-content h4 {
  font-size: 1.25rem;
}

.page-content p {
  margin-bottom: var(--spacing-md);
}

.page-content ul,
.page-content ol {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-lg);
}

.page-content li {
  margin-bottom: var(--spacing-xs);
}

.page-content blockquote {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--background-secondary);
  border-left: 4px solid var(--primary-color);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  font-style: italic;
}

.page-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  margin: var(--spacing-md) 0;
}

.page-content .wp-block-image {
  text-align: center;
}

/* Page Links (Multi-page content) */
.page-links {
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-md);
  background: var(--background-secondary);
  border-radius: var(--border-radius);
  text-align: center;
}

.page-links-title {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.page-link {
  display: inline-block;
  margin: 0 var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--primary-color);
  color: white;
  text-decoration: none;
  border-radius: var(--border-radius);
  font-weight: 500;
  transition: var(--transition-smooth);
}

.page-link:hover {
  background: var(--secondary-color);
  transform: translateY(-1px);
}

.page-links .current {
  background: var(--accent-color);
}

/* Page Template Responsive Styles - Flat Design */
@media (max-width: 1024px) {
  .page-content {
    font-size: 1.1rem;
  }

  .page-content h2 {
    font-size: 1.75rem;
  }

  .page-content h3 {
    font-size: 1.375rem;
  }
}

@media (max-width: 768px) {
  .page-subtitle {
    font-size: 1rem;
  }

  .page-content {
    font-size: 1.05rem;
  }

  .page-content h2 {
    font-size: 1.5rem;
  }

  .page-content h3 {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .page-subtitle {
    font-size: 1rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 0 6px 6px 0;
  }

  .page-content {
    font-size: 1rem;
    line-height: 1.6;
  }

  .page-content h2 {
    font-size: 1.375rem;
  }

  .page-content h3 {
    font-size: 1.125rem;
  }

  .page-content h4 {
    font-size: 1rem;
  }

  .page-links {
    padding: var(--spacing-sm);
  }

  .page-link {
    margin: var(--spacing-xs) 2px;
    padding: 6px var(--spacing-xs);
    font-size: 0.875rem;
  }
}

@media (max-width: 320px) {
  .page-subtitle {
    font-size: 0.875rem;
  }

  .page-content {
    font-size: 0.95rem;
  }

  .page-content h2 {
    font-size: 1.25rem;
  }

  .page-content h3 {
    font-size: 1.1rem;
  }
}

/* Contact Form Styles - Flat Design */
.contact-form-wrapper {
  margin-top: var(--spacing-xl);
}

.contact-form {
  width: 100%;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1.1rem;
}

.required {
  color: var(--primary-color);
  font-weight: 700;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 1.05rem;
  font-family: inherit;
  transition: var(--transition-smooth);
  background: var(--background-primary);
  color: var(--text-primary);
  line-height: 1.5;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

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

.form-submit {
  margin-top: var(--spacing-xl);
  text-align: left;
}

.contact-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
  text-decoration: none;
  min-width: 180px;
  justify-content: center;
}

.contact-submit-btn:hover {
  background: var(--secondary-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.contact-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.submit-icon {
  width: 20px;
  height: 20px;
}

/* Contact Messages */
.contact-message {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  border-radius: var(--border-radius);
  font-weight: 500;
  border-left: 4px solid;
}

.contact-success {
  background: rgba(81, 207, 102, 0.08);
  border-left-color: #51cf66;
  color: #2b8a3e;
}

.contact-error {
  background: rgba(255, 107, 107, 0.08);
  border-left-color: #ff6b6b;
  color: #c92a2a;
}

.contact-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.contact-message p {
  margin: 0;
}

/* Author Box Styles */
.author-box {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
  background: rgba(248, 249, 250, 0.5);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  align-items: center;
}

.author-box__avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--background-secondary);
  border: 2px solid var(--border-color);
}

.author-box__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.author-box__avatar .default-avatar {
  border-radius: 50%;
  font-size: 1.25rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: none;
  font-weight: 600;
  color: var(--text-light);
}

.author-box__content {
  flex: 1;
  min-width: 0;
}

.author-box__name {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.author-box__name a {
  color: var(--text-primary);
  text-decoration: none;
}

.author-box__name a:hover {
  color: var(--primary-color);
}

.author-box__bio {
  margin-bottom: var(--spacing-md);
  color: var(--text-secondary);
  line-height: 1.5;
  font-size: 0.95rem;
}

.author-box__bio p {
  margin: 0 0 var(--spacing-xs) 0;
}

.author-box__bio p:last-child {
  margin-bottom: 0;
}

.author-box__view-posts {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  opacity: 0.8;
}

.author-box__view-posts:hover {
  color: var(--primary-color);
  opacity: 1;
}

.author-box__view-posts svg {
  opacity: 0.7;
}

.author-box__view-posts:hover svg {
  opacity: 1;
}

/* Author Box Responsive Styles */
@media (max-width: 768px) {
  .author-box {
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) var(--spacing-sm);
    align-items: flex-start;
  }

  .author-box__avatar {
    width: 56px;
    height: 56px;
  }

  .author-box__avatar .default-avatar {
    font-size: 1.125rem;
  }

  .author-box__name {
    font-size: 1rem;
  }

  .author-box__bio {
    font-size: 0.9rem;
    margin-bottom: var(--spacing-sm);
  }

  .author-box__view-posts {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .author-box {
    padding: var(--spacing-md);
    margin: var(--spacing-md) var(--spacing-sm);
    gap: var(--spacing-md);
  }

  .author-box__avatar {
    width: 48px;
    height: 48px;
  }

  .author-box__avatar .default-avatar {
    font-size: 1rem;
  }

  .author-box__name {
    font-size: 0.95rem;
  }

  .author-box__bio {
    font-size: 0.85rem;
  }

  .author-box__view-posts {
    font-size: 0.75rem;
  }
}

/* Contact Form Responsive Styles */
@media (max-width: 768px) {
  .contact-form-wrapper {
    padding: var(--spacing-lg);
    border-radius: 8px;
    margin: var(--spacing-xl) var(--spacing-sm) 0;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-submit-btn {
    font-size: 1rem;
    padding: var(--spacing-sm) var(--spacing-lg);
  }
}

@media (max-width: 480px) {
  .contact-form-wrapper {
    padding: var(--spacing-md);
    margin: var(--spacing-lg) var(--spacing-sm) 0;
  }

  .form-group {
    margin-bottom: var(--spacing-md);
  }

  .form-group input,
  .form-group textarea {
    padding: var(--spacing-xs);
    font-size: 0.95rem;
  }

  .contact-submit-btn {
    font-size: 0.95rem;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .contact-message {
    padding: var(--spacing-sm);
    font-size: 0.9rem;
  }
}

@media (max-width: 320px) {
  .contact-form-wrapper {
    padding: var(--spacing-sm);
  }

  .form-group input,
  .form-group textarea {
    font-size: 0.9rem;
  }

  .contact-submit-btn {
    font-size: 0.9rem;
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}

/* 404 Error Page Styles */
.error-404-content {
  text-align: center;
  padding: var(--spacing-xl) 0;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-404-inner {
  max-width: 800px;
  margin: 0 auto;
}

.error-404-number {
  font-size: 8rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: var(--spacing-lg);
  opacity: 0.8;
}

.error-404-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  color: var(--secondary-color);
}

.error-404-description {
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  max-width: 600px;
  margin: 0 auto;
}

.error-404-link {
  display: inline-block;
  padding: 12px 24px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-smooth);
  text-align: center;
  text-decoration: none;
}

.error-404-link:hover {
  background-color: var(--secondary-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.error-404-description {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.error-404-actions {
  margin-bottom: var(--spacing-xl);
}

.error-404-search {
  margin-top: var(--spacing-lg);
}

.error-404-search h3 {
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
}

.error-404-suggestions {
  text-align: left;
  margin-top: var(--spacing-xl);
}

.error-404-suggestions h3 {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  color: var(--secondary-color);
}

.error-404-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.error-404-post {
  background: var(--background-secondary);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: var(--transition-smooth);
}

.error-404-post:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-medium);
}

.error-404-post__image img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.error-404-post__content {
  padding: var(--spacing-md);
}

.error-404-post__title {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 1.125rem;
}

.error-404-post__title a {
  color: var(--text-primary);
  text-decoration: none;
}

.error-404-post__title a:hover {
  color: var(--primary-color);
}

.error-404-post__excerpt {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.error-404-post__date {
  font-size: 0.75rem;
  color: var(--text-light);
}

.error-404-categories h4 {
  text-align: center;
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
}

.error-404-category-list {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.error-404-category {
  display: inline-block;
  padding: 8px 16px;
  background: var(--background-secondary);
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--border-radius);
  transition: var(--transition-smooth);
}

.error-404-category:hover {
  background: var(--primary-color);
  color: white;
}

.category-count {
  font-size: 0.875rem;
  opacity: 0.7;
}

/* Search Results Styles */
.search-query {
  color: var(--primary-color);
  font-weight: 600;
}

.search-results-count {
  font-size: 1rem;
  color: var(--text-light);
  margin-bottom: var(--spacing-lg);
}

.search-result-card,
.recent-post-card {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--background-secondary);
  border-radius: var(--border-radius);
  transition: var(--transition-smooth);
  margin-bottom: var(--spacing-md);
}

.search-result-card:hover,
.recent-post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-medium);
}

.search-result-card__image,
.recent-post-card__image {
  flex-shrink: 0;
  width: 150px;
  height: 100px;
  border-radius: var(--border-radius-small);
  overflow: hidden;
}

.search-result-card__image img,
.recent-post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-result-card__content,
.recent-post-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.search-result-card__categories {
  margin-bottom: var(--spacing-xs);
}

.search-result-card__category {
  display: inline-block;
  padding: 2px 8px;
  background: var(--primary-color);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--border-radius-small);
  text-decoration: none;
  margin-right: var(--spacing-xs);
}

.search-result-card__title,
.recent-post-card__title {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.search-result-card__title a,
.recent-post-card__title a {
  color: var(--text-primary);
  text-decoration: none;
}

.search-result-card__title a:hover,
.recent-post-card__title a:hover {
  color: var(--primary-color);
}

.search-result-card__excerpt {
  flex: 1;
  margin-bottom: var(--spacing-sm);
  color: var(--text-secondary);
}

.search-result-card__excerpt mark {
  background: rgba(251, 133, 0, 0.2);
  color: var(--primary-color);
  padding: 2px 4px;
  border-radius: var(--border-radius-small);
}

.search-result-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
}

.search-result-card__meta {
  display: flex;
  gap: var(--spacing-sm);
  font-size: 0.875rem;
  color: var(--text-light);
  flex-wrap: wrap;
}

.search-result-card__meta a {
  color: var(--text-light);
  text-decoration: none;
}

.search-result-card__meta a:hover {
  color: var(--primary-color);
}

.search-result-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.875rem;
  transition: var(--transition-smooth);
}

.search-result-card__read-more:hover {
  color: var(--secondary-color);
}

/* Featured Category Widget */
.featured-category-posts {
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .site-header {
    margin: 0;
    padding: 0;
    width: 100%;
    position: sticky;
    left: 0;
    right: 0;
  }

  .header-container {
    padding: var(--spacing-sm) var(--spacing-md);
    margin: 0;
    max-width: none;
    width: 100%;
  }

  .site-branding,
  .main-navigation {
    padding: 0;
    margin: 0;
  }

  /* Ensure no container padding affects header */
  body {
    margin: 0;
    padding: 0;
  }

  /* Fix horizontal overflow for sidebar-left layout */
  body.sidebar-left {
    margin-left: 0 !important;
  }

  .content-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Remove any potential gaps */
  .site-header::before,
  .site-header::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .header-container {
    padding: var(--spacing-sm);
  }

  .content-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.featured-category-item {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--spacing-md);
}

.featured-category-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.featured-category-image {
  margin-bottom: var(--spacing-sm);
}

.featured-category-thumb {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  transition: var(--transition-smooth);
}

.featured-category-image:hover .featured-category-thumb {
  transform: scale(1.02);
}

.featured-category-title {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.featured-category-title a {
  color: var(--text-primary);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.featured-category-title a:hover {
  color: var(--primary-color);
}

.featured-category-meta {
  font-size: 0.875rem;
  color: var(--text-light);
}


/* No Results Card Styling */
.no-results-card .search-result-card__image,
.suggestions-card .search-result-card__image,
.search-form-card .search-result-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: white;
  min-height: 200px;
}

.no-results-icon,
.suggestions-icon,
.search-form-icon {
  opacity: 0.9;
}

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

.search-tips-list li {
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--border-light);
  position: relative;
  padding-left: var(--spacing-md);
}

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

.search-tips-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: bold;
}

.search-form-card .search-form-wrapper {
  margin: 0;
}

.search-form-card .search-form {
  margin: 0;
}

.recent-posts-section {
  margin-top: var(--spacing-xl);
}

.recent-posts-section .section-title {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  color: var(--text-primary);
  font-size: 1.5rem;
}

.recent-suggestion-card {
  transition: var(--transition-smooth);
}

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

/* Single Post Responsive Styles */
@media (max-width: 768px) {
  .single-post-header-section {
    padding: var(--spacing-md) 0;
  }

  .breadcrumb-nav {
    font-size: 0.8rem;
    gap: var(--spacing-xs);
  }

  .single-post {
    border-radius: 12px;
    margin: 0 var(--spacing-sm) var(--spacing-xl);
  }

  .single-post__header {
    /* padding: var(--spacing-lg) var(--spacing-lg) 0; */
  }

  .single-post__title {
    font-size: 2.5rem;
    line-height: 1.3;
  }

  .single-post__meta {
    gap: var(--spacing-sm);
    justify-content: space-between;
  }

  .single-post__meta-item {
    flex: 1;
    justify-content: center;
    text-align: center;
  }

  .single-post__meta > *::before {
    display: none;
  }

  .single-post__content {
    font-size: 1.1rem;
    padding: 0 var(--spacing-lg) var(--spacing-lg);
  }

  .single-post__content h2 {
    font-size: 1.75rem;
  }

  .single-post__content h3 {
    font-size: 1.4rem;
  }

  .single-post__featured-image {
    height: 300px;
  }

  .post-navigation {
    margin: var(--spacing-lg) var(--spacing-sm);
  }

  .post-nav {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .post-nav__next .post-nav__direction {
    justify-content: flex-start;
  }

  .post-nav__next .post-nav__content {
    flex-direction: row;
    text-align: left;
  }

  .related-articles {
    margin: var(--spacing-xl) var(--spacing-sm);
  }

  .related-articles__title {
    font-size: 1.75rem;
  }

  .related-articles__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
}

@media (max-width: 480px) {
  .single-post {
    border-radius: 8px;
    margin: 0 var(--spacing-xs) var(--spacing-lg);
  }

  .single-post__header {
    /* padding: var(--spacing-md) var(--spacing-md) 0; */
  }

  .single-post__title {
    font-size: 2rem;
    line-height: 1.4;
  }

  .single-post__content {
    font-size: 1rem;
    padding: 0 var(--spacing-md) var(--spacing-md);
  }

  .single-post__content p:first-of-type {
    font-size: 1.1rem;
  }

  .single-post__featured-image {
    height: 250px;
  }

  .post-navigation {
    margin: var(--spacing-lg) var(--spacing-sm);
  }
}

/* Extra small devices - Featured image adjustments */
@media (max-width: 320px) {
  .single-post__featured-image {
    height: 200px;
  }

  .post-nav__item {
    padding: var(--spacing-md);
  }

  .post-nav__content {
    gap: var(--spacing-sm);
  }

  .post-nav__next .post-nav__content {
    flex-direction: row-reverse;
    text-align: right;
  }

  .post-nav__image {
    width: 50px;
    height: 50px;
  }

  .related-articles {
    margin: var(--spacing-lg) var(--spacing-sm);
  }

  .related-articles__title {
    font-size: 1.5rem;
  }
}

  .error-404-number {
    font-size: 6rem;
  }

  .error-404-title {
    font-size: 2rem;
  }

  .error-404-posts {
    grid-template-columns: 1fr;
  }

  .search-result-card,
  .recent-post-card {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .search-result-card__image,
  .recent-post-card__image {
    width: 100%;
    height: 200px;
  }

  .search-result-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }


@media (max-width: 480px) {
  .single-post__title {
    font-size: 1.75rem;
  }

  .single-page__title {
    font-size: 1.75rem;
  }

  .error-404-number {
    font-size: 4rem;
  }

  .error-404-title {
    font-size: 1.5rem;
  }

  .error-404-category-list {
    flex-direction: column;
    align-items: center;
  }

  .recent-posts-grid {
    grid-template-columns: 1fr;
  }
}

/* Comments Styles */
.comments-area {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--border-color);
}

.comments-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
  color: var(--secondary-color);
}

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

.comment-list .comment {
  margin-bottom: var(--spacing-lg);
}

.comment-list .children {
  list-style: none;
  margin-left: var(--spacing-xl);
  padding-left: var(--spacing-lg);
  border-left: 2px solid var(--border-color);
}

.comment-body {
  background: var(--background-secondary);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  transition: var(--transition-smooth);
}

.comment-body:hover {
  box-shadow: var(--shadow-light);
}

.comment-meta {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.comment-avatar {
  border-radius: 50%;
  flex-shrink: 0;
}

.comment-metadata {
  flex: 1;
}

.comment-metadata .fn {
  font-weight: 600;
  color: var(--text-primary);
  font-style: normal;
  display: block;
  margin-bottom: var(--spacing-xs);
}

.comment-date {
  font-size: 0.875rem;
  color: var(--text-light);
  text-decoration: none;
}

.comment-date:hover {
  color: var(--primary-color);
}

.edit-link {
  margin-left: var(--spacing-sm);
  font-size: 0.875rem;
}

.edit-link a {
  color: var(--text-light);
  text-decoration: none;
}

.edit-link a:hover {
  color: var(--primary-color);
}

.comment-content {
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
}

.comment-awaiting-moderation {
  background: rgba(251, 133, 0, 0.1);
  color: var(--primary-color);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-small);
  font-size: 0.875rem;
  margin-bottom: var(--spacing-sm);
}

.comment-footer .reply a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  transition: var(--transition-smooth);
}

.comment-footer .reply a:hover {
  color: var(--secondary-color);
}

.no-comments {
  text-align: center;
  color: var(--text-light);
  font-style: italic;
  padding: var(--spacing-lg);
  background: var(--background-secondary);
  border-radius: var(--border-radius);
}

/* Comment Form Styles */
.comment-respond {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: var(--background-secondary);
  border-radius: var(--border-radius);
}

.comment-reply-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
  color: var(--secondary-color);
}

.comment-form p {
  margin-bottom: var(--spacing-md);
}

.comment-form label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  color: var(--text-primary);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-small);
  font-size: 1rem;
  font-family: inherit;
  background: var(--background-primary);
  transition: var(--transition-smooth);
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(251, 133, 0, 0.1);
  outline: none;
}

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

.comment-notes {
  font-size: 0.875rem;
  color: var(--text-light);
  margin-bottom: var(--spacing-md);
}

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

/* Enhanced Search Form Styles */
.search-form-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-submit-text {
  display: none;
}

/* Widget Styles */
.widget {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--background-secondary);
  border-radius: var(--border-radius);
}

.widget-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--primary-color);
  display: inline-block;
}

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

.widget li {
  margin-bottom: var(--spacing-xs);
  padding-left: 0;
}

.widget a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-smooth);
}

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

/* Recent Posts Widget with Thumbnails */
.recent-posts-with-thumbnails {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recent-post-item {
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

.recent-post-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.recent-post-link {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  text-decoration: none;
  color: inherit;
  transition: var(--transition-smooth);
}

.recent-post-link:hover {
  color: var(--primary-color);
}

.recent-post-thumbnail {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--border-radius-small);
  overflow: hidden;
  background: var(--background-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recent-post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.recent-post-thumbnail--placeholder {
  color: var(--text-light);
}

.recent-post-thumbnail--placeholder svg {
  width: 24px;
  height: 24px;
}

.recent-post-content {
  flex: 1;
  min-width: 0;
}

.recent-post-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 4px 0;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recent-post-link:hover .recent-post-title {
  color: var(--primary-color);
}

.recent-post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
  line-height: 1;
}

.recent-post-author,
.recent-post-date,
.recent-post-separator {
  font-size: 0.7rem;
  color: var(--text-light);
  line-height: 1;
}

/* Page Links */
.page-links {
  margin: var(--spacing-lg) 0;
  text-align: center;
}

.page-links a,
.page-links > span {
  display: inline-block;
  padding: 8px 12px;
  margin: 0 4px;
  background: var(--background-secondary);
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--border-radius-small);
  transition: var(--transition-smooth);
}

.page-links a:hover,
.page-links > span {
  background: var(--primary-color);
  color: white;
}

/* Enhanced Form Styles */
.comment-form label.focused {
  color: var(--primary-color);
  transform: translateY(-20px) scale(0.9);
}

.character-counter {
  font-size: 0.75rem;
  color: var(--text-light);
  text-align: right;
  margin-top: var(--spacing-xs);
}

.character-counter.warning {
  color: var(--primary-color);
}

.error-message {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: var(--spacing-xs);
  display: block;
}

.comment-form input.error,
.comment-form textarea.error {
  border-color: #dc3545;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1);
}

/* Loading States */
.search-submit.loading {
  pointer-events: none;
  opacity: 0.7;
}

.search-submit .spinner {
  margin-left: var(--spacing-xs);
}

/* Lazy Loading Images */
img.lazy {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img.loaded {
  opacity: 1;
}

/* Enhanced Animations */
.fade-in-up {
  animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Print Styles */
@media print {
  .site-header,
  .mobile-navigation,
  .comments-area,
  .comment-respond,
  .site-footer,
  .btn,
  .search-form {
    display: none !important;
  }

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

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

  .single-post__title,
  .single-page__title {
    font-size: 18pt;
    margin-bottom: 12pt;
  }

  .post-card__title {
    font-size: 14pt;
  }

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

  img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --text-primary: #000000;
    --text-secondary: #000000;
    --background-primary: #ffffff;
    --background-secondary: #f0f0f0;
    --border-color: #000000;
  }

  .btn {
    border: 2px solid currentColor;
  }

  .hero-article__overlay {
    background: rgba(0, 0, 0, 0.8) !important;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hover-lift:hover,
  .hero-article:hover {
    transform: none !important;
  }
}

/* Focus Visible Support */
@supports selector(:focus-visible) {
  button:focus:not(:focus-visible),
  input:focus:not(:focus-visible),
  select:focus:not(:focus-visible),
  textarea:focus:not(:focus-visible),
  a:focus:not(:focus-visible) {
    outline: none;
  }

  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
  }
}

/* Mobile Header Full Width */
@media (max-width: 768px) {
  .site-header {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100vw;
    position: sticky;
    left: 0;
    right: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  .header-container {
    padding: var(--spacing-sm) var(--spacing-md);
    margin: 0;
    max-width: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .site-branding,
  .main-navigation {
    padding: 0;
    margin: 0;
    min-width: 0;
    overflow: hidden;
  }

  /* Ensure no container padding affects header */
  body {
    margin: 0;
    padding: 0;
  }

  /* Fix horizontal overflow for sidebar-left layout */
  body.sidebar-left {
    margin-left: 0 !important;
  }

  .content-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Remove any potential gaps */
  .site-header::before,
  .site-header::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .header-container {
    padding: var(--spacing-sm);
  }

  .content-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Project Timeline Calculator Styles */
.timeline-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.date-item {
  text-align: center;
  padding: var(--spacing-md);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.date-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.date-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: white;
}

.timeline-phases {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.phase-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: var(--spacing-lg);
  transition: var(--transition-smooth);
}

.phase-card:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.phase-card.buffer-phase {
  background: rgba(255, 193, 7, 0.1);
  border-color: rgba(255, 193, 7, 0.3);
}

.phase-header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.phase-number {
  background: var(--primary-color);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.buffer-phase .phase-number {
  background: #ffc107;
  color: #333;
}

.phase-info {
  flex: 1;
}

.phase-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.phase-description {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.phase-duration {
  text-align: center;
  flex-shrink: 0;
}

.duration-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1;
}

.duration-label {
  font-size: 0.75rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.phase-dates {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.date-range {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.date-separator {
  color: var(--primary-color);
  font-weight: 600;
}

.start-date,
.end-date {
  font-weight: 500;
}

.critical-path {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  padding: var(--spacing-lg);
}

.critical-path-description {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.critical-phases {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.critical-phase-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: rgba(239, 68, 68, 0.1);
  border-radius: 6px;
  font-weight: 500;
  color: #dc2626;
}

.critical-phase-item svg {
  flex-shrink: 0;
  color: #dc2626;
}

.milestones {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.milestone-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: rgba(76, 175, 80, 0.05);
  border: 1px solid rgba(76, 175, 80, 0.2);
  border-radius: 8px;
}

.milestone-date {
  background: var(--primary-color);
  color: white;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.milestone-info {
  flex: 1;
}

.milestone-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.milestone-description {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.checkbox-input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-color);
}

/* Timeline Calculator Responsive Styles */
@media (max-width: 768px) {
  .timeline-dates {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .phase-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .phase-duration {
    align-self: flex-end;
  }

  .date-range {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .date-separator {
    transform: rotate(90deg);
  }

  .milestone-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .milestone-date {
    align-self: flex-start;
  }

  .critical-phases {
    gap: var(--spacing-xs);
  }
}

@media (max-width: 480px) {
  .phase-card {
    padding: var(--spacing-md);
  }

  .phase-number {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }

  .phase-name {
    font-size: 1rem;
  }

  .duration-value {
    font-size: 1.25rem;
  }

  .milestone-item {
    padding: var(--spacing-sm);
  }
}

/* Roofing Cost Calculator Styles - Scoped to roofing calculator only */
.roofing-calculator .cost-breakdown-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.roofing-calculator .breakdown-item {
  text-align: center;
  padding: var(--spacing-md);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.roofing-calculator .breakdown-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.roofing-calculator .breakdown-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: white;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.spec-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: var(--spacing-md);
  text-align: center;
}

.spec-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
}

.spec-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.cost-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.cost-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  transition: var(--transition-smooth);
}

.cost-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.cost-label {
  font-weight: 500;
  color: var(--text-primary);
}

.cost-value {
  font-weight: 600;
  color: var(--primary-color);
}

.summary-breakdown {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: var(--spacing-lg);
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.summary-item.total {
  border-top: 2px solid var(--primary-color);
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-sm);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--primary-color);
}

.summary-item.per-sqft {
  font-size: 0.875rem;
  color: var(--text-secondary);
  border-bottom: none;
  padding-bottom: 0;
}

.summary-label {
  font-weight: 500;
  color: var(--text-primary);
}

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

.summary-item.total .summary-value {
  color: var(--primary-color);
}

/* Roofing Calculator Responsive Styles */
@media (max-width: 768px) {
  .cost-breakdown-summary {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .spec-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .cost-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .summary-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }
}

@media (max-width: 480px) {
  .breakdown-item {
    padding: var(--spacing-sm);
  }

  .spec-item {
    padding: var(--spacing-sm);
  }

  .summary-breakdown {
    padding: var(--spacing-md);
  }
}

/* ===================================
   CALCULATORS WIDGET STYLES
   =================================== */

.gobuildyourhouse-calculators-widget {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--background-secondary);
  border-radius: var(--border-radius);
}

.gobuildyourhouse-calculators-widget .widget-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--primary-color);
  display: inline-block;
}

.calculators-widget-list {
  padding: 0;
  margin: 0;
}

.calculator-widget-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s ease;
}

.calculator-widget-item:last-child {
  border-bottom: none;
}

.calculator-widget-item:hover {
  background: var(--background-hover);
}

.calculator-widget-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-right: 0.75rem;
  color: var(--primary-color);
}

.calculator-widget-icon svg {
  width: 24px;
  height: 24px;
}

.calculator-widget-content {
  flex: 1;
  min-width: 0;
}

.calculator-widget-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

.calculator-widget-link {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.calculator-widget-link:hover {
  color: var(--secondary-color);
  text-decoration: none;
}

.calculator-widget-description {
  margin: 0.25rem 0 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.calculator-widget-footer {
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

.view-all-calculators-link {
  display: block;
  text-align: center;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  transition: color 0.2s ease;
}

.view-all-calculators-link:hover {
  color: var(--secondary-color);
  text-decoration: none;
}

.view-all-calculators-link .arrow {
  margin-left: 0.25rem;
}

.no-calculators {
  padding: 1rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.875rem;
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .calculator-widget-item {
    padding: 0.5rem 0.75rem;
  }

  .calculator-widget-icon {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
  }

  .calculator-widget-icon svg {
    width: 20px;
    height: 20px;
  }

  .calculator-widget-title {
    font-size: 0.8rem;
  }

  .calculator-widget-description {
    font-size: 0.7rem;
  }
}

/* Solar Calculator - Use Standard Calculator Styles */
.solar-calculator .material-result-card.incentive {
  border-color: rgba(40, 167, 69, 0.3);
  background: rgba(40, 167, 69, 0.05);
}

.solar-calculator .material-result-card.incentive .material-result-cost {
  color: #28a745;
}

.solar-calculator .download-section {
  margin-top: var(--spacing-xl);
}











/* Enhanced form validation styles */
.solar-calculator .input-field {
  position: relative;
  transition: all 0.3s ease;
}

/* Default state - show validation immediately */
.solar-calculator .input-field:invalid:not(:placeholder-shown) {
  border-color: rgba(220, 53, 69, 0.6);
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 1.4 1.4M7.2 4.6l-1.4 1.4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 40px;
}

.solar-calculator .input-field:valid:not(:placeholder-shown) {
  border-color: rgba(40, 167, 69, 0.6);
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.15);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%2328a745'%3e%3cpath d='m3 6 2 2 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 40px;
}

/* Select fields validation */
.solar-calculator select.input-field:invalid {
  border-color: rgba(220, 53, 69, 0.6);
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
}

.solar-calculator select.input-field:valid {
  border-color: rgba(40, 167, 69, 0.6);
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.15);
}

/* Focus states */
.solar-calculator .input-field:focus:invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.solar-calculator .input-field:focus:valid {
  border-color: #28a745;
  box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}

/* Required field indicators */
.solar-calculator .input-group {
  position: relative;
}

.solar-calculator .required {
  color: #dc3545;
  font-weight: 600;
}

/* Validation messages */
.solar-calculator .validation-message {
  display: none;
  font-size: 0.875rem;
  margin-top: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 4px;
  animation: slideDown 0.3s ease;
}

.solar-calculator .validation-message.error {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.2);
  display: block;
}

.solar-calculator .validation-message.success {
  color: #28a745;
  background: rgba(40, 167, 69, 0.1);
  border: 1px solid rgba(40, 167, 69, 0.2);
  display: block;
}

/* Enhanced Kitchen Redesign Calculator Styles */
.kitchen-results-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: linear-gradient(135deg, rgba(251, 133, 0, 0.1) 0%, rgba(251, 133, 0, 0.05) 100%);
  border-radius: 16px;
  border: 1px solid rgba(251, 133, 0, 0.2);
}

.kitchen-results-header h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}

.results-subtitle {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.kitchen-results-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

/* Kitchen Cost Summary Card */
.kitchen-cost-summary-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: var(--spacing-lg);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  width: 100%;
}

.kitchen-cost-summary-card .card-header {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid rgba(251, 133, 0, 0.1);
}

.kitchen-cost-summary-card .card-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.kitchen-cost-summary-card .total-cost-highlight {
  text-align: center;
  padding: var(--spacing-lg);
  background: linear-gradient(135deg, rgba(251, 133, 0, 0.1) 0%, rgba(251, 133, 0, 0.05) 100%);
  border-radius: 12px;
  margin-bottom: var(--spacing-lg);
}

.kitchen-cost-summary-card .total-amount {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1;
  margin-bottom: var(--spacing-xs);
}

.kitchen-cost-summary-card .total-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-xs);
}

.kitchen-cost-summary-card .cost-per-unit {
  font-size: 1rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.cost-breakdown-summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background: rgba(251, 133, 0, 0.05);
  border: 1px solid rgba(251, 133, 0, 0.1);
  border-radius: 8px;
  transition: var(--transition-smooth);
}

.breakdown-row:hover {
  background: rgba(251, 133, 0, 0.1);
  border-color: rgba(251, 133, 0, 0.2);
}

.breakdown-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1;
}

.breakdown-icon {
  font-size: 1.25rem;
  opacity: 0.8;
}

.breakdown-name {
  font-weight: 600;
  color: var(--text-primary);
}

.breakdown-amount {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-right: var(--spacing-sm);
}

.breakdown-percentage {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 600;
  background: rgba(251, 133, 0, 0.1);
  padding: 2px 8px;
  border-radius: 12px;
}

/* Kitchen Materials Card */
.kitchen-materials-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: var(--spacing-lg);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  width: 100%;
}

.materials-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.material-item {
  border: 1px solid rgba(251, 133, 0, 0.1);
  border-radius: 12px;
  padding: var(--spacing-lg);
  background: rgba(251, 133, 0, 0.02);
  transition: var(--transition-smooth);
}

.material-item:hover {
  background: rgba(251, 133, 0, 0.05);
  border-color: rgba(251, 133, 0, 0.2);
  transform: translateY(-1px);
}

.material-item.major {
  border-left: 4px solid var(--primary-color);
  background: rgba(251, 133, 0, 0.05);
}

.material-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.material-info {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  flex: 1;
}

.material-icon {
  font-size: 1.5rem;
  margin-top: 2px;
}

.material-details {
  flex: 1;
}

.material-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs) 0;
}

.material-description {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.material-cost {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-color);
  white-space: nowrap;
}



/* Kitchen Download Section */
.kitchen-download-section {
  background: linear-gradient(135deg, rgba(251, 133, 0, 0.1) 0%, rgba(251, 133, 0, 0.05) 100%);
  border: 2px solid rgba(251, 133, 0, 0.2);
  border-radius: 20px;
  padding: var(--spacing-xl);
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.download-header {
  margin-bottom: var(--spacing-lg);
}

.download-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}

.download-description {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.download-actions {
  display: flex;
  justify-content: center;
}

.download-btn {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
  color: white;
  border: none;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: 12px;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
  box-shadow: 0 4px 15px rgba(251, 133, 0, 0.3);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-decoration: none;
}

.download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(251, 133, 0, 0.4);
  color: white;
}

.download-btn:active {
  transform: translateY(0);
}

.btn-icon {
  font-size: 1.25rem;
}

.btn-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.btn-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
}

.btn-subtitle {
  font-size: 0.875rem;
  opacity: 0.9;
  line-height: 1;
}

/* Kitchen Calculator Responsive */

@media (max-width: 768px) {
  .kitchen-results-header h2 {
    font-size: 1.75rem;
  }

  .kitchen-cost-summary-card .total-amount {
    font-size: 2rem;
  }

  .material-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .material-cost {
    align-self: flex-end;
  }

  .download-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 1rem;
  }

  .btn-title {
    font-size: 1rem;
  }

  .btn-subtitle {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .kitchen-results-header {
    padding: var(--spacing-md);
  }

  .kitchen-results-header h2 {
    font-size: 1.5rem;
  }

  .results-subtitle {
    font-size: 1rem;
  }

  .kitchen-cost-summary-card .total-amount {
    font-size: 1.75rem;
  }

  .material-item {
    padding: var(--spacing-md);
  }

  .material-name {
    font-size: 1rem;
  }

  .material-cost {
    font-size: 1.125rem;
  }

  .download-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ===================================
   Article Summary Frontend Styles
   =================================== */

/* Summary Button */
.article-summary-section {
  margin: 1rem 0;
}

/* Article Buttons Container */
.article-buttons-container {
  display: flex;
  gap: 0.75rem;
  width: 100%;
}

.article-buttons-container > button {
  flex: 1; /* Each button takes 50% width */
  justify-content: center;
}

.read-summary-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.read-summary-btn:hover {
  filter: brightness(0.9);
}

.read-summary-btn:active {
  transform: translateY(0);
}

.summary-icon {
  flex-shrink: 0;
}

/* Listen to Article Button */
.listen-article-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--accent-color, #fb8500);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.listen-article-btn:hover {
  filter: brightness(0.9);
}

.listen-article-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.listen-article-btn.playing {
  background: #dc2626; /* Red when playing */
}

.listen-article-btn.paused {
  background: #059669; /* Green when paused */
}

.listen-icon {
  flex-shrink: 0;
}

/* Summary Modal */
.summary-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.summary-modal.active {
  opacity: 1;
  visibility: visible;
}

.summary-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.summary-modal-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transform: scale(0.9) translateY(20px);
  transition: all 0.3s ease;
}

.summary-modal.active .summary-modal-container {
  transform: scale(1) translateY(0);
}

.summary-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, rgba(251, 133, 0, 0.1) 0%, rgba(255, 183, 3, 0.1) 100%);
}

.summary-modal-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.summary-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--text-secondary);
}

.summary-modal-close:hover {
  background: rgba(0, 0, 0, 0.2);
  transform: scale(1.1);
}

.summary-modal-body {
  padding: 2rem;
  max-height: 60vh;
  overflow-y: auto;
}

.summary-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
}

.summary-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(251, 133, 0, 0.2);
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.summary-content {
  line-height: 1.7;
  color: var(--text-primary);
}

.summary-content p {
  margin-bottom: 1.5rem;
}

.summary-content ul {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.summary-content li {
  margin-bottom: 0.75rem;
}

.summary-error {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
}

.summary-modal-footer {
  padding: 1rem 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(248, 249, 250, 0.8);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.summary-copy-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--primary-color);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.summary-copy-btn:hover {
  filter: brightness(0.9);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.summary-copy-btn:active {
  transform: translateY(0);
}

.summary-copy-btn svg {
  flex-shrink: 0;
}

.summary-copy-btn.copied {
  background: #22c55e;
}

.summary-copy-btn.copied span::after {
  content: " ✓";
}

/* Responsive Design */
@media (max-width: 768px) {
  .article-buttons-container {
    gap: 0.5rem;
  }

  .article-buttons-container > button {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }

  .summary-modal {
    padding: 0.5rem;
  }

  .summary-modal-container {
    max-height: 90vh;
  }

  .summary-modal-header {
    padding: 1rem 1.5rem;
  }

  .summary-modal-title {
    font-size: 1.125rem;
  }

  .summary-modal-body {
    padding: 1.5rem;
    max-height: 70vh;
  }

  .summary-modal-footer {
    padding: 1rem 1.5rem;
  }

  .summary-meta {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .read-summary-btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
  }
}