/*
Theme Name: Feito de Encanto
Author: Feito de Encanto
Description: Tema do atelier Feito de Encanto com serviços WooCommerce e Contact Form 7.
Version: 1.1.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: feito-de-encanto
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
:root {
    --paper: #faf8f2;
    --paper-dark: #f2eee5;
    --ink: #484139;
    --ink-soft: #71695f;
    --accent: #80684d;
    --line: rgba(72, 65, 57, 0.16);
    --display: "Cormorant Garamond", Georgia, serif;
    --body: "DM Sans", Arial, sans-serif;
    --gutter: clamp(1.25rem, 5vw, 5rem);
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 14px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

h1, h2, h3, p { margin-top: 0; }

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.02;
}

h2 {
    margin-bottom: 1.45rem;
    font-size: clamp(2.5rem, 5vw, 4.15rem);
    letter-spacing: -0.035em;
}

h2 em, h1 em {
    color: var(--accent);
    font-weight: 400;
}

.site-header {
    position: relative;
    z-index: 10;
    height: 76px;
    padding: 0 var(--gutter);
    background: var(--paper);
}

.header-inner {
    height: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: block;
    height: 70px;
    overflow: hidden;
}

.brand img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.footer-brand {
    width: 190px;
    height: 91px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.7vw, 2.5rem);
    font-size: 0.72rem;
}

.main-nav a:not(.nav-cta), .site-footer nav a {
    transition: color 180ms ease;
}

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

.nav-cta {
    padding: 0.68rem 1.05rem;
    border: 1px solid var(--line);
    transition: background 180ms ease, color 180ms ease;
}

.nav-cta:hover { background: var(--ink); color: var(--paper); }

.menu-toggle {
    display: none;
    padding: 0.5rem;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 20px;
    height: 1px;
    margin: 5px 0;
    background: var(--ink);
    transition: transform 180ms ease;
}

.hero {
    position: relative;
    min-height: min(720px, calc(100svh - 76px));
    overflow: hidden;
    display: flex;
    align-items: center;
    color: #fffdf8;
    background: #8b7964;
}

.hero-image, .hero-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-image { object-fit: cover; object-position: center 52%; }

.hero-shade {
    background: linear-gradient(90deg, rgba(32, 28, 24, 0.62), rgba(32, 28, 24, 0.26) 58%, rgba(32, 28, 24, 0.12)),
                linear-gradient(0deg, rgba(32, 28, 24, 0.24), transparent 40%);
}

.hero-content {
    position: relative;
    z-index: 1;
    width: min(570px, 52%);
    margin: 0 0 2.8rem max(var(--gutter), calc((100vw - 1240px) / 2));
}

.eyebrow {
    margin-bottom: 1.15rem;
    color: var(--accent);
    font-size: 0.61rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1.6;
    text-transform: uppercase;
}

.hero .eyebrow { color: rgba(255, 253, 248, 0.77); }

.hero h1 {
    margin: 0 0 1.3rem;
    font-size: clamp(4rem, 8vw, 7.7rem);
    letter-spacing: -0.04em;
    line-height: 0.79;
}

.hero h1 em { color: #f1dfc9; }

.hero-lead {
    margin-bottom: 0.75rem;
    font-family: var(--display);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    line-height: 1.1;
}

.hero-description {
    max-width: 410px;
    margin-bottom: 1.65rem;
    color: rgba(255, 253, 248, 0.83);
    font-size: 0.84rem;
    line-height: 1.8;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; }

.button {
    display: inline-flex;
    min-height: 43px;
    padding: 0.7rem 1.1rem;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.button-light { background: var(--paper); color: var(--ink); }
.button-light:hover { background: #fff; }
.button-ghost { border-color: rgba(255, 253, 248, 0.58); color: #fffdf8; }
.button-ghost:hover { background: rgba(255, 253, 248, 0.12); }
.button-dark { background: var(--ink); color: var(--paper); }
.button-dark:hover { background: var(--accent); }

.hero-caption {
    position: absolute;
    right: var(--gutter);
    bottom: 0.5rem;
    z-index: 1;
    color: rgba(255, 253, 248, 0.76);
    font-size: 0.57rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.page-section { padding: clamp(4.5rem, 8vw, 7.5rem) var(--gutter); }

.concept {
    padding-top: clamp(4rem, 7vw, 6.5rem);
    padding-bottom: clamp(4rem, 7vw, 6.5rem);
    text-align: center;
}

.narrow-copy { max-width: 720px; margin: 0 auto; }

.concept h2 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }

.concept .narrow-copy > p:not(.eyebrow) {
    max-width: 620px;
    margin: 0 auto 1.2rem;
    color: var(--ink-soft);
    font-size: 0.83rem;
}

.concept-signoff {
    padding-top: 0.5rem;
    font-family: var(--display);
    font-size: 1.15rem !important;
    line-height: 1.4;
}

.creations { background: var(--paper-dark); }

.section-heading {
    max-width: 800px;
    margin: 0 auto 2.7rem;
    text-align: center;
}

.section-heading h2 { margin-bottom: 0.8rem; }

.section-heading > p:last-child {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
}

.creation-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2.3vw, 2rem);
    max-width: 1240px;
    margin: 0 auto;
}

.creation-card { min-width: 0; }

.creation-card img {
    height: clamp(230px, 27vw, 365px);
    margin-bottom: 1rem;
    object-fit: cover;
    transition: filter 220ms ease, transform 350ms ease;
}

.creation-card:nth-child(3) img { object-position: 75% center; }
.creation-card:hover img { filter: brightness(0.94); transform: translateY(-3px); }

.creation-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.creation-title h3 {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1;
}

.creation-title span {
    color: var(--accent);
    font-size: 0.61rem;
    letter-spacing: 0.1em;
}

.creation-card > p {
    margin: 0.55rem 0 0;
    color: var(--ink-soft);
    font-size: 0.7rem;
    line-height: 1.7;
}

.split {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 0.86fr;
    gap: clamp(3rem, 8vw, 8.5rem);
    align-items: center;
}

.split-image { position: relative; }

.split-image img {
    max-height: 720px;
    aspect-ratio: 0.88;
    object-fit: cover;
}

.painting .split-image img { object-position: center 35%; }
.gift { background: var(--paper-dark); }
.gift .split-image img { aspect-ratio: 1.18; }
.about { background: var(--paper-dark); }
.about .split-image img { aspect-ratio: 0.94; }

.image-note {
    position: absolute;
    right: -0.75rem;
    bottom: 1.2rem;
    padding: 0.55rem 0.8rem;
    background: var(--paper);
    color: var(--ink-soft);
    font-family: var(--display);
    font-size: 0.94rem;
    font-style: italic;
}

.split-copy { max-width: 510px; }
.split-copy h2 { margin-bottom: 1.5rem; }

.split-copy > p:not(.eyebrow):not(.detail-lines):not(.signature) {
    margin-bottom: 1rem;
    color: var(--ink-soft);
    font-size: 0.8rem;
}

.detail-lines {
    margin: 1.5rem 0;
    color: var(--ink-soft);
    font-size: 0.66rem;
    line-height: 2;
}

.detail-lines span { margin: 0 0.45rem; color: var(--accent); }

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.35rem;
    font-size: 0.7rem;
    transition: color 180ms ease, border-color 180ms ease;
}

.text-link:hover { color: var(--accent); border-color: var(--accent); }

.idea {
    padding-top: clamp(4rem, 7vw, 6rem);
    padding-bottom: clamp(4rem, 7vw, 6rem);
    text-align: center;
}

.idea h2 { margin-bottom: 1.1rem; }
.idea > p:not(.eyebrow) {
    max-width: 510px;
    margin: 0 auto 1.5rem;
    color: var(--ink-soft);
    font-size: 0.78rem;
}

.gallery { padding-top: 1rem; }

.gallery-heading {
    max-width: 1240px;
    margin: 0 auto 1.8rem;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
}

.gallery-heading .eyebrow { margin-bottom: 0.4rem; }
.gallery-heading h2 { margin: 0; font-size: clamp(2.4rem, 4vw, 3.7rem); }
.gallery-grid {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.3fr 0.8fr;
    gap: 0.85rem;
    align-items: center;
}

.gallery-grid img {
    height: clamp(220px, 30vw, 420px);
    object-fit: cover;
}

.gallery-grid img:nth-child(2) { height: clamp(270px, 36vw, 490px); }
.gallery-grid img:nth-child(3) { object-position: center; }
.gallery-caption {
    margin: 1rem 0 0;
    color: var(--ink-soft);
    font-size: 0.6rem;
    text-align: center;
}

.about .signature {
    margin: 1.4rem 0 0.7rem;
    color: var(--accent);
    font-family: var(--display);
    font-size: 2rem;
    font-style: italic;
}

.process { padding-top: clamp(4rem, 7vw, 6.5rem); }
.process .section-heading { margin-bottom: 2.4rem; }

.process-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25rem;
}

.process-card {
    padding: 1.4rem 0 0;
    border-top: 1px solid var(--line);
}

.process-card > span {
    display: block;
    margin-bottom: 1rem;
    color: var(--accent);
    font-family: var(--display);
    font-size: 1.25rem;
}

.process-card h3 {
    margin-bottom: 0.6rem;
    font-size: 1.75rem;
}

.process-card p {
    max-width: 310px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.73rem;
}

.contact {
    background: var(--paper-dark);
    display: grid;
    grid-template-columns: 0.78fr 1fr;
    gap: clamp(2.5rem, 8vw, 8rem);
    align-items: start;
}

.contact-intro { position: sticky; top: 2rem; }
.contact-intro h2 { margin-bottom: 1rem; }
.contact-intro > p:last-child { max-width: 380px; color: var(--ink-soft); font-size: 0.8rem; }

.enquiry-form {
    width: 100%;
    max-width: 650px;
    justify-self: end;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.field {
    display: block;
    margin-bottom: 1.1rem;
    color: var(--ink);
    font-size: 0.69rem;
    font-weight: 500;
}

.field input, .field select, .field textarea {
    display: block;
    width: 100%;
    min-height: 43px;
    margin-top: 0.42rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0;
    outline: 0;
    background: rgba(250, 248, 242, 0.76);
    color: var(--ink);
    font-size: 0.72rem;
}

.field textarea { min-height: 112px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: #a49b8e; }

.interest-options {
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.interest-options legend {
    margin-bottom: 0.65rem;
    font-size: 0.69rem;
    font-weight: 500;
}

.interest-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.interest-grid label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 37px;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.63rem;
    cursor: pointer;
}

.interest-grid input { accent-color: var(--accent); }

.upload-field {
    display: block;
    margin: 0.4rem 0 1.1rem;
    padding: 0.75rem;
    border: 1px dashed rgba(72, 65, 57, 0.3);
    color: var(--ink);
    font-size: 0.68rem;
    cursor: pointer;
}

.upload-field input {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    font-size: 0.66rem;
}

.upload-field small {
    display: block;
    margin-top: 0.4rem;
    color: var(--ink-soft);
    font-size: 0.59rem;
    line-height: 1.6;
}

.honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.enquiry-form > .button { min-width: 170px; }
.form-status { margin: 0.8rem 0 0; color: var(--accent); font-size: 0.7rem; }
.form-note { margin: 1.3rem 0 0; color: var(--ink-soft); font-size: 0.66rem; }

.site-footer {
    padding: 3.4rem var(--gutter) 1.5rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 1.5rem;
}

.site-footer .footer-brand { grid-column: 1; }

.site-footer nav {
    display: flex;
    gap: 1.5rem;
    font-size: 0.67rem;
}

.site-footer > p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.62rem;
    text-align: right;
}

@media (max-width: 900px) {
    .creation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .creation-card img { height: clamp(260px, 43vw, 390px); }
    .split { gap: 2.5rem; }
    .interest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .site-header { height: 64px; }

    .menu-toggle { display: block; z-index: 2; }

    .main-nav {
        position: absolute;
        top: 64px;
        right: 0;
        left: 0;
        display: none;
        padding: 1rem var(--gutter) 1.3rem;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        background: var(--paper);
        box-shadow: 0 14px 20px rgba(40, 35, 30, 0.08);
    }

    .main-nav.open { display: flex; }
    .main-nav > a:not(.nav-cta) { padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
    .nav-cta { margin-top: 0.8rem; text-align: center; }

    .hero {
        min-height: min(700px, calc(100svh - 64px));
        align-items: flex-end;
    }

    .hero-image { object-position: 57% center; }
    .hero-shade { background: linear-gradient(0deg, rgba(32, 28, 24, 0.78), rgba(32, 28, 24, 0.17) 95%); }
    .hero-content { width: auto; margin: 0 var(--gutter) 4.5rem; }
    .hero h1 { font-size: clamp(4rem, 18vw, 6rem); }
    .hero-description { max-width: 350px; }
    .hero-caption { right: var(--gutter); bottom: 0.2rem; font-size: 0.48rem; }
    .creation-grid { gap: 1.35rem 0.85rem; }
    .creation-card img { height: clamp(190px, 57vw, 310px); margin-bottom: 0.7rem; }
    .creation-title h3 { font-size: 1.45rem; }
    .creation-card > p { font-size: 0.65rem; }
    .split { grid-template-columns: 1fr; gap: 2.2rem; }
    .split-image img { max-height: none; aspect-ratio: 0.95; }
    .gift .split-copy { order: 2; }
    .gift .split-image { order: 1; }
    .split-copy { max-width: 580px; }
    .gallery { padding-top: 3rem; }
    .gallery-heading { align-items: start; flex-direction: column; gap: 0.8rem; }
    .gallery-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .gallery-grid img { height: 220px; }
    .gallery-grid img:nth-child(2) { height: 270px; }
    .gallery-grid img:nth-child(3) { height: 220px; }
    .process-grid { grid-template-columns: 1fr; gap: 1.4rem; }
    .process-card { padding-top: 1rem; }
    .contact { grid-template-columns: 1fr; gap: 2rem; }
    .contact-intro { position: static; }
    .enquiry-form { justify-self: stretch; }
    .site-footer { grid-template-columns: 1fr 1fr; }
    .site-footer .footer-brand { width: 154px; height: 74px; }
    .site-footer nav { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; }
    .site-footer > p { grid-column: 1 / -1; grid-row: 3; text-align: left; }
}

@media (max-width: 420px) {
    .creation-grid { grid-template-columns: 1fr 1fr; }
    .creation-card img { height: 185px; }
    .creation-title { align-items: start; }
    .creation-title h3 { font-size: 1.3rem; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .interest-grid { grid-template-columns: 1fr 1fr; }
    .gallery-grid img { height: 170px; }
    .gallery-grid img:nth-child(2) { height: 215px; }
    .gallery-grid img:nth-child(3) { height: 170px; }
    .site-footer nav { gap: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* WordPress, Contact Form 7 and WooCommerce */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip-link:focus { position: fixed; top: 1rem; left: 1rem; z-index: 10000; width: auto; height: auto; clip-path: none; padding: 1rem; background: var(--paper); }
.admin-bar .site-header { top: 32px; }
.content-page, .shop-page { min-height: 60vh; padding-top: 5rem; padding-bottom: 5rem; }
.content-page h1, .shop-page h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
.content-page a:not(.button), .woocommerce a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.service-price { margin-bottom: .8rem; font-weight: 600; }
.creation-card .text-link { font-size: .8rem; }
.creation-card .woocommerce-Price-amount { white-space: nowrap; }
.wpcf7 { width: 100%; }
.wpcf7-form .field { display: block; }
.wpcf7-form-control-wrap { display: block; width: 100%; }
.wpcf7-form input:not([type=submit]):not([type=checkbox]):not([type=radio]), .wpcf7-form select, .wpcf7-form textarea { width: 100%; }
.wpcf7-list-item { margin: 0 1rem .5rem 0; }
.wpcf7-not-valid-tip { font-size: .8rem; }
.wpcf7-form .wpcf7-response-output { margin: 1rem 0; }
.woocommerce ul.products li.product h2 { font-size: 1.6rem; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--accent); }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.wc-block-components-button:not(.is-link) { background: var(--ink); color: var(--paper); border-radius: 0; padding: 1em 1.5em; font-weight: 500; }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce button.button.alt:hover { background: var(--accent); color: white; }
.woocommerce input.input-text, .woocommerce textarea, .woocommerce select { padding: .7rem; border: 1px solid var(--line); background: white; max-width: 100%; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: var(--paper-dark); border-color: var(--line); }
.woocommerce table.shop_table { border-color: var(--line); }
.woocommerce img { height: auto; }
.woocommerce .quantity input.qty { width: 5em; }
.woocommerce-message, .woocommerce-info { border-top-color: var(--accent); background: var(--paper-dark); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { position: absolute; } .shop-page { overflow-wrap: anywhere; } }