/*
Theme Name: Katha Varnika
Author: Ashok Badugu
Description: Katha Varnika is a modern storytelling and reading-focused WordPress theme designed for publishing fictional, romantic, and general stories. It supports both free and premium story access, integrates seamlessly with membership and payment systems, and provides an immersive reading experience with clean typography, dark mode support, and bookmark features. Ideal for writers, story publishers, and content platforms offering exclusive paid content.
Version: 1.0
Template: hello-elementor

This is the child theme for Hello Elementor theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/

/* ==================== PREMIUM DESIGN SYSTEM ==================== */

:root {
  --primary: #0F172A;
  --primary-dark: #020617;
  --primary-light: #334155;
  --secondary: #F97316;
  --accent: #F97316;
  --text-dark: #0F172A;
  --text-light: #64748B;
  --border-light: #E5E7EB;
  --bg-light: #F8FAFC;
  --bg-lighter: #F1F5F9;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --transition: all 0.25s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  color: var(--text-dark);
  background: #ffffff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ==================== TOP BAR ==================== */

.top-bar {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.top-bar-left {
  display: flex;
  gap: 16px;
}

.top-bar-left a {
  color: #ffffff;
  font-size: 16px;
  transition: var(--transition);
  opacity: 0.8;
}

.top-bar-left a:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.top-bar-right {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #ffffff;
  font-size: 13px;
}

.top-user {
  opacity: 0.9;
  font-weight: 500;
}

.top-login,
.top-logout {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  transition: var(--transition);
}

.top-login:hover,
.top-logout:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ==================== HEADER ==================== */

#header {
  background: #ffffff;
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  padding: 18px 0;
}

.header .logo {
  font-size: 26px;
  font-weight: 800;
  color: var(--primary);
  text-decoration: none;
  letter-spacing: -0.5px;
}

.header .logo:hover {
  color: var(--primary-dark);
}

#header .navbar {
  padding: 0 !important;
}

#header .navbar-nav .nav-link {
  color: var(--text-dark) !important;
  font-weight: 500;
  font-size: 15px;
  padding: 8px 16px !important;
  margin: 0 4px;
  border-radius: 6px;
  transition: var(--transition);
  position: relative;
}

#header .navbar-nav .nav-link:hover,
#header .navbar-nav .nav-link.active {
  color: var(--primary) !important;
  background: rgba(124, 58, 237, 0.08);
}

#header .navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: var(--transition);
  transform: translateX(-50%);
}

#header .navbar-nav .nav-link:hover::after,
#header .navbar-nav .nav-link.active::after {
  width: calc(100% - 32px);
}

/* ==================== BUTTONS ==================== */

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border: none;
  padding: 12px 28px;
  font-weight: 600;
  border-radius: 8px;
  transition: var(--transition);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
}

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

.btn-outline-primary {
  border: 2px solid var(--primary);
  color: var(--primary);
  background: transparent;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 24px;
  transition: var(--transition);
}

.btn-outline-primary:hover {
  background: var(--primary);
  color: #ffffff;
}

/* ==================== CARDS & CONTAINERS ==================== */

.card {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  background: #ffffff;
  overflow: hidden;
}

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

.card-header {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(236, 72, 153, 0.08));
  border-bottom: 1px solid var(--border-light);
  padding: 20px;
  font-weight: 700;
  color: var(--primary);
}

.card-body {
  padding: 24px;
}

/* ==================== FOOTER ==================== */

footer {
  background: linear-gradient(135deg, var(--text-dark) 0%, #374151 100%);
  color: #ffffff;
  padding: 48px 0 24px;
  margin-top: 60px;
}

footer .footer-link {
  color: #d1d5db;
  text-decoration: none;
  transition: var(--transition);
  font-size: 14px;
}

footer .footer-link:hover {
  color: var(--primary-light);
}

footer h5 {
  font-weight: 700;
  margin-bottom: 16px;
  color: #ffffff;
  font-size: 16px;
}

footer .footer-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 32px;
  padding-top: 24px;
  color: #9ca3af;
  font-size: 13px;
}

/* ==================== FORMS & INPUTS ==================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select {
  border: 2px solid var(--border-light);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: inherit;
  transition: var(--transition);
  font-size: 14px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

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

/* ==================== TYPOGRAPHY ==================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
}

h1 { font-size: 42px; margin-bottom: 24px; }
h2 { font-size: 32px; margin-bottom: 20px; }
h3 { font-size: 24px; margin-bottom: 18px; }
h4 { font-size: 18px; margin-bottom: 16px; }
h5 { font-size: 16px; margin-bottom: 12px; }
h6 { font-size: 14px; margin-bottom: 10px; }

p {
  margin-bottom: 16px;
  color: var(--text-light);
  font-size: 15px;
}

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

a:hover {
  color: var(--primary-dark);
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }
  
  .top-bar-inner {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  
  #header {
    padding: 14px 0;
  }
}