/* ============================================
   NEWHAV-115 — New Haven Site Build Bug Fixes
   ============================================ */

/* -------------------------------------------------
   Hero text box — match mockup dimensions (642x122)
   ------------------------------------------------- */
.page-id-105 .hero-text {
    max-width: 642px;
    height: 122px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
}

/* -------------------------------------------------
   Program pages hero text box (661x195)
   ------------------------------------------------- */
.program-page .hero-text {
    max-width: 661px;
    height: 195px;
    padding: 26px 37px;
    display: flex;
    align-items: center;
}

@media (min-width: 1000px) {
    .program-page .hero-text,
    .master-of-science-in-investigations .hero-text {
        width: fit-content !important;
        max-width: none !important;
    }
    .program-page .hero-text h1,
    .program-page .hero-text p,
    .master-of-science-in-investigations .hero-text h1,
    .master-of-science-in-investigations .hero-text p {
        white-space: nowrap;
    }
}

@media screen and (min-width: 1000px) {
    .program-page .hero-text p,
    .program-page .hero-text h1,
    .master-of-science-in-investigations .hero-text p,
    .master-of-science-in-investigations .hero-text h1 {
        font-size: 48px !important;
        font-weight: 900 !important;
        line-height: 1.0 !important;
        margin-bottom: 0 !important;
        text-align: left !important;
    }
}

/* -------------------------------------------------
   Bug #9 — Homepage: spacing between
   "You Belong Here" and "Why Choose UNewHaven"
   Reduce the gap between the title-text block
   and the call-to-action section.
   ------------------------------------------------- */
.page-id-105 .title-text_block.pt-x2 {
    padding-bottom: 100px !important;
}

.page-id-105 .call-to-action-container {
    margin-top: 0 !important;
}

/* -------------------------------------------------
   "Why Choose UNewHaven" CTA box — match mockup
   Box: 670x396, padding ~36px
   Heading: Avenir 900, 36px, line-height 72px
   Body: Avenir 350, 20px, line-height 32px
   ------------------------------------------------- */
/* Align CTA card left edge with feature-cards below — DESKTOP ONLY */
@media (min-width: 1000px) {
    .page-id-105 .call-to-action-container {
        width: 100% !important;
    }

    .page-id-105 .call-to-action-container .inner {
        display: flex !important;
        align-items: center;
    }

    .page-id-105 .call-to-action-container .col-one {
        display: none;
    }

    .page-id-105 .call-to-action-container .container {
        max-width: 1200px;
        padding: 0 20px;
    }

    .page-id-105 .call-to-action-box {
        width: 670px !important;
        height: 396px;
        padding: 36px !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .page-id-105 .call-to-action-box > h2 {
        font-family: Avenir !important;
        font-weight: 700 !important;
        font-size: 36px !important;
        line-height: 72px !important;
        text-decoration: underline;
        text-decoration-color: #ffcc33;
        text-decoration-thickness: 8.5%;
        margin-bottom: 10px !important;
    }

    .page-id-105 .call-to-action-box > p {
        font-family: Avenir !important;
        font-weight: 350 !important;
        font-size: 20px !important;
        line-height: 32px !important;
        max-width: 595px;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* -------------------------------------------------
   Bug #10 — At a Glance block — full mockup match
   ------------------------------------------------- */
.program-page .at-glance {
    margin-top: 0;
    margin-bottom: 40px;
}

/* Values: Avenir 900, 24px, line-height 24px */
.at-glance__value {
    font-weight: 700 !important;
    font-size: 24px !important;
    line-height: 24px !important;
    letter-spacing: -1.25px;
    font-family: Avenir !important;
    white-space: normal !important;
}

/* Labels: Avenir 350 (Book), 20px, NOT bold */
.at-glance__label {
    font-weight: 350 !important;
    font-size: 20px !important;
    line-height: 24px !important;
    letter-spacing: -1.25px;
    font-family: Avenir !important;
    white-space: normal !important;
}

/* At a Glance — add right padding to left content area */
.at-glance__left {
    padding-right: 50px !important;
    min-width: 0;
}

/* Allow items and text containers to shrink so the yellow CTA box never gets clipped */
.at-glance__items {
    min-width: 0;
}

.at-glance__item {
    min-width: 0;
}

.at-glance__text {
    min-width: 0;
}


/* Yellow CTA box: 214x151, bg #FFCC33, text #1C2B48 */
.at-glance__cta {
    width: 250px !important;
    flex-shrink: 0 !important;
    min-height: 151px !important;
    background: #FFCC33 !important;
    color: #1C2B48 !important;
    padding: 20px 22px !important;
}

.cta__title {
    font-family: Avenir !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    line-height: 24px !important;
    letter-spacing: -1.25px;
    color: #1C2B48 !important;
}

.cta__subtitle {
    font-family: Avenir !important;
    font-weight: 350 !important;
    font-size: 20px !important;
    line-height: 24px !important;
    letter-spacing: -1.25px;
    color: #1C2B48 !important;
    opacity: 1 !important;
}

/* -------------------------------------------------
   Bug #11 — Program Pages: spacing between
   "What You Will Learn" (counseling-block)
   and "Career Outcomes" (career-block).
   Reduce bottom padding on counseling block
   so it sits closer to career outcomes.
   ------------------------------------------------- */
.counseling-block {
    padding-bottom: 40px;
}

.career-block {
    margin-top: 0;
}

/* -------------------------------------------------
   Career Outcomes card — match mockup
   ------------------------------------------------- */

/* Title: Avenir 900, 36px, underline #FFCC33, color #1C2B48 */
.career-card__title {
    font-family: Avenir !important;
    font-weight: 700 !important;
    font-size: 36px !important;
    line-height: 72px !important;
    color: #1C2B48 !important;
    text-decoration: underline;
    text-decoration-color: #FFCC33;
    text-decoration-thickness: 8.5%;
}

/* Remove the ::after yellow bar since we use text-decoration */
.career-card__title::after {
    display: none !important;
}

/* List items: Avenir 900, 24px, line-height 40px, color #003366 */
.career-card__list li {
    font-family: Avenir !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    line-height: 40px !important;
    letter-spacing: -1.25px !important;
    color: #003366 !important;
    width: 375px;
}

/* Get Started button: 225x64, Avenir 900, 24px, uppercase */
.career-card__button {
    width: 225px !important;
    height: 64px;
    font-family: Avenir !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    line-height: 16px;
    text-transform: uppercase;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #FFCC33 !important;
    color: #1C2B48 !important;
}

/* -------------------------------------------------
   Bug #8 — Hover: darker yellow instead of underline
   Base yellow: #FFCC33 -> hover: #D4A800
   ------------------------------------------------- */
.btn:hover,
.btn-alt:hover {
    background-color: #D4A800 !important;
    text-decoration: none !important;
    color: #000 !important;
}

.career-card__button:hover {
    background: #D4A800 !important;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    /* Bug #9 — mobile */
    .page-id-105 .call-to-action-container {
        margin-top: 0 !important;
    }

    /* Mobile logo — 266x28 per mockup */
    .site-branding img {
        width: 266px !important;
        height: 28px !important;
        object-fit: contain;
    }
}

/* Thank you page — prevent orphan words on heading and body text */
.thankyou-overlay h1,
.thankyou-overlay p {
    text-wrap: balance;
}


/* Mobile hero title block — more side padding + prevent text overflow */
@media (max-width: 999px) {
    [id^="hero-mb-"] {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    [id^="hero-mb-"] span {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
}

/* Form container — widen to prevent program name truncation in select */
@media (min-width: 1000px) {
    .request-info {
        width: 420px !important;
    }
}

/* "Find Your Program" button — match nav link font size */
#nav-main-1 .top-btn {
    font-size: 20px !important;
}

/* -------------------------------------------------
   Rows 37, 38 — Investigations: Concentrations accordion
   Block CSS targets h1.accordion-heading but CMS uses h2.
   Add h2 support and section spacing.
   ------------------------------------------------- */
.accordion-one-container h2.accordion-heading {
    margin-bottom: 15px;
}

.accordion-one-container.padding {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Row 50 — Mobile: accordion header text too large vs plus icon */
@media (max-width: 768px) {
    .accordion-one-container .accordion-item .acc-header {
        font-size: 18px !important;
        padding-right: 50px !important;
    }
}

/* Nav: keep desktop height and logo at hamburger breakpoint */
@media (min-width: 601px) and (max-width: 999px) {
    #nav-main-1 {
        height: 120px !important;
    }
    #nav-main-1 .site-branding {
        height: auto !important;
        max-width: 250px !important;
    }
    #nav-main-1 .site-branding a,
    #nav-main-1 .site-branding a img {
        height: auto !important;
        width: 266px !important;
        max-width: 266px !important;
    }
    #nav-main-1 .container .nav-container {
        top: 120px !important;
    }
}