/*
Theme Name: Emichi
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
*/

/* Global Elements
---------------------------------------- */

/* Add subtle hover effect to buttons */
.wp-block-button__link:hover,
.wp-element-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

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

/* Header navigation styling */
.wp-block-navigation {
    font-weight: var(--wp--custom--font-weight--medium);
}

/* Custom breakpoint for navigation hamburger menu */

/* Revert core styles at default breakpoint */
@media (min-width: 600px) {
	/* Keep hiding the expanded menu */
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* Keep showing the button to open the menu */
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Apply core styles at custom breakpoint */
@media (min-width: 728px) {
	/* Show the expanded menu */
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: block;
	}

	/* Hide the button to open the menu */
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

/* Hover navigation item */
.wp-block-navigation .wp-block-navigation-link:hover {
    color: var(--wp--preset--color--light);
	text-decoration: underline;
}

/* Active navigation item */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
    color: var(--wp--preset--color--light);
	text-decoration: underline;
}

/* Navigation dropdown styling */
.wp-block-navigation__submenu-container {
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 10px; /* Default padding, removed !important */
}

/* Apply specific background/color when parent navigation does not have its own 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); /* Assuming 1px border for clarity */
    color: var(--wp--preset--color--base);
}

/* Style for links within any submenu */
.wp-block-navigation :where(.wp-block-navigation__submenu-container) a {
    padding: 2px 10px;
}

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

/* Code Block Styling
---------------------------------------- */

/* Enhanced code block styling */
.wp-block-code {
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    border-radius: 5px;
    padding: 20px;
    font-family: var(--wp--preset--font-family--mono); /* Ensuring this is defined in theme.json or styles */
    font-size: var(--wp--preset--font-size--small);
    overflow-x: auto;
}

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

/* Syntax highlighting colors */
/* These are generic, consider a JS library for more robust highlighting if needed */
.wp-block-code .token.comment,
.wp-block-code .token.prolog,
.wp-block-code .token.doctype,
.wp-block-code .token.cdata {
    color: #8292a2; /* Light grey for comments */
}

.wp-block-code .token.punctuation {
    color: #f8f8f2; /* Default text color (light) on dark background */
}

.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; /* Reddish for properties, tags */
}

.wp-block-code .token.boolean,
.wp-block-code .token.number {
    color: #bd93f9; /* Purple for booleans, numbers */
}

.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; /* Lime green for strings, selectors */
}

/* Operator, keyword, function might need specific colors if desired */
.wp-block-code .token.operator {
    color: #ff79c6; /* Pink for operators */
}

.wp-block-code .token.keyword {
    color: #ff79c6; /* Pink for keywords */
}

.wp-block-code .token.function {
    color: #50fa7b; /* Green for functions */
}

.wp-block-code .token.class-name {
    color: #8be9fd; /* Cyan for class names */
}

/* Form Input Styling Enhancements
---------------------------------------- */
/* Assuming these are for general input fields, not specific blocks unless further targeted */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea {
    border-color: var(--wp--preset--color--neutral); /* Softer border */
}

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 var(--wp--preset--color--primary-transparent-30, rgba(224, 254, 86, 0.3)); /* Define primary-transparent-30 in theme.json or use rgba directly */
    outline: none;
}

/* Emichi Author Box - Styles consolidated earlier */

.emichi-author-box { /* This rule exists in both files. Consolidate carefully. */
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    /* background-color, color likely from block settings (theme.json) */
    /* Add a general margin if needed, e.g., margin-bottom: var(--wp--custom--spacing--gap); */
}

@media (max-width: 600px) {
  /* Hide Get in Touch button on mobile */
  .site-header .wp-block-button__link {
    display: none !important;
  }

  .emichi-author-box {
    flex-direction: column;
    align-items: center;
    padding: 20px 10px;
    gap: 24px;
  }
  .emichi-author-details-flex-container {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .emichi-author-avatar-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .emichi-author-avatar-wrap img {
    width: auto;
    max-width: 220px;
    height: auto;
    display: block;
    margin: 0 auto;
  }
  .emichi-author-texts {
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
    width: 100%;
  }
  .emichi-author-texts > * {
    text-align: center !important;
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .emichi-author-linkedin-button {
    width: auto;
    display: flex;
    justify-content: center;
    margin: 8px auto 0 auto;
  }
}


.emichi-author-details-flex-container { /* New from custom.css */
    display: flex;
    align-items: flex-start; /* Or center, depending on desired alignment */
    gap: 20px; /* Space between avatar and text block */
}

.emichi-author-avatar-wrap img { /* New from custom.css */
    width: 150px; 
    height: 150px;
    object-fit: cover; /* Ensure image covers the area without distortion */
    /* border-radius: 0; Ensure no rounding if previously set elsewhere */
}

.emichi-author-texts { /* New from custom.css */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between name and bio */
}

.emichi-author-name-shortcode { /* New from custom.css - likely for styling output of [emichi_author_name] */
    font-weight: var(--wp--custom--font-weight--bold); /* Example: make name bold */
    font-size: var(--wp--preset--font-size--large); /* Example: larger font size */
    color: var(--wp--preset--color--base); /* Ensure it uses theme colors */
}

.emichi-author-bio-shortcode { /* New from custom.css - likely for styling output of [emichi_author_bio] */
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--base); /* Ensure it uses theme colors */
    opacity: 0.9;
}

/* Styles for the LinkedIn button generated by shortcode, from custom.css */
.emichi-author-box .wp-block-button.emichi-author-linkedin-button .wp-block-button__link {
    font-family: var(--wp--preset--font-family--mono);
    color: var(--wp--preset--color--base);
    background-color: transparent;
    border-color: var(--wp--preset--color--accent);
    font-size: var(--wp--preset--font-size--x-small); /* Make button text smaller */
    padding: 8px 15px; /* Adjust padding */
    /* Note: The PHP shortcode also adds an inline style for padding and border-width. */
    /* These CSS rules might be overridden by the inline style for padding if specificity is the same. */
}

/* Ensure the button block itself is vertically centered if parent's alignItems isn't enough */
.emichi-author-box .wp-block-button.emichi-author-linkedin-button {
     align-self: center; /* Helps with vertical centering in a flex container */
}

/* Defaults
---------------------------------------- */

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

html {
        scroll-behavior: smooth;
}

/* Combined and comprehensive transition rule */
a,
button,
input:focus,
input[type="button"],
input[type="submit"],
textarea:focus,
.wp-element-button,
.wp-block-button__link {
        transition: all 0.2s ease-in-out;
}

a,
a:focus,
a:hover,
a:not(.wp-element-button) {
        text-decoration-thickness: 1px;
}

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

mark {
        background: linear-gradient(90deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary) 100%);
        background-position: 0 85%;
        background-repeat: repeat-x;
        background-size: 100% 15%;
}

/* -- Forms -- */

input,
select,
textarea {
        background-color: var(--wp--preset--color--base);
        border: 1px solid var(--wp--preset--color--contrast);
        border-radius: 0;
        color: var(--wp--preset--color--contrast);
        font-family: var(--wp--preset--font-family--primary);
        font-size: var(--wp--preset--font-size--medium);
        font-weight: var(--wp--custom--font-weight--light);
        line-height: var(--wp--custom--line-height--body);
        padding: 10px 20px;
        width: 100%;
}

input:focus,
textarea:focus {
        background-color: var(--wp--preset--color--neutral);
        outline: none;
}

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

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
    appearance: none;
    -webkit-appearance: none;
        
}

::placeholder {
        color: var(--wp--preset--color--contrast);
        font-size: var(--wp--preset--font-size--small);
        opacity: 0.5;
}

/* Blocks
---------------------------------------- */

/* -- Code -- */

/* Note: .wp-block-code styling is extensively defined in merged custom.css.
   This rule below targets inline <code> elements NOT within .wp-block-code.
   It is likely still relevant and distinct.
*/
*:not(.wp-block-code) > code {
        background-color: var(--wp--preset--color--neutral);
        font-size: var(--wp--preset--font-size--small);
        padding: 5px 8px;
}

/* -- Navigation -- */
/* Note: .wp-block-navigation styling is present in merged custom.css.
   Review for redundancy or specific differences.
   The rules below target specific states and responsive containers.
*/
.wp-block-navigation__responsive-container.is-menu-open {
        padding: var(--wp--custom--spacing--gap);
}

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

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
        border: 1px solid currentColor;
        /* Match Get in Touch button height and style */
        padding: 10px 20px;
        min-height: 48px;
        border-radius: 5px;
        align-items: center;
        display: flex;
        font-size: 16px;
        box-sizing: border-box;
        transition: background 0.2s, border 0.2s;
}

/* Make hamburger icon larger for better balance */
.wp-block-navigation__responsive-container-open svg {
        width: 28px;
        height: 28px;
        display: block;
        margin: 0 auto;
}


.has-background .wp-block-navigation__responsive-container-open:focus,
.has-background .wp-block-navigation__responsive-container-open:hover {
        color: var(--wp--preset--color--base);
}

/* Utility
---------------------------------------- */

/* -- Box Shadow -- */
/* These .is-style- classes are for block style variations registered 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);
}

/* Media Queries (from original style.css)
---------------------------------------- */

@media only screen and (max-width: 782px) {

        /* -- Utility -- */

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

}

@media only screen and (max-width: 782px) {

        /* -- Columns -- */

        .is-style-columns-reverse { /* This is a registered block style */
                flex-direction: column-reverse;
        }

}

/* Blog Post Specific Heading Styles */
.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-family: 'Alata', sans-serif;
    font-size: 30px; /* Corresponds to x-large */
}

.single-post h3 {
    font-family: 'Alata', sans-serif;
    font-size: 24px; /* Corresponds to large */
    margin-top: 1.2em; /* from original */
    margin-bottom: 0.8em; /* from original */
}

.single-post h4 {
    font-family: 'Alata', sans-serif;
    font-size: 18px; /* Corresponds to medium */
}

.single-post h5 {
    font-family: 'Alata', sans-serif;
    font-size: 16px; /* Corresponds to small */
}

.single-post h6 {
    font-family: 'Alata', sans-serif;
    font-size: 14px; /* Corresponds to x-small */
}

/* Use medium weight for blog post paragraphs and lists */
.single-post .entry-content p,
.single-post .entry-content ul,
.single-post .entry-content ol,
.single-post .entry-content li {
    font-family: var(--wp--preset--font-family--primary); /* Roboto Slab */
    font-size: var(--wp--preset--font-size--medium);    
    font-weight: 400;
}

/* Additional spacing for readability in single posts */
/* h2 and h3 margins were combined above */

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

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

/* Ensure post author name link inherits font size from its parent */
.wp-block-post-author-name a {
    font-size: inherit;
}