/*
Theme Name: CRTS Modern Tech
Author: Christopher Reynolds
Description: Modern Tech Professional WordPress theme for CR | Technology Solutions.
Version: 1.1.0
License: GNU General Public License v2 or later
Text Domain: crts
*/

:root {
  --crts-blue: #0B1F3A;
  --crts-red: #C81D25;
  --crts-slate: #2F3640;
  --crts-cool: #F4F6F8;
  --crts-white: #FFFFFF;
  --crts-max: 1120px;
  --crts-radius: 14px;
  --crts-shadow: 0 10px 30px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--crts-slate);
  background: var(--crts-white);
  line-height: 1.6;
}
h1,h2,h3,h4 { font-family: Manrope, Inter, system-ui, sans-serif; color: var(--crts-blue); line-height: 1.2; }
h1 { font-size: clamp(2rem, 3.4vw, 3rem); margin: 0 0 .75rem; }
h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin: 0 0 .75rem; }
h3 { font-size: 1.25rem; margin: 0 0 .5rem; }
p { margin: 0 0 1rem; }
a { color: var(--crts-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: var(--crts-max); margin: 0 auto; padding: 0 20px; }
.section { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section.alt { background: var(--crts-cool); }
.small { font-size: .95rem; opacity: .9; }

/* Header now matches footer style (blue background, white text) */
.header{
  position: sticky; top: 0; z-index: 50;
  background: var(--crts-blue);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.navbar { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; gap: 18px; }
.brand { display:flex; align-items:center; gap: 14px; }
.brand-mark { font-family: Manrope, Inter, sans-serif; font-weight: 700; letter-spacing: -1px; font-size: 1.25rem; color: #FFFFFF; }
/* Red divider in logotype thinner to match actual logo */
.brand-mark .bar { display:inline-block; width: 6px; height: 24px; margin: 0 10px; background: var(--crts-red); border-radius: 999px; vertical-align: -4px; }
.brand-sub { display:block; font-size: .85rem; color: rgba(255,255,255,.82); }

.nav { display:flex; align-items:center; gap: 14px; flex-wrap: wrap; justify-content:flex-end; }
.nav a { font-weight: 600; font-size: .95rem; padding: 10px 10px; border-radius: 10px; color: rgba(255,255,255,.92); }
.nav a:hover { background: rgba(255,255,255,.10); text-decoration:none; }

.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px; border-radius: 12px; font-weight: 700;
  border: 2px solid transparent; gap: 10px; cursor: pointer;
}
.btn-primary { background: var(--crts-red); color: white; }
.btn-primary:hover { filter: brightness(.95); text-decoration:none; }
.btn-secondary { background: transparent; border-color: rgba(11,31,58,.20); color: var(--crts-blue); }
.btn-secondary:hover { background: rgba(11,31,58,.06); text-decoration:none; }
.cta-row { display:flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

.hero {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(11,31,58,.08), transparent 60%),
    radial-gradient(700px 320px at 90% 10%, rgba(200,29,37,.10), transparent 60%);
}
.hero-grid { display:grid; grid-template-columns: 1.35fr .65fr; gap: 28px; align-items:center; }
.hero-card {
  background: white; border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--crts-radius); padding: 18px; box-shadow: var(--crts-shadow);
}
.pill {
  display:inline-flex; align-items:center; gap: 10px;
  background: rgba(255,255,255,.12); color: #FFFFFF;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; padding: 8px 12px; font-weight: 700; font-size: .85rem;
}

.grid { display:grid; gap: 18px; }
.grid.solutions { grid-template-columns: repeat(4, 1fr); }
.card {
  background: white;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--crts-radius);
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
  display:flex; flex-direction:column;
}
.card .img {
  height: 150px;
  background-size: cover;
  background-position: center;
}
.card .body { padding: 16px; }
.card .link { margin-top: 10px; display:inline-flex; gap: 8px; align-items:center; font-weight: 800; }
.card .link:after { content: "→"; }

/* Solution image tiles (can be replaced with real photos later) */
.card .img.cctv {
  background-image:
    linear-gradient(120deg, rgba(11,31,58,.65), rgba(200,29,37,.35)),
    url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22420%22%20height=%22240%22%20viewBox=%220%200%20420%20240%22%3E%3Cg%20fill=%22none%22%20stroke=%22white%22%20stroke-width=%2210%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20opacity=%220.92%22%3E%3Cpath%20d=%22M70%20100h150l40%2025H120z%22/%3E%3Cpath%20d=%22M120%20125v40%22/%3E%3Cpath%20d=%22M95%20165h90%22/%3E%3Ccircle%20cx=%22210%22%20cy=%22112%22%20r=%2218%22/%3E%3Cpath%20d=%22M290%20120h60%22/%3E%3Cpath%20d=%22M310%2095h40v70h-40%22/%3E%3C/g%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: cover, 68%;
  background-position: center, 92% 75%;
}
.card .img.wifi {
  background-image:
    linear-gradient(120deg, rgba(11,31,58,.65), rgba(200,29,37,.35)),
    url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22420%22%20height=%22240%22%20viewBox=%220%200%20420%20240%22%3E%3Cg%20fill=%22none%22%20stroke=%22white%22%20stroke-width=%2210%22%20stroke-linecap=%22round%22%20opacity=%220.92%22%3E%3Cpath%20d=%22M110%20115c55-55%20145-55%20200%200%22/%3E%3Cpath%20d=%22M145%20145c36-36%2094-36%20130%200%22/%3E%3Cpath%20d=%22M180%20175c18-18%2042-18%2060%200%22/%3E%3Ccircle%20cx=%22210%22%20cy=%22195%22%20r=%2210%22%20fill=%22white%22%20stroke=%22none%22/%3E%3C/g%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: cover, 68%;
  background-position: center, 92% 75%;
}
.card .img.av {
  background-image:
    linear-gradient(120deg, rgba(11,31,58,.65), rgba(200,29,37,.35)),
    url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22420%22%20height=%22240%22%20viewBox=%220%200%20420%20240%22%3E%3Cg%20fill=%22none%22%20stroke=%22white%22%20stroke-width=%2210%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20opacity=%220.92%22%3E%3Crect%20x=%2285%22%20y=%2270%22%20width=%22190%22%20height=%22120%22%20rx=%2214%22/%3E%3Cpath%20d=%22M285%20105l55-30v110l-55-30z%22/%3E%3Cpath%20d=%22M130%20205h100%22/%3E%3C/g%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: cover, 68%;
  background-position: center, 92% 75%;
}
.card .img.connect {
  background-image:
    linear-gradient(120deg, rgba(11,31,58,.65), rgba(200,29,37,.35)),
    url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22420%22%20height=%22240%22%20viewBox=%220%200%20420%20240%22%3E%3Cg%20fill=%22none%22%20stroke=%22white%22%20stroke-width=%2210%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20opacity=%220.92%22%3E%3Cpath%20d=%22M140%2090c-30%200-55%2025-55%2055s25%2055%2055%2055h50%22/%3E%3Cpath%20d=%22M280%2090c30%200%2055%2025%2055%2055s-25%2055-55%2055h-50%22/%3E%3Cpath%20d=%22M190%20145h40%22/%3E%3C/g%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: cover, 68%;
  background-position: center, 92% 75%;
}

.kpi { display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.kpi div { background: rgba(11,31,58,.04); border-radius: 14px; padding: 12px; }
.kpi strong { display:block; color: var(--crts-blue); }

.testimonials { display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.quote {
  background: white; border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--crts-radius); padding: 18px; box-shadow: var(--crts-shadow);
}
.quote p { font-style: italic; margin-bottom: 10px; }
.quote .by { font-weight: 800; color: var(--crts-blue); }

.footer { background: var(--crts-blue); color: rgba(255,255,255,.88); padding: 34px 0; }
.footer a { color: white; }
.footer-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.footer .brand-mark { color: white; }
.footer .brand-mark .bar { background: var(--crts-red); }

.page-head { padding: 26px 0 10px; border-bottom: 1px solid rgba(0,0,0,.06); }
.page-head .breadcrumbs { font-size: .9rem; opacity: .8; }
.content { padding: 26px 0 48px; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .grid.solutions { grid-template-columns: repeat(2, 1fr); }
  .testimonials { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid.solutions { grid-template-columns: 1fr; }
  .nav { display:none; }
}


/* Photo tile overlay (works with Featured Image backgrounds set inline) */
.card .img{ position: relative; }
.card .img::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(11,31,58,.55), rgba(200,29,37,.22));
}


/* Testimonial video + quote grid */
.t-wrap{ display:grid; grid-template-columns: 1.25fr .75fr; gap: 18px; align-items:start; }
.t-video{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--crts-radius);
  box-shadow: var(--crts-shadow);
  overflow:hidden;
}
.t-video .head{ padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,.06); }
.t-video .embed{ position:relative; width:100%; padding-top:56.25%; background: #000; }
.t-video .embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.t-video .caption{ padding: 14px 16px; }
.t-quotes{ display:grid; gap: 12px; }
.t-quotes .quote{ padding: 14px 16px; }
@media (max-width: 980px){
  .t-wrap{ grid-template-columns: 1fr; }
}