/* =====================================================================
   DERMOSA — Shell (shared chrome)
   v1.1: Site header, footer and global bottom-nav have been removed at
   this stage (added later via plugin/update). This file keeps only the
   shared primitives used across modules and the fallback views:
   icon sizing, breadcrumb, chips, and generic page bits.
   ===================================================================== */

.drm-icon { width: 22px; height: 22px; flex: none; }

/* ---------- Breadcrumb (SEO-relevant; rendered server-side) ---------- */
.drm-breadcrumb {
  font-size: var(--drm-fs-13); color: var(--drm-text-muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--drm-sp-3);
}
.drm-breadcrumb a { color: var(--drm-text-muted); }
.drm-breadcrumb a:hover { color: var(--drm-primary); }
.drm-bc-sep { color: var(--drm-border-strong); }

/* ---------- Chips ---------- */
.drm-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--drm-fs-13); font-weight: 700; padding: 4px 10px;
  border-radius: var(--drm-r-pill);
}
.drm-chip--in { background: #eaf4ee; color: var(--drm-success); }
.drm-chip--oos { background: #f2f2f2; color: var(--drm-oos); }

/* ---------- Generic page bits (index/fallback) ---------- */
.drm-main { min-height: 60vh; padding-block: var(--drm-sp-6); }
.drm-page-title { font-size: var(--drm-fs-24); }
.drm-post-card {
  background: var(--drm-surface); border: 1px solid var(--drm-border);
  border-radius: var(--drm-r-md); padding: var(--drm-sp-5); margin-bottom: var(--drm-sp-4);
}
.drm-empty { text-align: center; padding: var(--drm-sp-10) 0; }
.drm-empty .drm-btn { margin-top: var(--drm-sp-4); }

/* =====================================================================
   Content templates (page / single / archive / search / 404)
   Page template is intentionally chrome-free; these styles only apply to
   blog-style views and never constrain Elementor canvas/full-width pages.
   ===================================================================== */

/* Default page: let the content (Elementor) control everything. No title,
   no container constraint, no gutter — a clean canvas. */
.drm-page { width: 100%; }
.drm-page__content { width: 100%; }

/* Full-width Elementor template: edge to edge. */
.drm-fullwidth { width: 100%; }

/* Canvas template: nothing but content. */
.drm-canvas__content { width: 100%; }

/* Single post (blog) */
.drm-single { padding-block: var(--drm-sp-8); max-width: 760px; }
.drm-single__head { margin-bottom: var(--drm-sp-5); }
.drm-single__title { font-size: var(--drm-fs-30); line-height: 1.3; }
.drm-single__meta { color: var(--drm-text-muted); font-size: var(--drm-fs-13); margin-top: var(--drm-sp-2); }
.drm-single__thumb { margin: 0 0 var(--drm-sp-6); border-radius: var(--drm-r-lg); overflow: hidden; }
.drm-single__thumb img { width: 100%; height: auto; display: block; }

/* Rich text (post/page content) */
.drm-rich { line-height: var(--drm-lh-body); color: var(--drm-text); }
.drm-rich h2 { font-size: var(--drm-fs-24); margin-top: var(--drm-sp-8); }
.drm-rich h3 { font-size: var(--drm-fs-20); margin-top: var(--drm-sp-6); }
.drm-rich p { margin: 0 0 var(--drm-sp-4); }
.drm-rich img { border-radius: var(--drm-r-md); height: auto; }
.drm-rich a { color: var(--drm-primary); text-decoration: underline; text-underline-offset: 3px; }
.drm-rich ul, .drm-rich ol { margin: 0 0 var(--drm-sp-4); padding-inline-start: var(--drm-sp-6); }
.drm-rich ul { list-style: disc; }
.drm-rich ol { list-style: decimal; }
.drm-rich blockquote {
  margin: var(--drm-sp-5) 0; padding: var(--drm-sp-3) var(--drm-sp-5);
  border-inline-start: 3px solid var(--drm-primary); background: var(--drm-surface-2);
  border-radius: var(--drm-r-sm); color: var(--drm-text-strong);
}

/* Archive / search */
.drm-archive { padding-block: var(--drm-sp-8); }
.drm-archive__head { margin-bottom: var(--drm-sp-6); }
.drm-archive__title { font-size: var(--drm-fs-24); }
.drm-archive__title span { color: var(--drm-primary); }
.drm-archive__desc { color: var(--drm-text-muted); margin-top: var(--drm-sp-2); }
.drm-post-card__thumb { display: block; border-radius: var(--drm-r-sm); overflow: hidden; margin-bottom: var(--drm-sp-3); }
.drm-post-card__thumb img { width: 100%; height: auto; display: block; }
.drm-post-card__title { font-size: var(--drm-fs-18); margin: 0 0 var(--drm-sp-2); }
.drm-post-card__title a { color: var(--drm-text-strong); }
.drm-post-card__title a:hover { color: var(--drm-primary); }
.drm-post-card__excerpt { color: var(--drm-text-muted); font-size: var(--drm-fs-14); }

/* 404 */
.drm-404 { padding-block: var(--drm-sp-10); }
.drm-404__code { font-size: 64px; font-weight: 900; color: var(--drm-primary); margin: 0; line-height: 1; }
.drm-404 .drm-btn { margin: var(--drm-sp-2); }
/* Mobile: shrink the whole 404 block a touch so the button labels aren't
   oversized (desktop keeps its current sizing). */
@media (max-width: 600px) {
  .drm-404 { padding-block: var(--drm-sp-8); }
  .drm-404__code { font-size: 48px; }
  .drm-404 h1, .drm-404 .drm-404__title { font-size: 17px; }
  .drm-404 p { font-size: 13px; }
  .drm-404 .drm-btn { font-size: 13px; padding: 10px 18px; margin: 5px; }
}

/* Pagination */
.pagination, .drm-site-content .navigation { margin-top: var(--drm-sp-8); display: flex; justify-content: center; }
.drm-site-content .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px; margin: 0 3px;
  border: 1px solid var(--drm-border); border-radius: var(--drm-r-sm);
  color: var(--drm-text-strong); font-weight: 600;
}
.drm-site-content .page-numbers.current { background: var(--drm-primary); color: #fff; border-color: var(--drm-primary); }
.drm-site-content a.page-numbers:hover { border-color: var(--drm-primary); color: var(--drm-primary); }