/* ==========================================================================
   CAPS28 Docs — brand overrides
   Mirrors the CAPS28 app look (wwwroot/css/site.css + _Layout.cshtml).
   Loaded after the parent theme + KB plugin CSS so these rules win.
   Selectors are intentionally broad so the look survives a parent-theme swap.
   ========================================================================== */

:root {
	--caps28-dark: #222222;      /* navbar + footer background (site.css .bg-dark/.footer) */
	--caps28-accent: #ffce34;    /* yellow brand accent (nav active/hover, buttons) */
	--caps28-link: #09a5ef;      /* body + footer link blue (site.css a{}) */
	--caps28-muted: rgba(255,255,255,.55); /* footer link resting colour */
	--caps28-blue: #09a5ef;      /* KB sidebar active — aligned to the site link blue */
	--caps28-blue-border: #09a5ef;
	--caps28-red: #cc0000;
	--caps28-text: #212529;      /* Bootstrap body text */
	--caps28-bg: #ffffff;
	/* Bootstrap 5 default system sans-serif — identical to the marketing site. */
	--caps28-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Responsive base font: 14px mobile, 16px >=768px (site.css). */
html {
	font-size: 14px;
	/* Reserve the scrollbar gutter always, so short pages (no scrollbar) and
	   long pages (scrollbar) keep the SAME centred column position — no 8px
	   horizontal jump when navigating between modules. */
	scrollbar-gutter: stable;
}
@media (min-width: 768px) { html { font-size: 16px; scrollbar-gutter: stable; } }

body {
	color: var(--caps28-text);
	background-color: var(--caps28-bg);
}

/* Breathing room between page content and the dark footer, so the last line
   never butts against it. Applies to EVERY page's main (home has no .alignfull,
   archives/singles do — target them all). */
.wp-site-blocks > main,
main.wp-block-group {
	padding-bottom: 3.5rem;
}

/* ── One centered content column ──────────────────────────────────────────
   Every manual page & post uses ONE column of the same width, CENTERED on the
   page — so the whole thing sits in the middle instead of hugging the far left.
   The structural blocks (title, description/cards, article, post body & grid)
   are all this width and centered, giving them one shared left edge; the text
   and images inside then hug that same left edge (not re-centered) so nothing
   drifts. Result: consistent, centered, uniform-left on every page and post. */
:root { --c28-col: 880px; }

/* Structural blocks: one width, centered on the page. */
main .wp-block-query-title,
main .wp-block-term-description,
main .wp-block-post-content,
main .wp-block-query,
main > .wp-block-group {
	max-width: var(--c28-col) !important;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Inner content hugs the column's shared left edge (fills the column width). */
main .wp-block-term-description > *,
main .c28-single > *,
main .wp-block-post-content > *:not(.alignfull),
main .wp-block-post-content .is-layout-constrained > *:not(.alignfull),
main > .wp-block-group .is-layout-constrained > *:not(.alignfull),
main > .wp-block-group > *:not(.alignfull) {
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: 100% !important;
}
.c28-cat-intro { margin-left: 0 !important; }
.c28-single { max-width: 100%; margin-left: 0 !important; }

/* Neutralise WordPress "global padding" INSIDE the column (the single-post body
   and header carry it, archives don't) so every page/post shares one left edge
   and column width. The outer gutter still comes from main's own padding. */
main .wp-block-post-content.has-global-padding,
main .wp-block-post-content .has-global-padding,
main > .wp-block-group.has-global-padding,
main > .wp-block-group .has-global-padding {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Use the CAPS28 app font everywhere (override the theme's Inter). */
body,
.wp-site-blocks,
.entry-content,
h1, h2, h3, h4, h5, h6,
p, li, a, button, input, select, textarea,
.wp-block-heading {
	font-family: var(--caps28-font) !important;
}

/* Body links — blue, underline on hover (site.css). Scoped to content so the dark
   navbar/footer links keep their own colours. */
.entry-content a,
.wp-block-post-content a {
	color: var(--caps28-link);
	text-decoration: none;
}
.entry-content a:hover,
.wp-block-post-content a:hover {
	color: var(--caps28-link) !important;
	text-decoration: underline;
}

/* ---- Header / top navbar (Bootstrap markup in parts/header.html) ---------- */
.caps28-navbar.bg-dark,
header.wp-block-template-part {
	background-color: var(--caps28-dark) !important;
}
header.wp-block-template-part {
	padding: 0 !important;   /* the navbar owns its own padding */
}
.caps28-navbar .navbar-brand img { width: 160px; height: auto; }
.caps28-navbar .nav-link { color: rgba(255,255,255,.85); }
.caps28-navbar .nav-link:hover,
.caps28-navbar .nav-link.active {
	color: var(--caps28-accent) !important;
	text-decoration: none;
	outline: none;
}
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0,0,0,.05); }

.navbar-toggler:focus { box-shadow: none; }
.caps28-navbar .navbar-toggler .bi-collapse { display: none; }
.caps28-navbar .navbar-toggler:not(.collapsed) .bi-expand { display: none; }
.caps28-navbar .navbar-toggler:not(.collapsed) .bi-collapse { display: inline-block; }

/* ---- Footer (Bootstrap markup in parts/footer.html) ----------------------- */
footer.wp-block-template-part,
.wp-block-template-part.footer,
.site-footer {
	background-color: var(--caps28-dark) !important;
	color: var(--caps28-muted);
	padding: 0 !important;
	margin-top: auto;
}
footer.wp-block-template-part a,
.caps28-footer-inner a { color: var(--caps28-muted); text-decoration: none; }
footer.wp-block-template-part a:hover,
.caps28-footer-inner a:hover { color: var(--caps28-link); text-decoration: none; }
.caps28-footer-inner .text-muted { color: rgba(255,255,255,.55) !important; }

/* ---- Back-to-top (site.css) ---------------------------------------------- */
.back-to-top {
	width: 45px;
	height: 45px;
	position: fixed;
	bottom: 2em;
	right: 15px;
	text-decoration: none;
	color: #222222;
	background-color: rgba(255, 207, 30, 0.5);
	font-size: 14px;
	padding: 0.75em;
	text-align: center;
	overflow: hidden;
	outline: none !important;
	z-index: 999;
	border-radius: 50%;
	display: none;
}
.back-to-top:hover {
	color: #222222 !important;
	background-color: rgba(255, 207, 30, 1);
}

/* ---- Page heading band (site.css .pageheading) --------------------------- */
.pageheading {
	background-color: #f8f9fa;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 30px;
}
.pageheading h1 { margin-bottom: 15px; }
.pageheading p { margin-bottom: 0; line-height: 1.5 !important; }

/* ---- Home "Browse the manual" category list (core/categories block) ------- */
.wp-block-categories {
	list-style: none;
	margin: .5rem 0 0;
	padding: 0;
	font-size: 1.05rem;
}
.wp-block-categories li { margin: .3rem 0; }
.wp-block-categories > li > a { font-weight: 600; }
.wp-block-categories .children {
	list-style: none;
	margin: .25rem 0 .75rem 1.25rem;
	padding: 0;
}
.wp-block-categories a { color: var(--caps28-link); text-decoration: none; }
.wp-block-categories a:hover { text-decoration: underline; }

/* ---- Buttons: CAPS28 yellow system (site.css) ---------------------------- */
.btn { box-shadow: none !important; outline: none !important; min-width: 100px; }
.btn-yellow-outline {
	color: var(--caps28-accent) !important;
	background-color: transparent;
	border-color: var(--caps28-accent);
}
.btn-yellow-outline:hover {
	color: #333333 !important;
	background-color: var(--caps28-accent);
	border-color: var(--caps28-accent);
}
.btn-yellow-black {
	color: #333333;
	background-color: var(--caps28-accent);
	border-color: var(--caps28-accent);
}
.btn-yellow-black:hover {
	color: #ffffff;
	background-color: var(--caps28-dark);
	border-color: var(--caps28-accent);
}
@media (max-width: 767px) {
	.navbar-nav .btn { min-width: unset; }
}

/* Gutenberg buttons inside docs content → yellow brand button. */
.is-style-accent .wp-block-button__link,
.btn-accent {
	background-color: var(--caps28-accent);
	border-color: var(--caps28-accent);
	color: #333333;
}
.is-style-accent .wp-block-button__link:hover,
.btn-accent:hover {
	background-color: var(--caps28-dark);
	border-color: var(--caps28-dark);
	color: #ffffff;
}

/* ---- Post / nav card thumbnails: fixed 100px-tall cover strip ------------- */
/* Listing cards (archive query loop) and drill-down nav cards use the module
   cover banner as a compact 100px-tall thumbnail. Covers are wide-short
   (1760x400); object-fit:cover + object-position:left (img rules below) crop to
   the branded left of the banner so each card shows its icon + title. Keeps
   every card short so lists stay scannable. */
.wp-block-query .wp-block-post-featured-image,
.wp-block-post-template .wp-block-post-featured-image {
	height: 100px;
	overflow: hidden;
	border-radius: 8px;
	margin-bottom: 1rem;
}
.wp-block-query .wp-block-post-featured-image img,
.wp-block-post-template .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;   /* wide hero art: show the branded left (icon + title) */
	display: block;
}

/* ---- Hero cover: cap height on the single-view / home cover card ----------- */
/* The featured "cover" card (e.g. cover-welcome.png, 16:9) rendered ~880x495 —
   too tall. Cap its height to 200px (keeps ratio -> ~356x200), left-aligned.
   Applies to the home front page and every single post's hero (NOT the smaller
   card thumbs in listings, which are handled separately below). */
body.home .wp-block-post-featured-image,
body.single .wp-block-post-featured-image {
	aspect-ratio: auto !important;
	height: auto !important;
	overflow: visible !important;
}
body.home .wp-block-post-featured-image img,
body.single .wp-block-post-featured-image img {
	width: auto !important;
	height: auto !important;
	max-height: 200px !important;
	max-width: 100% !important;
	object-fit: contain !important;
}

/* ---- Inline screenshots: a fixed viewport box, scroll for oversized -------- */
/* App screenshots vary wildly (wide banners 2240x160, tall full-page captures
   1273x2915, portrait modals). A single width/height cap either crushed tall
   shots into an unreadable sliver or blew wide ones up. Instead each shot lives
   in a consistent VIEWPORT BOX:
     • width  — fills the content column (never upscales a small shot: a 500px
       modal stays 500px; a 1868px shot scales down to fit),
     • height — capped at min(78vh,760px); shots taller than that scroll inside
       the box at true proportions, so nothing is distorted or shrunk.
   The <span class="c28shot-view"> wrapper is injected at render time (the_content
   filter in functions.php); the figcaption stays OUTSIDE it so it never scrolls
   away. Left-aligned to match the text column. */
.wp-block-post-content figure.c28shot,
.c28-single figure.c28shot {
	width: fit-content !important;
	max-width: 680px !important;   /* compact: dense/full shots cap here (was full column) */
	margin: 1.25rem 0 !important;
}
.c28shot-view {
	display: block;
	width: fit-content;       /* box hugs the image, no empty band beside small shots */
	max-width: 100%;
	max-height: min(520px, 72vh);  /* compact vertical footprint; taller shots scroll */
	overflow: auto;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
	/* subtle inner shadow hints there is more to scroll */
	box-shadow: inset 0 -10px 12px -12px rgba(0,0,0,.35);
}
figure.c28shot .c28shot-view img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: none !important;
	border: 0 !important;
	border-radius: 0 !important;
}

/* Auto-classified by real capture size (see manual/tools notes):
     • width <= 700px  -> shown at natural size (small modals, already handled),
     • width  > 1260px -> full column (dense app screens, wide tables, full pages),
     • the middle band (~700-1260px: panels, single-setting rows, form modals like
       "Add User") is capped to 720px so it reads as a modest inset instead of a
       blown-up hero. The box hugs the image, so height/scroll behaviour is
       unchanged; only the max width is trimmed for these mid-size panels. */
figure.c28shot .c28shot-view img[src*="office-add-user"],
figure.c28shot .c28shot-view img[src*="office-tooth-numbering"],
figure.c28shot .c28shot-view img[src*="office-dashboard-refresh"],
figure.c28shot .c28shot-view img[src*="office-bill-numbering"],
figure.c28shot .c28shot-view img[src*="office-security"],
figure.c28shot .c28shot-view img[src*="office-whatsapp"],
figure.c28shot .c28shot-view img[src*="office-edit-clinic"],
figure.c28shot .c28shot-view img[src*="system-alert-subscription"],
figure.c28shot .c28shot-view img[src*="account-create-bill"],
figure.c28shot .c28shot-view img[src*="account-heads"],
figure.c28shot .c28shot-view img[src*="accounts-summary"],
figure.c28shot .c28shot-view img[src*="appointment-activity"],
figure.c28shot .c28shot-view img[src*="appointment-new"],
figure.c28shot .c28shot-view img[src*="appointments-daycalendar"],
figure.c28shot .c28shot-view img[src*="dashboard-appt-details"],
figure.c28shot .c28shot-view img[src*="labwork-status"],
figure.c28shot .c28shot-view img[src*="caps28-bridge-download"],
figure.c28shot .c28shot-view img[src*="examination-extra-oral"],
figure.c28shot .c28shot-view img[src*="examination-general-assessment"],
figure.c28shot .c28shot-view img[src*="examination-intra-oral"],
figure.c28shot .c28shot-view img[src*="patient-edit"],
figure.c28shot .c28shot-view img[src*="patient-share"],
figure.c28shot .c28shot-view img[src*="patient-medical-alerts"],
figure.c28shot .c28shot-view img[src*="patients-sort-setting"],
figure.c28shot .c28shot-view img[src*="patients-photo-gallery"],
figure.c28shot .c28shot-view img[src*="treatment-add-procedure"],
figure.c28shot .c28shot-view img[src*="treatments-list"],
figure.c28shot .c28shot-view img[src*="treatments-planner"] {
	max-width: 520px !important;
}

/* ---- Category drill-down (module -> grandchildren) ----------------------- */
/* A category with child categories (a module, or Manual root) shows its
   children as cards instead of a flat post list. The post query is emptied in
   functions.php; hide its (empty) block so only the cards show. The cards are
   injected into the term-description block. Also used on the home page via the
   [caps28_browse] shortcode. */
body.c28-cat-drilldown .wp-block-query,
body.c28-cat-drilldown .wp-block-query-no-results {
	display: none !important;
}

/* Leaf topic (childless category, one article): the article is rendered inline
   inside the term-description block, so hide the redundant one-card post list. */
body.c28-cat-singlepost .wp-block-query,
body.c28-cat-singlepost .wp-block-query-no-results {
	display: none !important;
}
.c28-single {
	margin-top: 1.5rem;
}
.c28-single > :first-child { margin-top: 0; }

.c28-drill {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1rem;
}
.c28-drill li { margin: 0; }
.c28-drill a {
	display: block;
	height: 100%;
	overflow: hidden;
	border: 1px solid #e6e8eb;
	border-radius: 8px;
	background: #fff;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.c28-drill a:hover {
	border-color: var(--caps28-accent);
	box-shadow: 0 2px 10px rgba(0,0,0,.06);
	transform: translateY(-1px);
}
.c28-drill .c28-drill-thumb {
	display: block;
	height: 100px;
	overflow: hidden;
	background: #f1f3f5;
	border-bottom: 1px solid #e6e8eb;
}
.c28-drill .c28-drill-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;   /* wide hero art: show the branded left (icon + title) */
	display: block;
}
.c28-drill .c28-drill-text {
	display: block;
	padding: .85rem 1.05rem 1rem;
}
.c28-drill .c28-drill-name {
	display: block;
	font-weight: 600;
	color: var(--caps28-link);
	font-size: 1.05em;
}
.c28-drill .c28-drill-desc {
	display: block;
	margin-top: .3rem;
	color: #495057;
	font-size: .9em;
	line-height: 1.4;
}
.c28-drill .c28-drill-count {
	display: block;
	margin-top: .45rem;
	color: #6c757d;
	font-size: .8em;
}

/* Intro line at the top of a module/topic archive (the term description). */
.c28-cat-intro {
	font-size: 1.05em;
	color: #495057;
	max-width: 46rem;
	margin: .75rem 0 0;
}