/*
 Theme Name: TRIII Therapeutics
 Theme URI: https://triii.life
 Description: TRIII branded child theme for WooCommerce. CSS only — no template overrides.
 Author: TRIII Therapeutics
 Template: twentytwentyfour
 Version: 1.0.0
*/

/* ── Fonts ─────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #374151;
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
}

/* ── Colors ─────────────────────────────────────────────────────────────── */
:root {
    --triii-navy:    #0d3069;
    --triii-navy-lt: #1a4d8f;
    --triii-blue-bg: #f0f5ff;
    --triii-gray:    #6b7280;
    --triii-border:  #e5e7eb;
    --triii-text:    #374151;
    --triii-white:   #ffffff;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
header, .wp-block-template-part[data-slug="header"],
.site-header, #masthead {
    background: var(--triii-navy) !important;
    border-bottom: none !important;
    padding: 0 !important;
}

.site-header a, .site-header nav a,
header a, header nav a {
    color: #fff !important;
}

.site-title a, .site-title {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    text-decoration: none !important;
}

/* Logo sizing */
.custom-logo { max-height: 44px !important; width: auto !important; }

/* Nav */
.primary-navigation a, .nav-primary a,
header nav a, .main-navigation a {
    color: rgba(255,255,255,.85) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color .15s !important;
}
.primary-navigation a:hover, header nav a:hover { color: #fff !important; }

/* ── Shop page — bundle/product grid ────────────────────────────────────── */
.woocommerce .products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: #fff !important;
    border: 1.5px solid var(--triii-border) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin: 0 !important;
    transition: box-shadow .2s, border-color .2s !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}
.woocommerce ul.products li.product:hover {
    box-shadow: 0 8px 32px rgba(13,48,105,.12) !important;
    border-color: var(--triii-navy) !important;
}

/* Product image */
.woocommerce ul.products li.product img {
    border-radius: 10px !important;
    width: 100% !important;
    object-fit: contain !important;
    max-height: 220px !important;
    background: #f8f9fb !important;
    padding: 12px !important;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--triii-navy) !important;
    margin: 12px 0 6px !important;
    line-height: 1.3 !important;
}

/* Price */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price ins,
.woocommerce-Price-amount {
    color: var(--triii-navy) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.woocommerce ul.products li.product .price del {
    color: var(--triii-gray) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* Short description */
.woocommerce ul.products li.product .woocommerce-loop-product__short-description,
.woocommerce ul.products li.product .product_excerpt {
    font-size: 13px !important;
    color: var(--triii-gray) !important;
    margin-bottom: 14px !important;
    line-height: 1.5 !important;
    flex: 1 !important;
}

/* Add to cart button */
.woocommerce ul.products li.product .button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit {
    background: var(--triii-navy) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 11px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    width: 100% !important;
    text-align: center !important;
    transition: background .15s !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: block !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
    background: var(--triii-navy-lt) !important;
}

/* ── Single product page ─────────────────────────────────────────────────── */
.woocommerce div.product .product_title,
.woocommerce div.product h1 {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--triii-navy) !important;
    margin-bottom: 8px !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--triii-navy) !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 15px !important;
    color: var(--triii-text) !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}

/* Single add to cart */
.woocommerce div.product form.cart .single_add_to_cart_button {
    background: var(--triii-navy) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 14px 32px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border: none !important;
    transition: background .15s !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background: var(--triii-navy-lt) !important;
}

/* ── Cart & Checkout ────────────────────────────────────────────────────── */
.woocommerce-cart table.cart td, .woocommerce-cart table.cart th,
.woocommerce-checkout table.shop_table td, .woocommerce-checkout table.shop_table th {
    border-color: var(--triii-border) !important;
    padding: 14px !important;
}

.woocommerce #payment .wc_payment_method label,
.woocommerce .checkout_coupon,
.woocommerce-checkout h3 {
    color: var(--triii-navy) !important;
    font-weight: 600 !important;
}

/* Checkout button */
#place_order, .woocommerce #payment #place_order {
    background: var(--triii-navy) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    padding: 15px 32px !important;
    width: 100% !important;
    border: none !important;
}

/* ── My Account ────────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block !important;
    padding: 10px 16px !important;
    color: var(--triii-navy) !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: background .15s !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background: var(--triii-blue-bg) !important;
    font-weight: 600 !important;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer, .site-footer, #colophon {
    background: var(--triii-navy) !important;
    color: rgba(255,255,255,.7) !important;
    padding: 40px 20px !important;
    text-align: center !important;
    font-size: 13px !important;
}
footer a, .site-footer a { color: rgba(255,255,255,.8) !important; }

.site-footer::before {
    content: '3.33% of profits donated to World Orphans · Free to cancel anytime · Ships from Texas';
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,.5);
    margin-bottom: 12px;
    letter-spacing: .04em;
}

/* ── Misc ────────────────────────────────────────────────────────────────── */
.woocommerce-notices-wrapper .woocommerce-message {
    border-color: var(--triii-navy) !important;
    color: var(--triii-navy) !important;
}
.woocommerce-notices-wrapper .woocommerce-message::before { color: var(--triii-navy) !important; }

a { color: var(--triii-navy); }
a:hover { color: var(--triii-navy-lt); }

/* Page title */
h1.wp-block-post-title, h1.page-title,
.woocommerce-products-header__title {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--triii-navy) !important;
}

/* Shop category headings */
.woocommerce-loop-category__title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--triii-navy) !important;
}

/* Subscription badge on product cards */
.subscription-price .subscription-details {
    font-size: 12px !important;
    color: var(--triii-gray) !important;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .woocommerce .products {
        grid-template-columns: 1fr !important;
    }
    .woocommerce div.product .product_title { font-size: 22px !important; }
}

/* ── Twenty Twenty-Four specific header fixes ─────────────────────────── */

/* TT4 uses .wp-block-template-part for header sections */
.wp-block-template-part header,
.wp-block-template-part .wp-block-group,
header .wp-block-group,
.site-header .wp-block-group {
    background-color: var(--triii-navy) !important;
    color: #fff !important;
}

/* TT4 navigation block */
.wp-block-navigation,
.wp-block-navigation__container,
.wp-block-navigation-item,
.wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item a,
.wp-block-navigation a {
    color: #ffffff !important;
    --wp--preset--color--contrast: #ffffff !important;
}

.wp-block-navigation .wp-block-navigation-item a:hover { opacity: .85 !important; }

/* TT4 header background — aggressive override */
header, header *, 
.wp-site-blocks > header,
.wp-site-blocks > header *:not(.custom-logo):not(img) {
    --wp--preset--color--base: var(--triii-navy) !important;
    --wp--preset--color--contrast: #ffffff !important;
}

header .wp-block-group {
    background: var(--triii-navy) !important;
}

/* Nav toggle (mobile hamburger) */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
    fill: #fff !important;
    color: #fff !important;
}

/* Any row/columns inside header */
header .wp-block-columns,
header .wp-block-column,
header .wp-block-row {
    background: transparent !important;
    color: #fff !important;
}

/* Site title block if used */
.wp-block-site-title a,
.wp-block-site-title {
    color: #fff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Nav background in dropdown */
.wp-block-navigation .wp-block-navigation__submenu-container {
    background: var(--triii-navy) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
}

/* Force body background white (theme sometimes sets gray) */
body, .wp-site-blocks, main, .wp-block-group.is-layout-constrained {
    background: #fff !important;
}

/* Fix any gray containers theme injects */
.wp-block-cover, .entry-content > .wp-block-group {
    --wp--preset--color--base: #ffffff !important;
}


/* ── Fix: savings vs-individual text wrapping ───────────────────────── */
.tb-vs-individual {
    flex-wrap: nowrap !important;
    align-items: center !important;
}
.tb-vs-individual > span:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px !important;
}
/* Simplify — put it all on one clean line */
.tb-vs-individual {
    font-size: 12px !important;
    padding: 8px 12px !important;
}
.tb-vs-dim { display: none; } /* hide individual total to keep it one line */

/* ── Fix: nav background forced navy — TT24 aggressive override ──────── */

/* Full-width header bar */
header, .wp-site-blocks > header,
.wp-block-template-part[data-slug="header"],
.wp-block-template-part[data-slug="header"] > *,
.wp-block-template-part[data-slug="header"] .wp-block-group,
.wp-block-template-part[data-slug="header"] .wp-block-navigation,
.wp-block-template-part[data-slug="header"] .wp-block-site-title {
    background: #0d3069 !important;
    background-color: #0d3069 !important;
    color: #ffffff !important;
}

/* WP handles nav with inline styles sometimes — override with !important */
.wp-block-navigation,
.wp-block-navigation .wp-block-navigation__container,
.wp-block-navigation-item,
.wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item a,
.wp-block-navigation > ul > li > a,
.wp-block-navigation .wp-block-pages-list__item a {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Site title */
.wp-block-site-title, .wp-block-site-title a,
.wp-block-site-logo a, .custom-logo-link {
    color: #ffffff !important;
}

/* Entire header row/columns */
header .wp-block-columns,
header .wp-block-column,
header .wp-block-row,
header .wp-block-group,
.wp-block-template-part > .wp-block-group,
body > .wp-site-blocks > header {
    background-color: #0d3069 !important;
    color: #fff !important;
}

/* Override TT24's CSS custom properties at the root */
header {
    --wp--preset--color--base: #0d3069 !important;
    --wp--preset--color--contrast: #ffffff !important;
    --wp--preset--color--primary: #0d3069 !important;
    --wp--custom--color--foreground: #ffffff !important;
}

/* Mobile hamburger */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Mobile nav dropdown */
.wp-block-navigation__responsive-container.is-menu-open {
    background: #0d3069 !important;
    color: #fff !important;
}
.wp-block-navigation__responsive-container.is-menu-open a {
    color: #fff !important;
}


/* ── Footer: force white text, navy background ──────────────────────── */
footer, .site-footer, #colophon,
.wp-block-template-part[data-slug="footer"],
.wp-block-template-part[data-slug="footer"] > *,
.wp-block-template-part[data-slug="footer"] .wp-block-group,
.wp-block-template-part[data-slug="footer"] .wp-block-columns,
.wp-block-template-part[data-slug="footer"] .wp-block-column,
.wp-site-blocks > footer,
.wp-site-blocks > footer * {
    background-color: #0d3069 !important;
    background: #0d3069 !important;
    color: #ffffff !important;
    --wp--preset--color--base: #0d3069 !important;
    --wp--preset--color--contrast: #ffffff !important;
    --wp--preset--color--primary: #ffffff !important;
}

footer p, footer span, footer li,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.wp-block-template-part[data-slug="footer"] p,
.wp-block-template-part[data-slug="footer"] span,
.wp-block-template-part[data-slug="footer"] li {
    color: #ffffff !important;
    font-weight: 600 !important;
}

footer a,
.wp-block-template-part[data-slug="footer"] a,
.wp-site-blocks > footer a {
    color: rgba(255,255,255,.8) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
footer a:hover,
.wp-block-template-part[data-slug="footer"] a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* Navigation links in footer */
.wp-block-template-part[data-slug="footer"] .wp-block-navigation a,
.wp-block-template-part[data-slug="footer"] .wp-block-navigation-item a,
footer .wp-block-navigation a {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* About, Privacy, Terms etc */
footer .wp-block-navigation-item,
footer nav a,
footer .wp-block-pages-list a {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Copyright text */
footer .wp-block-paragraph,
footer p {
    color: rgba(255,255,255,.85) !important;
    font-weight: 600 !important;
}


/* ══════════════════════════════════════════════════════════════
   BACKGROUND CONSISTENCY — full site override
   Header: #0d3069  |  Body/content: #ffffff  |  Footer: #0d3069
   ══════════════════════════════════════════════════════════════ */

/* Reset TT24 custom properties site-wide */
:root, body {
    --wp--preset--color--base:          #ffffff !important;
    --wp--preset--color--contrast:      #0d3069 !important;
    --wp--preset--color--contrast-2:    #374151 !important;
    --wp--preset--color--base-2:        #f8f9fb !important;
    --wp--preset--color--primary:       #0d3069 !important;
    --wp--custom--color--background:    #ffffff !important;
    --wp--custom--color--foreground:    #374151 !important;
    background-color: #ffffff !important;
}

/* ── Everything between header and footer: white ── */
main, #main, #content, .wp-site-blocks > main,
.entry-content, .wp-block-query,
.wp-block-group:not([class*="triii"]):not(header):not(footer),
.woocommerce, .woocommerce-page,
.woocommerce-cart, .woocommerce-checkout,
.woocommerce-account, .woocommerce-page .entry-content,
article, .hentry, .page-content,
.wp-block-post-content {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #374151 !important;
}

/* Specific TT24 wrapper divs that go gray */
.wp-site-blocks,
.wp-block-template-part[data-slug="content"] {
    background: #ffffff !important;
}

/* Any full-width section blocks TT24 adds */
.wp-block-group.alignfull,
.wp-block-cover.alignfull {
    background: #ffffff !important;
}

/* Constrained layout containers */
.is-layout-constrained,
.is-layout-flow,
.is-layout-flex:not([class*="triii"]):not(header):not(footer) {
    background: transparent !important;
}

/* ── Sidebar / widgets if present ── */
.widget-area, aside { background: #f8f9fb !important; }

/* ── Cart / Checkout / Account pages ── */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content {
    background: #ffffff !important;
}

/* ── WC table rows ── */
.woocommerce table.shop_table tbody tr,
.woocommerce table.shop_table tbody tr td {
    background: #ffffff !important;
}
.woocommerce table.shop_table tbody tr:nth-child(even) td {
    background: #f8f9fb !important;
}

/* ── Remove any black/dark backgrounds TT24 may inject ── */
.wp-block-separator { border-color: #e5e7eb !important; }

/* Headings inherit navy */
h1, h2, h3, h4, h5, h6 {
    color: #0d3069 !important;
}
/* But in header/footer they're white */
header h1, header h2, header h3,
footer h1, footer h2, footer h3 {
    color: #ffffff !important;
}

/* Body text stays readable gray */
p, li, span, td, th, label {
    color: #374151;
}


/* ── Logo sizing — larger ─────────────────────────────────────────────── */
.custom-logo,
.wp-block-site-logo img,
.wp-block-site-logo .custom-logo,
header img.custom-logo,
.custom-logo-link img,
header .wp-block-site-logo img {
    max-height: 80px !important;
    height: 80px !important;
    width: auto !important;
    max-width: 260px !important;
}

.wp-block-site-logo,
.custom-logo-link {
    display: flex !important;
    align-items: center !important;
}

@media (max-width: 640px) {
    .custom-logo,
    .wp-block-site-logo img,
    header .wp-block-site-logo img {
        max-height: 56px !important;
        height: 56px !important;
    }
}


/* ── Move savings ribbon to bottom-right of dark band, clear of label ── */
.tb-savings-ribbon {
    top: auto !important;
    bottom: 12px !important;
    right: 0 !important;
    border-radius: 6px 0 0 6px !important;
    font-size: 12px !important;
    padding: 5px 14px 5px 10px !important;
    z-index: 4 !important;
}

/* Ensure label stays at top and doesn't overlap */
.tb-label {
    top: 0 !important;
    z-index: 5 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
}


/* ── Logo white filter ───────────────────────────────────────────────── */
header .custom-logo,
header .wp-block-site-logo img,
.wp-block-template-part[data-slug="header"] img,
.wp-block-template-part[data-slug="header"] .custom-logo,
.wp-block-site-logo img {
    filter: brightness(0) invert(1) !important;
}


/* ── White logo — maximum specificity ───────────────────────────────── */
img.custom-logo,
a.custom-logo-link img,
.wp-block-site-logo img,
.wp-block-site-logo a img,
header img,
.wp-block-template-part img.custom-logo,
div[style*="background-color:#0d3069"] img,
div[style*="background-color: #0d3069"] img {
    filter: brightness(0) invert(1) !important;
}