/*
Theme Name: Stella AI
Theme URI: https://mariastellatech.com/en/products/wordpress-themes/stella-ai
Author: Maria Stella Tech
Author URI: https://mariastellatech.com
Description: A modern WordPress theme designed specifically for AI and SaaS startup landing pages. Features include hero sections, feature showcases, pricing tables, testimonials, and blog. All content is editable from the WordPress Customizer.
Version: 1.0.4
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Copyright: (C) 2026 Maria Stella Tech
Text Domain: stella-ai
Tags: one-column, two-columns, right-sidebar, flexible-header, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready

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

/* Reset and Base Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--primary-color: #6366f1;
	--primary-dark: #4f46e5;
	--secondary-color: #8b5cf6;
	--text-color: #1f2937;
	--text-light: #6b7280;
	--bg-light: #f9fafb;
	--bg-white: #ffffff;
	--border-color: #e5e7eb;
	--success-color: #10b981;
	--error-color: #ef4444;
	--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	--font-heading: 'Inter', sans-serif;
	--footer-bg: #dcdfe2;
	--footer-text: var(--text-color);
}

body {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--text-color);
	background-color: var(--bg-white);
}

#page {
	background-color: transparent;
}

body.custom-background #page {
	background-color: transparent;
}

a {
	color: var(--primary-color);
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--primary-dark);
}

/* Underline links in body text for accessibility (WordPress Requirement) */
.site-main p a,
.site-main li a,
.site-footer p a,
.site-footer li a,
.comment-content a {
	text-decoration: underline;
}

/* Remove underlines for navigation and buttons */
.main-navigation a,
.footer-menu a,
.btn,
.site-logo,
.skip-link,
.post-title a {
	text-decoration: none;
}

p {
	margin-bottom: 1rem;
}

.post-content a,
.comment-content a {
	text-decoration: underline;
}

/* Keep core post/featured images responsive even with width attributes. */
.site-main img,
.post-thumbnail img,
img.wp-post-image {
	max-width: 100%;
	height: auto;
}

/* Keep long pre/code/table content inside content width. */
.post-content pre {
	max-width: 100%;
	overflow-x: auto;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.post-content code,
.post-content kbd,
.post-content samp {
	overflow-wrap: anywhere;
	word-break: break-word;
	white-space: break-spaces;
}

.post-content table {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
}

.post-content table th,
.post-content table td {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 1rem;
	color: var(--text-color);
}

h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }

/* Global long-content safety for user-entered content. */
.site-main :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, a, span, td, th) {
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
}

.site-main :where(pre, code, kbd, samp) {
	max-width: 100%;
	overflow-x: auto;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.site-main pre {
	white-space: pre-wrap;
}

.site-main :where(table, .wp-block-table table) {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
}

/* Keep embeds/iframes responsive inside content. */
.site-main .wp-block-embed__wrapper,
.site-main .wp-block-embed,
.site-main .wp-block-video,
.site-main figure.wp-block-embed {
	max-width: 100%;
	overflow: hidden;
}

.site-main .wp-block-embed__wrapper iframe,
.site-main .wp-block-embed iframe,
.site-main iframe {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
}

/* Prevent long, unbroken text from forcing horizontal scroll */
.post-title,
.page-title,
.entry-title,
.nav-title,
.post-content,
.post-content p,
.post-content li,
.comment-content,
.widget-title {
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Header */
.site-header {
	background-color: inherit;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	z-index: 1000;
}

.header-image {
	width: 100%;
	line-height: 0;
	display: block;
}

.header-image img {
	width: 100%;
	height: auto;
	max-width: 100%;
	display: block;
}

.header-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 0;
	gap: 1rem;
}

.donate-button-header {
	display: inline-block;
	padding: 8px 20px;
	background-color: var(--primary-color);
	color: white;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.9rem;
	transition: all 0.3s ease;
	text-decoration: none;
	margin-left: 1rem;
}

.donate-button-header:hover {
	background-color: var(--primary-dark);
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.site-logo {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--text-color);
}

/* Navigation */
.main-navigation {
	display: flex;
	align-items: center;
}

.nav-content {
	display: flex;
	align-items: center;
}

.main-navigation ul {
	display: flex;
	list-style: none;
	gap: 2rem;
	padding: 0;
	margin: 0;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	color: var(--text-color);
	font-weight: 500;
	padding: 0.5rem 0;
	position: relative;
	transition: color 0.3s ease;
}

.main-navigation a:after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--primary-color);
	transition: width 0.3s ease;
}

.main-navigation a:hover {
	color: var(--primary-color);
}

.main-navigation a:hover:after {
	width: 100%;
}

/* Dropdowns */
.main-navigation ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	background-color: var(--bg-white);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	padding: 1rem;
	min-width: 200px;
	display: none;
	flex-direction: column;
	gap: 0.5rem;
	border-radius: 8px;
	z-index: 100;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul,
.main-navigation ul li:focus-within > ul {
	display: flex;
}

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

.main-navigation ul ul a {
	display: block;
	width: 100%;
}

.main-navigation ul ul a:after {
	display: none;
}

/* Mobile Toggle */
.mobile-menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px;
	z-index: 1001;
}

.hamburger-icon {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--text-color);
	position: relative;
	transition: background-color 0.3s ease;
}

.hamburger-icon:before,
.hamburger-icon:after {
	content: '';
	position: absolute;
	width: 24px;
	height: 2px;
	background-color: var(--text-color);
	transition: all 0.3s ease;
}

.hamburger-icon:before { top: -8px; }
.hamburger-icon:after { bottom: -8px; }

.main-navigation.active .hamburger-icon {
	background-color: transparent;
}

.main-navigation.active .hamburger-icon:before {
	transform: rotate(45deg);
	top: 0;
}

.main-navigation.active .hamburger-icon:after {
	transform: rotate(-45deg);
	bottom: 0;
}

/* Hero Section */
.hero-section {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 100px 0;
	text-align: center;
}

.hero-content h1 {
	color: white;
	font-size: 3.5rem;
	margin-bottom: 1.5rem;
}

.hero-content p {
	font-size: 1.25rem;
	margin-bottom: 2rem;
	opacity: 0.9;
}

.cta-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.btn {
	display: inline-block;
	padding: 12px 32px;
	border-radius: 6px;
	font-weight: 600;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
	font-size: 1rem;
}

.btn-primary {
	background-color: white;
	color: var(--primary-color);
}

.btn-primary:hover {
	border: 1px solid var(--primary-color);
}

.btn-secondary {
	background-color: transparent;
	color: white;
	border: 2px solid white;
}

.btn-secondary:hover {
	background-color: white;
	color: var(--primary-color);
}

/* Features Section */
.features-section {
	padding: 80px 0;
	background-color: var(--bg-light);
}

.section-title {
	text-align: center;
	margin-bottom: 3rem;
}

.section-title h2 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
}

.section-title p {
	font-size: 1.125rem;
	color: var(--text-light);
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
}

.feature-card {
	background-color: var(--bg-white);
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.feature-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
}

.feature-card h3 {
	margin-bottom: 1rem;
}

.feature-card p {
	color: var(--text-light);
}

/* Pricing Section */
.pricing-section {
	padding: 80px 0;
	background-color: var(--bg-white);
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}

.pricing-card {
	background-color: var(--bg-white);
	border: 2px solid var(--border-color);
	border-radius: 12px;
	padding: 2.5rem;
	text-align: center;
	transition: all 0.3s ease;
}

.pricing-card:hover {
	border-color: var(--primary-color);
	transform: translateY(-5px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.pricing-card.featured {
	border-color: var(--primary-color);
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
}

.pricing-card.featured h3,
.pricing-card.featured .price,
.pricing-card.featured p {
	color: white;
}

.pricing-card h3 {
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

.price {
	font-size: 3rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 0.5rem;
}

.price .amt {
	font-size: 3rem;
}

.price span:not(.amt) {
	font-size: 1rem;
	font-weight: 400;
}

.pricing-features {
	list-style: none;
	margin: 2rem 0;
	text-align: left;
}

.pricing-features li {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--border-color);
}

.pricing-features li:last-child {
	border-bottom: none;
}

.pricing-features li:before {
	content: "✓ ";
	color: var(--success-color);
	font-weight: bold;
	margin-right: 0.5rem;
}

.pricing-card.featured .pricing-features li {
	border-bottom-color: rgba(255, 255, 255, 0.2);
}

.pricing-card.featured .pricing-features li:before {
	color: white;
}

/* Testimonials Section */
.testimonials-section {
	padding: 80px 0;
	background-color: var(--bg-light);
}

.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}

.testimonial-card {
	background-color: var(--bg-white);
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.testimonial-text {
	font-style: italic;
	margin-bottom: 1.5rem;
	color: var(--text-light);
}

.testimonial-author {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.author-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 700;
}

.author-info h4 {
	margin-bottom: 0.25rem;
	font-size: 1rem;
}

.author-info p {
	font-size: 0.875rem;
	color: var(--text-light);
	margin: 0;
}

/* Blog Section */
.blog-section {
	padding: 80px 0;
	background-color: var(--bg-white);
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}

.blog-card {
	background-color: var(--bg-white);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.blog-image {
	width: 100%;
	height: 200px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 3rem;
}

.blog-content {
	padding: 1.5rem;
}

.blog-meta {
	font-size: 0.875rem;
	color: var(--text-light);
	margin-bottom: 0.5rem;
}

.blog-card h3 {
	margin-bottom: 0.75rem;
}

.blog-card h3 a {
	color: var(--text-color);
}

.blog-card h3 a:hover {
	color: var(--primary-color);
}

.blog-excerpt {
	color: var(--text-light);
	margin-bottom: 1rem;
}

.form-submit {
	width: 100%;
}

/* Footer */
.site-footer {
	background-color: var(--footer-bg);
	color: var(--footer-text);
	padding: 3rem 0 1.5rem;
	border-top: 1px solid var(--border-color);
}

.footer-content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
	margin-bottom: 2rem;
}

.footer-content:empty {
	display: none;
}

.footer-content:not(:has(.footer-widget)) {
	display: none;
}

.footer-bottom:first-child,
.footer-content:empty + .footer-bottom,
.footer-content:not(:has(.footer-widget)) + .footer-bottom {
	border-top: none;
	padding-top: 0;
}

.footer-widget h3 {
	color: var(--text-color);
	margin-bottom: 1rem;
}

.footer-widget ul {
	list-style: none;
}

.footer-widget ul li {
	margin-bottom: 0.5rem;
}

.footer-widget a {
	color: var(--text-light);
}

.footer-widget a:hover {
	color: var(--primary-color);
}

.footer-bottom {
	text-align: center;
	padding-top: 2rem;
	border-top: 1px solid var(--border-color);
	color: var(--text-light);
}

.footer-bottom-links {
	margin: 1rem 0;
}

.footer-menu {
	display: flex;
	justify-content: center;
	list-style: none;
	gap: 1.5rem;
	padding: 0;
	margin: 0;
}

.footer-menu a {
	color: var(--text-light);
	font-size: 0.9rem;
	transition: color 0.3s ease;
}

.footer-menu a:hover {
	color: var(--primary-color);
}

.theme-credits {
	margin-top: 1rem;
	font-size: 0.875rem;
}

.theme-credits a {
	color: var(--text-color);
	text-decoration: underline;
}

.theme-credits a:hover {
	color: white;
}

.love-symbol {
	display: inline-block;
	animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
}

/* Blog Post Styles */
.post-header {
	padding: 60px 0;
	background-color: var(--bg-light);
	text-align: center;
}

.post-content {
	max-width: 800px;
	margin: 3rem auto;
	padding: 0 20px;
}

.post-content::after {
	content: '';
	display: table;
	clear: both;
}

.post-meta {
	color: var(--text-light);
	margin-bottom: 1rem;
}

.post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 2rem 0;
}

/* Comments Styles */
.comments-area {
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid var(--border-color);
}

.comments-title {
	margin-bottom: 2rem;
}

.comment-list {
	list-style: none;
	margin-bottom: 2rem;
}

.comment {
	margin-bottom: 2rem;
	padding: 1.5rem;
	background-color: var(--bg-light);
	border-radius: 8px;
}

.comment-author {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.comment-author .avatar {
	border-radius: 50%;
}

.comment-meta {
	font-size: 0.875rem;
	color: var(--text-light);
}

.comment-content {
	margin-top: 1rem;
}

.comment-reply-link {
	display: inline-block;
	margin-top: 1rem;
	color: var(--primary-color);
	font-weight: 500;
}

.comment-list .children {
	list-style: none;
	margin: 1rem 0 0 1.25rem;
	padding-left: 1rem;
	border-left: 2px solid var(--border-color);
}

.comment-body {
	position: relative;
}

.comment-metadata,
.comment-meta a {
	font-size: 0.875rem;
	color: var(--text-light);
}

.comment-metadata {
	margin-top: 0.25rem;
}

.comment-metadata a:hover,
.comment-metadata a:focus {
	color: var(--primary-color);
}

.comment-awaiting-moderation {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	background: #fff7ed;
	color: #9a3412;
	font-size: 0.8125rem;
}

.comment-respond {
	margin-top: 2rem;
	padding: 1.5rem;
	background: var(--bg-light);
	border: 1px solid var(--border-color);
	border-radius: 10px;
}

.comment-reply-title {
	margin-bottom: 0.75rem;
	font-size: 1.25rem;
}

.comment-notes,
.logged-in-as {
	font-size: 0.9rem;
	color: var(--text-light);
}

.comment-form p {
	margin-bottom: 1rem;
}

.comment-form label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 600;
}

.comment-form input[type='text'],
.comment-form input[type='email'],
.comment-form input[type='url'],
.comment-form textarea {
	width: 100%;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 0.75rem 0.875rem;
	background: var(--bg-white);
	color: var(--text-color);
}

.comment-form textarea {
	min-height: 140px;
	resize: vertical;
}

.comment-form .required {
	color: #b91c1c;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.9rem;
	color: var(--text-light);
}

.comment-form-cookies-consent input[type='checkbox'] {
	margin-top: 0.2rem;
}

.comment-form .submit {
	display: inline-block;
	padding: 0.7rem 1.25rem;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--primary-color);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.comment-form .submit:hover,
.comment-form .submit:focus {
	background: var(--primary-dark);
}

.comment-navigation .nav-links,
.comments-pagination .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 1rem 0 1.5rem;
}

.comment-navigation a,
.comments-pagination a {
	font-weight: 600;
}

.no-comments {
	margin-top: 1rem;
	color: var(--text-light);
	font-style: italic;
}

/* Author Bio */
.author-bio {
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid var(--border-color);
}

.author-info {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
}

.author-info .avatar {
	border-radius: 50%;
}

.author-info h4 {
	margin-bottom: 0.5rem;
}

/* Search Form */
.search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 500px;
	margin: 0 auto;
}

.search-form .search-field {
	flex: 1;
	padding: 12px;
	border: 1px solid var(--border-color);
	border-radius: 6px;
}

.search-form .btn {
	padding: 12px 24px;
}

/* Post Navigation */
.post-navigation {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--border-color);
	display: flex;
	justify-content: space-between;
	gap: 2rem;
}

.nav-links {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.nav-previous,
.nav-next {
	flex: 1;
}

.nav-next {
	text-align: right;
}

.nav-subtitle {
	display: block;
	font-size: 0.875rem;
	color: var(--text-light);
	margin-bottom: 0.5rem;
}

.nav-title {
	font-weight: 600;
	color: var(--text-color);
}

/* Responsive Design */
@media (max-width: 768px) {
	h1 {
		font-size: 2rem;
	}

	h2 {
		font-size: 2rem;
	}

	.hero-content h1 {
		font-size: 2.5rem;
	}

	.main-navigation {
		position: relative;
	}

	.mobile-menu-toggle {
		display: block;
	}

	.nav-content {
		position: fixed;
		top: 0;
		right: -100%;
		width: 80%;
		max-width: 300px;
		height: 100vh;
		background-color: var(--bg-white);
		flex-direction: column;
		justify-content: center;
		padding: 2rem;
		box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
		transition: right 0.3s ease;
		z-index: 1000;
		visibility: hidden;
		pointer-events: none;
	}

	.main-navigation.active .nav-content {
		right: 0;
		visibility: visible;
		pointer-events: auto;
	}

	.main-navigation ul {
		flex-direction: column;
		gap: 1.5rem;
		align-items: center;
		width: 100%;
		margin-bottom: 2rem;
	}

	.main-navigation ul ul {
		position: static;
		box-shadow: none;
		background-color: var(--bg-light);
		display: none;
		width: 100%;
		text-align: center;
	}

	.main-navigation ul li:hover > ul {
		display: block;
	}

	.donate-button-header {
		margin-left: 0;
		margin-top: 0;
		width: 100%;
		text-align: center;
	}

	.footer-menu {
		flex-wrap: wrap;
		gap: 1rem;
	}

	.cta-buttons {
		flex-direction: column;
	}

	.btn {
		width: 100%;
	}

	.post-navigation {
		flex-direction: column;
	}

	.nav-next {
		text-align: left;
	}

	.author-info {
		flex-direction: column;
	}

	.search-form {
		flex-direction: column;
	}

	.comment-list .children {
		margin-left: 0.5rem;
		padding-left: 0.75rem;
	}

	.comment-respond {
		padding: 1rem;
	}

	.post-content img.alignleft,
	.post-content figure.alignleft,
	.post-content img.alignright,
	.post-content figure.alignright {
		float: none;
		display: block;
		margin: 1rem auto;
		max-width: 100%;
	}

	.post-content .wp-caption,
	.post-content .wp-caption.alignnone,
	.post-content .wp-caption.alignleft,
	.post-content .wp-caption.alignright,
	.post-content .wp-caption.aligncenter {
		float: none;
		display: block;
		width: auto !important;
		max-width: 100% !important;
		margin: 1rem auto;
	}

	.post-content .wp-caption img {
		display: block;
		width: auto !important;
		max-width: 100% !important;
		height: auto;
	}

	.post-content img.alignnone {
		display: block;
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 1rem auto;
	}

	.post-content figure {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	/* Final mobile safeguard for inline-width content from test data. */
	.post-content [style*="width"] {
		max-width: 100% !important;
	}

	.post-content figure[style*="width"] {
		width: auto !important;
	}

	.post-content img[width] {
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
	}
}

/* WordPress Core Styles */
.alignnone {
	margin-bottom: 1rem;
}

.alignleft {
	float: left;
	margin-right: 1.5rem;
	margin-bottom: 1rem;
}

.alignright {
	float: right;
	margin-left: 1.5rem;
	margin-bottom: 1rem;
}

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

.wp-caption {
	max-width: 100%;
	margin-bottom: 1rem;
	box-sizing: border-box;
}

.wp-caption img {
	max-width: 100%;
	height: auto;
}

.post-content figure.wp-caption[style] {
	width: auto !important;
	max-width: 100% !important;
}

.post-content figure.wp-caption img {
	width: auto !important;
	max-width: 100% !important;
	height: auto;
}

.wp-caption-text {
	font-size: 0.875rem;
	color: var(--text-light);
	text-align: center;
	margin-top: 0.5rem;
}

.post-content img.alignleft,
.post-content figure.alignleft {
	float: left;
	margin: 0 1.5rem 1rem 0;
	max-width: min(50%, 24rem);
	height: auto;
}

.post-content img.alignright,
.post-content figure.alignright {
	float: right;
	margin: 0 0 1rem 1.5rem;
	max-width: min(50%, 24rem);
	height: auto;
}

.post-content img.aligncenter,
.post-content figure.aligncenter {
	display: block;
	float: none;
	margin: 1rem auto;
	max-width: 100%;
}

/* Section Padding Utility */
.section-padding {
	padding: 80px 0;
}

/* Pro FAQ Section */
.faq-grid {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 800px;
	margin: 3rem auto 0;
}

.faq-card {
	background-color: var(--bg-white);
	padding: 1.5rem;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.faq-question {
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.faq-answer p {
	color: var(--text-light);
	margin: 0;
}

/* Pro Clients Section */
.clients-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 3rem;
	margin-top: 2rem;
}

.client-logo-item {
	opacity: 0.7;
	filter: grayscale(1);
	transition: all 0.3s ease;
}

.client-logo-item:hover {
	opacity: 1;
	filter: grayscale(0);
}

.client-logo-item img {
	display: block;
	height: auto;
}

/* Pricing Toggle Switch */
.pricing-toggle-wrapper {
	position: relative;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	margin-bottom: 3rem;
}

.discount-badge {
	background: #dcfce7;
	color: #166534;
	padding: 2px 8px;
	border-radius: 99px;
	font-size: 0.75rem;
	vertical-align: middle;
	pointer-events: none;
}

.switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 26px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .4s;
	border-radius: 34px;
}

.slider:before {
	position: absolute;
	content: '';
	height: 18px;
	width: 18px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: .4s;
	border-radius: 50%;
}

input:checked + .slider {
	background-color: var(--primary-color, #6366f1);
}

input:checked + .slider:before {
	transform: translateX(24px);
}

.toggle-label.active {
	font-weight: 600;
	color: var(--text-color);
}

/* Adjust grid for 5 cards */
@media (min-width: 1024px) {
	.pricing-grid {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}

/* Blog Footer */
.blog-footer {
	text-align: center;
	margin-top: 2rem;
}

/* Footer Heart Icon */
.love-symbol {
	color: #ef4444;
}

/* Client Logo Width Fix */
.client-logo-item img {
	width: auto;
}

/* Mandatory WordPress Classes */
.sticky { display: block; }
.gallery-caption { display: block; }
.bypostauthor { display: block; }

/* Screen Reader Text */
.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;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Skip Link */
.skip-link:focus {
	top: 0;
	left: 0;
	z-index: 100001;
}

/* Keyboard Navigation Focus Highlights */
a:focus,
button:focus,
.btn:focus,
input:focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

/* Links within content and comments must be underlined */
.post-content a,
.post-excerpt a,
.blog-excerpt a,
.comment-content a {
	text-decoration: underline;
}

.post-content a:hover,
.post-content a:focus,
.post-excerpt a:hover,
.post-excerpt a:focus,
.blog-excerpt a:hover,
.blog-excerpt a:focus,
.comment-content a:hover,
.comment-content a:focus {
	text-decoration: underline;
}

/* Custom Block Styles */
.post-content .wp-block-button.alignleft {
	text-align: left;
}

.post-content .wp-block-button.aligncenter {
	text-align: center;
}

.post-content .wp-block-button.alignright {
	text-align: right;
}

.site-main .wp-block-button > .wp-block-button__link,
.site-main .wp-element-button {
	display: inline-block;
	padding: 12px 32px;
	border: 2px solid var(--primary-dark);
	border-radius: 999px;
	background-color: var(--primary-color);
	color: #fff !important;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	transition: all 0.3s ease;
}

.site-main .wp-block-button > .wp-block-button__link:hover,
.site-main .wp-block-button > .wp-block-button__link:focus,
.site-main .wp-element-button:hover,
.site-main .wp-element-button:focus {
	background-color: var(--primary-dark);
	border-color: var(--primary-dark);
	color: #fff !important;
	text-decoration: none !important;
}

.site-main .wp-block-button.is-style-outline > .wp-block-button__link,
.site-main .wp-block-button .wp-block-button__link.is-style-outline {
	background-color: transparent !important;
	border: 2px solid var(--primary-color) !important;
	color: var(--primary-color) !important;
}

.site-main .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.site-main .wp-block-button.is-style-outline > .wp-block-button__link:focus,
.site-main .wp-block-button .wp-block-button__link.is-style-outline:hover,
.site-main .wp-block-button .wp-block-button__link.is-style-outline:focus {
	background-color: var(--primary-color) !important;
	color: #fff !important;
}

.site-main .wp-block-button.is-style-squared > .wp-block-button__link,
.site-main .wp-block-button .wp-block-button__link.is-style-squared {
	border-radius: 0 !important;
}

.wp-block-button.is-style-stella-ai-outline .wp-block-button__link {
	background-color: transparent !important;
	border: 2px solid var(--primary-color) !important;
	color: var(--primary-color) !important;
	text-decoration: none !important;
}

.wp-block-button.is-style-stella-ai-outline .wp-block-button__link:hover {
	background-color: var(--primary-color) !important;
	color: #fff !important;
}

.wp-block-image.is-style-stella-ai-soft-shadow img {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	border-radius: 12px;
}