/*
 * Custom CSS for monkeys3dprints.co.uk
 * Theme: Modern Tech with a Muted Aesthetic
 * Palette: Muted Coffee & Pastel Tones
 */

/* --- 1. Color & Font Variables (Easy to Edit!) --- */
:root {
    /* -- Muted Coffee Palette -- */
    --main-bg-color: #F5F1E9; /* Light Cream */
    --content-bg-color: #FFFFFF; /* Clean White for content areas */
    --text-color: #4A4A4A; /* Soft, dark gray for readability */
    --heading-color: #2E251F; /* Dark Espresso for main headings */
    --accent-color: #89A7B1; /* Muted Pastel Teal for links & buttons */
    --accent-hover-color: #73939D; /* A slightly darker Teal for hover */
    --border-color: #EAE6E1; /* Lighter, more subtle border color */

    /* -- Typography (Modern Sans-Serif) -- */
    --font-headings: 'Montserrat', 'Helvetica Neue', sans-serif;
    --font-body: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

/* --- 2. Import Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@400;700&display=swap');

/* --- 3. General Body & Typography --- */
body {
    background-color: var(--main-bg-color);
    font-family: var(--font-body);
    color: var(--text-color);
    line-height: 1.6;
}

.wc-block-mini-cart__icon, :root :where(.wp-block-site-title a:where(:not(.wp-element-button))) {
		color: var(--text-color);
}

.eb-advance-heading-wrapper.eb-advance-heading-xzkbu .eb-ah-separator.line {
		background-color: var(--main-bg-color) !important;
		border-radius:4px !important;
		color: var(--text-color) !important;
}

.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container {
		background-color: var(--main-bg-color);
		border-radius:4px;
		color: var(--text-color);
}

.wp-block-search__button.has-icon, .wp-block-search__input, .forminator-input, .forminator-textarea, .wc-block-components-product-image img, .qty {
		border-radius: 6px !important;
}

.woocommerce-page select {
		background-color: var(--main-bg-color);
		border-radius: 4px;
		height: 25px;
}

.woocommerce-page select option {
		border-radius:4px;
}

h1, h2, h3, h4, h5, h6, wp-block-post-title {
    font-family: var(--font-headings);
    color: var(--heading-color);
    font-weight: 600;
}

/* --- 4. Links & Buttons (Modernized) --- */
a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--accent-hover-color);
}

/* Clean, modern button style */
.wp-block-button__link,
button,
input[type="submit"] {
    background-color: var(--accent-color);
    color: #FFFFFF !important;
    font-family: var(--font-headings);
    font-weight: 600;
    padding: 12px 24px;
    border: none;
    border-radius: 4px; /* Slightly sharper corners */
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
    background-color: var(--accent-hover-color);
    cursor: pointer;
}

/* --- 5. Layout & Content Styling (Modernized) --- */

/* Use a very subtle shadow for a clean, layered look */
.entry-content, .widget, .post {
    background-color: var(--main-bg-color);
    padding: 2em;
    border-radius: 4px;
    /*border: 1px solid var(--border-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    margin-bottom: 2em;*/
}

/* Modern callout box style for quotes */
blockquote {
    background-color: var(--main-bg-color); /* Uses the main page background */
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-color);
    padding: 1em 1.5em;
    margin: 1.5em 0;
    border-radius: 4px;
}

/* Cleaner style for images */
.wp-block-gallery .wp-block-image img,
.wp-block-image img {
    border: 1px solid var(--border-color);
    padding: 4px; /* Creates a very thin "matting" effect */
    background-color: #fff;
    border-radius: 4px;
    max-width: 100%;
    height: auto;
}

/* Horizontal line separator */
hr, .wp-block-separator {
    border: 0;
    border-top: 1px solid var(--border-color);
    background-color: transparent;
}


/* --- 6. Site Header & Footer --- */
.site-header {
    background-color: #FFFFFF; /* A solid white header feels cleaner */
    border-bottom: 1px solid var(--border-color);
    padding: 1em 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Adds slight depth */
}

.site-footer {
    background-color: #2E251F; /* Dark Espresso footer */
    color: var(--main-bg-color); /* Light text on dark background */
    padding: 3em 1em;
    text-align: center;
}

.site-footer a {
    color: #FFFFFF;
    text-decoration: underline;
}

.site-footer a:hover {
    color: var(--accent-color);
}