/*
Theme Name: Adwa
Author: E David Man
Author URI: https://profiles.wordpress.org/edavidman/
Description: Adwa is a lightweight Full Site Editing (FSE) block theme built for Gutenberg and the WordPress Site Editor. It features a token-based design system powered by theme.json, modern templates, block patterns, style variations, and flexible layout controls for creating blogs, portfolios, business websites, and e-commerce experiences.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: adwa
Domain Path: /languages
Tags: full-site-editing, block-patterns, block-styles, style-variations, custom-colors, custom-logo, editor-style, featured-images, wide-blocks, translation-ready, blog, portfolio, e-commerce
*/

/*-------------------------------------------------------------- 
# Base
# This stylesheet intentionally remains minimal.
# Most visual design is defined in theme.json.
--------------------------------------------------------------*/

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

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

a,
button,
input,
select,
textarea,
.wp-element-button {
	transition:
		color 0.2s ease-in-out,
		background-color 0.2s ease-in-out,
		border-color 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out,
		opacity 0.2s ease-in-out;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.12em;
}

b,
strong,
th {
	font-weight: var(--wp--custom--font-weight--medium);
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/

:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

input:focus,
textarea:focus,
select:focus,
button:focus {
	outline: none;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/

input,
select,
textarea {
	width: 100%;
	padding: clamp(10px, 1.5vw, 12px) clamp(14px, 2.5vw, 18px);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 4px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--system-font);
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--line-height--body);
}

input[type="checkbox"],
input[type="radio"],
input[type="image"] {
	width: auto;
}

/*--------------------------------------------------------------
# Block enhancements
# CSS that cannot be expressed effectively in theme.json.
--------------------------------------------------------------*/

:not(pre) > code {
	padding: 2px 6px;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	background-color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--custom--spacing--gap);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	padding: 4px;
	border: 1px solid currentColor;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	padding: var(--wp--preset--spacing--x-small);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-block-navigation__submenu-container a {
	color: inherit;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

.is-style-shadow-light {
	box-shadow: var(--wp--preset--shadow--light);
}

.is-style-shadow-solid {
	box-shadow: var(--wp--preset--shadow--solid);
}

/*--------------------------------------------------------------
# Responsive utilities
# Using theme.json custom breakpoints for consistency
--------------------------------------------------------------*/

/* Mobile: max-width 600px */
@media (max-width: 600px) {
	.is-style-columns-reverse {
		flex-direction: column-reverse;
	}
}

/* Tablet: 601px - 950px */
@media (min-width: 601px) and (max-width: 950px) {
	.is-style-columns-reverse-tablet {
		flex-direction: column-reverse;
	}
}

/*--------------------------------------------------------------
# Reduced motion
--------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}