/*
Theme Name: Maison Clouet
Theme URI: https://maisonclouet.fr
Author: Maison Clouet
Description: A warm, editorial WordPress block theme for a curated objects and scents concept store in L'Isle-sur-la-Sorgue, Provence. Pairs Instrument Serif display type with Libre Franklin body text and DM Mono accents for a gallery-catalogue aesthetic rooted in cream, encre-blue, and terracotta.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maison-clouet
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, one-column, wide-blocks, translation-ready
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
*/

/* ================================================================
   0. FONT IMPORTS
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Libre+Franklin:ital,wght@0,300;0,400;0,500;0,600;1,400&family=DM+Mono:wght@400;500&display=swap');

/* ================================================================
   1. BASE RESETS & GLOBAL POLISH
   ================================================================ */

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

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

::selection {
    background: var(--wp--preset--color--encre);
    color: var(--wp--preset--color--cream);
}

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

/* ================================================================
   2. TYPOGRAPHY POLISH
   ================================================================ */

/* Body text — slightly warmer tracking for Libre Franklin */
.wp-site-blocks {
    letter-spacing: -0.005em;
}

/* Heading ligature / kerning finesse */
h1, h2, h3, h4,
.wp-block-post-title,
.wp-block-site-title {
    font-feature-settings: "kern" 1, "liga" 1;
    text-wrap: balance;
}

/* Italic display heads: the serif's calligraphic stress shines here */
h1 em,
h1 i,
.wp-block-post-title em {
    font-style: italic;
    font-weight: 400;
}

/* Monospace label style used in meta, prices, nav — tighten a touch */
.wp-block-post-date,
.wp-block-post-terms,
figcaption,
.wp-block-site-tagline {
    font-feature-settings: "tnum" 1;
}

/* Paragraph max-width for comfortable reading */
.wp-block-post-content > p,
.entry-content > p {
    max-width: 65ch;
}

/* Drop cap treatment for journal posts */
.has-drop-cap:not(:focus)::first-letter {
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 400;
    font-style: italic;
    color: var(--wp--preset--color--encre);
    margin-right: 0.05em;
}

/* ================================================================
   3. LINK STYLES
   ================================================================ */

/* Default links — understated underline, terracotta on hover */
a:not(.wp-block-button__link):not(.wp-block-navigation-item__content) {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    text-decoration-color: var(--wp--preset--color--rule);
    transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):hover {
    text-decoration-color: var(--wp--preset--color--terracotta);
}

/* Navigation link hover transition */
.wp-block-navigation-item__content {
    transition: color 0.25s ease;
}

/* Nav item dividers — mimic the hero reference's pipe separators */
.wp-block-navigation .wp-block-navigation-item + .wp-block-navigation-item {
    position: relative;
}

@media (min-width: 861px) {
    .wp-block-navigation .wp-block-page-list > .wp-block-pages-list__item + .wp-block-pages-list__item::before,
    .wp-block-navigation .wp-block-navigation-item + .wp-block-navigation-item::before {
        content: "";
        display: inline-block;
        width: 1px;
        height: 12px;
        background: var(--wp--preset--color--encre);
        opacity: 0.25;
        margin-right: var(--wp--preset--spacing--30);
        vertical-align: middle;
    }
}

/* ================================================================
   4. BUTTON STYLES
   ================================================================ */

/* Base button polish */
.wp-block-button__link {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.15s ease;
    line-height: 1.35;
    cursor: pointer;
}

.wp-block-button__link:hover {
    transform: translateY(-1px);
}

.wp-block-button__link:active {
    transform: translateY(0);
}

/* Outline button variant — terracotta border + text on cream */
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--wp--preset--color--terracotta);
    border: 1.5px solid var(--wp--preset--color--terracotta);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--wp--preset--color--terracotta);
    color: var(--wp--preset--color--cream);
    border-color: var(--wp--preset--color--terracotta);
}

/* ================================================================
   5. IMAGE TREATMENTS
   ================================================================ */

/* Object / editorial images: subtle framed treatment */
.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-cover__image-background {
    border-radius: 0;
}

/* Framed image style — matches the hero reference's encre border + padding */
.wp-block-image.is-style-framed img,
.is-style-framed .wp-block-post-featured-image img {
    border: 1px solid var(--wp--preset--color--encre);
    padding: 0.5rem;
    background: var(--wp--preset--color--cream);
}

/* Gallery gutters */
.wp-block-gallery {
    gap: var(--wp--preset--spacing--30) !important;
}

.wp-block-gallery .wp-block-image img {
    object-fit: cover;
}

/* Cover block text safety */
.wp-block-cover {
    overflow: hidden;
}

.wp-block-cover .wp-block-cover__inner-container {
    position: relative;
    z-index: 1;
}

/* ================================================================
   6. CARD & SURFACE TREATMENTS
   ================================================================ */

/* Parchment card surfaces */
.has-parchment-background-color {
    border: 1px solid var(--wp--preset--color--rule);
}

/* Object card hover lift */
.objet-card,
.wp-block-post-template .wp-block-post {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.objet-card:hover,
.wp-block-post-template .wp-block-post:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(26, 39, 68, 0.06);
}

/* Object card image container */
.objet-card .wp-block-post-featured-image {
    overflow: hidden;
}

.objet-card .wp-block-post-featured-image img {
    transition: transform 0.5s ease;
}

.objet-card:hover .wp-block-post-featured-image img {
    transform: scale(1.03);
}

/* ================================================================
   7. SEPARATOR / RULE TREATMENTS
   ================================================================ */

.wp-block-separator {
    opacity: 1;
    border: none;
    border-top: 1px solid var(--wp--preset--color--rule);
}

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

.wp-block-separator.is-style-dots::before {
    color: var(--wp--preset--color--terracotta);
}

/* ================================================================
   8. QUOTE / PULLQUOTE POLISH
   ================================================================ */

.wp-block-quote cite,
.wp-block-pullquote cite {
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--x-small);
    font-style: normal;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted);
    display: block;
    margin-top: var(--wp--preset--spacing--20);
}

/* ================================================================
   9. FORM / SEARCH / INPUT POLISH
   ================================================================ */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select {
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--charcoal);
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--rule);
    border-radius: 0;
    padding: 0.65rem 0.85rem;
    transition: border-color 0.25s ease;
    width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--wp--preset--color--encre);
}

/* Search block polish */
.wp-block-search__button {
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--wp--preset--color--terracotta);
    color: var(--wp--preset--color--cream);
    border: none;
    border-radius: 0;
    padding: 0.65rem 1.25rem;
    cursor: pointer;
    transition: background-color 0.25s ease;
}

.wp-block-search__button:hover {
    background: var(--wp--preset--color--terracotta-dark);
}

/* ================================================================
   10. HEADER POLISH
   ================================================================ */

/* Site header border baseline */
.site-header {
    border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* Wordmark tagline opacity match from reference design */
.wp-block-site-tagline {
    opacity: 0.7;
}

/* ================================================================
   11. FOOTER POLISH
   ================================================================ */

.site-footer {
    border-top: 1px solid var(--wp--preset--color--rule);
}

.site-footer a {
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--wp--preset--color--terracotta);
}

/* ================================================================
   12. MOBILE HAMBURGER OVERLAY
   ================================================================ */

.wp-block-navigation__responsive-container.is-menu-open {
    padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
    background-color: var(--wp--preset--color--cream);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    gap: var(--wp--preset--spacing--40);
    align-items: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: var(--wp--preset--font-size--large);
    color: var(--wp--preset--color--encre);
}

/* Close button styling */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--encre);
}

/* Open button styling */
.wp-block-navigation__responsive-container-open {
    color: var(--wp--preset--color--encre);
}

/* ================================================================
   13. HERO SECTION SPECIFICS
   ================================================================ */

/* Hero image framed treatment */
.hero-image-frame {
    position: relative;
    border: 1px solid var(--wp--preset--color--encre);
    padding: 0.5rem;
    background: var(--wp--preset--color--cream);
}

.hero-image-frame img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Hero image label badge */
.hero-image-label {
    position: absolute;
    bottom: -0.625rem;
    right: 1.5rem;
    background: var(--wp--preset--color--cream);
    padding: 0 0.5rem;
    font-family: var(--wp--preset--font-family--mono);
    font-size: 0.625rem;
    color: var(--wp--preset--color--encre);
    opacity: 0.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Terracotta accent dot */
.accent-dot {
    color: var(--wp--preset--color--terracotta);
}

/* Hero CTA outline variant */
.hero-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.75rem;
    border: 1.5px solid var(--wp--preset--color--terracotta);
    border-radius: 100px;
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--terracotta);
    text-decoration: none;
    background: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.hero-cta:hover {
    background: var(--wp--preset--color--terracotta);
    color: var(--wp--preset--color--cream);
}

/* ================================================================
   14. PRICE / METADATA LABEL STYLES
   ================================================================ */

/* Price tags use mono for that gallery-catalogue vibe */
.objet-price,
.price-label {
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--encre);
    font-feature-settings: "tnum" 1;
}

/* Condition / dimension metadata */
.objet-meta,
.meta-label {
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--x-small);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted);
}

/* Category filter pills */
.category-filter {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--wp--preset--color--rule);
    border-radius: 100px;
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--encre);
    background: transparent;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    cursor: pointer;
}

.category-filter:hover,
.category-filter.is-active {
    background: var(--wp--preset--color--encre);
    color: var(--wp--preset--color--cream);
    border-color: var(--wp--preset--color--encre);
}

/* ================================================================
   15. NEWSLETTER SIGNUP SECTION
   ================================================================ */

.newsletter-signup input[type="email"] {
    border: 1px solid var(--wp--preset--color--rule);
    background: var(--wp--preset--color--white);
    padding: 0.75rem 1rem;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--small);
    flex: 1;
    min-width: 0;
}

.newsletter-signup .wp-block-button__link {
    white-space: nowrap;
}

/* ================================================================
   16. JOURNAL / BLOG POST STYLES
   ================================================================ */

/* Journal entries in grid: magazine column feel */
.journal-grid .wp-block-post-template {
    gap: var(--wp--preset--spacing--50);
}

/* Journal single: generous prose spacing */
.journal-single .wp-block-post-content > * + * {
    margin-top: var(--wp--preset--spacing--40);
}

.journal-single .wp-block-post-content > .wp-block-image {
    margin-top: var(--wp--preset--spacing--50);
    margin-bottom: var(--wp--preset--spacing--50);
}

/* ================================================================
   17. SCENT PAGE ACCENTS
   ================================================================ */

/* A subtle terracotta rule for scent product cards */
.scent-card {
    border-top: 2px solid var(--wp--preset--color--terracotta);
}

/* ================================================================
   18. TABLE STYLES
   ================================================================ */

.wp-block-table table {
    border-collapse: collapse;
    width: 100%;
}

.wp-block-table td,
.wp-block-table th {
    border-bottom: 1px solid var(--wp--preset--color--rule);
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
    text-align: left;
}

.wp-block-table th {
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--encre);
}

/* ================================================================
   19. DETAILS / ACCORDION BLOCK
   ================================================================ */

.wp-block-details {
    border-bottom: 1px solid var(--wp--preset--color--rule);
    padding: var(--wp--preset--spacing--30) 0;
}

.wp-block-details summary {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--large);
    color: var(--wp--preset--color--encre);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wp-block-details summary::-webkit-details-marker {
    display: none;
}

.wp-block-details summary::after {
    content: "+";
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--medium);
    color: var(--wp--preset--color--terracotta);
    flex-shrink: 0;
    margin-left: var(--wp--preset--spacing--30);
    transition: transform 0.25s ease;
}

.wp-block-details[open] summary::after {
    transform: rotate(45deg);
}

/* ================================================================
   20. RESPONSIVE ADJUSTMENTS
   ================================================================ */

@media (max-width: 860px) {
    /* Tighten heading scale on mobile */
    h1 {
        word-break: break-word;
        hyphens: auto;
    }

    /* Full-width images on mobile */
    .wp-block-image.alignwide,
    .wp-block-image.alignfull {
        margin-left: calc(-1 * clamp(1.5rem, 5vw, 4rem));
        margin-right: calc(-1 * clamp(1.5rem, 5vw, 4rem));
        max-width: none;
        width: auto;
    }

    /* Stack columns sooner on narrow screens */
    .wp-block-columns {
        flex-wrap: wrap;
    }

    .wp-block-columns > .wp-block-column {
        flex-basis: 100% !important;
    }

    /* Hero image frame: no negative margin on mobile */
    .hero-image-frame {
        margin-right: 0;
    }
}

@media (max-width: 600px) {
    /* Even tighter spacing on very small screens */
    .wp-block-gallery {
        gap: var(--wp--preset--spacing--20) !important;
    }

    /* Object cards: single column */
    .wp-block-post-template.is-layout-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ================================================================
   21. PRINT STYLES
   ================================================================ */

@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }

    .wp-block-navigation,
    .site-header,
    .site-footer,
    .wp-block-button,
    .scroll-progress {
        display: none !important;
    }

    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
}

/* ---------- Loop layout utilities ---------- */
/* These classes are wired to the wp:query blocks emitted by content/pages and
   templates. Do not rename. Tune colours and spacing to theme.json tokens. */

/* Horizontal scrollable rail */
.wp-block-query.is-style-loop-rail .wp-block-post-template {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: var(--wp--preset--spacing--20);
}
.wp-block-query.is-style-loop-rail .wp-block-post-template > * {
    flex: 0 0 320px;
    scroll-snap-align: start;
}

/* Compact list with hairline row dividers */
.wp-block-query.is-style-loop-list .wp-block-post-template > * {
    border-bottom: 1px solid var(--wp--preset--color--rule);
    padding-block: var(--wp--preset--spacing--30);
}
.wp-block-query.is-style-loop-list .wp-block-post-template > *:last-child {
    border-bottom: 0;
}

/* Zigzag — flip the columns inside every even entry */
.wp-block-query.is-style-loop-zigzag .wp-block-post-template > *:nth-child(even) .wp-block-columns {
    flex-direction: row-reverse;
}

/* Timeline — vertical line with node markers per entry */
.wp-block-query.is-style-loop-timeline .wp-block-post-template {
    position: relative;
    padding-inline-start: 2.5rem;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0.5rem;
    width: 2px;
    background: var(--wp--preset--color--encre);
    opacity: 0.15;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template > * {
    position: relative;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template > *::before {
    content: '';
    position: absolute;
    inset-inline-start: -2.25rem;
    inset-block-start: 0.6rem;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--wp--preset--color--encre);
    border-radius: 50%;
    background: var(--wp--preset--color--cream);
}

/* Magazine — first child spans 2 columns of the grid */
.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
    grid-column: span 2;
}
@media (max-width: 600px) {
    .wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
        grid-column: auto;
    }
}