/*=========================================================
=                          BASE                           =
=========================================================*/

html{
    background:var(--bg);
    overflow-x:hidden;
}

body{
    font-family:var(--font-body);
    font-size:var(--fs-md);
    font-weight:var(--fw-normal);
    line-height:var(--lh-body);

    color:var(--text);
    background:var(--bg);

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6{
    font-family:var(--font-title);
    font-weight:var(--fw-semibold);
    line-height:var(--lh-title);
    letter-spacing:.01em;
    color:var(--primary-dark);
}

strong{
    font-weight:var(--fw-bold);
}

section{
    padding:var(--space-5) 0;
}

/*=========================================================
=                    SECTION HEADERS                      =
=========================================================*/
/* Shared rhythm for every "__title" / "__description" pair.
   Kept here (rather than duplicated per-section) since the
   pattern repeats identically across all section files. */

[class$="__header"] [class$="__title"]{
    font-size:clamp(1.9rem,3.2vw,2.6rem);
    text-transform:uppercase;
    letter-spacing:.02em;
    color:var(--primary-dark);
}

[class$="__header"] [class$="__title"]::after{
    content:"";
    display:block;
    width:52px;
    height:3px;
    margin-top:var(--space-2);
    background:linear-gradient(90deg,var(--sunflower),var(--accent));
    border-radius:2px;
}

[class$="__description"]{
    color:var(--text-soft);
    font-size:1.05rem;
    max-width:640px;
}

[class$="__header"] [class$="__description"]{
    font-size:1.1rem;
}

/* Centered headers (the majority of sections) get a centered rule + copy */
.services__header,
.benefits__header,
.process__header,
.catalog__header,
.testimonials__header,
.faq__header,
.instagram__header,
.events__header,
.catalog-page__header,
.events-page__header,
.contact-page__header,
.gallery-page__header,
.events-types__header{
    text-align:center;
}

.services__header [class$="__title"]::after,
.benefits__header [class$="__title"]::after,
.process__header [class$="__title"]::after,
.catalog__header [class$="__title"]::after,
.testimonials__header [class$="__title"]::after,
.faq__header [class$="__title"]::after,
.instagram__header [class$="__title"]::after,
.events__header [class$="__title"]::after,
.catalog-page__header [class$="__title"]::after,
.events-page__header [class$="__title"]::after,
.contact-page__header [class$="__title"]::after,
.gallery-page__header [class$="__title"]::after,
.events-types__header [class$="__title"]::after{
    margin-inline:auto;
}

.services__header [class$="__description"],
.benefits__header [class$="__description"],
.process__header [class$="__description"],
.catalog__header [class$="__description"],
.testimonials__header [class$="__description"],
.faq__header [class$="__description"],
.instagram__header [class$="__description"],
.events__header [class$="__description"],
.catalog-page__header [class$="__description"],
.events-page__header [class$="__description"],
.contact-page__header [class$="__description"],
.gallery-page__header [class$="__description"],
.events-types__header [class$="__description"]{
    margin-inline:auto;
}

[class$="__description"]{
    margin-top:var(--space-1);
}

/*=========================================================
=                         BUTTONS                         =
=========================================================*/

.button,
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;

    padding:.9rem 1.9rem;
    border-radius:100px;

    font-family:var(--font-title);
    font-size:.85rem;
    font-weight:var(--fw-medium);
    text-transform:uppercase;
    letter-spacing:.08em;
    white-space:nowrap;

    transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}

.button--primary,
.btn{
    background:var(--accent);
    color:var(--text-invert);
    box-shadow:var(--shadow-sm);
}

.button--primary:hover,
.btn:hover{
    background:var(--accent-dark);
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}

.button--secondary{
    background:transparent;
    color:var(--text-invert);
    border:1.5px solid rgba(251,249,242,.55);
}

.button--secondary:hover{
    background:rgba(251,249,242,.12);
    border-color:var(--text-invert);
    transform:translateY(-2px);
}

/*=========================================================
=                     SECTION RHYTHM                      =
=========================================================*/
/* Gentle alternating background so long single-page flows (index)
   read as distinct rooms without hard borders. */

.about,
.benefits,
.testimonials,
.location,
.events-process,
.contact-options{
    background:var(--bg-alt);
}

/*=========================================================
=                    FLORAL ACCENTS                       =
=========================================================*/
/* Subtle botanical wallpaper in a few corners, echoing the mural
   on the storefront without competing with the copy. */

.about,
.faq,
.cta{
    position:relative;
    overflow:hidden;
}

.about > .container,
.faq > .container{
    position:relative;
    z-index:1;
}

/*---------- Section divider ----------*/
/* A slim botanical rule used between the hero and the next section. */

.section-divider{
    position:relative;
    height:34px;
    background:var(--bg);
    background-image:var(--sprig);
    background-repeat:repeat-x;
    background-position:center;
    background-size:120px 34px;
}

/*=========================================================
=                    HEADER ON SCROLL                     =
=========================================================*/

.header.is-scrolled{
    box-shadow:var(--shadow-sm);
}