/* ==========================================================================
   Design System Variables - Paróquia São Gonçalo do Sapucaí
   Consolidação das variáveis CSS usadas em todo o site
   ========================================================================== */

:root {
    /* === TYPOGRAPHY === */
    --ff: "Inter", system-ui, sans-serif;

    /* === COLORS (RGB format for rgba support) === */
    --rgb-black: 0, 0, 0;
    --rgb-white: 255, 255, 255;

    /* Charcoal palette (dark grays) */
    --rgb-charcoal-1: 32, 32, 34;
    /* Darkest - backgrounds, text */
    --rgb-charcoal-2: 44, 45, 48;
    /* Card backgrounds */
    --rgb-charcoal-3: 70, 72, 77;
    /* Secondary text */
    --rgb-charcoal-4: 54, 54, 56;
    /* Hover states */

    /* Grey palette */
    --rgb-grey: 98, 98, 98;
    --rgb-light-grey-2: 242, 242, 242;
    /* Section backgrounds */
    --rgb-light-grey-3: 226, 226, 226;
    /* Border color */
    --rgb-light-grey-4: 219, 219, 219;
    /* Border color */

    /* Primary accent - Blue (#0761B4) */
    --rgb-turquoise: 7, 97, 180;
    --rgb-light-turquoise: 230, 242, 255;
    --rgb-dark-turquoise: 5, 70, 130;
    --rgb-blue: 7, 97, 180;
    --rgb-light-blue: 230, 242, 255;
    --rgb-dark-blue: 5, 70, 130;

    /* Secondary accent - Yellow/Gold (#F5C52E) */
    --rgb-yellow: 245, 197, 46;
    --rgb-light-yellow: 255, 248, 220;
    --rgb-dark-yellow: 172, 120, 0;
    /* Yellow with better contrast for text on white */
    --rgb-yellow-text: 158, 117, 0;

    /* === CURVES & TIMING === */
    --out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
    --in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);

    /* === SPACING === */
    --x-30: 30px;
    --x-40: 40px;
    --x-60: 60px;
    --x-80: 80px;
    --x-100: 100px;
    --y-20: 20px;
    --y-30: 30px;
    --y-40: 40px;
    --y-50: 50px;
    --y-60: 60px;
    --y-75: 75px;

    /* Container gutters */
    --site-gutter: 60px;

    /* === FONT SIZES === */
    --fz-15: 15px;
    --fz-16: 16px;
    --fz-17: 17px;
    --fz-30: 33px;
    --fz-55: 61px;

    /* === LAYOUT === */
    --header-height: 104px;
    --alerts-height: 0px;
    --home-banner-fast-links-height: 130px;
    --vh: 1vh;

    /* === SCROLLFIRE ANIMATION === */
    --scrollfire-duration: 800ms;
    --scrollfire-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

/* Responsive spacing adjustments */
@media (min-width: 1441px) {
    :root {
        --fz-30: min(1.875rem + (2.0625 - 1.875) * ((100vw - 90rem)/(120 - 90)), 2.0625rem);
        --x-30: min(30px + (33 - 30) * ((100vw - 1440px)/(1920 - 1440)), 33px);
        --x-40: min(40px + (44 - 40) * ((100vw - 1440px)/(1920 - 1440)), 44px);
        --x-60: min(60px + (66 - 60) * ((100vw - 1440px)/(1920 - 1440)), 66px);
        --x-80: min(80px + (88 - 80) * ((100vw - 1440px)/(1920 - 1440)), 88px);
        --x-100: min(100px + (110 - 100) * ((100vw - 1440px)/(1920 - 1440)), 110px);
        --y-20: min(20px + (22 - 20) * ((100vw - 1440px)/(1920 - 1440)), 22px);
        --y-40: min(40px + (44 - 40) * ((100vw - 1440px)/(1920 - 1440)), 44px);
        --y-50: min(50px + (55 - 50) * ((100vw - 1440px)/(1920 - 1440)), 55px);
        --y-60: min(60px + (66 - 60) * ((100vw - 1440px)/(1920 - 1440)), 66px);
        --y-75: min(75px + (82.5 - 75) * ((100vw - 1440px)/(1920 - 1440)), 82.5px);
    }
}

@media (max-width: 1023px) {
    :root {
        --site-gutter: 20px;
    }
}

@media screen and (max-height: 950px) {
    :root {
        --home-banner-fast-links-height: 110px;
    }
}

/* ==========================================================================
   SCROLLFIRE ANIMATIONS
   ========================================================================== */

.js-scrollfire {
    --scrollfire-duration: 800ms;
    --scrollfire-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

.scrollfire-fade-up {
    --scrollfire-opacity: 0;
    --scrollfire-translateY: 50px;
    opacity: var(--scrollfire-opacity);
    transform: translateY(var(--scrollfire-translateY));
    transition-duration: var(--scrollfire-duration);
    transition-property: opacity, transform;
    transition-timing-function: var(--scrollfire-timing-function);
}

[data-fire].scrollfire-fade-up {
    --scrollfire-opacity: 1;
    --scrollfire-translateY: 0px;
}

/* ==========================================================================
   BUTTON COMPONENT - Base styles for all buttons
   ========================================================================== */

.c-button {
    align-items: center;
    background-color: var(--button-background-color, rgb(var(--rgb-charcoal-1)));
    border: 1px solid var(--button-border-color, rgb(var(--rgb-charcoal-1)));
    border-radius: 100px;
    color: var(--button-color, rgb(var(--rgb-white)));
    cursor: pointer;
    display: inline-flex;
    font-family: var(--ff);
    font-size: 0.875rem;
    font-weight: 500;
    gap: var(--button-gap, 10px);
    justify-content: center;
    line-height: 1.3em;
    padding: 14px 40px;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition-duration: 0.25s;
    transition-property: color, background-color, border-color, transform, box-shadow;
    appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.c-button:hover {
    box-shadow: 0 10px 20px rgba(var(--rgb-black), 0.08);
    transform: translateY(-1px);
}

.c-button--full-1 {
    --button-color: rgb(var(--rgb-white));
    --button-svg-color: rgb(var(--rgb-white));
    --button-background-color: rgb(var(--rgb-charcoal-1));
    --button-border-color: rgb(var(--rgb-charcoal-1));
}

.c-button--full-1:hover {
    --button-background-color: rgb(var(--rgb-turquoise));
    --button-border-color: rgb(var(--rgb-turquoise));
}

.c-button--empty-1 {
    --button-color: rgb(var(--rgb-charcoal-1));
    --button-svg-color: rgb(var(--rgb-charcoal-1));
    --button-background-color: rgba(var(--rgb-turquoise), 0.03);
    --button-border-color: rgb(var(--rgb-turquoise));
}

.c-button--empty-1:hover {
    --button-color: rgb(var(--rgb-white));
    --button-svg-color: rgb(var(--rgb-white));
    --button-background-color: rgb(var(--rgb-turquoise));
    --button-border-color: rgb(var(--rgb-turquoise));
}

.c-button--outline-1 {
    --button-color: rgb(var(--rgb-charcoal-1));
    --button-background-color: transparent;
    --button-border-color: rgb(var(--rgb-charcoal-1));
}

.c-button--outline-1:hover {
    --button-color: rgb(var(--rgb-white));
    --button-background-color: rgb(var(--rgb-charcoal-1));
}

.c-button--svg-stroke svg {
    fill: none;
    stroke: var(--button-svg-color);
    stroke-width: 1.5px;
}

.c-button--svg-on-the-left {
    flex-direction: row;
}

.c-button__svg {
    flex-shrink: 0;
    height: 16px;
    width: 16px;
}

/* ==========================================================================
   FAST LINK BUTTON - Quick access links in hero and footer
   ========================================================================== */

.c-fast-link-button {
    align-items: center;
    background-color: var(--fast-link-button-background-color);
    border: 1px solid var(--fast-link-button-border-color);
    border-radius: 50px;
    display: flex;
    gap: 18px;
    padding: 14px;
    transition: background-color 0.3s, border-color 0.3s;
    text-decoration: none;
    width: 100%;
}

.c-fast-link-button:hover {
    background-color: var(--fast-link-button-background-color-hover, rgb(var(--rgb-light-turquoise)));
    border-color: var(--fast-link-button-border-color-hover, rgba(var(--rgb-turquoise), 0.45));
}

.c-fast-link-button--light {
    --fast-link-button-color: rgb(var(--rgb-charcoal-1));
    --fast-link-button-background-color: rgb(var(--rgb-light-grey-2));
    --fast-link-button-border-color: rgb(var(--rgb-light-grey-4));
    --fast-link-button-svg-color: rgb(var(--rgb-white));
    --fast-link-button-circle-color: rgb(var(--rgb-charcoal-1));
}

.c-fast-link-button--dark {
    --fast-link-button-color: rgb(var(--rgb-white));
    --fast-link-button-background-color: rgb(var(--rgb-charcoal-2));
    --fast-link-button-background-color-hover: rgb(var(--rgb-charcoal-3));
    --fast-link-button-border-color: #46484d;
    --fast-link-button-border-color-hover: rgba(var(--rgb-turquoise), 0.45);
    --fast-link-button-svg-color: rgb(var(--rgb-white));
    --fast-link-button-circle-color: rgb(var(--rgb-charcoal-1));
}

.c-fast-link-button__svg-container {
    align-items: center;
    background-color: var(--fast-link-button-circle-color);
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.c-fast-link-button__svg {
    fill: transparent;
    height: 18px;
    stroke: var(--fast-link-button-svg-color);
    stroke-width: 1.5px;
    width: 18px;
}

.c-fast-link-button__text {
    color: var(--fast-link-button-color);
    font-family: var(--ff);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3em;
}

@media (max-width: 767px) {
    .c-fast-link-button {
        gap: 12px;
        padding: 10px;
    }

    .c-fast-link-button__svg-container {
        height: 35px;
        width: 35px;
    }

    .c-fast-link-button__text {
        font-size: 0.8125rem;
    }
}

@media (max-width: 576px) {
    .c-fast-link-button__svg-container {
        height: 32px;
        width: 32px;
    }
}

/* ==========================================================================
   SECTION PATTERN - Use this as base for all homepage sections
   ========================================================================== */

/* 
   Section Layout Pattern:
   
   <section class="c-[section-name]">
       <div class="container-lg">
           <div class="c-[section-name]__header">
               <div class="c-[section-name]__title-container">
                   <div class="c-[section-name]__icon">
                       <svg>...</svg>
                   </div>
                   <div>
                       <h2 class="c-[section-name]__title">Title</h2>
                       <p class="c-[section-name]__subtitle">Subtitle</p>
                   </div>
               </div>
               <a href="#" class="c-[section-name]__link">Link →</a>
           </div>
           
           <div class="c-[section-name]__grid">
               <!-- Cards go here -->
           </div>
       </div>
   </section>
   
   Standard Section Styles:
   - Background: rgb(var(--rgb-white)) or rgb(var(--rgb-light-grey-2))
   - Padding: var(--x-80) 0 (vertical) with container-lg for horizontal
   - Header icon: 56px circle with border, turquoise icon
   - Title: 1.5rem, font-weight 500, charcoal-1
   - Subtitle: 0.8125rem, charcoal-3
   - Link: turquoise with arrow, transitions to charcoal on hover
   - Grid: 3 columns desktop, 2 tablet, 1 mobile
   - Card: white bg, 20px border-radius, 1px border light-grey-4
   - Card hover: translateY(-4px), border-color turquoise, shadow
*/

/* ==========================================================================
   CARD PATTERN - Use this as base for all cards
   ========================================================================== */

/*
   Card Layout Pattern:
   
   <div class="c-[component]-card">
       <div class="c-[component]-card__image-container">
           <img class="c-[component]-card__image">
       </div>
       <div class="c-[component]-card__content">
           <div class="c-[component]-card__badge-container">
               <span class="c-[component]-card__badge">Badge</span>
           </div>
           <h3 class="c-[component]-card__title">Title</h3>
           <p class="c-[component]-card__description">Description</p>
           <a class="c-[component]-card__cta">Call to action →</a>
       </div>
   </div>
   
   Standard Card Styles:
   - Background: rgb(var(--rgb-white))
   - Border: 1px solid rgb(var(--rgb-light-grey-4))
   - Border-radius: 20px
   - Image aspect-ratio: 16/9
   - Content padding: 24px
   - Badge: 20px border-radius, small caps, 6px 14px padding
   - Title: 1.0625rem, font-weight 500
   - Hover: translateY(-4px), border-color turquoise, shadow
*/