/*
Theme Name: Afro by Simina
Theme URI: https://afro-by-simina.ro
Description: Temă unică, independentă și de lux pentru salonul Afro by Simina Brașov. Integrează nativ motorul modern de programări online cu stepper, catalogul dinamic de servicii, design system-ul complet și suport nativ pentru Elementor.
Author: Afro by Simina
Author URI: https://afro-by-simina.ro
Version: 1.0.0
Text Domain: afro-by-simina
*/

/* ==========================================================================
   AFRO BY SIMINA - STANDALONE THEME BASE RESET & FOUNDATIONS
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #fbf8f5;
    color: #2c2420;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}

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

a {
    color: #c17354;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover, a:focus {
    color: #9f4f32;
}

.site-main {
    min-height: 60vh;
}

/* ==========================================================================
   SMOOTH ANCHORS & TABLET RESPONSIVENESS ENHANCEMENTS
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

/* Offset anchor scroll on services & pricing page */
#afro, #boho, #braiduri, #senegale, #doua-codite, #dreaduri,
.elementor-element-card-sec-afro,
.elementor-element-card-sec-boho,
.elementor-element-card-sec-braiduri,
.elementor-element-card-sec-senegale,
.elementor-element-card-sec-doua-codite,
.elementor-element-card-sec-dreaduri {
    scroll-margin-top: 30px;
}

/* Tablet refinements (iPad portrait & landscape, 768px - 1024px, including 987px) */
@media screen and (max-width: 1024px) {
    /* Ensure all service pricing cards and containers stack vertically on tablet */
    .service-pricing-card,
    .service-pricing-card > .e-con-inner,
    [class*="card-sec-"],
    [class*="card-sec-"] > .e-con-inner {
        flex-direction: column !important;
        --flex-direction: column !important;
        flex-wrap: wrap !important;
        --flex-wrap: wrap !important;
    }

    [class*="card-sec-"] [class*="s-img-col-"],
    [class*="card-sec-"] [class*="s-info-col-"],
    .service-pricing-card .arch-card,
    .service-pricing-card .e-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        --width: 100% !important;
    }

    /* Arched images styling, sizing and centering on tablet */
    .arch-card,
    .service-pricing-card .arch-card {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto 24px auto !important;
        overflow: hidden;
    }

    .arch-card img,
    .arch-img-wrap img {
        width: 100% !important;
        max-height: 480px !important;
        object-fit: cover !important;
    }

    /* Category navigation pills on tablet */
    .elementor-element-serv-quick-anchors,
    .category-nav-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    .elementor-element-serv-quick-anchors a,
    .afro-nav-pill {
        padding: 10px 18px !important;
        font-size: 14px !important;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Pricing action buttons */
    .btn-terracotta,
    .elementor-button {
        min-height: 48px;
        font-size: 15px;
    }
}