/* The Quran Tuition - Premium Contrast Firewall v19.0.0
   Last-loaded semantic contrast layer.
   Purpose: prevent dark-on-dark and light-on-light text across public, admin,
   portal, auth, maintenance, CMS and nested-card states without changing layout.
*/

:root{
  color-scheme:only light;
  --pe20-dark-bg:var(--theme-dark-bg,#071F2A);
  --pe20-dark-bg-alt:var(--theme-dark-bg-alt,#0B4A43);
  --pe20-dark-heading:#FFFFFF;
  --pe20-dark-text:#EAF2EF;
  --pe20-dark-muted:#C9D7D3;
  --pe20-surface-bg:var(--theme-surface,#FFFFFF);
  --pe20-surface-heading:var(--theme-surface-heading,#0B2331);
  --pe20-surface-text:var(--theme-surface-text,#34434B);
  --pe20-surface-muted:var(--theme-surface-muted,#6B7A80);
  --pe20-body-heading:var(--theme-body-heading,#0B2331);
  --pe20-body-text:var(--theme-body-text,#34434B);
  --pe20-body-muted:var(--theme-body-muted,#6B7A80);
  --pe20-soft-heading:var(--theme-soft-heading,#0B2331);
  --pe20-soft-text:var(--theme-soft-text,#34434B);
  --pe20-soft-muted:var(--theme-soft-muted,#6B7A80);
}

html,body{color-scheme:only light!important}
body.public-body,body.admin-body,body.portal-body{
  --pe20-context-heading:var(--pe20-body-heading);
  --pe20-context-text:var(--pe20-body-text);
  --pe20-context-muted:var(--pe20-body-muted);
  background:var(--theme-body-bg,#FCFBF7)!important;
  color:var(--pe20-context-text)!important;
}

/* 1. Normal/light page contexts ------------------------------------------------ */
.public-body :is(main,.section,.content-grid,.two-column,.method-grid,.faq-layout,.settings-layout),
.admin-body :is(.admin-main,.admin-content),
.portal-body :is(.admin-main,.portal-content){
  --pe20-context-heading:var(--pe20-body-heading);
  --pe20-context-text:var(--pe20-body-text);
  --pe20-context-muted:var(--pe20-body-muted);
}

.public-body :is(.section-ivory,.soft-section,.notice,.notice-card,.settings-intro),
.admin-body :is(.notice,.notice-card,.settings-intro,.maintenance-note,.maintenance-head-badge,.theme-contrast-report),
.portal-body :is(.notice,.notice-card){
  --pe20-context-heading:var(--pe20-soft-heading);
  --pe20-context-text:var(--pe20-soft-text);
  --pe20-context-muted:var(--pe20-soft-muted);
}

/* 2. True dark semantic contexts ----------------------------------------------
   These are intentionally independent from button text settings. The screenshot
   regression affected the hero H1, Fee Plans heading and final CTA heading.
*/
.public-body :is(.hero,.page-hero,.course-hero,.article-hero,.trial-page-hero,.premium-page-hero,.section-navy,.final-cta,.maintenance-hero),
.admin-body :is(.maintenance-hero),
.portal-body :is(.page-hero,.premium-page-hero){
  --pe20-context-heading:var(--pe20-dark-heading);
  --pe20-context-text:var(--pe20-dark-text);
  --pe20-context-muted:var(--pe20-dark-muted);
  background-color:var(--pe20-dark-bg)!important;
  color:var(--pe20-dark-text)!important;
}

.public-body :is(.hero,.page-hero,.course-hero,.article-hero,.trial-page-hero,.premium-page-hero,.section-navy,.final-cta,.maintenance-hero)
  :is(h1,h2,h3,h4,h5,h6,strong,b,summary),
.admin-body .maintenance-hero :is(h1,h2,h3,h4,h5,h6,strong,b,summary),
.portal-body :is(.page-hero,.premium-page-hero) :is(h1,h2,h3,h4,h5,h6,strong,b,summary){
  color:var(--pe20-dark-heading)!important;
}

.public-body :is(.hero,.page-hero,.course-hero,.article-hero,.trial-page-hero,.premium-page-hero,.section-navy,.final-cta,.maintenance-hero)
  :is(p,li,small,span:not(.btn *),.lead,.muted,.maintenance-kicker),
.admin-body .maintenance-hero :is(p,li,small,.lead,.muted,.maintenance-kicker),
.portal-body :is(.page-hero,.premium-page-hero) :is(p,li,small,.lead,.muted){
  color:var(--pe20-dark-text)!important;
}

.public-body :is(.hero,.page-hero,.course-hero,.article-hero,.trial-page-hero,.premium-page-hero,.section-navy,.final-cta,.maintenance-hero)
  a:not(.btn),
.admin-body .maintenance-hero a:not(.btn),
.portal-body :is(.page-hero,.premium-page-hero) a:not(.btn){
  color:var(--pe20-dark-heading)!important;
}

/* Gold eyebrow is a deliberate accent, but all non-gold eyebrow labels on dark
   areas must remain readable. */
.public-body .eyebrow.gold,
.public-body .gold,
.admin-body .eyebrow.gold,
.portal-body .eyebrow.gold{color:var(--gold,#D9B44A)!important}
.public-body :is(.hero,.page-hero,.course-hero,.article-hero,.trial-page-hero,.premium-page-hero,.section-navy,.final-cta,.maintenance-hero) .eyebrow:not(.gold){
  color:var(--pe20-dark-muted)!important;
}

/* 3. Surface islands -----------------------------------------------------------
   Reset nested light cards/forms AFTER dark-context rules so a price card inside
   .section-navy never receives white text on a white card.
*/
.public-body :is(
  .feature-card,.course-card,.teacher-card,.blog-card,.price-card,.testimonial,.testimonial-card,
  .content-card,.form-card,.auth-card,.contact-panel,.aside-panel,.note-card,.notice-card,
  .invoice-card,.faq-card,.method-card,.process-card,.premium-choice-panel,.trial-policy-card,
  .split-callout,.premium-split-callout,.accordion details,.module-list article,.lesson-list article,
  .resource-list article,.article-share,.filter-form,.premium-filter-form,.file-preview,
  .enrollment-card,.plan-choice,.slot-choice,.teacher-profile-hero .detail-card
),
.admin-body :is(
  .admin-panel,.admin-stat-card,.statistics-card,.stat-card,.detail-card,.admin-form,.form-card,
  .health-summary-card,.maintenance-action-card,.maintenance-manual-card,.maintenance-section,
  .maintenance-restore-card,.maintenance-primary-form,.maintenance-upload-form,.danger-zone,
  .settings-nav,.file-preview,.permission-grid,.trial-admin-panel,.bulk-actions,.canned-replies,
  .table-scroll,.audit-history,.bar-chart
),
.portal-body :is(
  .admin-panel,.admin-stat-card,.statistics-card,.stat-card,.detail-card,.admin-form,.form-card,
  .invoice-card,.note-card,.notice-card,.ticket-message,.opening-message,.file-preview,.ticket-thread,
  .trial-step-strip,.filter-form,.premium-filter-form,.table-scroll,.calendar-event,.plan-choice,.slot-choice
){
  --pe20-context-heading:var(--pe20-surface-heading);
  --pe20-context-text:var(--pe20-surface-text);
  --pe20-context-muted:var(--pe20-surface-muted);
  color:var(--pe20-surface-text)!important;
  border-color:var(--line,#E3DED2)!important;
}

.public-body :is(
  .feature-card,.course-card,.teacher-card,.blog-card,.price-card,.testimonial,.testimonial-card,
  .content-card,.form-card,.auth-card,.contact-panel,.aside-panel,.note-card,.notice-card,
  .invoice-card,.faq-card,.method-card,.process-card,.premium-choice-panel,.trial-policy-card,
  .split-callout,.premium-split-callout,.accordion details,.module-list article,.lesson-list article,
  .resource-list article,.article-share,.filter-form,.premium-filter-form,.file-preview,
  .enrollment-card,.plan-choice,.slot-choice
) :is(h1,h2,h3,h4,h5,h6,strong,b,summary),
.admin-body :is(
  .admin-panel,.admin-stat-card,.statistics-card,.stat-card,.detail-card,.admin-form,.form-card,
  .health-summary-card,.maintenance-action-card,.maintenance-manual-card,.maintenance-section,
  .maintenance-restore-card,.maintenance-primary-form,.maintenance-upload-form,.danger-zone,
  .settings-nav,.file-preview,.permission-grid,.trial-admin-panel,.bulk-actions,.canned-replies,
  .table-scroll,.audit-history,.bar-chart
) :is(h1,h2,h3,h4,h5,h6,strong,b,summary),
.portal-body :is(
  .admin-panel,.admin-stat-card,.statistics-card,.stat-card,.detail-card,.admin-form,.form-card,
  .invoice-card,.note-card,.notice-card,.ticket-message,.opening-message,.file-preview,.ticket-thread,
  .trial-step-strip,.filter-form,.premium-filter-form,.table-scroll,.calendar-event,.plan-choice,.slot-choice
) :is(h1,h2,h3,h4,h5,h6,strong,b,summary){
  color:var(--pe20-surface-heading)!important;
}

.public-body :is(
  .feature-card,.course-card,.teacher-card,.blog-card,.price-card,.testimonial,.testimonial-card,
  .content-card,.form-card,.auth-card,.contact-panel,.aside-panel,.note-card,.notice-card,
  .invoice-card,.faq-card,.method-card,.process-card,.premium-choice-panel,.trial-policy-card,
  .split-callout,.premium-split-callout,.accordion details,.module-list article,.lesson-list article,
  .resource-list article,.article-share,.filter-form,.premium-filter-form,.file-preview,
  .enrollment-card,.plan-choice,.slot-choice
) :is(p,li,small,label,.muted,.form-hint,.field-help,dd,dt),
.admin-body :is(
  .admin-panel,.admin-stat-card,.statistics-card,.stat-card,.detail-card,.admin-form,.form-card,
  .health-summary-card,.maintenance-action-card,.maintenance-manual-card,.maintenance-section,
  .maintenance-restore-card,.maintenance-primary-form,.maintenance-upload-form,.danger-zone,
  .settings-nav,.file-preview,.permission-grid,.trial-admin-panel,.bulk-actions,.canned-replies,
  .table-scroll,.audit-history,.bar-chart
) :is(p,li,small,label,.muted,.form-hint,.field-help,dd,dt),
.portal-body :is(
  .admin-panel,.admin-stat-card,.statistics-card,.stat-card,.detail-card,.admin-form,.form-card,
  .invoice-card,.note-card,.notice-card,.ticket-message,.opening-message,.file-preview,.ticket-thread,
  .trial-step-strip,.filter-form,.premium-filter-form,.table-scroll,.calendar-event,.plan-choice,.slot-choice
) :is(p,li,small,label,.muted,.form-hint,.field-help,dd,dt){
  color:var(--pe20-surface-text)!important;
}

/* Explicit nested-card exceptions for the exact dark screenshot sections. */
.section-navy .price-card,
.section-navy .price-card :is(h1,h2,h3,h4,h5,h6,strong,b,p,li,small,span:not(.btn *)),
.hero :is(.feature-card,.course-card,.teacher-card,.blog-card,.price-card),
.final-cta :is(.feature-card,.course-card,.teacher-card,.blog-card,.price-card){
  color:var(--pe20-surface-text)!important;
}
.section-navy .price-card :is(h1,h2,h3,h4,h5,h6,strong,b),
.hero :is(.feature-card,.course-card,.teacher-card,.blog-card,.price-card) :is(h1,h2,h3,h4,h5,h6,strong,b),
.final-cta :is(.feature-card,.course-card,.teacher-card,.blog-card,.price-card) :is(h1,h2,h3,h4,h5,h6,strong,b){
  color:var(--pe20-surface-heading)!important;
}
.section-navy .price-card :is(p,li,small,.muted,.price small){color:var(--pe20-surface-text)!important}
.section-navy .price-card .price,
.section-navy .price-card .price b{color:var(--pe20-surface-heading)!important}

/* Glass panels deliberately stay dark on dark sections. */
.public-body :is(.hero,.course-hero,.trial-page-hero,.maintenance-hero)
  :is(.hero-card,.hero-card-glass,.course-summary,.trial-info-panel,.maintenance-format-card){
  --pe20-context-heading:var(--pe20-dark-heading);
  --pe20-context-text:var(--pe20-dark-text);
  --pe20-context-muted:var(--pe20-dark-muted);
  color:var(--pe20-dark-text)!important;
}
.public-body :is(.hero,.course-hero,.trial-page-hero,.maintenance-hero)
  :is(.hero-card,.hero-card-glass,.course-summary,.trial-info-panel,.maintenance-format-card)
  :is(h1,h2,h3,h4,h5,h6,strong,b){color:var(--pe20-dark-heading)!important}
.public-body :is(.hero,.course-hero,.trial-page-hero,.maintenance-hero)
  :is(.hero-card,.hero-card-glass,.course-summary,.trial-info-panel,.maintenance-format-card)
  :is(p,li,small,.muted){color:var(--pe20-dark-text)!important}

/* 4. Generic text guardrails --------------------------------------------------- */
.public-body main :is(h1,h2,h3,h4,h5,h6),
.admin-body .admin-content :is(h1,h2,h3,h4,h5,h6),
.portal-body .portal-content :is(h1,h2,h3,h4,h5,h6){
  color:var(--pe20-context-heading)!important;
}
.public-body main :is(p,dd,dt,blockquote,figcaption,.muted,.form-hint,.field-help,.empty-inline),
.admin-body .admin-content :is(p,dd,dt,blockquote,figcaption,.muted,.form-hint,.field-help,.empty-inline),
.portal-body .portal-content :is(p,dd,dt,blockquote,figcaption,.muted,.form-hint,.field-help,.empty-inline){
  color:var(--pe20-context-text)!important;
}

/* Re-assert dark headings after the generic guardrail; same stylesheet, final authority. */
.public-body :is(.hero,.page-hero,.course-hero,.article-hero,.trial-page-hero,.premium-page-hero,.section-navy,.final-cta,.maintenance-hero)
  :is(h1,h2,h3,h4,h5,h6){color:var(--pe20-dark-heading)!important}
.public-body :is(.hero,.page-hero,.course-hero,.article-hero,.trial-page-hero,.premium-page-hero,.section-navy,.final-cta,.maintenance-hero)
  :is(p,.lead,.muted){color:var(--pe20-dark-text)!important}

/* Then re-assert all light surface islands one final time. */
.public-body :is(.feature-card,.course-card,.teacher-card,.blog-card,.price-card,.testimonial,.testimonial-card,.content-card,.form-card,.auth-card,.contact-panel,.aside-panel,.note-card,.notice-card,.invoice-card,.faq-card,.method-card,.process-card,.premium-choice-panel,.trial-policy-card,.split-callout,.premium-split-callout,.accordion details,.module-list article,.lesson-list article,.resource-list article,.article-share,.filter-form,.premium-filter-form,.file-preview,.enrollment-card,.plan-choice,.slot-choice)
  :is(h1,h2,h3,h4,h5,h6){color:var(--pe20-surface-heading)!important}
.public-body :is(.feature-card,.course-card,.teacher-card,.blog-card,.price-card,.testimonial,.testimonial-card,.content-card,.form-card,.auth-card,.contact-panel,.aside-panel,.note-card,.notice-card,.invoice-card,.faq-card,.method-card,.process-card,.premium-choice-panel,.trial-policy-card,.split-callout,.premium-split-callout,.accordion details,.module-list article,.lesson-list article,.resource-list article,.article-share,.filter-form,.premium-filter-form,.file-preview,.enrollment-card,.plan-choice,.slot-choice)
  :is(p,li,small,.muted,.form-hint,.field-help){color:var(--pe20-surface-text)!important}

/* 5. Header, topbar, footer, sidebars ------------------------------------------ */
.topbar{background:var(--theme-topbar-bg,#061A20)!important;color:var(--theme-topbar-text,#DCE7E3)!important}
.topbar :is(a,span,strong,small){color:var(--theme-topbar-text,#DCE7E3)!important}
.site-header{background:var(--theme-header-bg,#FFFFFF)!important;color:var(--theme-header-text,#2D4149)!important;border-color:var(--theme-header-border,#E3DED2)!important}
.site-header :is(.site-nav a,.text-link,.nav-sub-toggle,.header-more-toggle){color:var(--theme-header-text,#2D4149)!important}
.site-header :is(.brand small,.header-more-child small){color:var(--theme-header-muted,#6B7A80)!important}
.site-header :is(.brand strong,.brand b){color:var(--theme-header-text,#2D4149)!important}

.site-footer{background:var(--theme-footer-bg,#061A20)!important;color:var(--theme-footer-text,#D7E3DF)!important}
.site-footer :is(h1,h2,h3,h4,h5,h6,strong,b){color:var(--theme-footer-link,#E3ECE9)!important}
.site-footer :is(p,small,span){color:var(--theme-footer-text,#D7E3DF)!important}
.site-footer a{color:var(--theme-footer-link,#E3ECE9)!important}

.admin-sidebar,.portal-sidebar{background:var(--theme-sidebar-bg,#071F2A)!important;color:var(--theme-sidebar-text,#D1DEDA)!important}
.admin-sidebar :is(.admin-brand b,.admin-brand strong,.nav-group-label),
.portal-sidebar :is(.admin-brand b,.admin-brand strong){color:var(--theme-sidebar-text,#D1DEDA)!important}
.admin-sidebar :is(.admin-brand small,.sidebar-user small),
.portal-sidebar :is(.admin-brand small,.sidebar-user small){color:var(--theme-sidebar-muted,#C7D4D0)!important}
.admin-sidebar a:not(.active),.portal-sidebar a:not(.active){color:var(--theme-sidebar-text,#D1DEDA)!important}
.admin-sidebar a.active,.portal-sidebar a.active{background:var(--theme-sidebar-active-bg,#D9B44A)!important;color:var(--theme-sidebar-active-text,#10272D)!important}
.admin-sidebar a.active *,.portal-sidebar a.active *{color:inherit!important}

/* 6. Controls / buttons / badges ---------------------------------------------- */
input,select,textarea{
  background:var(--theme-input-bg,#FFFFFF)!important;
  color:var(--theme-input-text,#34434B)!important;
  border-color:var(--theme-input-border,#D5D0C5)!important;
}
input::placeholder,textarea::placeholder{color:var(--theme-input-text,#34434B)!important;opacity:.62}
select option{background:var(--theme-input-bg,#FFFFFF);color:var(--theme-input-text,#34434B)}

.btn,.btn *{color:inherit!important}
.btn-gold{background:var(--gold,#D9B44A)!important;color:var(--theme-on-accent,#10272D)!important;border-color:var(--gold,#D9B44A)!important}
.btn-navy{background:var(--pe20-dark-bg)!important;color:#FFFFFF!important;border-color:var(--pe20-dark-bg)!important}
.btn-outline{background:var(--pe20-surface-bg)!important;color:var(--pe20-surface-heading)!important;border-color:var(--line,#E3DED2)!important}
.btn-outline-light{background:transparent!important;color:#FFFFFF!important;border-color:rgba(255,255,255,.70)!important}
.btn-danger{background:var(--danger,#AD3C3C)!important;color:var(--theme-on-danger,#FFFFFF)!important}
.btn-whatsapp{color:#FFFFFF!important}

.status-badge,.maintenance-status{color:inherit}
.toast{background:var(--pe20-dark-bg)!important;color:#FFFFFF!important}
.toast-success{background:var(--success,#248557)!important;color:var(--theme-on-success,#FFFFFF)!important}
.toast-error{background:var(--danger,#AD3C3C)!important;color:var(--theme-on-danger,#FFFFFF)!important}

/* 7. Tables, print and special states ------------------------------------------ */
.admin-table,.portal-table,.premium-print-table{color:var(--pe20-surface-text)!important}
.admin-table :is(th,strong,b),.portal-table :is(th,strong,b),.premium-print-table :is(th,strong,b){color:var(--pe20-surface-heading)!important}
.admin-table :is(td,small,.muted),.portal-table :is(td,small,.muted),.premium-print-table :is(td,small,.muted){color:var(--pe20-surface-text)!important}

.premium-print-document,.invoice-print,.print-document{
  --pe20-context-heading:#0B2331;
  --pe20-context-text:#34434B;
  --pe20-context-muted:#6B7A80;
  background:#FFFFFF!important;
  color:#34434B!important;
}
.premium-print-document :is(h1,h2,h3,h4,h5,h6,strong,b),.invoice-print :is(h1,h2,h3,h4,h5,h6,strong,b),.print-document :is(h1,h2,h3,h4,h5,h6,strong,b){color:#0B2331!important}
.premium-print-document :is(p,li,small,td,th),.invoice-print :is(p,li,small,td,th),.print-document :is(p,li,small,td,th){color:#34434B!important}

/* Keep premium coloured SVG chips legible without altering their graphics. */
:is(.section-svg-chip,.heading-svg-chip,.nav-svg-chip,.trust-svg-icon,.feature-icon){isolation:isolate}
:is(.section-svg-chip,.heading-svg-chip,.nav-svg-chip,.trust-svg-icon,.feature-icon) svg,
:is(.section-svg-chip,.heading-svg-chip,.nav-svg-chip,.trust-svg-icon,.feature-icon) img{opacity:1!important}

/* 8. Mobile contrast parity ---------------------------------------------------- */
@media (max-width:900px){
  .site-nav{background:var(--theme-header-bg,#FFFFFF)!important;color:var(--theme-header-text,#2D4149)!important}
  .site-nav :is(a,button,span,strong){color:var(--theme-header-text,#2D4149)!important}
  .header-more-menu{background:var(--theme-header-bg,#FFFFFF)!important;color:var(--theme-header-text,#2D4149)!important}
  .header-more-heading{background:var(--pe20-dark-bg)!important;color:#FFFFFF!important}
  .header-more-heading *{color:#FFFFFF!important}
}

@media print{
  html,body{background:#FFFFFF!important;color:#111827!important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .site-header,.site-footer,.topbar,.admin-sidebar,.portal-sidebar,.whatsapp-float,.call-float{display:none!important}
}