/* ==========================================================================
   AsaanPakistan Design Tokens : single source of truth for color/type/shape.
   ========================================================================== */
:root{
  --color-bg:#ffffff;
  --color-surface:#eaf5ee;
  --color-text:#14231a;
  --color-accent:#1f7a4d;
  --color-accent-2:#0f5132;
  --color-divider:color-mix(in srgb, var(--color-text) 16%, transparent);
  --color-accent-100:#e3f3e9;
  --color-accent-600:#1a6b43;
  --color-accent-700:#145536;
  --color-accent-800:#0f3f28;
  --color-accent-2-100:#dcefe3;
  --color-accent-2-700:#0b3d27;
  --color-accent-2-800:#082e1e;
  --color-neutral-100:#f6faf7;
  --color-neutral-700:#4d5952;
  --color-warning-100:#fffbf0;
  --color-warning-600:#e6a817;
  --color-warning-800:#7a4a00;
  --color-danger-100:#fdecea;
  --color-danger-600:#d64545;
  --color-danger-800:#7a1f1f;
  --font-heading:"Caprasimo", system-ui, sans-serif;
  --font-body:"Figtree", system-ui, sans-serif;
  --radius-lg:32px;
  --radius-md:16px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px color-mix(in srgb, var(--color-text) 14%, transparent);
  --shadow-md:0 3px 10px color-mix(in srgb, var(--color-text) 16%, transparent);
  --shadow-lg:0 12px 32px color-mix(in srgb, var(--color-text) 22%, transparent);
  --max-width:800px;
}

@font-face{font-family:"Caprasimo";font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/uploads/fonts/caprasimo-400.woff2") format("woff2");}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/uploads/fonts/figtree-400.woff2") format("woff2");}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url("/wp-content/uploads/fonts/figtree-600.woff2") format("woff2");}
@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url("/wp-content/uploads/fonts/figtree-700.woff2") format("woff2");}

*,*::before,*::after{box-sizing:border-box}
body{font-family:var(--font-body);font-size:16px;line-height:1.7;color:var(--color-text);background:var(--color-bg);margin:0}
a{color:var(--color-accent);text-decoration:none;transition:color .2s}
a:hover{color:var(--color-accent-700);text-decoration:underline}
img{max-width:100%;height:auto;display:block}
p{margin:0 0 1.1em}
html{scroll-behavior:smooth}
::selection{background:var(--color-accent);color:#fff}

/* TYPOGRAPHY */
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:400;line-height:1.25;color:var(--color-text);margin:0 0 .5em}
h1{font-size:clamp(28px,4vw,42px)}
h2{font-size:24px}
h3{font-size:18px}
h4{font-size:16px}

/* HEADER */
.site-header{background:var(--color-bg)!important;border-bottom:1px solid var(--color-divider)!important;box-shadow:none!important;position:sticky;top:0;z-index:999}
.site-branding{padding:14px 0}
.site-title a,.site-title a:hover{color:var(--color-text)!important;font-family:var(--font-heading);font-weight:400}

/* NAVIGATION */
.main-navigation a{color:var(--color-text)!important;font-family:var(--font-body);font-size:14px;font-weight:500;padding:8px 16px;border-radius:var(--radius-sm);transition:color .2s,background .2s;text-decoration:none!important}
.main-navigation a:hover{color:var(--color-accent)!important;background:var(--color-surface)}
.main-navigation .current-menu-item>a,.main-navigation .current-page-ancestor>a{color:var(--color-accent)!important;font-weight:700;background:transparent!important;border:0!important;box-shadow:none!important;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;text-decoration-color:var(--color-accent)}

/* BLOCK COLOR FIX (legacy block palette references) */
.has-vivid-green-cyan-background-color,.wp-block-cover{background-color:var(--color-accent)!important}
.has-vivid-green-cyan-color{color:var(--color-accent)!important}

/* HERO (block cover) */
.wp-block-cover{min-height:380px!important;padding:60px 40px!important}
.wp-block-cover .wp-block-cover__inner-container{max-width:780px;margin:0 auto;text-align:center}
.wp-block-cover h1,.wp-block-cover h2{color:#fff!important;font-size:clamp(24px,4vw,40px)!important;margin-bottom:16px;text-shadow:0 1px 3px rgba(0,0,0,.2)}
.wp-block-cover p{color:rgba(255,255,255,.92)!important;font-size:18px}
.home .entry-content>.wp-block-cover:first-child{margin-top:0!important}

/* BUTTONS */
.wp-block-button__link,.wp-block-button__link:visited{background:var(--color-accent)!important;color:#fff!important;border:none!important;border-radius:var(--radius-sm)!important;font-family:var(--font-body);font-weight:700!important;font-size:15px!important;padding:13px 30px!important;transition:all .2s!important;text-decoration:none!important;display:inline-block}
.wp-block-button__link:hover{background:var(--color-accent-700)!important;color:#fff!important;transform:translateY(-1px);box-shadow:var(--shadow-md)!important}
.wp-block-cover .wp-block-button__link{background:#fff!important;color:var(--color-accent)!important}
.wp-block-cover .wp-block-button__link:hover{background:var(--color-accent)!important;color:#fff!important}

/* PAGE TITLES HIDDEN (page hero is authored inline instead) */
.page .entry-header,.page .entry-header *{display:none!important;margin:0!important;padding:0!important;height:0!important}
.page .entry-content{padding-top:0!important}

/* LAYOUT: single column everywhere (no theme sidebar) */
.page .widget-area,.single .widget-area{display:none!important}
.page .content-area,.single .content-area{width:100%!important;max-width:100%!important}

/* ARTICLE CONTENT */
.entry-content{max-width:var(--max-width);margin-left:auto;margin-right:auto;font-size:16px;line-height:1.7}
.single .site-main{max-width:860px;margin:0 auto;padding:0 20px}
.single .entry-content{max-width:100%;padding:0 0 60px}
.entry-content h2{color:var(--color-text);font-size:24px;margin-top:48px;margin-bottom:14px}
.entry-content h3{color:var(--color-text);font-size:18px;margin-top:32px;margin-bottom:10px}
.entry-content ul,.entry-content ol{padding-left:1.4em;margin:0 0 1.2em}
.entry-content li{margin-bottom:8px}
.entry-content ul li::marker{color:var(--color-accent)}

/* PILL / CATEGORY BADGE */
.ap-pill{display:inline-flex;background:var(--color-accent-100);color:var(--color-accent-800);font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:4px 12px;border-radius:999px;margin-bottom:14px}

/* SURFACE CARD PRIMITIVE */
.ap-card{background:var(--color-surface);border-radius:var(--radius-md);padding:22px}

/* CHECKLIST */
.ap-checklist{display:flex;flex-direction:column;gap:12px;margin:0 0 28px;list-style:none;padding:0!important}
.ap-checklist li{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin-bottom:0!important}
.ap-checklist li svg{flex:0 0 auto;margin-top:2px;color:var(--color-accent-2)}
.ap-checklist li::marker{content:none}

/* NUMBERED STEP PROCESS */
.ap-steps{display:flex;flex-direction:column;gap:20px;margin:0 0 36px}
.ap-step{display:flex;gap:16px}
.ap-step-num{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--color-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:14px}
.ap-step h4{margin:0 0 4px;font-size:17px}
.ap-step p{margin:0;font-size:14px;opacity:.85}

/* FAQ (native <details>) */
.ap-faq{display:flex;flex-direction:column;gap:12px;margin:0 0 12px}
.ap-faq details{background:var(--color-surface);border-radius:var(--radius-md);padding:16px 20px}
.ap-faq summary{cursor:pointer;font-family:var(--font-heading);font-size:15px;list-style:none;position:relative;padding-right:30px}
.ap-faq summary::-webkit-details-marker{display:none}
.ap-faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--color-accent);line-height:1}
.ap-faq details[open] summary::after{content:"\2013"}
.ap-faq p{font-size:14px;opacity:.85;margin:10px 0 0}

/* TABLES */
.entry-content table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;margin:28px 0;border:1px solid var(--color-divider);border-radius:var(--radius-md);overflow:hidden}
.entry-content table thead th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent-700);background:var(--color-surface);padding:12px 16px;border-bottom:1px solid var(--color-divider);font-weight:600}
.entry-content table td{padding:12px 16px;border-bottom:1px solid color-mix(in srgb, var(--color-text) 8%, transparent);vertical-align:top}
.entry-content table tr:last-child td{border-bottom:none}

/* RELATED GUIDES CARD */
.ap-related{background:var(--color-surface);border-radius:var(--radius-lg);padding:22px;margin:40px 0}
.ap-related h5{font-family:var(--font-heading);font-weight:400;font-size:15px;margin:0 0 14px}
.ap-related-list{display:flex;flex-direction:column;gap:10px;list-style:none;padding:0!important}
.ap-related-list li{margin-bottom:0!important}
.ap-related-list a{display:flex;justify-content:space-between;color:var(--color-text);font-size:13px;text-decoration:none}
.ap-related-list a:hover{color:var(--color-accent);text-decoration:none}
.ap-related-list a span{color:var(--color-accent)}

/* POST META */
.entry-meta,.entry-footer{font-size:13px;color:var(--color-neutral-700);margin-bottom:24px;display:flex;gap:16px;flex-wrap:wrap;opacity:.7}
.entry-meta a{color:var(--color-accent)}

/* POST TITLE */
.single .entry-header .entry-title{font-family:var(--font-heading);font-weight:400;font-size:clamp(28px,4vw,42px);color:var(--color-text);line-height:1.1;margin-bottom:14px;padding-top:32px}
.single .entry-meta{margin-bottom:24px;border-bottom:none;padding-bottom:0}

/* CATEGORY / ARCHIVE */
.archive .site-main,.category .site-main,.blog .site-main{max-width:900px;margin:0 auto;padding:40px 20px;width:100%}
.archive .widget-area,.category .widget-area,.blog .widget-area{display:none!important}
.archive .content-area,.category .content-area,.blog .content-area{width:100%!important;max-width:100%!important}
.archive .page-header,.category .page-header{background:var(--color-accent);color:#fff;padding:40px 32px;border-radius:var(--radius-lg);margin-bottom:40px;width:100%;max-width:100%;box-sizing:border-box}
.archive .page-title,.category .page-title{font-family:var(--font-heading);font-weight:400;color:#fff!important;font-size:28px;margin:0 0 8px}
.archive .taxonomy-description,.category .taxonomy-description{color:rgba(255,255,255,.9);margin:0}
.archive article,.category article{background:var(--color-bg);border:1px solid var(--color-divider);border-radius:var(--radius-md);padding:24px 28px;margin-bottom:20px;transition:box-shadow .2s,transform .2s}
.archive article:hover,.category article:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.archive .entry-title a,.category .entry-title a{font-family:var(--font-heading);font-weight:400;color:var(--color-text);font-size:20px}
.archive .entry-title a:hover,.category .entry-title a:hover{color:var(--color-accent);text-decoration:none}
.archive .entry-summary,.category .entry-summary{color:var(--color-neutral-700);font-size:15px;margin-top:8px}

/* FORM FIELDS (contact page, WPForms/SureForms defaults) */
input[type=text],input[type=email],input[type=tel],input[type=url],textarea,select{width:100%;padding:12px 16px;font-size:15px;font-family:var(--font-body);border:1px solid var(--color-divider);border-radius:var(--radius-sm);color:var(--color-text);background:var(--color-bg);transition:border-color .2s,box-shadow .2s;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--color-accent)!important;box-shadow:0 0 0 3px var(--color-accent-100)}
label{display:block;font-weight:600;font-size:14px;color:var(--color-text);margin-bottom:6px}
input[type=submit],button[type=submit]{background:var(--color-accent)!important;color:#fff!important;border:none;border-radius:var(--radius-sm);font-size:15px;font-weight:700;padding:13px 32px;cursor:pointer;transition:background .2s,transform .2s;font-family:var(--font-body)}
input[type=submit]:hover,button[type=submit]:hover{background:var(--color-accent-700)!important;transform:translateY(-1px)}

/* LEGAL / STATIC PAGES (fallback for any plain-block page content) */
.page .entry-content{max-width:780px;margin:0 auto;padding:40px 20px 60px}
.page .entry-content h1{font-family:var(--font-heading);font-weight:400;color:var(--color-text);font-size:30px;margin-bottom:16px}
.page .entry-content h2{color:var(--color-text);font-size:19px;margin-top:40px;padding-bottom:8px;border-bottom:1px solid var(--color-divider)}
.page .entry-content h3{color:var(--color-text);font-size:16px}
.page .entry-content p{font-size:15px;line-height:1.8;color:var(--color-text)}

/* FOOTER (existing widget structure, recolored to the shared token palette) */
.footer-widgets{background:var(--color-text)!important;overflow:hidden}
.site-info{display:none!important}
.site-footer.footer-bar-active.footer-bar-align-right{display:none!important}
#footer-widgets,#footer-widgets .site.footer-widgets,.footer-widgets-container,.inside-footer-widgets,.footer-widget-1{max-width:100%!important;width:100%!important;padding:0!important;margin:0!important;background:transparent!important}
.footer-widget-1 .widget_custom_html,.footer-widget-1 .textwidget,.footer-widget-1 .custom-html-widget{margin:0!important;padding:0!important}
.footer-widget-1 .widget.inner-padding{padding:0!important}

.ap-ft{background:var(--color-accent-2-800);color:#fff;font-family:var(--font-body);padding:48px 40px 0;line-height:1.4}
.ap-ft *,.ap-ft *::before,.ap-ft *::after{box-sizing:border-box}
.ap-ft a{color:inherit;text-decoration:none}
.ap-ft .ap-ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.ap-ft .ap-ft-brand p{font-size:13px;color:rgba(255,255,255,0.60);line-height:1.7;margin:12px 0 20px;max-width:42ch}
.ap-ft .ap-ft-logo{display:flex;align-items:center;gap:10px}
.ap-ft .ap-ft-logo-box{width:36px;height:36px;background:var(--color-accent);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:13px;color:#fff;letter-spacing:.5px}
.ap-ft .ap-ft-logo-text{font-family:var(--font-heading);font-size:16px;font-weight:400;color:#fff;line-height:1.2}
.ap-ft .ap-ft-logo-text span{display:block;font-family:var(--font-body);font-size:12px;font-weight:400;color:rgba(255,255,255,0.55);margin-top:2px}
.ap-ft .ap-ft-trust{display:flex;gap:8px;flex-wrap:wrap}
.ap-ft .ap-ft-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:5px 10px;border-radius:20px;background:rgba(255,255,255,0.10);color:rgba(255,255,255,0.85);border:0.5px solid rgba(255,255,255,0.15);line-height:1}
.ap-ft .ap-ft-badge svg{width:12px;height:12px;flex-shrink:0}
.ap-ft .ap-ft-col h4{font-family:var(--font-body);font-size:11px;font-weight:600;color:rgba(255,255,255,0.40);text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px}
.ap-ft .ap-ft-col a{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,0.70);margin-bottom:10px;line-height:1.4;transition:color .15s ease}
.ap-ft .ap-ft-col a:hover{color:#fff}
.ap-ft .ap-ft-col a svg{width:14px;height:14px;flex-shrink:0;color:rgba(255,255,255,0.45)}
.ap-ft .ap-ft-col a:hover svg{color:rgba(255,255,255,0.85)}
.ap-ft .ap-ft-divider{border:none;border-top:0.5px solid rgba(255,255,255,0.10);margin:0}
.ap-ft .ap-ft-bottom{display:flex;justify-content:space-between;align-items:center;padding:20px 0;flex-wrap:wrap;gap:12px}
.ap-ft .ap-ft-copy{font-size:12px;color:rgba(255,255,255,0.45);margin:0}
.ap-ft .ap-ft-legal{display:flex;gap:20px;flex-wrap:wrap}
.ap-ft .ap-ft-legal a{font-size:12px;color:rgba(255,255,255,0.45);text-decoration:none;transition:color .15s ease}
.ap-ft .ap-ft-legal a:hover{color:rgba(255,255,255,0.85)}

@media (max-width: 900px){
  .ap-ft{padding:40px 24px 0}
  .ap-ft .ap-ft-grid{grid-template-columns:1fr 1fr;gap:32px}
  .ap-ft .ap-ft-brand{grid-column:1 / -1}
}
@media (max-width: 560px){
  .ap-ft{padding:32px 20px 0}
  .ap-ft .ap-ft-grid{grid-template-columns:1fr;gap:28px;margin-bottom:28px}
  .ap-ft .ap-ft-brand{grid-column:auto}
  .ap-ft .ap-ft-bottom{flex-direction:column;align-items:flex-start;gap:8px}
  .ap-ft .ap-ft-legal{gap:14px}
}

/* POST NAVIGATION */
.post-navigation{margin:40px 0;padding:24px;background:var(--color-surface);border-radius:var(--radius-md)}
.post-navigation .nav-links{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.post-navigation a{color:var(--color-accent);font-weight:600}
.post-navigation a:hover{color:var(--color-accent-700)}

/* ACCESSIBILITY */
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}

/* ADMIN BAR OFFSET FOR STICKY HEADER */
.admin-bar .site-header{top:32px}
@media screen and (max-width: 782px){.admin-bar .site-header{top:46px}}

/* RESPONSIVE */
@media(max-width:768px){
  .wp-block-cover{min-height:280px!important;padding:40px 20px!important}
  .wp-block-cover h1,.wp-block-cover h2{font-size:22px!important}
  .entry-content{padding:0 16px 40px}
  .entry-content table{font-size:13px}
  .entry-content table td,.entry-content table th{padding:10px 8px}
  .archive .page-header,.category .page-header{padding:28px 20px}
}
@media(max-width:480px){
  h1{font-size:22px}
  h2{font-size:18px}
  .entry-content h2{font-size:18px}
  .main-navigation a{padding:6px 12px;font-size:14px}
  .entry-content table thead{display:none}
  .entry-content table tr{display:block;margin-bottom:12px;border:1px solid var(--color-divider);border-radius:var(--radius-sm);overflow:hidden}
  .entry-content table td{display:flex;justify-content:space-between;border-bottom:1px solid var(--color-divider)}
}

/* ==========================================================================
   HOME PAGE (Elementor, post 2582) : legacy rule remnants from the pre-2026-08-02
   Elementor markup (stretched hero, .elementor-col-33.33 dividers). The page was
   fully rebuilt section-by-section below (see 'HOME PAGE rebuild v2' block further
   down); these rules are kept only because .ap-card-icon-wrap / .ap-step-bubble /
   the accordion styling are still reused by the new markup. Anything referencing
   'elementor-section-stretched' or the old full-bleed hero no longer applies.
   ========================================================================== */
.elementor-2582 .elementor-container,
.elementor-2582 > .elementor > .elementor-section .elementor-container,
.elementor-2582 > .elementor > .elementor-section.elementor-section-full_width > .elementor-container{
    max-width:1100px;
}

.ap-service-card{display:flex;flex-direction:column;transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease;min-height:340px}
.ap-service-card:hover{transform:translateY(-2px)}
.ap-service-card .elementor-widget-wrap{display:flex;flex-direction:column;width:100%}
.ap-card-cta{margin-top:auto}
@media (max-width: 768px){.ap-service-card{min-height:auto}}

.ap-card-icon-wrap{width:72px;max-width:72px;height:72px;margin:0 auto 24px;background:var(--color-accent-100);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-left:auto!important;margin-right:auto!important;align-self:center!important}
.ap-card-icon-wrap .elementor-widget-container{width:72px!important;max-width:72px!important;text-align:center!important;margin:0 auto!important}
.ap-card-icon-wrap .elementor-icon{line-height:1;color:var(--color-accent)}
.ap-card-icon-wrap .elementor-icon i,.ap-card-icon-wrap .elementor-icon svg{color:var(--color-accent)!important;fill:var(--color-accent)!important}
.ap-card-icon-wrap svg{width:32px;height:32px}

.ap-step-bubble{flex:0 0 72px!important;width:72px!important;max-width:72px!important;height:72px;margin:0 auto 24px;background:var(--color-accent)!important;border:2px solid var(--color-accent)!important;border-radius:50%;color:#fff!important;font-family:var(--font-heading);font-size:28px;display:flex;align-items:center;justify-content:center;line-height:1;align-self:center!important;box-sizing:border-box;margin-left:auto!important;margin-right:auto!important}
.ap-step-bubble .elementor-widget-container{width:72px!important;max-width:72px!important;text-align:center!important;margin:0 auto!important}
.ap-step-bubble .elementor-heading-title{color:#fff!important}

.elementor-accordion-item.elementor-open,
.elementor-accordion .elementor-tab-title.elementor-active{border-left:3px solid var(--color-accent)!important;background:var(--color-surface)!important}
.elementor-accordion .elementor-tab-title{transition:border-color .2s ease,background .2s ease;padding:22px 28px;font-family:var(--font-body);font-size:18px;font-weight:600;color:var(--color-text)}
.elementor-accordion-item{border-left:4px solid transparent;transition:border-color .2s ease,background .2s ease;padding:0}
.elementor-accordion-item.elementor-open .elementor-accordion-icon-closed{display:none}
.elementor-accordion-item:not(.elementor-open) .elementor-accordion-icon-opened{display:none}
.elementor-accordion .elementor-tab-title:hover{background:var(--color-accent-100)}
.elementor-accordion .elementor-tab-content{padding:4px 28px 28px 32px;font-size:17px;line-height:1.7;color:var(--color-text)}
.elementor-2582 .elementor-tab-content,
.elementor-2582 .elementor-accordion .elementor-tab-content{font-size:17px!important;line-height:1.7!important}

@media (min-width: 768px){
  .elementor-2582 .elementor-top-section.elementor-section-stretched > .elementor-container > .elementor-column.elementor-col-33.33:not(:last-child) > .elementor-widget-wrap{
    border-right:1px solid rgba(255,255,255,0.20);
    padding-right:24px;
    padding-left:24px;
  }
}

@media (max-width: 1024px){
    .elementor-2582 .elementor-top-section > .elementor-container{flex-wrap:wrap}
    .elementor-2582 .elementor-top-section > .elementor-container > .elementor-column{flex:0 0 100%!important;max-width:100%!important;width:100%!important;margin-bottom:28px}
    .elementor-2582 .elementor-top-section > .elementor-container > .elementor-column:last-child{margin-bottom:0}
    .elementor-2582 .elementor-top-section .elementor-container .elementor-container > .elementor-column{flex:0 0 100%!important;max-width:100%!important;width:100%!important}
}
@media (max-width: 767px){
    .elementor-2582 .elementor-top-section{padding-left:20px!important;padding-right:20px!important}
    .elementor-2582 .elementor-top-section > .elementor-container > .elementor-column{margin-bottom:20px}
    .ap-step-bubble{flex:0 0 56px!important;width:56px!important;max-width:56px!important}
    .ap-step-bubble .elementor-widget-container{width:56px!important;max-width:56px!important}
    .ap-card-icon-wrap,.ap-card-icon-wrap .elementor-widget-container{width:56px!important;max-width:56px!important}
}

/* BREADCRUMB (Rank Math) */
.ap-breadcrumb{margin:0}
.ap-breadcrumb .rank-math-breadcrumb p{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;opacity:0.75;padding:8px 0 24px;margin:0;align-items:center}
.ap-breadcrumb a{color:var(--color-text);text-decoration:none}
.ap-breadcrumb a:hover{color:var(--color-accent);text-decoration:underline}
.ap-breadcrumb .last{color:var(--color-accent-700)}
.ap-breadcrumb .separator{opacity:0.6;margin:0 2px}


/* SINGLE POST SIDEBAR (Related Guides) */
.page .widget-area{display:none!important}
.single .content-area{width:100%!important;max-width:100%!important}
.single #right-sidebar.widget-area{display:block!important;background:transparent!important}
.single .site-main{max-width:1180px}
.single .inside-right-sidebar{padding:0;position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
.single #right-sidebar .widget-title{display:none}


/* ==========================================================================
   HOME PAGE (Elementor, post 2582) rebuild, 2026-08-02 v2.
   Full component-level rebuild matching the SEO Redesign mockup: hero,
   services, how-it-works, stats, latest-guides, why-us, newsletter, FAQ.
   Colors are passed straight through as var(...) strings inside the
   Elementor JSON itself (Elementor just interpolates the setting value
   into the compiled CSS rule, it does not validate it), so this page's
   palette stays tied to the same :root tokens as the rest of the site
   instead of hardcoded hex like the pre-rebuild version used.
   ========================================================================== */
.ap-guide-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.ap-guide-card{text-decoration:none;color:var(--color-text);background:var(--color-surface);border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease}
.ap-guide-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.ap-guide-card-tag{display:inline-flex;background:var(--color-accent-100);color:var(--color-accent-800);font-size:11px;padding:4px 12px;border-radius:999px;width:fit-content}
.ap-guide-card h4{font-family:var(--font-heading);font-weight:400;font-size:17px;margin:6px 0 0}
.ap-guide-card p{font-size:13px;opacity:0.75;margin:0}
.ap-guide-card-meta{font-size:12px;opacity:0.6;margin-top:6px}

.elementor-2582 .elementor-widget-html{overflow:visible}
.elementor-2582 .ap-service-card{transition:box-shadow .2s ease,transform .2s ease;min-height:320px}
.elementor-2582 .ap-service-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)!important}

/* ==========================================================================
   HEADER NAV SEARCH, 2026-08-02 v3. Matches the SEO Redesign mockup's nav:
   pill-shaped search box after the nav links, wired to WP's own search.
   ========================================================================== */
.main-navigation .ap-nav-search{display:flex;align-items:center;padding:0!important;margin-left:8px}
.main-navigation .ap-nav-search:hover{background:transparent!important}
.ap-search-form{display:flex;align-items:center;gap:8px;background:var(--color-surface);border:1px solid var(--color-divider);border-radius:999px;padding:8px 16px;min-width:180px}
.ap-search-form svg{color:var(--color-neutral-700);flex:none}
.ap-search-form input[type=search]{border:none;background:transparent;outline:none;font-family:var(--font-body);font-size:13px;width:100%;color:var(--color-text);padding:0}
.ap-search-form input[type=search]::-webkit-search-cancel-button{display:none}
@media (max-width: 768px){.ap-nav-search{margin:12px 0 0;width:100%}.ap-search-form{width:100%;min-width:0}}

/* ==========================================================================
   HEADER BRAND WORDMARK, 2026-08-02 v4. Replaces the raster two-line logo
   with the SEO Redesign mockup's compact badge+text, built from tokens.
   ========================================================================== */
.ap-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.ap-brand-badge{width:38px;height:38px;border-radius:50%;background:var(--color-accent);color:var(--color-bg);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:15px;flex:none;line-height:1}
.ap-brand-text{font-family:var(--font-heading);font-size:19px;color:var(--color-text);white-space:nowrap}
.site-logo{display:flex;align-items:center}

/* ==========================================================================
   HEADER NAV HEIGHT, 2026-08-02 v5. GeneratePress's theme CSS forces a 60px
   line-height on nav links (a generous default click target), which kept the
   header tall (~117px) even after the logo was slimmed down. Desktop only,
   since the mobile slide-out menu's roomier spacing is intentional and fine.
   ========================================================================== */
@media (min-width: 769px){
  .main-navigation .main-nav ul li a{line-height:1.4}
}

/* ==========================================================================
   HEADER NAV BACKGROUND, 2026-08-02 v6. GeneratePress's own theme CSS sets
   .main-navigation background to its internal --base-3 variable (#F9FAFB,
   a GP default unrelated to our tokens), producing a faint off-white strip
   behind the nav links that didn't match the header's pure white background.
   ========================================================================== */
.site-header .main-navigation,
.site-header .main-navigation ul ul{
    background-color:transparent;
}

/* ==========================================================================
   HOME PAGE POLISH PASS, 2026-08-02 v7. Full visual QA of the rebuilt page:
   1) Service cards had unequal heights (each sized to its own content instead
      of stretching to match its already-equal-height parent column).
   2) FAQ accordion spanned the full ~1120px content width instead of the
      mockup's contained, more readable max-width.
   ========================================================================== */
.elementor-2582 .ap-service-card{height:100%}
.elementor-2582 .elementor-accordion{max-width:760px}

/* ==========================================================================
   FAQ ACCORDION LINK COLOR, 2026-08-02 v8. The visible question text sits
   inside an <a class="elementor-accordion-title"> anchor, which carries its
   own default link color (a light blue) that doesn't inherit from the parent
   .elementor-tab-title rule already themed, so closed questions showed blue
   instead of the site's text/accent colors.
   ========================================================================== */
.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-title .elementor-accordion-title,
.elementor-accordion .elementor-tab-title .elementor-accordion-icon{
    color:var(--color-text)!important;
}
.elementor-accordion .elementor-tab-title:hover .elementor-accordion-title,
.elementor-accordion .elementor-tab-title:hover .elementor-accordion-icon{
    color:var(--color-accent)!important;
}
.elementor-accordion-item.elementor-open .elementor-tab-title .elementor-accordion-title,
.elementor-accordion-item.elementor-open .elementor-tab-title .elementor-accordion-icon,
.elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-title,
.elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon{
    color:var(--color-accent)!important;
}

/* ==========================================================================
   SITE WRAPPER BACKGROUND, 2026-08-02 v9. GeneratePress's main .site wrapper
   (.site.grid-container.container.hfeed) uses its own internal --base-3
   variable (#F9FAFB, the same GP default that caused the earlier nav-strip
   mismatch) as its background instead of our --color-bg (#ffffff). Most
   pages hide this because their own full-bleed wp:html/Elementor content
   paints over it, but single posts don't, showing a faint gray box behind
   the breadcrumb, title, and byline. Overridden site-wide for consistency.
   ========================================================================== */
.site.grid-container{
    background-color:var(--color-bg);
}


/* 2026-08-02: bespoke page wrappers (.ap-about-wrap/.ap-legal-wrap/.ap-contact-wrap) each set their own
   max-width + padding, but they render inside .entry-content, whose own .page .entry-content{max-width:780px}
   fallback rule was squeezing them narrower than intended (About's 900px measure rendered at ~740px).
   Neutralize the outer constraint whenever a bespoke wrapper is present so the page's own width wins. */
.entry-content:has(.ap-about-wrap),
.entry-content:has(.ap-legal-wrap),
.entry-content:has(.ap-contact-wrap),
.entry-content:has(.ap-nadra-wrap){
  max-width:none;
  padding:0;
}


/* 2026-08-03: full author byline card on single posts (photo, name, role), replacing the
   tiny theme-native "by Author" text (date stays, it's still useful metadata). */
.single .entry-meta .byline{display:none}
.ap-byline{display:flex;align-items:center;gap:14px;background:var(--color-surface);border:1px solid var(--color-accent-100);border-radius:var(--radius-md);padding:14px 18px;margin:40px 0 0}
.ap-byline-photo{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--color-accent);flex-shrink:0}
.ap-byline-text{display:flex;flex-direction:column;gap:2px}
.ap-byline-name{font-size:14px;font-weight:600;color:var(--color-text)}
.ap-byline-name a{color:var(--color-accent-700);text-decoration:none}
.ap-byline-name a:hover{text-decoration:underline}
.ap-byline-role{font-size:12px;color:var(--color-neutral-700)}


/* 2026-08-03: "On This Page" sidebar TOC (auto-generated from H2s), sits above Related Guides. */
.ap-toc{background:var(--color-surface);border-radius:var(--radius-md);padding:20px 22px;margin:0 0 20px}
.ap-toc h5{font-family:var(--font-heading);font-weight:400;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--color-neutral-700);margin:0 0 14px}
.ap-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ap-toc li{border-left:2px solid transparent;margin:0}
.ap-toc a{display:block;padding:6px 0 6px 12px;font-size:13px;color:var(--color-neutral-700);text-decoration:none;transition:color .15s,border-color .15s}
.ap-toc a:hover{color:var(--color-accent)}
.ap-toc li.ap-toc-active{border-left-color:var(--color-accent)}
.ap-toc li.ap-toc-active a{color:var(--color-text);font-weight:600}


/* ==========================================================================
   BLOG POST UI PASS, 2026-08-03. Full punch-list fix from a UI/UX audit of
   /nadra/cnic-renewal/: conflicting dates, redundant category pill, low-
   contrast breadcrumb, narrow article column, plain tables, unseparated
   step options, undifferentiated FAQ open-state, and thin typography
   hierarchy. All content-shape changes (Quick Summary header strip, Good
   news callout, Common Mistakes cards, single-link Related Guides CTA) are
   done dynamically via the_content filters in design-system-enhancements.php,
   not by hand-editing post content, so every post benefits automatically.
   ========================================================================== */

/* Raw theme date meta duplicated (and contradicted) the "Last Updated" badge
   in the content; the badge is now dynamic (see PHP) so it's the one date shown. */
.single .entry-meta{display:none}

/* Category pill is redundant on single posts: the breadcrumb already shows NADRA. */
.single .entry-content>.ap-pill:first-child{display:none}

.ap-updated-badge{display:inline-flex;align-items:center;gap:6px;background:var(--color-accent-2-100);color:var(--color-accent-2-800);font-family:var(--font-body);font-size:12px;font-weight:600;padding:6px 14px;border-radius:999px;margin:0 0 20px}
.ap-updated-badge svg{flex:none}

/* Breadcrumb: stronger contrast, larger tap targets. */
.ap-breadcrumb .rank-math-breadcrumb p{opacity:1}
.ap-breadcrumb a{color:var(--color-neutral-700);padding:4px 3px;display:inline-block}
.ap-breadcrumb a:hover{color:var(--color-accent)}
.ap-breadcrumb .last{color:var(--color-accent-700);font-weight:600}
.ap-breadcrumb .separator{color:var(--color-neutral-700);opacity:.5}

/* TOC labels: single-line with ellipsis instead of wrapping to two lines; full text on hover
   via the widget's title attribute. */
.ap-toc a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Tables: horizontal scroll on narrow screens, subtle zebra striping, bold label column. */
.entry-content .wp-block-table{overflow-x:auto}
.entry-content table tbody tr:nth-child(even) td{background:var(--color-neutral-100)}
.entry-content table tbody td:first-child{font-weight:600}
.ap-table--summary tbody td:first-child{color:var(--color-neutral-700);font-weight:600}

/* Step sections: merge each option's heading + step list into one visual card so two
   procedures ("Option 1" / "Option 2") read as clearly separate choices. */
.entry-content :is(h2,h3):has(+ .ap-steps){background:var(--color-surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:18px 24px;margin:32px 0 0;border-bottom:none}
.entry-content :is(h2,h3):has(+ .ap-steps)+.ap-steps{background:var(--color-surface);border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:8px 24px 24px;margin:0 0 32px}

/* Step circles: smaller so the step title/body content leads visually instead of the number. */
.ap-step-num{width:28px;height:28px;font-size:13px}
.ap-step h4{font-size:15px}
.ap-step p{font-size:13.5px;color:var(--color-neutral-700);opacity:1}

/* Step connector line: a faint vertical line linking each step circle to the next. */
.ap-step{position:relative}
.ap-step:not(:last-child)::before{content:"";position:absolute;left:13.5px;top:28px;bottom:-20px;width:1px;background:var(--color-accent);opacity:.3}

/* Common Mistakes: warning-tinted cards instead of a plain bullet list (class added dynamically). */
.ap-mistakes{list-style:none;padding:0!important;display:flex;flex-direction:column;gap:12px;margin:0 0 28px}
.ap-mistakes li{background:var(--color-warning-100);border-left:3px solid var(--color-warning-600);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:0!important;font-size:14px;line-height:1.6;display:flex;gap:10px;align-items:flex-start}
.ap-mistakes li::before{content:"\26A0";color:var(--color-warning-600);flex:none;font-size:15px;line-height:1.4}
.ap-mistakes li strong{color:var(--color-warning-800)}

/* Good news callout: pulled out of inline bold text into a tinted success card. */
.ap-callout-success{display:flex;gap:12px;align-items:flex-start;background:var(--color-surface);border-left:3px solid var(--color-accent);border-radius:var(--radius-sm);padding:16px 20px;margin:0 0 28px}
.ap-callout-success svg{flex:none;margin-top:3px}
.ap-callout-success p{margin:0!important;font-size:15px;line-height:1.7}

/* FAQ: distinct open-state (was identical to closed), larger answer text, full-row tap target. */
.ap-faq details{background:var(--color-neutral-100);border-left:3px solid transparent;transition:background .2s,border-color .2s}
.ap-faq details[open]{background:var(--color-surface);border-left-color:var(--color-accent)}
.ap-faq summary{min-height:52px;display:block}
.ap-faq summary::after{font-size:18px;font-weight:700}
.ap-faq p{font-size:15px;line-height:1.7}

/* Related Guides: single remaining valid link (common while most of the 33-post backlog is
   still draft) reads as a CTA rather than an orphaned one-item list (class/heading set in PHP). */
.ap-related--single{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--color-accent-100)}
.ap-related--single h5{margin:0;color:var(--color-accent-800)}
.ap-related--single .ap-related-list{flex-direction:row}
.ap-related--single .ap-related-list a{font-size:14px;font-weight:600;color:var(--color-accent-800)}

/* Typography: clearer H2/H3 hierarchy (bottom-border H2), slightly taller body line-height. */
body,.entry-content{line-height:1.75}
.entry-content h2{font-size:22px;padding-bottom:10px;border-bottom:2px solid var(--color-accent-100)}

/* 2026-08-03: GeneratePress's own generated CSS (.is-right-sidebar{width:30%}, .content-area
   {width:70%}) gave single posts a narrower article column than intended (570px at a 1024px
   viewport). Capping the sidebar at a fixed 260px (narrower than its native 30% at every tested
   desktop width) hands the rest of the row to the article column instead. */
@media (min-width:769px){
  .single #right-sidebar.is-right-sidebar{width:260px!important}
  .single .site-content .content-area{width:calc(100% - 260px)!important}
}

/* ==========================================================================
   THIRD BLOG POST UI PASS, 2026-08-03. Remaining genuinely-new items from a
   follow-up audit (several other items in that audit, e.g. raw dates, breadcrumb
   contrast, TOC active-state/sticky, step circle size, mistake-card color, FAQ
   open state, were re-verified live against computed styles and were already
   correct from the previous pass, so were left untouched rather than re-applied).
   ========================================================================== */

/* TOC heading: sentence case (was uppercase), smaller, quieter, matching the doc-site
   convention the audit asked for. */
.ap-toc h5{text-transform:none;font-size:11px}

/* Fee tier color coding (class added dynamically per row in PHP). */
.entry-content table tr.ap-tier-normal td:first-child{border-left:3px solid var(--color-accent)}
.entry-content table tr.ap-tier-urgent td:first-child{border-left:3px solid var(--color-warning-600)}
.entry-content table tr.ap-tier-executive td:first-child{border-left:3px solid var(--color-danger-600)}

/* Distinct Option 1 / Option 2 step headings (classes added dynamically in PHP), so two
   procedures in one guide read as clearly separate choices instead of two identical cards. */
.entry-content h3.ap-step-heading--solid{background:var(--color-accent-2);color:#fff}
.entry-content h3.ap-step-heading--solid+.ap-steps{background:var(--color-accent-2-100)}
.entry-content h3.ap-step-heading--outline{background:var(--color-bg);border:2px solid var(--color-accent);color:var(--color-text)}
.entry-content h3.ap-step-heading--outline+.ap-steps{background:var(--color-surface);border:2px solid var(--color-accent);border-top:none}

/* Table border: subtle green tint instead of neutral gray, matching the brand palette. */
.entry-content table{border-color:var(--color-accent-100)}
.entry-content table thead th{border-bottom-color:var(--color-accent-100)}
.entry-content table td{border-bottom-color:color-mix(in srgb, var(--color-accent) 12%, transparent)}

/* Search box: strengthen the border so it reads clearly as an interactive field at a glance. */
.ap-search-form{border-color:var(--color-accent-100)}
.ap-search-form:focus-within{border-color:var(--color-accent)}

/* FAQ: open question shifts to accent color as a second signal alongside the left border
   and background tint (kept at font-weight 400 since Caprasimo is never bolded site-wide). */
.ap-faq details[open] summary{color:var(--color-accent-800)}

/* Back to top button: mobile only, desktop already has the sticky sidebar TOC. */
.ap-back-to-top{position:fixed;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;background:var(--color-accent);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;z-index:500}
.ap-back-to-top.ap-visible{opacity:1;visibility:visible}
@media (min-width:769px){.ap-back-to-top{display:none}}

/* ==========================================================================
   FOURTH BLOG POST UI PASS, 2026-08-05. Follow-up audit fixes: the sidebar
   TOC's scroll-spy active state (JS rewritten to scroll+rAF, see
   design-system-enhancements.php, the prior IntersectionObserver version was
   confirmed via live scroll testing to register its initial snapshot only and
   never re-fire), TOC labels now pre-shortened at word boundaries in PHP
   (ap_toc_short_label()) instead of relying on mid-word CSS ellipsis, fee-tier
   badges, and a small mistake-card weight tweak. Several other items in this
   audit (Quick Summary header strip, changes-table bold column, step circle
   size, Option 2 container distinction, step connector line, FAQ open state/
   answer size, H2/H3 hierarchy, body line-height, breadcrumb contrast, search
   box styling) were re-verified live against computed styles/DOM and were
   already correct from prior passes, so were left untouched.
   ========================================================================== */

/* TOC: stronger active-state border + accent color (was --color-text), hover nudge. */
.ap-toc li{border-left:3px solid transparent}
.ap-toc a{transition:color .15s ease,padding-left .15s ease,border-color .15s ease}
.ap-toc a:hover{padding-left:16px}
.ap-toc li.ap-toc-active a{color:var(--color-accent)}

/* Fee tier badges: small colored pill per processing tier, alongside the existing left-border. */
.ap-tier-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}
.ap-tier-normal .ap-tier-badge{background:var(--color-accent-100);color:var(--color-accent-800)}
.ap-tier-urgent .ap-tier-badge{background:var(--color-warning-100);color:var(--color-warning-800)}
.ap-tier-executive .ap-tier-badge{background:var(--color-danger-100);color:var(--color-danger-800)}

/* Common Mistakes: explicit weight on the title, muted body color, so the title is
   scannable in under a second before reading the description. */
.ap-mistakes li strong{font-weight:600}
.ap-mistakes li{color:var(--color-neutral-700)}

/* 2026-08-05: 'Most common' tag next to the Normal fee tier, so the majority-choice row
   doesn't require reading all three tiers to find. Added dynamically in PHP alongside the
   existing badge (see ap-tier-badge). */
.ap-tier-tag{display:inline-block;font-size:11px;font-weight:600;color:var(--color-accent-700);opacity:.85;margin-left:4px}


/* ==========================================================================
   SIXTH BLOG POST UI PASS, 2026-08-05 (a fresh-eyes review, 88/100, that got most
   things right unlike the prior two repeats, breadcrumb-truncation and sparse-footer
   claims were checked live and found false, footer already has the full 4-column
   layout and the breadcrumb was rendering its full un-truncated title; step-item gap
   and mistake-card weight were already correct from earlier passes. Four genuine
   items implemented below. ========================================================================== */

/* Quick Summary / all tables: row divider darkened slightly (was 12% accent tint,
   nearly invisible on a bright screen). */
.entry-content table td{border-bottom-color:color-mix(in srgb, var(--color-accent) 20%, transparent)}

/* Checklist: wrap in a light card so it reads as an actionable 'bring these' block
   instead of blending into regular body prose. */
.ap-checklist{background:var(--color-neutral-100);border:1px solid var(--color-accent-100);border-radius:var(--radius-md);padding:18px 20px 6px}

/* Next Step CTA card: stronger left border + arrow, so it reads as an invitation to
   continue rather than a footnote (class added dynamically when exactly one related
   link survives the dead-link filter, see PHP). */
.ap-related--single{border-left:4px solid var(--color-accent)}


/* ==========================================================================
   EIGHTH BLOG POST UI PASS, 2026-08-05 (a 91/100 fresh-eyes review). Most claims
   already resolved or factually wrong on live/content verification (Executive fee
   badge already identical weight/size to Normal/Urgent, FAQ open-state accent
   already implemented, footer guide links already short labels, footer disclaimer
   already present, Option 2 steps already terser than Option 1 just one step longer,
   Changes table rows already genuinely distinct not duplicated). Two real, systemic
   content-shape issues confirmed and fixed with sitewide filters (see PHP). */

/* 'Tip: ...' callout: quiet accent-tinted card, distinct from the green 'Good news'
   success callout (different icon, no left-border-only treatment) so a tip doesn't
   read as an achievement/confirmation. */
.ap-callout-tip{display:flex;gap:12px;align-items:flex-start;background:var(--color-neutral-100);border:1px solid var(--color-accent-100);border-radius:var(--radius-sm);padding:16px 20px;margin:0 0 28px}
.ap-callout-tip svg{flex:none;margin-top:3px}
.ap-callout-tip p{margin:0!important;font-size:14.5px;line-height:1.7}


/* ==========================================================================
   TENTH BLOG POST UI PASS, 2026-08-05 (a 10th review, 86/100). Several claims
   already false on live verification (Fees row truncation, FAQ open-state accent,
   footer link labels, footer disclaimer, document checklist card, mistake-card
   overlap, Option 2 verbosity, intro-paragraph length), see PHP file comments and
   skill history for the exact checks. Real gaps: 'Important:'/'Note:' bolded
   lead-ins (an established authoring convention, same family as Tip/Good news)
   had never been styled, plus a generic FAQ subtitle line. */
.ap-callout-warning{display:flex;gap:12px;align-items:flex-start;background:var(--color-danger-100);border-left:3px solid var(--color-danger-600);border-radius:var(--radius-sm);padding:16px 20px;margin:0 0 28px}
.ap-callout-warning svg{flex:none;margin-top:3px}
.ap-callout-warning p{margin:0!important;font-size:14.5px;line-height:1.7;color:var(--color-danger-800)}
.ap-faq-subtitle{color:var(--color-neutral-700);font-size:14px;margin:-8px 0 20px!important}


/* ==========================================================================
   SEO PASS, 2026-08-05. An SEO audit (71/100) had two claims that were false on
   verification (schema: a full Rank Math @graph with HowTo/FAQPage/BreadcrumbList/
   BlogPosting/Person/Organization/WebSite already renders, not 'zero schema') and
   real gaps that were fixed: a duplicate hidden footer copyright line (removed
   at the source, see PHP), no outbound authority links, and a thin/bio-less author
   archive page. */
.ap-author-box{display:flex;gap:18px;align-items:flex-start;background:var(--color-surface);border-radius:var(--radius-lg);padding:24px 28px;margin:0 0 32px}
.ap-author-box-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--color-accent);flex-shrink:0}
.ap-author-box-role{font-size:13px;font-weight:600;color:var(--color-accent-700);margin:0 0 8px!important}
.ap-author-box-bio{font-size:14.5px;line-height:1.7;color:var(--color-neutral-700);margin:0!important}


/* 2026-08-19 (SEO audit pass): footer nav links computed to 18px tall, below the 24px
   WCAG 2.5.8 target-size minimum, on a site whose audience is overwhelmingly mobile. Padding
   only, so the visual rhythm of the footer columns is unchanged. */
.ap-ft .ap-ft-col a{padding:3px 0}
.ap-ft .ap-ft-legal a{display:inline-block;padding:4px 0}


/* 2026-08-19: the Home page FAQ accordion was rendering in Roboto, Elementor's built-in default
   scheme font (the kit's own typography is empty, so Elementor fell back to its defaults). That is
   outside this site's design system entirely, and it was being fetched from the Google Fonts CDN on
   every Home page view. Google Fonts is now blocked at the enqueue level, so these are mapped onto
   the real body token instead of falling back to a generic system sans. */
.elementor-accordion .elementor-accordion-title,
.elementor-accordion .elementor-tab-content,
.elementor-accordion .elementor-tab-content p,
.elementor-accordion .elementor-tab-content a,
.elementor-accordion .elementor-tab-content li{font-family:var(--font-body)}


/* 2026-08-19: the author archive was noindex because it was thin (a 280-character bio and a
   post list). Rather than leave the one page that consolidates author expertise out of the index,
   it was built into a real author page (origin story, background, scope, full guide list, all
   sourced from copy already on the About page) and then set to index. Selectors are prefixed with
   the wrapper class as a matter of course here, per the fallback-specificity rule. */
.ap-author-page{max-width:860px;margin:0 auto;padding:8px 20px 48px}
.ap-author-page .ap-author-section{margin:36px 0 0}
.ap-author-page .ap-author-section h2{font-family:var(--font-heading);font-weight:400;font-size:22px;margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid var(--color-accent-100);color:var(--color-text)}
.ap-author-page .ap-author-section p{font-size:16px;line-height:1.75;color:var(--color-text);margin:0 0 14px}
.ap-author-page .ap-author-note{font-size:14px;color:var(--color-neutral-700);background:var(--color-accent-100);border-radius:var(--radius-md);padding:14px 18px;margin-top:18px}
.ap-author-page .ap-author-note a{color:var(--color-accent-700);font-weight:600}
.ap-author-page .ap-guide-cards{margin-top:6px}
@media (max-width:768px){.ap-author-page{padding:4px 16px 40px}}


/* ============================================================
   2026-08-24 header and footer fix pass
   ============================================================ */

/* Sticky-header anchor offset.
   .site-header is position:sticky (79px desktop, 101px at 768px and below) but no
   scroll-padding was ever set for logged-out visitors, so every "On This Page" TOC
   link landed its target heading underneath the header. Verified on
   /nadra/cnic-renewal/: clicking "Quick Summary" put the H2 at y=32 while the
   header bottom sat at y=111. WordPress sets scroll-padding-top:32px itself, but
   only when the admin bar is present, which is why this stayed invisible while
   logged in. The admin-bar rules below keep the offset right in that case too. */
html { scroll-padding-top: 95px; }
html:has(body.admin-bar) { scroll-padding-top: 127px; }
@media (max-width: 768px) {
  html { scroll-padding-top: 117px; }
  html:has(body.admin-bar) { scroll-padding-top: 163px; }
}

/* ==========================================================================
   HOVER: COLOUR SHIFT INSTEAD OF UNDERLINE, 2026-08-29
   Links already rest as accent-coloured with no underline
   (a{color:var(--color-accent);text-decoration:none;transition:color .2s}),
   so the underline on hover was the inconsistent part, not the colour.
   Three earlier rules added one. All are replaced with a colour change.

   The header wordmark was the worst case, and it was two faults at once.
   .ap-brand is an <a> carrying text-decoration:none at specificity (0,1,0),
   which the global a:hover rule (0,1,1) overrode, so hovering the logo
   underlined it. And because .ap-brand-text sets its own
   color:var(--color-text), the inherited hover colour never reached it, so
   the wordmark underlined while changing no colour at all. Both fixed here.

   :focus is deliberately not included. Removing decoration there would
   weaken the keyboard focus affordance.
   ========================================================================== */

a:hover{color:var(--color-accent-700);text-decoration:none}

.ap-brand-text,.ap-brand-badge{transition:color .2s,background-color .2s}
.ap-brand:hover{text-decoration:none}
.ap-brand:hover .ap-brand-text{color:var(--color-accent)}
.ap-brand:hover .ap-brand-badge{background:var(--color-accent-2)}

.ap-breadcrumb a:hover{color:var(--color-accent);text-decoration:none}
.ap-byline-name a:hover{color:var(--color-accent-700);text-decoration:none}


/* 2026-08-29 mobile fixes */
/* Hamburger sat on a grey box: GeneratePress paints .mobile-menu-control-wrapper .menu-toggle
   with rgba(0,0,0,0.02), which reads as grey against the header's pure white. Its selector is
   (0,2,0), so this override is scoped under .site-header to win on specificity, not source order. */
.site-header .mobile-menu-control-wrapper .menu-toggle,
.site-header .mobile-menu-control-wrapper .menu-toggle:hover,
.site-header .mobile-menu-control-wrapper .menu-toggle:focus,
.site-header .mobile-menu-control-wrapper .menu-toggle:active{background-color:transparent}

/* Below 769px the right sidebar stops being a column and stacks under the article, so .ap-toc
   sat flush against .ap-byline with a 0px gap. Desktop keeps them in separate columns, so this
   is mobile-only. Applied to the sidebar container rather than .ap-toc so any future sidebar
   widget gets the same separation. */
@media (max-width:768px){
  .is-right-sidebar .inside-right-sidebar{margin-top:24px}
}


/* ==========================================================================
   2026-08-30 audit fixes (seo-audit-2026-08-30.md)
   ========================================================================== */

/* M5: .ap-guide-card-meta was color:var(--color-text) at opacity:.6 on var(--color-surface),
   which computes to 4.20:1 against the 4.5:1 WCAG AA minimum for normal text. 57 instances
   across the homepage, /nadra/ and the author archive. Fixed by dropping the opacity hack and
   using the neutral token that exists for exactly this job: #4d5952 on #eaf5ee = 6.56:1. */
.ap-guide-card-meta{color:var(--color-neutral-700);opacity:1}

/* L3: table headers rendered at 11px while their own data cells were 14px, so the header text
   was smaller than the data it labelled. Affects the 28 guides that contain tables. */
.entry-content table th{font-size:14px}

/* M6: the 404 and empty-search states fell back to GeneratePress's unstyled .search-form, which
   painted the submit button #55555e (a grey belonging to no token on this site) with square
   corners, against a design system that is green and pill-shaped throughout. The header's own
   .ap-search-form was always correct; this default form was simply never styled. */
.search-form,.wp-block-search__inside-wrapper{display:flex;gap:8px;align-items:center;max-width:420px}
.search-form .search-field,.wp-block-search__input{
	flex:1 1 auto;min-width:0;padding:10px 16px;border:1px solid var(--color-accent-100);
	border-radius:999px;background:var(--color-surface);color:var(--color-text);
	font-family:var(--font-body);font-size:15px}
.search-form .search-field:focus,.wp-block-search__input:focus{
	outline:2px solid var(--color-accent);outline-offset:1px}
.search-form .search-submit,.wp-block-search__button{
	flex:0 0 auto;padding:10px 20px;border:0;border-radius:999px;
	background:var(--color-accent);color:var(--color-bg);
	font-family:var(--font-body);font-weight:600;font-size:15px;cursor:pointer}
.search-form .search-submit:hover,.wp-block-search__button:hover{background:var(--color-accent-2)}

/* M6: both dead-end states also had zero links in the content area, so the page body offered no
   route back into the site. The link list is injected in the sandbox mu-plugin. */
.ap-deadend{margin:28px 0 8px;padding:24px;background:var(--color-neutral-100);
	border:1px solid var(--color-accent-100);border-radius:var(--radius-md)}
.ap-deadend-title{margin:0 0 12px;font-family:var(--font-body);font-weight:700;
	font-size:15px;color:var(--color-accent-2)}
.ap-deadend-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.ap-deadend-list li{margin:0}
.ap-deadend-list a{color:var(--color-accent);font-size:15px;text-decoration:none}
.ap-deadend-list a:hover{color:var(--color-accent-700);text-decoration:underline}

/* M3: the contact form's success redirect (?sent=1) returned the identical page with no
   acknowledgement, so a visitor who submitted had no way to tell it worked. */
.ap-form-success{margin:0 0 20px;padding:16px 20px;background:var(--color-accent-100);
	border:1px solid var(--color-accent);border-radius:var(--radius-md);
	color:var(--color-accent-2);font-size:15px;line-height:1.6}
.ap-form-success strong{font-weight:700}