/* Almuhaize Law — blog pages (complements the site's main stylesheet) */
:root{--navy:#0F1E38;--navy-2:#1B2A4A;--gold:#C9A84C;--gold-2:#E4C66F;--gold-ink:#A8842F;--paper:#FAF7F2;--line:#E8E0D0;--muted:#6B6050;--muted-2:#8A7A60}
.blog-body{background:var(--paper);color:var(--navy);font-family:'Thmanyah Sans',sans-serif}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header helpers (replaces React behaviour) */
.blog-dd__menu{opacity:0;transform:translateY(-6px);pointer-events:none;transition:all .2s}
.blog-dd:hover .blog-dd__menu,.blog-dd:focus-within .blog-dd__menu{opacity:1;transform:none;pointer-events:auto}
.blog-mobile-nav[hidden]{display:none}

/* hero */
.blog-hero{position:relative;background:linear-gradient(135deg,#0F1E38 0%,#1B2A4A 60%,#263B61 100%);color:#fff;padding:4.5rem 0 4rem;overflow:hidden}
.blog-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(to left,transparent,var(--gold),transparent)}
.blog-hero::before{content:"";position:absolute;inset:0;opacity:.14;background-image:radial-gradient(circle at 20% 20%,var(--gold) 0,transparent 30%),radial-gradient(circle at 85% 90%,var(--gold) 0,transparent 25%);pointer-events:none}
.blog-hero .container{position:relative;z-index:1}
.blog-hero--post{padding:3.5rem 0 3rem}
.blog-hero--sm{padding:6rem 0}
.blog-hero__title{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;line-height:1.45;margin:.75rem 0 1rem;color:#fff}
.blog-hero--post .blog-hero__title{font-size:clamp(1.6rem,3.6vw,2.4rem)}
.blog-hero__lead{color:rgba(255,255,255,.78);font-size:1.05rem;line-height:2;max-width:46rem}
.blog-hero .section-badge span{color:var(--gold-2)}
.blog-crumbs{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.8rem;color:rgba(255,255,255,.6);margin-bottom:1.25rem}
.blog-crumbs a{color:rgba(255,255,255,.75)}.blog-crumbs a:hover{color:var(--gold-2)}
.blog-pill{display:inline-block;background:var(--gold);color:var(--navy);font-size:.75rem;font-weight:700;padding:.3rem .8rem}
.blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.78rem;color:var(--muted-2)}
.blog-meta--hero{color:rgba(255,255,255,.7);font-size:.85rem;margin-top:1.25rem}

.blog-search{display:flex;gap:.5rem;margin-top:2rem;max-width:32rem}
.blog-search input{flex:1;min-width:0;padding:.8rem 1rem;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;border-radius:2px;font:inherit}
.blog-search input::placeholder{color:rgba(255,255,255,.55)}
.blog-search input:focus{outline:2px solid var(--gold);outline-offset:1px}
.blog-search button{padding:.8rem 1.4rem;font-size:.9rem}

/* list */
.blog-list{padding:3.5rem 0 5rem}
.blog-cats{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.blog-cats a{border:1px solid var(--line);background:#fff;padding:.5rem 1rem;font-size:.85rem;color:var(--navy-2);transition:all .2s}
.blog-cats a:hover{border-color:var(--gold);color:var(--gold-ink)}
.blog-cats a.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
.blog-cats small{opacity:.6}
.blog-result-note{margin-bottom:1.5rem;color:var(--muted)}
.blog-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}

.blog-card{height:100%;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);transition:all .3s}
.group:hover .blog-card{transform:translateY(-4px);border-color:rgba(201,168,76,.5);box-shadow:0 14px 36px rgba(15,30,56,.10)}
.blog-card__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#0F1E38 0%,#1B2A4A 58%,#263B61 100%)}
.blog-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.group:hover .blog-card__media img{transform:scale(1.04)}
.blog-card__placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--gold)}
.blog-card__cat{position:absolute;top:1rem;right:1rem;background:var(--gold);color:var(--navy);font-size:.72rem;font-weight:700;padding:.25rem .75rem}
.blog-card__body{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.blog-card__title{font-size:1.05rem;font-weight:700;line-height:1.8;margin:.6rem 0 .5rem;color:var(--navy);transition:color .2s}
.group:hover .blog-card__title{color:var(--gold-ink)}
.blog-card__excerpt{font-size:.9rem;line-height:1.95;color:var(--muted);flex:1;margin-bottom:1.1rem}
.blog-card__more{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;font-weight:700;color:var(--gold-ink)}

.blog-empty{text-align:center;background:#fff;border:1px dashed var(--line);padding:4rem 1.5rem;color:var(--muted)}
.blog-empty svg{color:var(--gold);margin:0 auto 1rem}
.blog-empty h2{font-size:1.4rem;font-weight:700;color:var(--navy);margin-bottom:.5rem}
.blog-empty p{margin-bottom:1.5rem}

.blog-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:3rem}
.blog-pager a{min-width:2.6rem;text-align:center;padding:.55rem .9rem;border:1px solid var(--line);background:#fff;font-size:.9rem}
.blog-pager a.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* article */
.blog-narrow{max-width:820px}
.blog-cover{margin:-1.5rem 0 2rem;position:relative;z-index:2}
.blog-cover img{width:100%;height:auto;display:block;border:1px solid var(--line);box-shadow:0 18px 40px rgba(15,30,56,.12)}
.blog-article>.container{padding-top:2.5rem;padding-bottom:3rem}
.blog-toc{background:#fff;border:1px solid var(--line);border-right:3px solid var(--gold);padding:1.1rem 1.4rem;margin-bottom:2rem}
.blog-toc summary{cursor:pointer;font-weight:700;color:var(--navy)}
.blog-toc ol{margin:.8rem 0 0;padding-right:1.2rem;list-style:decimal}
.blog-toc li{margin:.35rem 0;font-size:.92rem;line-height:1.8}
.blog-toc li.lvl-3{margin-right:1rem;list-style:circle}
.blog-toc a{color:var(--navy-2)}.blog-toc a:hover{color:var(--gold-ink)}

.blog-content{font-size:1.08rem;line-height:2.15;color:#1f2a3d}
.blog-content>*+*{margin-top:1.15em}
.blog-content h2{font-size:1.55rem;font-weight:800;line-height:1.6;color:var(--navy);margin-top:2.2em;padding-bottom:.4em;border-bottom:1px solid var(--line);scroll-margin-top:90px}
.blog-content h3{font-size:1.25rem;font-weight:700;color:var(--navy);margin-top:1.8em;scroll-margin-top:90px}
.blog-content h4{font-size:1.08rem;font-weight:700;color:var(--navy-2);margin-top:1.5em}
.blog-content a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px}
.blog-content ul,.blog-content ol{padding-right:1.6rem}
.blog-content ul{list-style:disc}.blog-content ol{list-style:decimal}
.blog-content li{margin:.4em 0}
.blog-content li[data-list="bullet"]{list-style-type:disc}
.blog-content blockquote{border-right:4px solid var(--gold);background:#fff;padding:1rem 1.4rem;color:var(--navy-2);font-weight:500}
.blog-content img{max-width:100%;height:auto;border:1px solid var(--line)}
.blog-content figure figcaption{font-size:.85rem;color:var(--muted-2);text-align:center;margin-top:.5rem}
.blog-content table{width:100%;border-collapse:collapse;font-size:.95rem;background:#fff;display:block;overflow-x:auto}
.blog-content th,.blog-content td{border:1px solid var(--line);padding:.6rem .8rem;text-align:right}
.blog-content th{background:var(--paper);font-weight:700}
.blog-content pre{direction:ltr;text-align:left;background:#0F1E38;color:#fff;padding:1rem;overflow-x:auto;font-size:.85rem}
.blog-content .ql-align-center{text-align:center}.blog-content .ql-align-left{text-align:left}.blog-content .ql-align-justify{text-align:justify}
.blog-content .ql-direction-ltr{direction:ltr;text-align:left}
.blog-content .ql-indent-1{padding-right:2em}.blog-content .ql-indent-2{padding-right:4em}
.blog-content .ql-size-small{font-size:.85em}.blog-content .ql-size-large{font-size:1.3em}

.blog-faq{margin-top:2.5rem}
.blog-faq h2{font-size:1.45rem;font-weight:800;margin-bottom:1rem}
.blog-faq details{background:#fff;border:1px solid var(--line);margin-bottom:.6rem}
.blog-faq summary{cursor:pointer;padding:1rem 1.2rem;font-weight:700}
.blog-faq details p{padding:0 1.2rem 1.1rem;line-height:2;color:var(--muted)}

.blog-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.blog-tags span{background:#fff;border:1px solid var(--line);font-size:.8rem;padding:.3rem .7rem;color:var(--muted)}
.blog-share{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.88rem}
.blog-share a,.blog-share button{border:1px solid var(--line);background:#fff;padding:.45rem .9rem;font:inherit;font-size:.85rem;cursor:pointer;color:var(--navy-2)}
.blog-share a:hover,.blog-share button:hover{border-color:var(--gold);color:var(--gold-ink)}
.blog-cta{margin-top:2.5rem;background:var(--navy);color:#fff;padding:2rem;display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;border-top:3px solid var(--gold)}
.blog-cta h2{font-size:1.3rem;font-weight:800;margin-bottom:.4rem}
.blog-cta p{color:rgba(255,255,255,.75);line-height:1.9;font-size:.95rem;max-width:30rem}
.blog-cta__actions{display:flex;flex-wrap:wrap;gap:.75rem}
.blog-cta__wa{border:1px solid rgba(255,255,255,.3);padding:.75rem 1.4rem;font-size:.9rem}
.blog-cta__wa:hover{border-color:var(--gold-2);color:var(--gold-2)}
.blog-disclaimer{margin-top:1.5rem;font-size:.8rem;color:var(--muted-2)}
.blog-related{padding:3.5rem 0 5rem;background:#fff;border-top:1px solid var(--line)}
.blog-section-title{font-size:1.6rem;font-weight:800;margin-bottom:1.75rem}
.blog-preview-bar{background:#fff4d6;color:#7a5b00;text-align:center;padding:.7rem 1rem;font-size:.9rem}
.blog-preview-bar a{text-decoration:underline;font-weight:700}

/* floating buttons (same as main site) */
.blog-social a{border:1px solid oklch(.3 .015 265);color:rgba(255,255,255,.78)}
.blog-social a:hover{border-color:var(--gold);color:var(--gold-2)}
.blog-wa{position:fixed;bottom:2rem;left:2rem;z-index:50;background:#25D366;color:#fff;padding:.875rem;box-shadow:0 8px 32px rgba(37,211,102,.35)}
.blog-cta-float{position:fixed;bottom:1.5rem;right:1rem;z-index:50;display:flex;align-items:center;gap:.5rem;min-height:3rem;border:1px solid var(--gold-2);background:var(--gold);color:var(--navy);padding:.75rem 1rem;font-size:.875rem;font-weight:800;box-shadow:0 10px 30px rgba(15,30,56,.28);border-radius:2px}
.blog-cta-float:hover{background:var(--gold-2)}
@media (min-width:640px){.blog-cta-float{bottom:2rem;right:2rem;padding:.75rem 1.25rem}}
@media (max-width:640px){.blog-hero{padding:3rem 0 2.75rem}.blog-content{font-size:1.02rem}.blog-cta{padding:1.5rem}.blog-wa{bottom:1.5rem;left:1rem}}