/*
Theme Name: Deep Drishti
Text Domain: deep-drishti
Version: 1.0.1
Author: Deep Drishti
Description: Custom Marathi news + catalog theme.
*/

/* ===========================
   🎨 मूळ सेटिंग (Global)
   =========================== */
:root{
  --header-bg: #fff;                /* 🟡 हेडरचा बॅकग्राऊंड रंग */
  --header-height-mobile: 130px;    /* 📱 मोबाईलसाठी उंची */
  --header-height-desktop: 120px;   /* 💻 डेस्कटॉपसाठी उंची */
  --header-border: #ddd;            /* 🔲 खालील बॉर्डर रंग */
  --drawer-bg: #550000;             /* 🧱 साइडबारचा रंग */
  --overlay-bg: rgba(112,66,20,0.55); /* ☁️ ओव्हरले रंग */
}

/* ===========================
   🧱 १) हेडरचा मूळ भाग
   =========================== */
.top-block{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  width: 100%;
  background: var(--header-bg) !important; /* 🔸 बॅकग्राऊंड रंग */
  border-bottom: 1px solid var(--header-border); /* 🔹 खाली बॉर्डर */
  z-index: 999999;
  padding: 8px 10px !important; /* 🔸 वर-खाली/डावी-उजवी padding */
}

/* 📄 मुख्य पेज कंटेंट हेडर खाली ढकलण्यासाठी */
body{ padding-top: var(--header-height-mobile) !important; }

/* ===========================
   🖼️ २) लोगो सेटिंग
   =========================== */
/* 👇 लोगोचा साईज आणि पोझिशन बदलण्यासाठी */
.top-block img{
  max-height: 50px !important;   /* 🟢 लोगोची उंची */
  margin-top: 4px;               /* वरून अंतर */
  margin-bottom: 6px;            /* खाली अंतर */
  margin-left: auto;             /* डावीकडे हालवण्यासाठी */
  margin-right: auto;            /* उजवीकडे हालवण्यासाठी */
  display: block;
}

/* ===========================
   🏷️ ३) कंपनी नाव (site title)
   =========================== */
/* 👇 शीर्षक (दीप दृष्टि) स्टाइल */
.site-title{
  font-size: 18px !important;    /* अक्षराचा साईज */
  font-weight: 700;
  text-align: center;
  color: #111;                   /* रंग */
  margin-top: 2px;               /* वरून अंतर */
  margin-bottom: 6px;            /* खाली अंतर */
}

/* ===========================
   ☰ ४) मेनू बटण
   =========================== */
#dd-menu-btn{
  font-size: 28px;               /* बटण साईज */
  color: #000;                   /* रंग */
  background: none;
  border: none;
  padding: 4px 6px;
  margin-left: 10px;             /* डावी बाजू */
}

/* ===========================
   🔍 ५) सर्च बार
   =========================== */
.search-wrap{
  position: absolute;
  top: 70px;       /* वरून अंतर */
  left: 70px;      /* डावीकडून अंतर */
  width: 320px;    /* रुंदी */
  height: 38px;    /* उंची */
  display: flex;
  align-items: center;
}
.search-field{ height: 100%; }
.search-submit{
  height: 100%;
  padding: 0 12px;
  background: #ff9800;   /* सर्च बटण रंग */
  color: white;
  border-radius: 6px;
}

/* ===========================
   🪟 ६) साइडबार (Drawer)
   =========================== */
#dd-drawer{
  position: fixed;
  top: var(--header-height-mobile);
  left: 0;
  width: 75%;
  max-width: 360px;
  background: var(--drawer-bg);
  transform: translateX(-101%);
  transition: transform .25s ease;
}
.dd-menu-open #dd-drawer{
  transform: translateX(0);
}

/* ओव्हरले रंग */
#dd-overlay{
  background: var(--overlay-bg);
  position: fixed;
  left: 0; right: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.dd-menu-open #dd-overlay{
  opacity: 1;
  pointer-events: auto;
}

/* ===========================
   📱 ७) मोबाईल व्ह्यू
   =========================== */
@media (max-width:768px){

  /* हेडर उंची */
  body{ padding-top: var(--header-height-mobile) !important; }

  /* लोगो */
  .top-block img{
    max-height: 40px !important;   /* मोबाईलसाठी कमी उंची */
  }

  /* शीर्षक */
  .site-title{ font-size: 12px !important; 
	position: fixed;
  left: 50px; 
 top: 50px;}
	
	  #dd-menu-btn{
  font-size: 28px;               /* बटण साईज */
  color: #000;                   /* रंग */
  background: none;
  border: none;
  padding: 4px 6px;
  margin-left: 10px;             /* डावी बाजू */
}
	}
	
	
	
	
	
	
	
	
	
	

  /* सर्च */
  .search-wrap{
    top: 60%;
    left: 40px;
    width: 240px;
  }
}

/* ===========================
   💻 ८) डेस्कटॉप व्ह्यू
   =========================== */
@media (min-width:992px){

  body{ padding-top: var(--header-height-desktop) !important; }

  .top-block{
    padding: 12px 14px;
  }

  .site-title{
    font-size: 22px;
}
	.dd-menu-btn{
  font-size: 28px;               /* बटण साईज */
  color: #000;                   /* रंग */
  background: none;
  border: none;
  padding: 4px 6px;
  margin-left: 10px;             /* डावी बाजू */
}
  }

  .search-wrap{
    top: 60px;
    left: 120px;
    width: 350px;
  }
}