/*
Theme Name: HostingZA Clean
Theme URI: https://hostingza.co.za
Author: DezignZA
Description: A clean, block-based (Gutenberg / FSE) rebuild of the HostingZA website, styled to the DezignZA design system — dark navy surfaces, teal accent, Montserrat + Open Sans, flat and sharp. No page builders, no premium theme dependencies.
Version: 0.4.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: hostingza-clean
*/

:root{
  --hz-teal:#00BCD4; --hz-teal-dark:#00ACC1;
  --hz-navy:#2E3250; --hz-navy-dark:#1E2235;
  --hz-amber:#F5A623; --hz-orange:#E85D26;
  --hz-charcoal:#333333; --hz-grey:#666666;
}

/* Global rhythm */
body{ letter-spacing:0; }
.wp-block-heading{ font-family:Montserrat,Arial,sans-serif; }

/* Utility top bar (navy) */
.hz-topbar{ background:var(--hz-navy-dark); font-size:12px; }
.hz-topbar, .hz-topbar p{ color:rgba(255,255,255,.75); }
.hz-topbar a{ color:#fff !important; text-decoration:none; }
.hz-topbar a:hover{ color:var(--hz-teal) !important; }

/* Main nav */
.hz-header{ box-shadow:0 2px 8px rgba(0,0,0,.06); }
.hz-header .wp-block-navigation .wp-block-navigation-item__content{
  font-family:Montserrat,Arial,sans-serif; font-weight:600; font-size:14px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--hz-charcoal);
}
.hz-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.hz-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content{ color:var(--hz-teal); }

/* Section title + teal divider */
.hz-section-title h2{ text-transform:uppercase; letter-spacing:.08em; }
.hz-rule{ width:60px; height:3px; background:var(--hz-teal); margin:16px auto 0; }
.hz-rule.left{ margin-left:0; }

/* Hero */
.hz-hero h1{ color:#fff !important; text-transform:uppercase; letter-spacing:.05em; }
.hz-domain-form input{ font-family:'Open Sans',sans-serif; }
.hz-domain-form button:hover{ background:var(--hz-teal-dark) !important; }

/* TLD chips */
.hz-tld .wp-block-group{ border:1px solid rgba(255,255,255,.22); border-radius:2px; }
.hz-tld strong{ color:#fff; font-size:19px; display:block; font-family:Montserrat,sans-serif; letter-spacing:.04em; }
.hz-tld span{ color:var(--hz-amber); font-weight:700; font-family:Montserrat,sans-serif; }

/* Pricing cards — flat, sharp, amber pricing, teal CTA */
.hz-plan{ background:#fff; border:1px solid var(--hz-line,#e6e6e6); border-radius:0; transition:box-shadow .18s ease; }
.hz-plan:hover{ box-shadow:0 2px 8px rgba(0,0,0,.15); }
.hz-plan .hz-plan-head{ background:#fff; border-bottom:3px solid var(--hz-teal); }
.hz-plan.is-featured{ background:var(--hz-navy-dark); }
.hz-plan.is-featured .hz-plan-head{ background:var(--hz-navy-dark); border-bottom-color:var(--hz-amber); }
.hz-plan.is-featured h3, .hz-plan.is-featured li{ color:#fff !important; }
.hz-plan.is-featured li{ border-bottom-color:rgba(255,255,255,.12) !important; }
.hz-plan h3{ font-family:Montserrat,sans-serif; text-transform:uppercase; letter-spacing:.04em; color:var(--hz-charcoal); }
.hz-price{ font-family:Montserrat,sans-serif; font-weight:900; color:var(--hz-amber); line-height:1; }
.hz-price .hz-cur{ font-size:20px; vertical-align:top; font-weight:700; }
.hz-plan ul{ list-style:none; margin:0; padding:0; }
.hz-plan li{ padding:9px 0; border-bottom:1px solid #f0f0f0; font-size:14px; color:var(--hz-grey); }
.hz-plan li:last-child{ border-bottom:none; }
.hz-btn{ display:block; text-align:center; padding:13px; border-radius:2px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; font-size:13px; text-decoration:none; font-family:Montserrat,sans-serif; }
.hz-btn-teal{ background:var(--hz-teal); color:#fff !important; }
.hz-btn-teal:hover{ background:var(--hz-teal-dark); }
.hz-btn-amber{ background:var(--hz-amber); color:#fff !important; }

/* Icon circles (services / features) — teal ring, white fill, flat icon */
.hz-icon{ width:90px; height:90px; border-radius:50%; border:3px solid var(--hz-teal); background:#fff;
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:38px; }
.hz-icon.on-dark{ background:var(--hz-navy); }

/* Full-width teal CTA bar */
.hz-cta-bar{ background:var(--hz-teal); }
.hz-cta-bar h3, .hz-cta-bar p{ color:#fff !important; text-transform:uppercase; letter-spacing:.05em; }

/* Stat counters */
.hz-stat .wp-block-heading{ color:var(--hz-teal); font-family:Montserrat,sans-serif; font-weight:900; }

/* Cards on light */
.hz-card{ background:#fff; border:1px solid var(--hz-line,#e6e6e6); border-radius:0; padding:28px; height:100%; }
.hz-card h4{ font-family:Montserrat,sans-serif; text-transform:uppercase; letter-spacing:.02em; color:var(--hz-charcoal); }

/* Testimonials */
.hz-stars{ color:var(--hz-orange); font-size:18px; letter-spacing:2px; }

/* Footer (navy dark) */
.hz-footer{ color:rgba(255,255,255,.6); font-size:14px; }
.hz-footer h4{ color:#fff !important; font-size:15px; text-transform:uppercase; letter-spacing:.06em; }
.hz-footer a{ color:var(--hz-teal) !important; text-decoration:none; }
.hz-footer a:hover{ text-decoration:underline; }

/* Outline button on dark */
.wp-block-button.is-style-outline .wp-block-button__link{ border:2px solid #fff; color:#fff; border-radius:2px; }
.wp-block-button.is-style-outline .wp-block-button__link:hover{ background:#fff; color:var(--hz-navy-dark); }

/* Body links inside content */
.entry-content a, main a{ color:var(--hz-teal); }

/* Domain checker results */
.hz-domain-results{ margin-top:14px; text-align:left; }
.hz-dom-row{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:#fff; border-radius:2px; padding:14px 18px; margin-top:8px; box-shadow:0 2px 8px rgba(0,0,0,.10); }
.hz-dom-name{ font-family:Montserrat,sans-serif; font-weight:600; color:#333; font-size:15px; }
.hz-dom-name em{ font-style:normal; color:#00ACC1; font-weight:700; }
.hz-dom-status{ font-size:13px; color:#666; }
.hz-dom-row.hz-dom-ok{ border-left:3px solid #00BCD4; }
.hz-dom-row.hz-dom-taken{ border-left:3px solid #E85D26; opacity:.9; }
.hz-dom-row.hz-dom-taken .hz-dom-name{ color:#888; }
.hz-dom-row.hz-dom-loading{ border-left:3px solid #ccc; }
.hz-dom-row.hz-dom-err{ border-left:3px solid #F5A623; }
.hz-dom-cta{ flex:none; background:#00BCD4; color:#fff !important; text-decoration:none !important; border:none; cursor:pointer;
  font-family:Montserrat,sans-serif; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  padding:10px 18px; border-radius:2px; white-space:nowrap; }
.hz-dom-cta:hover{ background:#00ACC1; }
@media (max-width:600px){ .hz-dom-row{ flex-direction:column; align-items:flex-start; } .hz-dom-cta{ width:100%; text-align:center; } }

/* Slide-open enquiry form under an available domain */
.hz-dom-group .hz-dom-row.hz-dom-ok{ margin-top:8px; border-bottom-left-radius:0; }
.hz-enquiry{ max-height:0; overflow:hidden; opacity:0; background:#fff; border-radius:0 0 2px 2px;
  transition:max-height .38s ease, opacity .3s ease; text-align:left; box-shadow:0 8px 24px rgba(0,0,0,.12); }
.hz-enquiry.open{ max-height:760px; opacity:1; }
.hz-enq-form{ padding:22px 22px 24px; }
.hz-enq-title{ font-family:Montserrat,sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:#333; font-size:15px; margin:0 0 16px; }
.hz-enq-title em{ font-style:normal; color:#00ACC1; }
.hz-enq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hz-enq-field{ display:block; }
.hz-enq-field.hz-enq-full{ grid-column:1 / -1; }
.hz-enq-field > span{ display:block; font-family:Montserrat,sans-serif; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; color:#555; margin-bottom:5px; }
.hz-enq-form input, .hz-enq-form textarea{ width:100%; border:1px solid #ccc; border-radius:2px; padding:10px 12px;
  font-family:'Open Sans',sans-serif; font-size:14px; color:#333; background:#fff; }
.hz-enq-form input:focus, .hz-enq-form textarea:focus{ outline:2px solid #00BCD4; outline-offset:0; border-color:#00BCD4; }
.hz-enq-readonly{ background:#f5f5f5 !important; color:#666 !important; }
.hz-enq-needs{ margin:16px 0 4px; }
.hz-enq-legend{ display:block; font-family:Montserrat,sans-serif; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; color:#555; margin-bottom:8px; }
.hz-enq-check{ display:flex; align-items:center; gap:9px; padding:7px 0; font-size:14px; color:#444; cursor:pointer; }
.hz-enq-check input{ width:17px; height:17px; accent-color:#00BCD4; margin:0; flex:none; }
.hz-enq-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.hz-enq-actions{ display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap; }
.hz-enq-submit{ background:#00BCD4; color:#fff; border:none; border-radius:2px; cursor:pointer;
  font-family:Montserrat,sans-serif; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.1em;
  padding:13px 30px; }
.hz-enq-submit:hover{ background:#00ACC1; }
.hz-enq-submit:disabled{ background:#9bd; cursor:default; }
.hz-enq-msg{ font-size:13px; }
.hz-enq-msg.hz-enq-bad{ color:#E85D26; }
.hz-enq-done{ padding:26px 24px; font-size:15px; color:#333; }
.hz-enq-done em{ font-style:normal; color:#00ACC1; font-weight:600; }
@media (max-width:600px){ .hz-enq-grid{ grid-template-columns:1fr; } }