/*
Theme Name: Emichi
Template: frost
Theme URI: https://emichi.co/
Author: Emichi d.o.o.
Author URI: https://emichi.co/
Description: Emichi.co website theme
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing, one-column, template-editing, threaded-comments, translation-ready, wide-blocks
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0.0
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: emichi
*/

/* ==========================================================================
   TABLE OF CONTENTS
   1. Defaults (child-only overrides of Frost parent)
   2. Navigation Enhancements
   3. Block Overrides (Post Card, Code, Details/FAQ)
   4. Button System (3D Press Animation via Custom Properties)
   5. Custom Components (Arrow Animation, Author Box, Marquee)
   6. Blog Post Single Styles
   7. Comment Section
   8. Mobile Navigation Overlay (iOS Safari Fix)
   9. Overlay CTA ("Get in Touch" in Mobile Menu)
   10. Responsive Breakpoints
 14. Contact Form (Contact Form 7)

   CSS Architecture Notes:
   - Frost parent theme provides: box-sizing, scroll-behavior, transitions,
     link underlines, bold/strong, mark, base forms, focus states, placeholders,
     inline code, nav responsive, submenus, box shadows, columns-reverse.
   - This child theme overrides ONLY what differs.
   - Button system uses CSS custom properties for the 3D press animation.
     Each variant sets --btn-shadow-color; the animation is defined once.
   - !important is used ONLY where WordPress Style Engine adds inline styles
     (colors, padding, border) that cannot be overridden by specificity alone.
   ========================================================================== */

/* ==========================================================================
   1. DEFAULTS - Child-only overrides of Frost parent
   ========================================================================== */

/* Form inputs: wider horizontal padding than Frost (30px vs 20px) */
input,
select,
textarea {
padding: 10px 30px;
}

/* Standard appearance property (Frost only has -webkit-) */
input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
appearance: none;
-webkit-appearance: none;
}

/* Enhanced focus: primary accent border + glow ring */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus {
border-color: var(--wp--preset--color--primary);
box-shadow: 0 0 0 2px rgba(224, 254, 86, 0.3);
outline: none;
}

/* ==========================================================================
   2. NAVIGATION ENHANCEMENTS
   Extends Frost's base navigation with hover effects and dropdown polish.
   Hover/focus colors match content link styling (Bright Olive #4f7525).
   ========================================================================== */

/* Smooth transition for nav link color changes */
.wp-block-navigation .wp-block-navigation-item__content {
transition: color 0.2s ease-in-out;
}

/* Hover state for nav links - matches content link hover (Bright Olive) */
.wp-block-navigation .wp-block-navigation-item__content:hover {
color: #4f7525;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 2px;
}

/* Focus state for nav links - matches hover styling, no outline box */
.wp-block-navigation .wp-block-navigation-item__content:focus,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
color: #4f7525;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 2px;
outline: none;
}

/* Active/current page indicator - accent color (Forest Olive) */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
color: var(--wp--preset--color--accent);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 2px;
}

/* Dropdown polish: rounded corners and subtle shadow */
.wp-block-navigation__submenu-container {
border-radius: 5px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 10px;
}

/* Dropdown colors when parent nav has no background */
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
background-color: var(--wp--preset--color--contrast);
border: 1px solid var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
}

/* ==========================================================================
   3. BLOCK OVERRIDES
   ========================================================================== */

/* 3a. Blog Post Card
   ---------------------------------------- */
.wp-block-post {
border: 1px solid var(--wp--preset--color--contrast);
padding: 20px 30px;
}

/* 3b. Code Block - Enhanced Styling & Syntax Highlighting
   ----------------------------------------
   Base styles partially overlap theme.json core/code settings.
   CSS overrides padding (20px vs theme.json's 30px) and adds
   border-radius and font-family not expressible in theme.json.
*/
.wp-block-code {
background-color: var(--wp--preset--color--contrast) !important;
color: #e6e6e6 !important;
border-radius: 5px;
padding: 20px;
font-family: var(--wp--preset--font-family--jetbrains-mono);
font-size: var(--wp--preset--font-size--small);
overflow-x: auto;
border: 1px solid rgba(255, 255, 255, 0.08);
}

.wp-block-code code {
display: block;
padding: 0;
overflow-x: auto;
white-space: pre;
}

/* Syntax highlighting - Dracula-inspired palette */
.wp-block-code .token.comment,
.wp-block-code .token.prolog,
.wp-block-code .token.doctype,
.wp-block-code .token.cdata { color: #8292a2; }

.wp-block-code .token.punctuation { color: #f8f8f2; }

.wp-block-code .token.property,
.wp-block-code .token.tag,
.wp-block-code .token.constant,
.wp-block-code .token.symbol,
.wp-block-code .token.deleted { color: #ff5555; }

.wp-block-code .token.boolean,
.wp-block-code .token.number { color: #bd93f9; }

.wp-block-code .token.selector,
.wp-block-code .token.attr-name,
.wp-block-code .token.string,
.wp-block-code .token.char,
.wp-block-code .token.builtin,
.wp-block-code .token.inserted { color: #c1ff00; }

.wp-block-code .token.operator { color: #ff79c6; }
.wp-block-code .token.keyword { color: #ff79c6; }
.wp-block-code .token.function { color: #50fa7b; }
.wp-block-code .token.class-name { color: #8be9fd; }

/* 3c. Details/FAQ Block - Additions beyond theme.json
   ----------------------------------------
   theme.json core/details CSS property handles: border, shadow, summary
   styling, +/\u2212 indicators, hover/open states, content padding.
   These rules add ONLY what theme.json does NOT cover.
*/

/* Background on open details container (not the summary) */
.wp-block-details[open] {
background: var(--wp--preset--color--base);
}

/* Content padding override: removes top padding, tighter bottom spacing.
   !important: overrides theme.json core/details padding (small medium). */
.wp-block-details > *:not(summary) {
padding: 0 var(--wp--preset--spacing--medium) var(--wp--preset--spacing--small) !important;
}

/* First paragraph: remove extra top margin */
.wp-block-details > p:first-of-type {
margin-top: 0;
padding-top: var(--wp--preset--spacing--x-small);
}

/* Remove browser focus indicators (click-only interaction) */
.wp-block-details summary:focus,
.wp-block-details summary:focus-visible {
outline: none;
}

/* 3d. Post Author Name */
.wp-block-post-author-name a {
font-size: inherit;
}

/* ==========================================================================
   4. BUTTON SYSTEM - 3D Brutalist Press Animation

   Architecture: CSS custom properties define the 3D shadow effect.
   Each variant sets its own colors; the animation is shared.

   Custom Properties:
   --btn-shadow-color  Shadow color (set by each variant)
   --btn-shadow-size   Shadow offset, default 4px (3px for small)

   WHY !important on COLOR properties:
   WordPress Style Engine adds inline background-color, color, border-color,
   and padding when users customize buttons in the Block Editor. Only
   !important can override these inline styles. Animation properties
   (transform, box-shadow, transition) do NOT get inline styles from WP.
   ========================================================================== */

/* 4a. Base - Shared Typography & Animation Pattern
   ---------------------------------------- */
.wp-block-button .wp-block-button__link {
/* Typography */
font-size: var(--wp--preset--font-size--x-small);
font-weight: var(--wp--custom--font-weight--medium);
font-family: var(--wp--preset--font-family--jetbrains-mono);
/* Layout - !important overrides WP inline styles */
padding: 15px 30px !important;
border-radius: 0 !important;
border: 1px solid !important;
/* 3D Animation System */
--_btn-shadow-color: var(--btn-shadow-color, var(--wp--preset--color--contrast));
--_btn-shadow-size: var(--btn-shadow-size, 4px);
box-shadow: var(--_btn-shadow-size) var(--_btn-shadow-size) 0 var(--_btn-shadow-color);
transform: translateY(0);
transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

.wp-block-button .wp-block-button__link:hover {
transform: translateY(2px);
box-shadow: calc(var(--_btn-shadow-size) - 2px) calc(var(--_btn-shadow-size) - 2px) 0 var(--_btn-shadow-color);
}

.wp-block-button .wp-block-button__link:active,
.wp-block-button .wp-block-button__link:focus {
transform: translateY(var(--_btn-shadow-size));
box-shadow: 0 0 0 var(--_btn-shadow-color);
}

/* 4b. PRIMARY - Lime bg (#e0fe56), dark text/border
   Also covers: default buttons (no color classes), .has-contrast-border-color
   ---------------------------------------- */
.wp-block-button.is-style-primary .wp-block-button__link,
.wp-block-button .wp-block-button__link.has-contrast-border-color,
.wp-block-button .wp-block-button__link:not([class*="has-"]),
.wp-block-button .wp-element-button:not([class*="has-"]) {
background-color: var(--wp--preset--color--primary) !important;
color: var(--wp--preset--color--contrast) !important;
border-color: var(--wp--preset--color--contrast) !important;
--btn-shadow-color: var(--wp--preset--color--contrast);
}

/* 4c. SECONDARY - Cream bg (#fdf3ec), dark text/border
   Also covers: outline buttons with .has-base-background-color
   ---------------------------------------- */
.wp-block-button.is-style-secondary .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link.has-base-background-color {
background-color: var(--wp--preset--color--base) !important;
color: var(--wp--preset--color--contrast) !important;
border-color: var(--wp--preset--color--contrast) !important;
--btn-shadow-color: var(--wp--preset--color--contrast);
}

/* 4d. OUTLINE RED - Transparent bg, red border (#fe7256), light text
   Also covers: .has-highlight-border-color buttons anywhere
   ---------------------------------------- */
.wp-block-button.is-style-outline-red .wp-block-button__link,
.wp-block-button .wp-block-button__link.has-highlight-border-color,
.wp-block-button.is-style-outline .wp-block-button__link.has-highlight-border-color {
background-color: transparent !important;
color: var(--wp--preset--color--base) !important;
border-color: var(--wp--preset--color--highlight) !important;
--btn-shadow-color: var(--wp--preset--color--highlight);
}

/* 4e. OUTLINE WHITE - Transparent bg, light border/text (#fdf3ec)
   Also covers: footer buttons, notification bar, .has-light-border-color
   ---------------------------------------- */
.wp-block-button.is-style-outline-white .wp-block-button__link,
.wp-block-button .wp-block-button__link.has-light-border-color,
footer .wp-block-button .wp-block-button__link,
.site-footer .wp-block-button .wp-block-button__link,
.emichi-notification-marquee .wp-block-button.is-style-outline .wp-block-button__link {
background-color: transparent !important;
color: var(--wp--preset--color--base) !important;
border-color: var(--wp--preset--color--base) !important;
--btn-shadow-color: var(--wp--preset--color--base);
}

/* 4f. FILL PRIMARY - 3D effect on fill-style with primary background
   ---------------------------------------- */
.wp-block-button.is-style-fill .wp-block-button__link.has-primary-background-color {
font-family: var(--wp--preset--font-family--jetbrains-mono);
border: 1px solid var(--wp--preset--color--contrast) !important;
--btn-shadow-color: var(--wp--preset--color--contrast);
}

/* 4g. SMALL - Reduced padding/font, 3px shadow
   ---------------------------------------- */
.wp-block-button.is-style-small .wp-block-button__link,
.wp-block-button.is-style-small-outline .wp-block-button__link {
padding: 8px 16px !important;
font-size: 12px !important;
--btn-shadow-size: 3px;
}

/* Small Outline: transparent bg, light border/text */
.wp-block-button.is-style-small-outline .wp-block-button__link {
background-color: transparent !important;
color: var(--wp--preset--color--base) !important;
border: 1px solid var(--wp--preset--color--base) !important;
--btn-shadow-color: var(--wp--preset--color--base);
}

/* 4h. Dark Background Context: small buttons invert to light colors
   ---------------------------------------- */
.has-contrast-background-color .wp-block-button.is-style-small .wp-block-button__link,
.emichi-notification-marquee .wp-block-button.is-style-small .wp-block-button__link {
background-color: transparent !important;
color: var(--wp--preset--color--base) !important;
border: 1px solid var(--wp--preset--color--base) !important;
--btn-shadow-color: var(--wp--preset--color--base);
}

/* Notification bar links: enforce monospace font */
.emichi-notification-marquee a {
font-family: var(--wp--preset--font-family--jetbrains-mono);
}

/* ==========================================================================
   5. CUSTOM COMPONENTS
   ========================================================================== */

/* 5a. Arrow Animation on Hover - Button SVG/Arrows
   ---------------------------------------- */
.wp-block-button__link svg,
.wp-block-button__link span.arrow {
display: inline-block;
transition: transform 0.2s ease;
}

.wp-block-button__link:hover svg,
.wp-block-button__link:hover span.arrow {
transform: translateX(4px);
}

/* 5b. Emichi Author Box
   ---------------------------------------- */
/* Author Box — horizontal layout matching homepage team cards */
.emichi-author-box {
display: flex;
align-items: flex-start;
justify-content: center;
}

.emichi-author-details-flex-container {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: var(--wp--preset--spacing--medium);
width: 100%;
max-width: 700px;
}

.emichi-author-avatar-wrap {
flex-shrink: 0;
}

.emichi-author-avatar-wrap img {
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 0;
border: none;
}

.emichi-author-texts {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
text-align: left;
}

.emichi-author-name-shortcode {
font-family: var(--wp--preset--font-family--alata);
font-weight: var(--wp--custom--font-weight--bold);
font-size: var(--wp--preset--font-size--medium);
color: var(--wp--preset--color--base);
}

.emichi-author-bio-shortcode {
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--base);
opacity: 0.9;
text-align: left;
line-height: 1.5;
}

/* Author LinkedIn button — outline style matching team cards */
.emichi-author-box .wp-block-button.emichi-author-linkedin-button .wp-block-button__link {
font-family: var(--wp--preset--font-family--jetbrains-mono);
color: var(--wp--preset--color--base) !important;
background-color: transparent !important;
border: 1px solid var(--wp--preset--color--highlight) !important;
font-size: var(--wp--preset--font-size--x-small);
font-style: normal;
font-weight: 700;
box-shadow: var(--wp--preset--shadow--solid-highlight);
padding: var(--wp--preset--spacing--x-small) var(--wp--preset--spacing--medium) !important;
}

.emichi-author-box .wp-block-button.emichi-author-linkedin-button .wp-block-button__link:hover {
background-color: var(--wp--preset--color--highlight) !important;
color: var(--wp--preset--color--contrast) !important;
}

.emichi-author-box .wp-block-button.emichi-author-linkedin-button {
align-self: flex-start;
}

/* 5c. Notification Marquee
   z-index: must sit above mobile menu overlay (100000).
   ---------------------------------------- */
.emichi-notification-marquee {
position: relative;
z-index: 100002;
}

/* ==========================================================================
   6. BLOG POST SINGLE STYLES
   ========================================================================== */

/* 6a. Blog Post Headings - Single post context overrides
   These use direct font values for blog readability.
   theme.json heading styles are for the marketing pages (h1=14px label, h2=72px hero).
   Blog posts need a traditional heading hierarchy.
   ---------------------------------------- */
.single-post h1,
.single-post h2,
.single-post h3,
.single-post h4,
.single-post h5,
.single-post h6 {
font-family: var(--wp--preset--font-family--alata);
line-height: 1.2em;
}

.single-post h1 {
font-size: var(--wp--preset--font-size--max-48);
text-align: center;
}

.single-post h2 { font-size: 30px; }
.single-post h3 {
font-size: 24px;
margin-top: 1.2em;
margin-bottom: 0.8em;
}
.single-post h4 { font-size: 18px; }
.single-post h5 { font-size: 16px; }
.single-post h6 { font-size: 14px; }

/* 6b. Blog Post Content Typography */
.single-post .wp-block-post-content p,
.single-post .wp-block-post-content ul,
.single-post .wp-block-post-content ol,
.single-post .wp-block-post-content li {
font-family: var(--wp--preset--font-family--primary);
font-size: var(--wp--preset--font-size--medium);
font-weight: 400;
}

.single-post .wp-block-post-content p,
.single-post .wp-block-post-content ul,
.single-post .wp-block-post-content ol {
margin-bottom: 1.5em;
}

.single-post .wp-block-post-content li {
margin-bottom: 0.5em;
}

/* 6b2. Blog Post Content Links */
.single-post .wp-block-post-content a:not(.wp-block-button__link) {
color: var(--wp--preset--color--accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
transition: color 0.2s ease-in-out;
}

.single-post .wp-block-post-content a:not(.wp-block-button__link):hover {
color: #4f7525;
text-decoration-thickness: 2px;
}

.single-post .wp-block-post-content a:not(.wp-block-button__link):visited {
color: #5c6348;
}

/* 6c. Hero Cover Section */
.single-post .post-hero {
position: relative;
}

.single-post .post-hero .wp-block-cover__inner-container {
max-width: var(--wp--style--global--content-size);
width: 100%;
margin: 0 auto;
}

/* Category badges */
.single-post .wp-block-post-terms {
	display: inline-flex;
	gap: 8px;
	flex-wrap: wrap;
}

.single-post .wp-block-post-terms a {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 3px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: all 0.2s ease-in-out;
}

/* Hero category badge – override WP's inline background on the container */
.single-post .post-hero .wp-block-post-terms {
	background-color: transparent !important;
	justify-content: center;
	width: 100%;
}

.single-post .post-hero .wp-block-post-terms a {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
	padding: 6px 18px;
	border-radius: 4px;
	font-weight: 700;
	box-shadow: 3px 3px 0 var(--wp--preset--color--contrast);
	transform: translateY(0);
	transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

.single-post .post-hero .wp-block-post-terms a:hover {
	transform: translateY(2px);
	box-shadow: 1px 1px 0 var(--wp--preset--color--contrast);
}

.single-post .post-hero .wp-block-post-terms a:active {
	transform: translateY(3px);
	box-shadow: 0 0 0 var(--wp--preset--color--contrast);
}

/* 6d. Post Content Spacing */
.single-post article .wp-block-post-content {
font-size: var(--wp--preset--font-size--medium);
line-height: var(--wp--custom--line-height--body);
}

.single-post article .wp-block-post-content > *:first-child {
margin-top: 0;
}

.single-post article .wp-block-post-content h2 {
margin-top: var(--wp--preset--spacing--medium);
margin-bottom: var(--wp--preset--spacing--x-small);
}

.single-post article .wp-block-post-content h3,
.single-post article .wp-block-post-content h4 {
margin-top: var(--wp--preset--spacing--large);
margin-bottom: 15px;
}

/* 6d2. Lead Paragraph */
.single-post .wp-block-post-content > p:first-child {
font-size: 20px;
line-height: 1.7;
}

/* 6d3. Blog Post Images */
.single-post .wp-block-post-content .wp-block-image img,
.single-post .wp-block-post-content figure img {
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.single-post .wp-block-post-content .wp-block-image,
.single-post .wp-block-post-content figure.wp-block-image {
margin-top: 1.5em;
margin-bottom: 1.5em;
}

/* 6e. Blockquote */
.single-post .wp-block-quote {
border-left: 4px solid var(--wp--preset--color--highlight) !important;
padding: var(--wp--preset--spacing--x-small) var(--wp--preset--spacing--small);
margin: var(--wp--preset--spacing--small) 0;
background-color: var(--wp--preset--color--secondary) !important;
font-style: italic;
}

.single-post .wp-block-quote p {
margin-bottom: 0.5em;
}

.single-post .wp-block-quote cite {
display: block;
margin-top: 10px;
font-style: normal;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--neutral);
}

.single-post .wp-block-quote cite::before {
content: "\2014\00a0";
}

/* 6e2. Blog Post Tables */
.single-post .wp-block-post-content table,
.single-post .wp-block-post-content .wp-block-table table {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--wp--preset--color--contrast);
margin: 1.5em 0;
}

.single-post .wp-block-post-content table th {
background-color: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
font-family: var(--wp--preset--font-family--alata);
font-size: var(--wp--preset--font-size--small);
padding: 12px 16px;
text-align: left;
font-weight: 600;
}

.single-post .wp-block-post-content table td {
padding: 12px 16px;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, var(--wp--preset--color--base));
font-size: var(--wp--preset--font-size--small);
vertical-align: top;
}

.single-post .wp-block-post-content table tr:nth-child(even) td {
background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 4%, var(--wp--preset--color--base));
}

/* Remove any hover effects on table rows */
.single-post .wp-block-post-content table tr:hover td,
.single-post .wp-block-post-content .wp-block-table table tr:hover td {
	background-color: inherit !important;
}
/* Mobile table scroll wrapper */
@media (max-width: 768px) {
.single-post .wp-block-post-content .wp-block-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}

/* 6e3. Blog Post Separators */
.single-post .wp-block-post-content .wp-block-separator {
border: none;
border-top: 2px solid var(--wp--preset--color--primary);
width: 60px;
margin: var(--wp--preset--spacing--medium) auto;
opacity: 1;
}

.single-post .wp-block-post-content .wp-block-separator.is-style-wide {
width: 100%;
}

/* 6e4. Figure Captions */
.single-post .wp-block-post-content figcaption {
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--neutral);
text-align: center;
margin-top: 8px;
font-style: italic;
}

/* 6f. Tags Section */
.single-post .post-tags {
border-top: 1px solid var(--wp--preset--color--neutral);
}

.single-post .post-tags .wp-block-post-terms a {
background-color: transparent;
border: 1px solid var(--wp--preset--color--accent);
color: var(--wp--preset--color--accent);
padding: 4px 10px;
font-size: var(--wp--preset--font-size--x-small);
}

.single-post .post-tags .wp-block-post-terms a:hover {
background-color: var(--wp--preset--color--accent);
color: var(--wp--preset--color--white);
}

/* 6g. Author Bio */
.single-post .wp-block-post-author {
display: flex;
gap: 20px;
align-items: flex-start;
}

.single-post .wp-block-post-author__avatar img {
border-radius: 4px;
border: 2px solid var(--wp--preset--color--contrast);
}

.single-post .wp-block-post-author__name {
font-family: var(--wp--preset--font-family--alata);
font-size: var(--wp--preset--font-size--large);
font-weight: var(--wp--custom--font-weight--bold);
margin-bottom: 8px;
}

.single-post .wp-block-post-author__bio {
color: var(--wp--preset--color--neutral);
font-size: var(--wp--preset--font-size--small);
line-height: var(--wp--custom--line-height--body);
}
.single-post .wp-block-post-author__name a {
color: var(--wp--preset--color--accent);
text-decoration: none;
}

.single-post .wp-block-post-author__name a:hover {
text-decoration: underline;
}

/* 6h. Post Navigation */
/* Post navigation: two-column prev/next layout */

/* 6i. Related Posts Grid */
.single-post .wp-block-query .wp-block-post-template {
list-style: none;
padding: 0;
}

.single-post .related-posts .wp-block-cover {
min-height: 300px;
}

.single-post .related-posts .wp-block-post-title {
font-size: var(--wp--preset--font-size--large);
}

/* ==========================================================================
   7. ADDITIONAL BLOCK OVERRIDES
   ========================================================================== */

/* 7a. Inline Code (NOT inside code blocks)
   Frost doesn't style this; adds subtle background to inline <code>.
   ---------------------------------------- */
*:not(.wp-block-code) > code {
background-color: var(--wp--preset--color--secondary);
font-family: var(--wp--preset--font-family--jetbrains-mono);
font-size: 0.875em;
padding: 3px 6px;
border-radius: 3px;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, var(--wp--preset--color--base));
}

/* 7b. Placeholder text */
::placeholder {
color: var(--wp--preset--color--contrast);
font-size: var(--wp--preset--font-size--small);
opacity: 0.5;
}

/* 7c. Details/FAQ - Marker & Indicator Pseudo-elements
   theme.json cannot target ::marker, ::after, or ::-webkit-details-marker.
   These must remain in CSS.
   ---------------------------------------- */

/* Remove browser default disclosure triangle */
.wp-block-details summary::-webkit-details-marker,
.wp-block-details summary::marker {
display: none;
content: "";
}

/* Custom +/- indicator */
.wp-block-details summary::after {
content: "+";
font-size: 1.5rem;
font-weight: 700;
color: var(--wp--preset--color--contrast);
transition: transform 0.2s ease;
}

.wp-block-details[open] summary::after {
content: "\2212";
}

/* Hover highlight on summary row */
.wp-block-details summary:hover {
background: color-mix(in srgb, var(--wp--preset--color--primary) 30%, var(--wp--preset--color--base));
}

/* Open state: summary gets bottom border + highlight */
.wp-block-details[open] summary {
border-bottom: 1px solid var(--wp--preset--color--contrast);
background: color-mix(in srgb, var(--wp--preset--color--primary) 30%, var(--wp--preset--color--base));
}

/* ==========================================================================
   8. UTILITY CLASSES
   Registered as block style variations in functions.php.
   ========================================================================== */

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

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

/* ==========================================================================
   9. MOBILE NAVIGATION OVERLAY - iOS Safari Fix
   WHY all !important: WordPress Navigation block uses inline styles
   (max-width, padding, position) set by JS/PHP that cannot be overridden
   by specificity alone. These are critical for iOS Safari where the
   navigation overlay must cover the full dynamic viewport.
   ========================================================================== */

/* 9a. Full-viewport overlay */
.wp-block-navigation__responsive-container.is-menu-open {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
width: 100dvw !important;
height: 100vh !important;
height: 100dvh !important;
max-width: none !important;
margin: 0 !important;
padding: 30px !important;
transform: none !important;
z-index: 100000 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}

/* 9b. Inner dialog - fill parent */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
position: relative !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}

/* 9b2. Menu content padding */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--custom--spacing--gap);
}

/* 9c. Close button - force visible and positioned */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: absolute !important;
top: 30px !important;
right: 30px !important;
left: auto !important;
z-index: 100001 !important;
width: 30px !important;
height: 30px !important;
padding: 2px !important;
border: 1px solid currentColor !important;
background: transparent !important;
cursor: pointer !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
display: block !important;
width: 100% !important;
height: 100% !important;
}

/* 9d. Prevent ancestor transforms creating new stacking context
   (which breaks position:fixed on iOS Safari) */
.site-header,
.wp-block-template-part,
header,
.wp-block-group.has-contrast-background-color {
transform: none !important;
will-change: auto !important;
perspective: none !important;
filter: none !important;
contain: none !important;
}

/* 9e. iOS Safari specific */
@supports (-webkit-touch-callout: none) {
.wp-block-navigation__responsive-container.is-menu-open {
inset: 0 !important;
overscroll-behavior: contain;
}
}

/* 9f. Menu items layout */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
display: flex !important;
flex-direction: column !important;
gap: 30px !important;
padding-top: 60px !important;
}

/* ==========================================================================
   10. HAMBURGER BUTTON VISIBILITY
   Ensures the hamburger button reappears after closing the overlay.
   !important: WP navigation JS toggles inline display/visibility.
   ========================================================================== */
@media (max-width: 600px) {
.wp-block-navigation__responsive-container-open {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 100 !important;
}

/* Hide hamburger only when overlay is actually open */
.wp-block-navigation__responsive-container.is-menu-open ~ .wp-block-navigation__responsive-container-open,
.has-modal-open .wp-block-navigation__responsive-container-open {
display: none !important;
}
}

/* ==========================================================================
   11. OVERLAY CTA - "Get in Touch" Button in Mobile Menu
   Appears only inside the mobile navigation overlay.
   Styled as primary CTA with 3D press animation.
   !important: Same reason as nav overlay - WP inline styles on links.
   ========================================================================== */

/* 11a. Standalone injected CTA (JS-injected .overlay-cta-button) */
.overlay-cta-button {
display: block !important;
margin-top: 30px !important;
padding-top: 20px !important;
border-top: 1px solid var(--wp--preset--color--neutral) !important;
list-style: none !important;
}

.overlay-cta-button a {
display: inline-block !important;
padding: 15px 30px !important;
background-color: var(--wp--preset--color--primary) !important;
color: var(--wp--preset--color--contrast) !important;
text-decoration: none !important;
font-family: var(--wp--preset--font-family--primary) !important;
font-size: var(--wp--preset--font-size--medium) !important;
font-weight: 500 !important;
border: 1px solid var(--wp--preset--color--contrast) !important;
box-shadow: 4px 4px 0 var(--wp--preset--color--contrast) !important;
transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.overlay-cta-button a:hover {
transform: translate(2px, 2px) !important;
box-shadow: 2px 2px 0 var(--wp--preset--color--contrast) !important;
}

.overlay-cta-button a:active {
transform: translate(4px, 4px) !important;
box-shadow: none !important;
}

/* 11b. CTA as navigation menu item (.overlay-cta-menu-item) */
@media (max-width: 782px) {
.wp-block-navigation__responsive-container.is-menu-open .overlay-cta-menu-item,
.wp-block-navigation__responsive-container .overlay-cta-menu-item {
margin-top: 30px !important;
padding-top: 20px !important;
border-top: 1px solid var(--wp--preset--color--neutral) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .overlay-cta-menu-item a,
.wp-block-navigation__responsive-container .overlay-cta-menu-item a,
.overlay-cta-menu-item .wp-block-navigation-item__content {
display: inline-block !important;
padding: 15px 30px !important;
background-color: var(--wp--preset--color--primary) !important;
color: var(--wp--preset--color--contrast) !important;
text-decoration: none !important;
font-family: var(--wp--preset--font-family--primary) !important;
font-size: var(--wp--preset--font-size--medium) !important;
font-weight: 500 !important;
border: 1px solid var(--wp--preset--color--contrast) !important;
box-shadow: 4px 4px 0 var(--wp--preset--color--contrast) !important;
transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.wp-block-navigation__responsive-container.is-menu-open .overlay-cta-menu-item a:hover,
.wp-block-navigation__responsive-container .overlay-cta-menu-item a:hover,
.overlay-cta-menu-item .wp-block-navigation-item__content:hover {
transform: translate(2px, 2px) !important;
box-shadow: 2px 2px 0 var(--wp--preset--color--contrast) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .overlay-cta-menu-item a:active,
.wp-block-navigation__responsive-container .overlay-cta-menu-item a:active,
.overlay-cta-menu-item .wp-block-navigation-item__content:active {
transform: translate(4px, 4px) !important;
box-shadow: none !important;
}
}

/* 11c. Desktop/Mobile visibility toggle */
@media (min-width: 783px) {
.wp-block-navigation .overlay-cta-menu-item {
display: none !important;
}
}

/* ==========================================================================
   12. COMMENT SECTION
   ========================================================================== */

/* 12a. Comment list */
.single-post .wp-block-comment-template {
	list-style: none;
	padding: 0;
	margin: 0;
}

.single-post .wp-block-comment-template li {
	padding: var(--wp--preset--spacing--small);
	margin-bottom: var(--wp--preset--spacing--x-small);
	background-color: var(--wp--preset--color--secondary);
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: 5px;
}

/* 12b. Comment author */
.single-post .wp-block-comment-author-name {
	font-family: var(--wp--preset--font-family--alata);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
}

.single-post .wp-block-comment-author-name a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.single-post .wp-block-comment-author-name a:hover {
	color: var(--wp--preset--color--accent);
}

/* 12c. Comment date */
.single-post .wp-block-comment-date {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--neutral);
}

/* 12d. Comment content */
.single-post .wp-block-comment-content {
	margin-top: 10px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

/* 12e. Reply link */
.single-post .wp-block-comment-reply-link a {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--accent);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* 12f. Comment form */
.single-post .comment-respond {
	margin-top: var(--wp--preset--spacing--medium);
	padding: var(--wp--preset--spacing--small);
	background-color: var(--wp--preset--color--secondary);
	border: 1px solid var(--wp--preset--color--neutral);
	border-radius: 5px;
}

.single-post .comment-respond .comment-reply-title {
	font-family: var(--wp--preset--font-family--alata);
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: var(--wp--preset--spacing--x-small);
}

.single-post .comment-respond .logged-in-as,
.single-post .comment-respond .comment-notes {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--neutral);
	margin-bottom: 15px;
}

.single-post .comment-respond label {
	display: block;
	margin-bottom: 5px;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--contrast);
}

.single-post .comment-respond input[type="text"],
.single-post .comment-respond input[type="email"],
.single-post .comment-respond input[type="url"],
.single-post .comment-respond textarea {
	width: 100%;
	padding: 12px 15px;
	margin-bottom: 15px;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--small);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.single-post .comment-respond input[type="text"]:focus,
.single-post .comment-respond input[type="email"]:focus,
.single-post .comment-respond input[type="url"]:focus,
.single-post .comment-respond textarea:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 2px rgba(224, 254, 86, 0.3);
	outline: none;
}

.single-post .comment-respond textarea {
	min-height: 150px;
	resize: vertical;
}

/* 12g. Cookie consent checkbox */
.single-post .comment-respond .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 20px;
}

.single-post .comment-respond .comment-form-cookies-consent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--wp--preset--color--primary);
}

.single-post .comment-respond .comment-form-cookies-consent label {
	display: inline;
	text-transform: none;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--neutral);
}

/* 12h. Comment submit button
   !important: WP Style Engine adds inline styles on submit buttons. */
.single-post .comment-respond input[type="submit"],
.single-post .comment-respond .submit {
	display: inline-block;
	padding: 15px 30px !important;
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid var(--wp--preset--color--contrast) !important;
	border-radius: 0 !important;
	font-family: var(--wp--preset--font-family--jetbrains-mono) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-transform: none;
	cursor: pointer;
	box-shadow: 4px 4px 0 var(--wp--preset--color--contrast) !important;
	transition: all 150ms ease-out !important;
}

.single-post .comment-respond input[type="submit"]:hover,
.single-post .comment-respond .submit:hover {
	transform: translateY(2px) !important;
	box-shadow: 2px 2px 0 var(--wp--preset--color--contrast) !important;
}

.single-post .comment-respond input[type="submit"]:active,
.single-post .comment-respond .submit:active {
	transform: translateY(4px) !important;
	box-shadow: 0 0 0 var(--wp--preset--color--contrast) !important;
}

/* ==========================================================================
   13. RESPONSIVE BREAKPOINTS
   Consolidated from scattered media queries.
   Order: desktop-first (largest to smallest).
   ========================================================================== */

/* --- Tablet: max-width 900px --- */
@media (max-width: 900px) {
	/* Related posts: 2 columns */
	.single-post .wp-block-query .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 20px !important;
	}
}

/* --- Tablet/Mobile: max-width 782px --- */
@media (max-width: 782px) {

	/* Utility classes */
	.is-style-hidden-mobile {
		display: none !important;
	}

	.is-style-columns-reverse {
		flex-direction: column-reverse;
	}

	/* Columns spacing */
	.wp-block-columns {
		gap: var(--wp--preset--spacing--small) !important;
	}

	.wp-block-column .wp-block-image img {
		max-width: 100%;
		height: auto;
	}

	/* Logo bar: wrap and center */
	.wp-block-group.alignwide[style*="flex"] {
		flex-wrap: wrap !important;
		gap: 15px 25px !important;
		justify-content: center !important;
	}

	/* Logo images: 3 per row */
	.wp-block-group.alignwide[style*="flex"] > .wp-block-image {
		flex: 0 0 calc(33.33% - 20px) !important;
		max-width: calc(33.33% - 20px) !important;
	}

	.wp-block-group.alignwide[style*="flex"] > .wp-block-image img {
		height: 30px !important;
		width: auto !important;
	}

	/* Related posts: 1 column */
	.single-post .wp-block-query .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}

	/* Post hero adjustments */
	.single-post .post-hero {
		min-height: 280px !important;
	}

	.single-post .post-hero .wp-block-post-title {
		font-size: clamp(28px, 7vw, 42px) !important;
		line-height: 1.15 !important;
		word-wrap: break-word;
		hyphens: auto;
	}

	.single-post .post-hero .wp-block-cover__inner-container {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.single-post .post-hero .wp-block-post-terms a {
		font-size: 11px !important;
		padding: 4px 12px !important;
		box-shadow: 2px 2px 0 var(--wp--preset--color--contrast);
	}

	.single-post .post-hero .wp-block-group.has-small-font-size {
		font-size: 13px !important;
	}

	/* Content area mobile spacing */
	.single-post article.wp-block-group {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.single-post article .wp-block-post-content h2 {
		font-size: 24px !important;
		margin-top: 2em !important;
		margin-bottom: 0.8em !important;
	}

	.single-post article .wp-block-post-content h3 {
		font-size: 20px !important;
		margin-top: 1.5em !important;
	}

	.single-post article .wp-block-post-content h4 {
		font-size: 18px !important;
	}

	.single-post article .wp-block-post-content p {
		font-size: 16px !important;
		line-height: 1.7 !important;
		margin-bottom: 1.3em !important;
	}

	.single-post article .wp-block-post-content ul,
	.single-post article .wp-block-post-content ol {
		padding-left: 1.5em !important;
	}

	/* More Articles section */
	.single-post .wp-block-query {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.single-post .wp-block-query h2.wp-block-heading {
		font-size: 22px !important;
	}

	/* Post title bottom margin */
	.single-post .wp-block-query .wp-block-post-title {
		margin-bottom: 10px !important;
	}

	/* Author bio mobile */
	.single-post .wp-block-post-author {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 15px;
	}

	.single-post .wp-block-post-author__avatar img {
		width: 80px !important;
		height: 80px !important;
	}

	.single-post .wp-block-post-author__name {
		font-size: var(--wp--preset--font-size--medium) !important;
	}

	/* Comment form mobile */
	.single-post .comment-respond {
		padding: 20px !important;
	}

	.single-post .comment-respond input[type="submit"] {
		width: 100%;
	}
}

/* --- Mobile: max-width 600px --- */
@media (max-width: 600px) {

	/* Hide Get in Touch button on mobile (shown in overlay instead) */
	.site-header .wp-block-button__link {
		display: none !important;
	}

	/* Reduce excessive vertical padding */
	.wp-block-group.alignfull[style*="padding-top: var(--wp--preset--spacing--x-large)"] {
		padding-top: var(--wp--preset--spacing--medium) !important;
		padding-bottom: var(--wp--preset--spacing--medium) !important;
	}

	/* Author box mobile — stack vertically */
	.emichi-author-details-flex-container {
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}

	.emichi-author-texts {
		align-items: center;
		text-align: center;
	}

	.emichi-author-box .wp-block-button.emichi-author-linkedin-button {
		align-self: center;
	}

	.emichi-author-avatar-wrap img {
		width: 160px;
		height: 160px;
	}

	.emichi-author-bio-shortcode {
		font-size: var(--wp--preset--font-size--x-small);
	}

	/* Post navigation mobile */
	

	

	
}

/* --- Small mobile: max-width 480px --- */
@media (max-width: 480px) {
	.single-post .post-hero .wp-block-post-title {
		font-size: 24px !important;
		line-height: 1.2 !important;
	}

	.single-post .post-hero {
		min-height: 250px !important;
	}

	/* Logo images: 2 per row */
	.wp-block-group.alignwide[style*="flex"] > .wp-block-image {
		flex: 0 0 calc(50% - 15px) !important;
		max-width: calc(50% - 15px) !important;
	}

	.wp-block-group.alignwide[style*="flex"] > .wp-block-image img {
		height: 25px !important;
	}
}

/* ==========================================================================
   14. CONTACT FORM (Contact Form 7)
   Styles for CF7 forms used on the Get in Touch page.
   The .wpcf7 container gets a card treatment with the brutalist
   solid shadow. Form elements match the design system.
   ========================================================================== */

/* 14a. Form card container
   The parent group wrapping both the "Get in Touch" h2 and the CF7 form
   gets the card treatment so the heading sits inside the box.
   :has(.wpcf7) targets only groups that contain a CF7 form.
   ---------------------------------------- */
.wp-block-group:has(> .wpcf7) {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--contrast);
	padding: var(--wp--preset--spacing--small) !important;
	box-shadow: var(--wp--preset--shadow--solid);
}

/* Reset form element since the card is now on the parent */
.wpcf7-form {
	background: transparent;
	border: none;
	padding: 0;
	box-shadow: none;
}

/* Style the heading inside the card to match the form design system */
.wp-block-group:has(> .wpcf7) > h2 {
	margin-bottom: var(--wp--preset--spacing--small);
	padding-bottom: var(--wp--preset--spacing--x-small);
	border-bottom: 1px solid var(--wp--preset--color--contrast);
}

/* 14b. Form labels
   Monospace uppercase labels match comment form and button styling.
   ---------------------------------------- */
.wpcf7-form label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--x-small);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: var(--wp--custom--font-weight--medium);
	color: var(--wp--preset--color--contrast);
}

/* 14c. Form inputs
   Full-width, sharp corners, dark border - consistent with theme.
   Focus states inherit from Section 1 defaults.
   ---------------------------------------- */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea,
.wpcf7-form select {
	width: 100%;
	padding: 12px 20px;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 14d. Textarea sizing */
.wpcf7-form textarea {
	min-height: 120px;
	resize: vertical;
}

/* 14e. Submit button
   3D brutalist press animation matching Section 4 button system.
   Full-width on the form for visual weight.
   !important: CF7 may add inline styles on submit inputs.
   ---------------------------------------- */
.wpcf7-form input[type="submit"] {
	display: block;
	width: 100%;
	padding: 15px 30px !important;
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid var(--wp--preset--color--contrast) !important;
	border-radius: 0 !important;
	font-family: var(--wp--preset--font-family--jetbrains-mono) !important;
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: var(--wp--custom--font-weight--medium) !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	box-shadow: 4px 4px 0 var(--wp--preset--color--contrast) !important;
	transition: transform 150ms ease-out, box-shadow 150ms ease-out !important;
}

.wpcf7-form input[type="submit"]:hover {
	transform: translateY(2px) !important;
	box-shadow: 2px 2px 0 var(--wp--preset--color--contrast) !important;
}

.wpcf7-form input[type="submit"]:active,
.wpcf7-form input[type="submit"]:focus {
	transform: translateY(4px) !important;
	box-shadow: 0 0 0 var(--wp--preset--color--contrast) !important;
}

/* 14f. Field spacing
   CF7 wraps each field in a <p> tag. Tighten vertical spacing.
   ---------------------------------------- */
.wpcf7-form > p {
	margin-bottom: 0;
}

/* 14g. Validation error messages */
.wpcf7-not-valid-tip {
	color: var(--wp--preset--color--highlight);
	font-size: var(--wp--preset--font-size--x-small);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	margin-top: 5px;
	display: block;
}

/* Invalid field border */
.wpcf7-form .wpcf7-not-valid {
	border-color: var(--wp--preset--color--highlight) !important;
}

/* 14h. Response output (success/error messages after submission) */
.wpcf7-response-output {
	border: 1px solid var(--wp--preset--color--contrast) !important;
	padding: 12px var(--wp--preset--spacing--x-small) !important;
	margin: var(--wp--preset--spacing--x-small) 0 0 !important;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-align: center;
}

/* Success state */
.wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--accent);
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 10%, var(--wp--preset--color--white));
}

/* Error state */
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output {
	border-color: var(--wp--preset--color--highlight) !important;
	color: var(--wp--preset--color--highlight);
	background-color: color-mix(in srgb, var(--wp--preset--color--highlight) 10%, var(--wp--preset--color--white));
}

/* 14i. Hide CF7 spinner (button state provides feedback) */
.wpcf7-spinner {
	display: none;
}

/* 14j. Responsive: contact form mobile adjustments */
@media (max-width: 782px) {
	.wp-block-group:has(> .wpcf7) {
		padding: var(--wp--preset--spacing--x-small) !important;
		box-shadow: 2px 2px 0 var(--wp--preset--color--contrast);
	}

	.wpcf7-form input[type="submit"] {
		box-shadow: 3px 3px 0 var(--wp--preset--color--contrast) !important;
	}
}
/* ==========================================================================
 15. PAGE LAYOUT & GLOBAL CONSTRAINTS
 Ensures content does not stretch infinitely on ultra-wide monitors.
 Constrains the site-logo block to a consistent size across pages.
 ========================================================================== */

/* 15a. Site logo constraint
 The logo image should stay compact and consistent across all pages.
 The homepage shows it at ~180 px; we cap it there.
 When placed in a centred flex row (Get in Touch page), 
 it stays proportional to the heading text below.
 ---------------------------------------- */
.wp-block-site-logo img {
max-width: 160px;
height: auto;
}

/* 15c. Responsive logo adjustments
 ---------------------------------------- */
@media (max-width: 768px) {
.wp-block-site-logo img {
max-width: 120px;
}
}

@media (max-width: 480px) {
.wp-block-site-logo img {
max-width: 100px;
}
}

/* 15d. Hero heading size in two-column layouts
 In multi-column layouts the 72 px h2 overwhelms the content.
 Scale down to max-48 (48 px) when inside a columns block.
 ---------------------------------------- */
.wp-block-columns .wp-block-column h2.wp-block-heading {
	font-size: var(--wp--preset--font-size--max-48) !important;
}

@media (max-width: 768px) {
	.wp-block-columns .wp-block-column h2.wp-block-heading {
		font-size: var(--wp--preset--font-size--max-36) !important;
	}
}

/* ==========================================================================
   16. HERO SECTION CENTERING (Single Post)
   ========================================================================== */
/* (moved to main category badges section) */

.single-post .post-hero .wp-block-group:has(.wp-block-post-date) {
	justify-content: center;
}

/* ==========================================================================
   18. MORE ARTICLES CARDS (Single Post - Redesigned)
   ========================================================================== */

/* ==========================================================================
   19. CODE BLOCK OVERRIDES (Single Post)
   Force dark theme regardless of editor-set colors.
   ========================================================================== */
.single-post .wp-block-code,
.single-post pre.wp-block-preformatted {
	background-color: var(--wp--preset--color--contrast) !important;
	color: #e6e6e6 !important;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 5px;
}

.single-post .wp-block-code code {
	color: inherit !important;
	background: transparent !important;
}

/* === END OF STYLESHEET === */

/* ── Consistent footer spacing across all pages ── */
/* Zero bottom spacing on the element immediately before footer.
   Works for all templates (file-based and DB-stored), with or without <main>. */
.wp-site-blocks > *:has(+ footer.wp-block-template-part) {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* Single source of truth for content-to-footer gap */
footer.wp-block-template-part {
    margin-top: var(--wp--preset--spacing--large);
}
/* ── Emichi vs Others comparison section alignment ── */
/* Left column: base bg + border. Right column: contrast bg. */
/* Both first elements (logo figure / h4 heading) must share same height */
.wp-block-column.has-base-background-color[style*="border-width:1px"] > .wp-block-image,
.wp-block-column.has-contrast-background-color > .wp-block-heading:first-child {
    min-height: 65px;
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

/* Remove default figure margin inside comparison left column */
.wp-block-column.has-base-background-color[style*="border-width:1px"] > .wp-block-image {
    margin-bottom: 0;
}
.wp-block-column.has-base-background-color[style*="border-width:1px"] > .wp-block-image img {
    margin-bottom: 0;
}

/* Remove default heading margin inside comparison right column */
.wp-block-column.has-contrast-background-color > .wp-block-heading:first-child {
    margin-top: 0;
    margin-bottom: 0;
}