/*
Theme Name: CostUI - Cost Calculator Theme
Template: oceanwp
Description: Professional cost calculator tools for businesses, freelancers, and entrepreneurs
Version: 1.0.0
Author: CostUI Team
Author URI: https://costui.com
Text Domain: costui
Domain Path: /languages
*/

/* ============================================
   CSS VARIABLES - CUSTOMIZE ONLY 3 COLORS
   ============================================ */
:root {
   /* ✏️ CUSTOMIZED FOR COSTUI.COM */
   --brand-primary: #2E7D7D;
   --brand-secondary: #4ECDC4;
   --brand-accent: #27AE60;

   /* ⛔ DO NOT CUSTOMIZE BELOW */
   --color-success: #27AE60;
   --color-warning: #F39C12;
   --color-danger: #E74C3C;
   --color-info: #3498DB;
   --text-primary: #2C3E50;
   --text-secondary: #7F8C8D;
   --text-muted: #95A5A6;
   --text-inverse: #FFFFFF;
   --bg-primary: #FFFFFF;
   --bg-secondary: #F8F9FA;
   --bg-muted: #ECF0F1;
   --bg-dark: #2C3E50;
   --border-color: #E0E6ED;
   --border-radius: 6px;
   --border-radius-lg: 12px;
   --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
   --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
   --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
   --space-xs: 4px; --space-sm: 8px; --space-md: 16px;
   --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;
   --font-sm: 14px; --font-base: 16px; --font-lg: 18px;
   --font-xl: 20px; --font-2xl: 24px; --font-3xl: 32px; --font-4xl: 48px;
   --height-input: 44px; --height-button: 44px;
   --transition-base: all 0.3s ease;
}

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

.content-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-2xl);
}

@media (min-width: 1024px) {
   .content-grid {
      grid-template-columns: 2fr 1fr;
   }
}

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

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

/* ============================================
   CARDS
   ============================================ */
.card {
   background: var(--bg-primary);
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow-md);
   margin-bottom: var(--space-xl);
}

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

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

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

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

.tool-card {
   border: 2px solid var(--border-color);
   transition: var(--transition-base);
}

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

/* ============================================
   BUTTONS
   ============================================ */
.btn {
   display: inline-block;
   padding: var(--space-md) var(--space-xl);
   font-size: var(--font-base);
   font-weight: 600;
   text-align: center;
   text-decoration: none;
   border: none;
   border-radius: var(--border-radius);
   cursor: pointer;
   transition: var(--transition-base);
   min-height: var(--height-button);
   line-height: 1.5;
}

.btn-primary {
   background: var(--brand-primary);
   color: white;
}

.btn-primary:hover {
   background: var(--brand-accent);
   transform: translateY(-2px);
   box-shadow: var(--shadow-md);
   color: white;
}

.btn-secondary {
   background: var(--bg-secondary);
   color: var(--text-primary);
   border: 2px solid var(--border-color);
}

.btn-secondary:hover {
   border-color: var(--brand-primary);
   color: var(--brand-primary);
}

.btn-lg {
   padding: var(--space-lg) var(--space-2xl);
   font-size: var(--font-lg);
}

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

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

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

.form-input,
.form-textarea,
.form-select {
   width: 100%;
   padding: var(--space-md);
   font-size: var(--font-base);
   border: 2px solid var(--border-color);
   border-radius: var(--border-radius);
   transition: var(--transition-base);
   min-height: var(--height-input);
   font-family: inherit;
   background: var(--bg-primary);
}

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

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

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

.form-row {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-lg);
}

@media (min-width: 768px) {
   .form-row {
      grid-template-columns: 1fr 1fr;
   }
}

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

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

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

.app-error {
   padding: var(--space-lg);
   background: #FEE;
   border-left: 4px solid var(--color-danger);
   border-radius: var(--border-radius);
   margin-bottom: var(--space-lg);
   color: var(--color-danger);
}

.app-error strong {
   display: block;
   margin-bottom: var(--space-sm);
   font-weight: 700;
}

.app-error ul {
   margin: 0;
   padding-left: var(--space-lg);
}

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

.result-primary {
   background: white;
   padding: var(--space-xl);
   text-align: center;
   box-shadow: var(--shadow-md);
   border-radius: var(--border-radius);
   margin-bottom: var(--space-lg);
}

.result-label {
   display: block;
   font-size: var(--font-base);
   color: var(--text-secondary);
   margin-bottom: var(--space-sm);
}

.result-value {
   display: block;
   font-size: var(--font-4xl);
   font-weight: 700;
   color: var(--brand-primary);
   line-height: 1.2;
}

.results-breakdown {
   margin-top: var(--space-xl);
   padding: var(--space-lg);
   background: white;
   border-radius: var(--border-radius);
}

.results-breakdown h4 {
   font-size: var(--font-xl);
   margin-bottom: var(--space-md);
   color: var(--text-primary);
}

.results-breakdown ul,
.results-breakdown ol {
   padding-left: var(--space-lg);
   line-height: 1.8;
}

.results-breakdown li {
   margin-bottom: var(--space-sm);
}

.result-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-md);
   margin-top: var(--space-lg);
}

@media (min-width: 768px) {
   .result-grid {
      grid-template-columns: 1fr 1fr;
   }
}

.result-item {
   padding: var(--space-md);
   background: var(--bg-secondary);
   border-radius: var(--border-radius);
   text-align: center;
}

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

.result-item-value {
   display: block;
   font-size: var(--font-2xl);
   font-weight: 700;
   color: var(--text-primary);
}

/* ============================================
   PAGE COMPONENTS
   ============================================ */
.page-header {
   text-align: center;
   padding: var(--space-3xl) var(--space-lg);
   background: var(--bg-secondary);
   margin-bottom: var(--space-2xl);
}

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

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

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

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

.content-main {
   flex: 1;
}

.content-sidebar {
   position: sticky;
   top: var(--space-2xl);
   height: fit-content;
}

.content-section {
   margin-bottom: var(--space-3xl);
}

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

.content-section h3 {
   font-size: var(--font-xl);
   margin-bottom: var(--space-md);
   margin-top: var(--space-lg);
   color: var(--text-primary);
   font-weight: 600;
}

.content-section p {
   line-height: 1.8;
   margin-bottom: var(--space-lg);
   color: var(--text-primary);
}

.content-section ul,
.content-section ol {
   padding-left: var(--space-xl);
   line-height: 1.8;
   margin-bottom: var(--space-lg);
}

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

.content-section strong {
   color: var(--brand-primary);
   font-weight: 600;
}

/* ============================================
   WIDGETS
   ============================================ */
.widget {
   background: var(--bg-primary);
   padding: var(--space-xl);
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow-md);
   margin-bottom: var(--space-xl);
}

.widget-title {
   font-size: var(--font-xl);
   margin-bottom: var(--space-lg);
   font-weight: 700;
   color: var(--text-primary);
}

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

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

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

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

.widget-list a:hover {
   color: var(--brand-primary);
   padding-left: var(--space-sm);
}

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

.breadcrumbs a {
   color: var(--text-secondary);
   text-decoration: none;
   transition: var(--transition-base);
}

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

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

/* ============================================
   HEADER
   ============================================ */
.site-header {
   background: var(--bg-primary);
   border-bottom: 1px solid var(--border-color);
   padding: var(--space-lg) 0;
   position: sticky;
   top: 0;
   z-index: 1000;
   box-shadow: var(--shadow-sm);
}

.header-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.site-logo img {
   max-width: 200px;
   height: auto;
   display: block;
}

.site-logo a {
   text-decoration: none;
   color: var(--text-primary);
   font-size: var(--font-2xl);
   font-weight: 700;
}

.mobile-menu-toggle {
   display: none;
   flex-direction: column;
   gap: 4px;
   background: none;
   border: none;
   cursor: pointer;
   padding: var(--space-sm);
}

.mobile-menu-toggle .hamburger {
   width: 25px;
   height: 3px;
   background: var(--text-primary);
   transition: var(--transition-base);
}

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

.nav-menu li {
   position: relative;
}

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

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

.nav-menu .sub-menu {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   background: var(--bg-primary);
   box-shadow: var(--shadow-lg);
   border-radius: var(--border-radius);
   min-width: 200px;
   padding: var(--space-sm) 0;
   list-style: none;
   margin: 0;
}

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

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

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

.footer-column p {
   color: rgba(255, 255, 255, 0.8);
   line-height: 1.6;
}

.footer-title {
   font-size: var(--font-xl);
   margin-bottom: var(--space-lg);
   font-weight: 700;
}

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

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

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

.footer-menu a:hover {
   color: var(--text-inverse);
   padding-left: var(--space-sm);
}

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

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

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

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

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

.hero-content {
   max-width: 900px;
   margin: 0 auto;
}

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

.hero-subtitle {
   font-size: var(--font-xl);
   color: var(--text-secondary);
   margin-bottom: var(--space-2xl);
   line-height: 1.5;
}

.hero-cta {
   display: flex;
   gap: var(--space-lg);
   justify-content: center;
   margin-bottom: var(--space-3xl);
   flex-wrap: wrap;
}

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

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

.trust-number {
   display: block;
   font-size: var(--font-3xl);
   font-weight: 700;
   color: var(--brand-primary);
}

.trust-label {
   display: block;
   font-size: var(--font-base);
   color: var(--text-secondary);
   margin-top: var(--space-xs);
}

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

.tool-item {
   background: var(--bg-primary);
   padding: var(--space-xl);
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow-md);
   transition: var(--transition-base);
   text-align: center;
   border: 2px solid transparent;
}

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

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

.tool-item h3 {
   font-size: var(--font-xl);
   margin-bottom: var(--space-md);
   color: var(--text-primary);
}

.tool-item h3 a {
   color: var(--text-primary);
   text-decoration: none;
   transition: var(--transition-base);
}

.tool-item h3 a:hover {
   color: var(--brand-primary);
}

.tool-item p {
   color: var(--text-secondary);
   line-height: 1.6;
   margin-bottom: var(--space-md);
}

.tool-item > a {
   color: var(--brand-primary);
   text-decoration: none;
   font-weight: 600;
   transition: var(--transition-base);
}

.tool-item > a:hover {
   color: var(--brand-accent);
}

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

.feature-item {
   text-align: center;
   padding: var(--space-lg);
}

.feature-icon {
   font-size: var(--font-4xl);
   margin-bottom: var(--space-lg);
}

.feature-item h3 {
   font-size: var(--font-xl);
   margin-bottom: var(--space-sm);
   color: var(--text-primary);
}

.feature-item p {
   color: var(--text-secondary);
   line-height: 1.6;
}

/* Blog Section on Homepage */
.blog-preview {
   padding: var(--space-3xl) 0;
}

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

.blog-item {
   background: var(--bg-primary);
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow-md);
   transition: var(--transition-base);
   overflow: hidden;
}

.blog-item:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-lg);
}

.blog-item-image {
   width: 100%;
   height: 200px;
   object-fit: cover;
}

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

.blog-item-title {
   font-size: var(--font-xl);
   margin-bottom: var(--space-sm);
   color: var(--text-primary);
}

.blog-item-title a {
   color: var(--text-primary);
   text-decoration: none;
   transition: var(--transition-base);
}

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

.blog-item-excerpt {
   color: var(--text-secondary);
   line-height: 1.6;
   margin-bottom: var(--space-md);
}

.blog-item-meta {
   font-size: var(--font-sm);
   color: var(--text-muted);
}

/* ============================================
   AD SPACES
   ============================================ */
.ad-space {
   margin: var(--space-xl) 0;
   text-align: center;
   min-height: 90px;
   background: var(--bg-muted);
   border-radius: var(--border-radius);
   display: flex;
   align-items: center;
   justify-content: center;
}

.ad-header {
   min-height: 90px; /* 728x90 Leaderboard */
}

.ad-content {
   min-height: 280px; /* 336x280 Large Rectangle */
}

.ad-sidebar {
   min-height: 250px; /* 300x250 Medium Rectangle */
}

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

.notice-success {
   background: #D4EDDA;
   border-color: var(--color-success);
   color: #155724;
}

.notice-info {
   background: #D1ECF1;
   border-color: var(--color-info);
   color: #0C5460;
}

.notice-warning {
   background: #FFF3CD;
   border-color: var(--color-warning);
   color: #856404;
}

.notice-danger {
   background: #F8D7DA;
   border-color: var(--color-danger);
   color: #721C24;
}

/* ============================================
   UTILITIES
   ============================================ */
.text-center {
   text-align: center;
}

.text-left {
   text-align: left;
}

.text-right {
   text-align: right;
}

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

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

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

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

.hidden {
   display: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1023px) {
    .mobile-menu-toggle {
       display: flex;
    }

    .main-navigation {
       display: none;
       position: fixed;
       top: 0;
       right: 0;
       width: 280px;
       height: 100vh;
       background: var(--bg-primary);
       box-shadow: var(--shadow-lg);
       padding: var(--space-3xl) var(--space-xl);
       overflow-y: auto;
    }

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

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

    .nav-menu .sub-menu {
       position: static;
       box-shadow: none;
       padding-left: var(--space-lg);
    }
}

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

    .site-logo img {
       max-width: 150px;
    }

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

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

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

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

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

    .trust-signals {
       gap: var(--space-xl);
    }

    .hero-cta {
       flex-direction: column;
       align-items: stretch;
    }

    .result-value {
       font-size: var(--font-3xl);
    }
}

@media (max-width: 479px) {
    .site-logo img {
       max-width: 120px;
    }

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

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

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

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

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .site-header,
    .site-footer,
    .ad-space,
    .widget,
    .hero-cta,
    .mobile-menu-toggle {
       display: none;
    }

    .app-results {
       border: 2px solid #000;
    }
}