/* =========================================================
   TELUGU PANCHANG - FINAL CLEAN CSS (DARK/LIGHT READY)
========================================================= */

/* =========================
   FONTS
========================= */
@import url('https://fonts.googleapis.com/css2?family=NTR&display=swap');

@font-face {
  font-family: "Noto Serif Telugu";
  src: url("/assets/NotoSerifTelugu-VariableFont_wght.ttf") format("truetype");
  font-display: swap;
}

/* =========================
   ROOT VARIABLES
========================= */
:root {
  --font-body: "Noto Serif Telugu", sans-serif;
  --font-heading: "NTR", sans-serif;

  --bg: #f6f7fb;
  --text: #6c6c6c;
  --heading: #1f1f1f;

  --card-bg: #ffffff;
  --card-text: #6c6c6c;
  --card-heading: #1f1f1f;
  --card-border: rgba(0,0,0,0.06);
  --card-shadow: 0 4px 20px rgba(0,0,0,0.08);

  --header-bg: #ffffff;
  --header-text: #1f1f1f;

  --footer-bg: rgba(249,249,249,0.98);
  --footer-text: #1f1f1f;

  --highlight: #DA4453;
}

/* =========================
   DARK MODE
========================= */
body.theme-dark {
  --bg: #0b0b0f;
  --text: #c7c7cc;
  --heading: #ffffff;

  --card-bg: #21252a;
  --card-text: #e5e7eb;
  --card-heading: #ffffff;
  --card-border: rgba(255,255,255,0.06);
  --card-shadow: 0 4px 20px rgba(0,0,0,0.35);

  --header-bg: #21252a;
  --header-text: #ffffff;

  --footer-bg: #21252a;
  --footer-text: #ffffff;
}

/* =========================
   BASE
========================= */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.8;
  background: var(--bg);
  color: var(--text);
}

/* =========================
   TYPOGRAPHY
========================= */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  color: var(--heading);
  margin-bottom: 8px;
}

p {
  margin-bottom: 20px;
}

/* =========================
   HEADER
========================= */
.header {
  position: fixed;
  top:0; left:0; right:0;
  height:50px;
  z-index:100;
  background: var(--header-bg);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.header-title {
  text-align:center;
  line-height:50px;
  color: var(--header-text);
}

/* =========================
   FOOTER
========================= */
#footer-bar {
  position: fixed;
  bottom:0; left:0; right:0;
  height:60px;
  display:flex;
  background: var(--footer-bg);
}

#footer-bar a {
  flex:1;
  text-align:center;
  padding-top:10px;
  color: var(--footer-text);
}

/* =========================
   CONTENT
========================= */
.content {
  padding:20px;
}

.content-box {
  background: var(--card-bg);
  border-radius:16px;
  margin:15px;
  box-shadow: var(--card-shadow);
}

.content-box .content {
  padding:20px;
}

.content-box h1,
.content-box h2,
.content-box h3 {
  color: var(--card-heading);
}

.content-box p,
.content-box span,
.content-box em {
  color: var(--card-text);
}

/* =========================
   CARD STYLE (HORA UI)
========================= */
.card {
  
  border-radius:16px;
  margin:15px;
  box-shadow: var(--card-shadow);
}

 

.card .content {
  padding:20px;
}

.card h1 {
  text-align:center;
}

.card em {
  display:block;
  text-align:center;
}

/* =========================
   LISTS
========================= */
.list-group a {
  display:block;
  padding:12px;
  border-bottom:1px solid var(--card-border);
  color: var(--card-heading);
}

.list-group a:last-child {
  border-bottom:none;
}

/* =========================
   BUTTON
========================= */
.btn {
  background: var(--highlight);
  color:#fff;
  padding:10px 15px;
  border-radius:8px;
}

/* =========================
   INPUTS
========================= */
input,select,textarea {
  width:100%;
  border:none;
  border-bottom:1px solid var(--card-border);
  background:transparent;
  color: var(--text);
}

/* =========================
   DARK FIXES
========================= */
.theme-dark input {
  color:#fff;
}

/* =========================
   UTILITIES
========================= */
.text-center { text-align:center; }
.mt-4 { margin-top:20px; }
.mb-3 { margin-bottom:15px; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width:768px) {
  h1 { font-size:20px; }
}