/* DNS Tools Hub Page Styles */

/* Nav search input - dark mode styling */
.nav-search-input{font-size:12px;width:100%;max-width:135px;padding:6px 10px;border-radius:5px;border:1px solid #555;background:#333;color:#fff;box-sizing:border-box}
.nav-search-input::placeholder{color:#999}
body.light-mode .nav-search-input{background-color:#fff !important;color:#000 !important;border:1px solid #ccc !important}
body.light-mode .nav-search-input::placeholder{color:#888 !important}
body.dark-mode .nav-search-input{background-color:#333 !important;color:#fff !important;border:1px solid #555 !important}
body.dark-mode .nav-search-input::placeholder{color:#999 !important}

/* Nav submit button fix - match homepage size */
.nav-submit-button{padding:6px 14px !important;font-size:13px !important;min-width:auto !important;height:auto !important}

/* Hero section */
.tools-hero{text-align:center;padding:80px 20px 0;background:linear-gradient(180deg,rgba(17,87,231,0.15) 0%,transparent 100%)}
.tools-hero .logo{width:84px;height:84px;margin-top:15px;margin-bottom:12px}
.tools-hero h1{font-size:1.75rem;font-weight:700;margin:0 0 8px;color:#fff}
.tools-hero h1 .brand-dns{font-weight:700}
.tools-hero h1 .brand-ai{font-weight:300}
.tools-hero .subtitle{font-size:1rem;color:rgba(255,255,255,0.8);margin:0;max-width:550px;margin-left:auto;margin-right:auto;line-height:1.5}
body.light-mode .tools-hero h1{color:#111}
body.light-mode .tools-hero .subtitle{color:rgba(0,0,0,0.7)}

/* Quick Summary / TL;DR */
.tools-tldr{max-width:700px;margin:-20px auto 32px;padding:16px 20px;background:rgba(59,130,246,0.1);border-left:4px solid #3b82f6;border-radius:8px;text-align:left}
.tools-tldr h2{margin:0 0 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#3b82f6}
.tools-tldr p{margin:0;font-size:15px;line-height:1.7;color:#e5e7eb}
body.light-mode .tools-tldr{background:rgba(59,130,246,0.08)}
body.light-mode .tools-tldr p{color:#374151}

/* Tool Categories Grid */
.tools-categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:32px;margin:40px 0}

/* Category Section */
.tool-category{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:28px;transition:all 0.3s ease}
.tool-category:hover{border-color:rgba(38,196,255,0.3);box-shadow:0 8px 32px rgba(38,196,255,0.1)}
body.light-mode .tool-category{background:#fff;border-color:rgba(0,0,0,0.1);box-shadow:0 2px 8px rgba(0,0,0,0.05)}
body.light-mode .tool-category:hover{border-color:rgba(0,84,255,0.3);box-shadow:0 8px 32px rgba(0,84,255,0.08)}

/* Category Header */
.category-header{display:flex;align-items:center;gap:16px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.1)}
.category-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1e40af 0%,#3b82f6 100%);border-radius:12px;flex-shrink:0}
.category-icon i{font-size:24px;color:#fff}
.category-icon svg{width:24px;height:24px;stroke:#fff;stroke-width:2;fill:none}
.category-title{font-size:1.25rem;font-weight:700;color:#fff;margin:0}
.category-count{font-size:13px;color:rgba(255,255,255,0.5);font-weight:400}
body.light-mode .category-header{border-bottom-color:rgba(0,0,0,0.08)}
body.light-mode .category-title{color:#111}
body.light-mode .category-count{color:rgba(0,0,0,0.5)}

/* Tool Cards */
.tool-list{display:flex;flex-direction:column;gap:12px}
.tool-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:10px;text-decoration:none;color:#fff;transition:all 0.2s ease}
.tool-card:hover{background:rgba(38,196,255,0.08);border-color:rgba(38,196,255,0.2);transform:translateX(4px)}
body.light-mode .tool-card{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.06);color:#111}
body.light-mode .tool-card:hover{background:rgba(0,84,255,0.05);border-color:rgba(0,84,255,0.2)}

/* Tool Icon */
.tool-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.05);border-radius:8px;flex-shrink:0}
.tool-icon i{font-size:20px;color:#26c4ff}
.tool-icon svg{width:20px;height:20px;stroke:#26c4ff;stroke-width:2;fill:none}
body.light-mode .tool-icon{background:rgba(0,84,255,0.08)}
body.light-mode .tool-icon i,body.light-mode .tool-icon svg{color:#0054ff;stroke:#0054ff}

/* Tool Info */
.tool-info{flex:1;min-width:0}
.tool-name{font-size:15px;font-weight:600;margin:0 0 2px;color:#fff}
.tool-desc{font-size:13px;color:rgba(255,255,255,0.6);margin:0;line-height:1.4}
body.light-mode .tool-name{color:#111}
body.light-mode .tool-desc{color:rgba(0,0,0,0.6)}

/* Tool Arrow */
.tool-arrow{color:rgba(255,255,255,0.3);font-size:18px;transition:all 0.2s ease}
.tool-card:hover .tool-arrow{color:#26c4ff;transform:translateX(4px)}
body.light-mode .tool-arrow{color:rgba(0,0,0,0.2)}
body.light-mode .tool-card:hover .tool-arrow{color:#0054ff}

/* Category Colors - Different gradients for each category */
.tool-category.dns-lookup .category-icon{background:linear-gradient(135deg,#1e40af 0%,#3b82f6 100%)}
.tool-category.email-auth .category-icon{background:linear-gradient(135deg,#065f46 0%,#10b981 100%)}
.tool-category.security .category-icon{background:linear-gradient(135deg,#7c2d12 0%,#ea580c 100%)}
.tool-category.enterprise .category-icon{background:linear-gradient(135deg,#581c87 0%,#a855f7 100%)}
.tool-category.reports .category-icon{background:linear-gradient(135deg,#0e7490 0%,#06b6d4 100%)}
.tool-category.utilities .category-icon{background:linear-gradient(135deg,#4338ca 0%,#6366f1 100%)}

/* How It Works Section */
.how-it-works{max-width:800px;margin:60px auto 40px;padding:32px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.08);border-radius:16px}
.how-it-works h2{font-size:1.5rem;font-weight:700;margin:0 0 24px;color:#fff}
.how-it-works p{font-size:15px;line-height:1.7;color:rgba(255,255,255,0.8);margin:0 0 16px}
.how-it-works p:last-child{margin-bottom:0}
body.light-mode .how-it-works{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.08)}
body.light-mode .how-it-works h2{color:#111}
body.light-mode .how-it-works p{color:rgba(0,0,0,0.7)}

/* FAQ Section */
.tools-faq{max-width:800px;margin:40px auto}
.tools-faq h2{font-size:1.5rem;font-weight:700;margin:0 0 24px;color:#fff}
.faq-item{margin-bottom:12px;background:rgba(255,255,255,0.03);border-radius:10px;border:1px solid rgba(255,255,255,0.08);overflow:hidden}
.faq-item summary{padding:16px 20px;cursor:pointer;font-weight:600;color:#e5e7eb;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:20px;color:rgba(255,255,255,0.4);transition:transform 0.2s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 20px 16px;margin:0;font-size:14px;line-height:1.7;color:#9ca3af}
body.light-mode .tools-faq h2{color:#111}
body.light-mode .faq-item{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.08)}
body.light-mode .faq-item summary{color:#374151}
body.light-mode .faq-item summary::after{color:rgba(0,0,0,0.3)}
body.light-mode .faq-item p{color:#6b7280}

/* Related Resources */
.related-resources{max-width:800px;margin:40px auto;padding:24px;background:rgba(59,130,246,0.08);border-left:4px solid #3b82f6;border-radius:8px}
.related-resources h2{font-size:1rem;font-weight:700;color:#3b82f6;margin:0 0 16px}
.related-resources ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.related-resources li a{color:#9ca3af;text-decoration:none;font-size:14px;display:inline-flex;align-items:center;gap:8px;transition:color 0.2s ease}
.related-resources li a:hover{color:#60a5fa}
.related-resources li a::before{content:'→';color:#3b82f6}
body.light-mode .related-resources li a{color:#6b7280}
body.light-mode .related-resources li a:hover{color:#2563eb}

/* Funnel CTA */
.funnel-cta{max-width:800px;margin:40px auto;padding:32px;background:linear-gradient(135deg,#1a365d 0%,#0a0f1a 100%);border-radius:16px;text-align:center}
.funnel-cta img{width:96px;height:96px;margin-bottom:16px}
.funnel-cta h3{margin:0 0 8px;font-size:1.25rem;font-weight:700;color:#fff}
.funnel-cta p{margin:0 0 20px;font-size:15px;line-height:1.6;color:rgba(255,255,255,0.9);max-width:500px;margin-left:auto;margin-right:auto}
.funnel-cta .cta-btn{display:inline-block;background:#fff;color:#1e40af;font-weight:700;padding:14px 28px;border-radius:8px;text-decoration:none;font-size:15px;transition:all 0.2s ease}
.funnel-cta .cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,255,255,0.2)}
.funnel-cta .cta-note{margin:14px 0 0;font-size:13px;color:rgba(255,255,255,0.7)}

/* Responsive - Tablet */
@media(max-width:1024px){
  .tools-categories{grid-template-columns:repeat(2,1fr);gap:24px}
  .nav-search{display:none}
}

/* Responsive - Mobile */
@media(max-width:768px){
  .tools-hero{padding:70px 16px 16px}
  .tools-hero .logo{width:64px;height:64px;margin-top:10px}
  .tools-hero h1{font-size:1.4rem}
  .tools-hero .subtitle{font-size:0.9rem;padding:0 8px}
  .tools-tldr{margin:-10px 16px 24px;padding:14px 16px}
  .tools-tldr p{font-size:14px;line-height:1.6}
  .tools-categories{grid-template-columns:1fr;gap:16px;margin:24px 0}
  .tool-category{padding:18px;border-radius:12px}
  .category-header{gap:12px;margin-bottom:16px;padding-bottom:12px}
  .category-icon{width:40px;height:40px;border-radius:10px}
  .category-icon i,.category-icon svg{font-size:18px;width:18px;height:18px}
  .category-title{font-size:1.1rem}
  .tool-list{gap:10px}
  .tool-card{padding:12px 14px;gap:12px;border-radius:8px}
  .tool-icon{width:36px;height:36px}
  .tool-icon i,.tool-icon svg{font-size:18px;width:18px;height:18px}
  .tool-name{font-size:14px}
  .tool-desc{font-size:12px}
  .tool-arrow{font-size:16px}
  .how-it-works,.tools-faq,.related-resources,.funnel-cta{margin-left:16px;margin-right:16px;padding:24px 20px}
  .how-it-works h2,.tools-faq h2{font-size:1.25rem}
  .faq-item summary{padding:14px 16px;font-size:14px}
  .faq-item p{padding:0 16px 14px;font-size:13px}
  .funnel-cta img{width:72px;height:72px}
  .funnel-cta h3{font-size:1.1rem}
  .funnel-cta p{font-size:14px}
  .funnel-cta .cta-btn{padding:12px 24px;font-size:14px}
}

/* Responsive - Small Mobile */
@media(max-width:480px){
  .tools-hero{padding:65px 12px 12px}
  .tools-hero .logo{width:56px;height:56px}
  .tools-hero h1{font-size:1.25rem}
  .tools-hero .subtitle{font-size:0.85rem}
  .tools-tldr{margin:-8px 12px 20px;padding:12px 14px}
  .tools-tldr h2{font-size:11px}
  .tools-tldr p{font-size:13px}
  .tool-category{padding:16px}
  .category-title{font-size:1rem}
  .tool-card{padding:10px 12px}
  .tool-icon{width:32px;height:32px}
  .tool-name{font-size:13px}
  .tool-desc{font-size:11px;line-height:1.3}
  .how-it-works,.tools-faq,.related-resources,.funnel-cta{margin-left:12px;margin-right:12px;padding:20px 16px}
}