/* Custom branding for Workspace 48 */

/* Override brand colors for workspace 48 */
:root {
    --brand-primary: #4FC7DF;
    --brand-secondary: #F0F9FC;
}

/* Custom font for workspace 48 headings */
h1, h2, h3, h4, h5, h6,
.section-title,
.accordion-button,
.navbar-brand {
    font-family: "Helvetica World", Helvetica, Arial, sans-serif !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
}

/* Override inline styles for section headers - maximum specificity */
h2[style*="text-transform: none"],
h3[style*="text-transform: none"],
.section-title[style*="text-transform: none"],
.accordion-button[style*="text-transform: none"],
h2[style*="text-transform: none !important"],
h3[style*="text-transform: none !important"],
.section-title[style*="text-transform: none !important"],
.accordion-button[style*="text-transform: none !important"] {
    text-transform: uppercase !important;
    font-weight: bold !important;
    font-family: "Helvetica World", Helvetica, Arial, sans-serif !important;
}

/* Target specific section headers */
h2.h3,
h3.section-title,
.accordion-button.clean-accordion {
    text-transform: uppercase !important;
    font-weight: bold !important;
    font-family: "Helvetica World", Helvetica, Arial, sans-serif !important;
}

/* Nuclear option - override everything */
body h2,
body h3,
body .section-title,
body .accordion-button {
    text-transform: uppercase !important;
    font-weight: bold !important;
    font-family: "Helvetica World", Helvetica, Arial, sans-serif !important;
}

/* Custom logo size for workspace 48 */
.navbar img[src*="workspaces/48.png"] {
    height: 160px !important;
    max-height: 160px !important;
    min-height: 160px !important;
}

/* Alternative selector for workspace logo */
.navbar .d-inline-block[src*="workspaces/"] {
    height: 160px !important;
    max-height: 160px !important;
    min-height: 160px !important;
}

/* Force override for workspace 48 logo */
.navbar img[src*="48.png"] {
    height: 160px !important;
    max-height: 160px !important;
    min-height: 160px !important;
}

/* Workspace 48 logo in header section (75% of original 80px = 60px) */
.bottom-half-container img[src*="workspaces/48.png"],
.bottom-half-container img[src*="48.png"] {
    height: 60px !important;
    max-height: 60px !important;
    min-height: 60px !important;
    width: auto !important;
}

/* Custom navbar styling for workspace 48 */
.navbar-brand {
    color: #04062B !important;
    font-weight: 600;
}

/* Custom section title styling */
.section-title {
    border-bottom: 1px solid #04062B;
    color: #04062B !important;
}

/* Custom accordion button styling for workspace 48 */
.accordion-button.pill-yellow {
    background-color: transparent !important;
    color: #04062B !important;
    border: none !important;
}

.accordion-button.pill-yellow:not(.collapsed) {
    background-color: transparent !important;
    color: #04062B !important;
    border: none !important;
}

/* Custom accordion border colors for workspace 48 */
.accordion-item.border-yellow {
    border: none !important;
}

.accordion-item.border-blue {
    border: none !important;
}

/* Remove all accordion backgrounds and borders for workspace 48 */
.accordion-item {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.accordion-button {
    background-color: transparent !important;
    border: none !important;
    color: #04062B !important;
}

.accordion-button:not(.collapsed) {
    background-color: transparent !important;
    border: none !important;
    color: #04062B !important;
}

.accordion-button:focus {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #04062B !important;
}

.accordion-body {
    background-color: transparent !important;
    border: none !important;
}

/* Product Information accordions - thin grey border always visible */
/* Target all Product Information accordion containers */
#productInfoAccordion1 .accordion-item,
#productInfoAccordion2 .accordion-item,
#productInfoAccordion3 .accordion-item,
#productInfoAccordion4 .accordion-item,
#productInfoAccordion5 .accordion-item,
#productInfoAccordion6 .accordion-item {
    border: 1px solid #B9BBC1 !important;
}

/* Custom supply chain pills for workspace 48 */
.supply-chain-flow .pill-yellow {
    background-color: #F0F9FC !important;
    color: #4FC7DF !important;
}

.supply-chain-flow .pill-yellow:hover,
.supply-chain-flow .pill-yellow:focus {
    background-color: #4FC7DF !important;
    color: white !important;
}

.supply-chain-flow .pill-yellow:active,
.supply-chain-flow .pill-yellow.active {
    background-color: #4FC7DF !important;
    color: white !important;
    font-weight: bold !important;
}

.supply-chain-flow .pill-blue {
    background-color: #F0F9FC !important;
    color: #4FC7DF !important;
}

.supply-chain-flow .pill-blue:hover,
.supply-chain-flow .pill-blue:focus {
    background-color: #4FC7DF !important;
    color: white !important;
}

.supply-chain-flow .pill-blue:active,
.supply-chain-flow .pill-blue.active {
    background-color: #4FC7DF !important;
    color: white !important;
    font-weight: bold !important;
}

/* Custom text colors for workspace 48 */
html, body {
    color: #04062B !important;
}

.text-muted,
.text-dark,
h1, h2, h3, h4, h5, h6,
p, span, div,
.accordion-button:not(.pill-blue),
.navbar-brand,
.header {
    color: #04062B !important;
}

/* Keep white text white */
.pill-blue,
.equivalent-content {
    color: white !important;
}

/* Custom HR color for workspace 48 */
hr {
    border-color: #04062B !important;
}

/* Custom clean accordion border for workspace 48 */
.accordion-button.clean-accordion {
    border-bottom: 1px solid #04062B !important;
}

.accordion-button.clean-accordion:not(.collapsed) {
    border-bottom: 1px solid #04062B !important;
}

.accordion-button.clean-accordion.collapsed {
    border-bottom: 1px solid #04062B !important;
}

.accordion-button.clean-accordion:focus {
    border-bottom: 1px solid #04062B !important;
}

/* Keep all +/- indicators pinned to the far right */
.accordion-button.clean-accordion,
.accordion-button.pill-yellow {
    display: flex !important;
    align-items: center !important;
}

.accordion-button.clean-accordion::after,
.accordion-button.pill-yellow::after,
.accordion-button::after {
    margin-left: auto !important;
}

/* Mobile equivalents list for environmental impact cards */
.workspace-48-equivalent-list {
    color: #04062B;
    padding-left: 1.2rem;
    font-family: 'Nunito', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-transform: none !important;
}

.workspace-48-equivalent-list li {
    color: #04062B !important;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Workspace 48 Supply Chain Flow Custom Colors */
/* First pill: Workspace 48 blue */
.supply-chain-flow .row .col:nth-child(1) .pill-yellow {
    background-color: #4FC7DF !important;
    color: #04062B !important;
    font-weight: bold !important;
}

/* Second pill: Global grey */
.supply-chain-flow .row .col:nth-child(3) .pill-blue {
    background-color: #F3F3F3 !important;
    color: #04062B !important;
    font-weight: bold !important;
}

/* Third pill: Circkit yellow */
.supply-chain-flow .row .col:nth-child(5) .pill-yellow {
    background-color: #F0EA7C !important;
    color: #04062B !important;
    font-weight: bold !important;
}

/* Fourth pill: Workspace 48 blue */
.supply-chain-flow .row .col:nth-child(7) .pill-blue {
    background-color: #4FC7DF !important;
    color: #04062B !important;
    font-weight: bold !important;
}

/* Mobile version for workspace 48 */
.supply-chain-flow .d-md-none .text-center:nth-child(1) .pill-yellow {
    background-color: #4FC7DF !important;
    color: #04062B !important;
    font-weight: bold !important;
}

.supply-chain-flow .d-md-none .text-center:nth-child(3) .pill-blue {
    background-color: #F3F3F3 !important;
    color: #04062B !important;
    font-weight: bold !important;
}

.supply-chain-flow .d-md-none .text-center:nth-child(5) .pill-yellow {
    background-color: #F0EA7C !important;
    color: #04062B !important;
    font-weight: bold !important;
}

.supply-chain-flow .d-md-none .text-center:nth-child(7) .pill-blue {
    background-color: #4FC7DF !important;
    color: #04062B !important;
    font-weight: bold !important;
}

/* Hide QR code section and Powered by CircKit for workspace 48 */
/* Target only the QR section specifically */
.qr-code-container,
.qr-code-display,
.qr-info {
    display: none !important;
}

/* Hide the Powered by CircKit text in QR section */
.section-spacing .text-center.py-4 p.mb-0.mt-0.text-muted {
    display: none !important;
}

/* Hide the entire QR code section for workspace 48 */
.section-spacing.mb-0 {
    display: none !important;
}

/* Custom footer for workspace 48 */
.workspace-48-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    margin-top: 2rem;
    border-top: none;
    position: relative;
}

/* Footer logo styling for workspace 48 */
.workspace-48-footer .footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

/* Balance left and right footer columns so logo is truly centered */
.workspace-48-footer .share-button,
.workspace-48-footer .powered-by {
    flex: 1;
}

/* Specific styling for the custom message text */
.py-5 p {
    font-family: "Helvetica World", Helvetica, Arial, sans-serif !important;
    text-transform: none !important;
    font-weight: bold !important;
}

/* Ensure parent container has relative positioning for absolute footer */
.bottom-half-container {
    position: relative;
}

/* Workspace 48 header vertical rhythm */
.workspace-48-header-text-col {
    min-height: 400px;
}

.workspace-48-logo-block {
    margin-bottom: 1rem !important;
}

.workspace-48-header-content {
    gap: 1rem;
}

.workspace-48-past-block {
    margin-bottom: 0 !important;
}

.workspace-48-title-block h1 {
    line-height: 1.1;
}

.workspace-48-footer .share-button {
    background-color: transparent;
    color: #04062B;
    border: none;
    padding: 0.5rem 0;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.workspace-48-footer .share-button:hover {
    background-color: transparent;
    color: #4FC7DF;
    text-decoration: none;
}

.workspace-48-footer .powered-by {
    color: #04062B;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: right;
}

/* Mobile responsive styling for workspace 48 */
@media (max-width: 768px) {
    /* Workspace 48: keep impact cards side-by-side on mobile */
    .workspace-48-impact-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .workspace-48-impact-col {
        flex: 1 1 0 !important;
        max-width: calc(33.333% - 0.34rem) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .workspace-48-impact-col .p-3 {
        padding: 0.5rem !important;
    }

    .workspace-48-impact-col .h5 {
        font-size: 0.95rem !important;
        margin-bottom: 0.75rem !important;
    }

    .workspace-48-impact-col .equivalent-box {
        width: 100% !important;
    }

    /* Make ONLY the main product title smaller on mobile - half the size */
    /* Target the specific workspace 48 product title with inline styles */
    .text-start.mb-4 h1[style*="font-size: 2.5rem"],
    .text-start.mb-4 h1[style*="font-size:2.5rem"],
    /* Target any h1 in the text-start mb-4 div for workspace 48 */
    .text-start.mb-4 h1,
    /* Target h1 in workspace 48 header layout */
    .bottom-half-container h1[style*="font-size: 2.5rem"] {
        font-size: 1.5rem !important;
    }
    
    /* Stack columns on mobile for workspace 48 header */
    .bottom-half-container .row.mb-4 {
        flex-direction: column;
        margin-bottom: 0.75rem !important;
    }
    
    .workspace-48-header-text-col {
        min-height: auto !important;
        margin-bottom: 0.75rem !important;
    }

    .workspace-48-logo-block {
        margin-bottom: 0.75rem !important;
    }

    .workspace-48-header-content {
        gap: 0.75rem;
    }

    .bottom-half-container .row.mb-4 .col-md-5 {
        margin-bottom: 0 !important;
    }
    
    /* Adjust product image on mobile */
    .bottom-half-container .product-image-container img {
        max-height: 300px !important;
    }
    
    /* Fix text wrapping for workspace 48 accordion button text */
    .accordion-button.clean-accordion {
        white-space: normal !important;
        word-wrap: break-word !important;
        line-height: 1.2 !important;
        padding: 0.75rem 1rem !important;
        text-align: left !important;
    }
    
    /* Fix longer accordion button titles on mobile */
    .accordion-button.pill-yellow {
        white-space: normal !important;
        word-wrap: break-word !important;
        line-height: 1.3 !important;
        padding: 1rem 1rem 1rem 1.5rem !important;
        text-align: left !important;
        min-height: auto !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
    }
    
    /* Ensure accordion icons stay on the right and centered vertically */
    .accordion-button::after {
        flex-shrink: 0 !important;
        margin-left: auto !important;
        align-self: center !important;
        order: 2 !important;
    }

    /* Keep dark overlay on GIFs, but hide text (shown below as bullets) */
    .workspace-48-equivalent-content {
        color: transparent !important;
        text-shadow: none !important;
    }

    /* Make sure text takes available space but leaves room for icon */
    .accordion-button {
        text-align: left !important;
    }
    
    /* Add more bottom spacing for the custom message on mobile */
    .text-center.py-5 {
        margin-bottom: 4rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* Ensure the bottom container has enough padding for the absolute footer */
    .bottom-half-container {
        padding-bottom: 5rem !important;
    }
    
    /* Adjust footer positioning on mobile to give more space */
    .workspace-48-footer {
        position: relative !important;
        margin-top: 1rem !important;
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    /* Stack footer elements vertically on mobile */
    .workspace-48-footer .share-button,
    .workspace-48-footer .footer-logo,
    .workspace-48-footer .powered-by {
        width: auto !important;
        margin: 0 !important;
    }
}