/* ===========================
   Smyrna Ung – Färgpalett
   =========================== */
:root {
    /* Primära */
    --su-lavender: #C7B3FF;
    --su-orange:   #FF7A2F;
    --su-green:    #0C6B4B;

    /* Sekundära */
    --su-light-blue:  #8CC7FF;
    --su-navy:        #101935;
    --su-purple:      #6C4BFF;
    --su-soft-pink:   #F9C4D6;
    --su-yellow:      #FFD85A;
    --su-royal-blue:  #356DFF;

    /* Text & bakgrund */
    --su-bg-soft:     #F6F2FF;
    --su-bg-section:  #FFF7F2;
    --su-text-main:   #1F1433;
    --su-text-muted:  #6B5C84;
}

/* ===========================
   Grundlayout
   =========================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body.bg-smyrna {
    /* En lugn, konsekvent bakgrund hela sidan */
    background: linear-gradient(180deg, var(--su-bg-soft) 0%, var(--su-bg-section) 100%);
    color: var(--su-text-main);
    min-height: 100vh;
    margin: 0;
}

body, p, li {
    color: var(--su-text-main);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.text-muted {
    color: var(--su-text-muted) !important;
}

a {
    color: var(--su-purple);
}
a:hover {
    color: var(--su-lavender);
}

/* ===========================
   Navbar
   =========================== */

.bg-navbar {
    background: linear-gradient(
        90deg,
        var(--su-lavender) 0%,
        var(--su-purple) 40%,
        var(--su-royal-blue) 100%
    );
    box-shadow: 0 8px 20px rgba(16,25,53,0.35);
}

.navbar-brand {
    font-weight: 800;
    letter-spacing: .03em;
}

.navbar-nav .nav-link {
    font-weight: 500;
    position: relative;
    color: #fdfbff;
    opacity: 0.85;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    opacity: 1;
}

.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0.8rem;
    right: 0.8rem;
    bottom: 0.3rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--su-orange), var(--su-yellow));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 160ms ease-out;
}

.navbar-nav .nav-link:hover::after {
    transform: scaleX(1);
}

/* ===========================
   Footer
   =========================== */

.bg-footer {
    background: radial-gradient(circle at 0 0, rgba(255,216,90,0.18) 0, transparent 55%),
                radial-gradient(circle at 100% 100%, rgba(140,199,255,0.25) 0, transparent 60%),
                var(--su-navy);
    color: #f4f3ff;
}

.bg-footer a {
    color: #f4f3ff;
}

.bg-footer a:hover {
    color: var(--su-yellow);
}

/* ===========================
   Cards / Sektioner
   =========================== */

.card-smyrna {
    background: #ffffff;
    border-radius: 1.5rem;
    border: 1px solid rgba(31,20,51,0.04);
    box-shadow: 0 16px 40px rgba(16,25,53,0.08);
    position: relative;
    overflow: hidden;
}

/* Thin färgad “edge” upptill */
.card-smyrna::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--su-lavender), var(--su-orange));
}

.card-purple::before {
    background: linear-gradient(90deg, var(--su-lavender), var(--su-purple));
}
.card-orange::before {
    background: linear-gradient(90deg, var(--su-orange), var(--su-yellow));
}
.card-green::before {
    background: linear-gradient(90deg, var(--su-green), var(--su-light-blue));
}

.card-smyrna:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 50px rgba(16,25,53,0.18);
    transition: all 180ms ease-out;
}

/* Sektion med mjuk bakgrund */
.section-soft {
    background: linear-gradient(
        135deg,
        rgba(247,242,255,0.9),
        rgba(255,247,242,0.9)
    );
    border-radius: 1.8rem;
    padding: 2rem;
    margin-bottom: 2.5rem;
}

/* ===========================
   Knappar
   =========================== */

.btn-accent {
    background-color: var(--su-lavender);
    border: none;
    color: var(--su-navy);
    font-weight: 600;
    border-radius: 999px;
    padding-inline: 1.6rem;
}

.btn-accent:hover,
.btn-accent:focus {
    background-color: var(--su-purple);
    color: #fff;
}

.btn-accent-orange {
    background-color: var(--su-orange);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 999px;
    padding-inline: 1.6rem;
}

.btn-accent-orange:hover,
.btn-accent-orange:focus {
    background-color: #ff9458;
    color: #fff;
}

.btn-ghost {
    border-radius: 999px;
    border: 1px solid rgba(31,20,51,0.16);
    color: var(--su-text-main);
    background-color: rgba(255,255,255,0.7);
}

.btn-ghost:hover {
    background-color: rgba(255,255,255,1);
}

/* ===========================
   Hero
   =========================== */

.hero-section {
    position: relative;
    margin-bottom: 2.5rem;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    padding: .25rem .8rem;
    border-radius: 999px;
    background: rgba(255,122,47,0.12);
    color: var(--su-orange);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.hero-glow {
    position: relative;
    overflow: hidden;
    border-radius: 1.8rem;
}

.hero-glow::before {
    content: "";
    position: absolute;
    inset: -35%;
    background:
        radial-gradient(circle at 10% 0%, rgba(199,179,255,0.55) 0, transparent 55%),
        radial-gradient(circle at 90% 20%, rgba(255,122,47,0.4) 0, transparent 60%),
        radial-gradient(circle at 50% 100%, rgba(140,199,255,0.5) 0, transparent 60%);
    animation: hero-orbit 18s ease-in-out infinite alternate;
    opacity: 0.95;
}

.hero-glow > * {
    position: relative;
    z-index: 1;
}

@keyframes hero-orbit {
    0%   { transform: translate3d(-8px, -4px, 0) scale(1); }
    100% { transform: translate3d(8px, 6px, 0) scale(1.03); }
}

/* ===========================
   Badges / chips
   =========================== */

.badge-purple {
    background-color: rgba(199,179,255,0.28);
    color: var(--su-purple);
    border-radius: 999px;
    padding: 0.2rem 0.9rem;
    font-size: .78rem;
}
.badge-orange {
    background-color: rgba(255,122,47,0.25);
    color: var(--su-orange);
    border-radius: 999px;
    padding: 0.2rem 0.9rem;
    font-size: .78rem;
}
.badge-green {
    background-color: rgba(12,107,75,0.2);
    color: var(--su-green);
    border-radius: 999px;
    padding: 0.2rem 0.9rem;
    font-size: .78rem;
}

/* ===========================
   Scroll-fade (JS)
   =========================== */

.fade-section {
    opacity: 0;
    transform: translateY(16px);
    transition: all 450ms ease-out;
}
.fade-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===========================
   Bild-placeholders / foto-stil
   =========================== */

.photo-placeholder,
.photo-placeholder-wrapper {
    border-radius: 1.3rem;
    overflow: hidden;
    position: relative;
    background: #ddd;
    box-shadow: 0 10px 26px rgba(16,25,53,0.16);
}

.photo-lavender {
    background: radial-gradient(circle at 0 0, rgba(199,179,255,0.9), transparent 60%),
                radial-gradient(circle at 100% 100%, rgba(108,75,255,0.9), transparent 55%);
}
.photo-orange {
    background: radial-gradient(circle at 0 0, rgba(255,122,47,0.9), transparent 55%),
                radial-gradient(circle at 100% 100%, rgba(255,216,90,0.9), transparent 60%);
}
.photo-blue {
    background: radial-gradient(circle at 0 0, rgba(140,199,255,0.9), transparent 55%),
                radial-gradient(circle at 100% 100%, rgba(53,109,255,0.9), transparent 60%);
}
.photo-green {
    background: radial-gradient(circle at 0 0, rgba(12,107,75,0.9), transparent 55%),
                radial-gradient(circle at 100% 100%, rgba(140,199,255,0.7), transparent 60%);
}
.photo-soft-pink {
    background: radial-gradient(circle at 0 0, rgba(249,196,214,0.95), transparent 55%),
                radial-gradient(circle at 100% 100%, rgba(199,179,255,0.7), transparent 60%);
}
.photo-light-blue {
    background: radial-gradient(circle at 0 0, rgba(140,199,255,0.95), transparent 55%),
                radial-gradient(circle at 100% 100%, rgba(199,179,255,0.7), transparent 60%);
}
.photo-mixed {
    background:
        radial-gradient(circle at 0 0, rgba(199,179,255,0.85), transparent 55%),
        radial-gradient(circle at 100% 0, rgba(255,122,47,0.75), transparent 55%),
        radial-gradient(circle at 50% 100%, rgba(12,107,75,0.7), transparent 60%);
}

.photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===========================
   Fullbredds-foton + fade +
   parallax + slow zoom
   =========================== */

.full-bleed-photo {
    width: 100vw;
    min-height: 400px;
    max-height: 750px;
    line-height: 0;
    height: 55vh;

    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-bottom: -2px;
    overflow: hidden;

    perspective: 1000px;
}

/* Själva bilden */
.full-bleed-photo img {
    position: absolute;
    width: 110%;
    height: 110%;
    top: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0) scale(1);
    object-fit: cover;
    object-position: center;
    filter: brightness(0.92);
    transition: transform 2s cubic-bezier(0.15, 0.85, 0.35, 1);
    --parallax-offset: 0px;
}

/* När sektionen är i view: slow zoom */
.full-bleed-photo.in-view img {
    transform: translate3d(-50%, var(--parallax-offset), 0) scale(1.12);
}

/* Utanför view, men med parallax-offset uppdaterad */
.full-bleed-photo:not(.in-view) img {
    transform: translate3d(-50%, var(--parallax-offset), 0) scale(1);
}

/* Fade mot sidans bakgrund uppåt och nedåt */
.full-bleed-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background-image:
      /* toppen: bakgrund → transparent */
      linear-gradient(
        to bottom,
        var(--su-bg-soft) 0%,
        rgba(255,255,255,0) 45%
      ),
      /* botten: transparent → bakgrund */
      linear-gradient(
        to top,
        var(--su-bg-section) 0%,
        rgba(255,255,255,0) 45%
      );

    background-repeat: no-repeat;
    background-size: 100% 40%, 100% 40%;
    background-position: top, bottom;
}
section {
    position: relative;
    z-index: 1;
}