/* Custom styles for Safer Search */

/* Instruction step styling */
.instruction-step {
  position: relative;
  padding-left: 2.5rem;
}

.instruction-step:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 1.75rem;
  height: 1.75rem;
  background-color: #333333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}

.instruction-step:nth-child(1):before { content: "1"; }
.instruction-step:nth-child(2):before { content: "2"; }
.instruction-step:nth-child(3):before { content: "3"; }
.instruction-step:nth-child(4):before { content: "4"; }
.instruction-step:nth-child(5):before { content: "5"; }

/* Focus styling */
input:focus, button:focus {
  outline: none;
}

/* Link styling */
a:not(.contact-info a) {
  color: inherit;
  text-decoration: inherit;
}

* {
  margin: 0;
  padding: 0;
}

/* Basic element styling */
hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

/* Theme colors */
:root {
  --primary-color: #051f45;
  --secondary-color: #2d4a70;
}

/* Tailwind CSS v3.4.16 */
*, ::after, ::before {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

::after, ::before {
  --tw-content: '';
}

:host, html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  line-height: inherit;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* Prevent horizontal scrolling */
      background: linear-gradient(135deg, #cae3fd 0%, #fff 100%);
}

/* Tailwind utilities */
.container { width: 100%; }
@media (min-width: 640px) { .container { max-width: 640px; } }
@media (min-width: 768px) { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } }

/* Margin utilities */
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-auto { margin-top: auto; }

/* Display utilities */
.flex { display: flex; }

/* Sizing utilities */
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.w-12 { width: 3rem; }
.w-auto { width: auto; }
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 58rem; }

/* Flex utilities */
.flex-grow { flex-grow: 1; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-3 { gap: 0.75rem; }

/* Spacing utilities */
.space-x-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

/* Text utilities */
.whitespace-nowrap { white-space: nowrap; }
.text-center { text-align: center; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }

/* Color utilities */
.bg-gray-50 { background-color: rgb(249 250 251); }
.bg-white { background-color: rgb(255 255 255); }
.bg-\[\#051f45\] { background-color: rgb(5, 31, 69); }
.text-gray-800 { color: rgb(31 41 55); }
.text-gray-500 { color: rgb(107 114 128); }
.text-gray-600 { color: rgb(75 85 99); }
.text-gray-900 { color: rgb(17 24 39); }
.text-white { color: rgb(255 255 255); }

/* Border utilities */
.rounded-lg { border-radius: 16px; }

/* Shadow utilities */
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* Padding utilities */
.p-8 { padding: 2rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* Transition utilities */
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Hover utilities */
.hover\:text-black:hover { color: rgb(0 0 0); }
.hover\:text-secondary:hover { color: var(--secondary-color); }

/* Footer styling to match lander page */
footer {

}

footer p, footer a {
  color: ccc;
}

footer a:hover {
  color: #256c6f !important;
}
.logoColor {
  color: #2e7d32;
  font-size: 24px;
}

.navSticky {
      backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(255, 228, 181, 0.3);
    position: fixed;
}
main {
  padding-top: 100px !important;
}

/* Mobile responsiveness improvements */
@media (max-width: 640px) {
  .p-8 { padding: 1.5rem; }
  .py-12 { padding-top: 2rem; padding-bottom: 2rem; }
  .mb-10 { margin-bottom: 1.5rem; }
  
  .text-3xl { font-size: 1.5rem; line-height: 2rem; }
  .text-2xl { font-size: 1.25rem; line-height: 1.75rem; }
  .text-xl { font-size: 1.125rem; line-height: 1.5rem; }
  
  .footer-links {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  
  .footer-links > a {
    margin: 0.25rem 0;
  }
  
  .space-x-6 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
  
  .instruction-step {
    padding-left: 2rem;
  }
  
  .instruction-step:before {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  /* Reduce footer padding */
  .py-6 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  
  /* Reduce margin below copyright text */
  .mb-4 {
    margin-bottom: 0.5rem;
  }
  
  /* Adjust header for mobile */
  .h-16 { height: 3.5rem; }
  .h-12 { height: 2.5rem; }
  .w-12 { width: 2.5rem; }
  .text-3xl { font-size: 1.5rem; line-height: 1.75rem; }
}

/* Ensure proper spacing in footer links on mobile */
@media (max-width: 480px) {
  .footer-links-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
  }
  
  .space-x-6 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
  }
  
  .space-x-6 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0 !important;
    margin-top: 0.5rem;
  }
  
  /* Further adjust header for small mobile */
  .text-3xl { font-size: 1.25rem; line-height: 1.5rem; }
}