/*
Theme Name: Nbyula Blog
Theme URI: https://nbyula.com
Author: Nbyula Engineering
Author URI: https://nbyula.com
Description: A lightweight, mobile-first WordPress block theme (Full Site Editing) for the official Nbyula blog. Carries the Nbyula brand — Jove purple, Gilroy + Inter typography, and a clean reading-first layout tuned for long-form pillar pages and high-volume content. Self-contained: fonts and brand assets are bundled, no external requests.
Tagline: Skillizens without Borders
Requires at least: 6.1
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nbyula-blog
Tags: blog, news, full-site-editing, block-patterns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, threaded-comments, translation-ready, sticky-post, wide-blocks, accessibility-ready
*/

/*
 * Most styling lives in theme.json (the source of truth for the Nbyula design
 * system). This file only carries presentational details that theme.json cannot
 * express today, plus a few mobile-first reading refinements. Keep it small.
 */

/* ---------- Reading refinements (mobile-first) ---------- */

/* Comfortable measure + crisp hinting for body copy on small screens. */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern", "liga", "calt";
}

/* Never let an image, embed or code block force horizontal scroll on phones. */
img,
figure,
.wp-block-image img,
.wp-block-embed iframe {
	max-width: 100%;
	height: auto;
}

/* Wrap long URLs/words in post content so they don't break the layout on mobile. */
.entry-content,
.wp-block-post-content {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* ---------- Brand accents ---------- */

/* Underline links inside running text only, with a branded offset that stays
   legible on mobile. Navigation, buttons and titles opt out via :where(). */
.wp-block-post-content a:where(:not(.wp-element-button)),
.wp-block-post-excerpt a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color 0.15s ease;
}

/* Blockquotes use the conventional left indent rule, in brand Jove. */
.wp-block-quote {
	border-left: 3px solid var(--wp--preset--color--primary);
	padding-left: clamp(1rem, 4vw, 1.5rem);
	font-style: normal;
}

/* Keyboard focus that meets the brand and stays visible on touch devices. */
:where(a, button, .wp-block-button__link, input, .wp-block-search__button):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- Cards (post listings) ---------- */

/* Subtle lift on the post cards used across the blog index and front page. */
.nbyula-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.nbyula-card:hover,
.nbyula-card:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(95, 46, 234, 0.12);
	border-color: var(--wp--preset--color--light);
}

.nbyula-card .wp-block-post-featured-image img {
	border-radius: 0;
	transition: transform 0.4s ease;
}

.nbyula-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

/* Category / topic "pill" chips. */
.nbyula-pill .wp-block-post-terms a,
.nbyula-pill a {
	display: inline-block;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: var(--wp--preset--color--light);
	color: var(--wp--preset--color--primary-deep);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.6;
}

/* ---------- Hero ---------- */

.nbyula-hero {
	color: #ffffff;
}

.nbyula-hero :where(h1, h2, p) {
	color: #ffffff;
}

/* Ensure comfortable tap targets (>=44px) for primary actions on mobile. */
.wp-block-button__link,
.wp-block-search__button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* ---------- Sticky-post badge ---------- */
.wp-block-post-template .sticky .nbyula-card {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Sticky footer ---------- */
/* Make the page a full-height flex column so the footer is pushed to the
   bottom of the viewport even when a page has very little content.
   Every template renders header > main > footer as direct children of
   .wp-site-blocks, so growing <main> does the job. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Belt-and-braces: pin the footer to the bottom regardless of the middle. */
.wp-site-blocks > footer {
	margin-top: auto;
}

/* ---------- Mobile full-screen navigation overlay ---------- */
/* The open overlay menu had its items flush against the screen edges.
   Inset the menu content so items keep a comfortable gutter and clear the
   close (X) button at the top. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	width: 100%;
	box-sizing: border-box;
	padding-inline: clamp(1.5rem, 7vw, 2.5rem);
	padding-top: clamp(1.5rem, 6vw, 2.5rem);
	padding-bottom: clamp(2rem, 8vw, 3rem);
}

/* A touch of vertical breathing room between stacked items in the overlay. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation__container {
	gap: clamp(0.5rem, 2vw, 1rem);
}