/* =======================================================================
   style.css  |  Responsive Pastel Neomorphism + Neo-Brutalism Theme
   ======================================================================= */

/* ---------- Root Variables ---------- */
:root {
    /* Typography */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Work Sans', sans-serif;

    /* Pastel Palette */
    --clr-bg: #f5f7fa;
    --clr-surface: #f0f2f6;
    --clr-surface-dark: #e2e6ec;
    --clr-primary: #ffb3b3;
    --clr-primary-dark: #ff8d8d;
    --clr-secondary: #a4d7f5;
    --clr-secondary-dark: #7cc5f0;
    --clr-accent: #ffd59e;
    --clr-text: #333333;
    --clr-text-light: #ffffff;

    /* Shadows (Neomorphism) */
    --neo-shadow: 6px 6px 12px rgba(0, 0, 0, 0.08),
                  -6px -6px 12px rgba(255, 255, 255, 0.9);
    --neo-inset: inset 6px 6px 12px rgba(0, 0, 0, 0.08),
                 inset -6px -6px 12px rgba(255, 255, 255, 0.9);

    /* Brutal Outline */
    --brutal-outline: 2px solid #222222;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #ffb3b3 0%, #ffd8d8 100%);
    --gradient-secondary: linear-gradient(135deg, #a4d7f5 0%, #d9f0ff 100%);

    /* Durations */
    --transition-fast: 0.2s ease;
    --transition-base: 0.4s ease;
}

/* ---------- Global Resets & Defaults ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--clr-text);
    background: var(--clr-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: #222222;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.15);
}
p { margin-bottom: 1rem; }

section { position: relative; }

/* ---------- Hero Section ---------- */
#hero {
    color: var(--clr-text-light);
}
#hero h1, #hero p { color: var(--clr-text-light); }

/* ---------- Navigation Overrides ---------- */
.navbar {
    backdrop-filter: blur(6px);
    background: rgba(255, 255, 255, 0.8);
    border-bottom: var(--brutal-outline);
}
.navbar-brand { font-weight: 700; }
.nav-link {
    position: relative;
    font-weight: 500;
    transition: color var(--transition-fast);
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 2px;
    background: var(--clr-primary-dark);
    transition: width var(--transition-fast);
}
.nav-link:hover,
.nav-link:focus { color: var(--clr-primary-dark); }
.nav-link:hover::after,
.nav-link:focus::after { width: 100%; }

/* ---------- Buttons ---------- */
.btn, button, input[type='submit'] {
    font-family: var(--font-heading);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    border: none;
    color: var(--clr-text-light);
    background: var(--gradient-primary);
    box-shadow: var(--neo-shadow);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn:hover, button:hover, input[type='submit']:hover {
    transform: translateY(-2px);
    box-shadow: 4px 4px 8px rgba(0,0,0,0.12);
}
.btn:active { transform: translateY(0); }

/* ---------- Cards & Flex Centering ---------- */
.card, .item, .testimonial, .team-member, .product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--clr-surface);
    border-radius: 18px;
    box-shadow: var(--neo-shadow);
    border: var(--brutal-outline);
    overflow: hidden;
    transition: transform var(--transition-base);
}
.card:hover { transform: translateY(-4px); }

.card-image, .image-container {
    width: 100%;
    height: 250px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-image img, .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 auto;
}

/* Team specific override */
#team .card-image { height: 320px; }

/* ---------- Section Utilities ---------- */
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-secondary { background: var(--gradient-secondary); }

.parallax {
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}
.overlay-dark::before {
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.5);
}

/* ---------- Read More Links ---------- */
.read-more {
    font-weight: 600;
    color: var(--clr-primary-dark);
    position: relative;
    display: inline-block;
    text-decoration: none;
}
.read-more::after {
    content: '→';
    margin-left: 6px;
    transition: transform var(--transition-fast);
}
.read-more:hover::after { transform: translateX(4px); }

/* ---------- Social Links ---------- */
.social-link {
    color: var(--clr-text-light);
    font-weight: 600;
    display: inline-block;
    margin-right: 1rem;
    position: relative;
    text-decoration: none;
}
.social-link::after {
    content:'';
    position:absolute;
    bottom:-2px;
    left:0;
    width:0;
    height:2px;
    background: var(--clr-accent);
    transition: width var(--transition-fast);
}
.social-link:hover::after { width:100%; }

/* ---------- Footer ---------- */
footer {
    background: #1e1e1e;
    color: var(--clr-text-light);
}
footer a { color: var(--clr-text-light); }
footer a:hover { color: var(--clr-accent); }

/* ---------- Morphing Animation ---------- */
@keyframes blobMorph {
    0%,100% { border-radius: 42% 58% 67% 33% / 41% 49% 51% 59%; }
    25% { border-radius: 55% 45% 29% 71% / 55% 37% 63% 45%; }
    50% { border-radius: 34% 66% 47% 53% / 52% 66% 34% 48%; }
    75% { border-radius: 62% 38% 64% 36% / 29% 59% 41% 71%; }
}
.morph {
    animation: blobMorph 15s infinite linear alternate;
}

/* ---------- Success Page ---------- */
.success-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--gradient-secondary);
}

/* ---------- Privacy & Terms Pages ---------- */
.privacy-page, .terms-page {
    padding-top: 100px;
}

/* ---------- FAQ Accordion Override ---------- */
.accordion-button:not(.collapsed) {
    color: var(--clr-primary-dark);
    background: var(--clr-surface-dark);
    box-shadow: var(--neo-inset);
}
.accordion-button::after {
    filter: brightness(0.5);
}

/* ---------- Custom Range / Slider ---------- */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 8px;
    background: var(--clr-surface-dark);
    outline: none;
    box-shadow: var(--neo-inset);
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--clr-primary-dark);
    cursor: pointer;
    box-shadow: var(--neo-shadow);
    transition: transform var(--transition-fast);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); }
input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--clr-primary-dark);
    cursor: pointer;
    box-shadow: var(--neo-shadow);
}

/* ---------- Progress Bar ---------- */
.progress {
    background: var(--clr-surface-dark);
    box-shadow: var(--neo-inset);
}
.progress-bar {
    background: var(--clr-secondary-dark);
}

/* ---------- Cookie Popup ---------- */
#cookiePopup {
    font-size: 0.875rem;
    backdrop-filter: blur(4px);
}

/* ---------- Media Queries ---------- */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    .card-image, .image-container { height: 200px; }
    #team .card-image { height: 260px; }
    .navbar-brand { font-size: 1.25rem; }
}