/*
Theme Name:   Dainik Loan GP Child
Theme URI:    https://dainikloan.com
Description:  GeneratePress child theme for Dainik Loan — Hindi loan comparison portal.
Author:       Vijay Singh
Author URI:   https://vijaysingh.in
Template:     generatepress
Version:      1.0.0
Text Domain:  dainikloan-child
*/

:root{
  --bg:#F7FAF9;
  --white:#FFFFFF;
  --ink:#12241F;
  --ink-soft:#5B6B67;
  --teal:#00A878;
  --teal-dark:#00875F;
  --teal-tint:#E6F7F1;
  --coral:#FF6B4A;
  --line:#E7EEEC;
  --shadow:0 8px 24px rgba(18,36,31,0.06);
  --shadow-lg:0 20px 45px rgba(18,36,31,0.10);
}
*{box-sizing:border-box;}
body{ background:var(--bg); color:var(--ink); font-family:'Hind',sans-serif; margin:0; }
h1,h2,h3,h4,.display{ font-family:'Poppins',sans-serif; }
.mono{ font-family:'IBM Plex Mono',monospace; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} }

/* ===== HEADER ===== */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.header-inner{ max-width:1160px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; }
.logo{ display:flex; align-items:center; gap:10px; }
.logo-mark{ width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--teal),var(--teal-dark)); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.logo-mark svg{ width:20px; height:20px; }
.logo-text{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.25rem; color:var(--ink); }
.badge{ background:var(--teal-tint); color:var(--teal-dark); font-size:0.68rem; font-weight:700; padding:3px 9px; border-radius:20px; margin-left:8px; vertical-align:middle; }
.primary-nav{ display:flex; gap:26px; }
.primary-nav ul{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.primary-nav a{ font-size:0.92rem; font-weight:600; color:var(--ink-soft); padding:8px 0; position:relative; }
.primary-nav a:hover, .primary-nav .current-menu-item a{ color:var(--teal-dark); }
.primary-nav .current-menu-item a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--teal); border-radius:2px; }
.header-cta{ display:flex; gap:10px; }
.btn-primary{ background:var(--teal); color:#fff; font-weight:700; font-size:0.88rem; padding:11px 20px; border-radius:10px; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease; display:inline-block; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); color:#fff; }
.btn-ghost{ font-weight:700; font-size:0.88rem; padding:11px 18px; border-radius:10px; color:var(--ink); border:1px solid var(--line); display:inline-block; }

/* ===== MOBILE MENU ===== */
.hamburger{
  display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--line);
  background:#fff; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.hamburger span{ display:block; position:relative; width:18px; height:2px; background:var(--ink); border-radius:2px; }
.hamburger span::before, .hamburger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease, top .2s ease; }
.hamburger span::before{ top:-6px; }
.hamburger span::after{ top:6px; }
.hamburger.open span{ background:transparent; }
.hamburger.open span::before{ top:0; transform:rotate(45deg); }
.hamburger.open span::after{ top:0; transform:rotate(-45deg); }

.mobile-drawer{ position:fixed; inset:0; z-index:100; display:none; }
.mobile-drawer.open{ display:block; }
.mobile-drawer .overlay{ position:absolute; inset:0; background:rgba(18,36,31,0.45); opacity:0; transition:opacity .25s ease; }
.mobile-drawer.open .overlay{ opacity:1; }
.mobile-drawer .panel{
  position:absolute; top:0; right:0; height:100%; width:min(78vw, 320px);
  background:#fff; box-shadow:-10px 0 30px rgba(18,36,31,0.15);
  transform:translateX(100%); transition:transform .28s ease;
  display:flex; flex-direction:column; padding:20px 22px; overflow-y:auto;
}
.mobile-drawer.open .panel{ transform:translateX(0); }
.mobile-drawer .panel-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.mobile-drawer .close-btn{ width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--bg); display:flex; align-items:center; justify-content:center; }
.mobile-drawer nav{ display:flex; flex-direction:column; gap:4px; }
.mobile-drawer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.mobile-drawer nav a{ display:block; padding:14px 6px; font-size:1rem; border-bottom:1px solid var(--line); }
.mobile-drawer .drawer-cta{ margin-top:24px; display:flex; flex-direction:column; gap:10px; }
.mobile-drawer .drawer-cta a{ text-align:center; }
body.no-scroll{ overflow:hidden; }

/* ===== HERO ===== */
.hero{ padding:64px 24px 44px; text-align:center; background:radial-gradient(60% 60% at 50% 0%, var(--teal-tint) 0%, transparent 70%); }
.hero h1{ font-size:clamp(1.9rem,4.4vw,3rem); font-weight:800; line-height:1.35; max-width:760px; margin:0 auto 18px; }
.hero h1 .hl{ color:var(--teal-dark); }
.hero p{ max-width:560px; margin:0 auto 30px; color:var(--ink-soft); font-size:1.02rem; line-height:1.7; }
.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.btn-lg{ padding:14px 26px; border-radius:12px; font-weight:700; font-size:0.96rem; }
.btn-outline-lg{ padding:14px 26px; border-radius:12px; font-weight:700; font-size:0.96rem; border:1.5px solid var(--teal); color:var(--teal-dark); background:#fff; display:inline-block; }

.trust-row{ display:flex; gap:28px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.trust-item{ display:flex; align-items:center; gap:8px; font-size:0.85rem; color:var(--ink-soft); font-weight:600; }
.trust-item .dot{ width:8px; height:8px; border-radius:50%; background:var(--teal); }

/* ===== EMI CALCULATOR CARD ===== */
.section{ padding:60px 24px; max-width:1160px; margin:0 auto; }
.calc-card{ max-width:720px; margin:0 auto; background:#fff; border-radius:22px; box-shadow:var(--shadow-lg); padding:38px 36px; border:1px solid var(--line); }
.calc-title{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.1rem; margin-bottom:28px; }
.calc-title .ic{ width:34px; height:34px; border-radius:9px; background:var(--teal-tint); display:flex; align-items:center; justify-content:center; }
.field{ margin-bottom:26px; }
.field-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.field-top label{ font-size:0.88rem; font-weight:600; color:var(--ink-soft); }
.field-top .val{ font-weight:700; color:var(--teal-dark); font-size:1rem; }
input[type=range]{ width:100%; -webkit-appearance:none; height:6px; background:var(--line); border-radius:6px; outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--teal); border:3px solid #fff; box-shadow:0 2px 8px rgba(0,168,120,0.45); cursor:pointer; }
input[type=range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--teal); border:3px solid #fff; box-shadow:0 2px 8px rgba(0,168,120,0.45); cursor:pointer; }
.range-labels{ display:flex; justify-content:space-between; font-size:0.72rem; color:var(--ink-soft); margin-top:8px; opacity:0.8; }
.results{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px; }
.result-box{ background:var(--bg); border-radius:14px; padding:16px 18px; }
.result-box .lbl{ font-size:0.78rem; color:var(--ink-soft); font-weight:600; margin-bottom:6px; }
.result-box .amt{ font-weight:700; font-size:1.3rem; color:var(--ink); }
.total-box{ background:linear-gradient(135deg,var(--teal),var(--teal-dark)); color:#fff; border-radius:14px; padding:16px 18px; margin-top:14px; display:flex; justify-content:space-between; align-items:center; }
.total-box .lbl{ font-size:0.82rem; opacity:0.9; font-weight:600; }
.total-box .amt{ font-weight:800; font-size:1.5rem; }
.safe-badge{ display:flex; gap:10px; align-items:flex-start; margin-top:18px; background:var(--teal-tint); border-radius:12px; padding:14px 16px; font-size:0.84rem; color:var(--teal-dark); }
.safe-badge b{ display:block; margin-bottom:2px; }

/* ===== SECTION HEADS ===== */
.section-head{ text-align:center; margin-bottom:40px; }
.section-head .eyebrow{ font-size:0.78rem; font-weight:700; color:var(--teal-dark); letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; }
.section-head h2{ font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; margin:0; }
.section-head p{ color:var(--ink-soft); margin-top:10px; max-width:480px; margin-left:auto; margin-right:auto; }

/* ===== LOAN CARDS ===== */
.loan-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.loan-card{ background:#fff; border-radius:18px; padding:26px 22px; border:1px solid var(--line); box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease; }
.loan-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.loan-icon{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.loan-icon.i1{ background:#FFF1EC; color:var(--coral); }
.loan-icon.i2{ background:#FFF8E1; color:#C9971F; }
.loan-icon.i3{ background:var(--teal-tint); color:var(--teal-dark); }
.loan-icon.i4{ background:#EFF0FF; color:#5B5FEF; }
.loan-card h4{ font-weight:700; font-size:1.02rem; margin-bottom:6px; margin-top:0; }
.loan-card .desc{ font-size:0.82rem; color:var(--ink-soft); margin-bottom:18px; min-height:38px; line-height:1.5; }
.loan-card .rate-line{ display:flex; justify-content:space-between; align-items:baseline; padding-top:14px; border-top:1px solid var(--line); margin-bottom:16px; }
.loan-card .rate-line .lbl{ font-size:0.72rem; color:var(--ink-soft); }
.loan-card .rate-line .rv{ font-weight:800; font-size:1.15rem; color:var(--ink); }
.loan-card .go-btn{ display:block; text-align:center; background:var(--bg); color:var(--ink); font-weight:700; font-size:0.85rem; padding:10px; border-radius:10px; transition:background .15s ease, color .15s ease; }
.loan-card:hover .go-btn{ background:var(--teal); color:#fff; }

/* ===== ARTICLES ===== */
.article-list{ display:flex; flex-direction:column; gap:16px; }
.article-row{ display:grid; grid-template-columns:120px 1fr auto; gap:20px; align-items:center; background:#fff; border-radius:16px; padding:18px 22px; border:1px solid var(--line); transition:box-shadow .15s ease; }
.article-row:hover{ box-shadow:var(--shadow); }
.article-date{ text-align:center; background:var(--teal-tint); border-radius:12px; padding:10px 6px; }
.article-date .d{ font-weight:800; font-size:1.3rem; color:var(--teal-dark); line-height:1; }
.article-date .m{ font-size:0.68rem; color:var(--teal-dark); text-transform:uppercase; letter-spacing:0.5px; margin-top:3px; }
.article-body h4{ font-size:0.98rem; font-weight:700; margin:0 0 4px; }
.article-body p{ font-size:0.82rem; color:var(--ink-soft); line-height:1.5; margin:0; }
.article-meta{ font-size:0.75rem; color:var(--ink-soft); white-space:nowrap; }
.no-posts{ text-align:center; color:var(--ink-soft); padding:20px; }


@media (max-width:960px){
  .loan-grid{ grid-template-columns:1fr 1fr; }
@media (max-width:860px){
  .primary-nav{ display:none; }
  .header-cta{ display:none; }
  .hamburger{ display:flex; }
  .header-inner{ padding:14px 16px; }
  .logo-text{ font-size:1.1rem; }
}
@media (max-width:640px){
  .hero{ padding:44px 18px 34px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions a{ width:100%; text-align:center; }
  .trust-row{ gap:14px 20px; }
  .section{ padding:44px 18px; }
  .calc-card{ padding:22px 18px; border-radius:18px; }
  .results{ grid-template-columns:1fr; }
  .total-box{ flex-direction:column; align-items:flex-start; gap:6px; }
  .loan-grid{ grid-template-columns:1fr; }
  .article-row{ grid-template-columns:56px 1fr; padding:14px 16px; gap:14px; }
  .article-date{ padding:8px 4px; }
  .article-date .d{ font-size:1.1rem; }
  .article-meta{ display:none; }
}
:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.sticky-footer{
	display:none !important;
}
@media (max-width: 768px){
	.sticky-footer{
	display:flex !important;
	position: sticky;
    bottom: 0;
    background-color: #f2f7f5;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 5px;
}	
}
	@media (min-width: 1024px) 
	.sticky-footer{
  .desktop-element {
    display: none;
  }
		}
}