/* Aligna Docs WP Theme expanded styles (parity with static site) */
:root {
  --primary: #2563EB; --accent:#10B981; --bg:#ffffff; --bg-muted:#F5F7FB; --text:#0F172A; --text-muted:#475569; --border:#E5E7EB;
}
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.625rem 1rem; border-radius:12px; border:1px solid var(--border); background:#fff; color:var(--text); font-weight:600; text-decoration:none; cursor:pointer; }
.btn--primary{ border-color: var(--primary); background: var(--primary); color:#fff; }
.btn--ghost{ background:transparent; }
.docs-hero { background: linear-gradient(135deg, #eef2ff, #f0f9ff); padding: 3rem 0; border-bottom: 1px solid var(--border); }
.docs-hero h1 { margin: 0 0 .5rem; font-weight: 800; }

.grid { display: grid; gap: 1.25rem; }
.hidden{ display:none !important; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--cards { grid-template-columns: 1fr; } }
/* Sidebar/content layout */
.grid--sidebar{ grid-template-columns: 260px 1fr; align-items:start; }
@media (max-width: 900px) { .grid--sidebar { grid-template-columns: 1fr; } }
.sidebar{ position: sticky; top: 80px; align-self:start; }
.menu--stack{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.menu--stack a{ display:block; padding:.5rem .75rem; border-radius:8px; border:1px solid var(--border); background:#fff; color:var(--text); text-decoration:none; }
.menu--stack a:hover{ background:#f8fafc; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }

.card { border: 1px solid var(--border); border-radius: 18px; padding: 1.25rem; background: linear-gradient(180deg,#fff,#f9fafb); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.card h3 { margin-top: 0; }
.doc-section{ border: 1px solid var(--border); border-radius: 18px; padding: 1.25rem; background: linear-gradient(180deg,#fff,#f9fafb); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.doc-section h2{ display:flex; align-items:center; gap:.5rem; margin:0 0 .75rem; font-weight:800; }
.anchor-link{ color: var(--text-muted); text-decoration:none; font-size:.9em; }
.anchor-link:hover{ color: var(--primary); }
.cta { display:inline-flex; align-items:center; gap:.5rem; padding:.625rem 1rem; border-radius:12px; border:1px solid var(--primary); background:var(--primary); color:#fff; text-decoration:none; font-weight:600; }
.cta.secondary{ background:transparent; color:var(--primary); }
.cta.accent{ border-color:var(--accent); background:var(--accent); }

/* Home sections parity */
.chip-grid{ display:grid; gap:.75rem; grid-template-columns: repeat(4,minmax(0,1fr)); }
@media (max-width:1100px){ .chip-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:900px){ .chip-grid{ grid-template-columns:repeat(2,1fr);} }
.chip-card{ display:flex; align-items:center; justify-content:center; padding:1rem; border-radius:14px; border:1px solid var(--border); background:linear-gradient(180deg,#fff,#f8fafc); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.06); }

.feature-rows{ display:grid; gap:1.25rem; }
.feature-row{ display:grid; grid-template-columns:64px 1fr; gap:1rem; align-items:start; padding:1rem; border-radius:16px; border:1px solid var(--border); background:linear-gradient(180deg,#fff,#f9fafb); box-shadow:0 1px 2px rgba(0,0,0,.06); }
.feature-icon{ width:48px; height:48px; display:grid; place-items:center; border-radius:12px; background:#EEF2FF; color:var(--primary); }
.filter-nav{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.filter-btn{ padding:.4rem .7rem; border:1px solid var(--border); background:#fff; border-radius:999px; cursor:pointer; font-weight:600; }
.filter-btn.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
.features-grid{ display:grid; gap:1rem; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .features-grid{ grid-template-columns:1fr; } }
.gallery-3{ display:grid; gap:1rem; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .gallery-3{ grid-template-columns:1fr; } }
.gallery-card{ position:relative; overflow:hidden; border-radius:18px; box-shadow:0 6px 16px rgba(0,0,0,.08); }
.gallery-card img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .3s ease; display:block; }
.gallery-card:hover img{ transform:scale(1.08); }

/* Sections and headings */
section{ padding: 3rem 0; }
.section-muted{ background: linear-gradient(180deg, #f8fafc 0%, #f5f7fb 100%); }
.section-title{ font-weight: 800; font-size: clamp(28px,2.2vw,36px); margin: 0 0 1rem; }
.section-sub{ color: var(--text-muted); margin: 0 0 1.5rem; }
.center{ text-align:center; }
.content{ display:grid; gap:1rem; }
.doc-section pre{ padding:1rem; border:1px solid var(--border); border-radius:12px; background:#0b1220; color:#e5e7eb; overflow:auto; }
.doc-section code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.875rem; }
.doc-section pre .btn{ color:#fff; border-color: rgba(255,255,255,.45); background: transparent; }
.doc-section pre .btn:hover{ border-color:#fff; }

/* Reveal */
.revealable{ opacity:0; transform: translateY(14px); transition: opacity .4s ease, transform .4s ease; }
.reveal-visible{ opacity:1; transform:none; }

/* Floating WhatsApp and Scroll-to-top */
.float-wa{ position: fixed; right: 18px; bottom: 18px; width:56px; height:56px; border-radius:28px; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow: 0 12px 30px rgba(0,0,0,.12); z-index: 999; text-decoration:none; }
.float-wa svg{ width:28px; height:28px; fill:#fff; display:block; }
.scroll-top{ position: fixed; right: 18px; bottom: 86px; width:44px; height:44px; border-radius:22px; display:grid; place-items:center; border:1px solid var(--border); background:#fff; color:var(--text); box-shadow: 0 6px 16px rgba(0,0,0,.08); opacity:0; pointer-events:none; transition: opacity .2s ease; z-index:998; }
.scroll-top.show{ opacity:1; pointer-events:auto; }

/* Hero image overlay variant */
.hero-image{ position:relative; background-size:cover; background-position:center; background-repeat:no-repeat; }
.hero-image::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,18,32,0.55) 0%, rgba(11,18,32,0.25) 40%, rgba(11,18,32,0.55) 100%); }
.hero-image .container{ position:relative; z-index:1; color:#fff; }
/* Generic hero */
.hero{ padding: 3.5rem 0; }
.hero--small{ padding: 2.5rem 0; background: linear-gradient(135deg, #eef2ff, #f0f9ff); }

/* Forms */
.grid--two{ grid-template-columns: 1.2fr .8fr; }
@media (max-width: 900px) { .grid--two { grid-template-columns: 1fr; } }
.form{ display:grid; gap:.75rem; }
.form__row{ display:grid; }
.form input[type="text"], .form input[type="email"], .form input[type="url"], .form select, .form textarea{
  width:100%; padding:.75rem .9rem; border-radius:12px; border:1px solid var(--border); background:#fff; color:var(--text);
}
.form__check{ display:flex; align-items:center; gap:.5rem; }

/* Tabs */
.tabs{ display:grid; gap:1rem; }
.tabs__nav{ display:flex; flex-wrap:wrap; gap:.5rem; }
.tabs__nav button{ padding:.4rem .7rem; border:1px solid var(--border); background:#fff; border-radius:999px; cursor:pointer; font-weight:600; }
.tabs__nav button.is-active{ background:var(--primary); color:#fff; border-color:var(--primary); }
.tabs__panel{ display:none; }
.tabs__panel.is-active{ display:block; }

/* FAQ */
details{ border:1px solid var(--border); border-radius:12px; padding:.75rem 1rem; background:#fff; }
details+details{ margin-top:.75rem; }
details summary{ cursor:pointer; font-weight:600; }

/* Guides */
.guide-filter{ display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.guide-filter .search{ flex:1; min-width:220px; padding:.65rem .8rem; border-radius:12px; border:1px solid var(--border); }
.chips{ display:flex; gap:.5rem; flex-wrap:wrap; }
.chip{ padding:.4rem .7rem; border:1px solid var(--border); background:#fff; border-radius:999px; cursor:pointer; font-weight:600; }
.chip.is-active{ background:var(--primary); color:#fff; border-color:var(--primary); }
.guide__meta{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }