/*
Theme Name: Ilm Hasil Karo
Theme URI: https://ilmhasilkaro.com
Author: Ilm Hasil Karo
Description: Prayer times and namaz guide theme. Fully customizable from Appearance > Customize > Ilm Theme Options (colors, fonts, logo sizes, homepage sections, prayer tool, security).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary. All rights reserved. Unauthorized copying or redistribution is prohibited.
Text Domain: ilmhasilkaro
*/
:root{--ilm-primary:#14172B;--ilm-accent:#E8A33D;--ilm-accent-text:#8A5A12;--ilm-bg:#F6EFE3;--ilm-text:#14172B;--ilm-muted:#3A3D52;--ilm-link:#14172B;--ilm-card-bg:#FFFFFF;--ilm-card-text:#14172B;--ilm-dark-bg:#14172B;--ilm-dark-text:#F6EFE3;--ilm-dark-inner:#1F2347;--ilm-header-bg:#F6EFE3;--ilm-header-text:#14172B;--ilm-footer-bg:#F6EFE3;--ilm-footer-text:#3A3D52;--ilm-btn-bg:#14172B;--ilm-btn-text:#F6EFE3;--ilm-border:#14172B;--ilm-p-fajr:#3B4A8C;--ilm-p-dhuhr:#E8B93D;--ilm-p-asr:#D98A3D;--ilm-p-maghrib:#C4553D;--ilm-p-isha:#1F2347;--ilm-container:1200px;--ilm-gap:72px;--ilm-grid-gap:16px;--ilm-card-radius:18px;--ilm-btn-radius:12px;--ilm-panel-radius:28px;--ilm-card-shadow:none;--ilm-header-pad:24px;--ilm-fs-base:17px;--ilm-fs-h1:64px;--ilm-fs-h1-m:38px;--ilm-fs-h2:40px;--ilm-fs-h2-m:28px;--ilm-ur-lh:2;--ilm-font-body:'DM Sans',sans-serif;--ilm-font-head:'Fraunces',serif;--ilm-font-ur:'Noto Nastaliq Urdu',serif}
*{box-sizing:border-box}
body{margin:0;background:var(--ilm-bg);color:var(--ilm-text);font-family:var(--ilm-font-body);font-size:var(--ilm-fs-base);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--ilm-font-head);line-height:1.15;margin:0 0 .5em;font-weight:700}
.ur,[lang="ur"]{font-family:var(--ilm-font-ur),serif;line-height:var(--ilm-ur-lh)}
a{color:var(--ilm-link)}img{max-width:100%;height:auto}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{position:fixed;left:8px;top:8px;width:auto;height:auto;clip:auto;background:#fff;color:#000;padding:10px 14px;z-index:99999}
.ilm-wrap{max-width:var(--ilm-container);margin:0 auto;padding:0 32px}
.ilm-sec{padding:0 0 var(--ilm-gap)}
.ilm-btn,.ilm-wrap button.ilm-btn{display:inline-block;background:var(--ilm-btn-bg);color:var(--ilm-btn-text);border:0;border-radius:var(--ilm-btn-radius);padding:15px 24px;font:700 16px var(--ilm-font-body);cursor:pointer;text-decoration:none}
.ilm-btn:hover{opacity:.9}
.ilm-btn.ghost{background:transparent;color:var(--ilm-text);border:1.5px solid var(--ilm-border)}
.ilm-eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ilm-accent-text)}
/* header */
.ilm-header{background:var(--ilm-header-bg);color:var(--ilm-header-text);z-index:50}
.ilm-header.is-sticky{position:sticky;top:0}
.admin-bar .ilm-header.is-sticky{top:32px}
.ilm-header-in{display:flex;align-items:center;justify-content:space-between;padding-top:var(--ilm-header-pad);padding-bottom:var(--ilm-header-pad);gap:20px}
.ilm-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.ilm-brand-name{font-family:var(--ilm-font-head);font-weight:700;font-size:26px}
.ilm-brand-ur{font-size:18px;color:var(--ilm-accent-text)}
.ilm-nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;align-items:center}
.ilm-nav a{text-decoration:none;color:var(--ilm-header-text);font-weight:500;font-size:15px}
.ilm-nav-wrap{display:flex;align-items:center;gap:28px}
.ilm-lang{border:1.5px solid var(--ilm-header-text);border-radius:999px;padding:6px 14px;font-size:14px;white-space:nowrap}
.ilm-lang a{text-decoration:none;color:inherit}
.ilm-menu-toggle{display:none;background:none;border:1.5px solid var(--ilm-header-text);color:var(--ilm-header-text);border-radius:10px;padding:8px 14px;font:700 14px var(--ilm-font-body);cursor:pointer}
/* hero */
.ilm-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding-top:40px;padding-bottom:var(--ilm-gap)}
.ilm-h1{font-size:var(--ilm-fs-h1);line-height:1.05;margin:16px 0 20px}
.ilm-h2{font-size:var(--ilm-fs-h2);margin:0}
.ilm-lead{font-size:1.1em;max-width:480px;color:var(--ilm-muted);margin:0 0 32px}
.ilm-search{display:flex;gap:12px;max-width:560px;flex-wrap:wrap}
.ilm-search input{flex:1;min-width:200px;background:var(--ilm-card-bg);color:var(--ilm-card-text);border:1.5px solid var(--ilm-border);border-radius:var(--ilm-btn-radius);padding:15px 18px;font:16px var(--ilm-font-body)}
.ilm-msg{width:100%;font-size:14px;color:var(--ilm-accent-text);min-height:1em}
.ilm-meta{margin-top:12px;font-size:14px;color:var(--ilm-muted)}
/* today panel */
.ilm-panel{background:var(--ilm-dark-bg);color:var(--ilm-dark-text);border-radius:var(--ilm-panel-radius)}
.ilm-today{padding:30px 30px 26px}
.ilm-today-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.ilm-today-head strong{font-family:var(--ilm-font-head);font-size:22px}
.ilm-today-head span{font-size:13px;opacity:.75}
.ilm-arc{width:100%;margin:8px 0 4px;display:block}
.ilm-arc text{font:13px var(--ilm-font-body);fill:var(--ilm-dark-text)}
.ilm-next{background:var(--ilm-dark-inner);border-radius:14px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.ilm-next small{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.ilm-next b{font-family:var(--ilm-font-head);font-size:26px}
.ilm-next .cd{font-size:26px;font-weight:700;color:var(--ilm-accent);text-align:right}
.ilm-times{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:8px;text-align:center;font-size:14px}
.ilm-times div span{display:block;opacity:.7}.ilm-times div b{display:block;margin-top:2px}
.ilm-times .on span,.ilm-times .on b{color:var(--ilm-accent);opacity:1}
.ilm-note{font-size:12px;opacity:.65;margin:14px 0 0}
/* cards */
.ilm-card{background:var(--ilm-card-bg);color:var(--ilm-card-text);border-radius:var(--ilm-card-radius);box-shadow:var(--ilm-card-shadow);overflow:hidden}
.ilm-sec-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px;gap:16px;flex-wrap:wrap}
.ilm-sec-head a{font-weight:700;border-bottom:2px solid currentColor;text-decoration:none}
.ilm-grid{display:grid;gap:var(--ilm-grid-gap)}
.ilm-g5{grid-template-columns:repeat(5,1fr)}.ilm-g3{grid-template-columns:repeat(3,1fr)}.ilm-g6{grid-template-columns:repeat(6,1fr)}
.ilm-pc{display:block;text-decoration:none;color:var(--ilm-card-text)}
.ilm-pc .bar{height:10px;background:var(--c)}
.ilm-pc .in{padding:22px 20px}
.ilm-pc h3{font-size:24px;margin:0}
.ilm-pc .ur{font-size:17px;color:var(--ilm-accent-text);margin:6px 0}
.ilm-pc p{font-size:14px;color:var(--ilm-muted);margin:0}
.ilm-steps{padding:48px 44px}
.ilm-steps h2{font-size:var(--ilm-fs-h2);margin:0 0 6px}
.ilm-steps .sub{margin:0 0 32px;opacity:.75}
.ilm-steps .n{font-family:var(--ilm-font-head);font-size:40px;color:var(--ilm-accent);font-weight:700;line-height:1}
.ilm-steps .t{font-weight:700;margin:6px 0 4px}
.ilm-steps .d{font-size:14px;opacity:.75;line-height:1.5}
.ilm-tool{display:block;padding:26px 24px;text-decoration:none;color:var(--ilm-card-text)}
.ilm-tool b{display:block;font-size:18px}
.ilm-tool span{display:block;font-size:14px;color:var(--ilm-muted);margin-top:6px}
.ilm-post{display:block;text-decoration:none;color:var(--ilm-card-text)}
.ilm-post img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.ilm-post .in{padding:20px}.ilm-post h3{font-size:20px;margin:0 0 8px}.ilm-post p{margin:0;font-size:14px;color:var(--ilm-muted)}
/* content pages */
.ilm-page{max-width:820px;margin:0 auto;padding:32px 32px var(--ilm-gap)}
.ilm-page h1{font-size:var(--ilm-fs-h1-m);font-size:clamp(30px,5vw,48px)}
.ilm-entry{font-size:1.06em}.ilm-entry h2{font-size:30px;margin-top:1.6em}.ilm-entry h3{font-size:22px;margin-top:1.4em}
.ilm-entry img{border-radius:var(--ilm-card-radius)}
.ilm-entry blockquote{border-left:4px solid var(--ilm-accent);margin:1.4em 0;padding:.2em 0 .2em 1.2em;color:var(--ilm-muted)}
.ilm-entry table{width:100%;border-collapse:collapse}.ilm-entry td,.ilm-entry th{border:1px solid rgba(0,0,0,.15);padding:8px 10px}
.ilm-pager{margin-top:32px;display:flex;gap:10px;flex-wrap:wrap}.ilm-pager a,.ilm-pager span{padding:8px 14px;border:1.5px solid var(--ilm-border);border-radius:10px;text-decoration:none}
/* monthly table */
.ilm-month{background:var(--ilm-card-bg);color:var(--ilm-card-text);border-radius:var(--ilm-card-radius);padding:20px;overflow-x:auto;box-shadow:var(--ilm-card-shadow)}
.ilm-month-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px}
.ilm-month-head button{background:none;border:1.5px solid var(--ilm-border);border-radius:10px;padding:6px 12px;cursor:pointer;color:inherit;font:600 14px var(--ilm-font-body)}
.ilm-month table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.ilm-month th,.ilm-month td{padding:9px 8px;text-align:center;border-bottom:1px solid rgba(0,0,0,.1)}
.ilm-month th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ilm-muted)}
.ilm-month tr.today td{background:var(--ilm-accent);color:#14172B;font-weight:700}
/* footer */
.ilm-footer{background:var(--ilm-footer-bg);color:var(--ilm-footer-text);border-top:1.5px solid var(--ilm-border);padding:28px 0 40px;font-size:14px}
.ilm-footer-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ilm-footer ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.ilm-footer a{color:inherit;text-decoration:none}
@media(max-width:1024px){
.ilm-hero{grid-template-columns:1fr;gap:36px}
.ilm-g5{grid-template-columns:repeat(3,1fr)}.ilm-g6{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
.ilm-wrap{padding:0 18px}
.ilm-h1{font-size:var(--ilm-fs-h1-m)}.ilm-h2,.ilm-steps h2{font-size:var(--ilm-fs-h2-m)}
.ilm-menu-toggle{display:block}
.ilm-nav-wrap{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ilm-header-bg);padding:18px;flex-direction:column;align-items:flex-start;border-top:1px solid rgba(0,0,0,.1)}
.ilm-header{position:relative}.ilm-header.is-sticky{position:sticky}
.ilm-header.nav-open .ilm-nav-wrap{display:flex}
.ilm-nav ul{flex-direction:column;align-items:flex-start;gap:14px}
.ilm-g5,.ilm-g3,.ilm-g6{grid-template-columns:1fr 1fr}
.ilm-steps{padding:32px 22px}.ilm-today{padding:22px 18px}
.admin-bar .ilm-header.is-sticky{top:46px}
}
@media(max-width:480px){.ilm-g5,.ilm-g3,.ilm-g6{grid-template-columns:1fr}}