/* ==========================================================================
   Crescenzia Custom Utilities
   Replaces repeated inline styles extracted from rich-text content.
   Do NOT use for Webflow animation states (opacity:0 / translate3d) —
   those must stay inline so Webflow.js can read and animate them.
   ========================================================================== */

/* ==========================================================================
   ANNOUNCEMENT BAR — full-width strip above navbar, hides on scroll
   ========================================================================== */

#cre-announcement-bar {
    width: 100%;
    background: linear-gradient(90deg, #4a0f1e 0%, #8b1a35 40%, #c0365a 100%);
    padding: 10px 20px;
    text-align: center;
    transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease;
    max-height: 60px;
    overflow: hidden;
    opacity: 1;
    margin-top: 0;
}

html, body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Webflow injects a padding-top on body for sticky navbars — kill it */
body[style*="padding-top"] {
    padding-top: 0 !important;
}

#cre-announcement-bar.cre-bar-hidden {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.cre-announcement-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.cre-announcement-link:hover {
    opacity: 0.88;
}

.cre-announcement-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f9b8c8;
    flex-shrink: 0;
    display: inline-block;
}

.cre-announcement-cta {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.18s;
}

.cre-announcement-link:hover .cre-announcement-cta {
    background: rgba(255,255,255,0.28);
}

@media (max-width: 600px) {
    .cre-announcement-link {
        font-size: 12px;
        gap: 7px;
    }
    .cre-announcement-cta {
        display: none;
    }
}

/* ==========================================================================
   HEADER — full-width, flush to browser edges, no floating pill
   ========================================================================== */

.navbar-sticky {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    inset: 0 0 auto !important;   /* sticky flush to top, full width */
    background: #fff !important;
}

/* Flush, full-width header bar — square cyan outline, no padding/curve (Variant C) */
.header-wrapper {
    border: 2px solid #29abe2 !important;
    border-radius: 0 !important;
    background: #fff !important;
}

/* ==========================================================================
   NAV NO-WRAP FIX — keep all items on a single row at all desktop widths
   ========================================================================== */

/* Outer flex row — never allow wrapping */
.header-container-wrapper {
    flex-wrap: nowrap !important;
    min-width: 0;
}

/* Right-side flex row — never wrap */
.nav-menu-right-side {
    flex-wrap: nowrap !important;
    min-width: 0;
}

/* Nav menu list — single row, no wrap */
.list-nav-menu {
    flex-wrap: nowrap !important;
    white-space: nowrap;
}

/* Desktop horizontal nav: cap Webflow's vw-based font-size / column-gap.
   The header container is fixed at max-width 1398px, but the nav sizing is in
   vw (viewport-relative). On ultra-wide monitors — or when the browser is
   zoomed out (which widens the effective viewport) — the vw text grows past
   what the fixed container can hold, so the nav overflows its box and lands
   on top of the logo and the CONTACT US button. clamp() freezes the sizing
   once the container stops growing, keeping everything on one tidy row. */
@media (min-width: 992px) {
    .list-nav-menu {
        font-size: clamp(13px, 1.1vw, 16px) !important;
        column-gap: clamp(14px, 1.5vw, 22px) !important;
        grid-column-gap: clamp(14px, 1.5vw, 22px) !important;
    }
}

/* Each nav label — no internal wrapping */
.link-nav-item,
.cre-nav-toggle > span {
    white-space: nowrap;
    color: #15151f !important;
    font-weight: 700 !important;
}

.link-nav-item:hover,
.cre-nav-dropdown:hover .cre-nav-toggle > span,
.cre-nav-dropdown.w--open .cre-nav-toggle > span {
    color: #741f34 !important;
}

/* CONTACT US — maroon pill, uppercase to match design */
.primary-button.contact {
    background: #8b1a35 !important;
    border-radius: 999px !important;
    white-space: nowrap;
    flex-shrink: 0; /* never compress the CTA button */
}

.primary-button.contact .text-block-5 {
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 700 !important;
    color: #fff !important;
}

/* ==========================================================================
   PRODUCTS NAV DROPDOWN — clean, CSS-hover driven (no Webflow JS dependency)
   ========================================================================== */

/* Toggle button layout */
.cre-nav-toggle {
    display: flex !important;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding-right: 0 !important;
    color: inherit;
    text-decoration: none;
}

/* "Products" text inside toggle — match link-nav-item weight exactly */
.cre-nav-toggle > span {
    font-weight: inherit;
    color: inherit;
    letter-spacing: normal;
    text-transform: none;
}

/* Chevron SVG — animate on hover */
.cre-nav-chevron {
    width: 13px;
    height: 13px;
    transition: transform 0.22s ease;
    flex-shrink: 0;
    margin-top: 1px;
}

.cre-nav-dropdown:hover .cre-nav-chevron,
.cre-nav-dropdown.w--open .cre-nav-chevron {
    transform: rotate(180deg);
}

/* Show panel on CSS hover (fallback + supplement to Webflow JS) */
.cre-nav-dropdown:hover > .cre-nav-panel {
    display: block !important;
}

/* Dropdown panel position & base */
.cre-nav-panel {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 480px !important;
    background: #fff !important;
    z-index: 999 !important;
    padding: 0 !important;
}

/* Inner card — white box with shadow */
.cre-dropdown-inner {
    width: auto !important;
    min-width: 480px !important;
    padding: 20px 24px 24px !important;
    border-radius: 12px !important;
    border: 1px solid #ebebeb !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.10) !important;
    background: #fff !important;
    margin-top: 10px !important;
}

/* 3-column grid for categories */
.cre-category-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 0 24px;
}

/* Each category group */
.nav-category-group {
    padding: 0;
}

/* Divider between columns */
.nav-category-group + .nav-category-group {
    border-left: 1px solid #f0f0f0;
    padding-left: 24px;
}

/* Category section label — pill with left accent bar */
.nav-category-title {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #741f34;
    background: rgba(116, 31, 52, 0.07);
    border-left: 3px solid #741f34;
    border-bottom: none;
    padding: 4px 10px 4px 8px;
    border-radius: 0 4px 4px 0;
    margin-bottom: 12px;
    display: inline-block;
    white-space: nowrap;
}

/* Links inside each category */
.nav-category-group .nav-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 0;
}

.nav-category-group .nav-link {
    font-size: 13.5px !important;
    color: #333 !important;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    display: block;
    white-space: nowrap;
}

.nav-category-group .nav-link:hover {
    background: #fdf0f3;
    color: #741f34 !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Disabled nav links — placeholder items not yet available */
.nav-link-disabled {
    cursor: not-allowed;
    opacity: 0.45;
    user-select: none;
}

.nav-link-disabled:hover {
    background: none !important;
    color: #333 !important;
}

/* "Soon" badge inside disabled nav link */
.nav-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: #eee;
    color: #888;
    border-radius: 20px;
    padding: 1px 6px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Mobile: collapse dropdown grid to single column */
@media (max-width: 991px) {
    .cre-nav-panel {
        position: static !important;
        transform: none !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    .cre-dropdown-inner {
        min-width: 0 !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        padding: 10px 0 !important;
        margin-top: 0 !important;
        overflow: hidden !important;
    }
    .cre-category-grid {
        grid-template-columns: 1fr;
        gap: 16px 0;
    }
    .nav-category-group + .nav-category-group {
        border-left: none;
        border-top: 1px solid #f0f0f0;
        padding-left: 0;
        padding-top: 14px;
    }
    .nav-category-title {
        display: block;
        width: 100%;
        border-radius: 0 4px 4px 0;
        white-space: normal;
    }
    .nav-category-group .nav-link {
        white-space: normal !important;
    }
    .cre-nav-dropdown:hover > .cre-nav-panel {
        display: none !important; /* mobile: let Webflow JS handle it */
    }
    .cre-nav-dropdown.w--open > .cre-nav-panel {
        display: block !important;
    }
}

/* ==========================================================================
   HAMBURGER ANIMATION — three lines → X when .w--open
   gap-small = 8px, line-height = 2px → center-to-center = 10px
   ========================================================================== */

.hamburger-menu-line {
    transition: transform 0.25s ease, opacity 0.18s ease;
}

.hamburger-menu.w--open .hamburger-menu-line.top {
    transform: translateY(10px) rotate(45deg);
}

.hamburger-menu.w--open .hamburger-menu-line.middle {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger-menu.w--open .hamburger-menu-line.bottom {
    transform: translateY(-10px) rotate(-45deg);
}

/* ==========================================================================
   MOBILE NAV PANEL — let Webflow JS handle open/close via .w-nav-overlay;
   only ensure the overlay itself is wide and has a white background.
   ========================================================================== */

@media (max-width: 991px) {
    .w-nav-overlay {
        background: #fff;
        z-index: 999 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    }
}

/* Feature list block — replaces stack_card-image-wrapper where content
   is a list (not an image). Removes the fixed 25rem height that caused overflow. */
.feature-list-block {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding-right: 0;
    overflow: visible;
}

/* Typography */
.cre-bold   { font-weight: bold; }
.cre-fs-18  { font-size: 18px; }
.cre-fs-36  { font-size: 36px; }

/* Layout */
.cre-ul-indent { margin-left: 30px; }
.cre-fs-24  { font-size: 24px; }

/* Accessibility — visually-hidden labels readable by screen readers only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   MANUFACTURING TECHNOLOGIES SECTION — two equal-height process cards
   ========================================================================== */

.cre-mfg-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.cre-mfg-heading {
    text-align: center;
    margin-bottom: 40px;
}

.cre-mfg-subhead {
    font-size: 16px;
    color: #666;
    margin-top: 10px;
    margin-bottom: 0;
}

/* Card row — equal height via stretch */
.cre-mfg-cards {
    display: flex;
    gap: 28px;
    align-items: stretch;
}

/* Individual card */
.cre-mfg-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.10);
    background: #fff;
}

/* Card header bands */
.cre-mfg-card__header {
    padding: 24px 28px 20px;
    color: #fff;
}

.cre-mfg-card--lsr .cre-mfg-card__header {
    background: linear-gradient(135deg, #1a5fb5 0%, #2d7dd2 100%);
}

.cre-mfg-card--hcr .cre-mfg-card__header {
    background: linear-gradient(135deg, #5c1326 0%, #8b1a35 100%);
}

/* Badge pill — LSR / HCR */
.cre-mfg-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 20px;
    padding: 2px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.cre-mfg-card__header h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.3;
    color: #fff;
}

.cre-mfg-card__header p {
    font-size: 13.5px;
    opacity: 0.88;
    margin: 0;
    line-height: 1.5;
    color: #fff;
}

/* Card body — grows to push footer down */
.cre-mfg-card__body {
    flex: 1;
    padding: 20px 28px;
    border-bottom: 1px solid #f0f0f0;
}

/* Card footer */
.cre-mfg-card__footer {
    padding: 16px 28px 22px;
    background: #fafafa;
}

/* Section sub-label */
.cre-mfg-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #999;
    margin-bottom: 10px;
}

/* Feature list */
.cre-mfg-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cre-mfg-list li {
    font-size: 14px;
    color: #333;
    line-height: 1.45;
    padding-left: 18px;
    position: relative;
}

/* Shared bullet — position and size; colour overridden per card type */
.cre-mfg-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cre-mfg-card--lsr .cre-mfg-list li::before { background: #2d7dd2; }
.cre-mfg-card--hcr .cre-mfg-list li::before { background: #8b1a35; }

/* Applications paragraph */
.cre-mfg-apps {
    font-size: 13.5px;
    color: #555;
    line-height: 1.55;
    margin: 0;
}

/* Mobile: stack cards */
@media (max-width: 767px) {
    .cre-mfg-cards {
        flex-direction: column;
        gap: 20px;
    }
    .cre-mfg-wrap {
        padding: 0 16px;
    }
    .cre-mfg-card__header,
    .cre-mfg-card__body,
    .cre-mfg-card__footer {
        padding-left: 20px;
        padding-right: 20px;
    }
}