/*
Theme Name: VELYON
Theme URI: https://velyoninstitute.org
Author: VELYON AI Institute
Author URI: https://velyoninstitute.org
Description: Custom performance-first WordPress theme for VELYON AI Institute. Dark/light aware, mobile app-shell navigation, Gutenberg block driven homepage.
Version: 2.8.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: velyon
*/

/* -------------------------------------------------------------
   Reset & base
------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	/* v1.7.0: stop mobile browsers from auto-inflating text after rotation. */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* v1.7.0 — horizontal-overflow safety net, part 1 of 2 (see body below).
	   BOTH html AND body must clip: tested in Chromium, clipping only one of
	   them does not stop the page from widening. */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--velyon-bg);
	color: var(--velyon-text);
	font-family: var(--velyon-font-body);
	font-size: 15.5px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	transition: background .25s ease, color .25s ease;
	/* v1.7.0 — horizontal-overflow safety net, part 2 of 2. If any element
	   (a long unbreakable string, a wide table/code block/embed, a plugin
	   widget) ever becomes wider than the screen, a phone widens its layout
	   viewport to fit it, which makes the page open "zoomed in" and pushes
	   the fixed bottom tab bar half off-screen. `clip` (unlike `hidden`)
	   does NOT create a scroll container, so the sticky header keeps working. */
	overflow-x: clip;
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6,
button, .btn, nav a {
	font-family: var(--velyon-font-heading);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	font-weight: 700;
	line-height: 1.25;
	color: var(--velyon-text);
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; height: auto; display: block; }
iframe, video, embed, object { max-width: 100%; }

/* v1.7.0: wide code blocks and tables scroll sideways inside themselves
   instead of widening the whole page. */
pre { max-width: 100%; overflow-x: auto; }
.wp-block-table { max-width: 100%; overflow-x: auto; }

button { font: inherit; cursor: pointer; }

/* -------------------------------------------------------------
   Layout helpers
------------------------------------------------------------- */
.velyon-container {
	max-width: var(--velyon-maxw);
	margin: 0 auto;
	padding: 0 24px;
}

/* NOTE (v1.7.0): vertical padding ONLY. A `padding: 38px 0` shorthand here
   silently overrode .velyon-container's left/right padding whenever the two
   classes sat on the same element (index.php <main>, single.php <article>),
   pushing text against the screen edges. Never use a padding shorthand with
   `0` sides on an element that also carries .velyon-container. */
.velyon-section {
	padding-top: 38px;
	padding-bottom: 38px;
}

/* -------------------------------------------------------------
   Screen-reader only (accessibility utility, used across theme)
------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* -------------------------------------------------------------
   Mobile app-shell breakpoint helpers
   (M2/M3 will build the actual header/drawer/bottom-nav components;
   this just establishes the shared breakpoint convention.)
------------------------------------------------------------- */
@media (max-width: 782px) {
	.velyon-container { padding: 0 16px; }
	.velyon-section { padding-top: 24px; padding-bottom: 24px; }
}