/*
Theme Name: APEX AI Curriculum
Theme URI: https://www.kodeit.com/apex/
Author: Scholario / KODEIT
Author URI: https://www.kodeit.com/
Description: APEX Artificial Intelligence Curriculum — the public product website for the KODEIT programme "Thinking Machines: AI for Young Minds" (KG1–Grade 12). A native WordPress conversion of the APEX static site: real permalinks, WordPress menus, settings and form-shortcode integration, with the curriculum experience — the 13-year spiral, the Grade Explorer, the digital activity gallery, the book library and the Responsible AI ladder — preserved intact. No page builder and no premium plugin required.
Version: 1.0.6
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: Proprietary — © KodeIt Publication LLC. All rights reserved.
License URI: https://www.kodeit.com/
Text Domain: apex-ai
Tags: education, curriculum, custom-menu, custom-logo, translation-ready
*/

/*
  This file exists to carry the theme header above and to be the stylesheet
  WordPress registers for the theme.

  The APEX design system itself lives in:

      assets/css/apex.css

  which is enqueued by inc/enqueue.php. It is a byte-for-byte copy of the
  static site's styles.css: lines 25-636 are the shared KODEIT product-website
  base (identical to the ICT, Pre-K and Social Science sites) and everything
  after the "APEX COMPONENTS" rule is APEX-specific. Nothing in it was re-tuned
  for WordPress.

  Do not add rules here. Add them to assets/css/apex.css so the design stays in
  one place and stays comparable with the sibling KODEIT themes.
*/

/* WordPress admin bar must not sit on top of the sticky APEX header. */
.admin-bar .hdr { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .hdr { top: 46px; }
}
@media screen and (max-width: 600px) {
  /* Below 600px WordPress un-sticks the admin bar, so the header returns to 0. */
  .admin-bar .hdr { top: 0; }
}

/* --------------------------------------------------------------------------
   WordPress-only additions.

   These exist because WordPress introduces surfaces the static site does not
   have: the admin bar (above), an ordinary editor-authored page, a footer menu
   assigned through Appearance → Menus, and pagination. They are built from the
   APEX primitives in assets/css/apex.css and add no new colour or radius.
   -------------------------------------------------------------------------- */

/* Editor-authored pages (privacy notice, terms, and so on). */
.apex-prose{max-width:74ch;font-size:15.5px;line-height:1.65;color:var(--ink-2)}
.apex-prose > * + *{margin-top:16px}
.apex-prose h2{margin-top:34px;font-size:clamp(21px,2.2vw,26px)}
.apex-prose h3{margin-top:26px}
.apex-prose h2,.apex-prose h3,.apex-prose h4{color:var(--ink)}
.apex-prose p{color:var(--ink-2)}
.apex-prose a{color:var(--k-cyan-deep);text-decoration:underline;text-underline-offset:2px}
.apex-prose ul,.apex-prose ol{padding-left:22px}
.apex-prose ul{list-style:disc}
.apex-prose ol{list-style:decimal}
.apex-prose li{margin-top:7px}
.apex-prose img{border-radius:var(--r-sm);border:1px solid var(--line)}
.apex-prose blockquote{margin:0;padding:4px 0 4px 18px;border-left:2.5px solid var(--k-cyan);
  color:var(--ink);font-size:16.5px}
.apex-prose code{font-family:var(--ff-mono);font-size:.92em;background:var(--bg-soft);
  padding:2px 5px;border-radius:5px}
.apex-prose pre{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:15px;overflow-x:auto}
.apex-prose pre code{background:none;padding:0}
.apex-prose table{width:100%;font-size:14px;border:1px solid var(--line);border-radius:var(--r-sm)}
.apex-prose th,.apex-prose td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--line)}
.apex-prose th{background:var(--bg-soft);font-weight:650;color:var(--ink)}

/* A footer column driven by Appearance → Menus, matching the hand-built ones. */
.ftr .apex-ftr-menu ul{list-style:none;margin:0;padding:0}
.ftr .apex-ftr-menu li{margin:0}

/* Pagination on archive and search results. */
.apex-pagelinks,.navigation.pagination{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:13.5px}
.navigation.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 11px;border:1px solid var(--line-2);border-radius:9px;
  color:var(--ink-2);background:var(--white);transition:.15s}
.navigation.pagination .page-numbers:hover{border-color:var(--ink-3);color:var(--ink)}
.navigation.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.navigation.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Administrator-only note under an unconfigured form. */
.apex-form-fallback .srcnote{border-top:1px solid var(--line);padding-top:11px}

/* --------------------------------------------------------------------------
   Elementor

   Elementor injects through the_content() into .elementor-page-content.
   The theme's global reset would collapse widgets, so flow is restored inside
   Elementor's canvas only. Unedited SPA 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;
}

.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, #0a7ea4);
}

.elementor img {
	height: auto;
}

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

/* WordPress menu fallback when app.js is not loaded (Elementor pages). */
body.apex-elementor .nav > li > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 9px 13px;
	border-radius: 9px;
	font-size: 13.5px;
	font-weight: 550;
	white-space: nowrap;
}

body.apex-elementor .nav .sub-menu {
	position: absolute;
	top: calc(100% + 9px);
	left: 0;
	min-width: 220px;
	background: #fff;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0,0,0,.12);
	padding: 8px;
	display: none;
	z-index: 70;
}

body.apex-elementor .nav > li:hover > .sub-menu,
body.apex-elementor .nav > li:focus-within > .sub-menu {
	display: block;
}

body.apex-elementor .nav .sub-menu a {
	display: block;
	padding: 9px 11px;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 600;
}

body.apex-elementor .mobnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}