/* Shared styles for static content pages (blog, terms). Matches the HealTrip brand. */
:root { --navy: #011F55; --blue: #0a4fd6; --cyan: #19c3d6; --ink: #0b2347; --muted: #5b6d86; --line: #e3ecf5; --bg: #F5F9FC; --card: #fff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: "IBM Plex Sans Arabic", "Readex Pro", system-ui, sans-serif; line-height: 1.9; font-size: 17px; }
[dir="ltr"] body, body[dir="ltr"] { font-family: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif; line-height: 1.75; }
a { color: var(--blue); }
.ht-top { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.ht-top .in { max-width: 1120px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 18px; }
.ht-top img { height: 46px; width: auto; display: block; }
.ht-top nav { margin-inline-start: auto; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.ht-top nav a { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; }
.ht-top nav a:hover { color: var(--blue); }
.ht-top .cta { background: linear-gradient(135deg, var(--navy), var(--blue)); color: #fff !important; padding: 9px 16px; border-radius: 12px; }
.hero { background: radial-gradient(900px 420px at 85% -10%, #0b3f86 0%, var(--navy) 60%, #000f2e 100%); color: #fff; padding: 64px 20px 56px; }
.hero .in { max-width: 860px; margin: 0 auto; }
.hero .kicker { display: inline-block; font-size: 13px; letter-spacing: .5px; color: #bff9ff; border: 1px solid rgba(191,249,255,.35); border-radius: 999px; padding: 4px 12px; margin-bottom: 14px; }
.hero h1 { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.35; margin: 0 0 12px; }
.hero p { color: #d9e6ff; margin: 0; font-size: 18px; }
.hero .meta { margin-top: 16px; font-size: 14px; color: #9fb6dc; }
main { max-width: 860px; margin: 0 auto; padding: 40px 20px 64px; }
article h2 { font-size: 26px; color: var(--navy); margin: 40px 0 10px; line-height: 1.45; }
article h3 { font-size: 20px; color: var(--navy); margin: 28px 0 8px; }
article p, article li { color: #22385e; }
article ul, article ol { padding-inline-start: 22px; }
article li { margin: 6px 0; }
.note { background: #fff; border: 1px solid var(--line); border-inline-start: 4px solid var(--cyan); border-radius: 14px; padding: 16px 18px; margin: 26px 0; font-size: 15.5px; color: var(--muted); }
.note.alert { border-inline-start-color: #e0484e; }
.cta-box { margin: 44px 0 0; background: linear-gradient(135deg, var(--navy), var(--blue)); color: #fff; border-radius: 20px; padding: 28px; }
.cta-box h2 { color: #fff; margin: 0 0 8px; font-size: 24px; }
.cta-box p { color: #d9e6ff; margin: 0 0 16px; }
.cta-box a { display: inline-block; background: #fff; color: var(--navy); text-decoration: none; font-weight: 700; padding: 11px 20px; border-radius: 12px; margin-inline-end: 10px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(1,31,85,.12); }
.card img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; }
.card .b { padding: 16px 18px 20px; }
.card h2 { font-size: 19px; margin: 0 0 6px; color: var(--navy); line-height: 1.5; }
.card p { margin: 0; font-size: 15px; color: var(--muted); }
.cover { width: 100%; height: auto; border-radius: 18px; margin: 0 0 8px; aspect-ratio: 16/8; object-fit: cover; display: block; }
.toc { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 20px; font-size: 15.5px; }
.toc strong { color: var(--navy); }
.ht-foot { background: var(--navy); color: #c9d6ee; padding: 36px 20px; font-size: 14.5px; }
.ht-foot .in { max-width: 1120px; margin: 0 auto; display: grid; gap: 10px; }
.ht-foot a { color: #fff; text-decoration: none; margin-inline-end: 16px; }
.ht-foot .links { display: flex; flex-wrap: wrap; gap: 6px 0; }
.ht-foot small { color: #8ea3c7; }
@media (max-width: 640px) { body { font-size: 16px; } .ht-top nav a:not(.cta) { display: none; } .hero { padding: 44px 16px 40px; } main { padding: 28px 16px 48px; } }