/* content pages (features, guides, pricing, hubs) and the server-rendered listing cards of /explore and /portal.
   Mobile-first, RTL. Colours come from the «شب آشیان» tokens when they exist (html.dark[data-accent="navygold"]) and have their own fallbacks,
   so the pages also look right without them. One file for everything the content slice prints: template markup uses only the classes below. */

/* ---------------------------------------------------------------- tokens */
:root{
  --ct-bg:#f3f5f8;--ct-sf:#ffffff;--ct-sf2:#f7f9fb;--ct-ln:#e3e8ef;--ct-ink:#0d1726;--ct-ink2:#41506a;--ct-mut:#5d6b80;
  --ct-a:#8a6516;--ct-a2:#b8892b;--ct-aw:rgba(198,165,99,.16);--ct-on-a:#ffffff;
}
html.dark{
  --ct-bg:var(--an-ink-0,#080F20);--ct-sf:var(--an-ink-1,#101D35);--ct-sf2:#0B1529;--ct-ln:var(--an-hair,rgba(168,181,199,.16));
  --ct-ink:var(--an-tx-1,#F5F4F0);--ct-ink2:var(--an-tx-2,#A8B5C7);--ct-mut:var(--an-tx-3,#8C9AB0);
  --ct-a:var(--an-gold,#C6A563);--ct-a2:var(--an-gold-hi,#EAD39C);--ct-aw:rgba(198,165,99,.13);--ct-on-a:var(--an-on-gold,#0B1426);
}

/* ---------------------------------------------------------------- page frame */
body.ct-body{margin:0;background:var(--ct-bg);color:var(--ct-ink);font-family:Vazirmatn,Vazir,Tahoma,sans-serif;line-height:2;-webkit-font-smoothing:antialiased}
.ct-body *{box-sizing:border-box}
.ct-body a{color:var(--ct-a);text-underline-offset:3px}
.ct-body :focus-visible{outline:3px solid var(--ct-a);outline-offset:2px;border-radius:8px}
.ct-skip{position:absolute;inset-inline-start:8px;top:-60px;background:var(--ct-a);color:var(--ct-on-a);padding:8px 14px;border-radius:10px;z-index:60}
.ct-skip:focus{top:8px}
.ct-w{max-width:880px;margin:0 auto;padding:0 16px}
.ct-w.wide{max-width:1040px}

.ct-top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--ct-bg) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--ct-ln)}
.ct-top .ct-w{display:flex;align-items:center;gap:10px;min-height:60px}
.ct-brand{display:flex;align-items:center;min-height:44px;gap:9px;font-weight:900;font-size:16px;text-decoration:none;color:var(--ct-ink)!important;margin-inline-end:auto}
.ct-brand img{width:30px;height:30px;border-radius:9px}
.ct-nav{display:none;gap:2px}
.ct-nav a{white-space:nowrap;text-decoration:none;font-size:13.5px;font-weight:700;color:var(--ct-ink2);padding:8px 11px;border-radius:10px}
.ct-nav a:hover,.ct-nav a[aria-current="page"]{background:var(--ct-sf);color:var(--ct-ink)}
@media (min-width:900px){.ct-nav{display:flex}}
.ct-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:13px;font:800 14px/1.2 Vazirmatn,Tahoma,sans-serif;text-decoration:none;border:1px solid var(--ct-ln);background:var(--ct-sf);color:var(--ct-ink)!important;white-space:nowrap}
.ct-btn.p{background:var(--ct-a);border-color:transparent;color:var(--ct-on-a)!important}
.ct-btn.lg{min-height:52px;padding:0 24px;font-size:15px;border-radius:15px}

.ct-main{padding:22px 0 calc(36px + env(safe-area-inset-bottom))}
.ct-main h1{margin:6px 0 10px;font-size:26px;line-height:1.6;font-weight:900;letter-spacing:-.2px}
@media (min-width:640px){.ct-main h1{font-size:34px}}
.ct-lead{margin:0 0 14px;font-size:16px;line-height:2.1;color:var(--ct-ink2)}
.ct-meta{margin:0 0 6px;font-size:12.5px;color:var(--ct-mut)}
.ct-cta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}

/* ---------------------------------------------------------------- sections */
.ct-sec{margin:28px 0 0}
.ct-sec h2{margin:0 0 6px;font-size:20px;line-height:1.7;font-weight:900}
.ct-sec p{margin:8px 0;font-size:15px;line-height:2.1}
.ct-sec ul,.ct-sec ol{margin:8px 0;padding-inline-start:22px}
.ct-sec li{margin:4px 0;font-size:15px;line-height:2}
.ct-note{margin:18px 0 0;padding:12px 14px;border:1px solid var(--ct-ln);border-inline-start:4px solid var(--ct-a);border-radius:14px;background:var(--ct-sf);font-size:14px;line-height:2;color:var(--ct-ink2)}
.ct-draft{margin:0 0 14px;padding:10px 14px;border-radius:12px;background:var(--ct-aw);font-size:13px;font-weight:700;color:var(--ct-ink)}

/* cards linking to other pages */
.ct-grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin:14px 0 0;padding:0;list-style:none}
@media (min-width:640px){.ct-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.ct-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ct-tile{display:block;height:100%;padding:14px 16px;border:1px solid var(--ct-ln);border-radius:18px;background:var(--ct-sf);text-decoration:none;color:var(--ct-ink)!important}
.ct-tile:hover{border-color:var(--ct-a)}
.ct-tile b{display:block;font-size:15.5px;font-weight:900;line-height:1.8}
.ct-tile span{display:block;margin-top:2px;font-size:13px;line-height:1.9;color:var(--ct-mut)}

/* FAQ: details/summary, the answer is always in the HTML */
.ct-faq{margin:14px 0 0;display:grid;gap:8px}
.ct-faq details{border:1px solid var(--ct-ln);border-radius:14px;background:var(--ct-sf);padding:0 14px}
.ct-faq summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:800;font-size:15px;line-height:1.8;list-style:none}
.ct-faq summary::-webkit-details-marker{display:none}
.ct-faq summary::after{content:"+";margin-inline-start:auto;font-size:20px;color:var(--ct-a)}
.ct-faq details[open] summary::after{content:"\2212"}
.ct-faq details p{margin:0 0 12px;font-size:14.5px;line-height:2.05;color:var(--ct-ink2)}

/* links to related pages */
.ct-rel{margin:30px 0 0;padding-top:16px;border-top:1px solid var(--ct-ln)}
.ct-rel h2{margin:0 0 6px;font-size:16px;font-weight:900}
.ct-rel ul{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;list-style:none}
.ct-rel a{font-size:14px;font-weight:700}

.ct-foot{margin-top:34px;padding-top:16px;border-top:1px solid var(--ct-ln);font-size:13px;line-height:2.1;color:var(--ct-mut)}
.ct-foot a{font-weight:700}
/* footer links partial: used inside the footers of other public pages too, so it only relies on inherited colours.
   Tidy columns: two on a phone, one per group on a laptop; each group is a titled vertical list, links without underlines. */
.ct-fnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px;margin:22px auto 0;padding-top:20px;max-width:1240px;
  border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);font-size:13px;line-height:1.8;text-align:start}
.ct-links-group{margin:0;min-width:0}
.ct-gt{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:13px;font-weight:900;opacity:1}
.ct-gt::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--ay-accent,currentColor)}
.ct-links{display:grid;gap:0;margin:0;padding:0;list-style:none}
.ct-fnav a{color:inherit;text-decoration:none;opacity:.78;transition:opacity .15s,color .15s}
.ct-fnav a:hover,.ct-fnav a:focus-visible{opacity:1;color:var(--ay-accent,inherit)}
.ct-fnav p{grid-column:1/-1;margin:4px 0 0;padding-top:16px;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);
  font-size:12px;line-height:2;text-align:center;opacity:.7}
/* a long group (six links or more) takes two columns and lists its links in two columns, so no column runs far below the others */
.ct-links-group:has(li:nth-child(6)){grid-column:span 2}
.ct-links-group:has(li:nth-child(6)) .ct-links{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
@media (min-width:760px){.ct-fnav{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 40px}}

/* breadcrumb trail (components/seo_breadcrumbs.html); same rules as the component's own block so the trail looks right either way */
.sc-crumbs{margin:0 0 12px;font-size:12.5px;line-height:1.9;opacity:.85}
.sc-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 6px;align-items:center}
.sc-crumbs li+li::before{content:"\2039";margin-inline-end:6px;opacity:.6}
.sc-crumbs a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------- listing cards (hubs, related) */
.ct-cards{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin:14px 0 0}
@media (min-width:640px){.ct-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.ct-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ct-card{display:flex;flex-direction:column;border:1px solid var(--ct-ln);border-radius:18px;background:var(--ct-sf);overflow:hidden;color:var(--ct-ink)}
.ct-card .im{display:block;position:relative;aspect-ratio:16/10;background:var(--ct-sf2)}
.ct-card .im img{width:100%;height:100%;object-fit:cover;display:block}
.ct-card .no{position:absolute;inset:0}
.ct-card .dl{position:absolute;top:10px;inset-inline-start:10px;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;background:rgba(8,15,32,.72);color:#fff}
.ct-card .bd{padding:12px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.ct-card h3{margin:0;font-size:14.5px;font-weight:900;line-height:1.8}
.ct-card h3 a{color:inherit;text-decoration:none;display:flex;align-items:center;min-height:44px}
.ct-card .meta{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12.5px;color:var(--ct-mut)}
.ct-card .pr{margin-top:auto;font-size:15px;font-weight:900;color:var(--ct-a)}

/* related listings block of the factsheet (plain links) */
.ct-relist{margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--ct-ln)}
.ct-relist h2{margin:0 0 6px;font-size:15px;font-weight:900}
.ct-relist ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.ct-relist a{display:flex;flex-wrap:wrap;gap:2px 10px;justify-content:space-between;text-decoration:none;font-size:14px;font-weight:700;padding:6px 0}
.ct-relist a span{font-weight:700;color:var(--ct-mut);font-size:13px}

/* pagination */
.ct-pager,.ssr-pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0 4px}
.ct-pager a,.ct-pager span,.ssr-pager a,.ssr-pager span{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border-radius:12px;border:1px solid currentColor;color:inherit;text-decoration:none;font-weight:800}
.ct-pager span,.ssr-pager span{opacity:.6}

/* ---------------------------------------------------------------- server-rendered start of /explore and /portal */
.ssr-block{grid-column:1/-1;min-width:0}
.ssr-intro{margin:0 0 14px;font-size:13px;line-height:2;opacity:.92}
.ssr-intro h2{margin:0 0 4px;font-size:15px;font-weight:900}
.ssr-intro p{margin:0 0 6px}
.ssr-intro a{color:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.ssr-places{display:flex;flex-wrap:wrap;gap:6px 14px;margin:6px 0 0;padding:0;list-style:none}
.ssr-places li{white-space:nowrap}
.ssr-grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.ssr-grid.pt{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
@media (min-width:640px){.ssr-grid.ex{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.ssr-grid.ex{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media (prefers-reduced-motion:reduce){.ct-body *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* responsive audit: footer link lists and breadcrumbs are stacked tap targets, so each link gets a 44px row */
.ct-fnav a,.sc-crumbs a,.ct-foot a{display:inline-flex;align-items:center;min-height:44px}
.ct-fnav a{min-height:44px;line-height:1.6}   /* a vertical list of 44px rows, the tap size every public page keeps */
.sc-crumbs ol{gap:0 6px}
.sc-crumbs a{min-width:44px;justify-content:center}
.ct-w li>a{display:inline-flex;align-items:center;min-height:44px}

/* iPhone PWA: the panel pages set the status bar to black-translucent and iOS draws every page under it; the sticky bar starts below it (env() is 0 elsewhere) */
.ct-top{padding-top:env(safe-area-inset-top,0px)}