/* ========================================
   JN DESIGN - ULANG TAHUN
   Birthday Page Theme
======================================== */

.birthday-page {
    --birthday-primary: #B78AD1;
    --birthday-dark: #70458B;
    --birthday-pink: #F8DCE8;
    --birthday-blue: #D7EEF0;
    --birthday-light: #FBF7FD;
    --birthday-text: #493B52;
    --birthday-white: #FFFFFF;

    background: var(--birthday-light);
    color: var(--birthday-text);
}

/* ========================================
   HEADER
======================================== */

.birthday-page .site-header {
    background: var(--birthday-white);
    box-shadow: 0 2px 12px rgba(112, 69, 139, 0.08);
}

.birthday-page .logo span {
    color: var(--birthday-primary);
}

.birthday-page .navigation a:hover {
    color: var(--birthday-primary);
}

/* ========================================
   BUTTON
======================================== */

.birthday-page .btn-primary {
    background: var(--birthday-primary);
    border-color: var(--birthday-primary);
    color: var(--birthday-white);
}

.birthday-page .btn-primary:hover {
    background: var(--birthday-dark);
    border-color: var(--birthday-dark);
}

.birthday-page .btn-outline {
    color: var(--birthday-dark);
    border-color: var(--birthday-primary);
}

.birthday-page .btn-outline:hover {
    background: var(--birthday-primary);
    color: var(--birthday-white);
}

/* ========================================
   HERO BANNER
======================================== */

.birthday-page .birthday-hero {
    min-height: 470px;
    background:
        linear-gradient(
            rgba(251, 247, 253, 0.25),
            rgba(251, 247, 253, 0.25)
        ),
        url("../assets/images/banner-ulang-tahun.webp")
        center/cover no-repeat;
    color: var(--birthday-text);
}

.birthday-page .birthday-hero .eyebrow {
    color: var(--birthday-dark);
}

.birthday-page .birthday-hero h1 {
    color: var(--birthday-dark);
}

/* ========================================
   CATALOG
======================================== */

.birthday-page .catalog-section {
    background: var(--birthday-light);
}

.birthday-page .section-heading .eyebrow {
    color: var(--birthday-primary);
}

.birthday-page .section-heading h2 {
    color: var(--birthday-dark);
}

.birthday-page .section-heading > p:last-child {
    color: #897C91;
}

/* ========================================
   LAYOUT CARD
======================================== */

.birthday-page .layout-card {
    background: var(--birthday-white);
    box-shadow: 0 4px 18px rgba(112, 69, 139, 0.08);
}

.birthday-page .layout-card:hover {
    box-shadow: 0 8px 24px rgba(112, 69, 139, 0.15);
}

.birthday-page .card-content h4 {
    color: var(--birthday-dark);
}

.birthday-page .card-content p {
    color: #96899D;
}

/* ========================================
   CONTACT
======================================== */

.birthday-page .contact-section {
    background: var(--birthday-pink);
    color: var(--birthday-text);
}

.birthday-page .contact-section .eyebrow {
    color: var(--birthday-dark);
}

.birthday-page .contact-section h2 {
    color: var(--birthday-dark);
}

.birthday-page .contact-section > p:not(.eyebrow) {
    color: #796B80;
}

/* ========================================
   FOOTER
======================================== */

.birthday-page .site-footer {
    background: var(--birthday-dark);
    color: var(--birthday-white);
}

/* ========================================
   MOBILE
======================================== */

@media (max-width: 600px) {
    .birthday-page .birthday-hero {
        min-height: 380px;
    }
}