/* ==========================================================================
   Hidžama Combaj - glavna stylesheet datoteka
   Paleta boja preuzeta s originalnog WordPress sajta (tirkizno plava + tamna).
   ========================================================================== */

:root {
    /* --- Boje (identične originalnom sajtu) --- */
    --clr-primary: #39bcdd;        /* tirkizno plava - glavni akcent, ikone, linkovi */
    --clr-primary-dark: #0986c0;   /* tamnija tirkizna - hover stanja */
    --clr-primary-light: #eaf8fb;  /* svijetli tirkizni ton - blage pozadine */
    --clr-dark: #1a1a1a;           /* skoro crna - naslovi, tekst */
    --clr-footer-bg: #2b2b2b;      /* tamno siva - pozadina footera */
    --clr-footer-bottom: #191919;  /* najtamnija - donja traka footera */
    --clr-text: #3d3d3d;           /* tijelo teksta */
    --clr-text-muted: #6b6b6b;     /* sporedni tekst */
    --clr-bg-alt: #f4f4f4;         /* svijetlo siva pozadina alternativnih sekcija */
    --clr-white: #ffffff;
    --clr-border: #e6e6e6;

    /* --- Akademija Jadranka Combaj (zlatna linija, odvojena od tirkizne klinike) --- */
    --clr-gold: #c9a24b;
    --clr-gold-dark: #96780f;
    --clr-gold-light: #faf3e0;

    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Quicksand', sans-serif;

    --radius-lg: 22px;
    --radius-md: 14px;
    --shadow-soft: 0 10px 30px rgba(20, 20, 20, 0.08);
}

/* --- Osnovno --- */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--clr-text);
    background-color: var(--clr-white);
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
    position: relative;
}

img, video, iframe { max-width: 100%; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--clr-dark);
    font-weight: 700;
}

a { color: var(--clr-primary-dark); text-decoration: none; }
a:hover { color: var(--clr-primary); }

.section-padding { padding: 5rem 0; }
@media (max-width: 767px) { .section-padding { padding: 3rem 0; } }

.bg-alt { background-color: var(--clr-bg-alt); }
.bg-primary-light { background-color: var(--clr-primary-light); }

.text-primary-accent { color: var(--clr-primary) !important; }

.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .8rem;
    font-weight: 700;
    color: var(--clr-primary-dark);
    margin-bottom: .5rem;
}

.underline-accent {
    display: inline-block;
    width: 46px;
    height: 3px;
    background: var(--clr-primary);
    border-radius: 3px;
    margin: .4rem 0 1rem;
}

/* --- Gumbi --- */
.btn-hidzama {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background-color: var(--clr-primary);
    color: var(--clr-white);
    border: 2px solid var(--clr-primary);
    padding: .75rem 1.75rem;
    border-radius: 50px;
    font-weight: 700;
    font-family: var(--font-heading);
    transition: all .2s ease;
}
.btn-hidzama:hover {
    background-color: var(--clr-primary-dark);
    border-color: var(--clr-primary-dark);
    color: var(--clr-white);
    transform: translateY(-2px);
}

.btn-hidzama-outline {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background-color: transparent;
    color: var(--clr-primary-dark);
    border: 2px solid var(--clr-primary);
    padding: .75rem 1.75rem;
    border-radius: 50px;
    font-weight: 700;
    font-family: var(--font-heading);
    transition: all .2s ease;
}
.btn-hidzama-outline:hover {
    background-color: var(--clr-primary);
    color: var(--clr-white);
    transform: translateY(-2px);
}

/* --- Navigacija --- */
.navbar-hidzama {
    background-color: var(--clr-white);
    box-shadow: 0 2px 18px rgba(0,0,0,.06);
    padding: .9rem 0;
    transition: padding .2s ease;
}
.navbar-hidzama .navbar-brand {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--clr-dark);
    line-height: 1.1;
}
.navbar-hidzama .navbar-brand small {
    display: block;
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .12em;
    color: var(--clr-primary-dark);
    text-transform: uppercase;
}
.navbar-hidzama .nav-link {
    font-weight: 600;
    color: var(--clr-dark);
    margin: 0 .4rem;
    position: relative;
}
.navbar-hidzama .nav-link.active,
.navbar-hidzama .nav-link:hover { color: var(--clr-primary-dark); }
.navbar-hidzama .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 2px;
    background: var(--clr-primary);
    border-radius: 2px;
}
.navbar-hidzama .btn-hidzama { padding: .55rem 1.4rem; font-size: .9rem; }

/* --- Zlatni gumb za Akademiju u glavnom meniju (jako uočljiv) --- */
.nav-link-gold {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    position: relative;
    background: linear-gradient(135deg, #fff3c4 0%, #e9c869 30%, #b8892c 65%, #f3dd97 100%);
    color: #2b1e00 !important;
    font-weight: 800;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .6rem 1.5rem;
    border-radius: 50px;
    font-size: .85rem;
    margin: 0 .35rem;
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 4px 16px rgba(150, 115, 15, .5), 0 0 0 3px rgba(233, 200, 105, .18);
    animation: goldPulse 2.6s ease-in-out infinite;
    transition: transform .2s ease, box-shadow .2s ease;
}
.nav-link-gold i { font-size: 1rem; }
.nav-link-gold:hover,
.nav-link-gold.active {
    background: linear-gradient(135deg, #fff8de, #f0d488 35%, #93701f 70%, #fff3c4 100%);
    color: #1a1200 !important;
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 22px rgba(150, 115, 15, .6), 0 0 0 4px rgba(233, 200, 105, .3);
    animation-play-state: paused;
}
@keyframes goldPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(150, 115, 15, .5), 0 0 0 3px rgba(233, 200, 105, .18); }
    50% { box-shadow: 0 4px 20px rgba(150, 115, 15, .7), 0 0 0 6px rgba(233, 200, 105, .3); }
}
@media (prefers-reduced-motion: reduce) {
    .nav-link-gold { animation: none; }
}

/* --- Hero / naslovna traka ---
   Svijetla, "prozračna" verzija (tirkizno plava + siva, u paleti sajta) -
   umjesto stare tamne/crne pozadine. Dekorativni blagi krugovi u ::before
   i ::after zamjenjuju fotografiju/tamni overlay. */
.page-hero {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: center;
    color: var(--clr-text);
    background: linear-gradient(135deg, var(--clr-primary-light) 0%, #eef2f4 55%, #e3ebef 100%);
    overflow: hidden;
}
.page-hero::before,
.page-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}
.page-hero::before {
    width: 420px; height: 420px;
    top: -160px; right: -120px;
    background: radial-gradient(circle, rgba(57,188,221,.22), rgba(57,188,221,0) 70%);
}
.page-hero::after {
    width: 320px; height: 320px;
    bottom: -140px; left: -80px;
    background: radial-gradient(circle, rgba(57,188,221,.14), rgba(57,188,221,0) 70%);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 {
    color: var(--clr-dark);
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 800;
}
.page-hero .accent { color: var(--clr-primary-dark); }
.page-hero .breadcrumb-hidzama a { color: var(--clr-text-muted); }
.page-hero .breadcrumb-hidzama a:hover { color: var(--clr-primary-dark); }
.page-hero .breadcrumb-hidzama .sep { color: var(--clr-primary); margin: 0 .5rem; }

.home-hero { min-height: 560px; }

/* Akademija - ista svijetla struktura, ali u toplijoj zlatnoj nijansi
   da se osjeti razlika od tirkizne klinike, bez tamne/crne pozadine. */
.academy-hero {
    background: linear-gradient(135deg, var(--clr-gold-light) 0%, #fffaf0 55%, #f8ecd0 100%);
}
.academy-hero::before { background: radial-gradient(circle, rgba(201,162,75,.28), rgba(201,162,75,0) 70%); }
.academy-hero::after { background: radial-gradient(circle, rgba(201,162,75,.18), rgba(201,162,75,0) 70%); }
.academy-hero .accent { color: var(--clr-gold-dark); }

/* --- Placeholder slike (dok se ne ubace stvarne fotografije) --- */
.img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    background: repeating-linear-gradient(135deg, #f0f8fa 0 14px, #e4f2f6 14px 28px);
    border: 2px dashed #9fd8e8;
    border-radius: var(--radius-md);
    color: var(--clr-primary-dark);
    text-align: center;
    font-size: .85rem;
    padding: 1rem;
}
.img-placeholder i { font-size: 2.2rem; opacity: .6; }
.img-placeholder.ratio-square { aspect-ratio: 1 / 1; }
.img-placeholder.ratio-wide { aspect-ratio: 16 / 10; }
.img-placeholder.ratio-portrait { aspect-ratio: 3 / 4; }
.img-placeholder.ratio-hero { aspect-ratio: 16 / 7; }
.img-placeholder.rounded-blob { border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%; border-style: solid; }

.portrait-frame {
    position: relative;
    border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
    padding: 10px;
    background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
}
.portrait-frame .img-placeholder { border-radius: 42% 58% 58% 42% / 48% 42% 58% 52%; border: none; background: #f4fbfd; }

/* --- Kartice pogodnosti (benefit cards) --- */
.benefit-card {
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    padding: 2.2rem 1.6rem;
    text-align: left;
    box-shadow: var(--shadow-soft);
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
}
.benefit-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(20,20,20,.12); }
.benefit-icon {
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--clr-primary);
    color: var(--clr-white);
    font-size: 1.7rem;
    margin-bottom: 1.1rem;
}

/* --- Generičke kartice (usluge, blog, galerija) --- */
.hidzama-card {
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
}
.hidzama-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(20,20,20,.12); }
.hidzama-card .card-body { padding: 1.6rem; }
.hidzama-card .card-body h3, .hidzama-card .card-body h4 { font-size: 1.15rem; }

.guideline-card {
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1.8rem;
    height: 100%;
}
.guideline-number {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--clr-primary-light);
    color: var(--clr-primary-dark);
    font-weight: 800;
    font-family: var(--font-heading);
    margin-bottom: .9rem;
}

/* --- CTA sekcija --- */
.cta-band {
    background: linear-gradient(120deg, var(--clr-primary-dark), var(--clr-primary));
    color: var(--clr-white);
    border-radius: var(--radius-lg);
    padding: 3rem;
}
.cta-band h2, .cta-band p { color: var(--clr-white); }
.cta-band .btn-hidzama {
    background: var(--clr-white);
    color: var(--clr-primary-dark);
    border-color: var(--clr-white);
}
.cta-band .btn-hidzama:hover { background: var(--clr-dark); color: var(--clr-white); border-color: var(--clr-dark); }

/* --- Cjenik --- */
.price-table { width: 100%; border-collapse: separate; border-spacing: 0 .6rem; }
.price-table td, .price-table th { padding: 1rem 1.2rem; }
.price-row {
    background: var(--clr-white);
    box-shadow: var(--shadow-soft);
    border-radius: var(--radius-md);
}
.price-row td:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.price-row td:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.price-value {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--clr-primary-dark);
    white-space: nowrap;
}
.price-placeholder-note {
    background: var(--clr-primary-light);
    border: 1px dashed var(--clr-primary);
    border-radius: var(--radius-md);
    padding: 1rem 1.3rem;
    color: var(--clr-primary-dark);
    font-size: .92rem;
}

/* --- Galerija --- */
.gallery-item { border-radius: var(--radius-md); overflow: hidden; }

/* --- Blog članak --- */
.article-body p { margin-bottom: 1.1rem; line-height: 1.8; }
.article-body h2, .article-body h3 { margin-top: 2rem; margin-bottom: .8rem; }
.article-body ul { margin-bottom: 1.1rem; }
.article-body blockquote {
    border-left: 4px solid var(--clr-primary);
    padding: .3rem 1.2rem;
    color: var(--clr-text-muted);
    font-style: italic;
}

/* --- Raspored kućica (Zagreb/Rijeka po mjesecu) --- */
.raspored-box {
    background: var(--clr-primary-light);
    border: 1px dashed var(--clr-primary);
    border-radius: var(--radius-md);
    padding: 1rem 1.2rem;
}
.raspored-box-light {
    background: rgba(255,255,255,.12);
    border: 1px dashed rgba(255,255,255,.5);
}

/* --- Tim (Jadranka + Davor) --- */
.team-card {
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    height: 100%;
}
.team-card .team-photo {
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
.team-card .team-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.team-card .card-body { padding: 1.8rem; }
.team-role {
    display: inline-block;
    background: var(--clr-primary-light);
    color: var(--clr-primary-dark);
    font-size: .8rem;
    font-weight: 700;
    padding: .25rem .8rem;
    border-radius: 50px;
    margin-bottom: .6rem;
}

/* --- Video --- */
.video-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    background: var(--clr-dark);
}
.video-frame video { width: 100%; display: block; }

/* YouTube embedi (naslovna - "Jadranka u medijima") - klasičan responzivan trik
   (padding-bottom = 56.25% za 16:9) da video UVIJEK bude pune, prave 16:9 visine
   u svim preglednicima, bez oslanjanja na aspect-ratio CSS svojstvo. */
.yt-embed-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    background: var(--clr-dark);
}
.yt-embed-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}

/* --- Vertikalni video (9:16, Reels format) - Akademija Face lifting --- */
.reel-embed-wrap {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding-bottom: 177.78%; /* 9:16 */
    height: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    background: var(--clr-dark);
}
.reel-embed-wrap video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

/* --- Akademija Jadranka Combaj (zlatna linija) --- */
.academy-hero { background-color: #1f1a0e; }
.academy-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .8rem;
    font-weight: 700;
    color: var(--clr-gold-dark);
    margin-bottom: .5rem;
}
.academy-underline {
    display: inline-block;
    width: 46px;
    height: 3px;
    background: var(--clr-gold);
    border-radius: 3px;
    margin: .4rem 0 1rem;
}
.academy-card {
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    height: 100%;
    border-top: 4px solid var(--clr-gold);
    transition: transform .2s ease, box-shadow .2s ease;
}
.academy-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(20,20,20,.12); }
.academy-icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--clr-gold-light);
    color: var(--clr-gold-dark);
    font-size: 1.5rem;
    margin-bottom: .8rem;
}
.academy-badge {
    display: inline-block;
    background: var(--clr-gold-light);
    color: var(--clr-gold-dark);
    font-size: .8rem;
    font-weight: 700;
    padding: .3rem .9rem;
    border-radius: 50px;
}
.btn-gold {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: linear-gradient(135deg, #e6c874, var(--clr-gold-dark));
    color: #241b00;
    border: none;
    padding: .75rem 1.75rem;
    border-radius: 50px;
    font-weight: 700;
    font-family: var(--font-heading);
    transition: all .2s ease;
}
.btn-gold:hover {
    background: linear-gradient(135deg, #f3dd97, #7c6109);
    color: #241b00;
    transform: translateY(-2px);
}
.btn-gold-outline {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    color: var(--clr-gold-dark);
    border: 2px solid var(--clr-gold);
    padding: .75rem 1.75rem;
    border-radius: 50px;
    font-weight: 700;
    font-family: var(--font-heading);
    transition: all .2s ease;
}
.btn-gold-outline:hover {
    background: var(--clr-gold);
    color: #241b00;
    transform: translateY(-2px);
}

/* --- Footer --- */
.site-footer { background: var(--clr-footer-bg); color: #cfcfcf; }
.site-footer h5 { color: var(--clr-white); font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem; }
.site-footer a { color: #cfcfcf; }
.site-footer a:hover { color: var(--clr-primary); }
.site-footer .footer-underline { width: 40px; height: 2px; background: var(--clr-primary); border-radius: 2px; margin-bottom: 1rem; }
.site-footer .footer-signature { color: var(--clr-primary); opacity: .8; font-family: 'Segoe Script', cursive; font-size: 1.6rem; }
.footer-signature-box { display: inline-block; }
.footer-bottom { background: var(--clr-footer-bottom); color: #9c9c9c; font-size: .88rem; padding: 1rem 0; }
.social-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid #4a4a4a;
    border-radius: 50%;
    color: var(--clr-white);
    margin-left: .4rem;
    transition: all .2s ease;
}
.social-circle:hover { background: var(--clr-primary); border-color: var(--clr-primary); color: var(--clr-white); }

/* --- WhatsApp plutajući gumb --- */
.whatsapp-float {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 58px; height: 58px;
    background: #25D366;
    color: var(--clr-white);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    z-index: 1050;
    transition: transform .2s ease;
}
.whatsapp-float:hover { transform: scale(1.08); color: var(--clr-white); }

/* --- Back to top --- */
.back-to-top {
    position: fixed;
    bottom: 24px; left: 24px;
    width: 46px; height: 46px;
    background: var(--clr-dark);
    color: var(--clr-white);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: all .25s ease;
}
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--clr-primary-dark); color: var(--clr-white); }

/* --- Forma --- */
.form-hidzama .form-control, .form-hidzama .form-select {
    border-radius: var(--radius-md);
    border: 1.5px solid var(--clr-border);
    padding: .75rem 1rem;
}
.form-hidzama .form-control:focus, .form-hidzama .form-select:focus {
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 .2rem rgba(57,188,221,.18);
}
.form-hidzama label { font-weight: 600; color: var(--clr-dark); margin-bottom: .35rem; }

.contact-info-card {
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 2rem;
    height: 100%;
    text-align: center;
}
.contact-info-card .icon-circle {
    width: 66px; height: 66px;
    background: var(--clr-primary);
    color: var(--clr-white);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    margin: 0 auto 1rem;
}

.map-wrap { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.map-wrap iframe { width: 100%; height: 380px; border: 0; display: block; }

.alert-hidzama-success {
    background: var(--clr-primary-light);
    border: 1px solid var(--clr-primary);
    color: var(--clr-primary-dark);
    border-radius: var(--radius-md);
}