/*
Theme Name: ClaudeQuadro
Theme URI: https://napieracademy.eu
Author: Claudio & Claude
Author URI: https://napieracademy.eu
Description: Tema minimale per articoli. Header, contenuto, footer. Nient'altro.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: claudequadro
*/

/* ========================================
   HOMEPAGE GRID - Design Stunning
   ======================================== */

/* Grid container */
.home-grid .wp-block-post-template {
	gap: 0 !important;
}

/* Single grid item */
.home-grid .wp-block-post {
	padding: 2rem;
	min-height: 200px;
	position: relative;
	display: flex;
	align-items: flex-start;
}

/* Border right on first two columns */
.home-grid .wp-block-post:nth-child(3n+1),
.home-grid .wp-block-post:nth-child(3n+2) {
	border-right: 1px solid #e5e5e5;
}

/* Orange dot before title */
.home-grid .wp-block-post-title::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	background: #f97316;
	border-radius: 50%;
	margin-right: 1rem;
	flex-shrink: 0;
	margin-top: 0.5rem;
	transition: background-color 0.2s ease;
}

/* Title styling */
.home-grid .wp-block-post-title {
	display: flex;
	align-items: flex-start;
	font-size: 1.875rem !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
	color: #1f2937;
	transition: color 0.2s ease;
}

.home-grid .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

/* Hover effects */
.home-grid .wp-block-post:hover .wp-block-post-title {
	color: #f97316;
}

.home-grid .wp-block-post:hover .wp-block-post-title::before {
	background: #1f2937;
}

/* ========================================
   HEADER
   ======================================== */

.site-header {
	border-bottom: 1px solid #e5e5e5;
}

.site-header .wp-block-site-title {
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: -0.01em;
}

.site-header .wp-block-site-title a {
	text-decoration: none;
	color: #111;
}

/* Navigation */
.site-header .wp-block-navigation {
	font-size: 0.875rem;
}

.site-header .wp-block-navigation a {
	color: #6b7280;
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-header .wp-block-navigation a:hover {
	color: #111;
}

/* ========================================
   TABLES - minimal & elegant
   ======================================== */

.wp-block-table table,
table {
	width: 100%;
	border-collapse: collapse;
	border: none;
	margin: 2.5rem 0;
	font-size: 0.9rem;
}

.wp-block-table {
	margin: 2.5rem 0;
}

.wp-block-table table th,
.wp-block-table table td,
table th,
table td {
	padding: 0.75rem 1rem;
	text-align: left;
	border: none;
	border-bottom: 1px solid #e5e5e5;
}

.wp-block-table table th,
table th {
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #666;
	border-bottom: 2px solid #222;
}

.wp-block-table table tr:last-child td,
table tr:last-child td {
	border-bottom: none;
}

.wp-block-table table tbody tr:hover,
table tbody tr:hover {
	background: #fafafa;
}

/* Striped variant */
.wp-block-table.is-style-stripes table tbody tr:nth-child(odd) {
	background: #fafafa;
}

.wp-block-table.is-style-stripes table tbody tr:hover {
	background: #f0f0f0;
}

.wp-block-table.is-style-stripes table td {
	border-bottom: none;
}

/* ========================================
   SINGLE ARTICLE PAGE
   ======================================== */

.single-article {
	padding-top: 0;
}

/* Metadata row */
.article-meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 4rem;
	font-size: 0.875rem;
	color: #6b7280;
}

.article-meta p {
	margin: 0;
}

.article-meta .wp-block-post-date {
	color: #6b7280;
}

.article-meta .wp-block-post-author {
	color: #6b7280;
}

/* Title with orange dot */
.article-title-wrap {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	margin-bottom: 4rem;
}

.article-title-wrap .orange-dot {
	width: 24px;
	height: 24px;
	min-width: 24px;
	background: #f97316;
	border-radius: 50%;
	margin-top: 1rem;
}

.article-title-wrap .wp-block-post-title {
	font-size: 3.75rem;
	line-height: 1.1;
	font-weight: 400;
	color: #111827;
	margin: 0;
}

/* Intro paragraph */
.article-intro {
	font-size: 1.25rem;
	line-height: 1.7;
	color: #374151;
	margin-bottom: 3rem;
	font-style: normal;
}

/* Article body */
.article-body {
	font-size: 1.125rem;
	line-height: 1.8;
	color: #374151;
}

.article-body p {
	margin-bottom: 2rem;
}

.article-body h2 {
	font-size: 1.875rem;
	font-weight: 400;
	color: #111827;
	margin-top: 4rem;
	margin-bottom: 2rem;
}

.article-body h3 {
	font-size: 1.5rem;
	font-weight: 500;
	color: #111827;
	margin-top: 3rem;
	margin-bottom: 1.5rem;
}

.article-body ul,
.article-body ol {
	margin-bottom: 2rem;
	padding-left: 1.5rem;
}

.article-body li {
	margin-bottom: 0.5rem;
}

.article-body blockquote {
	border-left: 3px solid #f97316;
	padding-left: 1.5rem;
	margin: 2rem 0;
	font-style: italic;
	color: #4b5563;
}

/* Responsive single */
@media (max-width: 782px) {
	.article-title-wrap .wp-block-post-title {
		font-size: 2.5rem;
	}

	.article-title-wrap .orange-dot {
		width: 18px;
		height: 18px;
		min-width: 18px;
		margin-top: 0.75rem;
	}

	.article-title-wrap {
		gap: 1rem;
	}

	.article-meta {
		flex-wrap: wrap;
		gap: 0.5rem;
	}
}

/* ========================================
   NEWSLETTER FORM
   ======================================== */

.newsletter-section {
	text-align: center;
	padding: 4rem 2rem;
	margin-top: 4rem;
	border-top: 1px solid #e5e5e5;
}

.newsletter-title {
	font-size: 1.75rem;
	font-weight: 500;
	margin-bottom: 2rem;
	color: #1f2937;
}

.newsletter-form {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
	max-width: 600px;
	margin: 0 auto;
}

.newsletter-form input[type="email"] {
	flex: 1;
	padding: 1rem 1.5rem;
	font-size: 1rem;
	font-family: inherit;
	border: 1px solid #e5e5e5;
	border-radius: 8px 0 0 8px;
	outline: none;
	transition: border-color 0.2s ease;
}

.newsletter-form input[type="email"]:focus {
	border-color: #f97316;
}

.newsletter-form input[type="email"]::placeholder {
	color: #9ca3af;
}

.newsletter-form button {
	padding: 1rem 2rem;
	font-size: 1rem;
	font-family: inherit;
	font-weight: 500;
	color: #fff;
	background: #f97316;
	border: none;
	border-radius: 0 8px 8px 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.newsletter-form button:hover {
	background: #ea580c;
}

.newsletter-success {
	font-size: 1.1rem;
	color: #16a34a;
}

/* ========================================
   RESPONSIVE
   ======================================== */

/* ========================================
   CONTACT PAGE
   ======================================== */

.contact-page {
	position: relative;
	overflow: hidden;
}

/* Decorative circles */
.contact-decorative {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.deco-circle {
	position: absolute;
	border-radius: 50%;
	filter: blur(40px);
	animation: pulse 4s ease-in-out infinite;
}

.deco-1 {
	top: 5rem;
	left: 2.5rem;
	width: 8rem;
	height: 8rem;
	background: #f3f4f6;
	opacity: 0.6;
}

.deco-2 {
	top: 10rem;
	right: 5rem;
	width: 6rem;
	height: 6rem;
	background: #e5e7eb;
	opacity: 0.4;
	animation-delay: 1s;
}

.deco-3 {
	bottom: 10rem;
	left: 25%;
	width: 10rem;
	height: 10rem;
	background: #f3f4f6;
	opacity: 0.5;
	animation-delay: 2s;
}

.deco-4 {
	top: 50%;
	right: 33%;
	width: 7rem;
	height: 7rem;
	background: #ffedd5;
	opacity: 0.3;
	animation-delay: 0.5s;
}

@keyframes pulse {
	0%, 100% { opacity: 0.3; transform: scale(1); }
	50% { opacity: 0.6; transform: scale(1.05); }
}

/* Hero section */
.contact-hero {
	position: relative;
	z-index: 1;
}

.contact-title-wrap {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.contact-dot {
	width: 24px;
	height: 24px;
	min-width: 24px;
	background: #f97316;
	border-radius: 50%;
	margin-top: 1rem;
	
}

.contact-title {
	font-size: 4.5rem;
	line-height: 1.1;
	font-weight: 400;
	color: #111827;
	margin: 0;
}

.contact-subtitle {
	font-size: 1.25rem;
	color: #4b5563;
	margin-left: 3rem;
	max-width: 48rem;
	line-height: 1.7;
}

/* Contact grid */
.contact-grid {
	position: relative;
	z-index: 1;
	margin-bottom: 4rem;
	gap: 4rem !important;
}

.contact-info {
	padding-right: 2rem;
	border-right: 1px solid #e5e7eb;
}

.contact-info p {
	font-size: 1.125rem;
	color: #374151;
	line-height: 1.7;
	margin-bottom: 1.5rem;
}

.contact-info a {
	color: #111827;
	text-decoration: none;
	transition: color 0.2s ease;
}

.contact-info a:hover {
	color: #f97316;
}

/* Social links */
.contact-social {
	padding-top: 2rem;
}

.social-label {
	font-size: 0.75rem;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 1.5rem;
}

.social-links {
	gap: 1.5rem !important;
}

.social-links a {
	color: #4b5563;
	text-decoration: none;
	font-size: 0.875rem;
	position: relative;
	transition: color 0.2s ease;
}

.social-links a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: #f97316;
	transition: width 0.3s ease;
}

.social-links a:hover {
	color: #f97316;
}

.social-links a:hover::after {
	width: 100%;
}

/* Contact form */
.contact-form-col {
	padding-left: 2rem;
}

.contact-form-col h2 {
	font-size: 1.875rem;
	font-weight: 400;
	color: #111827;
	margin-bottom: 1rem;
}

.contact-form-col > p {
	color: #4b5563;
	margin-bottom: 2rem;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.form-group {
	display: flex;
	flex-direction: column;
}

.form-group label {
	font-size: 0.875rem;
	color: #374151;
	margin-bottom: 0.5rem;
	transition: color 0.2s ease;
}

.form-group:focus-within label {
	color: #111827;
}

.form-group input,
.form-group textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	background: #f9fafb;
	border: none;
	font-size: 1rem;
	font-family: inherit;
	color: #111827;
	transition: background-color 0.2s ease;
	outline: none;
}

.form-group input:focus,
.form-group textarea:focus {
	background: #fff;
	box-shadow: inset 0 0 0 1px #e5e7eb;
}

.form-group textarea {
	resize: none;
}

.contact-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 1rem;
	background: #f97316;
	color: #fff;
	border: none;
	font-size: 1rem;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.contact-submit:hover {
	background: #111;
}

.contact-submit svg {
	width: 20px;
	height: 20px;
	transition: transform 0.2s ease;
}

.contact-submit:hover svg {
	transform: translateX(4px);
}

/* Contact form messages */
.contact-success,
.contact-error {
	padding: 1.5rem;
	border-radius: 0.5rem;
	margin-bottom: 2rem;
}

.contact-success {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
}

.contact-success p {
	color: #15803d;
	font-size: 1rem;
	margin: 0;
}

.contact-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
}

.contact-error p {
	color: #dc2626;
	font-size: 1rem;
	margin: 0;
}

/* FAQ Section */
.faq-section {
	border-top: 1px solid #e5e7eb;
	padding-top: 4rem;
	position: relative;
	z-index: 1;
}

.faq-header {
	margin-bottom: 3rem;
	gap: 1rem !important;
}

.faq-dot {
	width: 16px;
	height: 16px;
	background: #f97316;
	border-radius: 50%;
}

.faq-title {
	font-size: 2.5rem;
	font-weight: 400;
	color: #111827;
	margin: 0;
}

.faq-accordion {
	max-width: 48rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.faq-item {
	background: #f9fafb;
	transition: background-color 0.3s ease;
}

.faq-item:hover {
	background: #f3f4f6;
}

.faq-question {
	width: 100%;
	padding: 1.25rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
}

.faq-question span {
	font-size: 1.125rem;
	color: #111827;
	flex: 1;
}

.faq-question svg {
	width: 20px;
	height: 20px;
	color: #6b7280;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.faq-item.open .faq-question svg {
	transform: rotate(180deg);
}

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.faq-item.open .faq-answer {
	max-height: 24rem;
}

.faq-answer p {
	padding: 0 1.5rem 1.25rem;
	color: #4b5563;
	line-height: 1.7;
	margin: 0;
}

/* Responsive contact */
@media (max-width: 782px) {
	.contact-title {
		font-size: 2.5rem;
	}

	.contact-subtitle {
		margin-left: 0;
		font-size: 1.1rem;
	}

	.contact-grid {
		flex-direction: column;
	}

	.contact-info {
		padding-right: 0;
		border-right: none;
		border-bottom: 1px solid #e5e7eb;
		padding-bottom: 2rem;
	}

	.contact-form-col {
		padding-left: 0;
		padding-top: 2rem;
	}

	.faq-title {
		font-size: 1.75rem;
	}
}

/* ========================================
   CHAT AI FLOATING BUTTON
   ======================================== */

.chat-toggle {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: 64px;
	height: 64px;
	background: #f97316;
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	transition: background-color 0.2s ease;
	z-index: 9999;
}

.chat-toggle:hover {
	background: #111;
}

.chat-toggle svg {
	width: 32px;
	height: 32px;
}

/* Chat Window */
.chat-window {
	position: fixed;
	bottom: 7rem;
	right: 2rem;
	width: 384px;
	height: 500px;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 0.5rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.chat-window.open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Chat Header */
.chat-header {
	padding: 1rem 1.5rem;
	border-bottom: 1px solid #e5e7eb;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.chat-header-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.chat-dot {
	width: 12px;
	height: 12px;
	background: #f97316;
	border-radius: 50%;
}

.chat-header h3 {
	font-size: 1.125rem;
	font-weight: 500;
	color: #111827;
	margin: 0;
}

.chat-close {
	background: none;
	border: none;
	cursor: pointer;
	color: #6b7280;
	padding: 0;
	transition: color 0.2s ease;
}

.chat-close:hover {
	color: #111827;
}

.chat-close svg {
	width: 20px;
	height: 20px;
}

/* Chat Messages */
.chat-messages {
	flex: 1;
	padding: 1rem 1.5rem;
	overflow-y: auto;
}

.chat-message {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.chat-message-dot {
	width: 8px;
	height: 8px;
	min-width: 8px;
	background: #f97316;
	border-radius: 50%;
	margin-top: 0.35rem;
}

.chat-message p {
	font-size: 0.875rem;
	color: #374151;
	margin: 0;
	line-height: 1.5;
}

/* Chat Input */
.chat-input-area {
	padding: 1rem 1.5rem;
	border-top: 1px solid #e5e7eb;
	display: flex;
	gap: 0.5rem;
}

.chat-input-area input {
	flex: 1;
	padding: 0.5rem 1rem;
	border: 1px solid #d1d5db;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-family: inherit;
	outline: none;
	transition: border-color 0.2s ease;
}

.chat-input-area input:focus {
	border-color: #111827;
}

.chat-send {
	padding: 0.5rem 1rem;
	background: #f97316;
	color: #fff;
	border: none;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.chat-send:hover {
	background: #111;
}

.chat-send svg {
	width: 20px;
	height: 20px;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 782px) {
	.chat-window {
		width: calc(100% - 2rem);
		right: 1rem;
		bottom: 6rem;
		height: 60vh;
	}

	.chat-toggle {
		right: 1rem;
		bottom: 1rem;
		width: 56px;
		height: 56px;
	}

	.chat-toggle svg {
		width: 28px;
		height: 28px;
	}
}

@media (max-width: 782px) {
	.home-grid .wp-block-post {
		border-right: none !important;
		border-bottom: 1px solid #e5e5e5;
	}

	.home-grid .wp-block-post:last-child {
		border-bottom: none;
	}

	.home-grid .wp-block-post-title {
		font-size: 1.5rem !important;
	}

	.newsletter-form {
		flex-direction: column;
		gap: 1rem;
	}

	.newsletter-form input[type="email"] {
		width: 100%;
		border-radius: 8px;
	}

	.newsletter-form button {
		width: 100%;
		border-radius: 8px;
	}
}

/* Contact page - Static dot */
.contact-dot-static {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #F97316;
    border-radius: 50%;
    margin-right: 1rem;
    flex-shrink: 0;
    margin-top: 0.5rem;
}

/* ========================================
   ARTICLE TITLE - Support for static pages
   ======================================== */

.article-title-wrap h1,
.article-title-wrap .wp-block-heading {
	font-size: 3.75rem;
	line-height: 1.1;
	font-weight: 400;
	color: #111827;
	margin: 0;
}

@media (max-width: 782px) {
	.article-title-wrap h1,
	.article-title-wrap .wp-block-heading {
		font-size: 2.5rem;
	}
}

/* ========================================
   FIX - Force orange dot and title styles
   ======================================== */

.article-title-wrap .wp-block-group.orange-dot,
.article-title-wrap .orange-dot.wp-block-group,
.article-title-wrap > .orange-dot {
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	max-width: 24px !important;
	background: #f97316 !important;
	border-radius: 50% !important;
	margin-top: 1rem !important;
	padding: 0 !important;
}

.single-article .article-title-wrap h1.wp-block-heading,
.single-article h1.wp-block-heading {
	font-size: 3.75rem !important;
	line-height: 1.1 !important;
	font-weight: 400 !important;
	color: #111827 !important;
	margin: 0 !important;
}

@media (max-width: 782px) {
	.single-article .article-title-wrap h1.wp-block-heading,
	.single-article h1.wp-block-heading {
		font-size: 2.5rem !important;
	}
}

/* ========================================
   MOBILE RESPONSIVE - Design System
   Breakpoint: < 1024px
   ======================================== */

@media (max-width: 1023px) {
	
	/* Typography - Mobile */
	h1, .wp-block-heading:where(h1),
	.article-title-wrap h1,
	.article-title-wrap .wp-block-heading,
	.article-title-wrap .wp-block-post-title {
		font-size: 3rem !important; /* 48px */
		line-height: 1.15 !important;
	}
	
	h2, .wp-block-heading:where(h2) {
		font-size: 1.75rem !important; /* 28px */
	}
	
	/* Spacing - Mobile reduced */
	.single-article,
	main.wp-block-group {
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
	}
	
	.article-meta {
		margin-bottom: 2rem !important;
	}
	
	.article-title-wrap {
		margin-bottom: 2rem !important;
		gap: 1rem !important;
	}
	
	.article-intro {
		margin-bottom: 2rem !important;
		font-size: 1.125rem !important;
	}
	
	/* Orange dot - smaller on mobile */
	.article-title-wrap .orange-dot,
	.article-title-wrap .wp-block-group.orange-dot {
		width: 18px !important;
		height: 18px !important;
		min-width: 18px !important;
		max-width: 18px !important;
		margin-top: 0.6rem !important;
	}
	
	/* Homepage grid - 1 column */
	.home-grid .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
	
	.home-grid .wp-block-post {
		border-right: none !important;
		border-bottom: 1px solid #e5e5e5;
		padding: 1.5rem !important;
	}
	
	.home-grid .wp-block-post:last-child {
		border-bottom: none;
	}
	
	.home-grid .wp-block-post-title {
		font-size: 1.5rem !important;
	}
	
	.home-grid .wp-block-post-title::before {
		width: 12px;
		height: 12px;
		margin-top: 0.4rem;
	}
	
	/* Container padding */
	.wp-block-group,
	.wp-block-post-content {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	
	/* Header mobile */
	.site-header {
		padding: 1rem 0 !important;
		margin-bottom: 2rem !important;
	}
	
	.site-header .wp-block-site-title {
		font-size: 1.25rem !important;
	}
	
	.site-header .wp-block-navigation {
		font-size: 0.8rem !important;
		gap: 1rem !important;
	}
	
	/* Contact page - stack */
	.contact-grid {
		flex-direction: column !important;
	}
	
	.contact-info {
		border-right: none !important;
		border-bottom: 1px solid #e5e7eb;
		padding-right: 0 !important;
		padding-bottom: 2rem !important;
	}
	
	.contact-form-col {
		padding-left: 0 !important;
		padding-top: 2rem !important;
	}
}

/* ========================================
   MOBILE FIXES - From Design System GitHub
   ======================================== */

@media (max-width: 1023px) {
	
	/* HIDE orange dot on mobile */
	.article-title-wrap .orange-dot,
	.article-title-wrap .wp-block-group.orange-dot,
	.home-grid .wp-block-post-title::before {
		display: none !important;
	}
	
	/* Title without dot - full width */
	.article-title-wrap {
		gap: 0 !important;
	}
	
	/* Article title - 36px mobile */
	h1, .wp-block-heading:where(h1),
	.article-title-wrap h1,
	.article-title-wrap .wp-block-heading,
	.article-title-wrap .wp-block-post-title {
		font-size: 2.25rem !important; /* 36px = text-4xl */
	}
	
	/* Author/meta - stack vertically, show below article on mobile */
	.article-meta {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0.5rem !important;
		font-size: 0.875rem !important;
	}
	
	/* Hide separator dots in meta on mobile */
	.article-meta > p:contains('•'),
	.article-meta > .wp-block-group:has(p:contains('•')) {
		display: none !important;
	}
	
	/* Padding - 16px mobile */
	.site-header,
	main.wp-block-group,
	.single-article {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	
	/* Spacing - py-12 = 3rem mobile */
	main.wp-block-group,
	.single-article {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}
	
	/* Navigation - smaller on mobile, consider hamburger */
	.site-header .wp-block-navigation {
		gap: 0.75rem !important;
		font-size: 0.75rem !important;
	}
	
	/* Homepage grid title without dot */
	.home-grid .wp-block-post-title {
		display: block !important;
	}
}

/* Desktop - py-20 = 5rem, px-6 = 1.5rem */
@media (min-width: 1024px) {
	main.wp-block-group,
	.single-article {
		padding-top: 5rem;
		padding-bottom: 5rem;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	
	/* Orange dot visible on desktop */
	.article-title-wrap .orange-dot,
	.article-title-wrap .wp-block-group.orange-dot {
		display: block !important;
	}
}

/* ========================================
   AUTHOR POSITION - Mobile/Desktop
   ======================================== */

/* Desktop: show top meta, hide bottom author */
.article-meta-desktop {
	display: flex !important;
}

.article-author-mobile {
	display: none !important;
}

/* Mobile: hide top meta, show bottom author */
@media (max-width: 1023px) {
	.article-meta-desktop {
		display: none !important;
	}
	
	.article-author-mobile {
		display: block !important;
	}
	
	.article-author-mobile .wp-block-post-author {
		font-size: 1rem;
	}
	
	.article-author-mobile .wp-block-post-date {
		font-size: 1rem;
	}
}

/* ========================================
   MOBILE - Reset all indents, align left
   ======================================== */

@media (max-width: 1023px) {
	
	/* Reset all padding/margins to align left */
	.single-article,
	.single-article .wp-block-group,
	.single-article .wp-block-post-content,
	.single-article .article-body,
	.single-article .article-intro,
	.single-article .article-title-wrap,
	.single-article .article-author-mobile,
	.single-article p,
	.single-article h1,
	.single-article h2,
	.single-article h3,
	main.wp-block-group,
	main.wp-block-group > .wp-block-group {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	/* Container padding only on main */
	main.wp-block-group,
	.single-article {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	
	/* Reset constrained layout centering */
	.is-layout-constrained > * {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	/* Full width content */
	.wp-block-post-content.is-layout-constrained > *,
	.article-body.is-layout-constrained > * {
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	/* Homepage grid align left */
	.home-grid,
	.home-grid .wp-block-post,
	.home-grid .wp-block-post-title {
		padding-left: 0 !important;
		margin-left: 0 !important;
	}
	
	/* Contact page align left */
	.contact-page,
	.contact-page .wp-block-group {
		padding-left: 0 !important;
		margin-left: 0 !important;
	}
}

/* ========================================
   ORANGE DOT - Positioned outside (outdent)
   ======================================== */

.article-title-wrap {
	position: relative !important;
	display: block !important;
}

.article-title-wrap .orange-dot,
.article-title-wrap .wp-block-group.orange-dot {
	position: absolute !important;
	left: -3rem !important;
	top: 1rem !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	background: #f97316 !important;
	border-radius: 50% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.article-title-wrap .wp-block-post-title,
.article-title-wrap h1,
.article-title-wrap .wp-block-heading {
	margin: 0 !important;
}

/* Mobile - hide dot (already set, but ensure position doesn't break) */
@media (max-width: 1023px) {
	.article-title-wrap .orange-dot,
	.article-title-wrap .wp-block-group.orange-dot {
		display: none !important;
	}
}

/* ========================================
   MOBILE MENU - Full screen slide from right
   ======================================== */

/* Hide desktop nav on mobile, show hamburger */
@media (max-width: 1023px) {
	
	/* WordPress navigation responsive container */
	.wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	
	/* Show hamburger button */
	.wp-block-navigation__responsive-container-open {
		display: flex !important;
		padding: 0.5rem;
	}
	
	/* Full screen overlay when open */
	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100vh !important;
		background: #fff !important;
		z-index: 9999 !important;
		padding: 0 !important;
		animation: slideInFromRight 0.3s ease-out !important;
	}
	
	/* Slide in animation */
	@keyframes slideInFromRight {
		from {
			transform: translateX(100%);
			opacity: 0;
		}
		to {
			transform: translateX(0);
			opacity: 1;
		}
	}
	
	/* Close button positioning */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute !important;
		top: 1.5rem !important;
		right: 1.5rem !important;
		z-index: 10000 !important;
	}
	
	/* Menu content container */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex !important;
		flex-direction: column !important;
		padding: 5rem 1.5rem 2rem !important;
		height: 100% !important;
		gap: 0 !important;
	}
	
	/* Menu items */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		border-bottom: 1px solid #f3f4f6 !important;
	}
	
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block !important;
		padding: 1.25rem 0 !important;
		font-size: 1.5rem !important;
		font-weight: 400 !important;
		color: #1f2937 !important;
		text-decoration: none !important;
	}
	
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
		color: #f97316 !important;
	}
}

/* Desktop - show normal nav, hide hamburger */
@media (min-width: 1024px) {
	.wp-block-navigation__responsive-container-open {
		display: none !important;
	}
	
	.wp-block-navigation__responsive-container {
		display: block !important;
	}
}

/* ========================================
   MOBILE MENU - FIXED per design GitHub
   ======================================== */

@media (max-width: 1023px) {
	
	/* Full screen overlay */
	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		background: #fff !important;
		z-index: 9999 !important;
		padding: 0 !important;
		margin: 0 !important;
		animation: slideInFromRight 0.3s ease-out !important;
	}
	
	/* Close button header */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute !important;
		top: 2rem !important;
		right: 1.5rem !important;
		padding: 0 !important;
		background: none !important;
		border: none !important;
	}
	
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
		width: 24px !important;
		height: 24px !important;
		color: #111827 !important;
	}
	
	/* Nav content container - ALIGN LEFT */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		padding: 6rem 1.5rem 2rem 1.5rem !important;
		margin: 0 !important;
		gap: 0 !important;
		width: 100% !important;
	}
	
	/* Navigation list */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		width: 100% !important;
		gap: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	
	/* Each menu item */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border-bottom: 1px solid #f3f4f6 !important;
	}
	
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
		border-bottom: none !important;
	}
	
	/* Menu link - text-4xl, py-6, aligned left */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block !important;
		width: 100% !important;
		padding: 1.5rem 0 !important;
		margin: 0 !important;
		font-size: 2.25rem !important;
		font-weight: 400 !important;
		line-height: 1.2 !important;
		color: #4B5563 !important;
		text-align: left !important;
		text-decoration: none !important;
		background: none !important;
	}
	
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
		color: #f97316 !important;
	}
}

/* ========================================
   MOBILE HEADER - Same padding as content
   ======================================== */

@media (max-width: 1023px) {
	
	/* Header same padding as content - 1rem (16px) */
	.site-header {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	
	.site-header > .wp-block-group {
		padding: 0 !important;
		margin: 0 !important;
	}
	
	/* Remove any constrained layout centering */
	.site-header.is-layout-constrained > * {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100% !important;
	}
}

/* ========================================
   FIX 1: MENU MOBILE - Complete rewrite
   ======================================== */

@media (max-width: 1023px) {
	
	/* Full screen overlay with SLIDE from right */
	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		background: #fff !important;
		z-index: 99999 !important;
		padding: 0 !important;
		margin: 0 !important;
		transform: translateX(0) !important;
		animation: slideFromRight 0.3s ease-out !important;
	}
	
	@keyframes slideFromRight {
		from {
			transform: translateX(100%);
		}
		to {
			transform: translateX(0);
		}
	}
	
	/* Close button - top right */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute !important;
		top: 2rem !important;
		right: 1.5rem !important;
		padding: 0 !important;
		background: none !important;
		border: none !important;
		z-index: 100000 !important;
	}
	
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
		width: 24px !important;
		height: 24px !important;
		color: #111827 !important;
	}
	
	/* Nav content - padding px-6 py-8 */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		padding: 6rem 1.5rem 2rem 1.5rem !important;
		margin: 0 !important;
		gap: 0 !important;
		width: 100% !important;
	}
	
	/* Nav container */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		width: 100% !important;
		gap: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	
	/* Each menu item - border gray-100 */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border-bottom: 1px solid #f3f4f6 !important;
	}
	
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
		border-bottom: none !important;
	}
	
	/* Menu link - text-4xl (36px), py-6 (24px), gray-600 */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block !important;
		width: 100% !important;
		padding: 1.5rem 0 !important;
		margin: 0 !important;
		font-size: 2.25rem !important;
		font-weight: 400 !important;
		line-height: 1.2 !important;
		color: #4B5563 !important;
		text-align: left !important;
		text-decoration: none !important;
		background: none !important;
		transition: color 0.2s ease !important;
	}
	
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
		color: #f97316 !important;
	}
}

/* ========================================
   FIX 2: H1 CONTATTI - Same as articles
   ======================================== */

.single-article h1.wp-block-heading,
.single-article .article-title-wrap h1.wp-block-heading {
	font-size: 3.75rem !important;
	line-height: 1.1 !important;
	font-weight: 400 !important;
	color: #111827 !important;
	margin: 0 !important;
}

@media (max-width: 1023px) {
	.single-article h1.wp-block-heading,
	.single-article .article-title-wrap h1.wp-block-heading {
		font-size: 2.25rem !important;
	}
}

/* ========================================
   FIX 3: Remove conflicting H1 rules
   ======================================== */

/* Single source of truth for H1 mobile */
@media (max-width: 1023px) {
	h1,
	.wp-block-heading:where(h1),
	.article-title-wrap h1,
	.article-title-wrap .wp-block-heading,
	.article-title-wrap .wp-block-post-title,
	.single-article h1 {
		font-size: 2.25rem !important;
	}
}

/* Remove the conflicting 782px rule - single breakpoint at 1023px */

/* ========================================
   FIX 4: Orange dot homepage - clean rules
   ======================================== */

/* Desktop - visible */
@media (min-width: 1024px) {
	.home-grid .wp-block-post-title::before {
		content: '' !important;
		display: inline-block !important;
		width: 14px !important;
		height: 14px !important;
		background: #f97316 !important;
		border-radius: 50% !important;
		margin-right: 1rem !important;
		margin-top: 0.5rem !important;
		flex-shrink: 0 !important;
	}
}

/* Mobile - hidden */
@media (max-width: 1023px) {
	.home-grid .wp-block-post-title::before {
		display: none !important;
		content: none !important;
	}
}

/* ========================================
   FIX 5: Remove double padding
   ======================================== */

body {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Only main has padding */
@media (min-width: 1024px) {
	main.wp-block-group,
	.single-article {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

@media (max-width: 1023px) {
	main.wp-block-group,
	.single-article {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}


/* ========================================
   HOMEPAGE MOBILE - Orange dot VISIBLE
   ======================================== */

@media (max-width: 1023px) {
	.home-grid .wp-block-post-title::before {
		content: '' !important;
		display: inline-block !important;
		width: 12px !important;
		height: 12px !important;
		background: #f97316 !important;
		border-radius: 50% !important;
		margin-right: 0.75rem !important;
		margin-top: 0.35rem !important;
		flex-shrink: 0 !important;
	}
	
	.home-grid .wp-block-post-title {
		display: flex !important;
		align-items: flex-start !important;
	}
}

/* ========================================
   HOMEPAGE - Category & Date styling
   ======================================== */

.home-post-item {
	gap: 0.5rem !important;
}

.home-category {
	font-size: 0.75rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: #6b7280 !important;
	margin: 0 !important;
}

.home-category a {
	color: #6b7280 !important;
	text-decoration: none !important;
}

.home-category a:hover {
	color: #f97316 !important;
}

.home-date {
	font-size: 0.75rem !important;
	color: #6b7280 !important;
	margin: 0 !important;
}

/* Adjust title margin */
.home-grid .wp-block-post-title {
	margin: 0.25rem 0 !important;
}

/* ========================================
   HOMEPAGE - Align category/date with title text
   ======================================== */

/* Desktop: dot 14px + margin 1rem = ~30px */
@media (min-width: 1024px) {
	.home-category,
	.home-date {
		margin-left: calc(14px + 1rem) !important;
	}
}

/* Mobile: dot 12px + margin 0.75rem = ~24px */
@media (max-width: 1023px) {
	.home-category,
	.home-date {
		margin-left: calc(12px + 0.75rem) !important;
	}
}

/* Category & Date - 1pt larger (13px) */
.home-category,
.home-date {
	font-size: 0.8125rem !important;
}