/* gymcoapp.com/blog: the homepage's light look — white page, Stack Sans,
   lime accents, soft grey bands — for posts and the blog index. */
@font-face{font-family:"Thmanyah Sans";src:url(/fonts/thmanyah-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url(/fonts/thmanyah-sans-700.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Thmanyah Serif Display";src:url(/fonts/thmanyah-serif-700.woff2) format("woff2");font-weight:600 700;font-display:swap}
:root{--page:#fff;--band:#f5f6f1;--line:#e2e5dc;--t1:#0a0b09;--t2:#3d4239;--t3:#6b7166;--lime:#c6f432;--lime-wash:#f4fbd9;--ink:#0a0b09;--link:#4a6406}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--t2);font:18px/1.7 "Stack Sans Text",system-ui,-apple-system,"Segoe UI",sans-serif}
html[lang="ar"] body{font-family:"Thmanyah Sans","Stack Sans Text",system-ui,sans-serif;line-height:1.85}
a{color:var(--link)}
img{max-width:100%}
.wrap{max-width:740px;margin:0 auto;padding:0 20px}
.wrap.wide{max-width:1080px}

/* Bar */
.bar{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.bar .wrap{max-width:1080px;display:flex;align-items:center;gap:16px;height:64px}
.logo{display:flex}.logo img{display:block;height:26px;width:auto}
.bar nav{margin-inline-start:auto;display:flex;align-items:center;gap:20px;font-size:15px}
.bar nav>a{color:var(--t1);font-weight:600;text-decoration:none}
.bar nav>a:hover{color:var(--link)}
.langs{display:flex;gap:6px;align-items:center;color:var(--t3);font-size:14px;padding-inline-start:16px;border-inline-start:1px solid var(--line)}
.langs a{color:var(--t3);text-decoration:none}.langs a:hover{color:var(--t1)}.langs b{color:var(--t1)}
.langs i{font-style:normal;opacity:.5}

main{padding:44px 0 72px}

/* Headings and intro */
h1{font:600 clamp(34px,5.4vw,54px)/1.08 "Stack Sans Headline","Stack Sans Text",system-ui,sans-serif;letter-spacing:-.02em;color:var(--t1);margin:10px 0 14px}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{font-family:"Thmanyah Serif Display","Thmanyah Sans",serif;letter-spacing:0;line-height:1.35}
.lede{font-size:21px;line-height:1.5;color:var(--t2);margin:0 0 12px;max-width:62ch}
.meta{color:var(--t3);font-size:14px;margin:0}
.crumbs{margin:0}
.crumbs a{color:var(--t3);text-decoration:none;font-size:15px;font-weight:600}.crumbs a:hover{color:var(--t1)}

/* Post */
.post .cover{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;background:var(--band);margin:28px 0 8px;border-radius:20px}
@media (min-width:860px){.post .cover{width:calc(100% + 120px);max-width:none;margin-inline:-60px}}
.card{background:var(--band);border:1px solid var(--line);border-radius:20px;padding:22px 24px;margin:24px 0}
.tldr{background:var(--lime-wash);border-color:#e3f2a6}
.tldr b{display:block;color:var(--t1);font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
html[lang="ar"] .tldr b{text-transform:none;letter-spacing:0;font-size:15px}
.tldr p{margin:0;color:var(--t1);font-size:19px;line-height:1.55}
.prose h2,.faq h2{font:600 28px/1.25 "Stack Sans Headline","Stack Sans Text",sans-serif;color:var(--t1);margin:46px 0 10px;letter-spacing:-.01em}
.prose h3{font-size:21px;color:var(--t1);margin:32px 0 8px}
.prose p,.prose li{color:var(--t2)}
.prose strong{color:var(--t1)}
.prose ul,.prose ol{padding-inline-start:24px}.prose li{margin:6px 0}
.prose blockquote{margin:24px 0;padding:4px 20px;border-inline-start:4px solid var(--lime);color:var(--t1);font-size:20px}
.prose img{height:auto;border-radius:14px}
.prose table{border-collapse:collapse;width:100%;font-size:15px;margin:22px 0;display:block;overflow-x:auto;border:1px solid var(--line);border-radius:14px}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:start;vertical-align:top}
.prose th{background:var(--band);color:var(--t1);font-weight:600}
.prose tr:last-child td{border-bottom:0}
.prose code{background:var(--band);border-radius:6px;padding:1px 6px;font-size:.9em}
.prose hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.prose a{word-break:break-word}

/* Questions */
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;color:var(--t1);font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--t3);font-weight:400;font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:10px 0 0;color:var(--t2)}

/* Call to action */
.cta{margin-top:56px;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:26px 28px;border-radius:24px}
.cta img{border-radius:14px;display:block}
.cta p{margin:0;color:var(--t1);font-weight:600;font-size:18px;line-height:1.45}
.btn{display:inline-block;background:var(--ink);color:#fff;font-weight:700;border-radius:999px;padding:12px 22px;text-decoration:none;white-space:nowrap}
.btn:hover{background:#2a2e28}
@media (max-width:620px){.cta{grid-template-columns:1fr;text-align:center;justify-items:center}}

/* Index */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:36px}
.post-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;transition:transform .15s ease,box-shadow .15s ease}
.post-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(10,11,9,.08)}
.post-card img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;background:var(--band)}
.post-card .in{display:flex;flex-direction:column;gap:6px;padding:18px 20px 22px}
.post-card b{color:var(--t1);font-size:20px;line-height:1.3}
.post-card .ex{color:var(--t2);font-size:16px;line-height:1.5}
.empty{color:var(--t3);margin-top:40px}

/* Footer */
.ftr{border-top:1px solid var(--line);padding:28px 0;font-size:14px;background:var(--band)}
.ftr .wrap{max-width:1080px;display:flex;flex-wrap:wrap;gap:18px}
.ftr a{color:var(--t2);text-decoration:none}.ftr a:hover{color:var(--t1)}

@media (max-width:560px){body{font-size:17px}.bar nav{gap:12px;font-size:14px}.langs{padding-inline-start:10px}.lede{font-size:19px}main{padding:28px 0 56px}.tldr p{font-size:17px}}
@media (prefers-reduced-motion:reduce){.post-card{transition:none}.post-card:hover{transform:none}}