/*
 * MRKeliawebModern 2.0 — DEFAULT DESIGN TOKENS
 *
 * Administrators normally change these values from the gear panel in the
 * header. Saved panel values override this file for one portal only.
 * Developers can edit the defaults below; use six-digit HEX colours.
 * After editing, clear DNN's cache and refresh the browser.
 *
 * Keep text/background contrast readable. Button text colours (on-brand and
 * on-accent) are calculated automatically when you save from the panel.
 */
.ew-theme {
  /* Colours */
  --ew-brand: #385b56;        /* Buttons, active navigation, links and focus */
  --ew-accent: #b07d48;       /* Highlights, badges and secondary actions */
  --ew-canvas: #ffffff;       /* Page, menu panel and card background */
  --ew-text: #243431;         /* Main text */
  --ew-header-bg: var(--ew-canvas);
  --ew-header-text: var(--ew-text);
  --ew-footer-bg: #172126;
  --ew-footer-text: #e9eeeb;
  --ew-on-brand: #ffffff;
  --ew-on-accent: #ffffff;

  /* Typography */
  --ew-font-latin: 'EW Poppins';
  --ew-font-rtl: 'EW Vazirmatn';
  --ew-font-size: 16px;
  --ew-heading-scale: 1;        /* .88 compact … 1.45 display */
  --ew-heading-weight: 650;
  --ew-body-weight: 400;
  --ew-leading: 1.7;            /* line height for English pages */
  --ew-leading-rtl: 1.9;        /* line height for Persian/Arabic pages */
  --ew-menu-size: 14px;
  --ew-menu-weight: 500;

  /* Layout */
  --ew-container: 1280px;
  --ew-radius: 10px;
  --ew-logo-h-desktop: 50px;
  --ew-logo-h-mobile: 40px;
  --ew-header-h-desktop: 76px;  /* minimum header height */
  --ew-header-h-mobile: 64px;

  /* Global effects */
  --ew-shadow: color-mix(in srgb, var(--ew-text) 12%, transparent);
  --ew-btn-bg: var(--ew-brand);
  --ew-btn-colour: var(--ew-on-brand);
  --ew-btn-border: var(--ew-brand);
  --ew-btn-hover-bg: var(--ew-hover);
  --ew-btn-hover-colour: var(--ew-on-brand);
  --ew-pattern: none;           /* page background pattern */
  --ew-pattern-size: auto;
  --ew-pattern-repeat: repeat;
  --ew-link-line: underline;    /* links inside content */
  --ew-link-line-hover: underline;
  --ew-reveal: none;            /* ew-reveal = fade modules in on scroll */

  /* Header behaviour (read by CSS and the theme script) */
  --ew-header-position: sticky;
  --ew-header-mode: always;     /* always | smart | none */
  --ew-header-shrink: 1;
  --ew-header-glass: 0;
  --ew-header-shadow: 1;
  /* Sticky (scrolled) header look. "same" keeps the normal header colours. */
  --ew-sticky-bg: var(--ew-header-bg);
  --ew-sticky-text: var(--ew-header-text);
  --ew-sticky-soft: var(--ew-header-soft);
  --ew-sticky-line: var(--ew-header-line);
  --ew-sticky-muted: var(--ew-header-muted);
  --ew-sticky-border: 1px solid var(--ew-sticky-line);
  --ew-sticky-logo-filter: brightness(1);  /* e.g. brightness(0) invert(1) = white logo */
  --ew-sticky-logo-opacity: 1;
  --ew-sticky-scale: 78;        /* compact logo size, percent */

  /* Logo */
  --ew-logo-w-desktop: 260px;   /* maximum logo width */
  --ew-logo-w-mobile: 170px;
  --ew-logo-mask: none;         /* the panel sets these for the logo effects */
  --ew-logo-anim: none;
  --ew-logo-hover-anim: none;
  --ew-logo-hover-filter: brightness(1);
  --ew-logo-hover-transform: none;
  --ew-logo-hover-opacity: .86;
  --ew-progress-display: block;
  --ew-progress-colour: var(--ew-brand);
  --ew-menu-trigger: click;     /* click | hover */
  /* Menu item style (Underline preset). The panel switches these together. */
  --ew-mi-line: 1;
  --ew-mi-radius: var(--ew-radius);
  --ew-mi-hover-bg: transparent;
  --ew-mi-hover-border: transparent;
  --ew-mi-active-bg: transparent;
  --ew-mi-active-border: transparent;
  --ew-mi-active-colour: var(--ew-brand);
  --ew-mi-line-top: auto;
  --ew-mi-line-bottom: 2px;
  --ew-mi-line-inset: var(--ew-menu-pad);
  --ew-mi-line-h: 2px;
  --ew-menu-gap: 2px;           /* space between main menu items */
  --ew-menu-pad: 12px;          /* inner left/right space of each item */
  --ew-nav-justify: flex-end;   /* flex-start | center | flex-end | left | right */
  --ew-submenu: dropdown;       /* dropdown | mega (read by the theme script) */
  --ew-drop-style: card;        /* card | minimal | accent | dark */
  --ew-mega-style: columns;     /* columns | cards | featured */
  --ew-fx: dim;                 /* none | dim | blur */
  --ew-fx-bg: color-mix(in srgb, var(--ew-text) 28%, transparent);
  --ew-fx-filter: none;

  /* Optional header controls */
  --ew-directory-display: inline-flex;
  --ew-search-display: inline-flex;
  --ew-language-display: flex;
  --ew-footer-menu-display: none;
  --ew-drawer-w: 420px;          /* 260–1000px */
  --ew-footer-menu-justify: flex-start;

  /* Secondary menu ("Menus" drawer); read by the theme script */
  --ew-quick-style: cards;      /* cards | list | overlay | tiles | compact */
  --ew-quick-hover: lift;       /* lift | zoom | slide | glow | none */
  --ew-quick-img: 48px;         /* list thumbnail size */
  --ew-quick-mobile: strip;     /* strip | sections | tabs */
  --ew-strip-cols: 3;           /* cards per row in the mobile card strip: 2 | 3 | 4 */
  --ew-strip-nav: arrows;       /* arrows | swipe */
  --ew-drawer-anim: slide;      /* slide | fade | scale | reveal | drop */
  --ew-drawer-layout: side;     /* side | floating | full */
  --ew-drawer-mobile: same;     /* same | sheet */
  --ew-drawer-glass: 0;

  /* Logo position (desktop: order/flex; mobile: centring) */
  --ew-brand-order: 0;
  --ew-actions-order: 0;
  --ew-side-flex: 0 1 auto;
  --ew-nav-flex: 1 1 auto;
  --ew-brand-margin: 0;
  --ew-row-display: flex;       /* grid when the desktop logo is centred */
  --ew-brand-space-on: 0;
  --ew-row-display-m: flex;     /* grid when the mobile logo is centred */
  --ew-toggle-order-m: 0;
  --ew-toggle-join-m: 1;
  --ew-brand-order-m: 0;
  --ew-brand-margin-m: 0;
  --ew-actions-margin-m: auto;
  --ew-mobile-bar: 0;

  /* Floating widgets */
  --ew-totop-after: 120px;      /* scroll distance before back-to-top appears */
  --ew-widget-offset-desktop: 24px;
  --ew-widget-offset-mobile: 18px;
  --ew-fab-desktop: 54px;
  --ew-fab-mobile: 48px;
}

/* Derived tokens: calculated from the values above. No changes are needed. */
.ew-theme {
  --ew-primary: var(--ew-brand);
  --ew-ink: var(--ew-text);
  --ew-surface: var(--ew-canvas);
  --ew-link: var(--ew-brand);
  --ew-cream: color-mix(in srgb, var(--ew-brand) 5%, var(--ew-canvas));
  --ew-soft: color-mix(in srgb, var(--ew-brand) 10%, var(--ew-canvas));
  --ew-tint: color-mix(in srgb, var(--ew-brand) 17%, var(--ew-canvas));
  --ew-muted: color-mix(in srgb, var(--ew-text) 70%, var(--ew-canvas));
  --ew-line: color-mix(in srgb, var(--ew-text) 14%, var(--ew-canvas));
  --ew-hover: color-mix(in srgb, var(--ew-brand) 82%, var(--ew-text));
  --ew-ring: color-mix(in srgb, var(--ew-brand) 75%, var(--ew-text));
  --ew-border-strong: color-mix(in srgb, var(--ew-brand) 42%, var(--ew-canvas));
  --ew-accent-soft: color-mix(in srgb, var(--ew-accent) 14%, var(--ew-canvas));
  --ew-shadow: color-mix(in srgb, var(--ew-text) 12%, transparent);
  --ew-header-muted: color-mix(in srgb, var(--ew-header-text) 68%, var(--ew-header-bg));
  --ew-header-line: color-mix(in srgb, var(--ew-header-text) 13%, var(--ew-header-bg));
  --ew-header-soft: color-mix(in srgb, var(--ew-brand) 9%, var(--ew-header-bg));
  --ew-header-glass-bg: color-mix(in srgb, var(--ew-header-bg) 78%, transparent);
  --ew-footer-muted: color-mix(in srgb, var(--ew-footer-text) 72%, var(--ew-footer-bg));
  --ew-footer-line: color-mix(in srgb, var(--ew-footer-text) 16%, var(--ew-footer-bg));
  --ew-footer-raised: color-mix(in srgb, var(--ew-footer-text) 7%, var(--ew-footer-bg));
  --ew-footer-lower: color-mix(in srgb, var(--ew-footer-bg) 86%, black);
  --ew-radius-sm: calc(var(--ew-radius) * .6);
  --ew-radius-lg: calc(var(--ew-radius) * 1.6);
}