/*
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 for WordPress, 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. Fully responsive with fluid typography, adaptive columns, smooth transitions, RTL and reduced motion support.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.5
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;
}
/*--------------------------------------------------------------
# RTL Support
--------------------------------------------------------------*/
body.rtl {
	direction: rtl;
	unicode-bidi: embed;
}

/*--------------------------------------------------------------
# Transitions - Smooth resize for all elements
--------------------------------------------------------------*/

h2, 
h3,
h4, 
h5, 
h6,
p {
	padding: 0; 
	margin: 0;
	margin-bottom: var(--wp--preset--spacing--x-small, 13px); 
}

/*--------------------------------------------------------------
# Images, Videos, Audio - Responsive
--------------------------------------------------------------*/

img, 
video, 
audio,
.wp-block-image img,
.wp-block-cover__image-background,
.wp-block-cover__video-background {
    transition: width 0.3s ease, height 0.3s ease;
}

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;
}
/*--------------------------------------------------------------
# Site width
# Adwa is fluid up to a maximum width of 1280px.
--------------------------------------------------------------*/

.wp-site-blocks {
	width: 100%;
	max-width: 1500px;
	margin-inline: auto;
	padding-left: 30px;
	padding-right: 30px;
	box-sizing: border-box;
}
/*--------------------------------------------------------------
# Flexbox Column System
# 3 columns → 2 + 1, 4 columns → 2 + 2
--------------------------------------------------------------*/
.wp-block-group{
	padding-left: 0 !important;
	padding-right: 0 !important;	
}

.wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 3%;
	margin-left: auto;
	margin-right: auto;
}
.wp-block-column {
	flex: 1 1 calc(50% - 3%);
	min-width: 0;
}

.wp-block-group.is-style-default.is-layout-flow.wp-block-group-is-layout-flow {
	min-width: unset !important;
	max-width: 1500px !important;		
	width: 100% !important;
}

/* Remove horizontal padding from groups (existing) */
article.wp-block-group,
.wp-block-group[style*="padding-left:"],
.wp-block-group[style*="padding-right:"] {
	padding: 0 !important;
}

/* NEW: Remove horizontal margins from constrained containers inside articles */
article .is-layout-constrained {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

@media (min-width: 782px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*="flex-basis"] {
        flex-grow: 0;
        margin-bottom: 30px;
    }
}

/*--------------------------------------------------------------
# 1280px and below - Resize everything smoothly
--------------------------------------------------------------*/

@media (max-width: 1280px) {
    .wp-site-blocks {    
        max-width: 1280px !important;
        padding-left: clamp(20px, 4vw, 30px) !important;
        padding-right: clamp(20px, 4vw, 30px) !important;
    }
    
    .wp-block-cover,
    .has-global-padding,
    .wp-block-group {
        padding-left: 0 !important;
        padding-right: 0 !important;        
    }
    
    article.wp-block-group {
        display: flex;   
        box-sizing: border-box;
        flex-wrap: wrap;
        column-gap: 3%;
        justify-content: center !important;
    }
    
    .has-global-padding > .alignfull {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    img,
    video,
    audio,
    .wp-block-image img {
        max-width: 100%;
        height: auto;
    }
    
    .has-neutral-background-color {
        padding: 20px !important;
        box-sizing: border-box;
    }
    
    h2.has-medium-font-size {
        font-size: var(--wp--preset--font-size--small) !important;
        line-height: var(--wp--custom--line-height--medium, 1.5) !important;
        transition: font-size 0.3s ease, line-height 0.3s ease;
    }
    
    article .is-layout-flow > * {
        margin-block-start: 0px !important;
        margin-block-end: 0;
        margin-bottom: 18px;
        transition: margin-bottom 0.3s ease, margin-block-start 0.3s ease;
    }
}  /* ← THIS CLOSING BRACE IS CRITICAL */

@media (min-width: 1100px) and (max-width: 1200px) {
    .wp-block-buttons-is-layout-flex {
        display: none !important;
    }
}

/*--------------------------------------------------------------
# 1100px and below - Features Left Image Blocks
# Outer columns stay side by side (48% + 3% gap)
# Inner columns stack vertically (image → text → button)
--------------------------------------------------------------*/

@media (max-width: 1100px) {
	/* Outer columns: stay side by side */
	.wp-block-group .wp-block-columns.alignwide {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 4% !important;
	}

	/* Regular columns: 48% */
	.wp-block-group .wp-block-columns.alignwide > .wp-block-column:not(.adwa-hero-column) {
		flex: 0 0 calc(48%) !important;
		max-width: calc(48%) !important;
		width: 100% !important;
		margin-bottom: 30px !important;
	}

	/* Nested columns: stack vertically (image → text) */
	.wp-block-group .wp-block-columns.alignwide .wp-block-column .wp-block-columns {
		flex-direction: column !important;
		gap: 20px !important;
	}

	/* Nested columns: full width */
	.wp-block-group .wp-block-columns.alignwide .wp-block-column .wp-block-columns .wp-block-column {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
		padding: 0 !important;
	}

	/* Hero column: remove min-width, make 100% */
	.wp-block-column.is-vertically-aligned-center.is-layout-flow.wp-block-column-is-layout-flow {
		min-width: 90% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 30px !important;
	}

	/* Hero heading: 80% width, centered */
	.wp-block-column.is-vertically-aligned-center.is-layout-flow.wp-block-column-is-layout-flow h1 {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
	}
}

/*--------------------------------------------------------------
# 850px and below - 100% width, stack vertically
--------------------------------------------------------------*/

@media (max-width: 768px) {
	.wp-site-blocks,
	.wp-block-group,
	.wp-block-cover {
		padding-left: var(--wp--preset--spacing--x-small) !important;
		padding-right: var(--wp--preset--spacing--x-small) !important;
	}
	.wp-block-group{
		padding-left: 0 !important;
		padding-right: 0 !important;
	}


	.wp-block-columns {
		flex-direction: column !important;
		gap: 30px !important;
	}

	.wp-block-column {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Reset all column overrides */
	.wp-block-columns.has-3-columns .wp-block-column:last-child {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	.wp-block-columns.has-4-columns .wp-block-column {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

/*--------------------------------------------------------------
# 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;
	}
}
@media (max-width: 480px) {
	
	.wp-block-group .wp-block-columns.alignwide > .wp-block-column:not(.adwa-hero-column) {
		flex: 0 0 calc(100%) !important;
		max-width: 100% !important;
		width: 100% !important;
		margin-bottom: 30px !important;
	}
	
	.is-layout-flow > .aligncenter {
		margin-left: auto !important;
		margin-right: auto !important;
		padding: 30px !important;
	}
}
/*--------------------------------------------------------------
# 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;
	}
}