/*
Theme Name: Vantree
Author: Saumya Sharma
Author URI: https://iamsaumya.com
Description: A general-purpose theme for business, blog, portfolio, and basic WooCommerce sites. Full block-editor style parity via theme.json, selectable header and footer layouts, and ready-made starter page patterns.
Version: 1.0.3
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vantree
Tags: blog, portfolio, e-commerce, two-columns, right-sidebar, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, threaded-comments, translation-ready, block-patterns

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Vantree is based on underlying CSS and markup conventions common to
WordPress classic themes; all original code is released under the GPL v2
or later.
*/

/* This file is both the theme's required identity header and its primary
   enqueued stylesheet (see vantree_enqueue_assets() in inc/enqueue.php).
   Color/typography/spacing values mirror the presets defined in
   theme.json so the front end and block editor stay in visual parity.

   Spacing scale used throughout (matches theme.json's spacingSizes):
   8px / 16px / 24px / 40px / 64px / 96px — applied consistently to
   section padding, card padding, and grid gaps rather than one-off values. */

:root {
	--vantree-space-xs: 0.5rem; /* 8px */
	--vantree-space-sm: 1rem; /* 16px */
	--vantree-space-md: 1.5rem; /* 24px */
	--vantree-space-lg: 2.5rem; /* 40px */
	--vantree-space-xl: 4rem; /* 64px */
	--vantree-space-xxl: 6rem; /* 96px */
	--vantree-radius: 6px;
	--vantree-radius-lg: 8px;
	--vantree-shadow-card: 0 2px 8px rgba( 26, 26, 26, 0.06 ), 0 1px 3px rgba( 26, 26, 26, 0.04 );
	--vantree-shadow-header: 0 1px 3px rgba( 26, 26, 26, 0.06 );
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var( --wp--preset--color--light );
	color: var( --wp--preset--color--dark );
	font-family: var( --wp--preset--font-family--system );
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.2;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

img {
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
}

/* <pre> has no wrapping by default (white-space: pre) — a single long line
   of code silently forces its container, and with it the whole page, wider
   than the viewport instead of just showing its own scrollbar. Keeping
   white-space: pre (preserving the code's real formatting/indentation, as
   a code block should) and adding overflow-x: auto contains that widening
   to the block itself, which gets its own horizontal scrollbar instead of
   the page doing so. */
pre {
	max-width: 100%;
	overflow-x: auto;
}

code,
kbd,
tt {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* A <table> with wide/unbreakable cell content (long words, code, a wide
   number of columns) has the same "forces the page wider" failure mode as
   <pre>. display: block directly on <table> would break its internal
   row/cell alignment (rows/cells stay display: table-row/table-cell, which
   only lay out correctly under a display: table ancestor) — so instead
   .entry-content itself (every table the theme renders via the_content()
   sits inside it) becomes the scroll container. overflow-x: auto only
   engages if a child actually needs to scroll, so normal-width tables and
   every other block inside .entry-content are completely unaffected. */
.entry-content {
	max-width: 100%;
	overflow-x: auto;
}

a {
	color: var( --wp--preset--color--secondary );
	transition: color 0.15s ease;
}

a:hover,
a:focus {
	color: var( --wp--preset--color--primary );
}

/* Two-tier container system: .vantree-container is the wide page/section
   container (page chrome, wide content); .vantree-content-narrow is the
   reading-width column used only for actual article/page text, so long
   lines of body copy never run edge-to-edge at full container width. */
.vantree-container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var( --vantree-space-md );
	padding-right: var( --vantree-space-md );
}

.vantree-container-full {
	width: 100%;
	padding-left: var( --vantree-space-md );
	padding-right: var( --vantree-space-md );
}

.vantree-content-narrow {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* Skip link */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var( --wp--preset--color--dark );
	color: var( --wp--preset--color--contrast );
	padding: var( --vantree-space-sm ) var( --vantree-space-md );
	z-index: 100000;
}

.skip-link:focus {
	top: 0;
}

.screen-reader-text {
	border: 0;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* The skip link carries both .skip-link and .screen-reader-text — the
   latter's clip/width/height keep it visually hidden at all times unless
   explicitly reversed on :focus, which is what actually makes a focused
   skip link visible (its own .skip-link:focus rule only handles
   position, not the clipping that's still hiding it). Values mirror
   .skip-link's own visible-state styling so the link reads as a real,
   legible button once it's unclipped, not just an unclipped 1px box. */
.screen-reader-text:focus {
	background: var( --wp--preset--color--dark );
	color: var( --wp--preset--color--contrast );
	clip: auto !important;
	clip-path: none;
	display: block;
	height: auto;
	width: auto;
	overflow: visible;
	padding: var( --vantree-space-sm ) var( --vantree-space-md );
	outline: 2px solid var( --wp--preset--color--contrast );
	outline-offset: -4px;
}

/* Header */
.site-header {
	padding-top: var( --vantree-space-md );
	padding-bottom: var( --vantree-space-md );
	background: var( --wp--preset--color--contrast );
}

.vantree-sticky-header .site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	transition: box-shadow 0.2s ease, padding 0.2s ease;
}

.vantree-sticky-header .site-header.is-stuck {
	box-shadow: var( --vantree-shadow-header );
	padding-top: var( --vantree-space-sm );
	padding-bottom: var( --vantree-space-sm );
}

.vantree-header-top-bar {
	background: var( --wp--preset--color--dark );
	color: var( --wp--preset--color--contrast );
	font-size: var( --wp--preset--font-size--small );
	padding: var( --vantree-space-xs ) 0;
}

.vantree-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --vantree-space-md );
	flex-wrap: wrap;
}

/* A flex item won't shrink below its content's intrinsic width by default
   (flex-shrink's automatic min-width is "auto", not 0), so a nav with many
   items would otherwise force the whole row to wrap or overflow instead of
   letting the nav's own overflow-x: auto (see .main-navigation > ul) take
   over. min-width: 0 lets it actually shrink to the available space. */
.vantree-header-row .main-navigation {
	min-width: 0;
	flex: 1 1 auto;
}

.vantree-site-title {
	margin: 0;
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 700;
	line-height: 1.2;
}

.vantree-site-title a {
	color: var( --wp--preset--color--dark );
	text-decoration: none;
}

/* Only the top-level menu is a flex row; nested .sub-menu lists are
   absolutely-positioned dropdowns (see below) so a menu with child items
   doesn't print every level as flat, same-row siblings. A menu with many
   top-level items wraps onto additional lines rather than scrolling
   horizontally — overflow-x here would clip/break the dropdown submenus,
   since an absolutely-positioned child can't escape a scroll container's
   bounds (it gets clipped by it instead of dropping down over the page). */
.main-navigation > ul {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var( --vantree-space-md );
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation li {
	position: relative;
	white-space: nowrap;
}

.main-navigation a {
	display: inline-block;
	text-decoration: none;
	color: var( --wp--preset--color--dark );
	font-weight: 500;
	padding: 0.5rem 0;
}

.main-navigation a:hover,
.main-navigation a:focus {
	color: var( --wp--preset--color--secondary );
}

/* A parent item's link and its submenu-toggle button sit next to each
   other; wrapping them lets the toggle sit flush against the link
   regardless of the item's own width. */
.main-navigation .menu-item-has-children {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

/* The toggle is injected by assets/js/navigation.js — .is-open (also set
   by that same script) is the one authoritative state for whether a
   submenu is visible. :hover is layered on top as a desktop-only
   convenience so a mouse user doesn't have to click at all; it does
   nothing on touch devices, where the injected button is the only way in. */
.main-navigation .submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-left: 0.15em;
	background: none;
	border: none;
	cursor: pointer;
	color: currentColor;
	flex: 0 0 auto;
}

.main-navigation .submenu-toggle span {
	display: block;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 0.15s ease;
}

.main-navigation .submenu-toggle[aria-expanded="true"] span {
	transform: rotate( 225deg );
}

/* Submenus: hidden by default, shown once .is-open is toggled (by the
   button above) or on hover as a desktop convenience. Nested sub-menus
   (level 3+) open to the side rather than downward, since a dropdown-
   inside-a-dropdown opening further down would run off the bottom of the
   viewport. */
.main-navigation .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	flex-direction: column;
	gap: 0;
	min-width: 220px;
	background: var( --wp--preset--color--contrast );
	border-radius: var( --vantree-radius );
	box-shadow: var( --vantree-shadow-card );
	padding: var( --vantree-space-xs ) 0;
	z-index: 100;
}

.main-navigation .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

.main-navigation .sub-menu.is-open {
	display: flex;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.main-navigation > ul > li:hover > .sub-menu {
		display: flex;
	}
}

.main-navigation .sub-menu li {
	width: 100%;
}

.main-navigation .sub-menu a {
	display: block;
	padding: 0.5rem var( --vantree-space-sm );
}

.menu-toggle {
	display: none;
}

/* Below this width the off-canvas-style vertical menu takes over; the
   dropdown-positioning rules above (absolute position, side-opening
   nested submenus, hover-to-open) only make sense in a horizontal desktop
   layout, so they're all undone here in favor of a plain accordion. */
@media ( max-width: 850px ) {
	.menu-toggle {
		display: inline-block;
		background: none;
		border: 1px solid var( --wp--preset--color--dark );
		border-radius: var( --vantree-radius );
		padding: 0.4rem 0.9rem;
		cursor: pointer;
	}

	.main-navigation > ul {
		display: none;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 0;
		padding-top: var( --vantree-space-sm );
		overflow: visible;
	}

	.main-navigation.toggled > ul {
		display: flex;
	}

	.main-navigation .menu-item-has-children {
		flex-wrap: nowrap;
	}

	.main-navigation .sub-menu {
		position: static;
		box-shadow: none;
		padding-left: var( --vantree-space-sm );
		min-width: 0;
		width: 100%;
	}

	.main-navigation .sub-menu .sub-menu {
		left: 0;
	}
}

/* Header layout: centered */
.vantree-header-centered {
	flex-direction: column;
	text-align: center;
}

.vantree-header-branding-centered {
	margin-bottom: var( --vantree-space-sm );
}

.main-navigation-centered ul {
	justify-content: center;
}

/* Header layout: minimal */
.vantree-header-minimal {
	justify-content: space-between;
}

.vantree-menu-icon-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: var( --vantree-space-xs );
}

.vantree-menu-icon,
.vantree-menu-icon::before,
.vantree-menu-icon::after {
	display: block;
	width: 22px;
	height: 2px;
	background: var( --wp--preset--color--dark );
	position: relative;
}

.vantree-menu-icon::before,
.vantree-menu-icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.vantree-menu-icon::before {
	top: -7px;
}

.vantree-menu-icon::after {
	top: 7px;
}

.main-navigation-minimal {
	display: none;
	padding-top: var( --vantree-space-sm );
}

.main-navigation-minimal.toggled {
	display: block;
}

.main-navigation-minimal ul {
	flex-direction: column;
}

/* Header layout: split navigation */
.vantree-header-split-nav .main-navigation-split {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: var( --vantree-space-md );
}

.vantree-split-nav-half > ul {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var( --vantree-space-md );
	list-style: none;
	margin: 0;
	padding: 0;
}

.vantree-split-nav-half li {
	position: relative;
	white-space: nowrap;
}

.vantree-split-nav-right > ul {
	justify-content: flex-end;
}

@media ( max-width: 782px ) {
	.main-navigation-split {
		flex-direction: column;
	}

	.vantree-split-nav-half,
	.vantree-header-branding-centered {
		width: 100%;
	}

	.vantree-split-nav-half > ul {
		display: none;
		flex-direction: column;
		overflow: visible;
	}

	.main-navigation-split.toggled .vantree-split-nav-half > ul {
		display: flex;
	}
}

/* Content */

/* Two-column layout: <main> + sidebar, used on index/archive/search/single.
   .vantree-no-sidebar (set in inc/template-functions.php's body_class
   filter when no sidebar widgets are active) lets .site-main take the
   full row instead of leaving an empty gap where the sidebar would be. */
.vantree-layout {
	display: flex;
	gap: var( --vantree-space-xl );
	align-items: stretch;
	padding-top: var( --vantree-space-xl );
	padding-bottom: var( --vantree-space-xl );
}

.vantree-layout .site-main {
	flex: 1 1 0%;
	min-width: 0;
}

.vantree-layout #secondary {
	flex: 0 0 280px;
	width: 280px;
	display: flex;
	flex-direction: column;
}

.vantree-no-sidebar.vantree-layout,
body.vantree-no-sidebar .vantree-layout {
	display: block;
}

@media ( max-width: 782px ) {
	.vantree-layout {
		flex-direction: column;
		gap: 0;
		padding-top: var( --vantree-space-lg );
		padding-bottom: var( --vantree-space-lg );
	}

	.vantree-layout #secondary {
		width: 100%;
		flex-basis: auto;
	}
}

/* page.php has no sidebar and doesn't use .vantree-layout, so it needs its
   own top/bottom breathing room — .vantree-full-width marks that case
   explicitly rather than relying on a :not() descendant selector, which
   is easy to get subtly wrong. */
.site-main.vantree-full-width {
	padding-top: var( --vantree-space-xl );
	padding-bottom: var( --vantree-space-xl );
}

@media ( max-width: 782px ) {
	.site-main.vantree-full-width {
		padding-top: var( --vantree-space-lg );
		padding-bottom: var( --vantree-space-lg );
	}
}

article {
	background: var( --wp--preset--color--contrast );
	border-radius: var( --vantree-radius-lg );
	padding: var( --vantree-space-lg );
	margin-bottom: var( --vantree-space-lg );
	box-shadow: var( --vantree-shadow-card );
}

body.single article,
body.page article {
	box-shadow: none;
	padding: 0;
	background: transparent;
}

.entry-title {
	margin-top: 0;
}

/* Sidebar */
#secondary .widget {
	background: var( --wp--preset--color--contrast );
	border-radius: var( --vantree-radius-lg );
	padding: var( --vantree-space-md );
	margin-bottom: var( --vantree-space-md );
	box-shadow: var( --vantree-shadow-card );
}

#secondary .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#secondary .widget li {
	padding: 0.4rem 0;
	border-bottom: 1px solid var( --wp--preset--color--light );
}

#secondary .widget li:last-child {
	border-bottom: none;
}

.entry-meta,
.entry-footer {
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--secondary );
}

.post-thumbnail img {
	border-radius: var( --vantree-radius-lg );
}

/* Footer */
.site-footer {
	background: var( --wp--preset--color--dark );
	color: var( --wp--preset--color--contrast );
	margin-top: var( --vantree-space-xxl );
}

.site-footer a {
	color: var( --wp--preset--color--contrast );
	opacity: 0.85;
}

.site-footer a:hover {
	opacity: 1;
	color: var( --wp--preset--color--contrast );
}

.vantree-footer-widgets {
	display: grid;
	gap: var( --vantree-space-lg );
	padding-top: var( --vantree-space-xl );
	padding-bottom: var( --vantree-space-lg );
}

.vantree-footer-columns-1 {
	grid-template-columns: 1fr;
}

.vantree-footer-columns-3 {
	grid-template-columns: repeat( 3, 1fr );
}

.vantree-footer-columns-4 {
	grid-template-columns: repeat( 4, 1fr );
}

@media ( max-width: 782px ) {
	.vantree-footer-columns-3,
	.vantree-footer-columns-4 {
		grid-template-columns: 1fr;
	}
}

.widget-title {
	font-size: var( --wp--preset--font-size--medium );
	margin-top: 0;
	margin-bottom: var( --vantree-space-sm );
}

.site-info {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var( --vantree-space-xs );
	padding-top: var( --vantree-space-md );
	padding-bottom: var( --vantree-space-md );
	font-size: var( --wp--preset--font-size--small );
	border-top: 1px solid rgba( 255, 255, 255, 0.12 );
}

/* Buttons */
.wp-block-button__link,
button,
input[type="submit"] {
	border-radius: var( --vantree-radius );
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
	transform: translateY( -1px );
}

/* Pattern design primitives — used by patterns/*.php to avoid the
   "generic 3 equal boxes" look: a bordered eyebrow pill for section
   labels, and forced aspect-ratio + object-fit on images so photos/
   illustrations of different source sizes still line up consistently. */
.vantree-eyebrow {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.5;
	padding: 0.2rem 0.75rem;
	border: 1px solid currentColor;
	border-radius: 16px;
}

.vantree-aspect-4-3 {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.vantree-aspect-1-1 {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

.vantree-aspect-3-4 {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
}

/* One deliberate overlap element for the About pattern's story section:
   pulls a second, smaller image up and sideways over the first, using
   viewport-relative negative margins so the overlap scales responsively
   instead of breaking at fixed widths. */
.vantree-overlap-image {
	margin-top: -8vw;
	margin-left: 12vw;
	max-width: 55%;
	position: relative;
	box-shadow: var( --vantree-shadow-card );
	border: 4px solid var( --wp--preset--color--contrast );
}

@media ( max-width: 600px ) {
	.vantree-overlap-image {
		margin-top: -6vw;
		margin-left: 8vw;
		max-width: 60%;
	}
}

/* Legacy/classic-editor alignment and caption classes. Blocks handle their
   own alignment via alignwide/alignfull + theme.json, but the_content()
   can still emit these classic classes for images inserted via the old
   editor, [caption] shortcode content, or a plugin that predates blocks. */
.alignleft {
	float: left;
	margin: 0.4em 1.5em 1.5em 0;
}

.alignright {
	float: right;
	margin: 0.4em 0 1.5em 1.5em;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	max-width: 100%;
	margin-bottom: var( --vantree-space-sm );
}

.wp-caption img {
	display: block;
	margin: 0;
}

.wp-caption-text {
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--secondary );
	text-align: center;
	padding: var( --vantree-space-xs ) 0;
}

.gallery-caption {
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--secondary );
	display: block;
}

/* Sticky posts: a visible left accent bar distinguishes them from normal
   posts in the blog listing, per WordPress.org's guidance that sticky
   posts should read as visually distinct rather than unstyled. */
.sticky {
	border-left: 3px solid var( --wp--preset--color--accent );
	padding-left: var( --vantree-space-md );
}

/* Highlights a comment written by the post's own author, so readers can
   tell replies from the author apart from other commenters at a glance. */
.bypostauthor > .comment-body {
	border-left: 3px solid var( --wp--preset--color--secondary );
	padding-left: var( --vantree-space-sm );
}

/* Block style variations registered in inc/block-editor.php. */
.wp-block-button.is-style-pill .wp-block-button__link {
	border-radius: 9999px;
}

.wp-block-group.is-style-card {
	background: var( --wp--preset--color--contrast );
	border-radius: var( --vantree-radius-lg );
	padding: var( --vantree-space-md );
	box-shadow: var( --vantree-shadow-card );
}