/*
Theme Name: Steele Webhosthttps://steelewebhost.com/wp-admin/theme-editor.php?file=style.css&theme=steele-webhost-theme-v2
Theme URI: https://steelewebhost.com/
Author: David Steele & ChatGPT
Author URI: https://steelewebservices.com/
Description: A clean, fast WordPress theme for hosting businesses with a full-width banner and simple pricing section.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: steele-webhost
Tags: custom-header, custom-logo, one-column, two-columns, full-width-template, custom-colors
*/

:root{
  --swh-primary: #1d7cf2;
  --swh-dark: #0b0f14;
  --swh-light: #ffffff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif; color:#111; line-height:1.5; background:#fff;}

a{color:var(--swh-primary); text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1200px;margin:0 auto;padding:0 20px}

.header-banner{
  width:100%;
  min-height: var(--swh-banner-height, 240px);
  display:flex;
  align-items:center;
  background: #0b0f14 center/cover no-repeat;
  position:relative;
  isolation:isolate;
}
.header-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.35));
  z-index:0;
}
.header-inner{position:relative; z-index:1; width:100%}
.site-branding{display:flex; align-items:center; gap:16px; color:#fff}
.site-logo img {
    max-height:80px;
    width:auto;
    display:block;
}

.site-title{font-size:1.8rem; font-weight:700; color:#fff; margin:0}
.site-tagline{color:#dfe7f1; margin:4px 0 0}

.site-nav{margin-left:auto}
.site-nav ul{list-style:none; display:flex; gap:18px; margin:0; padding:0}
.site-nav a{color:#fff; font-weight:600}
.site-header-row{display:flex; align-items:center;}

main{padding:40px 0}

.footer{background:#0b0f14;color:#c7d1de;padding:24px 0}
.footer a{color:#c7d1de}

.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:24px}
.price-card{background:#0f141a; color:#eaf2ff; border:1px solid #1f2a38; border-radius:14px; padding:22px}
.price-title{font-size:1.25rem; font-weight:700; margin:0 0 8px}
.price{font-size:2rem; font-weight:800; margin:8px 0 16px; color:var(--swh-primary)}
.features{margin:0; padding-left:18px}
.cta-btn{display:inline-block; background:var(--swh-primary); color:#fff; padding:10px 16px; border-radius:10px; font-weight:700; margin-top:14px}
.cta-btn:hover{filter:brightness(1.05)}
@media (max-width: 900px){
  .pricing{grid-template-columns:1fr}
  .site-header-row{flex-direction:column; align-items:flex-start; gap:12px}
}


/* === Topbar (logo + menu) === */
.topbar{
  background:#0b0f14; color:#fff; width:100%;
}
.topbar .container{display:flex; align-items:center; gap:18px; padding:10px 20px}
.topbar .site-branding{color:#fff}
.topbar .site-title{font-size:1.3rem}
.topbar .site-tagline{font-size:.9rem; color:#c8d3e1}
.topbar .site-nav a{color:#fff}

/* Banner sits beneath the topbar */
.header-banner{
  margin-top:0;
}

/* Middle editable area is just main content with spacing already */

/* Footer widgets (4 columns) */
.footer-widgets{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:16px;
}
.footer .widget{background:#0f141a; border:1px solid #1f2a38; border-radius:12px; padding:14px}
.footer .widget h2, .footer .widget-title{color:#eaf2ff; font-size:1rem; margin:0 0 10px}
@media(max-width: 900px){
  .footer-widgets{grid-template-columns:1fr; }
}

.domain-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #000;                /* solid black background */
  border: 1px solid #222;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 4px 18px rgba(0,0,0,.6);
  margin: 28px 0 12px;
}

.domain-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;                     /* white letters */
  font-size: 18px;
}

.domain-search input::placeholder {
  color: #aaa;
  font-style: italic;
}

.domain-search button {
  background: var(--accent);
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 700;
  color: #03131e;
  cursor: pointer;
  transition: all .2s ease;
}

.domain-search button:hover {
  background: #3bb4ff;
  box-shadow: 0 6px 16px rgba(30,167,255,.3);
}

/* Extension badges under the bar */
.domain-extensions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.domain-extensions span {
  background: #111;
  color: #fff;
  border: 1px solid #333;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}