/*
Theme Name: Deeni Baatein News
Theme URI: https://deenibaatein.com/
Author: Deeni Baatein
Description: Custom news-portal theme for deenibaatein.com, built from the "deenibaatein-newdesign" HTML/CSS design — dense Hindi/Urdu Islamic news layout with a 3-column homepage, category sections, article pages, and a mobile app-style drawer nav.
Version: 1.0.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: deeni-baatein
*/
/* =========================================================
दीनी बातें — Islamic News & Media Portal
========================================================= */
/* Google Fonts are loaded via wp_enqueue_style() in functions.php as a
proper , discoverable by the browser's preload scanner straight
from the HTML — an @import here would force a slow, fully serial
fetch chain (style.css must download+parse before the browser even
starts the font CSS request) on top of that, so don't duplicate it. */
:root{
--red:#0f9e96;
--red-dark:#0a6e68;
--ink:#1a1a1a;
--text:#222222;
--muted:#6b6b6b;
--line:#e6e6e6;
--bg:#f2f2f2;
--white:#ffffff;
--gold:#c9a227;
--dark:#0d1414;
--dark-2:#131c1c;
--sidebar-bg:#f5faf9;
--radius:4px;
--font-urdu:'Noto Nastaliq Urdu',serif;
--maxw:1320px;
--font:'Noto Sans Devanagari','Poppins','Noto Naskh Arabic',Arial,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
font-family:var(--font);
color:var(--text);
background:var(--bg);
-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 12px;}
.site-main{display:block;padding-top:22px;}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.skip-link{position:fixed;top:-100px;left:8px;z-index:9999;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--radius);transition:top .2s;}
.skip-link:focus{top:8px;}
/* ---------- placeholder image blocks (used only when a post has no featured image) ---------- */
.ph{
position:relative;
width:100%;
display:flex;
align-items:center;
justify-content:center;
color:rgba(255,255,255,.92);
font-size:12px;
font-weight:600;
text-align:center;
padding:6px;
overflow:hidden;
background:linear-gradient(135deg,var(--c1,#0f9e96),var(--c2,#0a3d3a));
border-radius:var(--radius);
}
.ph::before{
content:"";
position:absolute;inset:0;
background:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 10px,transparent 10px 20px);
}
.ph span{position:relative;z-index:1;line-height:1.3;}
.ph.r16-9{aspect-ratio:16/9;}
.ph.r4-3{aspect-ratio:4/3;}
.ph.r1-1{aspect-ratio:1/1;}
.ph.r3-4{aspect-ratio:3/4;}
.ph.r21-9{aspect-ratio:21/9;}
/* Real featured images reuse the same boxes/ratios as .ph but via */
.thumb img,.hero-img img,.article-hero img,.gallery-3 img,.portrait-row img,.video-card img,.popular-grid .thumb img,
.category-hero img,.trend-strip img,.video-row .thumb img,.video-hero-main img,.video-hero-list .thumb img,
.feature > img,.side-list .thumb img{
width:100%;height:100%;object-fit:cover;border-radius:var(--radius);display:block;
}
/* ---------- top utility bar ---------- */
.topbar{
background:var(--dark);
color:#ccc;
font-size:12px;
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:30px;flex-wrap:wrap;gap:4px;}
.topbar .date{color:#999;}
.topbar .links{display:flex;gap:14px;}
.topbar .links a:hover{color:var(--gold);}
/* ---------- header ---------- */
header.site-header{background:var(--white);border-bottom:3px solid var(--red);}
.header-top{
display:flex;align-items:center;justify-content:space-between;
padding:14px 0;
}
.logo{display:flex;align-items:center;gap:10px;}
.logo .mark{width:52px;height:52px;flex:0 0 52px;}
.logo .mark svg{width:100%;height:100%;display:block;}
.logo .mark img{width:100%;height:100%;object-fit:contain;border-radius:50%;}
.header-actions{display:flex;align-items:center;gap:18px;}
.search-box-wrap{position:relative;}
.header-actions .search-box{
display:flex;align-items:center;border:1px solid var(--line);border-radius:20px;padding:6px 14px;background:#fafafa;
}
.header-actions .search-box input{border:none;background:transparent;outline:none;font-size:13px;width:140px;}
.header-actions .search-box button{border:none;background:none;padding:0;display:flex;}
.search-suggestions{
position:absolute;top:calc(100% + 8px);right:0;z-index:70;
width:320px;max-height:380px;overflow-y:auto;
background:#fff;border:1px solid var(--line);border-radius:10px;
box-shadow:0 14px 32px rgba(0,0,0,.14);padding:6px;
}
.search-suggestions__item{
display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;font-size:13px;font-weight:600;color:var(--text);
}
.search-suggestions__item:hover{background:var(--sidebar-bg);}
.search-suggestions__item img,.search-suggestions__ph{
width:40px;height:40px;flex:0 0 40px;border-radius:6px;object-fit:cover;background:var(--sidebar-bg);
display:flex;align-items:center;justify-content:center;font-size:16px;
}
.search-suggestions__empty{padding:14px;text-align:center;font-size:13px;color:var(--muted);}
.icon-btn{
width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;border:none;
}
.header-social{display:flex;align-items:center;gap:8px;}
.lang-switch{
border:1px solid var(--line);border-radius:16px;padding:6px 10px;font-size:12.5px;font-weight:700;
color:var(--text);background:#fafafa;cursor:pointer;
}
@media (max-width:900px){.lang-switch{font-size:11.5px;padding:5px 8px;}}
/* Shared circular badge for every social icon (header/footer/drawer) —
background color is set per platform, icon itself stays white via
currentColor so the same inline SVG works everywhere. */
.social-icon{
display:flex;align-items:center;justify-content:center;
border-radius:50%;color:#fff;flex:0 0 auto;
}
.social-icon svg{width:56%;height:56%;}
.social-icon--whatsapp,.social-icon--whatsapp-channel{background:#25D366;}
.social-icon--instagram{background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);}
.social-icon--facebook,.social-icon--facebook-group{background:#1877F2;}
.social-icon--youtube{background:#FF0000;}
.social-icon:hover{filter:brightness(1.08);}
.header-social .social-icon{width:34px;height:34px;}
.hamburger{display:none;flex-direction:column;gap:4px;cursor:pointer;background:none;border:none;padding:0;}
.hamburger span{width:24px;height:3px;background:var(--ink);border-radius:2px;}
nav.main-nav{background:var(--red);}
nav.main-nav > .wrap{max-width:var(--maxw);margin:0 auto;padding:0 12px;}
nav.main-nav > .wrap > ul{
display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
nav.main-nav > .wrap > ul::-webkit-scrollbar{display:none;}
nav.main-nav li{position:relative;flex:0 0 auto;}
nav.main-nav a{
display:flex;align-items:center;gap:4px;padding:11px 15px;color:#fff;font-size:14px;font-weight:600;white-space:nowrap;
}
nav.main-nav li.active>a,nav.main-nav a:hover,nav.main-nav .current-menu-item>a,nav.main-nav .current-menu-ancestor>a{background:var(--red-dark);}
/* dropdown: desktop-only, hover/focus to open */
.menu-item-has-children > a::after{content:"▾";font-size:11px;opacity:.85;}
@media (min-width:901px){
nav.main-nav .sub-menu{
display:none;position:absolute;left:0;top:100%;z-index:60;
min-width:230px;background:var(--dark-2);border-radius:8px;padding:8px;
box-shadow:0 12px 28px rgba(0,0,0,.28);
}
nav.main-nav .menu-item-has-children:hover > .sub-menu,
nav.main-nav .menu-item-has-children:focus-within > .sub-menu{display:block;}
nav.main-nav .sub-menu li{width:100%;}
nav.main-nav .sub-menu a{padding:9px 12px;border-radius:6px;white-space:normal;}
nav.main-nav .sub-menu a:hover{background:rgba(255,255,255,.1);}
}
/* ---------- prayer times hero (homepage, dynamic current/upcoming) ---------- */
.prayer-hero{background:#f7f8fb;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;margin-bottom:24px;}
.prayer-hero__clock{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line);}
.prayer-hero__clock-icon{width:38px;height:38px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 38px;}
.prayer-hero__label{font-size:14px;font-weight:700;color:var(--text);margin:0;}
.prayer-hero__time{font-size:27px;font-weight:800;margin:2px 0;font-variant-numeric:tabular-nums;}
.prayer-hero__date{font-size:12.5px;color:var(--muted);margin:0;}
#prayerHeroCitySelect{margin-left:auto;padding:7px 12px;border-radius:20px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:600;color:var(--text);}
.prayer-hero__cards{display:flex;flex-wrap:wrap;gap:14px;}
.prayer-card{
flex:1 1 calc(20% - 11.2px);min-width:130px;position:relative;
background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 14px 18px;text-align:center;
transition:transform .15s ease;
}
.prayer-card:hover{transform:translateY(-3px);}
.prayer-card__icon{font-size:30px;display:block;margin-bottom:12px;}
.prayer-card__time{font-size:22px;font-weight:800;display:block;color:var(--ink);}
.prayer-card__name{font-size:13px;color:var(--muted);font-weight:700;display:block;margin-top:4px;}
.prayer-card__badge{
display:none;position:absolute;top:-11px;left:50%;transform:translateX(-50%);
font-size:9.5px;font-weight:800;padding:4px 12px;border-radius:12px;text-transform:uppercase;letter-spacing:.4px;
background:#fff;border:1px solid var(--line);white-space:nowrap;
}
.prayer-card__badge:not(:empty){display:inline-block;}
.prayer-card.is-current{background:var(--dark-2);border-color:var(--dark-2);}
.prayer-card.is-current .prayer-card__time,.prayer-card.is-current .prayer-card__name{color:#fff;}
.prayer-card.is-current .prayer-card__badge{background:var(--gold);color:#1a1a1a;border-color:var(--gold);}
.prayer-card.is-upcoming{border-color:var(--red);box-shadow:0 0 0 1px var(--red);}
.prayer-card.is-upcoming .prayer-card__time{color:var(--red);}
.prayer-card.is-upcoming .prayer-card__badge{background:var(--red);color:#fff;border-color:var(--red);}
@media (max-width:700px){
.prayer-hero__clock{flex-wrap:wrap;}
#prayerHeroCitySelect{margin-left:0;flex:1 1 100%;}
.prayer-card{flex-basis:calc(50% - 7px);}
}
/* ---------- ad banner ---------- */
.ad-banner{
max-width:970px;margin:16px auto;padding:0 12px;
}
.ad-banner .ph{--c1:#cfd8dc;--c2:#90a4ae;height:90px;font-size:11px;letter-spacing:1px;text-transform:uppercase;}
/* ---------- generic section header ---------- */
.section{max-width:var(--maxw);margin:0 auto 22px;padding:0 12px;}
.section-title{
display:flex;align-items:center;justify-content:space-between;
border-bottom:2px solid var(--ink);
margin-bottom:14px;
}
.section-title h2{
font-size:20px;font-weight:800;color:#fff;background:var(--red);
padding:8px 20px;position:relative;top:2px;
clip-path:polygon(0 0,100% 0,92% 100%,0% 100%);
}
.section-title .more{font-size:13px;font-weight:600;color:var(--red);padding-bottom:8px;}
.section-title .more:hover{text-decoration:underline;}
.section.dark .section-title{border-bottom-color:#444;}
.section.dark .section-title h2{background:var(--gold);color:#1a1a1a;}
/* ---------- main layout grid ---------- */
/* flexbox, not CSS grid, on purpose: Chromium mis-sizes an auto grid row
when the item is an immediately followed by more
siblings (h1/p/etc.) — it undersizes the row to just the image's
height and lets the rest of the content visually overlap whatever
comes next (confirmed on this exact layout on both desktop and
mobile). Flexbox has no such bug, so every "N fixed columns + 1
flexible column" layout in this stylesheet uses flex, not grid. */
.homepage-grid{
display:flex;
align-items:flex-start;
gap:16px;
max-width:var(--maxw);
margin:0 auto 24px;
padding:0 12px;
}
.homepage-grid > *{min-width:0;}
.homepage-grid > aside:first-child{flex:0 0 270px;}
.homepage-grid > .hero-main,.homepage-grid > article{flex:1 1 0;}
.homepage-grid > aside:last-child{flex:0 0 300px;}
/* On an article page, the two side columns are much shorter than a long
article body and end up as blank space once you scroll past them —
pin them in view on desktop only (mobile keeps normal stacked flow). */
@media (min-width:981px){
.homepage-grid.article-grid > aside{
align-self:flex-start;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;
}
}
@media (max-width:980px){
/* align-items was flex-start (needed on desktop so the three columns
don't stretch to match each other's height) — but combined with
flex-direction:column that lets each item size to its own content
width instead of the container's width, so any oversized child
(a captioned image with an inline pixel width, a wide table) pushes
its box past the viewport and forces the whole page to scroll
sideways. Stretch on mobile so every item is clamped to full width
and max-width:100% on images/captions can actually do its job. */
.homepage-grid{flex-direction:column;align-items:stretch;}
.homepage-grid > *{flex:none;}
.homepage-grid > * + *{margin-top:16px;}
/* On an article page, show the article itself first on mobile, with
the "related in category" and sidebar widget columns after it. */
.homepage-grid.article-grid > article{order:-1;}
/* On the homepage, show the lead story (with its image) before the
"trending"/headline-list sidebar column, which is first in the DOM
for desktop's 3-column layout. */
.homepage-grid:not(.article-grid) > .hero-main{order:-1;}
}
/* A bit more breathing room off the screen edges on phones — 12px reads
as edge-to-edge once type is at body-copy size on a narrow viewport. */
@media (max-width:600px){
.wrap,.homepage-grid,.page-head,.page-content,.contact-grid{padding-left:16px;padding-right:16px;}
}
/* headline list (text + small thumb) */
.headline-list li{
display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);
}
/* Some widgets put the flex row on the