@import url("typography.css");
/* base.css — global styles shared by every page. typography.css (imported
 * above, must be first per CSS @import spec) declares the @font-face + scale. */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--brand-font);
}

::selection {
  background-color: #EA4325;
  color: #fff;
}

/* Hide scrollbars on horizontally-scrolling rows */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Accessible focus ring in the brand colour */
.focus-brand:focus-visible {
  outline: 2px solid #EA4325;
  outline-offset: 3px;
}

/* Navbar sizing and scroll transition */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(255, 255, 255, 1);
  border-bottom: 1px solid #d1d5db; /* border-gray-300 default */
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              backdrop-filter 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Decrease logo size */
header img {
  /* Controlled by HTML classes */
}

header {
  z-index: 100 !important;
}

/* Frosty glass effect when scrolled */
header.scrolled {
  background-color: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  border-bottom-color: rgba(0, 0, 0, 0.07) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02), 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* Services mega-dropdown overlay (full-width flat opaque white) */
#servicesDropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0 !important;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.12);
  padding: 0.75rem 0 !important;
  z-index: 110;
}

#servicesDropdown.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Blur overlay covering the entire viewport below header */
#heroBlurOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  background: rgba(0, 0, 0, 0.3);
  transition: opacity 0.25s ease;
  opacity: 0;
  z-index: 90;
  pointer-events: none;
  border-radius: 0 !important;
}

#heroBlurOverlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Respect users who prefer reduced motion (covers all pages) */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* ============================================================ */
/* GLOBAL DARK MODE OVERRIDES                                    */
/* ============================================================ */
html.dark,
html.dark body {
  background-color: #0b0d12 !important;
  color: #e5e7eb !important;
}

html.dark header,
html.dark #servicesDropdown,
html.dark #accountDropdown,
html.dark #settingsDropdown {
  background-color: #121620 !important;
  border-color: #1f2735 !important;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5) !important;
}

html.dark header.scrolled {
  background-color: rgba(18, 22, 32, 0.8) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark nav a,
html.dark .cat-label {
  color: #9ca3af !important;
}
html.dark nav a:hover,
html.dark .cat-label:hover {
  color: #ffffff !important;
}

html.dark #servicesDropdown .cat-btn.bg-gray-100 {
  background-color: #242f41 !important;
}

html.dark #servicesDropdown .bg-white\/95,
html.dark #servicesDropdown .hover\:bg-white {
  background-color: #1a2130 !important;
  border: 1px solid #283347 !important;
}

html.dark #servicesDropdown .hover\:bg-white:hover {
  background-color: #242f44 !important;
}

html.dark #servicesDropdown .text-gray-500 {
  color: #9ca3af !important;
}

html.dark .bg-white,
html.dark .bg-white\/90,
html.dark .bg-white\/95 {
  background-color: #181d29 !important;
}

html.dark .text-gray-900,
html.dark .text-gray-950,
html.dark .text-gray-800 {
  color: #f3f4f6 !important;
}

html.dark .text-gray-700 {
  color: #e5e7eb !important;
}

html.dark .text-gray-600 {
  color: #d1d5db !important;
}

html.dark .text-gray-500,
html.dark .text-gray-400 {
  color: #9ca3af !important;
}

html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-gray-400,
html.dark .divide-gray-100 > *,
html.dark .divide-gray-200 > *,
html.dark .border-t,
html.dark .border-b,
html.dark .border-l,
html.dark .border-r {
  border-color: #242f41 !important;
}

html.dark .bg-gray-50 {
  background-color: #0b0d12 !important;
}

html.dark .bg-gray-100 {
  background-color: #1e2637 !important;
}

html.dark .bg-gray-200,
html.dark .bg-gray-300 {
  background-color: #242f41 !important;
}

html.dark .bg-gray-50\/50 {
  background-color: rgba(11, 13, 18, 0.5) !important;
}

/* Active buttons (like active tabs in dashboard) that use bg-gray-900 in light mode */
html.dark .bg-gray-900 {
  background-color: #ffffff !important;
  color: #0b0d12 !important;
}

/* Comparisons table alternating rows in dark mode */
html.dark tr.bg-gray-50,
html.dark tbody tr:nth-child(even) {
  background-color: #151a26 !important;
}

/* Input fields, search bars, textareas, selects */
html.dark input[type="text"],
html.dark select,
html.dark textarea {
  background-color: #1e2637 !important;
  color: #ffffff !important;
  border-color: #242f41 !important;
}
html.dark input[type="text"]::placeholder,
html.dark textarea::placeholder {
  color: #6b7280 !important;
}

/* Dropdown settings elements */
html.dark #settingsDropdown select {
  background-color: #121620 !important;
  color: #e5e7eb !important;
  border-color: #222c3d !important;
}

/* Domain Search Bar input fields */
html.dark input#domainSearchInput,
html.dark input#searchAgainInput {
  background-color: #181d29 !important;
  color: #ffffff !important;
  border-color: #222c3d !important;
}

/* Services subpanel item hover background */
html.dark #servicesDropdown .cat-panel > a:hover {
  background-color: #1f2738 !important;
}

/* Hide Google Translate top banner bar for native look */
.skiptranslate,
iframe.skiptranslate,
.goog-te-banner-frame,
.goog-te-banner {
  display: none !important;
}
body {
  top: 0 !important;
}

/* smooth fadeIn animations for dropdown menus */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
  animation: fadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* smooth slide-down animation for mobile navigation drawer */
@keyframes mobileNavSlide {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
#mobileNav:not(.hidden) {
  animation: mobileNavSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---- Premium Mobile Nav Menu Panel overrides (Overlapping Glassmorphism) ---- */
#mobileNav {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  z-index: 45 !important; /* floats directly under header, above hero content */
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.06) !important;
  padding: 0.75rem 1rem !important;

  /* Frosted glass effect */
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
}

#mobileNav > div {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  /* remove tailwind's dividing borders */
  border: none !important;
}

#mobileNav > div > a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.8rem 1rem !important;
  border-radius: 0.75rem !important;
  font-size: 0.95rem !important; /* 15px */
  font-weight: 600 !important;
  color: #374151 !important; /* gray-700 */
  border: none !important;
  transition: all 0.2s ease-in-out !important;
  margin: 0 !important;
  background-color: transparent !important;
}

/* Add custom arrow chevron to each item using a CSS pseudo-element */
#mobileNav > div > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.4;
  margin-left: 0.5rem;
  transition: transform 0.2s ease;
}

#mobileNav > div > a:hover,
#mobileNav > div > a:active {
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: #EA4325 !important;
}

#mobileNav > div > a:hover::after {
  opacity: 0.8;
  transform: rotate(45deg) scale(1.1);
}

/* Dark mode compatibility for the new premium mobile menu */
html.dark #mobileNav {
  background-color: rgba(18, 22, 32, 0.85) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border-top-color: rgba(255, 255, 255, 0.06) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

html.dark #mobileNav > div > a {
  color: #d1d5db !important; /* gray-300 */
}

html.dark #mobileNav > div > a:hover,
html.dark #mobileNav > div > a:active {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

/* Footer gradient styling to blend seamlessly into active light/dark themes */
footer.mt-6, footer.mt-auto {
  background: linear-gradient(to bottom, #ffffff 0%, #fee2dc 8%, #f9a08a 20%, #f37a5a 40%, #EA4325 55%, #EA4325 100%) !important;
}

html.dark footer.mt-6, html.dark footer.mt-auto {
  background: linear-gradient(to bottom, #0b0d12 0%, #3e1b15 8%, #78291a 20%, #b33a23 40%, #EA4325 55%, #EA4325 100%) !important;
}

/* Defensive layout overrides: force services mega-menu dropdown to always be absolute, preventing page shifts */
#servicesDropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  z-index: 50 !important;
}

/* Hero section dark mode gradient overlay fixes (products, solutions, pricing, support) */
html.dark .bg-gradient-to-b.from-white\/70,
html.dark .from-white\/70 {
  background-image: linear-gradient(to bottom, rgba(11, 13, 18, 0.82) 0%, rgba(18, 23, 35, 0.92) 55%, #181d29 100%) !important;
}

html.dark .bg-brand-50 {
  background-color: rgba(234, 67, 37, 0.2) !important;
  color: #ff7d66 !important;
  border-color: rgba(234, 67, 37, 0.35) !important;
}

html.dark .bg-brand-100 {
  background-color: rgba(234, 67, 37, 0.25) !important;
  color: #ff7d66 !important;
}

html.dark .billing-knob {
  background-color: #ffffff !important;
}

html.dark #supportSearch {
  background-color: #1e2637 !important;
  color: #ffffff !important;
  border-color: #242f41 !important;
}
html.dark #supportSearch::placeholder {
  color: #9ca3af !important;
}

/* ---- Custom Cards & Tab Overrides in Dark Mode ---- */
html.dark .product-card,
html.dark .topic-card,
html.dark .faq-item,
html.dark .domain-result-card {
  background-color: #181d29 !important;
  border-color: #242f41 !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4) !important;
}

html.dark .product-card:hover,
html.dark .topic-card:hover {
  border-color: rgba(234, 67, 37, 0.5) !important;
  box-shadow: 0 20px 45px -15px rgba(234, 67, 37, 0.3) !important;
}

html.dark .sol-tab {
  background-color: #1e2637 !important;
  border-color: #242f41 !important;
  color: #9ca3af !important;
}

html.dark .sol-tab:hover {
  color: #ff7d66 !important;
  border-color: rgba(234, 67, 37, 0.4) !important;
}

html.dark .sol-tab.active {
  background-color: #EA4325 !important;
  border-color: #EA4325 !important;
  color: #ffffff !important;
}

/* Feature comparison table in pricing.html */
html.dark #compareBody tr,
html.dark #compareBody td {
  border-bottom-color: #242f41 !important;
}

html.dark #compareBody td.bg-brand-50 {
  background-color: rgba(234, 67, 37, 0.15) !important;
}

/* FAQ accordion headers & answers */
html.dark .faq-q span {
  color: #f3f4f6 !important;
}

html.dark .faq-answer p {
  color: #9ca3af !important;
}

/* Buttons inside brand-orange CTA containers */
html.dark .bg-brand a.bg-white,
html.dark .bg-brand button.bg-white {
  background-color: #ffffff !important;
  color: #EA4325 !important;
}

/* ============================================================ */
/* PREMIUM SPACING SYSTEM — Monainn visual-rhythm refinement    */
/* ============================================================ */
/*
 * Monainn is thinner + narrower than the font the original spacing was tuned
 * for, so the site felt cramped. Rather than hand-editing hundreds of inline
 * Tailwind utilities across every page, we compensate GLOBALLY here.
 *
 * Specificity: every rule is prefixed with `html` (specificity 0,1,1) so it
 * beats Tailwind Play CDN's runtime-injected utilities (0,1,0) regardless of
 * injection order — NO !important required. We deliberately target only the
 * high-leverage patterns; layouts/widths/colors are untouched.
 *
 * Values are tuned to lift cramped spacing by ~25-50% toward the --space-*
 * scale defined in typography.css.
 */

/* ---- Navbar: taller, more breathing room between links ---------- */
/* The shared header inner row uses `py-3.5 px-4 sm:px-9`. */
html header > div:first-child {
  padding-top: 1.125rem;   /* py-3.5 → ~18px */
  padding-bottom: 1.125rem;
}
/* Desktop nav link gap (uses `gap-10`). */
html header nav.gap-10 {
  gap: 2.75rem;            /* 44px — premium nav rhythm */
}

/* ---- Section / page vertical rhythm --------------------------- */
/* Marketing sections use `py-14 sm:py-20` and `py-12 sm:py-16`. */
html section[class*="py-14"] {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
html section[class*="py-12"] {
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
}
@media (min-width: 640px) {
  html section[class*="sm:py-20"] { padding-top: 6rem; padding-bottom: 6rem; }
  html section[class*="sm:py-16"] { padding-top: 5rem; padding-bottom: 5rem; }
}

/* ---- Cards: more generous inner padding ----------------------- */
/* Primary card paddings: `p-6`, `p-8`, `p-5`, `p-7`. */
html .p-6:not(header *):not(nav *):not(.no-rhythm) { padding: 1.75rem; }
html .p-8:not(header *):not(nav *):not(.no-rhythm) { padding: 2.25rem; }
html .p-5:not(header *):not(nav *):not(.no-rhythm) { padding: 1.5rem; }
html .p-7:not(header *):not(nav *):not(.no-rhythm) { padding: 2rem; }

/* ---- Stat / summary cards (dashboard, pricing) ---------------- */
html .bg-white.border.border-gray-200.rounded-2xl[class*="p-5"],
html .bg-white.border.border-gray-200.rounded-3xl[class*="p-6"] {
  padding: 1.75rem;
}

/* ---- Gaps between grouped items (cards, grids) ----------------- */
html .gap-6 { gap: 1.75rem; }   /* widget grids */
html .gap-4 { gap: 1.25rem; }   /* card grids   */
html .gap-5 { gap: 1.5rem; }

/* ---- Headings ↔ subtitle ↔ content rhythm -------------------- */
/* Hero/section H1-H3 are followed by a subtitle paragraph (`mt-4`/`mt-5`). */
html h1 + p,
html h2 + p,
html h3 + p {
  margin-top: 1.25rem;     /* larger title→subtitle gap */
}
html section h1,
html section h2 {
  margin-bottom: 0.75rem;  /* heading sits clearer of content below */
}

/* ---- Forms: label ↔ input ↔ helper ↔ button rhythm ----------- */
html form label {
  margin-bottom: 0.5rem;   /* label → input gap */
}
html form .field-error {
  margin-top: 0.375rem;
}
html form button[type="submit"] + *,
html form .auth-submit + * {
  margin-top: 1.25rem;     /* submit → secondary action */
}

/* ---- Search bars: taller, more horizontal text room ----------- */
/* Hero search inputs without left icons */
html #searchAgainInput {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.125rem;
  padding-right: 1.125rem;
}

/* Search inputs with an absolute left icon inside (#whoisInput, #domainSearchInput) */
html #whoisInput {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 3.25rem !important;
  padding-right: 1.125rem;
}

html #domainSearchInput {
  padding-left: 2.75rem !important;
}

/* WHOIS example try chips in dark mode */
html.dark .whois-example {
  background-color: #1e2637 !important;
  border-color: #242f41 !important;
  color: #e5e7eb !important;
}
html.dark .whois-example:hover {
  border-color: #EA4325 !important;
  color: #EA4325 !important;
}

/* ---- Domain / WHOIS result cards: row breathing room --------- */
html .domain-result-card,
html [class*="domain-result"] {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
/* Gap between the name / availability / price / button columns. */
html .domain-result-card .flex.items-center.justify-between,
html .domain-result-card .flex.items-center.gap-3 {
  gap: 1.25rem;
}

/* ---- Tables (dashboard/admin): row height + cell padding ------ */
html table tbody td,
html table tbody th {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

/* ---- Buttons: more internal horizontal padding ---------------- */
/* Primary action buttons (bg-brand) — more label room without changing height. */
html button.bg-brand:not(.no-rhythm),
html a.bg-brand:not(.no-rhythm) {
  padding-left: 2rem;
  padding-right: 2rem;
}

/* ---- Dashboard widget grid gaps ------------------------------- */
html main .grid.grid-cols-2.md\:grid-cols-4 {
  gap: 1.5rem;
}
html main .grid.grid-cols-1.md\:grid-cols-3 {
  gap: 1.75rem;
}

/* ---- Premium radius bump for cards (subtle, not oversized) ---- */
html .rounded-3xl { border-radius: var(--radius-xl); }
html .rounded-2xl { border-radius: var(--radius-lg); }

/* Opt-out hook: add `.no-rhythm` to any element that must keep its
 * original spacing (e.g. tiny icon buttons, dense data grids). */