/* ==========================================================================
   Pages.css - Styling for inner pages matching fontsinhindi.com
   ========================================================================== */

:root {
  --paper:    #F2F7EF;
  --paper-2:  #E3EFDD;
  --card:     #FBFDF8;
  --ink:      #14271B;
  --ink-soft: #364A3D;
  --muted:    #7B8C7E;
  --accent:   #138A5C;
  --accent-2: #7FB23E;
  --forest:   #0B5C2C;
  --line:     rgba(20,39,27,0.14);
  --line-2:   rgba(20,39,27,0.08);
  --radius:   4px;
  --display:  'Fraunces', Georgia, serif;
  --body:     'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono:     'Space Mono', ui-monospace, monospace;
  --deva:     'Mandali', 'Peddana', 'Anek Telugu', serif;
  --shadow:   0 18px 50px -28px rgba(20,39,27,0.45);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content:""; position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--accent); color: var(--paper); }
a { color: var(--accent); text-decoration: none; }

/* ── Header ── */
.header {
  background: #F0F4EC;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 0.8rem 1.6rem;
  position: sticky; top: 0; z-index: 1000;
}
.header-content { display:flex; align-items:center; gap:16px; max-width:1400px; margin:0 auto; width:100%; }
.header-left { display:flex; align-items:center; gap:14px; }
.header-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
.nav-toggle, .share-btn {
  background:none; border:1px solid var(--line); width:42px; height:42px;
  border-radius:50%; font-size:1.02rem; cursor:pointer; color:var(--ink);
  display:grid; place-items:center; transition:all .25s ease;
}
.nav-toggle:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.share-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.logo { display:flex; flex-direction:column; line-height:1.05; }
.logo a { font-family: var(--display); font-weight:600; font-size:1.4rem; color:var(--forest); text-decoration:none; letter-spacing:-.01em; }
.logo small { font-family: var(--mono); font-size:.56rem; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); margin-top:2px; }
.header-tag { font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); display:none; }
@media(min-width:1200px){ .header-tag{ display:block; } }

/* ── Desktop Header Navigation ── */
.desktop-nav {
  display: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 12px;
}
.desktop-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: 6px;
  transition: color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.desktop-nav-link i {
  font-size: 0.92rem;
  color: var(--muted);
  transition: color 0.2s ease, transform 0.2s ease;
}
.desktop-nav-link:hover {
  background: transparent;
  color: var(--forest);
  transform: translateY(-1px);
}
.desktop-nav-link:hover i {
  color: var(--accent);
  transform: scale(1.1);
}
.desktop-nav-link.active {
  background: transparent !important;
  color: var(--forest) !important;
  font-weight: 750;
  border: none !important;
  box-shadow: none !important;
}
.desktop-nav-link.active i {
  color: var(--forest) !important;
}

/* Dropdown in Desktop Nav */
.desktop-dropdown {
  position: relative;
  display: inline-block;
}
.desktop-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.desktop-dropdown-btn i {
  font-size: 0.78rem;
  color: var(--muted);
  transition: transform 0.2s ease, color 0.2s ease;
}
.desktop-dropdown:hover .desktop-dropdown-btn {
  background: transparent;
  color: var(--forest);
  transform: translateY(-1px);
}
.desktop-dropdown:hover .desktop-dropdown-btn i {
  transform: rotate(180deg);
  color: var(--accent);
}
.desktop-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 195px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 36px -8px rgba(20, 39, 27, 0.22);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.2s ease;
  z-index: 1002;
}
.desktop-dropdown:hover .desktop-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.desktop-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.18s ease;
}
.desktop-dropdown-menu a i {
  width: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}
.desktop-dropdown-menu a:hover,
.desktop-dropdown-menu a.active {
  background: var(--paper-2);
  color: var(--forest);
  transform: translateX(3px);
}
.desktop-dropdown-menu a:hover i,
.desktop-dropdown-menu a.active i {
  color: var(--accent);
}

@media(min-width: 992px) {
  .desktop-nav {
    display: flex;
  }
  .nav-toggle {
    display: none !important;
  }
}

/* ── Side nav ── */
.side-nav {
  position:fixed; top:0; right:-340px; width:320px; height:100vh;
  background:var(--card); border-left:1px solid var(--line);
  transition:right .35s cubic-bezier(.16,1,.3,1); z-index:1001; padding:1.8rem 0; overflow-y:auto;
}
.side-nav.open { right:0; }
.side-nav-header { padding:0 1.8rem 1.4rem; margin-bottom:1rem; border-bottom:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:center; }
.side-nav .logo { font-family:var(--display); font-weight:600; font-size:1.15rem; color:var(--ink); flex-direction:row; align-items:center; gap:.5rem; }
.close-nav { background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--accent); }
.nav-links { list-style:none; }
.nav-links a { display:flex; align-items:center; gap:.7rem; padding:.85rem 1.8rem; color:var(--ink-soft); text-decoration:none; font-weight:500; border-left:3px solid transparent; transition:all .2s ease; }
.nav-links a i { color:var(--muted); width:18px; text-align:center; }
.nav-links a:hover, .nav-links a.active { background:var(--paper-2); border-left-color:var(--accent); color:var(--ink); }
.nav-links a:hover i, .nav-links a.active i { color:var(--accent); }
.nav-links .others { font-family:var(--mono); font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); padding:1.2rem 1.8rem .4rem; }
.overlay { position:fixed; inset:0; background:rgba(20,39,27,.4); backdrop-filter:blur(3px); z-index:1000; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.overlay.open { opacity:1; pointer-events:auto; }

/* ── Page Hero ── */
.main-content { max-width:1400px; margin:0 auto; padding:0 1.2rem; }
.page-hero {
  position:relative; text-align:center; padding:3.5rem 1rem 2rem;
  overflow:hidden;
}
.hero-glyph {
  position:absolute; top:45%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--deva); font-size:24rem; color:rgba(20,39,27,0.03);
  font-weight:700; pointer-events:none; user-select:none; line-height:1; z-index:0;
}
.page-hero-inner { position:relative; z-index:1; max-width:900px; margin:0 auto; }
.eyebrow {
  display:inline-block; font-family:var(--mono); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin-bottom:1rem;
  background:rgba(19,138,92,0.08); padding:4px 14px; border-radius:30px;
}
.page-hero-inner h1 {
  font-family:var(--display); font-size:clamp(1.85rem, 4.2vw, 3.2rem);
  font-weight:600; color:var(--forest); letter-spacing:-.02em; line-height:1.18; margin-bottom:.8rem;
}
.page-hero-inner h1 em { font-style:normal; color:var(--accent); }
.lead {
  font-size:1.02rem; color:var(--ink-soft); max-width:680px; margin:0 auto 1.2rem; line-height:1.6;
}
.breadcrumb {
  font-family:var(--mono); font-size:.78rem; color:var(--muted);
}
.breadcrumb a { color:var(--accent); }

/* ── Container ── */
.container.narrow { max-width:1100px; margin:2rem auto; padding:0 1rem; }
.container h2 {
  font-family:var(--display); font-size:1.6rem; color:var(--forest); margin:1.5rem 0 .8rem;
}
.container p {
  font-size:.98rem; color:var(--ink-soft); margin-bottom:1rem; line-height:1.65;
}

/* ── CTA Box ── */
.cta {
  background: #E3EFDD;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  max-width: 1100px;
  margin: 3.5rem auto 2rem;
}
.cta h2 { font-family: var(--display); font-size: 1.5rem; color: var(--forest); margin-bottom: 0.5rem; }
.cta p { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 1.5rem; max-width: 600px; margin-left: auto; margin-right: auto; }
.btn-cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px;
  background: var(--forest); color: #fff; border-radius: 30px; font-weight: 600;
  font-size: 0.92rem; text-decoration: none; transition: background 0.2s ease;
}
.btn-cta:hover { background: var(--accent); color: #fff; }

/* ── Footer ── */
.site-footer {
  background:#E9F2E4; border-top:1px solid var(--line); padding:3rem 1rem 2rem; margin-top:4rem;
}
.footer-content-centered {
  max-width:1000px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.2rem;
}
.footer-logo-text { font-family:var(--display); font-size:1.5rem; font-weight:700; color:var(--forest); }
.footer-content-centered .side-nav {
  position:static; width:100%; height:auto; background:none; border:none; padding:0; overflow:visible;
}
.footer-content-centered .side-nav-header { display:none; }
.footer-content-centered .nav-links {
  display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem 1.2rem;
}
.footer-content-centered .nav-links a {
  padding:4px 8px; border:none; font-size:.86rem; color:var(--ink-soft);
}
.footer-content-centered .nav-links a:hover { background:none; color:var(--forest); text-decoration:underline; }
.footer-content-centered .others { display:none; }
.footer-disclaimer { font-family:var(--mono); font-size:.75rem; color:var(--muted); }
.footer-divider { width:100%; height:1px; background:var(--line); margin:.5rem 0; }
.footer-copyright { font-family:var(--mono); font-size:.75rem; color:var(--muted); }

/* ── Floating & Modals ── */
.btn-char-map {
  position:fixed; bottom:24px; right:24px; width:48px; height:48px;
  background:var(--forest); color:#fff; border-radius:50%;
  display:grid; place-items:center; font-size:1.2rem; box-shadow:0 4px 15px rgba(11,92,44,0.4);
  z-index:999; border:2px solid #fff; transition:transform .2s ease;
}
.btn-char-map:hover { transform:scale(1.1); color:#fff; }

.custom-modal {
  position:fixed; inset:0; background:rgba(20,39,27,0.5); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:1rem;
  z-index:2000; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.custom-modal.open { opacity:1; pointer-events:auto; }
.custom-modal-content {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; width:100%; max-width:480px;
}
.custom-modal-header {
  padding:1rem 1.4rem; border-bottom:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:center;
}
.custom-modal-title { font-family:var(--display); font-size:1.2rem; color:var(--forest); }
.btn-close-modal { background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--muted); }
.custom-modal-body { padding:1.4rem; }
.social-share-icons { display:flex; justify-content:space-between; gap:8px; margin:1rem 0; }
.social-icon {
  width:40px; height:40px; border-radius:50%; background:var(--paper-2);
  display:grid; place-items:center; color:var(--forest); font-size:1.1rem; text-decoration:none;
}
.social-icon:hover { background:var(--accent); color:#fff; }
.input-group-custom { display:flex; gap:6px; margin-top:1rem; }
.form-control-custom {
  flex:1; padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper); font-family:var(--mono); font-size:.8rem; outline:none;
}
.btn-copy-custom {
  padding:8px 16px; background:var(--forest); color:#fff; border:none; border-radius:var(--radius);
  font-family:var(--mono); font-size:.8rem; cursor:pointer; font-weight:700;
}