/* =========================================================
   KTG Property Solutions, Inc. — Main Stylesheet
   Color scheme: Red, White & Blue on Black
   ========================================================= */

:root {
  --bg:              #000000;
  --bg-panel:        #0d0d0d;
  --bg-panel-raised: #161616;
  --border:          #1e2a3a;
  --text:            #f0f4f8;
  --text-dim:        #b0bec5;
  --text-faint:      #8494a4;   /* was #607080 — brightened to pass WCAG 4.5:1 on all panel backgrounds */
  --brand-red:       #cc1f1f;
  --brand-red-dark:  #991515;
  --brand-red-light: #e63030;
  --brand-blue:      #1a3a6b;
  --brand-blue-mid:  #1e4d9b;
  --brand-blue-light:#2e6dd4;
  --link:            #4d8ae6;   /* body link color — passes WCAG 4.5:1 on bg, panels; blue-light kept for borders/buttons */
  --brand-white:     #ffffff;
  --brand-gold:      #c8d8f0;   /* used for accent links — soft blue-white */
  --focus:           #4da6ff;
  --radius:          4px;
  --maxw:            1200px;
  font-size: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

body { display: flex; flex-direction: column; min-height: 100vh; }

h1,h2,h3,h4 {
  font-family: 'Arial Narrow', Arial, sans-serif;
  letter-spacing: .03em;
  color: var(--brand-white);
  margin: 0 0 .5em;
}

a { color: var(--link); text-decoration: none; }
a:hover, a:focus { color: var(--brand-white); text-decoration: underline; }

a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Skip link — hidden until keyboard-focused (WCAG 2.4.1 Bypass Blocks) */
.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--brand-blue-mid);
  color: #fff;
  padding: 10px 18px;
  z-index: 1000;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

img { max-width: 100%; display: block; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* =========================
   TOP BAR
   ========================= */
.top-bar {
  background: var(--brand-blue);
  border-bottom: 1px solid var(--brand-blue-mid);
  font-size: .82rem;
}
.top-bar .container {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding-top: 5px;
  padding-bottom: 5px;
}
.top-bar a { color: #cde; }
.top-bar a:hover { color: #fff; }
.tb-item { display: inline-flex; align-items: center; gap: 5px; }

/* =========================
   HEADER
   ========================= */
header.site-header {
  background: linear-gradient(135deg, #000 60%, #0a1a35 100%);
  border-bottom: 3px solid var(--brand-red);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 14px 0;
  flex-wrap: wrap;
}

/* Logo slot — always 200×200, image fills it */
.logo-slot { flex: 0 0 auto; }
.logo-slot a { display: block; }
.site-logo {
  width:  200px;
  height: 200px;
  object-fit: contain;
  display: block;
}

/* Right side: company name + contact + licenses */
.header-info { flex: 1 1 auto; }

.company-name {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--brand-white);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.company-name span { color: var(--brand-red-light); }

.header-contact {
  font-size: .88rem;
  color: var(--text-dim);
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
}
.header-contact a { color: #cde; }
.header-contact a:hover { color: #fff; }

.license-list {
  list-style: none;
  margin: 0; padding: 0;
  font-size: .82rem;
  color: var(--text-dim);
}
.license-list li { margin-bottom: 2px; }
.license-list .lic-label { color: var(--text-dim); margin-right: 4px; }
.license-list a { color: var(--brand-gold); font-weight: 600; }
.license-list a:hover { color: #fff; }

/* =========================
   NAV
   ========================= */
nav.site-nav {
  background: var(--brand-red);
  border-top: 1px solid var(--brand-red-dark);
}
nav.site-nav .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.nav-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0; padding: 0;
}
.nav-links li { position: relative; }
.nav-links a {
  display: block;
  padding: 13px 17px;
  color: #fff;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  transition: background .15s;
}
.nav-links a:hover,
.nav-links a:focus,
.nav-links li.active a {
  background: rgba(0,0,0,.28);
  text-decoration: none;
  color: #fff;
}
/* Blue accent bar under active item */
.nav-links li.active a {
  border-bottom: 3px solid var(--brand-blue-light);
}

.nav-cta { padding: 8px 0; }
.btn-estimate {
  display: inline-block;
  background: var(--brand-blue-mid);
  border: 2px solid var(--brand-blue-light);
  color: #fff;
  font-family: 'Arial Narrow', Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: .88rem;
  padding: 9px 18px;
  border-radius: var(--radius);
  transition: background .15s;
}
.btn-estimate:hover {
  background: var(--brand-blue-light);
  color: #fff;
  text-decoration: none;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,.5);
  color: #fff;
  font-size: 1.4rem;
  padding: 4px 12px;
  cursor: pointer;
}

/* =========================
   SLIDESHOW
   ========================= */
.slideshow-section {
  width: 100%;
  background: #000;
  padding: 18px 0;
  border-bottom: 2px solid var(--brand-blue);
}

/* 80% width, centered, black background */
.slideshow {
  position: relative;
  width: 80%;
  margin: 0 auto;
  aspect-ratio: 16 / 6;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.slideshow .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s ease-in-out;
}
.slideshow .slide.is-active {
  opacity: 1;
  z-index: 1;
}
.slideshow .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slideshow .slide-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
  color: #fff;
  padding: 18px 22px 12px;
  font-size: .95rem;
  z-index: 2;
}
.slideshow-dots {
  position: absolute;
  bottom: 10px; right: 14px;
  display: flex;
  gap: 7px;
  z-index: 3;
}
.slideshow-dots button {
  width: 24px; height: 24px;            /* 24px hit area (WCAG 2.5.8 target size) */
  border-radius: 50%;
  border: none;
  padding: 7px;                          /* visual dot ~10px, centered */
  background: rgba(255,255,255,.55);
  background-clip: content-box;
  cursor: pointer;
}
.slideshow-dots button.is-active {
  background: var(--brand-red-light);
  background-clip: content-box;
}
.slideshow-pause {
  position: absolute;
  bottom: 8px; left: 12px;
  z-index: 3;
  min-width: 32px; min-height: 32px;
  border: 1px solid #fff;
  border-radius: var(--radius);
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
}
.slideshow-pause:hover { background: rgba(0,0,0,.85); }
.slideshow-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-faint);
  font-size: .9rem;
  text-align: center;
  padding: 20px;
}

/* =========================
   MAIN
   ========================= */
main { flex: 1 0 auto; padding: 38px 0 58px; }

.page-heading {
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 26px;
}
.page-heading h1 {
  font-size: 2rem;
  color: var(--brand-white);
}
.page-heading h1 span { color: var(--brand-red-light); }
.page-heading .subhead { color: var(--text-dim); font-size: .95rem; }

.section-block { margin-bottom: 38px; }

/* Cards */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-red);
  border-radius: var(--radius);
  padding: 20px;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 18px;
}

/* Hero CTA bar */
.hero-cta {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 5px solid var(--brand-blue-mid);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.hero-cta h2 { margin: 0 0 4px; }
.hero-cta p  { margin: 0; color: var(--text-dim); }

.list-clean { list-style: none; padding: 0; margin: 0; }
.list-clean li {
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.list-clean li:last-child { border-bottom: none; }

/* Note box */
.future-page-note {
  background: var(--bg-panel-raised);
  border: 1px dashed #334;
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--text-faint);
  font-size: .83rem;
  margin-bottom: 18px;
}

/* =========================
   FORMS
   ========================= */
form.site-form {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 680px;
}
.form-row { margin-bottom: 16px; }
.form-row label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--text);
}
.form-row .req { color: var(--brand-red-light); }
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 9px 11px;
  background: #050a10;
  border: 1px solid #2a3a4a;
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--brand-blue-light);
  outline: none;
}
.form-row textarea { resize: vertical; min-height: 115px; }
.form-row small.hint { display: block; color: var(--text-faint); margin-top: 3px; }

.btn-submit {
  background: var(--brand-red);
  color: #fff;
  border: none;
  font-family: 'Arial Narrow', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  font-size: .95rem;
  padding: 11px 26px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s;
}
.btn-submit:hover { background: var(--brand-red-light); }

.form-status {
  padding: 13px 16px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  max-width: 680px;
}
.form-status.success {
  background: #071d10;
  border: 1px solid #1a6b35;
  color: #a0e8c0;
}
.form-status.error {
  background: #1a0505;
  border: 1px solid #6b1a1a;
  color: #f0a0a0;
}

/* Star rating widget */
.star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 4px;
}
.star-rating input { position: absolute; opacity: 0; pointer-events: none; }
.star-rating label {
  font-size: 1.7rem;
  color: #333;
  cursor: pointer;
  margin: 0 !important;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
  color: var(--brand-red-light);
}

/* =========================
   TABLE
   ========================= */
.cert-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-panel);
  border: 1px solid var(--border);
}
.cert-table th, .cert-table td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  font-size: .92rem;
}
.cert-table th {
  background: var(--brand-blue);
  text-transform: uppercase;
  font-size: .76rem;
  letter-spacing: .05em;
  color: #cde;
}
.cert-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: .76rem;
  font-weight: 600;
}
.cert-badge.active {
  background: #071d10;
  color: #a0e8c0;
  border: 1px solid #1a6b35;
}

/* =========================
   FOOTER
   ========================= */
footer.site-footer {
  background: var(--brand-blue);
  border-top: 3px solid var(--brand-red);
  color: #8ab;
  font-size: .83rem;
  padding: 22px 0;
  margin-top: auto;
}
footer.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}
footer.site-footer a { color: #cde; }
footer.site-footer a:hover { color: #fff; }
.footer-licenses { font-size: .76rem; }

/* =========================
   TESTIMONIAL SPECIFICS
   ========================= */
.testimonial-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-blue-mid);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
}
.testimonial-card .t-stars {
  color: var(--brand-red-light);
  font-size: 1.1rem;
  letter-spacing: 2px;
  margin-bottom: 5px;
}
.testimonial-card .t-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  font-size: .83rem;
  color: var(--text-faint);
  margin-top: 9px;
}
.testimonial-card .t-name { font-weight: 700; color: #fff; }

.t-stats-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 28px;
}
.t-stats-summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.t-stats-summary .t-avg {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 2.4rem;
  color: #fff;
  font-weight: 700;
}
.t-stats-summary .t-avg-stars { color: var(--brand-red-light); font-size: 1.3rem; }
.t-stats-summary .t-count    { color: var(--text-dim); font-size: .9rem; }

.t-bar-row {
  display: grid;
  grid-template-columns: 60px 1fr 46px;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
  font-size: .83rem;
}
.t-bar-row .t-bar-label { color: var(--text-dim); text-align: right; }
.t-bar-track {
  background: #050a10;
  border: 1px solid var(--border);
  border-radius: 3px;
  height: 15px;
  overflow: hidden;
}
.t-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-red), var(--brand-blue-light));
  width: 0%;
  transition: width .6s ease;
}
.t-bar-count { color: var(--text-faint); }

/* Admin delete button */
.btn-delete {
  background: none;
  border: 1px solid #6b1a1a;
  color: #f0a0a0;
  font-size: .76rem;
  padding: 2px 9px;
  border-radius: var(--radius);
  cursor: pointer;
}
.btn-delete:hover { background: #3a0808; }

/* =========================
   BEFORE/AFTER GALLERY
   ========================= */
.ba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 22px;
}
.ba-pair {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.ba-pair-images { display: grid; grid-template-columns: 1fr 1fr; }
.ba-pair-images figure { margin: 0; position: relative; }
.ba-pair-images img { width: 100%; height: 220px; object-fit: cover; }
.ba-pair-images figcaption {
  position: absolute;
  top: 7px; left: 7px;
  color: #fff;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 2px;
}
.ba-pair-images figure.before figcaption { background: rgba(180,30,30,.85); }
.ba-pair-images figure.after  figcaption { background: rgba(26,60,107,.85); }
.ba-pair-label { padding: 10px 14px; font-size: .92rem; color: var(--text-dim); }
.ba-unpaired-note {
  background: var(--bg-panel-raised);
  border: 1px dashed #334;
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--text-faint);
  font-size: .83rem;
  margin-top: 20px;
}

/* =========================
   MANUFACTURERS
   ========================= */
.mfg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.mfg-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-blue-mid);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
}
.mfg-card .mfg-logo-placeholder {
  width: 100%; height: 85px;
  border: 1px dashed #2a3a4a;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: .76rem;
  margin-bottom: 10px;
  background: #050a10;
}
.mfg-card h3 { font-size: 1rem; margin-bottom: 3px; }
.mfg-card p  { color: var(--text-dim); font-size: .86rem; margin: 0; }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 820px) {
  .top-bar .container { justify-content: center; text-align: center; }
  .header-inner { justify-content: center; text-align: center; flex-direction: column; align-items: center; }
  .header-info { text-align: center; }
  .header-contact { justify-content: center; }
  .nav-toggle { display: inline-block; }
  .nav-links { display: none; flex-direction: column; width: 100%; }
  .nav-links.is-open { display: flex; }
  nav.site-nav .container { flex-direction: column; align-items: stretch; }
  .nav-cta { text-align: center; padding: 8px; }
  .slideshow { width: 95%; }
  .ba-grid { grid-template-columns: 1fr; }
  .ba-pair-images img { height: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .slideshow .slide { transition: none; }
  .t-bar-fill { transition: none; }
}

/* =========================
   HIDDEN NAV ITEMS
   Logo Studio and Site Builder stay live at their direct URLs
   but no longer appear in the menu on any page.
   Delete this rule to bring them back.
   ========================= */
.nav-links li:has(> a[href*="logo-studio"]),
.nav-links li:has(> a[href*="site-builder"]) { display: none; }