/* Docs page overrides for header and footer */

/* Override Hextra styles for docs pages */
body:has(.hx-mx-auto.hx-flex.hx-max-w-screen-xl) {
  /* Ensure header uses site styles */
}

body:has(.hx-mx-auto.hx-flex.hx-max-w-screen-xl) nav a {
  color: rgb(100 116 139) !important; /* slate-500 */
}

body:has(.hx-mx-auto.hx-flex.hx-max-w-screen-xl) nav a:hover {
  color: rgb(15 23 42) !important; /* slate-900 */
}

/* Fix Products button to match Pricing and Contact link colors */
body:has(.hx-mx-auto.hx-flex.hx-max-w-screen-xl) nav button {
  color: rgb(100 116 139) !important; /* slate-500 - same as nav links */
  font-weight: 500 !important; /* Medium weight for better readability */
}

body:has(.hx-mx-auto.hx-flex.hx-max-w-screen-xl) nav button:hover {
  color: rgb(15 23 42) !important; /* slate-900 - same as nav link hover */
}

body:has(.hx-mx-auto.hx-flex.hx-max-w-screen-xl) a[href*="cloud.paretosecurity.com"] {
  color: rgb(14 165 233) !important; /* sky-500 */
  margin-right: 0.3rem !important; /* Margin between login and start for free */
  font-weight: 600 !important; 
}

body:has(.hx-mx-auto.hx-flex.hx-max-w-screen-xl) a[href*="cloud.paretosecurity.com"]:hover {
  color: rgb(2 132 199) !important; /* sky-600 */
}

/* Style Start for Free button */
body:has(.hx-mx-auto.hx-flex.hx-max-w-screen-xl) a[data-modal-id="signup-modal"] {
  background-color: rgb(2 132 199) !important; /* sky-600 */
  color: white !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.375rem !important;
  font-weight: 500 !important; /* Semi-bold */
  border: none !important;
  transition: background-color 0.2s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

body:has(.hx-mx-auto.hx-flex.hx-max-w-screen-xl) a[data-modal-id="signup-modal"]:hover {
  background-color: rgb(3 105 161) !important; /* sky-700 */
  color: white !important; /* Ensure text stays white on hover */
}

/* Fix footer styles on docs pages */
body:has(.hx-mx-auto.hx-flex.hx-max-w-screen-xl) footer {
  margin-top: 1rem;
}

body:has(.hx-mx-auto.hx-flex.hx-max-w-screen-xl) footer a {
  color: rgb(100 116 139) !important; /* slate-500 */
  font-size: 1rem !important;
}

body:has(.hx-mx-auto.hx-flex.hx-max-w-screen-xl) footer a:hover {
  color: rgb(15 23 42) !important; /* slate-900 */
}

body:has(.hx-mx-auto.hx-flex.hx-max-w-screen-xl) footer h3 {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgb(148 163 184) !important; /* slate-400 */
}

body:has(.hx-mx-auto.hx-flex.hx-max-w-screen-xl) footer p {
  color: rgb(71 85 105) !important; /* slate-600 */
}

/* Ensure proper spacing and styling for header */
body:has(.hx-mx-auto.hx-flex.hx-max-w-screen-xl) .bg-slate-50 {
  background-color: rgb(248 250 252) !important;
}

/* Header separator for docs pages */
body:has(.hx-mx-auto.hx-flex.hx-max-w-screen-xl) main::before {
  content: "";
  display: block;
  border-bottom: 1px solid rgb(226 232 240);
  margin-bottom: 0;
}

/* Fix any Hextra-specific footer text colors */
footer .hx-text-gray-600,
footer .text-zinc-600 {
  color: rgb(71 85 105) !important; /* slate-600 */
}

/* Ensure consistent link styling in footer */
footer .text-slate-400 {
  color: rgb(148 163 184) !important;
}

footer .text-slate-400:hover {
  color: rgb(100 116 139) !important; /* slate-500 */
}

/* Fix "Was this page helpful?" feedback textarea and submit button */
body:has(.hx-mx-auto.hx-flex.hx-max-w-screen-xl) {
  & textarea {
    border: 1px solid rgb(148 163 184) !important; /* slate-400 - even darker border */
    padding: 0.75rem !important; /* Add internal spacing */
  }
  
  & textarea:focus {
    border-color: rgb(14 165 233) !important; /* sky-500 - darker blue */
    outline: none !important;
  }
  
  /* Style submit button only in feedback form using its container ID */
  & #feedback-emoji-submit-container button {
    background-color: rgb(2 132 199) !important; /* sky-600 - darker blue */
    color: white !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 0.375rem !important;
    font-weight: 500 !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
  }
  
  & #feedback-emoji-submit-container button:hover {
    background-color: rgb(3 105 161) !important; /* sky-700 */
  }
  
  & #feedback-emoji-submit-container button:focus {
    outline: 2px solid rgb(14 165 233) !important;
    outline-offset: 2px !important;
  }
}

/* Fix signup modal styling */
#signup-modal {
  /* Ensure proper positioning and z-index */
  position: fixed !important;
  z-index: 9999 !important;
  inset: 0 !important; /* Full screen coverage */
  
  /* Only apply flex when modal is visible */
  &:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Fix modal backdrop */
  & .fixed.inset-0 {
    background-color: rgba(0, 0, 0, 0.5) !important;
  }
  
  /* Fix modal content container */
  & .relative {
    background-color: white !important;
    border-radius: 0.5rem !important;
    box-shadow: none !important; /* Remove all shadows */
    max-width: 35rem !important; 
    margin: 0 !important; /* Remove margin for proper centering */
    max-height: 50vh !important; 
    overflow: visible !important; /* No scrolling */
    position: relative !important;
  }
  
  /* Remove all drop shadows from any element */
  & * {
    box-shadow: none !important;
  }
  
  /* Override all spacing - target the modal content specifically */
  & .p-6,
  & .px-6,
  & .py-6 {
    padding: 1rem !important;
  }
  
  /* Remove all margins and spacing utilities */
  & [class*="space-y-"] > * + * {
    margin-top: 0.5rem !important;
  }
  
  & [class*="mb-"],
  & [class*="mt-"],
  & [class*="my-"] {
    margin: 0 !important;
  }
  
  & p,
  & div,
  & form > * {
    margin-bottom: 0.5rem !important;
  }
  
  /* Style modal title */
  & h5 {
    font-size: 1.8rem !important; 
    font-weight: 500 !important;
    margin-bottom: 0.1rem !important;
    padding-top: 2rem !important; /* Add top padding */
  }
  
  /* Style close button */
  & button[aria-label="Close"],
  & button:has(svg) {
    position: absolute !important;
    top: 1rem !important;
    right: 2rem !important;
    background: transparent !important;
    border: none !important;
    padding: 0.5rem !important;
    cursor: pointer !important;
    color: rgb(107 114 128) !important; /* gray-500 */
  }
  
  & button[aria-label="Close"]:hover,
  & button:has(svg):hover {
    color: rgb(55 65 81) !important; /* gray-700 */
  }
  
  /* Fix form inputs */
  & input[type="text"],
  & input[type="email"] {
    border: 1px solid rgb(226 232 240) !important;
    padding: 0.5rem !important;
    padding-left: 2.5rem !important; /* Add left padding for icon */
    border-radius: 0.1rem !important;
  }
  
  /* Fix email input container with icon */
  & .relative:has(input[type="email"]) {
    position: relative !important;
  }
  
  & .relative:has(input[type="email"]) svg {
    position: absolute !important;
    left: 0.75rem !important;
    top: 60% !important;
    transform: translateY(-50%) !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
  
  & input[type="text"]:focus,
  & input[type="email"]:focus {
    border-color: rgb(14 165 233) !important;
    outline: none !important;
  }
  
  /* Fix submit button in modal */
  & button[type="submit"] {
    background-color: rgb(2 132 199) !important;
    color: white !important;
    padding: 0.75rem !important;
    border-radius: 0.375rem !important;
    font-weight: 500 !important;
    border: none !important;
  }
  
  & button[type="submit"]:hover {
    background-color: rgb(3 105 161) !important;
  }
}

/* Additional footer fixes for docs pages */
body:has(.hx-mx-auto.hx-flex.hx-max-w-screen-xl) footer {
  & h3 {
    margin-bottom: 1rem !important;
  }
  
  & img[src*="cyber-essentials"],
  & img[alt*="Cyber Essentials"] {
    max-width: 95px !important;
    height: auto !important;
  }
  
  /* Target the paragraph containing the EU flag */
  & p:has(img[src*="flag-of-europe"]) {
    margin-bottom: 1.5rem !important;
  }
  
  /* Alternative: Target the space-y-8 div containing logo, address, and social links */
  & .space-y-8 > div:last-child {
    margin-top: 1.5rem !important;
  }
  
  & > div > div:last-child {
    border-top: 1px solid rgb(226 232 240) !important; /* slate-200 */
    padding-top: 2rem !important;
    margin-top: 2rem !important;
  }
}