/*
 * TakeOne Architecture v13.0.5 — VS Jannah / Header NEXT 2.0 + Footer Restore
 * Final semantic bridge for Site Shell + TakeOne Colors + Dark Engine.
 * No independent palette lives here: all values come from TakeOne Colors tokens.
 */

:root{
  --takeone-shell-page:var(--agk-page,var(--agk-site-background,#f5f7fa));
  --takeone-shell-surface:var(--agk-surface,#fff);
  --takeone-shell-surface-alt:var(--agk-surface-alt,#eef2f6);
  --takeone-shell-elevated:var(--agk-surface-elevated,var(--agk-surface,#fff));
  --takeone-shell-heading:var(--agk-heading,#172033);
  --takeone-shell-text:var(--agk-text,#344054);
  --takeone-shell-muted:var(--agk-muted,#667085);
  --takeone-shell-border:var(--agk-border,#e1e6ed);
  --takeone-shell-link:var(--agk-link,var(--agk-primary,#245aa6));
}

/* Site Shell authority */
body.takeone-site-shell:not(.wp-admin){background:var(--agk-site-paint,var(--takeone-shell-page));color:var(--takeone-shell-text)}
body.takeone-site-shell :where(main,.site-main,.agk-main,.agk-content-shell){color:var(--takeone-shell-text)}
body.takeone-site-shell :where(h1,h2,h3,h4,h5,h6){color:var(--takeone-shell-heading)}
body.takeone-site-shell :where(.agk-muted,.text-muted,.muted){color:var(--takeone-shell-muted)}

/* Header / navigation / mobile / footer read semantic roles only. */
body.takeone-colors-authority :where(.takeone-header-next,.agk-site-header,.agk-header-shell){background:var(--agk-header-paint,var(--agk-header-bg));color:var(--agk-header-text);border-color:var(--agk-header-aux-border,var(--agk-border))}
body.takeone-colors-authority :where(.takeone-nav-next,.agk-nav-band,.agk-primary-nav){--takeone-nav-surface:var(--agk-nav-bg);--takeone-nav-fg:var(--agk-nav-text);--takeone-nav-line:var(--agk-nav-border)}
body.takeone-colors-authority :where(.takeone-nav-next,.agk-nav-band){background:var(--takeone-nav-surface);color:var(--takeone-nav-fg);border-color:var(--takeone-nav-line)}
body.takeone-colors-authority :where(.takeone-nav-next .agk-menu>li>a,.agk-primary-nav>ul>li>a){color:var(--agk-nav-text)}
body.takeone-colors-authority :where(.takeone-nav-next .agk-menu>li>a,.agk-primary-nav>ul>li>a):hover{color:var(--agk-nav-hover)}
body.takeone-colors-authority :where(.takeone-nav-next .current-menu-item>a,.takeone-nav-next .current-menu-ancestor>a,.agk-primary-nav .current-menu-item>a,.agk-primary-nav .current-menu-ancestor>a){color:var(--agk-nav-active)}
body.takeone-colors-authority :where(.agk-primary-nav .sub-menu,.takeone-nav-next .agk-primary-nav .sub-menu){background:var(--agk-nav-submenu-bg);color:var(--agk-nav-submenu-text);border-color:var(--agk-nav-submenu-border)}
body.takeone-colors-authority :where(.agk-primary-nav .sub-menu a,.takeone-nav-next .agk-primary-nav .sub-menu a){color:var(--agk-nav-submenu-text)}
body.takeone-colors-authority :where(.agk-primary-nav .sub-menu a:hover,.takeone-nav-next .agk-primary-nav .sub-menu a:hover){background:var(--agk-nav-submenu-hover-bg);color:var(--agk-nav-submenu-hover-text)}

body.takeone-colors-authority :where(.agk-mobile-header,.agk-mobile-menu,.agk-mobile-drawer,.mobile-menu-next){background-color:var(--agk-mobile-menu-bg);color:var(--agk-mobile-menu-text);border-color:var(--agk-border)}

body.takeone-colors-authority :where(.takeone-footer-next,.agk-site-footer,footer.agk-footer){background:var(--agk-footer-paint,var(--agk-footer-bg));color:var(--agk-footer-text-color);border-color:var(--agk-footer-border)}
body.takeone-colors-authority :where(.takeone-footer-next,.agk-site-footer,footer.agk-footer) :where(h2,h3,h4,.agk-footer-title){color:var(--agk-footer-title-color)}
body.takeone-colors-authority :where(.takeone-footer-next,.agk-site-footer,footer.agk-footer) :where(p,small,.agk-footer-description){color:var(--agk-footer-desc-color)}

/* Connect must follow the exact same light/dark authority. This fixes pages where the
 * header changed to dark but the Connect content remained on the light palette. */
body.takeone-colors-authority .agkc-page:not(.style-custom):not(.preset-classic){
  --agkc-page-bg:var(--agk-page);
  --agkc-card-bg:var(--agk-surface);
  --agkc-text:var(--agk-text);
  --agkc-muted:var(--agk-muted);
  --agkc-border:var(--agk-border);
  --agkc-accent:var(--agk-primary);
}
html[data-agk-theme="dark"] body.takeone-colors-authority .agkc-page:not(.style-custom):not(.preset-classic),
body.takeone-colors-authority.dark-mode .agkc-page:not(.style-custom):not(.preset-classic),
body.takeone-colors-authority[data-theme="dark"] .agkc-page:not(.style-custom):not(.preset-classic){
  --agkc-page-bg:var(--agk-page)!important;
  --agkc-card-bg:var(--agk-surface)!important;
  --agkc-text:var(--agk-text)!important;
  --agkc-muted:var(--agk-muted)!important;
  --agkc-border:var(--agk-border)!important;
  --agkc-accent:var(--agk-primary)!important;
  background:var(--agkc-page-bg)!important;color:var(--agkc-text)!important;
}

/* Builder + Studio use TakeOne Colors by default. Local element overrides remain
 * possible through the Builder's explicit override switches; this bridge only owns
 * the editor/runtime surfaces themselves. */
:where(.takeone-builder-v7,.tb7-canvas.takeone-builder-v7,.tb7-studio,.takeone-studio,.tb7-studio-detail-preview){
  --tb7-primary:var(--agk-primary);
  --tb7-secondary:var(--agk-secondary);
  --tb7-accent:var(--agk-accent);
  --tb7-page:var(--agk-page);
  --tb7-surface:var(--agk-surface);
  --tb7-surface-alt:var(--agk-surface-alt);
  --tb7-heading:var(--agk-heading);
  --tb7-text:var(--agk-text);
  --tb7-muted:var(--agk-muted);
  --tb7-border:var(--agk-border);
  --tb7-link:var(--agk-link);
}
:where(.takeone-builder-v7,.tb7-canvas.takeone-builder-v7){background:var(--agk-page);color:var(--agk-text)}
:where(.takeone-builder-v7,.tb7-studio,.takeone-studio) :where(.tb7-card,.tb7-post-card,.tb7-content-card,.tb7-comm-card,.tb7-stats.preset-cards article){background-color:var(--agk-card-bg,var(--agk-surface));border-color:var(--agk-card-border,var(--agk-border));color:var(--agk-text)}

/* Dark Engine compatibility. All three state forms resolve to the same semantic vars. */
html[data-agk-theme="dark"] body,
body.dark-mode,
body[data-theme="dark"]{color-scheme:dark}
html[data-agk-theme="light"] body,
body[data-theme="light"]{color-scheme:light}

/* Header-over-hero is a structural exception, not a second palette. */
body.agk-header-over-hero.takeone-colors-authority .takeone-header-next.is-hero-overlay:not(.is-scrolled){background:transparent!important}

/* Editor chrome stays visually separate from the design canvas. */
body.takeone-v13-admin #tb7-app{--takeone-editor-accent:var(--agk-primary,#245aa6)}
body.takeone-v13-admin #tb7-app .tb7-canvas-frame{isolation:isolate}

/* ========================================================================== 
 * v13.0.4 — Alghad Identity Refinement / Logo Contrast / Social / Dark Canvas
 * ========================================================================== */

/* Brand marks are surface-aware. When no dedicated inverse logo was uploaded,
 * the same source is converted to a crisp white mark only on strong surfaces. */
body.takeone-header-needs-inverse-logo .takeone-header-next .agk-brand-picture .agk-logo-default,
body.takeone-header-needs-inverse-logo .takeone-header-next .agk-brand-picture .agk-logo-mobile-default{display:none!important}
body.takeone-header-needs-inverse-logo .takeone-header-next .agk-brand-picture .agk-logo-dark{display:block!important;position:static!important}
body.takeone-header-needs-inverse-logo .takeone-header-next .agk-brand-picture.needs-auto-inverse .agk-logo-dark,
html[data-agk-theme="dark"] .agk-brand-picture.needs-auto-inverse .agk-logo-dark{filter:brightness(0) invert(1) saturate(0) contrast(1.08)}

body.takeone-mobile-needs-inverse-logo .agk-touch-header .agk-brand-picture .agk-logo-default,
body.takeone-mobile-needs-inverse-logo .agk-touch-header .agk-brand-picture .agk-logo-mobile-default{display:none!important}
body.takeone-mobile-needs-inverse-logo .agk-touch-header .agk-brand-picture .agk-logo-dark{display:block!important;position:static!important}
body.takeone-mobile-needs-inverse-logo .agk-touch-header .agk-brand-picture.needs-auto-inverse .agk-logo-dark{filter:brightness(0) invert(1) saturate(0) contrast(1.08)}

body.takeone-footer-needs-inverse-logo .takeone-footer-next .agk-footer-brand-picture.needs-auto-contrast .agk-footer-logo-light,
html[data-agk-theme="dark"] .takeone-footer-next .agk-footer-brand-picture.needs-auto-contrast .agk-footer-logo-dark{filter:brightness(0) invert(1) saturate(0) contrast(1.08)}

/* Header utility icons remain legible over the Alghad blue identity surface. */
body.takeone-header-needs-inverse-logo .takeone-header-next .agk-comm-icons.context-header.mode-theme>a,
body.takeone-header-needs-inverse-logo .takeone-header-next .agk-comm-icons.context-header.mode-mono>a{
  color:var(--agk-on-brand,#fff)!important;
  background:color-mix(in srgb,var(--agk-on-brand,#fff) 10%,transparent)!important;
  border-color:color-mix(in srgb,var(--agk-on-brand,#fff) 22%,transparent)!important;
}
body.takeone-header-needs-inverse-logo .takeone-header-next .agk-comm-icons.context-header>a:hover{
  background:color-mix(in srgb,var(--agk-on-brand,#fff) 17%,transparent)!important;
  border-color:color-mix(in srgb,var(--agk-on-brand,#fff) 34%,transparent)!important;
}

/* v13.0.5 — Footer geometry/presentation restored to the stable Footer NEXT layer.
 * TakeOne Colors still owns its colors, but Header/Architecture no longer overrides
 * the footer icon/card presentation. */
/* Dark Builder/Studio authority. The editor chrome stays separate, while the design
 * canvas and Studio previews consume exactly the same semantic dark roles as frontend. */
.tb7-canvas.tb7-theme-dark,
.takeone-builder-v7.tb7-theme-dark,
#tb7-app[data-canvas-theme="dark"] .tb7-canvas,
#tb7-app[data-canvas-theme="dark"] :where(.tb7-studio,.takeone-studio,.tb7-studio-detail-preview){
  background:var(--agk-page)!important;
  color:var(--agk-text)!important;
}
.tb7-theme-dark :where(.tb7-card,.tb7-post-card,.tb7-content-card,.tb7-comm-card,.tb7-accordion-item,.tb7-tabs-panel,.tb7-stats article,.tb7-form,.tb7-form-card),
#tb7-app[data-canvas-theme="dark"] :where(.tb7-studio-card,.tb7-studio-panel,.tb7-studio-detail-preview,.tb7-studio-preview-card){
  background-color:var(--agk-surface)!important;
  border-color:var(--agk-border)!important;
  color:var(--agk-text)!important;
}
.tb7-theme-dark :where(h1,h2,h3,h4,h5,h6,.tb7-title,.tb7-heading),
#tb7-app[data-canvas-theme="dark"] :where(.tb7-studio,.takeone-studio) :where(h1,h2,h3,h4,h5,h6){color:var(--agk-heading)!important}
.tb7-theme-dark :where(.tb7-muted,.tb7-meta,.tb7-kicker,small,time),
#tb7-app[data-canvas-theme="dark"] :where(.tb7-studio,.takeone-studio) :where(.tb7-muted,small){color:var(--agk-muted)!important}
.tb7-theme-dark :where(input,textarea,select),
#tb7-app[data-canvas-theme="dark"] :where(.tb7-studio,.takeone-studio) :where(input,textarea,select){
  background:var(--agk-surface-alt)!important;
  color:var(--agk-text)!important;
  border-color:var(--agk-border)!important;
}
.tb7-theme-dark :where(input,textarea,select):focus,
#tb7-app[data-canvas-theme="dark"] :where(.tb7-studio,.takeone-studio) :where(input,textarea,select):focus{
  border-color:var(--agk-link)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--agk-link) 16%,transparent)!important;
}

/* Explicit dark tones remain dark, but no longer carry hard-coded black palettes. */
.tb7-theme-dark .tb7-tone-dark,
#tb7-app[data-canvas-theme="dark"] .tb7-tone-dark{
  --tb7-dark-bg:var(--agk-page);
  --tb7-dark-surface:var(--agk-surface);
  --tb7-dark-surface-alt:var(--agk-surface-alt);
  --tb7-dark-text:var(--agk-text);
  --tb7-dark-heading:var(--agk-heading);
  --tb7-dark-muted:var(--agk-muted);
  --tb7-dark-border:var(--agk-border);
  --tb7-dark-link:var(--agk-link);
}

body.takeone-header-needs-inverse-logo .takeone-header-next :is(.agk-header-cta.style-icon,.agk-dark-toggle,.agk-search-trigger){
  color:var(--agk-on-brand,#fff)!important;
  background:color-mix(in srgb,var(--agk-on-brand,#fff) 8%,transparent)!important;
  border-color:color-mix(in srgb,var(--agk-on-brand,#fff) 20%,transparent)!important;
}
body.takeone-header-needs-inverse-logo .takeone-header-next :is(.agk-header-cta.style-icon,.agk-dark-toggle,.agk-search-trigger):hover{
  background:color-mix(in srgb,var(--agk-on-brand,#fff) 15%,transparent)!important;
  border-color:color-mix(in srgb,var(--agk-on-brand,#fff) 34%,transparent)!important;
}


/* ==========================================================
   v13.1.3 — TakeOne Actions Core Reset
   Explicit Light / Dark / Brand contracts. No automatic inversion and no
   global button-gradient paint is allowed to leak across surface contexts.
   Local Button Override remains the only escape hatch.
   ========================================================== */

/* System-controlled Builder buttons: literal saved paints cannot beat the current
   TakeOne style. Local override buttons are deliberately excluded. */
:where(.takeone-builder-v7,.takeone-studio,.tb7-studio) .tb7-button:not(.tb7-button-local-override):where(.variant-solid,.variant-pill,.variant-gradient){
  --tb7-btn-bg:var(--agk-action-primary-bg)!important;
  --tb7-btn-color:var(--agk-action-primary-text)!important;
  --tb7-btn-border:var(--agk-action-primary-border)!important;
  --tb7-btn-hover-bg:var(--agk-action-primary-hover)!important;
  --tb7-btn-hover-color:var(--agk-action-primary-hover-text)!important;
  --tb7-btn-hover-border:var(--agk-action-primary-hover-border)!important;
  background:var(--agk-action-primary-bg)!important;
  color:var(--agk-action-primary-text)!important;
  border-color:var(--agk-action-primary-border)!important;
}
:where(.takeone-builder-v7,.takeone-studio,.tb7-studio) .tb7-button:not(.tb7-button-local-override):where(.variant-solid,.variant-pill,.variant-gradient):hover{
  background:var(--agk-action-primary-hover)!important;
  color:var(--agk-action-primary-hover-text)!important;
  border-color:var(--agk-action-primary-hover-border)!important;
}

/* Secondary variants retain their geometry (outline/soft/ghost/text), while their
   foreground/background relationship comes only from the current Style contract. */
:where(.takeone-builder-v7,.takeone-studio,.tb7-studio) .tb7-button:not(.tb7-button-local-override).variant-soft{
  --tb7-btn-bg:var(--agk-action-secondary-bg)!important;
  --tb7-btn-color:var(--agk-action-secondary-text)!important;
  --tb7-btn-border:var(--agk-action-secondary-border)!important;
  background:var(--agk-action-secondary-bg)!important;color:var(--agk-action-secondary-text)!important;border-color:var(--agk-action-secondary-border)!important;
}
:where(.takeone-builder-v7,.takeone-studio,.tb7-studio) .tb7-button:not(.tb7-button-local-override):where(.variant-outline,.variant-ghost,.variant-text){
  --tb7-btn-bg:transparent!important;
  --tb7-btn-color:var(--agk-action-secondary-text)!important;
  --tb7-btn-border:var(--agk-action-secondary-border)!important;
  background:transparent!important;color:var(--agk-action-secondary-text)!important;
}
:where(.takeone-builder-v7,.takeone-studio,.tb7-studio) .tb7-button:not(.tb7-button-local-override).variant-outline{border-color:var(--agk-action-secondary-border)!important}
:where(.takeone-builder-v7,.takeone-studio,.tb7-studio) .tb7-button:not(.tb7-button-local-override):where(.variant-ghost,.variant-text){border-color:transparent!important}
:where(.takeone-builder-v7,.takeone-studio,.tb7-studio) .tb7-button:not(.tb7-button-local-override):where(.variant-outline,.variant-soft,.variant-ghost,.variant-text):hover{
  background:var(--agk-action-secondary-hover-bg)!important;
  color:var(--agk-action-secondary-hover-text)!important;
  border-color:var(--agk-action-secondary-hover-border)!important;
}

/* Theme-level primary actions use the current mode contract directly. Brand surface
   wrappers remap the generic variables through TakeOne Colors 2.x. */
:where(.agk-button,.agk-btn,.button-primary):not(.agk-whatsapp-brand){
  background:var(--agk-action-primary-bg)!important;
  color:var(--agk-action-primary-text)!important;
  border-color:var(--agk-action-primary-border)!important;
}
:where(.agk-button,.agk-btn,.button-primary):not(.agk-whatsapp-brand):hover{
  background:var(--agk-action-primary-hover)!important;
  color:var(--agk-action-primary-hover-text)!important;
  border-color:var(--agk-action-primary-hover-border)!important;
}

/* ==========================================================
   Article Utility Contrast Contract
   Related content stays on the current Surface; Attachments use the Style's Brand
   surface, producing the requested opposite/contrasting field without hard-coded blue.
   ========================================================== */
.agk-article-utility-panel.is-related{
  background:var(--agk-surface)!important;
  color:var(--agk-text)!important;
  border-color:var(--agk-border)!important;
}
.agk-article-utility-panel.is-attachments{
  background:linear-gradient(145deg,var(--agk-on-brand-surface-alt,var(--agk-primary)),var(--agk-on-brand-surface,var(--agk-primary)))!important;
  color:var(--agk-on-brand-text,#FFFFFF)!important;
  border-color:var(--agk-on-brand-border,color-mix(in srgb,var(--agk-primary) 56%,#FFFFFF))!important;
  box-shadow:0 18px 52px color-mix(in srgb,var(--agk-on-brand-surface,var(--agk-primary)) 22%,transparent)!important;
}
.agk-article-utility-panel.is-attachments .agk-utility-panel-icon{
  border-color:var(--agk-on-brand-border)!important;
  background:color-mix(in srgb,var(--agk-on-brand-heading,#FFFFFF) 10%,transparent)!important;
  color:var(--agk-on-brand-icon,var(--agk-on-brand-heading,#FFFFFF))!important;
}
.agk-article-utility-panel.is-attachments .agk-utility-panel-head h2,
.agk-article-utility-panel.is-attachments .agk-attachment-copy strong{color:var(--agk-on-brand-heading,#FFFFFF)!important}
.agk-article-utility-panel.is-attachments .agk-utility-panel-head small,
.agk-article-utility-panel.is-attachments .agk-attachment-copy small{color:var(--agk-on-brand-muted,#DDE5F5)!important}
.agk-article-utility-panel.is-attachments .agk-attachment-card{
  background:color-mix(in srgb,var(--agk-on-brand-heading,#FFFFFF) 8%,transparent)!important;
  color:var(--agk-on-brand-text,#FFFFFF)!important;
  border-color:var(--agk-on-brand-border)!important;
}
.agk-article-utility-panel.is-attachments .agk-attachment-card:hover{
  background:color-mix(in srgb,var(--agk-on-brand-heading,#FFFFFF) 15%,transparent)!important;
  border-color:color-mix(in srgb,var(--agk-on-brand-heading,#FFFFFF) 50%,var(--agk-on-brand-border))!important;
}
.agk-article-utility-panel.is-attachments :where(.agk-attachment-icon,.agk-attachment-arrow){
  background:color-mix(in srgb,var(--agk-on-brand-heading,#FFFFFF) 10%,transparent)!important;
  color:var(--agk-on-brand-heading,#FFFFFF)!important;
}

/* Related Content foreground follows the active Light/Dark surface tokens; this is
   the deliberate inverse partner of the Brand-painted Attachments panel. */
.agk-article-utility-panel.is-related .agk-utility-panel-head h2,
.agk-article-utility-panel.is-related .agk-article-relation-copy>strong{color:var(--agk-heading)!important}
.agk-article-utility-panel.is-related :where(.agk-utility-panel-head small,.agk-article-relation-kicker,.agk-article-relation-excerpt){color:var(--agk-muted)!important}
.agk-article-utility-panel.is-related .agk-article-relation-heading{color:var(--agk-link)!important}
.agk-article-utility-panel.is-related .agk-article-relation-action{color:var(--agk-link)!important}

/* ==========================================================
   WhatsApp Identity Lock — department contact action
   Brand-owned exception: this action does NOT change with Light/Dark/Brand styles.
   ========================================================== */
body.takeone-v13 .agk-article-contact .agk-article-department-wa{
  --agk-whatsapp-brand:#25D366;
  --agk-whatsapp-brand-hover:#1FBD5A;
  background:var(--agk-whatsapp-brand)!important;
  color:#FFFFFF!important;
  border-color:var(--agk-whatsapp-brand)!important;
  box-shadow:0 12px 30px color-mix(in srgb,var(--agk-whatsapp-brand) 22%,transparent)!important;
}
body.takeone-v13 .agk-article-contact .agk-article-department-wa :where(.agk-article-wa-icon,.agk-article-wa-text,svg){color:#FFFFFF!important}
body.takeone-v13 .agk-article-contact .agk-article-wa-icon{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
body.takeone-v13 .agk-article-contact .agk-article-department-wa:hover{
  background:var(--agk-whatsapp-brand-hover)!important;
  color:#FFFFFF!important;
  border-color:var(--agk-whatsapp-brand-hover)!important;
  box-shadow:0 16px 38px color-mix(in srgb,var(--agk-whatsapp-brand) 30%,transparent)!important;
}
html[data-agk-theme="dark"] body.takeone-v13 .agk-article-contact .agk-article-department-wa,
body.takeone-v13.dark-mode .agk-article-contact .agk-article-department-wa,
body.takeone-v13[data-theme="dark"] .agk-article-contact .agk-article-department-wa{
  background:#25D366!important;color:#FFFFFF!important;border-color:#25D366!important;
}