/* ==========================================================================
   KODEIT Ascend — WordPress compatibility layer

   assets/css/styles.css is inherited from the static Ascend site byte for
   byte, so the two builds stay in step and can be diffed. This file holds the
   few rules needed only because WordPress puts stylesheets on the page that
   the static site does not have. Nothing here is a design decision.

   Loaded after styles.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Screenshot frames

   Every Ascend screenshot frame is a <figure class="appframe">. The static
   site never resets figure margins, so those frames render with the browser's
   default `figure { margin: 1em 40px }` — which is why a frame sits inset
   from its column on the live site.

   WordPress prints its block-library stylesheet inline on the front end, and
   that sets `figure { margin: 0 0 1em }`. Without this rule the hero image and
   every other screenshot frame render ~80px wider in WordPress than on the
   static site, which pushed the whole home page down by 24px and broke
   pixel parity on every page carrying a frame.

   Restoring the browser default here reproduces the static site exactly. The
   class selector outranks block-library's element selector, and no other
   <figure> on the site is affected because .appframe is the only one Ascend
   emits.
   -------------------------------------------------------------------------- */
.appframe {
	margin: 1em 40px;
}

/* Frames inside a grid, a gallery or a two-column split are positioned by
   their container on the static site too — the UA margin applies there
   identically, so nothing further is needed. */

/* --------------------------------------------------------------------------
   1b. Brand marks

   header.php and footer.php give the logo explicit width/height attributes so
   the browser can reserve its space and avoid a layout shift — the static
   site's markup has none.

   .brand img already declares `width:auto`, so the header lockup is
   unaffected. The footer rule sets only `height:52px`, so there the width
   attribute won and the mark rendered 560px wide and squashed. Restoring
   `width:auto` lets the intrinsic aspect ratio decide, exactly as on the
   static site, while keeping the reserved space.
   -------------------------------------------------------------------------- */
.ftr .fbrand img {
	width: auto;
}

/* --------------------------------------------------------------------------
   2. Admin bar

   Handled in inc/enqueue.php rather than here, because the offset depends on
   whether the bar is actually showing for the current user.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   3. Editor content on non-Ascend pages

   An ordinary WordPress page (a privacy policy, say) renders its block
   content through template-parts/page-content.php inside .entry. Ascend's
   own reset zeroes margins on p, ul, ol and headings site-wide, which would
   collapse that content into an unreadable block, so basic flow is restored
   for that container only. Ascend's own pages never use .entry.
   -------------------------------------------------------------------------- */
.entry p,
.entry ul,
.entry ol,
.entry blockquote,
.entry table,
.entry figure,
.entry pre {
	margin: 0 0 1.1em;
}

.entry h2,
.entry h3,
.entry h4 {
	margin: 1.6em 0 .5em;
}

.entry ul,
.entry ol {
	padding-left: 1.4em;
}

.entry ul {
	list-style: disc;
}

.entry ol {
	list-style: decimal;
}

.entry li {
	margin-bottom: .4em;
	color: var(--ink-2);
}

.entry a {
	color: var(--k-cyan-deep);
	text-decoration: underline;
}

.entry img {
	border-radius: var(--r-sm);
}

.entry figure {
	margin-left: 0;
	margin-right: 0;
}

/* --------------------------------------------------------------------------
   4. Footer menu

   An optional WordPress-managed menu sits below the product link columns.
   Styled from existing footer primitives only.
   -------------------------------------------------------------------------- */
.ftr-wpmenu {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.ftr-wpmenu-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}

.ftr-wpmenu-list a {
	padding: 0;
	font-size: 13px;
	color: var(--ink-3);
}

.ftr-wpmenu-list a:hover {
	color: var(--ink);
}

/* --------------------------------------------------------------------------
   5. Elementor

   Elementor injects through the_content() into .elementor-page-content.
   Ascend's global reset (zeroed paragraph margins, inherited link colour,
   unstyled buttons) would collapse widgets, so flow is restored inside
   Elementor's canvas only. Unedited Ascend routes never hit this container.
   -------------------------------------------------------------------------- */
.elementor-page-content {
	min-height: 40vh;
}

.elementor p,
.elementor ul,
.elementor ol,
.elementor blockquote,
.elementor table,
.elementor figure,
.elementor pre {
	margin: 0 0 1.1em;
}

.elementor h1,
.elementor h2,
.elementor h3,
.elementor h4,
.elementor h5,
.elementor h6 {
	margin: 0 0 0.6em;
	color: var(--ink);
}

.elementor ul,
.elementor ol {
	padding-left: 1.4em;
}

.elementor ul {
	list-style: disc;
}

.elementor ol {
	list-style: decimal;
}

.elementor a {
	color: var(--k-cyan-deep);
}

.elementor img {
	height: auto;
}

.elementor button:not(.elementor-button) {
	font: inherit;
}

/* WordPress menu fallback when app.js is not loaded (Elementor / Blog pages). */
body.ascend-elementor .nav > li > a,
body.mnp-blog-active .nav > li > a,
body.ascend-wp-content .nav > li > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 9px 13px;
	border-radius: 9px;
	font-size: 13.5px;
	font-weight: 550;
	color: var(--ink-2);
	white-space: nowrap;
}

body.ascend-elementor .nav > li > a:hover,
body.mnp-blog-active .nav > li > a:hover,
body.ascend-wp-content .nav > li > a:hover {
	background: var(--bg-soft);
	color: var(--ink);
}

body.ascend-elementor .nav .sub-menu,
body.mnp-blog-active .nav .sub-menu,
body.ascend-wp-content .nav .sub-menu {
	position: absolute;
	top: calc(100% + 9px);
	left: 0;
	min-width: 220px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-lg);
	padding: 8px;
	display: none;
	z-index: 70;
	list-style: none;
	margin: 0;
}

body.ascend-elementor .nav > li:hover > .sub-menu,
body.ascend-elementor .nav > li:focus-within > .sub-menu,
body.mnp-blog-active .nav > li:hover > .sub-menu,
body.mnp-blog-active .nav > li:focus-within > .sub-menu,
body.ascend-wp-content .nav > li:hover > .sub-menu,
body.ascend-wp-content .nav > li:focus-within > .sub-menu {
	display: block;
}

body.ascend-elementor .nav .sub-menu a,
body.mnp-blog-active .nav .sub-menu a,
body.ascend-wp-content .nav .sub-menu a {
	display: block;
	padding: 9px 11px;
	border-radius: var(--r-sm);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
}

body.ascend-elementor .nav .sub-menu a:hover,
body.mnp-blog-active .nav .sub-menu a:hover,
body.ascend-wp-content .nav .sub-menu a:hover {
	background: var(--bg-soft-2);
}

body.ascend-elementor .mobnav ul,
body.mnp-blog-active .mobnav ul,
body.ascend-wp-content .mobnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.ascend-elementor .nav > li,
body.mnp-blog-active .nav > li,
body.ascend-wp-content .nav > li {
	position: relative;
	list-style: none;
}

body.ascend-elementor .nav,
body.mnp-blog-active .nav,
body.ascend-wp-content .nav {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- Single post article ------------------------------------------------ */
.ascend-prose,
.ascend-prose .entry-content {
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--ink, #1D2126);
}

.ascend-prose .entry-content > * + * {
	margin-top: 1.05em;
}

.ascend-prose .entry-content h2,
.ascend-prose .entry-content h3,
.ascend-prose .entry-content h4 {
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin-top: 1.6em;
}

.ascend-prose .entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--r, 14px);
}

.ascend-prose .entry-content a {
	color: var(--k-cyan-deep, #00719C);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ascend-prose .entry-content ul,
.ascend-prose .entry-content ol {
	padding-left: 1.25em;
}

.ascend-prose .entry-content blockquote {
	margin: 1.4em 0;
	padding: 12px 18px;
	border-left: 3px solid var(--p-ascend, #0E9384);
	background: var(--bg-soft, #F7F8FA);
	border-radius: 0 var(--r-sm, 10px) var(--r-sm, 10px) 0;
}