/*
Theme Name: Dyerads Precision
Description: "Contractor Precision" design system on top of Divi, structured after harajkuwt.com's proven layout.
Template: Divi
Version: 1.3.0
Text Domain: dyerads-precision
*/

@font-face{
  font-family:'DypTajawal';
  src:url('fonts/tajawal-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'DypTajawal';
  src:url('fonts/tajawal-700.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'DypTajawal';
  src:url('fonts/tajawal-800.woff2') format('woff2');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

:root{
  --dyp-bg:#F4F1EA;
  --dyp-card:#ffffff;
  --dyp-ink:#1B1A1E;
  --dyp-sub:#6b6870;
  --dyp-line:#e2ddd0;
  --dyp-hero:#ffffff;
  --dyp-hero-line:#E7E1D0;
  --dyp-side:#F8F5EC;
  --dyp-accent:#2166D6;
  --dyp-accent-ink:#ffffff;
  --dyp-wa:#25D366;
  --dyp-shadow:0 16px 36px -22px rgba(27,26,30,.28);
}

*{box-sizing:border-box;}
body.dyp-theme{
  /* Divi's own core CSS sets body{font-size:14px}; pin it back to the standard
     16px root size so every rem-based size in this file reads at its intended
     scale instead of ~12% smaller than designed. */
  font-size:16px;
  font-family:'DypTajawal','Segoe UI',Tahoma,sans-serif;
  background:var(--dyp-bg);
  color:var(--dyp-ink);
  line-height:1.7;
}
/* Divi's own core CSS forces a plain h1..h6{font-family:Lateef,...} rule with
   nothing to compete against it since this file never set font-family on
   headings directly (relying on inheritance from body, which loses to any
   rule that targets the element itself, regardless of specificity or source
   order). Declare it explicitly here so it actually wins. */
body.dyp-theme h1,body.dyp-theme h2,body.dyp-theme h3,body.dyp-theme h4,body.dyp-theme h5,body.dyp-theme h6{
  font-family:'DypTajawal','Segoe UI',Tahoma,sans-serif;
  text-wrap:balance; margin:0;
}
/* safety net: an inline svg with only a viewBox and no CSS sizing renders at an
   unpredictable, sometimes huge, intrinsic size — cap it so a missing/mis-scoped
   sizing rule degrades to "too big for its box" instead of "1000px tall icon". */
body.dyp-theme svg{display:block; max-width:100%;}
body.dyp-theme .tabular{font-variant-numeric:tabular-nums;}

.dyp-wrap{max-width:1120px;margin:0 auto;padding:0 22px;}
.dyp-section{padding:52px 0;}
.dyp-section-tight{padding:0 0 52px;}

/* ---------------- header ---------------- */
.dyp-header{background:var(--dyp-card); border-bottom:1px solid var(--dyp-line); position:sticky; top:0; z-index:50;}
.dyp-header-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:20px;}
.dyp-logo{display:flex; align-items:center;}
.dyp-logo img{height:56px; width:auto; display:block;}
.dyp-nav{display:flex; gap:28px; list-style:none; margin:0; padding:0;}
.dyp-nav a{color:var(--dyp-ink); text-decoration:none; font-weight:700; font-size:.92rem;}
.dyp-nav a:hover{color:var(--dyp-accent);}
.dyp-header-cta{display:flex; gap:10px; align-items:center;}
.dyp-btn{display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:9px; font-weight:800; font-size:.85rem; text-decoration:none; white-space:nowrap; border:none; cursor:pointer;}
.dyp-btn svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2;}
.dyp-btn-primary{background:var(--dyp-accent); color:var(--dyp-accent-ink);}
.dyp-btn-ghost{border:1.5px solid var(--dyp-line); color:var(--dyp-ink); background:transparent;}
.dyp-btn-wa{background:var(--dyp-wa); color:#fff;}
.dyp-menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.dyp-menu-toggle span{display:block; width:24px; height:2px; background:var(--dyp-ink); margin:5px 0;}

@media (max-width:880px){
  .dyp-nav{position:absolute; inset-inline:0; top:100%; background:var(--dyp-card); border-bottom:1px solid var(--dyp-line); flex-direction:column; padding:14px 22px; gap:16px; display:none;}
  .dyp-nav.dyp-open{display:flex;}
  .dyp-menu-toggle{display:block;}
  .dyp-header-cta .dyp-btn-ghost{display:none;}
}

/* ---------------- eyebrow / section titles ---------------- */
.dyp-eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--dyp-accent); font-size:.82rem; font-weight:800; letter-spacing:.08em; margin-bottom:10px;}
.dyp-eyebrow::before{content:""; width:7px; height:7px; border-radius:2px; background:var(--dyp-accent); display:block;}
.dyp-section-title{font-size:1.3rem; font-weight:800; margin:0 0 18px;}

/* ---------------- hero ---------------- */
.dyp-hero{padding:44px 0 8px;}
.dyp-hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;}
@media(max-width:860px){.dyp-hero-grid{grid-template-columns:1fr;} .dyp-hero-art{order:-1;}}
.dyp-hero h1{font-size:clamp(1.8rem,1.3rem + 2.2vw,2.5rem); line-height:1.32; max-width:22ch;}
.dyp-hero .dyp-lead{margin-top:14px; font-size:1.02rem; color:var(--dyp-sub); max-width:48ch;}
.dyp-hero-cta{display:flex; gap:10px; margin-top:24px; flex-wrap:wrap;}
.dyp-trust-row{display:flex; gap:18px; margin-top:26px; flex-wrap:wrap; list-style:none; padding:0;}
.dyp-trust-row li{display:flex; align-items:center; gap:7px; font-size:.82rem; color:var(--dyp-sub); font-weight:600;}
.dyp-trust-row svg{width:16px; height:16px; stroke:var(--dyp-accent); fill:none; stroke-width:2; flex:none;}
.dyp-hero-art{aspect-ratio:4/3.1; border-radius:18px; background:var(--dyp-card); border:1px solid var(--dyp-line); box-shadow:var(--dyp-shadow); display:flex; align-items:center; justify-content:center;}
.dyp-hero-art svg{width:66%;}

/* ---------------- how it works ---------------- */
.dyp-how{text-align:center;}
.dyp-how .dyp-eyebrow{display:inline-flex;}
.dyp-how h2{font-size:1.5rem; font-weight:800; margin:0 0 26px;}
.dyp-how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:start;}
@media(max-width:760px){.dyp-how-grid{grid-template-columns:1fr;}}
.dyp-how-step{background:var(--dyp-card); border:1px solid var(--dyp-line); border-radius:14px; padding:26px; box-shadow:var(--dyp-shadow);}
.dyp-how-step .dyp-num{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:9px; background:var(--dyp-accent); color:#fff; font-weight:800; font-size:.9rem; margin-bottom:14px;}
.dyp-how-step h3{margin:0 0 8px; font-size:1rem; font-weight:800;}
.dyp-how-step p{margin:0; color:var(--dyp-sub); font-size:.86rem;}

/* ---------------- content grid / cards ---------------- */
.dyp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media(max-width:880px){.dyp-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.dyp-grid{grid-template-columns:1fr;}}
.dyp-card{background:var(--dyp-card); border:1px solid var(--dyp-line); border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; box-shadow:var(--dyp-shadow);}
.dyp-card .dyp-thumb{aspect-ratio:16/10; overflow:hidden; background:var(--dyp-bg);}
.dyp-card .dyp-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.dyp-card .dyp-card-body{padding:16px 18px 20px; display:flex; flex-direction:column; gap:6px; flex:1;}
.dyp-card .dyp-cat{color:var(--dyp-accent); font-size:.7rem; font-weight:800; letter-spacing:.05em; display:block;}
.dyp-card h3{margin:0; font-size:1rem; font-weight:800; line-height:1.4;}
.dyp-card p{margin:0; color:var(--dyp-sub); font-size:.84rem; flex:1;}

/* ---------------- category directory ---------------- */
.dyp-cluster{margin-bottom:32px;}
.dyp-cluster-title{font-size:.8rem; font-weight:800; letter-spacing:.08em; color:var(--dyp-sub); margin-bottom:14px; display:flex; align-items:center; gap:8px;}
.dyp-cluster-title::before{content:""; width:16px; height:2px; background:var(--dyp-accent); display:block;}
.dyp-cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media(max-width:980px){.dyp-cat-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:760px){.dyp-cat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.dyp-cat-grid{grid-template-columns:1fr;}}
.dyp-cat-card{background:var(--dyp-card); border:1px solid var(--dyp-line); border-radius:14px; padding:18px; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:8px; box-shadow:var(--dyp-shadow);}
/* base icon sizing — unscoped so it's safe to reuse .dyp-cat-icon anywhere (cat cards, value cards, etc), not just inside .dyp-cat-card */
.dyp-cat-icon{width:48px; height:48px; border-radius:12px; background:var(--dyp-bg); border:1px solid var(--dyp-line); display:flex; align-items:center; justify-content:center; color:var(--dyp-accent); flex:none;}
.dyp-cat-icon svg{width:26px; height:26px; stroke-width:1.6;}
.dyp-cat-card h3{margin:0; font-size:.92rem; font-weight:800; line-height:1.4;}
.dyp-cat-card .dyp-cat-count{color:var(--dyp-sub); font-size:.8rem; font-weight:600;}

/* ---------------- breadcrumb ---------------- */
.dyp-breadcrumb{font-size:.8rem; color:var(--dyp-sub); margin:20px 0 6px;}
.dyp-breadcrumb a{color:var(--dyp-sub); text-decoration:none;}
.dyp-breadcrumb a:hover{color:var(--dyp-accent);}
.dyp-breadcrumb span{margin:0 6px;}

/* ---------------- single article ---------------- */
.dyp-article-hero{background:var(--dyp-side); padding:8px 0 30px;}
.dyp-article-head{padding-top:8px;}
.dyp-article-head .dyp-cat{color:var(--dyp-accent); font-size:.78rem; font-weight:800; letter-spacing:.06em;}
.dyp-article-head h1{font-size:clamp(1.5rem,1.2rem + 1.6vw,2.1rem); line-height:1.35; margin:10px 0 0; max-width:34ch;}
/* image and text share the same column width so their edges line up (not the image full-bleed with narrower text under it) */
.dyp-article-wrap{padding:30px 0 50px; max-width:820px; margin:0 auto;}
.dyp-hero-image{border-radius:16px; overflow:hidden; margin:0 0 30px; border:1px solid var(--dyp-line); box-shadow:var(--dyp-shadow); background:var(--dyp-side);}
.dyp-hero-image img{display:block; width:100%; height:auto;}
.dyp-content{font-size:1.02rem; background:var(--dyp-card); border:1px solid var(--dyp-line); border-radius:16px; padding:30px 32px; box-shadow:var(--dyp-shadow);}
.dyp-content h2{font-size:1.35rem; font-weight:800; margin:34px 0 14px;}
.dyp-content h2:first-child{margin-top:0;}
.dyp-content h3{font-size:1.1rem; font-weight:800; margin:26px 0 10px;}
.dyp-content p{margin:0 0 18px;}
.dyp-content img{max-width:100%; height:auto; border-radius:10px;}
.dyp-content ul, .dyp-content ol{margin:0 0 18px; padding-inline-start:22px;}
/* :not(.dyp-btn) matters: the ad card gets spliced directly into article
   content (to sit before each H2), so its buttons are technically descendants
   of .dyp-content — without this exclusion, this rule's higher specificity
   (two classes) silently beats .dyp-btn-primary/.dyp-btn-wa's own color and
   the button text becomes unreadable (blue-on-blue, blue-on-green). */
.dyp-content a:not(.dyp-btn){color:var(--dyp-accent);}

/* ad card — the money component */
.dyp-adcard{background:var(--dyp-card); border:1px solid var(--dyp-line); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--dyp-shadow); margin:32px 0;}
.dyp-adcard .dyp-ac-label{display:flex; align-items:center; gap:6px; font-size:.74rem; font-weight:800; color:var(--dyp-sub); letter-spacing:.04em;}
.dyp-adcard .dyp-ac-label svg{width:12px; height:12px; stroke:var(--dyp-accent); fill:none; stroke-width:2;}
.dyp-adcard .dyp-ac-row1{display:flex; align-items:flex-start; gap:12px;}
.dyp-adcard .dyp-ac-avatar{width:42px; height:42px; border-radius:50%; background:var(--dyp-accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem; flex:none;}
.dyp-adcard .dyp-ac-info{flex:1; min-width:0;}
.dyp-adcard .dyp-ac-name-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; row-gap:6px;}
.dyp-adcard .dyp-ac-name{font-weight:800; font-size:.95rem;}
.dyp-adcard .dyp-ac-phone{color:var(--dyp-sub); font-size:.84rem; margin-top:4px;}
.dyp-adcard .dyp-ac-badge{font-size:.72rem; font-weight:800; padding:4px 10px; border-radius:999px; background:#DCEFE6; color:#1B6B4B; white-space:nowrap; flex:none;}
.dyp-adcard .dyp-ac-btns{display:flex; gap:10px;}
.dyp-adcard .dyp-ac-btns a{flex:1; text-align:center;}
.dyp-adcard.dyp-ac-empty{opacity:.65;}
.dyp-adcard.dyp-ac-empty .dyp-ac-avatar{background:var(--dyp-sub);}

.dyp-prevnext{display:flex; justify-content:space-between; gap:16px; margin:40px 0 0; border-top:1px solid var(--dyp-line); padding-top:24px;}
.dyp-prevnext a{max-width:47%; text-decoration:none; color:inherit; background:var(--dyp-card); border:1px solid var(--dyp-line); border-radius:12px; padding:14px;}
.dyp-prevnext .dyp-pn-label{color:var(--dyp-accent); font-size:.7rem; font-weight:800; display:block; margin-bottom:4px;}
.dyp-prevnext .dyp-pn-title{font-weight:700; font-size:.88rem;}
.dyp-prevnext .dyp-pn-next{margin-inline-start:auto; text-align:end;}

/* sticky mobile CTA */
.dyp-sticky-cta{display:none; position:sticky; bottom:0; background:var(--dyp-card); border-top:1px solid var(--dyp-line); padding:12px 18px; gap:10px; box-shadow:0 -10px 24px -18px rgba(0,0,0,.25); z-index:40;}
.dyp-sticky-cta a{flex:1; text-align:center;}
@media(max-width:640px){.dyp-sticky-cta{display:flex;}}

/* ---------------- category archive ---------------- */
.dyp-archive-head{background:var(--dyp-side); padding:8px 0 30px;}
.dyp-archive-head h1{font-size:clamp(1.5rem,1.2rem + 1.6vw,2rem); font-weight:800; margin:10px 0 8px;}
.dyp-archive-head p{color:var(--dyp-sub); margin:0; max-width:70ch;}
.dyp-archive-body{padding:30px 0 50px;}

/* pagination (styles WP's default the_posts_pagination markup) */
.dyp-pagination{margin-top:34px;}
.dyp-pagination .nav-links{display:flex; gap:8px; flex-wrap:wrap; list-style:none; padding:0; margin:0;}
.dyp-pagination .page-numbers{display:flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px; border-radius:8px; border:1px solid var(--dyp-line); background:var(--dyp-card); font-size:.85rem; font-weight:700; color:var(--dyp-sub); text-decoration:none;}
.dyp-pagination a.page-numbers:hover{border-color:var(--dyp-accent); color:var(--dyp-accent);}
.dyp-pagination span.page-numbers.current{background:var(--dyp-accent); color:#fff; border-color:var(--dyp-accent);}
.dyp-pagination .page-numbers.dots{border:none; background:none;}

/* ---------------- about page ---------------- */
.dyp-about-values{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px;}
@media(max-width:760px){.dyp-about-values{grid-template-columns:1fr;}}
.dyp-value-card{background:var(--dyp-card); border:1px solid var(--dyp-line); border-radius:14px; padding:24px; text-align:center; box-shadow:var(--dyp-shadow);}
.dyp-value-card .dyp-cat-icon{margin:0 auto 12px;}
.dyp-value-card h3{font-size:.96rem; margin-bottom:6px;}
.dyp-value-card p{font-size:.84rem; color:var(--dyp-sub); margin:0;}

/* ---------------- FAQ ---------------- */
.dyp-faq-wrap{max-width:800px;}
.dyp-faq-item{border:1px solid var(--dyp-line); border-radius:12px; background:var(--dyp-card); margin-bottom:10px; overflow:hidden; box-shadow:var(--dyp-shadow);}
.dyp-faq-item summary{padding:16px 20px; cursor:pointer; font-weight:800; font-size:.95rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.dyp-faq-item summary::-webkit-details-marker{display:none;}
.dyp-faq-item summary::after{content:"+"; font-size:1.3rem; color:var(--dyp-accent); flex:none;}
.dyp-faq-item[open] summary::after{content:"\2212";}
.dyp-faq-item .dyp-faq-a{padding:0 20px 18px; color:var(--dyp-sub); font-size:.9rem;}

/* ---------------- advertise + contact (merged) ---------------- */
.dyp-contact-hero{background:var(--dyp-side); text-align:center; padding:8px 0 34px;}
.dyp-contact-hero .dyp-lead{max-width:56ch; margin:14px auto 0;}
.dyp-audience-row{display:flex; gap:10px; justify-content:center; margin-top:20px; flex-wrap:wrap;}
.dyp-audience-row a{font-size:.84rem; font-weight:800; padding:9px 18px; border-radius:999px; border:1px solid var(--dyp-line); color:var(--dyp-sub); text-decoration:none; background:var(--dyp-card);}
.dyp-audience-row a:hover{border-color:var(--dyp-accent); color:var(--dyp-accent);}

.dyp-slots-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px;}
@media(max-width:860px){.dyp-slots-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.dyp-slots-grid{grid-template-columns:1fr;}}
.dyp-slotcard{background:var(--dyp-card); border:1px solid var(--dyp-line); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--dyp-shadow);}
.dyp-slotcard h3{font-size:.92rem; margin:0;}
.dyp-urltag{font-size:.7rem; color:var(--dyp-accent); background:var(--dyp-bg); border:1px solid var(--dyp-line); border-radius:7px; padding:5px 9px; align-self:flex-start;}
.dyp-status{display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:800; border-radius:999px; padding:5px 12px; align-self:flex-start;}
.dyp-status i{width:6px; height:6px; border-radius:50%; background:currentColor; display:block;}
.dyp-status-open{background:#DCEFE6; color:#1B6B4B;}
.dyp-status-full{background:#F3E1DC; color:#9C3B22;}

.dyp-reach-wrap{display:grid; grid-template-columns:.95fr 1.05fr; gap:24px; margin-top:24px; align-items:center;}
@media(max-width:860px){.dyp-reach-wrap{grid-template-columns:1fr;}}
.dyp-contact-rows{display:flex; flex-direction:column; gap:10px;}
.dyp-contact-row{display:flex; align-items:center; gap:12px; background:var(--dyp-card); border:1px solid var(--dyp-line); border-radius:12px; padding:14px 16px; box-shadow:var(--dyp-shadow);}
.dyp-contact-row .dyp-ic{width:38px; height:38px; border-radius:10px; background:var(--dyp-bg); border:1px solid var(--dyp-line); display:flex; align-items:center; justify-content:center; flex:none; color:var(--dyp-accent);}
.dyp-contact-row .dyp-ic svg{width:18px; height:18px; stroke-width:1.8;}
.dyp-contact-row .dyp-lbl{font-size:.78rem; color:var(--dyp-sub);}
.dyp-contact-row .dyp-val{font-size:.92rem; font-weight:700;}
.dyp-contact-row .dyp-val a{color:inherit; text-decoration:none;}
.dyp-kw-map{background:var(--dyp-card); border:1px solid var(--dyp-line); border-radius:16px; padding:20px; box-shadow:var(--dyp-shadow);}
.dyp-kw-map .dyp-cap{font-size:.78rem; color:var(--dyp-sub); margin-top:12px; text-align:center;}
.dyp-kw-map svg{width:100%; height:auto;}
.dyp-gov-dot{fill:var(--dyp-accent); stroke:var(--dyp-card); stroke-width:2;}
.dyp-gov-label{font-size:8px; fill:var(--dyp-ink); font-weight:700;}

/* ---------------- privacy / legal ---------------- */
.dyp-legal h2{font-size:1.1rem; margin-top:28px; margin-bottom:10px;}
.dyp-legal h2:first-child{margin-top:0;}
.dyp-legal p{color:var(--dyp-sub); margin-bottom:14px; font-size:.94rem;}

/* ---------------- footer ---------------- */
.dyp-footer{background:#17161B; color:#EDEBE4; margin-top:60px; padding:52px 0 26px;}
.dyp-footer .dyp-wrap{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px;}
@media(max-width:700px){.dyp-footer .dyp-wrap{grid-template-columns:1fr;}}
.dyp-footer h4{font-size:.82rem; font-weight:800; letter-spacing:.05em; margin:0 0 16px; color:#9a97a3;}
.dyp-footer ul{list-style:none; margin:0; padding:0;}
.dyp-footer li{margin-bottom:10px;}
.dyp-footer a{color:#EDEBE4; text-decoration:none; font-size:.88rem;}
.dyp-footer a:hover{color:var(--dyp-accent);}
.dyp-footer-bottom{max-width:1120px; margin:36px auto 0; padding:20px 22px 0; border-top:1px solid #2b2a31; font-size:.78rem; color:#8a8791; text-align:center;}

/* ---------------- misc ---------------- */
.dyp-empty-note{color:var(--dyp-sub); font-size:.9rem; padding:20px 0;}