/*
 * Nice Package — child theme branding overrides
 *
 * Lives in the child theme so it ships via git, not via the WP customizer's
 * Additional CSS field. Source of truth going forward; the customizer field
 * still holds the v1/v2 overrides for now and should eventually be cleared.
 *
 * Specificity strategy: most parent-theme color-scheme rules are scoped to
 * `.scheme_default .top_panel ...` (0,3,2). To win without `!important`
 * wars, prefix nav rules with `body.scheme_default` (0,3,3+).
 *
 * Color tokens (kept in sync with site-assets/README.md):
 *   --np-primary      #F9A01B  brand orange (fills, accents — not body text on white)
 *   --np-orange-text  #9B5500  AA-compliant orange-toned text on white (5.68:1)
 *   --np-orange-dark  #B36500  hover/pressed state
 *   --np-navy         #1F417E  secondary brand, also AA-strong on white (11.07:1)
 */

:root {
  --np-primary:      #F9A01B;
  --np-orange-text:  #9B5500;
  --np-orange-dark:  #B36500;
  --np-navy:         #1F417E;
}

/* --------------------------------------------------------------
 * Header / top nav — fix the orange-on-white contrast failure.
 *
 * Current staging state: nav background is white (parent theme
 * customizer wins over our orange-bg override). Nav text was
 * rendering as #F9A01B = 2.19:1 vs white, fails WCAG AA.
 *
 * Fix: dark amber text on white = 5.68:1 (AA pass), preserves
 * the orange brand feel. Specificity (0,3,3) beats the parent
 * theme's scheme_default rule at (0,3,2).
 * -------------------------------------------------------------- */

body.scheme_default .top_panel .sc_layouts_menu_nav > li > a,
body.scheme_default .top_panel .sc_layouts_menu_nav > li > a *,
body.scheme_default .top_panel .sc_layouts_menu_nav > li.menu-item-has-children > a::after,
body.scheme_default .top_panel .menu_main_nav > li > a,
body.scheme_default .top_panel .menu_main_nav > li > a *,
body.scheme_default .top_panel .sc_layouts_item a:not(.sc_button):not(.button) {
  color: var(--np-orange-text) !important;
}

body.scheme_default .top_panel .sc_layouts_menu_nav > li > a:hover,
body.scheme_default .top_panel .sc_layouts_menu_nav > li.sfHover > a,
body.scheme_default .top_panel .sc_layouts_menu_nav > li.current-menu-item > a,
body.scheme_default .top_panel .sc_layouts_menu_nav > li.current-menu-parent > a,
body.scheme_default .top_panel .sc_layouts_menu_nav > li.current-menu-ancestor > a {
  color: var(--np-orange-dark) !important;
}

/* Sub-menu (dropdown) items — same treatment */
body.scheme_default .sc_layouts_menu_popup .sc_layouts_menu_nav > li > a,
body.scheme_default .sc_layouts_menu_nav > li li > a {
  color: var(--np-orange-text) !important;
}

body.scheme_default .sc_layouts_menu_popup .sc_layouts_menu_nav > li > a:hover,
body.scheme_default .sc_layouts_menu_nav > li li > a:hover {
  background: var(--np-primary) !important;
  color: #FFFFFF !important;
}

/* --------------------------------------------------------------
 * Homepage footer — fix orange-on-orange invisibility.
 *
 * The v1 override `.home .scheme_dark { background: var(--np-primary) }`
 * is overreaching and painting the footer container orange on the
 * homepage. v2 then makes footer links orange. Result: invisible links.
 *
 * Fix: explicitly restore the footer's dark theme background on the
 * homepage so the existing footer link rules read correctly.
 * -------------------------------------------------------------- */

body.home .footer_wrap.scheme_dark,
body.home .footer_wrap .scheme_dark,
body.home .footer_wrap.scheme_dark .vc_column-inner,
body.home .footer_wrap.scheme_dark .elementor-column-wrap,
body.home .footer_wrap.scheme_dark .elementor-widget-wrap,
body.home .footer_wrap .scheme_dark .vc_column-inner,
body.home .footer_wrap .scheme_dark .elementor-column-wrap,
body.home .footer_wrap .scheme_dark .elementor-widget-wrap {
  background-color: #1c0a2e !important;
  background-image: none !important;
}

/* Footer links: keep brand orange but only on the actual dark footer.
 * The orange links on the dark footer pass AA (7.68:1 on #1c0a2e). */
.footer_wrap.scheme_dark a,
.footer_wrap .scheme_dark a,
.footer_wrap.scheme_dark .sc_layouts_item a {
  color: var(--np-primary) !important;
}

.footer_wrap.scheme_dark a:hover,
.footer_wrap .scheme_dark a:hover {
  color: var(--np-orange-dark) !important;
}

/* --------------------------------------------------------------
 * Body content links inside Elementor pages.
 *
 * v2's `.entry-content a` / `.post_content a` selectors don't match
 * Elementor-rendered pages (FAQ, STI, Toolbox, How-To, Find-Condoms).
 * Replace with selectors that actually fire on those pages.
 * Excludes Elementor buttons + theme buttons so they keep their fill.
 * -------------------------------------------------------------- */

.elementor-widget-text-editor a:not(.elementor-button):not(.sc_button):not(.wp-block-button__link),
.elementor-widget-theme-post-content a:not(.elementor-button):not(.sc_button):not(.wp-block-button__link),
.elementor-widget-container p a:not(.elementor-button):not(.sc_button):not(.wp-block-button__link) {
  color: var(--np-orange-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.elementor-widget-text-editor a:hover,
.elementor-widget-theme-post-content a:hover {
  color: var(--np-orange-dark);
}

/* --------------------------------------------------------------
 * WooCommerce surfaces (cart, checkout, my-account).
 *
 * Keep orange fill on primary buttons. Use navy text on the orange
 * fill (4.52:1, AA pass) — better than the v2 `--np-on-orange-text`
 * indirection. Hover flips to a darker fill with white text.
 * -------------------------------------------------------------- */

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce a.button.alt {
  background: var(--np-primary) !important;
  color: var(--np-navy) !important;
  border-color: var(--np-primary) !important;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover {
  background: var(--np-orange-dark) !important;
  border-color: var(--np-orange-dark) !important;
  color: #FFFFFF !important;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--np-orange-text);
  font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--np-orange-text);
  border-left-color: var(--np-primary);
}

.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--np-primary) !important;
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--np-primary) !important;
}

/* --------------------------------------------------------------
 * Header logo reset.
 *
 * Note: the logo anchor still has href="#" on staging. That's a
 * markup issue (Elementor widget setting), not a CSS issue. Flag
 * for admin fix. CSS below just makes sure the anchor doesn't
 * inherit button styling.
 * -------------------------------------------------------------- */

.top_panel .sc_layouts_logo a,
.sc_layouts_logo a {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------
 * WooCommerce My Account — Nice Package brand pass.
 *
 * The default WC My Account screen ships with link blue + grey
 * borders. Re-skin in NP orange + navy with AA-compliant text.
 * -------------------------------------------------------------- */

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--np-orange-text) !important;
  border-color: var(--np-primary) !important;
}

.woocommerce-MyAccount-navigation ul li.is-active {
  border-left: 3px solid var(--np-primary);
}

.woocommerce-MyAccount-content a,
.woocommerce-MyAccount-content a:visited {
  color: var(--np-orange-text);
}

.woocommerce-MyAccount-content a:hover {
  color: var(--np-orange-dark);
  text-decoration: underline;
}

.woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit {
  background: var(--np-primary) !important;
  color: var(--np-navy) !important;
  border-color: var(--np-primary) !important;
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-form-login__submit:hover {
  background: var(--np-orange-dark) !important;
  color: #ffffff !important;
}

/* Order tables, addresses, account details — soft navy accents */
.woocommerce-orders-table thead,
.woocommerce-table--order-details thead {
  background: var(--np-navy);
  color: #ffffff;
}

.woocommerce-orders-table thead th,
.woocommerce-table--order-details thead th {
  color: #ffffff !important;
}

/* --------------------------------------------------------------
 * Launch program-message callout.
 * -------------------------------------------------------------- */

.np-program-message {
  max-width: 980px;
  margin: 48px auto 0;
  padding: 28px 32px;
  background: #fff8ed;
  border: 2px solid var(--np-primary);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(31, 65, 126, 0.08);
}

.np-program-message p {
  margin: 0;
  color: var(--np-navy);
  font-size: 18px;
  line-height: 1.65;
}

.np-program-message strong {
  color: var(--np-orange-text);
}

@media (max-width: 767px) {
  .np-program-message {
    margin: 32px 18px 0;
    padding: 22px 20px;
    border-radius: 14px;
  }

  .np-program-message p {
    font-size: 16px;
  }
}


/* --------------------------------------------------------------
 * Nice Package header consistency fix, 2026-05-20.
 *
 * Elementor main header 724 had a 48px top padding on subpages, which
 * created the visible white band above the logo/nav. Match the homepage
 * header rhythm and keep the exact 248x80 Nice Package logo from being
 * upscaled by the 2x logo markup.
 * -------------------------------------------------------------- */
.top_panel_custom_724 .elementor-element-b1b4281 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.top_panel_custom_724 .elementor-element-b1b4281 > .elementor-container {
  min-height: 86px !important;
}

.top_panel_custom_724 .sc_layouts_logo img.logo_image,
.top_panel_custom_1733 .sc_layouts_logo img.logo_image {
  width:250px !important;
  height:80px !important;
  max-width:250px !important;
  max-height:80px !important;
  object-fit: contain !important;
}

.top_panel_custom_724 .sc_layouts_logo,
.top_panel_custom_1733 .sc_layouts_logo {
  line-height: 0 !important;
}


/* --------------------------------------------------------------
 * Header nav hard override, 2026-05-20.
 *
 * The customizer Additional CSS targets all Elementor header/footer pages
 * with a higher-specificity first-child selector, adding a 48px white band
 * above the subpage nav. This selector intentionally beats that rule while
 * staying scoped to the Nice Package main header template only.
 * -------------------------------------------------------------- */
body.page-template-elementor_header_footer header.top_panel_custom_724 section.elementor-section.elementor-element-b1b4281:first-child,
body.page-template-elementor_header_footer header.top_panel_custom_724 section.elementor-section.elementor-element-b1b4281:not(.elementor-inner-section),
body header.top_panel_custom_724 section.elementor-section.elementor-element-b1b4281 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body header.top_panel_custom_724 section.elementor-section.elementor-element-b1b4281 > .elementor-container {
  min-height: 86px !important;
}

body header.top_panel_custom_724 .sc_layouts_logo img.logo_image,
body header.top_panel_custom_1733 .sc_layouts_logo img.logo_image {
  width:250px !important;
  height:80px !important;
  max-width:250px !important;
  max-height:80px !important;
  object-fit: contain !important;
}


/* Keep the exact 248x80 logo lockup as the header's orange block on both
 * Elementor header templates. The homepage template's logo column was
 * narrower than the new lockup, causing a visible orange protrusion; the
 * subpage template was wider, making the header feel inconsistent. */
body header.top_panel_custom_1733 .elementor-element-e70cb96,
body header.top_panel_custom_724 .elementor-element-6fa7af4 {
  width:250px !important;
  max-width:250px !important;
  flex: 0 0 248px !important;
}

body header.top_panel_custom_1733 .elementor-element-11435478,
body header.top_panel_custom_724 .elementor-element-bca610b {
  width: calc(100% - 248px) !important;
  max-width: calc(100% - 248px) !important;
  flex: 0 0 calc(100% - 248px) !important;
}

body header.top_panel_custom_1733 .sc_layouts_logo img.logo_image,
body header.top_panel_custom_724 .sc_layouts_logo img.logo_image {
  display: block !important;
}


/* --------------------------------------------------------------
 * WooCommerce cart/footer contrast cleanup, 2026-05-20.
 * -------------------------------------------------------------- */
.woocommerce-cart table.shop_table thead th,
.woocommerce-cart table.shop_table tbody th,
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-checkout table.shop_table thead th,
.woocommerce-checkout table.shop_table tbody th,
.woocommerce-checkout table.shop_table tfoot th {
  color: #ffffff !important;
}

.woocommerce-cart table.shop_table thead th a,
.woocommerce-cart table.shop_table tbody th a,
.woocommerce-cart .cart_totals table.shop_table th a,
.woocommerce-checkout table.shop_table th a {
  color: #ffffff !important;
}

/* Remove leftover Prisma avatar/star logo from the footer template. */
footer .sc_layouts_logo,
footer a.sc_layouts_logo,
footer img.logo_image[src*="Prisma_Social-Avatar"],
.footer_wrap .sc_layouts_logo,
.footer_wrap a.sc_layouts_logo,
.footer_wrap img.logo_image[src*="Prisma_Social-Avatar"] {
  display: none !important;
}

/* Make footer text readable on the dark purple/navy bar. */
.footer_wrap,
.footer_wrap p,
.footer_wrap span,
.footer_wrap div,
footer,
footer p,
footer span {
  color: rgba(255, 255, 255, 0.92) !important;
}

.footer_wrap a,
footer a {
  color: var(--np-primary) !important;
}

/* Ensure every cart table heading on dark bars is white, including subtotal cells overridden by price styles. */
body.woocommerce-cart table.shop_table thead th.product-subtotal,
body.woocommerce-cart table.shop_table thead th.product-subtotal .amount,
body.woocommerce-cart table.shop_table thead th.product-subtotal span,
body.woocommerce-cart table.shop_table thead th.product-subtotal bdi {
  color: #ffffff !important;
}
/* Checkout account-required notice. */
.np-checkout-account-notice {
  margin: 22px 0 24px;
  padding: 18px 20px;
  background: #fff8ed;
  border: 2px solid var(--np-primary);
  border-radius: 12px;
  color: var(--np-navy);
  box-shadow: 0 10px 24px rgba(31, 65, 126, 0.08);
}

.np-checkout-account-notice strong {
  display: block;
  margin-bottom: 6px;
  color: var(--np-navy);
  font-weight: 700;
}

.np-checkout-account-notice p {
  margin: 0;
  color: var(--np-navy);
  font-size: 15px;
  line-height: 1.55;
}
/* Header cart nav item, appears only when cart has items. */
header .np-cart-menu-item > a,
.top_panel .np-cart-menu-item > a {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

header .np-cart-menu-item .np-cart-icon,
.top_panel .np-cart-menu-item .np-cart-icon {
  font-size: 0.95em;
  line-height: 1;
}

header .np-cart-menu-item .np-cart-count,
.top_panel .np-cart-menu-item .np-cart-count {
  font-size: 0.92em;
}

/* --------------------------------------------------------------
 * May 27 launch meeting account/disclaimer updates.
 * -------------------------------------------------------------- */
.np-account-privacy-box,
.np-account-policy-box,
.np-dashboard-testing-cta {
  max-width: 1170px;
  margin: 0 auto 28px;
  padding: 22px 26px;
  background: #fff8ed;
  border: 2px solid var(--np-primary);
  border-radius: 14px;
  color: var(--np-navy);
  box-shadow: 0 12px 28px rgba(31, 65, 126, 0.08);
}

.np-account-privacy-box strong,
.np-account-policy-box strong,
.np-dashboard-testing-cta strong {
  display: block;
  margin: 0 0 8px;
  color: var(--np-navy);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.np-account-privacy-box p,
.np-account-policy-box p,
.np-dashboard-testing-cta p {
  margin: 0;
  color: var(--np-navy);
  font-size: 16px;
  line-height: 1.6;
}

.np-account-policy-box a,
.np-account-privacy-box a {
  color: var(--np-orange-text);
  font-weight: 700;
  text-decoration: underline;
}

.np-dashboard-testing-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #ffffff;
}

.np-dashboard-testing-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 144px;
  padding: 13px 22px;
  background: var(--np-primary);
  color: var(--np-navy) !important;
  border-radius: 999px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none !important;
  box-shadow: 0 10px 18px rgba(249, 160, 27, 0.22);
}

.np-dashboard-testing-button:hover,
.np-dashboard-testing-button:focus {
  background: var(--np-orange-dark);
  color: #ffffff !important;
}

.woocommerce-account .np-account-privacy-box {
  margin-top: 0;
}

@media (max-width: 767px) {
  .np-account-privacy-box,
  .np-account-policy-box,
  .np-dashboard-testing-cta {
    margin-left: 18px;
    margin-right: 18px;
    padding: 20px;
  }

  .np-dashboard-testing-cta {
    display: block;
  }

  .np-dashboard-testing-button {
    margin-top: 16px;
    width: 100%;
  }
}

/* --------------------------------------------------------------
 * My Account cleanup, 2026-06-05.
 * Hide unused WooCommerce surfaces and normalize oversized headings
 * inherited from the parent theme on Orders, View Order, and Addresses.
 * -------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title,
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
  color: var(--np-navy) !important;
  font-size: clamp(24px, 2.5vw, 32px) !important;
  line-height: 1.2 !important;
  margin: 0 0 18px !important;
  letter-spacing: 0.01em !important;
}

.woocommerce-account .woocommerce-customer-details,
.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account address,
.woocommerce-account .woocommerce-MyAccount-content address {
  color: var(--np-navy) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}

.woocommerce-account address,
.woocommerce-account .woocommerce-MyAccount-content address {
  padding: 18px 20px !important;
  border: 1px solid rgba(31, 65, 126, 0.16) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  font-style: normal !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title {
  margin-top: 24px !important;
}

.woocommerce-account .np-order-tracking-link,
.woocommerce-account .np-order-tracking-number,
.woocommerce-account .np-order-tracking-pending {
  font-size: 15px !important;
  line-height: 1.4 !important;
  white-space: nowrap;
}

.woocommerce-account .np-order-tracking-pending {
  color: rgba(31, 65, 126, 0.72) !important;
}