/*
 * ComplySignage.com — Custom CSS
 * Goals: readable typography, tidy spacing, consistent focus/hover behavior,
 * accessible UI rings, clean header icons, and a seamless search popup.
 */

/* ========================================================================= */
/* BRAND MARK                                                                */
/* ========================================================================= */

img[data-zs-logo]{
  height:32px !important;            /* logo height */
  width:auto !important;              /* keep aspect ratio */
}

/* ========================================================================= */
/* TYPOGRAPHY & SPACING (paragraphs, lists, headings)                        */
/* ========================================================================= */

/* Exclude top bar + SalesIQ chat from global text rules */
:root{
  --exclude-areas: .theme-topbar-area *, #zsiq_float *, .siq-popup *;
}

/* Paragraph rhythm */
p:not(var(--exclude-areas)){
  line-height:1.5 !important;
  margin-top:0 !important;
  margin-bottom:1rem !important;
}

/* List spacing */
ul:not(var(--exclude-areas)),
ol:not(var(--exclude-areas)){
  margin-top:0 !important;
  margin-bottom:1.5rem !important;
  padding-left:1.5rem !important;
}

/* Tighten the paragraph that sits right before a list */
p:last-of-type:not(var(--exclude-areas)){
  margin-bottom:0.2rem !important;
}

/* Headings (visual hierarchy) */
h1:not(var(--exclude-areas)){ line-height:1.1 !important; margin:2.5rem 0 1rem !important; }
h2:not(var(--exclude-areas)){ line-height:1.2 !important; margin:2rem 0 0.8rem !important; }
h3:not(var(--exclude-areas)){ line-height:1.25 !important; margin:1.5rem 0 0.6rem !important; }
h4:not(var(--exclude-areas)){ line-height:1.3 !important; margin:1.25rem 0 0.5rem !important; }
h5:not(var(--exclude-areas)){ line-height:1.4 !important; margin:1rem 0 0.4rem !important; }
h6:not(var(--exclude-areas)){ line-height:1.4 !important; margin:1rem 0 0.4rem !important; }

/* List items and text inside list items */
ul li:not(var(--exclude-areas)),
ol li:not(var(--exclude-areas)){
  margin-bottom:0 !important;
  list-style-position:outside !important;
  text-align:left !important;
}
ul li p:not(var(--exclude-areas)),
ol li p:not(var(--exclude-areas)){
  line-height:1.4 !important;
  margin:0 !important;
}

/* Nested lists a touch tighter */
ul ul:not(var(--exclude-areas)),
ol ol:not(var(--exclude-areas)){
  margin-top:0.5rem !important;
  margin-bottom:0.5rem !important;
}

/* ========================================================================= */
/* ACCESSIBILITY: UNDERLINE TEXT LINKS                                       */
/* ========================================================================= */

/*
 * Target only the main content wrapper (.theme-content-area) to find
 * plain text links. This reliably excludes the header, top bar, and footer.
*/
.theme-content-area a:not([class]) {
    text-decoration: underline !important;
}

/* Remove the underline on hover */
.theme-content-area a:not([class]):hover {
    text-decoration: none !important;
}

/* Allow text and footer links to be transformable */
.theme-content-area a:not([class]),
.theme-footer-area a:not([class]) {
    display: inline-block;
}

/* ========================================================================= */
/* GLOBAL INTERACTIONS (links, buttons, inputs) - CLEANED UP FOR FOCUS FIX   */
/* ========================================================================= */

/* Universal Border Radius (The Safe Version) */
.zpbutton-wrapper, .zpbutton, .z-button, .zc-button, .btn, .button, a.button, a.zpbutton,
input[type="submit"],
button,
input[type="text"],
input[type="email"], textarea, .social-icon a{
  border-radius:5px !important;
}

/* Global Focus/Hover Handling (Simplified for Reliability) */
a:focus, button:focus, input:focus, a:focus-visible, button:focus-visible, input:focus-visible {
    /* Set a standard, reliable focus ring */
    outline: 2px solid #C83803 !important;
    outline-offset: 2px !important;
    border-radius:5px !important;
}

/* ========================================================================= */
/* THEME-SPECIFIC                                                            */
/* ========================================================================= */

/* Brand mark + caption align at bottom */
.theme-branding-info{
  display:flex;
  align-items:flex-end;
}

/* Remove decorative divider under footer headings */
.zpheading::after{ display:none !important; }

/* ========================================================================= */
/* HEADER ICONS (search, wishlist, cart)                                     */
/* ========================================================================= */

.theme-search-and-mini-cart-group{
  display:inline-flex !important;
  align-items:center !important;
  gap:12px !important;
}
.theme-search-and-mini-cart-group > *{
  display:inline-flex !important;
  align-items:center !important;
}
.theme-search-and-mini-cart-group [data-zs-search-icon],
.theme-search-and-mini-cart-group a[data-show-wishlist-icon],
.theme-search-and-mini-cart-group [data-zs-cart-icon]{
  display:inline-grid !important;
  place-items:center !important;
  width:32px !important;
  height:32px !important;
  border-radius:5px !important;
  background:transparent !important;
}
.theme-search-and-mini-cart-group [data-zs-search-icon] svg,
.theme-search-and-mini-cart-group a[data-show-wishlist-icon] svg,
.theme-search-and-mini-cart-group [data-zs-cart-icon] svg{
  width:20px !important;
  height:20px !important;
  display:block !important;
}

/* One visible ring on hover/focus; no double outline */
.theme-search-and-mini-cart-group [data-zs-search-icon]:hover,
.theme-search-and-mini-cart-group [data-zs-search-icon]:focus-visible,
.theme-search-and-mini-cart-group a[data-show-wishlist-icon]:hover,
.theme-search-and-mini-cart-group a[data-show-wishlist-icon]:focus-visible,
.theme-search-and-mini-cart-group [data-zs-cart-icon]:hover,
.theme-search-and-mini-cart-group [data-zs-cart-icon]:focus-visible{
  outline:0 !important;
  box-shadow: inset 0 0 0 2px #C83803 !important;
  background: rgba(200,56,3,.08) !important;
}

/* Prevent wishlist inner span from drawing its own box */
.theme-search-and-mini-cart-group a[data-show-wishlist-icon] .theme-wishlist-icon{
  pointer-events:none !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  outline:0 !important; box-shadow:none !important; background:transparent !important;
}
.theme-search-and-mini-cart-group a[data-show-wishlist-icon] .theme-wishlist-icon::before,
.theme-search-and-mini-cart-group a[data-show-wishlist-icon] .theme-wishlist-icon::after{
  content:none !important; display:none !important;
}

/* Also keep the global outline off the wishlist anchor itself */
.theme-search-and-mini-cart-group a[data-show-wishlist-icon],
.theme-search-and-mini-cart-group a[data-show-wishlist-icon]:hover,
.theme-search-and-mini-cart-group a[data-show-wishlist-icon]:focus,
.theme-search-and-mini-cart-group a[data-show-wishlist-icon]:focus-visible,
.theme-search-and-mini-cart-group a[data-show-wishlist-icon]:active{
  outline:0 !important;
  outline-offset:0 !important;
}

/* ========================================================================= */
/* MENU: MINIMAL CODE FOR GROWTH & VISUAL CONSISTENCY                        */
/* ========================================================================= */

/* 1. Base Styles: Remove the unintended underline from menu links */
.theme-menu-area a, 
[data-zs-menu-container] a {
    text-decoration: none !important;
    
    /* Ensure all links have the transition for the smooth grow effect */
    transition: transform 0.2s ease-in-out, background 0.2s ease-in-out !important;
    
    /* Ensure links have room for the active border */
    padding-bottom: 5px !important; 
}

/* 2. Hover/Focus Styles: Apply the radius and background (growth is now global) */
.theme-menu-area a:hover,
.theme-menu-area a:focus,
.theme-menu-area a:focus-visible {
    /* Apply the radius and light background from the Visual Editor */
    border-radius: 5px !important;
    background: rgba(200,56,3,.08) !important;
}

/* ========================================================================= */
/* SOCIAL ICONS                                                              */
/* ========================================================================= */

.zpsocialprofile:hover *{ 
    fill:#C83803 !important; 
}

/* ========================================================================= */
/* UTILITIES                                                                 */
/* ========================================================================= */

/* Visually hidden text for screen-reader-only labels */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* ========================================================================= */
/* SEARCH POPUP: SUPPRESS TOP BAR                                            */
/* ========================================================================= */

/* Target the main container of the search bar to remove any top border */
.theme-search-field-container {
    border-top: none !important;
    border-top-width: 0 !important;
    padding-top: 0 !important;
}

/* Target the element above the form, if any, to remove its content/border */
.theme-search-field-container::before,
.theme-search-field-container::after {
    content: none !important;
    border-top: none !important;
    display: none !important;
}

/* ========================================================================= */
/* GLOBAL SUBMIT BUTTON INTERACTIONS (HOVER, FOCUS, GROWTH & COLOR)          */
/* ========================================================================= */

/* --- Target SEARCH AND NEWSLETTER Buttons for the Darker Color --- */
.theme-search-field-container [data-zs-search]:hover, /* Search "Go" Button */
.theme-search-field-container [data-zs-search]:focus, 
.zpnewsletter-button:hover, /* NEWSLETTER BUTTON */
.zpnewsletter-button:focus { 
    background: #962A02 !important; 
}

/* ========================================================================= */
/* TOP BAR & PORTAL LINKS - Accessibility & Consistency                      */
/* ========================================================================= */

/* --- A. Shared Styling for All Links (Portal & Top Bar) --- */
/* Applies a consistent "button-like" appearance on all screen sizes. */
.theme-portal-content > a,
.theme-topbar-info a {
    /* Layout and Sizing */
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding: 5px 10px !important;
    min-width: 70px;
    
    /* Appearance */
    border-radius: 5px !important;
    color: #F2F4F7 !important;
    fill: currentColor !important;

    /* Animation */
    transition: all 0.2s ease-in-out !important;
}

/* --- B. Shared Hover/Focus State --- */
.theme-portal-content > a:hover,
.theme-portal-content > a:focus,
.theme-topbar-info a:hover,
.theme-topbar-info a:focus {
    background: rgba(200,56,3,.08) !important;
    color: #C83803 !important; /* Sets the link's color */
    box-shadow: inset 0 0 0 2px #C83803 !important;
    outline: none !important;
}

/* FIX: Force text and icons inside the link to inherit the correct hover color */
.theme-portal-content > a:hover *,
.theme-portal-content > a:focus *,
.theme-topbar-info a:hover *,
.theme-topbar-info a:focus * {
    color: inherit !important;
    fill: inherit !important;
}

/* Add space between the phone icon and the number */
.theme-topbar-info a {
    gap: 5px !important;
}

/* ========================================================================= */
/* GLOBAL LINK & BUTTON HOVER EFFECT (GROWTH)                                */
/* ========================================================================= */

/* --- 1. Add a smooth transition to all interactive elements --- */
a, button, .zpsocialprofile {
    transition: transform 0.2s ease-in-out !important;
}

/* --- 2. Apply the growth effect on hover/focus --- */
/* Excludes elements with special hover effects like header icons. */
a:hover:not([data-zs-search-icon], [data-show-wishlist-icon], [data-zs-cart-icon]),
a:focus:not([data-zs-search-icon], [data-show-wishlist-icon], [data-zs-cart-icon]),
button:hover,
button:focus,
.zpsocialprofile:hover {
    transform: scale(1.05) !important;
}

/* ========================================================================= */
/* FINAL FIX: Force Top Bar Hover Color                                      */
/* ========================================================================= */

/*
 * This uses a highly specific selector to override the theme's default
 * dark orange link hover color in the top bar.
*/

/* --- Target the text inside the portal/topbar links on hover --- */
.theme-header-topbar .theme-portal-content > a:hover *,
.theme-header-topbar .theme-topbar-info a:hover span {
    color: #C83803 !important;
}

/* --- Target the icon inside the topbar phone link on hover --- */
.theme-header-topbar .theme-topbar-info a:hover svg {
    fill: #C83803 !important;
}