/**
 * Galata — core layer.
 *
 * Loaded after galata.css and the page stylesheet. Holds what the visual
 * drafts did not cover: accessibility base, system and Arabic fonts, the
 * mobile menu, OJS core and plugin markup, right-to-left corrections,
 * forced colours and print.
 */

/* ---------- 1. Accessibility base ---------- */
:root{--focus-in:var(--ink);--focus-out:var(--surface);--head-h:118px}
/* Anchors, focused controls and opened panels stay clear of the sticky header, whatever its height. */
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--head-h) + 12px);scroll-padding-bottom:84px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
:focus-visible{outline:3px solid var(--focus-in);outline-offset:2px;border-radius:3px;box-shadow:0 0 0 7px var(--focus-out)}
/* Browsers without :focus-visible (Safari before 15.4) show the same ring on :focus. Fields whose box carries the ring (:focus-within) and targets that are only moved to keep none. */
@supports not selector(:focus-visible){:focus{outline:3px solid var(--focus-in);outline-offset:2px;border-radius:3px;box-shadow:0 0 0 7px var(--focus-out)}.search input:focus,.search button:focus,.shero-search input:focus,.shero-form input:focus,main:focus,.yr-head:focus{outline:none;box-shadow:none}.search button:focus{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}.yr-head:focus b{outline:3px solid var(--focus-in,var(--ink));outline-offset:3px;border-radius:3px}.gbar :focus{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--brand)}.secnav a:focus,.marquee:focus,.yv-btn:focus,.atabs a:focus{outline-offset:-3px}}
.pkp_screen_reader,.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link,.cmp_skip_to_content{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;top:-9999px!important}
main:focus{outline:none;box-shadow:none}
[hidden]{display:none!important}
a{text-underline-offset:2px}
button{font-family:inherit}
img{height:auto}

/* ---------- 2. Fonts ---------- */
html[data-type="a"]{--serif:"Source Serif 4",Georgia,"Times New Roman",serif;--sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
html[data-fonts="system"]{--serif:Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
html[data-fonts="system"][data-type="c"]{--serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
html[lang^="ar"],html[lang^="fa"],html[lang^="ur"]{--serif:"Noto Naskh Arabic","Geeza Pro","Segoe UI",Tahoma,serif;--sans:"Noto Naskh Arabic","Geeza Pro","Segoe UI",Tahoma,sans-serif}
html[lang^="ar"][data-fonts="system"],html[lang^="fa"][data-fonts="system"],html[lang^="ur"][data-fonts="system"]{--serif:"Geeza Pro","Segoe UI",Tahoma,serif;--sans:"Geeza Pro","Segoe UI",Tahoma,sans-serif}
html[dir="rtl"] body{letter-spacing:0}
html[dir="rtl"] .hx-h1,html[dir="rtl"] .art-authors{letter-spacing:0}

/* ---------- 3. Header ---------- */
.icon-fill{fill:currentColor;stroke:none}
.logo-mark-img{width:auto;height:52px;max-width:180px;object-fit:contain}
.logo-img{max-width:280px;object-fit:contain}
/* A logo that would not show on the header's colour sits on a plate (set by the theme, see GalataLogo). */
.logo-img,.logo-mark-img{background:var(--logo-bg,transparent);padding:var(--logo-pad,0);border-radius:8px;box-sizing:border-box}
html[data-logo="a"] .logo-mark-img{display:none}
.search button{font-family:var(--sans)}
.search:focus-within{outline:3px solid var(--focus-in);outline-offset:2px;box-shadow:0 0 0 7px var(--focus-out)}
.search input:focus-visible,.search button:focus-visible{outline:none;box-shadow:none}
.search button:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.auth ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.auth li{display:block}
.auth li>a{display:block}
.auth li:has(>a.login){order:-1}
.auth .dd{position:relative}
.auth .user-btn{display:flex;align-items:center;gap:8px;width:100%;justify-content:center;font:600 .88rem var(--sans);padding:9px 14px;border-radius:var(--radius);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.auth .user-btn::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-block-end:3px}
.auth .dd.open .user-btn::after{transform:rotate(-135deg);margin-block-end:-3px}
.user-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-header="b"] .auth .user-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff}
.user-panel{inset-inline-start:auto;inset-inline-end:0;min-width:220px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:0 0 var(--radius) var(--radius);box-shadow:0 18px 40px -16px rgba(0,0,0,.35);padding:6px 0}
.auth .user-panel ul{gap:0}
.auth .user-panel a{display:flex;justify-content:space-between;gap:10px;text-align:start;padding:9px 16px;border-radius:0;color:var(--ink);font-weight:500;font-size:.92rem}
.auth .user-panel a:hover{background:var(--tint);color:var(--brand-text);filter:none}
.task_count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:.72rem;font-weight:700}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.nav-toggle .icon{width:22px;height:22px}
html[data-header="b"] .nav-toggle{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff}
.langs .flag{display:block;width:26px;height:17px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.langs a{text-decoration:none;opacity:1}
.langs a:not([aria-current]) .flag{filter:saturate(.75)}
.langs a[aria-current]{box-shadow:0 2px 0 var(--accent)}
.lang-code{display:inline-block;font:700 .78rem/1 var(--sans);letter-spacing:.03em;padding:6px 7px;border:1px solid var(--line);border-radius:4px;color:var(--ink)}
.langs a[aria-current] .lang-code{background:var(--brand);border-color:var(--brand);color:#fff}
.theme-toggle{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer}
.theme-toggle:hover{color:var(--brand-text);border-color:var(--brand-text)}
.theme-toggle .icon{width:17px;height:17px}
.theme-toggle .ic-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:block}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .ic-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .ic-moon{display:none}
}
.navbar .wrap{min-height:48px}
/* Without a primary menu the tools still stand at the end of the row. */
.navbar .nav-right{margin-inline-start:auto}
.menu .dd-btn{font-size:.95rem;font-weight:500;color:var(--ink)}
.dd-promo b{display:block}

/* ---------- 4. Mobile menu ---------- */
.mnav{position:fixed;inset:0;z-index:120}
.mnav-backdrop{position:absolute;inset:0;background:rgba(10,16,14,.55);opacity:0;transition:opacity .2s ease}
.mnav-panel{position:absolute;top:0;bottom:0;inset-inline-end:0;width:min(88vw,360px);background:var(--surface);color:var(--ink);display:flex;flex-direction:column;box-shadow:0 0 60px rgba(0,0,0,.4);transform:translateX(100%);transition:transform .22s ease}
html[dir="rtl"] .mnav-panel{transform:translateX(-100%)}
.mnav.on .mnav-backdrop{opacity:1}
.mnav.on .mnav-panel,html[dir="rtl"] .mnav.on .mnav-panel{transform:none}
.mnav-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.mnav-title{font-family:var(--serif);font-weight:700;font-size:1.1rem}
.mnav-close{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--line);border-radius:var(--radius);background:none;color:var(--ink);cursor:pointer}
.mnav-close .icon{width:20px;height:20px}
.mnav-body{flex:1;overflow-y:auto;padding:8px 10px;overscroll-behavior:contain}
.mnav-menu{list-style:none;margin:0;padding:0}
.mnav-menu>li{border-bottom:1px solid var(--line)}
.mnav-menu a,.mnav-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 10px;font:500 1rem var(--sans);color:var(--ink);text-decoration:none;background:none;border:0;text-align:start;cursor:pointer}
.mnav-menu a:hover,.mnav-btn:hover{color:var(--brand-text);background:var(--tint)}
.mnav-menu a[aria-current]{color:var(--brand-text);font-weight:700;box-shadow:inset 3px 0 0 var(--accent)}
.mnav-btn::after{content:"";width:7px;height:7px;border:solid var(--muted);border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.mnav-btn[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.mnav-kids{list-style:none;margin:0 0 8px;padding:0;margin-inline-start:10px;padding-inline-start:10px;border-inline-start:2px solid var(--tint)}
.mnav-kids a{padding:10px;font-size:.94rem;color:var(--muted)}
.mnav-user{margin-top:10px}
.mnav-foot{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.mnav-foot .social{display:flex;padding:0;border:0}
body.mnav-open{overflow:hidden}
@media (max-width:860px){
  .nav-toggle{display:inline-flex}
  .navbar{display:none}
  .topbar .wrap{grid-template-columns:minmax(0,1fr) auto auto;gap:10px}
  .search{grid-column:1/-1;grid-row:2}
  .auth{display:none}
  .logo-name small{font-size:.74rem}
  .logo{min-width:0}
  .logo-name{min-width:0;overflow-wrap:anywhere}
  .logo-mark-img{flex:0 1 auto;min-width:0;max-width:min(180px,46vw);height:auto;max-height:52px}
}
/* A wide logo image and the full name do not fit side by side on a phone. */
@media (max-width:480px){.logo-wide .logo-name small{display:none}}
@media (min-width:861px){.mnav{display:none!important}}

/* ---------- 5. Hero ---------- */
.hero-img{object-fit:cover}
html[data-hero="b"] .hero-img{opacity:.9}
img.cover{display:block;padding:0;object-fit:cover;background:var(--surface)}
img.cover::before{display:none}
.hero-cover img.cover{width:var(--cover-w);max-width:none}
.badge{cursor:default}
.badge:hover{border-color:var(--h-glass-line)}
.ico-t{font:700 .7rem/1 var(--sans)}
.hero-page .p-title{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,2.8vw,2.3rem);line-height:1.15;margin:12px 0 0;color:var(--h-ink)}
h1.sr+*{margin-top:0}

/* ---------- 6. Right block ---------- */
.side-first-none{display:none}
.login-tabs a,.login-tabs span{flex:1;text-align:center;padding:13px;font:600 .92rem var(--sans);color:var(--muted);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px}
.login-tabs .on{color:var(--ink);border-bottom-color:var(--accent)}
.login-tabs a:hover{color:var(--brand-text)}
.field input:focus{outline:3px solid var(--focus-in);outline-offset:2px;box-shadow:0 0 0 7px var(--focus-out)}
.col-right .pkp_block{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;font-size:.92rem}
html[data-right="b"] .col-right .pkp_block{background:transparent;border:0;border-top:3px solid var(--brand-text);border-radius:0;padding:16px 0 0}
/* "Quick Access": sentence case in the HTML (a parser reads the text), capitalised on screen. */
.side-menu-card .h-block{text-transform:capitalize}
/* Linear style: a card that sits on the hero is drawn as a card, so its text never lies on the hero itself. */
html[data-right="b"] .col-right > .on-hero{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 10px 30px -18px rgba(0,0,0,.35)}
.pkp_block .title{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:600;font-size:1.15rem;margin:0 0 14px;color:var(--ink)}
.pkp_block .title::before{content:"";display:inline-block;width:14px;height:20px;background:var(--accent);clip-path:polygon(0 0,100% 0,100% 100%,50% 74%,0 100%);flex:none}
.pkp_block .content ul{list-style:none;margin:0;padding:0}
.pkp_block .content li{padding:6px 0;border-bottom:1px solid var(--line)}
.pkp_block .content li:last-child{border-bottom:0}
.pkp_block .content a{text-decoration:none;color:var(--ink)}
.pkp_block .content a:hover{color:var(--brand-text);text-decoration:underline}
.pkp_block img{max-width:100%;height:auto}
.pkp_block .content>*:first-child{margin-top:0}
.pkp_block .content>*:last-child{margin-bottom:0}
.block_make_submission_link{display:flex;justify-content:center;padding:12px;background:var(--accent);color:var(--accent-ink)!important;font-weight:700;border-radius:var(--radius);text-decoration:none}
.side-menu a[aria-current]{color:var(--brand-text);font-weight:600;padding-inline-start:12px;background-size:3px 60%}

/* ---------- 7. Article card ---------- */
img.doi-ico{background:none;border-radius:50%;width:20px;height:20px}
/* 24 px target (WCAG 2.5.8), also beside an opened format menu. */
.doi a{overflow-wrap:anywhere;display:inline-flex;align-items:center;min-height:24px}
.doi-none{flex:0}
.art-issue{display:inline-flex;align-items:center;gap:6px}
.art-issue a{color:inherit}
.art-title a{overflow-wrap:anywhere}
.art-list>.art:first-child{margin-top:14px}
html[data-list="a"] .art-list>.art:first-child,html[data-list="c"] .art-list>.art:first-child{margin-top:4px}
.g-more summary{display:inline-flex}
.mini-list{counter-reset:none}
mark{background:transparent;background:color-mix(in srgb,var(--accent) 45%,transparent);color:inherit;padding:0 .1em;border-radius:2px}

/* ---------- 8. Bands ---------- */
.index-tile img{max-width:70%;max-height:46px;object-fit:contain}
.index-tile:hover{filter:none}
.marquee:focus-visible{outline-offset:-3px}
/* Moving content can be stopped (WCAG 2.2.2): by the button, by keyboard focus, by hover; without JavaScript it does not move. */
.marquee:focus .marquee-track,.marquee:focus-within .marquee-track,.marquee.paused .marquee-track{animation-play-state:paused}
.marquee.paused{overflow-x:auto}
html:not(.galata-js) .marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
html:not(.galata-js) .marquee-track{animation:none}
.marquee-toggle{display:block;margin-block:-14px 12px;margin-inline-start:auto;padding:4px 10px;min-height:28px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}
.marquee-toggle:hover{color:var(--brand-text);border-color:var(--brand-text)}
@media (prefers-reduced-motion:reduce){.marquee-toggle{display:none}}
img.avatar-img{display:block;object-fit:cover;padding:0}
.ed-chief .ed-aff{margin:6px 0 0;opacity:.85;font-size:.9rem}
.ed-chief .ed-spec{margin:18px 0 0;font-family:var(--serif);font-style:italic;font-size:1.02rem;opacity:.9;line-height:1.5}
.home-extra{margin-top:32px}

/* ---------- 9. Rich text written in OJS ---------- */
.prose-lite>*{margin:0}
.prose-lite>*+*{margin-top:.85em}
.prose-lite :is(ul,ol){padding-inline-start:1.4em}
.prose-lite img,.prose-lite iframe,.prose-lite video{max-width:100%}
.prose-lite table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
.prose-lite :is(th,td){border:1px solid var(--line);padding:8px 10px;text-align:start}
.about-lead.prose-lite{max-width:70ch}

/* ---------- 10. OJS core and plugin pages inside the generic shell ---------- */
.generic-body{min-width:0;overflow-wrap:anywhere}
.generic-body .cmp_breadcrumbs{display:none}
.generic-body .page>h1:first-of-type,.generic-body>h1:first-of-type{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.generic-body h2{font-family:var(--serif);font-size:1.35rem;line-height:1.25;margin:1.6em 0 .5em}
.generic-body h3{font-family:var(--serif);font-size:1.12rem;margin:1.4em 0 .4em}
.generic-body p{margin:0 0 1em}
.generic-body :is(ul,ol){padding-inline-start:1.4em}
.generic-body img,.generic-body iframe{max-width:100%}
.generic-body table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
.generic-body :is(th,td){border:1px solid var(--line);padding:8px 10px;text-align:start}
.cmp_notification{background:var(--tint);border-inline-start:4px solid var(--accent);border-radius:var(--radius);padding:14px 18px;margin:0 0 20px}
.cmp_form fieldset{border:0;margin:0 0 24px;padding:0}
.cmp_form legend{font-family:var(--serif);font-weight:600;font-size:1.15rem;padding:0;margin-bottom:12px}
.cmp_form .fields>div{margin-bottom:14px}
.cmp_form label{display:block}
.cmp_form .label{display:block;font-size:.86rem;font-weight:600;margin-bottom:5px}
.cmp_form input[type="text"],.cmp_form input[type="email"],.cmp_form input[type="password"],.cmp_form input[type="url"],.cmp_form input[type="tel"],.cmp_form input[type="search"],.cmp_form select,.cmp_form textarea{width:100%;max-width:520px;padding:10px 12px;border:1.5px solid var(--line);border-radius:5px;background:var(--surface);color:var(--ink);font:inherit;font-size:.95rem}
.cmp_form .buttons{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.cmp_form .required{color:#B3261E}
.cmp_form .error,.pkp_form_error{color:#B3261E;font-size:.86rem}
:root[data-theme="dark"] .cmp_form .required,:root[data-theme="dark"] .cmp_form .error,:root[data-theme="dark"] .pkp_form_error{color:#FFB4AB}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cmp_form .required,:root:not([data-theme="light"]) .cmp_form .error,:root:not([data-theme="light"]) .pkp_form_error{color:#FFB4AB}}
.cmp_button,.cmp_form button[type="submit"],.generic-body .submit,.pkp_button{display:inline-flex;align-items:center;gap:8px;border-radius:var(--radius);padding:10px 18px;font:600 .92rem var(--sans);text-decoration:none;border:1.5px solid transparent;cursor:pointer;background:var(--brand);color:#fff}
.cmp_pagination{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px;font-size:.92rem}

/* Accent-coloured text on the brand colour: lightened until it reads (4.5:1 in every style). */
:root{--accent-on-brand:color-mix(in srgb,var(--accent) 60%,#fff)}
.ed-chief .role,html[data-submenu="c"] .dd-gtitle{color:var(--accent-on-brand)}
html[data-footer="a"] .foot a:hover{color:var(--accent-on-brand)}
.hero{--h-kicker:var(--accent-on-brand)}
/* Hero in the style's colours: the secondary text (white at 90 %) reaches 4.5:1
   on every point of the gradient, measured on the rendered page.
   --hero-2 is the gradient's second colour; the custom style sets its own. */
:root{--hero-2:color-mix(in srgb,var(--brand-2) 75%,var(--brand));--hero-3:color-mix(in srgb,var(--hero-2) 88%,var(--accent))}
html[data-palette="galata"]{--hero-2:color-mix(in srgb,var(--brand-2) 20%,var(--brand))}
.hero{--h-muted:rgba(255,255,255,.93)}
/* Small captions inside the boxes of the top area: the pattern runs behind them. */
.hx-boxes span{color:var(--h-ink)}
html[data-hero="c"] .hx-boxes span,html[data-hero="d"][data-hc-light="1"] .hx-boxes span{color:var(--h-muted)}
html[data-hero="a"] .hero{background:linear-gradient(118deg,var(--brand) 0%,var(--hero-2) 62%,var(--hero-3) 130%)}
html[data-palette="galata"][data-hero="a"] .hero{--h-muted:rgba(255,255,255,.96)}
html[data-hero="d"] .hero{background:linear-gradient(118deg,var(--hc,#2F4858) 0%,var(--hc,#2F4858) 150%);background:linear-gradient(118deg,var(--hc,#2F4858) 0%,color-mix(in srgb,var(--hc,#2F4858) 82%,#fff) 150%)}
/* The letters inside the round masthead icons are text: the hero's text colour, not the accent. */
.hx-kunye.big .ico-t{color:var(--h-ink)}
html[data-hero="c"] .hero{--h-kicker:var(--brand-text)}
html[data-hero="d"][data-hc-light="1"] .hero{--h-kicker:#111}

/* ---------- 11. Footer ---------- */
.foot-bottom a{text-decoration:underline}
.foot .foot-h{font-family:var(--serif);font-size:1rem;margin:0 0 12px}
html[data-footer="a"] .foot .foot-h{color:#fff}
.foot-custom{margin-top:36px;font-size:.9rem}
.foot-custom img{max-width:100%;height:auto}
.foot a:hover{text-decoration:underline}
.to-top{inset-inline-end:calc(20px + env(safe-area-inset-right,0px))}

/* ---------- 12. Narrow screens ---------- */
@media (max-width:860px){
  .layout,.slayout{padding-top:28px}
  .col-right{margin-top:0}
  .hero-inner{padding-top:var(--hpad);padding-bottom:var(--hpad)}
  .band{padding:44px 0}
  .tabs{overflow-x:auto}
  .tabs button{white-space:nowrap}
}
@media (max-width:560px){
  .art-top,.art-foot,.art-actions{gap:8px}
  html[data-list="b"] .art-top,html[data-list="b"] .art-body,html[data-list="b"] .art-foot{padding-inline:14px}
  .art-when{margin-inline-start:0;flex-wrap:wrap;gap:6px 12px}
  .hx-metrics b{font-size:1.3rem}
  .foot-grid{gap:24px}
}
.layout>*,.slayout>*,.hero-inner>*{min-width:0}
.col-center,.s-body,.prose{overflow-wrap:anywhere}

/* ---------- 13. Right to left ---------- */
html[dir="rtl"] .menu a,html[dir="rtl"] .menu .dd-btn{background-position:right bottom}
html[dir="rtl"] .side-menu a{background-position:right center}
html[dir="rtl"] .sm-row>a:only-child::after{transform:rotate(-135deg)}
html[dir="rtl"] .sm-row>a:only-child:hover::after{transform:translateX(-3px) rotate(-135deg)}
html[dir="rtl"] .menu .dd-panel a:hover .dd-t{transform:translateX(-4px)}
html[dir="rtl"][data-submenu="a"] .menu .dd-panel a:hover{box-shadow:inset -3px 0 0 var(--accent)}
html[dir="rtl"][data-list="a"] .art:hover,html[dir="rtl"][data-list="c"] .art:hover{box-shadow:inset -3px 0 0 var(--accent)}
html[dir="rtl"] .mnav-menu a[aria-current]{box-shadow:inset -3px 0 0 var(--accent)}
html[dir="rtl"] .marquee-track{animation-direction:reverse}
html[dir="rtl"] .hero-bg.pat,html[dir="rtl"] .hero-img{transform:scaleX(-1)}
html[dir="rtl"][data-hero="a"] .hero{background:linear-gradient(242deg,var(--brand) 0%,var(--hero-2) 62%,var(--hero-3) 130%)}
html[dir="rtl"][data-hero="d"] .hero{background:linear-gradient(242deg,var(--hc,#2F4858) 0%,var(--hc,#2F4858) 150%);background:linear-gradient(242deg,var(--hc,#2F4858) 0%,color-mix(in srgb,var(--hc,#2F4858) 82%,#fff) 150%)}
html[dir="rtl"][data-hero="b"] .hero::before{background:linear-gradient(270deg,rgba(9,16,14,.92) 0%,rgba(9,16,14,.8) 45%,rgba(9,16,14,.5) 100%)}
html[dir="rtl"] .i-flip{transform:scaleX(-1)}

/* ---------- 14. Motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
  .marquee-track{animation:none}
}

/* ---------- 15. Print ---------- */
@media print{
  .site-head,.mnav,.col-right,.col-left,.to-top,.foot-grid,.tabs,.galleys,.copy,.skip-link,.hero-bg,.bands,.nav-toggle{display:none!important}
  body{background:#fff;color:#000}
  .hero{background:none!important;color:#000!important;--h-ink:#000;--h-muted:#333;--h-strong:#000;--h-line:#999;--h-kicker:#000;border-bottom:1px solid #999}
  .layout,.slayout{display:block;padding:0}
  [data-panel][hidden]{display:block!important}
  .prose a[href^="http"]::after,.generic-body a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all}
  .foot{background:none!important;color:#000!important;border-top:1px solid #999}
  .art{break-inside:avoid}
}

/* ---------- 16. Forced colours ---------- */
@media (forced-colors:active){
  :focus-visible{outline:3px solid Highlight;box-shadow:none}
  .ribbon,.pkp_block .title::before{forced-color-adjust:none;background:Highlight}
  .tabs button[aria-selected="true"],.login-tabs .on,.menu a[aria-current],.side-menu a[aria-current]{border-bottom:3px solid Highlight}
  .btn,.galleys a,.g-more summary,.copy,.theme-toggle,.nav-toggle,.auth a,.btn-submit{border:1px solid ButtonText}
  .hero-bg{display:none}
  .langs a[aria-current]{outline:2px solid Highlight}
  .cover{border:1px solid CanvasText}
}

/* Search box on the coloured header: a light ring reads on the brand colour. */
html[data-header="b"] .search:focus-within{outline-color:#fff;border-color:#fff;box-shadow:0 0 0 7px var(--brand)}

/* Controls that only work with scripts stay hidden without them. */
html:not(.galata-js) .js-only{display:none!important}
/* One column: the divider of the linear right block has nothing to divide. */
@media (max-width:860px){html[data-right="b"] .col-right::before{display:none}}

/* On a phone the hero pattern runs under the text column: it is drawn fainter there. */
@media (max-width:860px){.hero-bg.pat{opacity:.55}}
/* Number of open tasks beside the signed-in user's name. */
.task-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-inline-start:4px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:700 .72rem/1 var(--sans);vertical-align:middle}
/* Phone: in the layouts with a visible title, the journal's name and its description stand beside the cover
   (the text runs on under the cover when it is longer); what follows starts below both. */
@media (max-width:860px){
  html:is([data-herolay="a"],[data-herolay="b"],[data-herolay="d"]) .hero-inner{display:flow-root}
  html:is([data-herolay="a"],[data-herolay="b"],[data-herolay="d"]) .hero-cover{float:left;float:inline-start;margin:0 16px 12px 0;margin-inline:0 16px}
  html:is([data-herolay="a"],[data-herolay="b"],[data-herolay="d"]) .hero-main,html:is([data-herolay="a"],[data-herolay="b"],[data-herolay="d"]) .hero-main>.hx{display:contents}
  html:is([data-herolay="a"],[data-herolay="b"],[data-herolay="d"]) .hx-h1{font-size:1.42rem;line-height:1.16}
  html:is([data-herolay="a"],[data-herolay="b"],[data-herolay="d"]) .hx-sub{font-size:.95rem}
  html:is([data-herolay="a"],[data-herolay="b"],[data-herolay="d"]) :is(.hx-metrics,.hx-kunye,.hx-btns){clear:both}
  html:is([data-herolay="a"],[data-herolay="b"],[data-herolay="d"]) :is(.hero-aside,.hero-strip){clear:both;margin-top:20px}
}

/* ---------- 16. Nested Navigation Submenu Support for PKP Menu Renderer ---------- */
.menu li{position:relative}
.menu li ul{display:none;position:absolute;top:100%;inset-inline-start:0;min-width:220px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:0 0 var(--radius) var(--radius);box-shadow:0 18px 40px -16px rgba(0,0,0,.35);padding:6px 0;margin:0;list-style:none;z-index:70}
.menu li:hover>ul,.menu li:focus-within>ul{display:block}
.menu li ul li{display:block;width:100%;border:0}
.menu li ul a{display:block;padding:8px 16px;color:var(--ink);font-size:.93rem;font-weight:500;text-decoration:none;background:none;transition:background-color .18s,color .18s;white-space:nowrap}
.menu li ul a:hover{color:var(--brand-text);background:var(--tint)}
.menu li:has(>ul)>a::after{content:"";display:inline-block;width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-block:0 3px;margin-inline:7px 0}
.menu li:hover:has(>ul)>a::after{transform:rotate(-135deg);margin-bottom:-1px}

/* ---------- 17. Robust Navigation Dropdown Card ---------- */
.menu .dd{position:relative!important}
.menu .dd .dd-panel{display:none!important;position:absolute!important;top:100%!important;inset-inline-start:0!important;z-index:1000!important;background:var(--surface,#ffffff)!important;border:1px solid var(--line,#e2e8e4)!important;border-top:3px solid var(--accent,#E2A72E)!important;border-radius:0 0 8px 8px!important;box-shadow:0 18px 40px -10px rgba(0,0,0,0.3)!important;min-width:240px!important;padding:8px 0!important}
.menu .dd:hover>.dd-panel,.menu .dd.open>.dd-panel,.menu .dd:focus-within>.dd-panel{display:block!important}
.menu .dd .dd-panel .dd-inner{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
.menu .dd .dd-panel ul{list-style:none!important;margin:0!important;padding:0!important}
.menu .dd .dd-panel li{display:block!important;width:100%!important;border:0!important}
.menu .dd .dd-panel a{display:block!important;padding:9px 18px!important;color:var(--ink,#18221E)!important;font-size:0.92rem!important;font-weight:500!important;text-decoration:none!important;white-space:nowrap!important;transition:background-color .15s,color .15s,padding-left .15s!important;background:none!important}
.menu .dd .dd-panel a:hover{background:var(--tint,#E4E9E6)!important;color:var(--brand-text,#1F4D3F)!important;padding-inline-start:22px!important}

.mnav-menu li ul,.mnav-kids{list-style:none!important;margin:0 0 8px!important;padding:0!important;margin-inline-start:12px!important;padding-inline-start:12px!important;border-inline-start:2px solid var(--tint)!important}
.mnav-menu li ul a,.mnav-kids a{padding:8px 10px!important;font-size:.94rem!important;color:var(--muted)!important}



/* ---------- 18. Robust User Account Dropdown Panel ---------- */
.auth .dd{position:relative!important}
.auth .user-btn{display:inline-flex!important;align-items:center!important;gap:8px!important;padding:8px 16px!important;border-radius:var(--radius, 6px)!important;border:1.5px solid rgba(255, 255, 255, 0.4)!important;background:rgba(255, 255, 255, 0.15)!important;color:#ffffff!important;font:600 0.88rem var(--sans, sans-serif)!important;cursor:pointer!important;transition:all .2s ease!important}
.auth .user-btn:hover,.auth .dd.open .user-btn{background:rgba(255, 255, 255, 0.28)!important;border-color:rgba(255, 255, 255, 0.7)!important;box-shadow:0 4px 14px rgba(0,0,0,0.2)!important}
.auth .user-btn .icon{width:16px!important;height:16px!important;flex-shrink:0!important}
.auth .user-btn::after{content:""!important;display:inline-block!important;width:6px!important;height:6px!important;border:solid currentColor!important;border-width:0 1.5px 1.5px 0!important;transform:rotate(45deg)!important;margin-bottom:2px!important;margin-left:2px!important;transition:transform 0.2s!important}
.auth .dd.open .user-btn::after{transform:rotate(-135deg)!important;margin-bottom:-2px!important}

/* The Panel */
.auth .dd .user-panel{display:none!important;position:absolute!important;top:calc(100% + 8px)!important;inset-inline-end:0!important;inset-inline-start:auto!important;width:260px!important;background:var(--surface, #ffffff)!important;border:1px solid var(--line, #e2e8e4)!important;border-top:3px solid var(--accent, #E2A72E)!important;border-radius:0 0 10px 10px!important;box-shadow:0 20px 45px -10px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.04)!important;z-index:2000!important;padding:0!important;overflow:hidden!important;text-align:left!important}
.auth .dd:hover>.user-panel,.auth .dd.open>.user-panel,.auth .dd:focus-within>.user-panel{display:block!important}

/* Head info card */
.user-panel-head{display:flex!important;align-items:center!important;gap:12px!important;padding:14px 16px!important;background:var(--tint, #F0F4F2)!important;border-bottom:1px solid var(--line, #e2e8e4)!important}
.user-avatar{width:36px!important;height:36px!important;border-radius:50%!important;background:var(--brand, #1F4D3F)!important;color:#ffffff!important;display:grid!important;place-items:center!important;flex-shrink:0!important}
.user-avatar .icon{width:18px!important;height:18px!important}
.user-meta{display:flex!important;flex-direction:column!important;min-width:0!important}
.user-name-full{font-size:0.92rem!important;font-weight:700!important;color:var(--ink, #1A2724)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.user-email{font-size:0.76rem!important;color:var(--muted, #5A6964)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

/* Links body */
.user-panel-body ul{list-style:none!important;margin:0!important;padding:6px 0!important}
.user-panel-body li{display:block!important;margin:0!important;padding:0!important}
.user-panel-body li a{display:flex!important;align-items:center!important;gap:12px!important;padding:10px 18px!important;color:var(--ink, #1A2724)!important;font-size:0.9rem!important;font-weight:500!important;text-decoration:none!important;transition:background-color 0.15s, color 0.15s, padding-left 0.15s!important}
.user-panel-body li a:hover{background:var(--tint, #F0F4F2)!important;color:var(--brand-text, #1F4D3F)!important;padding-inline-start:22px!important}
.user-panel-body li a .icon{width:16px!important;height:16px!important;color:var(--muted, #5A6964)!important;flex-shrink:0!important;transition:color 0.15s!important}
.user-panel-body li a:hover .icon{color:var(--brand-text, #1F4D3F)!important}
.user-panel-body .user-divider,.mnav-user .user-divider{height:1px!important;background:var(--line, #e2e8e4)!important;margin:6px 0!important}
.user-panel-body li a.user-logout,.mnav-user a.mnav-logout{color:#c93b2b!important}
.user-panel-body li a.user-logout .icon,.mnav-user a.mnav-logout .icon{color:#c93b2b!important}
.user-panel-body li a.user-logout:hover,.mnav-user a.mnav-logout:hover{background:#fdf2f2!important;color:#a82315!important}

/* Mobile drawer user card */
.mnav-user-card{display:flex!important;align-items:center!important;gap:12px!important;padding:12px 14px!important;background:var(--tint, #F0F4F2)!important;border-radius:var(--radius, 6px)!important;margin-bottom:8px!important}
.mnav-user a{display:flex!important;align-items:center!important;gap:10px!important}
.mnav-user a .icon{width:16px!important;height:16px!important}

/* Dark mode overrides */
:root[data-theme="dark"] .auth .dd .user-panel{background:var(--surface, #1e2825)!important;border-color:rgba(255, 255, 255, 0.1)!important}
:root[data-theme="dark"] .user-panel-head,:root[data-theme="dark"] .mnav-user-card{background:rgba(255, 255, 255, 0.05)!important;border-color:rgba(255, 255, 255, 0.08)!important}
:root[data-theme="dark"] .user-name-full{color:#f0f4f2!important}
:root[data-theme="dark"] .user-panel-body li a{color:#e0e6e3!important}
:root[data-theme="dark"] .user-panel-body li a:hover{background:rgba(255, 255, 255, 0.08)!important;color:#ffffff!important}
:root[data-theme="dark"] .user-panel-body .user-divider,:root[data-theme="dark"] .mnav-user .user-divider{background:rgba(255, 255, 255, 0.08)!important}

/* ---------- 17. Robust Mega Navigation Dropdown Card with Submission Promo ---------- */
.navbar .wrap { position: relative !important; }
html[data-submenu="b"] .menu .dd { position: static !important; }
html[data-submenu="b"] .menu .dd .dd-panel {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
html[data-submenu="b"] .menu .dd:hover > .dd-panel,
html[data-submenu="b"] .menu .dd.open > .dd-panel,
html[data-submenu="b"] .menu .dd:focus-within > .dd-panel {
    display: block !important;
}

html[data-submenu="b"] .menu .dd .dd-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 290px !important;
    gap: 32px !important;
    background: var(--surface, #ffffff) !important;
    border: 1px solid var(--line, #e2e8e4) !important;
    border-top: 3px solid var(--accent, #E2A72E) !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 25px 50px -18px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0,0,0,0.03) !important;
    padding: 24px 28px !important;
    animation: menuPanelFade 0.2s ease-out !important;
}

@keyframes menuPanelFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

html[data-submenu="b"] .menu .dd-group {
    grid-column: 1 !important;
}
html[data-submenu="b"] .menu .dd-gtitle {
    display: block !important;
    font-family: var(--serif, serif) !important;
    font-size: 1.15rem !important;
    color: var(--brand-text, #1F4D3F) !important;
    padding-bottom: 10px !important;
    margin: 0 0 12px 0 !important;
    border-bottom: 1.5px solid var(--line, #e2e8e4) !important;
}
html[data-submenu="b"] .menu .dd-group ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
    gap: 8px 16px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
html[data-submenu="b"] .menu .dd-group li {
    display: block !important;
    width: 100% !important;
}
html[data-submenu="b"] .menu .dd-group li a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 14px !important;
    border-radius: var(--radius, 6px) !important;
    color: var(--ink, #18221E) !important;
    font-size: 0.93rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: all 0.16s ease !important;
}
html[data-submenu="b"] .menu .dd-group li a:hover {
    background: var(--tint, #F0F4F2) !important;
    color: var(--brand-text, #1F4D3F) !important;
    padding-inline-start: 18px !important;
    box-shadow: inset 3px 0 0 var(--accent, #E2A72E) !important;
}

/* Submission Promo Box */
html[data-submenu="b"] .menu .dd-promo {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    grid-column: 2 !important;
    background: linear-gradient(145deg, var(--tint, #F0F4F2) 0%, rgba(226, 167, 46, 0.08) 100%) !important;
    border: 1px solid var(--line, #e2e8e4) !important;
    border-radius: 10px !important;
    padding: 22px !important;
    align-self: start !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}
html[data-submenu="b"] .menu .dd-promo b {
    display: block !important;
    font-family: var(--serif, serif) !important;
    font-size: 1.15rem !important;
    color: var(--brand-text, #1F4D3F) !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
}
html[data-submenu="b"] .menu .dd-promo p {
    font-size: 0.85rem !important;
    color: var(--muted, #5A6964) !important;
    line-height: 1.45 !important;
    margin: 0 0 16px 0 !important;
}
html[data-submenu="b"] .menu .dd-promo .btn-accent {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 8px !important;
    background: var(--accent, #E2A72E) !important;
    color: var(--accent-ink, #2E2100) !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    padding: 11px 18px !important;
    border-radius: var(--radius, 6px) !important;
    text-decoration: none !important;
    border: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 3px 10px rgba(226, 167, 46, 0.3) !important;
}
html[data-submenu="b"] .menu .dd-promo .btn-accent:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(226, 167, 46, 0.4) !important;
}

/* Mobile promo button inside drawer */
.mnav-promo-li {
    margin-top: 10px !important;
    list-style: none !important;
}
.mnav-promo-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    background: var(--accent, #E2A72E) !important;
    color: var(--accent-ink, #2E2100) !important;
    font-weight: 700 !important;
    padding: 10px 14px !important;
    border-radius: var(--radius, 6px) !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
}

/* Dark mode for Mega Menu */
:root[data-theme="dark"] html[data-submenu="b"] .menu .dd .dd-inner {
    background: var(--surface, #1e2825) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
:root[data-theme="dark"] html[data-submenu="b"] .menu .dd-gtitle {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
:root[data-theme="dark"] html[data-submenu="b"] .menu .dd-group li a {
    color: #e0e6e3 !important;
}
:root[data-theme="dark"] html[data-submenu="b"] .menu .dd-group li a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}
:root[data-theme="dark"] html[data-submenu="b"] .menu .dd-promo {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
:root[data-theme="dark"] html[data-submenu="b"] .menu .dd-promo b {
    color: #ffffff !important;
}
:root[data-theme="dark"] html[data-submenu="b"] .menu .dd-promo p {
    color: #a0ada7 !important;
}

/* ---------- 17. Robust Mega Navigation Dropdown Card with Submission Promo ---------- */
.navbar .wrap { position: relative !important; }
html[data-submenu="b"] .menu .dd { position: static !important; }
html[data-submenu="b"] .menu .dd .dd-panel {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
html[data-submenu="b"] .menu .dd:hover > .dd-panel,
html[data-submenu="b"] .menu .dd.open > .dd-panel,
html[data-submenu="b"] .menu .dd:focus-within > .dd-panel {
    display: block !important;
}

html[data-submenu="b"] .menu .dd .dd-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 32px !important;
    background: var(--surface, #ffffff) !important;
    border: 1px solid var(--line, #e2e8e4) !important;
    border-top: 3px solid var(--accent, #E2A72E) !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 25px 50px -18px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0,0,0,0.03) !important;
    padding: 24px 28px !important;
    animation: menuPanelFade 0.2s ease-out !important;
    box-sizing: border-box !important;
}

@keyframes menuPanelFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

html[data-submenu="b"] .menu .dd-group {
    grid-column: 1 !important;
    min-width: 0 !important;
}
html[data-submenu="b"] .menu .dd-gtitle {
    display: block !important;
    font-family: var(--serif, serif) !important;
    font-size: 1.15rem !important;
    color: var(--brand-text, #1F4D3F) !important;
    padding-bottom: 10px !important;
    margin: 0 0 12px 0 !important;
    border-bottom: 1.5px solid var(--line, #e2e8e4) !important;
}
html[data-submenu="b"] .menu .dd-group ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
    gap: 8px 16px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
html[data-submenu="b"] .menu .dd-group li {
    display: block !important;
    width: 100% !important;
}
html[data-submenu="b"] .menu .dd-group li a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 14px !important;
    border-radius: var(--radius, 6px) !important;
    color: var(--ink, #18221E) !important;
    font-size: 0.93rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: all 0.16s ease !important;
}
html[data-submenu="b"] .menu .dd-group li a:hover {
    background: var(--tint, #F0F4F2) !important;
    color: var(--brand-text, #1F4D3F) !important;
    padding-inline-start: 18px !important;
    box-shadow: inset 3px 0 0 var(--accent, #E2A72E) !important;
}

/* Submission Promo Box */
html[data-submenu="b"] .menu .dd-promo {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    grid-column: 2 !important;
    background: linear-gradient(145deg, var(--tint, #F0F4F2) 0%, rgba(226, 167, 46, 0.08) 100%) !important;
    border: 1px solid var(--line, #e2e8e4) !important;
    border-radius: 10px !important;
    padding: 22px !important;
    align-self: start !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
html[data-submenu="b"] .menu .dd-promo b {
    display: block !important;
    font-family: var(--serif, serif) !important;
    font-size: 1.15rem !important;
    color: var(--brand-text, #1F4D3F) !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
}
html[data-submenu="b"] .menu .dd-promo p {
    font-size: 0.85rem !important;
    color: var(--muted, #5A6964) !important;
    line-height: 1.45 !important;
    margin: 0 0 16px 0 !important;
}
html[data-submenu="b"] .menu .dd-promo .btn-accent {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 8px !important;
    background: var(--accent, #E2A72E) !important;
    color: var(--accent-ink, #2E2100) !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    padding: 11px 16px !important;
    border-radius: var(--radius, 6px) !important;
    text-decoration: none !important;
    border: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 3px 10px rgba(226, 167, 46, 0.3) !important;
    text-align: center !important;
}
html[data-submenu="b"] .menu .dd-promo .btn-accent:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(226, 167, 46, 0.4) !important;
}

/* Mobile promo button inside drawer */
.mnav-promo-li {
    margin-top: 10px !important;
    list-style: none !important;
}
.mnav-promo-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    background: var(--accent, #E2A72E) !important;
    color: var(--accent-ink, #2E2100) !important;
    font-weight: 700 !important;
    padding: 10px 14px !important;
    border-radius: var(--radius, 6px) !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
}

/* Dark mode for Mega Menu */
:root[data-theme="dark"] html[data-submenu="b"] .menu .dd .dd-inner {
    background: var(--surface, #1e2825) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
:root[data-theme="dark"] html[data-submenu="b"] .menu .dd-gtitle {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
:root[data-theme="dark"] html[data-submenu="b"] .menu .dd-group li a {
    color: #e0e6e3 !important;
}
:root[data-theme="dark"] html[data-submenu="b"] .menu .dd-group li a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}
:root[data-theme="dark"] html[data-submenu="b"] .menu .dd-promo {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
:root[data-theme="dark"] html[data-submenu="b"] .menu .dd-promo b {
    color: #ffffff !important;
}
:root[data-theme="dark"] html[data-submenu="b"] .menu .dd-promo p {
    color: #a0ada7 !important;
}