/*
Theme Name: Juwon
Theme URI: https://example.com/juwon
Author: OpenAI
Description: Custom WordPress theme inspired by the uploaded Natsi Security Service layout.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: juwon
*/

:root {
  --juwon-primary: #0089e4;
  --juwon-primary-dark: #192730;
  --juwon-text: #192730;
  --juwon-bg: #f6f6f8;
  --juwon-white: #ffffff;
  --juwon-border: #dddddd;
  --juwon-container: 1200px;
  --juwon-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: var(--juwon-text);
  background: var(--juwon-bg);
  line-height: 1.7;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--juwon-primary); text-decoration: none; }
a:hover { color: var(--juwon-primary-dark); }
p { margin: 0 0 1rem; }
h1,h2,h3,h4 { margin: 0 0 1rem; line-height: 1.2; color: #000; }
.site-container { width: min(100% - 32px, var(--juwon-container)); margin: 0 auto; }
.section { padding: 84px 0; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  background: var(--juwon-primary);
  color: #fff;
  padding: 16px 30px;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  transition: .25s ease;
}
.btn:hover { background: var(--juwon-primary-dark); color: #fff; }
.btn.btn-light { background: #fff; color: var(--juwon-primary); }
.btn.btn-light:hover { background: var(--juwon-primary-dark); color: #fff; }

.screen-reader-text {
  position: absolute;
  left: -9999px;
}

/* Header */
.site-header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.header-inner {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.branding img {
  width: auto;
  max-height: 70px;
}
.primary-nav-wrap {
  display: flex;
  align-items: center;
  gap: 28px;
}
.primary-menu {
  display: flex;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-menu a {
  color: #000;
  font-weight: 500;
}
.primary-menu .current-menu-item > a,
.primary-menu a:hover { color: var(--juwon-primary); }
.header-phone {
  font-size: 1.2rem;
  font-weight: 500;
}
.mobile-toggle {
  display: none;
  background: var(--juwon-primary);
  color: #fff;
  width: 58px;
  height: 58px;
  border: 0;
  font-size: 1.6rem;
}

/* Hero */
.hero {
  position: relative;
  color: #fff;
  background: url('assets/images/hero-bg.png') center/cover no-repeat;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 137, 228, 0.78);
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: center;
  padding: 110px 0 94px;
}
.hero-content h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  max-width: 720px;
}
.hero-content p {
  font-size: 1.55rem;
  max-width: 760px;
  opacity: .95;
  margin-bottom: 2rem;
}
.hero-card {
  background: rgba(246,246,248,.95);
  color: var(--juwon-text);
  padding: 40px;
  box-shadow: var(--juwon-shadow);
}
.hero-card h3 { font-size: 2rem; }
.form-grid { display: grid; gap: 18px; }
.form-grid input,
.form-grid textarea {
  width: 100%;
  border: 1px solid var(--juwon-border);
  background: #fff;
  padding: 18px 16px;
  font-family: inherit;
  font-size: 1rem;
}
.form-grid textarea { min-height: 150px; resize: vertical; }

/* Content */
.two-col {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 60px;
  align-items: center;
}
.about-copy h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.about-copy h3 { font-size: 2rem; }
.bullets {
  list-style: none;
  padding: 0;
  margin: 28px 0;
}
.bullets li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
}
.bullets li::before {
  content: '»';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--juwon-primary);
  font-weight: 700;
}

.service-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.service-card {
  position: relative;
  min-height: 320px;
  color: #fff;
  padding: 44px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.service-card::before,
.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
}
.service-card::before {
  background: url('assets/images/hero-bg.png') center/cover no-repeat;
  transform: scale(1.08);
}
.service-card::after {
  background: rgba(25,39,48,.66);
}
.service-card.highlight::after { background: rgba(0, 137, 228, .72); }
.service-card > * { position: relative; z-index: 1; }
.service-card h3 { color: #fff; font-size: 2rem; }

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
  text-align: center;
}
.feature-item {
  padding: 10px 18px;
}
.feature-icon {
  width: 86px;
  height: 86px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--juwon-primary);
  font-size: 2.1rem;
}
.feature-item h3 { font-size: 1.85rem; }

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 26px;
}
.why-card {
  min-height: 300px;
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.why-card::before,
.why-card::after {
  content: '';
  position: absolute;
  inset: 0;
}
.why-card::before { background: url('assets/images/hero-bg.png') center/cover no-repeat; }
.why-card::after { background: rgba(25,39,48,.62); }
.why-card-content {
  position: relative;
  z-index: 1;
  padding: 34px 26px;
}
.why-card h3 { color: #fff; font-size: 2rem; }
.why-card .feature-icon { color: var(--juwon-primary); background: transparent; }

.contact-section {
  background: var(--juwon-primary);
  color: #fff;
}
.contact-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 42px;
}
.contact-section h2,
.contact-section h3,
.contact-section p { color: #fff; }
.contact-section .form-grid input,
.contact-section .form-grid textarea { background: rgba(255,255,255,.96); }
.contact-meta p { margin-bottom: 1.6rem; }
.contact-form .row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* Footer */
.site-footer-main {
  background: var(--juwon-bg);
  border-top: 1px solid #e6e6e6;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr 1fr;
  gap: 34px;
  padding: 70px 0;
}
.footer-branding img { max-height: 90px; }
.socials {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.socials a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--juwon-primary-dark);
  color: #fff;
}
.socials a:hover { background: var(--juwon-primary); }
.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-menu li { margin-bottom: 12px; }
.footer-map iframe {
  width: 100%;
  min-height: 320px;
  border: 0;
}
.site-subfooter {
  background: #000;
  color: #fff;
  padding: 24px 0;
  text-align: center;
}
.site-subfooter p { margin: .4rem 0; }

.entry-content,
.archive-content {
  padding: 60px 0;
}

/* Responsive */
@media (max-width: 991px) {
  .mobile-toggle { display: inline-grid; place-items: center; }
  .primary-nav-wrap {
    position: absolute;
    top: 100%;
    right: 16px;
    left: 16px;
    background: #fff;
    box-shadow: var(--juwon-shadow);
    padding: 20px;
    display: none;
    flex-direction: column;
    align-items: flex-start;
  }
  .primary-nav-wrap.is-open { display: flex; }
  .primary-menu { flex-direction: column; gap: 18px; width: 100%; }
  .header-phone { margin-top: 8px; }
  .hero-inner,
  .two-col,
  .contact-grid,
  .footer-grid,
  .why-grid,
  .features-grid,
  .service-band {
    grid-template-columns: 1fr;
  }
  .contact-form .row-2 { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
}

@media (max-width: 640px) {
  .header-inner { min-height: 88px; }
  .branding img { max-height: 56px; }
  .hero-inner { padding: 72px 0 64px; gap: 30px; }
  .hero-card { padding: 26px; }
  .hero-content p { font-size: 1.15rem; }
  .about-copy h3,
  .service-card h3,
  .feature-item h3,
  .why-card h3,
  .contact-section h2,
  .contact-section h3 { font-size: 1.6rem; }
}