/* ==========================================
   HAZEL WESTFALL — COSMIC MIDNIGHT
   Custom styles layered over the Cardea theme
========================================== */

/* Mobile: accent band behind the section heading */
@media screen and (max-width: 1024px) {
    #stories .bg-holder {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 180px;
        overflow: hidden;
    }

    #stories .bg-holder .split-color {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transform: none;
        left: 0;
        background-color: #7770A6;
    }

    #stories .section-title-holder {
        position: relative;
        z-index: 1;
    }
}

/* The theme parks the mobile menu off-screen to the right; clip it so phones
   don't widen the page to fit it (previously masked by maximum-scale=1). */
.site-wrapper {
    overflow-x: clip;
}

/* Core colors and typography */
body {
    background-color: #171522;
    color: #E9E0D8;
    font-family: Georgia, "Times New Roman", serif;
}

/* Main section backgrounds */
.section,
#home,
#stories,
#about,
#work,
#news,
#pricing,
#skills,
#team,
#contact,
#milestones {
    background-color: #171522;
    color: #E9E0D8;
}

/* Header and navigation */
.header-holder {
    background-color: #12111D;
    border-bottom: 1px solid rgba(197, 141, 174, 0.18);
}

body .site-wrapper .sm-clean a {
    color: #E9E0D8;
}

body .sm-clean a:hover,
body .main-menu.sm-clean li.active a {
    color: #C58DAE !important;
}

/* Headings */
.section h2.entry-title,
.page-template-default.page .section h1.entry-title,
.section.page-split h2.entry-title {
    color: #F1E7F0;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: 1px;
}

/* Body copy */
body p {
    color: #D2C9D9;
}

/* Links */
body a,
body a:hover {
    color: #C58DAE;
}

/* Accent panels */
#stories .split-color,
#news .split-color,
#team .split-color {
    background-color: #7770A6;
}

#about .split-color,
#skills .split-color {
    background-color: #51466F;
}


#work .split-color {
    background-color: #C58DAE;
}

/* Buttons */
a.button,
.pricing-button {
    border-color: #C58DAE;
    border-radius: 3px;
    letter-spacing: 0.5px;
    transition: background-color 0.25s ease,
                color 0.25s ease,
                border-color 0.25s ease;
}

a.button:hover,
.pricing-button:hover {
    background-color: #C58DAE;
    color: #171522 !important;
    opacity: 1;
}

/* Portfolio text panels */
.grid-item .entry-holder {
    background-color: #211D30;
    color: #E9E0D8;
}

/* Newsletter/contact form fields */
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea {
    color: #E9E0D8;
    border-color: #7770A6;
}

.contact-form input[type=submit] {
    color: #E9E0D8;
    border-color: #C58DAE;
}

/* Footer */
.footer {
    background-color: #12111D;
    color: #E9E0D8;
    border-top: 1px solid rgba(197, 141, 174, 0.18);
}

.site-wrapper .footer a:hover {
    color: #C58DAE;
}

/* Keep text readable on smaller screens */
@media screen and (max-width: 1020px) {
    .menu-holder {
        background-color: #12111D;
    }
}

@media screen and (max-width: 925px) {
    .sm-clean ul {
        background-color: #211D30;
    }
}


/* ==========================================
   HAZEL WESTFALL — HOMEPAGE HERO
========================================== */

#home {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #171522;
    background-image:
        linear-gradient(
            rgba(23, 21, 34, 0.30),
            rgba(23, 21, 34, 0.60)
        ),
        url("../images/hazel-cosmic-hero.jpg");
    background-size: cover;
    background-position: center center;
}

#home .hazel-hero-content {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 80px 20px;
    text-align: center;
}

#home .hazel-author-name {
    font-family: "Questrial", CenturyGothic, AppleGothic, sans-serif !important;
    font-size: 44px;
    letter-spacing: 2px;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 24px;
}

#home .hazel-hero-title {
    margin: 0 0 25px;
    color: #F1E7F0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 6vw, 76px);
    font-weight: 400;
    line-height: 1.18;
}

#home .hazel-hero-title span {
    color: #D5A0C0;
    font-style: italic;
}

#home .hazel-hero-subtitle {
    margin: 0 auto 35px;
    color: #E9E0D8;
    font-size: 17px;
    line-height: 1.7;
}

#home .hazel-hero-button {
    display: inline-block;
    padding: 15px 27px;
    border: 1px solid #C58DAE;
    color: #F1E7F0;
    font-size: 12px;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.25s ease,
                color 0.25s ease;
}

#home .hazel-hero-button:hover {
    background-color: #C58DAE;
    color: #171522;
}


@media screen and (max-width: 600px) {
    #home .hazel-author-name {
        font-size: 30px !important;
        letter-spacing: 2px;
        line-height: 1.2;
    }

    #home .hazel-hero-title {
        font-size: 40px;
    }

    #home .hazel-hero-subtitle {
        font-size: 15px;
    }
}

/* ==========================================
   TYPOGRAPHY REFINEMENT
========================================== */

/* Clean, readable text throughout the site */
body,
body p,
body .page-desc,
body .service-txt,
body .info-text,
body .sm-clean a,
body .hazel-hero-button {
    font-family: Arial, Helvetica, sans-serif;
}

/* More restrained left-side section headings */
.section-title-holder .entry-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 38px;
    line-height: 1.2;
    letter-spacing: 1px;
    overflow-wrap: normal;
    word-break: normal;
}

/* Section titles sit in a 270px column. The theme's 80px size plus its
   break-anywhere rules split long words ("STORI-ES", "TOUC-H"); 60px is the
   largest size where every title word fits whole. */
.section.page-split .section-title-holder h2.entry-title {
    word-break: normal;
    overflow-wrap: normal;
}

@media screen and (min-width: 1025px) {
    .section.page-split .section-title-holder h2.entry-title {
        font-size: 60px;
    }
}

/* Make descriptive labels easier to read */
.section-title-holder .page-desc {
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.3px;
}

/* Comfortable reading size for paragraphs */
.section-content-holder p {
    font-size: 16px;
    line-height: 1.85;
}

/* Keep the main hero headline distinct */
#home .hazel-hero-title {
    font-family: Georgia, "Times New Roman", serif;
}

/* Smaller screens */
@media screen and (max-width: 1020px) {
    .section-title-holder .entry-title {
        font-size: 32px;
    }
}

@media screen and (max-width: 600px) {
    .section-title-holder .entry-title {
        font-size: 28px;
    }
}
/* About Hazel — large editorial heading */
#about .section-title-holder .entry-title {
    font-size: 60px;
    line-height: 1.08;
    letter-spacing: 1px;
    white-space: normal;
}

@media screen and (max-width: 1020px) {
    #about .section-title-holder .entry-title {
        font-size: 42px;
    }
}

@media screen and (max-width: 600px) {
    #about .section-title-holder .entry-title {
        font-size: 34px;
    }
}

/* Hazel Westfall text logo */
.header-logo .hazel-header-logo {
    font-family: "Questrial", CenturyGothic, AppleGothic, sans-serif;
    font-size: 27px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #E9E0D8;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-block;
}

.header-logo a {
    text-decoration: none;
}

/* Questrial for the main hero name */
#home .hazel-author-name {
    font-family: "Questrial", CenturyGothic, AppleGothic, sans-serif !important;
}
/* Header */
.header-holder .menu-wrapper {
    display: block;
}

/* Social icons integrated into header navigation */
.header-social-link a {
    font-size: 16px;
    padding-left: 7px !important;
    padding-right: 7px !important;
}

.header-social-link a:hover {
    color: #C58DAE !important;
}
@media screen and (max-width: 767px) {
    #home .hazel-author-name {
        font-size: 52px !important;
        letter-spacing: 2px;
        line-height: 1.2;
    }
}
#contact .bg-holder {
    background-color: #171522;
}

#contact .split-color {
    background-color: #000000;
}

/* Mobile: accent backgrounds behind section headings */
@media screen and (max-width: 1024px) {
    #stories .section-title-holder,
    #about .section-title-holder,
    #work .section-title-holder,
    #news .section-title-holder,
    #skills .section-title-holder,
    #team .section-title-holder {
        padding: 22px 20px;
        box-sizing: border-box;
    }

    #stories .section-title-holder {
        background-color: #7770A6;
    }

    #about .section-title-holder,
    #skills .section-title-holder {
        background-color: #51466F;
width: 100%;
box-sizing: border-box;

    }

    #work .section-title-holder {
        background-color: #C58DAE;
    }

    #news .section-title-holder,
    #team .section-title-holder {
        background-color: #7770A6;
    }

    #stories .section-title-holder .entry-title,
    #about .section-title-holder .entry-title,
    #work .section-title-holder .entry-title,
    #news .section-title-holder .entry-title,
    #skills .section-title-holder .entry-title,
    #team .section-title-holder .entry-title,
    #stories .section-title-holder .page-desc,
    #about .section-title-holder .page-desc,
    #work .section-title-holder .page-desc,
    #news .section-title-holder .page-desc,
    #skills .section-title-holder .page-desc,
    #team .section-title-holder .page-desc {
        color: #FFFFFF;
    }
}

/* Mobile: accent band behind Contact heading */
@media screen and (max-width: 1024px) {
    #contact .section-title-holder {
        background-color: #51466F;
        padding: 22px 20px;
        box-sizing: border-box;
    }

    #contact .section-title-holder .entry-title,
    #contact .section-title-holder .page-desc {
        color: #FFFFFF;
    }
}
/* ==========================================
   MOBILE SECTION HEADER FIXES
========================================== */

@media screen and (max-width: 1024px) {

    /* About Hazel: prevent heading from crowding the accent band */
    #work .section-title-holder {
        width: 100%;
        box-sizing: border-box;
        padding: 28px 20px;
        overflow-wrap: break-word;
    }

    #work .section-title-holder .entry-title {
        max-width: 100%;
        line-height: 1.2;
        overflow-wrap: break-word;
        word-break: normal;
    }

    #work .section-title-holder .page-desc {
        max-width: 100%;
        line-height: 1.6;
    }

    /* Contact: let the colored heading background fill its container */
    #contact .section-title-holder {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 22px 20px;
        background-color: #51466F;
    }

    #contact .section-title-holder .entry-title,
    #contact .section-title-holder .page-desc {
        color: #FFFFFF;
    }
}

/* Hero section buttons */
.hazel-hero-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.hazel-newsletter-button {
    background-color: #C58DAE;
    color: #171522;
}

.hazel-newsletter-button:hover {
    background-color: transparent;
    color: #F1E7F0;
}

/* ==========================================
   PRIVACY POLICY PAGE
========================================== */

.privacy-page {
    min-height: 100vh;
    box-sizing: border-box;
    background-color: #12111D;
    color: #E9E0D8;
    padding: 80px 25px;
}

.privacy-content {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}

.privacy-content h1 {
    color: #E9E0D8;
    font-family: 'Montserrat', sans-serif;
    font-size: 38px;
    margin: 35px 0 10px;
}

.privacy-content h2 {
    color: #C58DAE;
    font-family: 'Montserrat', sans-serif;
    font-size: 19px;
    margin: 38px 0 14px;
}

.privacy-content p,
.privacy-content li {
    color: #D5CED9;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.9;
}

.privacy-content ul {
    padding-left: 25px;
}

.privacy-updated {
    color: #A99CAF !important;
    font-size: 12px !important;
    margin-bottom: 35px;
}

.privacy-back-link {
    color: #C58DAE;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    text-decoration: none;
}

.privacy-back-link:hover {
    color: #E9E0D8;
}

@media screen and (max-width: 767px) {
    .privacy-page {
        padding: 50px 22px;
    }

    .privacy-content h1 {
        font-size: 30px;
    }

    .privacy-content h2 {
        font-size: 17px;
    }
}



/* Placeholder until the contact form is built */
.section-content-holder p.hazel-coming-soon {
    display: inline-block;
    margin-top: 10px;
    padding: 15px 27px;
    border: 1px solid rgba(197, 141, 174, 0.45);
    color: #D5A0C0;
    font-size: 12px;
    letter-spacing: 2px;
    line-height: 1.6;
    text-transform: uppercase;
}