/* Qeshmi skin for Jannah: the webapp's tokens (shell.css) applied to Jannah's own components.
   Hand-written. Selectors are Jannah 7.6.4's; check them again after a Jannah update. */

/* ---------- base ---------- */
body.qeshmi-mag{font-family:var(--font-core)}
body.qeshmi-mag,
body.qeshmi-mag #tie-container,
body.qeshmi-mag #tie-wrapper,
body.qeshmi-mag .background-overlay{background:var(--sand-100);color:var(--text-body)}
[data-theme=dark] body.qeshmi-mag,
[data-theme=dark] body.qeshmi-mag #tie-container,
[data-theme=dark] body.qeshmi-mag #tie-wrapper,
[data-theme=dark] body.qeshmi-mag .background-overlay{background:var(--bg-app)}

body.qeshmi-mag,
body.qeshmi-mag h1, body.qeshmi-mag h2, body.qeshmi-mag h3, body.qeshmi-mag h4, body.qeshmi-mag h5, body.qeshmi-mag h6,
body.qeshmi-mag .post-title, body.qeshmi-mag .entry, body.qeshmi-mag .entry p,
body.qeshmi-mag input, body.qeshmi-mag button, body.qeshmi-mag select, body.qeshmi-mag textarea,
body.qeshmi-mag .widget-title, body.qeshmi-mag .the-global-title, body.qeshmi-mag .mag-box-title,
body.qeshmi-mag .post-meta, body.qeshmi-mag .post-cat, body.qeshmi-mag .breaking, body.qeshmi-mag .main-menu{font-family:var(--font-core)!important}

body.qeshmi-mag :where(#content) a:where(:hover){color:var(--teal-700)}
[data-theme=dark] body.qeshmi-mag :where(#content) a:where(:hover){color:var(--teal-300)}
.qm-head .q-btn-primary, .qm-head .q-btn-primary:hover{color:#fff}
body.qeshmi-mag ::selection{background:var(--teal-100);color:var(--text-strong)}

/* ---------- shell header additions ---------- */
.qm-head{position:sticky;top:0;z-index:40;background:var(--bg-surface)}
/* Jannah's #tie-container has overflow:hidden, which turns sticky off for everything inside;
   clip keeps the same horizontal clipping without creating a scroll container */
body.qeshmi-mag #tie-container{overflow:clip}
.admin-bar .qm-head{top:32px}
@media (max-width:782px){.admin-bar .qm-head{top:46px}}
/* logo lockup after the old explore logo: mark + «قشمی» + "mag" badge + tagline, drawn in HTML so it
   follows the theme (the explore logo was a PNG that vanished on dark backgrounds) */
.qm-logo{gap:10px;text-decoration:none!important;color:var(--teal-500)}
.qm-logo .q-logo-icon{height:54px;width:auto;margin-inline-end:-4px}
.qm-logo-text{display:flex;flex-direction:column;gap:2px;line-height:1}
.qm-logo-row{display:flex;align-items:center;gap:8px}
.qm-logo-row b{font-size:26px;font-weight:900;color:var(--teal-500);letter-spacing:-.01em}
.qm-logo-badge{direction:ltr;display:inline-flex;align-items:center;height:22px;padding:0 9px 2px;border-radius:6px;
  background:var(--mag-tan);color:#fff;font:700 15px/1 system-ui,'Segoe UI',sans-serif;letter-spacing:.01em}
.qm-logo-tag{font-size:12.5px;font-weight:700;color:var(--mag-tan);white-space:nowrap}
:root{--mag-tan:#C49C77}
[data-theme=dark]{--mag-tan:#D2AE8C}
[data-theme=dark] .qm-logo .q-logo-icon, [data-theme=dark] .qm-logo-row b{color:var(--teal-400)}
.qm-cta{display:flex;align-items:center}
.qm-cta .q-btn{text-decoration:none}

/* one icon per state: search / close, moon / sun */
.q-headtool>span{display:inline-flex}
.q-headtool>.qm-ico-close,.q-headtool>.qm-ico-sun{display:none}
.qm-search-open .q-headtool>.qm-ico-open{display:none}
.qm-search-open .q-headtool>.qm-ico-close{display:inline-flex}
[data-theme=dark] .q-headtool>.qm-ico-moon{display:none}
[data-theme=dark] .q-headtool>.qm-ico-sun{display:inline-flex}

/* one header row (64px): logo, magazine sections, tools */
.qm-head .q-pubhead-inner{height:64px;gap:14px}
.qm-nav{gap:2px}
.qm-nav-item{position:relative}
.qm-nav-item>a{text-decoration:none!important}
/* teal-700 is not remapped for dark, so a hovered / active link went dark-on-dark */
[data-theme=dark] .qm-nav a:is(:hover, .q-navlink2-active), [data-theme=dark] .qm-nav a:is(:hover, .q-navlink2-active) svg,
[data-theme=dark] .qm-nav-item:focus-within>a{color:var(--teal-300)!important}
.qm-nav .qm-has-sub>a:after{content:"";display:inline-block;width:5px;height:5px;margin-inline-start:2px;
  border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-2px);opacity:.55}
.qm-sub{position:absolute;top:100%;inset-inline-start:0;z-index:50;min-width:220px;padding:8px;
  display:grid;gap:2px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility .15s}
.qm-nav-item:hover>.qm-sub, .qm-nav-item:focus-within>.qm-sub{opacity:1;visibility:visible;transform:none}
.qm-sub a{display:block;padding:9px 12px;border-radius:var(--r-md);color:var(--text-body)!important;font-size:13.5px;font-weight:600;
  text-decoration:none!important;white-space:nowrap}
.qm-sub a:hover{background:var(--teal-50);color:var(--teal-700)!important}
[data-theme=dark] .qm-sub a:hover{background:rgba(59,173,185,.16);color:var(--teal-300)!important}
/* between phone and wide desktop the row gets tight: drop the tagline, then the CTA */
@media (max-width:1240px){.qm-logo-tag{display:none}}
@media (max-width:1100px){.qm-cta{display:none}}
.q-drawer-link svg{flex:none}
.q-drawer-cat:hover{background:var(--teal-50);color:var(--teal-700)}
[data-theme=dark] .q-drawer-cat{background:var(--bg-sunken)}
[data-theme=dark] .q-drawer-cat:hover{background:rgba(59,173,185,.16);color:var(--teal-300)}

/* news ticker (Jannah's breaking news, re-skinned) + date, under the header */
.qm-news{background:var(--bg-surface);border-bottom:1px solid var(--border-subtle)}
.qm-news-inner{max-width:1280px;margin-inline:auto;padding:6px 24px;display:flex;align-items:center;gap:16px;min-height:44px}
.qm-news-date{flex:none;font-size:12.5px;font-weight:600;color:var(--text-muted);white-space:nowrap}
#tie-body .qm-news .breaking{flex:1;min-width:0;height:32px;line-height:32px;background:transparent;border:0;margin:0;padding:0;display:flex;align-items:center}
#tie-body .qm-news .breaking-title{position:relative;flex:none;height:26px;line-height:26px;padding:0 12px;margin-inline-end:12px;
  border-radius:var(--r-pill);background:var(--amber-500)!important;color:#fff;font-size:12px;font-weight:800}
#tie-body .qm-news .breaking-title:before{display:none}
#tie-body .qm-news .breaking-title .breaking-icon{display:none}
#tie-body .qm-news .ticker-wrapper{flex:1;min-width:0;height:32px;background:transparent}
#tie-body .qm-news .ticker{background:transparent;height:32px;line-height:32px}
/* the typing effect works by sliding an opaque "swipe" box off the headline, so the box and the
   headline must share the bar's colour (transparent showed the whole sentence at once) */
#tie-body .qm-news .ticker-content, #tie-body .qm-news .ticker-swipe{background:var(--bg-surface)!important;height:32px;line-height:32px}
#tie-body .qm-news .ticker-swipe span{height:32px;line-height:30px;color:var(--teal-600);background:var(--bg-surface)}
#tie-body .qm-news :is(.ticker-content, .breaking-news) a{color:var(--text-body)!important;font-size:13px;font-weight:600}
#tie-body .qm-news :is(.ticker-content, .breaking-news) a:hover{color:var(--teal-700)!important}
#tie-body .qm-news .breaking-news, #tie-body .qm-news ul.breaking-news{background:transparent}
#tie-body .qm-news .breaking-news-nav{display:flex;gap:4px;align-items:center;height:32px}
#tie-body .qm-news .breaking-news-nav li{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;line-height:1;padding:0;
  border:1px solid var(--border-subtle);border-radius:var(--r-pill);color:var(--text-muted);background:transparent;cursor:pointer}
#tie-body .qm-news .breaking-news-nav li:hover{border-color:var(--teal-300);color:var(--teal-600)}
#tie-body .qm-news .breaking-news-nav li:before{line-height:1;margin:0}
#tie-body .qm-news .slider-arrow-nav a{border-color:var(--border-subtle);color:var(--text-muted)!important;background:transparent!important;border-radius:var(--r-pill)!important}
[data-theme=dark] #tie-body .qm-news .breaking-news a:hover{color:var(--teal-300)!important}
@media (max-width:680px){
  .qm-news-inner{padding-inline:16px;gap:10px}
  .qm-news-date{display:none}
  /* Jannah shrinks the label to an empty dot and its arrows sit on top of the headline:
     keep the label as a small pill, drop the arrows (the ticker still advances by itself) */
  #tie-body .qm-news .breaking-title{width:auto!important;padding:0 10px!important;margin-inline-end:0}
  #tie-body .qm-news .breaking-title .breaking-title-text{display:inline!important}
  #tie-body .qm-news .breaking-news-nav{display:none!important}
  #tie-body .qm-news .ticker-wrapper{position:relative;overflow:hidden}
  #tie-body .qm-news .ticker-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  #tie-body .qm-news .ticker-content a{font-size:12.5px}
}

/* plain pages: the webapp page layout (hero above, prose column) */
body.qeshmi-mag .q-pagehero{margin-bottom:8px}
body.qeshmi-mag .qm-page{background:transparent;border:0;box-shadow:none;padding-inline:16px}
body.qeshmi-mag .qm-page h2, body.qeshmi-mag .qm-page h3{color:var(--text-strong)}
body.qeshmi-mag .q-pagehero h1{color:#fff}
body.qeshmi-mag .q-crumbs-light a, body.qeshmi-mag .q-crumbs-light a:hover{text-decoration:none}

/* phone menu: hamburger + the webapp drawer; the sections row moves into the drawer */
.qm-burger{display:none}
.q-drawer[hidden], .q-drawer-scrim[hidden]{display:none!important}
.q-drawer{right:0;left:auto}
.q-drawer .q-btn{justify-content:center;text-decoration:none;color:#fff}
.q-drawer-link, .q-drawer-cat, .q-drawer-insta{text-decoration:none!important}
.q-drawer-link.qm-drawer-on{background:var(--teal-50);color:var(--teal-700)}
[data-theme=dark] .q-drawer{background:var(--bg-surface)}
[data-theme=dark] .q-drawer-link.qm-drawer-on{color:var(--teal-300)}
.q-drawer-cats{margin:0 0 6px;padding-inline-start:12px}
html.qm-menu-open{overflow:hidden}

/* mobile: the webapp centres the logo and moves navigation to the bottom tab bar */
@media (max-width:899px){
  .qm-cta{display:none}
  .qm-burger{display:inline-grid;place-items:center}
  .qm-logo .q-logo-icon{height:40px}
  .qm-logo-row b{font-size:20px}
  .qm-logo-badge{height:19px;font-size:13px;padding:0 7px 2px}
  .qm-logo-tag{display:none}
}
@media (max-width:680px){
  .q-tabbar{position:fixed;inset-inline:0;bottom:0}
  body.qeshmi-mag{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .q-tabbar .q-tab{flex-direction:column;justify-content:center;gap:2px;height:60px;font-size:11.5px;color:var(--text-muted);text-decoration:none;border-radius:0}
  .q-tabbar .q-tab-active{color:var(--teal-700)}
  [data-theme=dark] .q-tabbar .q-tab-active{color:var(--teal-300)}
}
@media (min-width:681px){.q-tabbar{display:none}}

/* ---------- Jannah components ---------- */
/* Jannah's colour variables: the site-wide ones and the per-block overrides the page builder writes
   (#tie-block_N{--brand-color:#dd4b4b} etc.) all collapse to the Qeshmi teal. */
body.qeshmi-mag, body.qeshmi-mag .mag-box, body.qeshmi-mag .tie-slider-widget, body.qeshmi-mag section{
  --brand-color:var(--teal-600)!important;--dark-brand-color:var(--teal-700)!important;
  --bright-color:#fff!important;--base-color:var(--text-body)!important}
body.qeshmi-mag .mag-box{color:var(--text-body)!important}
body.qeshmi-mag .mag-box .container-wrapper,
body.qeshmi-mag .mag-box .flexMenu-popup{background-color:var(--bg-surface)!important}
body.qeshmi-mag .mag-box a:where(:not(:hover):not(.button):not(.post-cat):not(.block-pagination):not(.active)){color:var(--text-strong)!important}
/* block prev/next arrows: one look everywhere (the builder paints some blocks' arrows black with
   an id rule, hence #tie-body), icon centred in a round button */
#tie-body.qeshmi-mag .slider-arrow-nav a{display:inline-flex!important;align-items:center;justify-content:center;
  width:30px;height:30px;line-height:1;padding:0;border:0!important;border-radius:var(--r-pill)!important;
  background:var(--teal-600)!important;color:#fff!important;transition:background .15s,opacity .15s}
#tie-body.qeshmi-mag .slider-arrow-nav a:hover{background:var(--teal-700)!important}
#tie-body.qeshmi-mag .slider-arrow-nav a.pagination-disabled{opacity:.35;background:var(--teal-600)!important;color:#fff!important}
/* the builder's `#tie-block_N .slider-arrow-nav a:not(:hover){color:#000 !important}` ties with the
   rule above and is printed later, so it won on the enabled arrow; .mag-box lifts ours above it */
#tie-body.qeshmi-mag .mag-box .slider-arrow-nav a, #tie-body.qeshmi-mag .mag-box .slider-arrow-nav a span{color:#fff!important}
#tie-body.qeshmi-mag .slider-arrow-nav a span{display:block;font-size:13px;line-height:1;margin:0}
#tie-body.qeshmi-mag .mag-box .slider-arrow-nav{display:flex;flex-direction:row;align-items:center;gap:6px}
#tie-body.qeshmi-mag .slider-arrow-nav li{display:inline-flex;float:none;margin:0}
/* the builder also writes `#tie-block_N .post-excerpt, .post-meta, .entry ... {color:#000 !important}`;
   only an id beats an id, hence #tie-body (Jannah's <body> id) */
#tie-body.qeshmi-mag .mag-box :is(.entry, .post-excerpt, .day-month){color:var(--text-body)!important;opacity:1}
#tie-body.qeshmi-mag .mag-box :is(.post-meta, .post-meta a:not(:hover)){color:var(--text-muted)!important;opacity:1}
#tie-body.qeshmi-mag .mag-box :is(.the-global-title, .slider-arrow-nav a, .pages-nav .pages-numbers a, .show-more-button){border-color:var(--border-subtle)}
#tie-body.qeshmi-mag .mag-box :is(.thumb-overlay, .block-title-overlay) :is(.post-meta, .post-meta a){color:#fff!important}
body.qeshmi-mag .mag-box-title h3, body.qeshmi-mag .mag-box-title h3 a{color:var(--text-strong)!important}

/* accents Jannah hard-codes in red: trending bolt, active block filter */
body.qeshmi-mag .trending-post{background-color:var(--amber-500)!important;color:#fff}
/* block filter tabs (sub-categories above a block): Jannah fills the hovered tab with the brand
   colour, which with teal text made the label vanish; use the webapp's soft pill instead */
body.qeshmi-mag .mag-box-filter-links a{border-radius:var(--r-pill);padding-inline:10px;transition:background .15s,color .15s}
#tie-body.qeshmi-mag .mag-box-filter-links a:is(:hover, .active){background:var(--teal-50)!important;color:var(--teal-700)!important}
[data-theme=dark] #tie-body.qeshmi-mag .mag-box-filter-links a:is(:hover, .active){background:rgba(59,173,185,.16)!important;color:var(--teal-300)!important}
#tie-body.qeshmi-mag .flexMenu-viewMore > a{background:transparent!important}

/* a page-builder section whose sidebar is empty: let the content use the full width */
body.qeshmi-mag .tie-row:not(:has(> aside)) > .main-content.tie-col-md-8{width:100%}
/* cards / boxes */
body.qeshmi-mag .container-wrapper,
body.qeshmi-mag .mag-box .container-wrapper,
body.qeshmi-mag #sidebar .container-wrapper,
body.qeshmi-mag .widget.container-wrapper{
  background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
body.qeshmi-mag .post-thumb, body.qeshmi-mag .post-thumb img,
body.qeshmi-mag .slide, body.qeshmi-mag .tie-slick-slider .slide,
body.qeshmi-mag .featured-area img, body.qeshmi-mag .single-featured-image img{border-radius:var(--r-md)}

/* block titles: the webapp section title (bold ink + short teal bar) instead of Jannah's coloured tab */
body.qeshmi-mag .mag-box-title, body.qeshmi-mag .the-global-title, body.qeshmi-mag #comments-box-title{
  border-bottom:1px solid var(--border-subtle)!important}
body.qeshmi-mag .mag-box-title h3, body.qeshmi-mag .the-global-title, body.qeshmi-mag .widget-title .the-subtitle,
body.qeshmi-mag .block-head-1 .the-global-title, body.qeshmi-mag .block-head-4 .the-global-title{
  color:var(--text-strong)!important;font-weight:800!important;background:none!important}
body.qeshmi-mag .the-global-title:after, body.qeshmi-mag .mag-box-title h3:after{background:var(--teal-600)!important}
body.qeshmi-mag .block-head-4 .the-global-title:before,
body.qeshmi-mag .block-head-4 .widget-title:before{background:var(--teal-600)!important}

/* category labels */
body.qeshmi-mag .post-cat, body.qeshmi-mag a.post-cat{
  background:var(--teal-600)!important;color:#fff!important;border-radius:var(--r-pill)!important;font-weight:700;padding:3px 10px}
body.qeshmi-mag .post-cat:hover{background:var(--teal-700)!important}

/* titles and meta */
body.qeshmi-mag .post-title, body.qeshmi-mag .post-title a, body.qeshmi-mag .entry-title{color:var(--text-strong)}
body.qeshmi-mag .post-title a:hover{color:var(--teal-700)}
/* titles laid over a photo (sliders, grids, overlay blocks) stay white in both themes */
body.qeshmi-mag :is(.thumb-overlay, .block-title-overlay, .big-thumb-left-box-inner, .media-overlay) :is(a, .thumb-title, .thumb-meta, .post-meta, .meta-item){color:#fff!important}
body.qeshmi-mag .post-meta, body.qeshmi-mag .post-meta a, body.qeshmi-mag .meta-item{color:var(--text-muted)!important}

/* article body */
body.qeshmi-mag .entry{color:var(--text-body);font-size:16px;line-height:2}
body.qeshmi-mag .entry a{color:var(--teal-700);text-decoration:underline;text-underline-offset:3px}
body.qeshmi-mag .entry h2, body.qeshmi-mag .entry h3, body.qeshmi-mag .entry h4{color:var(--text-strong);font-weight:800}
body.qeshmi-mag .entry blockquote{border-inline-start:3px solid var(--teal-500);background:var(--teal-50);border-radius:var(--r-md)}

/* buttons, pagination, tags */
body.qeshmi-mag .button, body.qeshmi-mag .more-link, body.qeshmi-mag input[type=submit],
body.qeshmi-mag .pages-nav .button, body.qeshmi-mag .slider-arrow-nav a, body.qeshmi-mag .block-pagination{
  background:var(--teal-600)!important;color:#fff!important;border-radius:var(--r-pill)!important;border:0!important}
body.qeshmi-mag .button:hover, body.qeshmi-mag .more-link:hover, body.qeshmi-mag input[type=submit]:hover{background:var(--teal-700)!important}
body.qeshmi-mag .pages-numbers a, body.qeshmi-mag .pages-numbers span{border-radius:var(--r-sm)}
body.qeshmi-mag .pages-numbers .current{background:var(--teal-600)!important;color:#fff!important}
body.qeshmi-mag .post-tags a, body.qeshmi-mag .tagcloud a{border-radius:var(--r-pill);border:1px solid var(--border-subtle);background:var(--bg-surface)}
body.qeshmi-mag .post-tags a:hover, body.qeshmi-mag .tagcloud a:hover{background:var(--teal-600);border-color:var(--teal-600);color:#fff}

/* forms */
body.qeshmi-mag input[type=text], body.qeshmi-mag input[type=email], body.qeshmi-mag input[type=search],
body.qeshmi-mag input[type=url], body.qeshmi-mag textarea{
  border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--bg-surface);color:var(--text-strong)}
body.qeshmi-mag input:focus, body.qeshmi-mag textarea:focus{border-color:var(--teal-500);box-shadow:var(--focus);outline:0}

/* breaking news ticker */
body.qeshmi-mag .breaking-title{background:var(--teal-600)!important;border-radius:var(--r-pill)}
body.qeshmi-mag .breaking-title:before{background:var(--teal-600)!important}

/* dark: Jannah's dark skin paints its own greys; bring them onto the webapp's dark tokens */
[data-theme=dark] body.qeshmi-mag .container-wrapper,
[data-theme=dark] body.qeshmi-mag .widget.container-wrapper,
[data-theme=dark] body.qeshmi-mag .mag-box .container-wrapper{background:var(--bg-surface);border-color:var(--border-subtle)}
[data-theme=dark] body.qeshmi-mag .post-title a:hover{color:var(--teal-300)}
[data-theme=dark] body.qeshmi-mag .entry a{color:var(--teal-300)}
[data-theme=dark] body.qeshmi-mag .entry blockquote{background:var(--teal-50)}