/*
Theme Name: Andriks Security
Author: Andriks Security
Description: Адаптивна фирмена тема с услуги, офиси, карти и форми за запитвания.
Version: 1.0.2
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: andriks-security
*/

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  color-scheme: dark;
  --ink: #f5f4f2;
  --muted: #b9babf;
  --dim: #a2a4ab;
  --bg: #101113;
  --surface: #17191c;
  --surface-hover: #202125;
  --border: #303238;
  --accent: #ff911c;
  --accent-bright: #ffab4a;
  --on-accent: #15100b;
  --wrap: 1232px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --radius: 9px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem / 1.65 Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; vertical-align: middle; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { color: var(--ink); font-weight: 770; letter-spacing: -.035em; line-height: 1.13; }
h1 { font-size: clamp(2.25rem, 5.6vw, 4.55rem); overflow-wrap: anywhere; }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); overflow-wrap: anywhere; }
h3 { font-size: 1.25rem; }
p { color: var(--muted); }
a { color: inherit; text-underline-offset: .21em; }
a:hover { color: var(--accent-bright); }
svg { display: block; flex: 0 0 auto; width: 1.1em; height: 1.1em; }
:focus-visible { outline: 2px solid #ffc677; outline-offset: 4px; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 28px; }
.container { width: min(var(--wrap), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.section { padding-block: clamp(58px, 7.3vw, 105px); }
.section--compact { padding-top: clamp(36px, 5.5vw, 70px); }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 50;
  transform: translateY(-160%);
  padding: 9px 14px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}
.skip-link:focus { transform: none; color: var(--on-accent); }

.contact-bar { border-bottom: 1px solid #222327; background: #0a0b0c; color: var(--dim); font-size: .78rem; }
.contact-bar__inner { display: flex; align-items: center; gap: 26px; min-height: 37px; }
.contact-bar__inner > :first-child { margin-right: auto; }
.contact-bar__inner span, .contact-bar__inner a { display: inline-flex; align-items: center; gap: 7px; }
.contact-bar a { text-decoration: none; }
.contact-bar svg { color: var(--accent); }

.site-header {
  position: relative;
  z-index: 3;
  border-bottom: 1px solid #26282d;
  background: #111214;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 80px;
}
.brand, .custom-logo-link { display: inline-flex; flex: 0 0 auto; align-items: center; }
.brand img, .custom-logo-link img { width: clamp(146px, 15vw, 211px); height: auto; max-height: 64px; object-fit: contain; }
.primary-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); }
.primary-nav__list { display: flex; align-items: center; gap: clamp(17px, 2.5vw, 33px); list-style: none; margin: 0; padding: 0; }
.primary-nav__list a { display: inline-flex; align-items: center; min-height: 44px; font-size: .91rem; font-weight: 660; text-decoration: none; }
.primary-nav__list [aria-current="page"], .primary-nav__list .current-menu-parent > a,
.primary-nav__list .current-menu-ancestor > a { color: var(--accent-bright); }
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 7px 11px;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  font: inherit;
  font-size: .87rem;
  cursor: pointer;
}

.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 49px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 6px;
  font: 730 .92rem / 1.3 Inter, system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s;
  cursor: pointer;
}
.button--compact { padding: 10px 14px; min-height: 43px; font-size: .86rem; }
.button--primary { background: var(--accent); color: var(--on-accent); }
.button--primary:hover { background: var(--accent-bright); color: var(--on-accent); }
.button--ghost { color: var(--ink); border-color: #55565b; background: rgb(19 20 23 / 38%); }
.button--ghost:hover { border-color: var(--accent); color: var(--accent-bright); }
.button[disabled] { opacity: .68; cursor: wait; }
.text-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  color: var(--accent-bright);
  font-size: .92rem;
  font-weight: 720;
  text-decoration: none;
}
.text-link:hover { color: var(--ink); }

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: stretch;
  min-height: clamp(490px, 43vw, 672px);
  overflow: hidden;
  background: #101113;
  border-bottom: 1px solid #26282e;
}
.hero__visual, .hero::after { position: absolute; inset: 0; z-index: -1; }
.hero__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 63% 50%; }
.hero::after {
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(12 13 15 / 98%) 0%, rgb(12 13 15 / 88%) 26%, rgb(12 13 15 / 56%) 48%, transparent 68%),
    linear-gradient(0deg, rgb(14 15 17 / 68%), transparent 28%);
}
.hero__inner { align-self: center; padding-block: clamp(58px, 8.5vw, 132px); }
.hero__content { max-width: 640px; }
.hero h1 {
  font-size: clamp(3.4rem, 8.2vw, 7.7rem);
  letter-spacing: -.073em;
  line-height: .98;
  font-weight: 850;
}
.hero h1 span, .split-section h2 span { color: var(--accent); }
.hero p {
  max-width: 32rem;
  margin: clamp(20px, 3vw, 34px) 0 27px;
  color: #dedee0;
  font-size: clamp(1rem, 1.65vw, 1.26rem);
  line-height: 1.55;
}

.section-title { margin-bottom: 25px; }
.section-title--inline { display: flex; align-items: end; justify-content: space-between; column-gap: 14px; }
.section-title h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin-top: 14px;
  background: var(--accent);
}
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 214px;
  padding: clamp(20px, 2.4vw, 29px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background-color .2s, border-color .2s;
}
.service-card:hover, .service-card:focus-within { border-color: #8a5522; background: var(--surface-hover); }
.service-card__icon, .page-heading__icon {
  display: grid;
  justify-content: center;
  align-content: center;
  width: 43px;
  height: 43px;
  margin-bottom: 18px;
  border: 1px solid #624222;
  border-radius: 7px;
  background: #2b2017;
  color: var(--accent-bright);
}
.service-card__icon svg, .page-heading__icon svg { width: 22px; height: 22px; }
.service-card__title { font-size: 1.25rem; overflow-wrap: anywhere; }
.service-card__title a { text-decoration: none; }
.service-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.service-card__title a:focus-visible { outline: none; }
.service-card__title a:focus-visible::after { outline: 2px solid #ffc677; outline-offset: 4px; }
.service-card p { margin: 9px 0 16px; font-size: .93rem; line-height: 1.58; }
.service-card__more { display: flex; align-items: center; gap: 7px; margin-top: auto; color: var(--accent-bright); font-size: .83rem; font-weight: 710; }

.home-about { background: #151619; border-block: 1px solid #292b30; }
.split-section {
  display: grid;
  grid-template-columns: 1fr .94fr;
  min-height: 410px;
  gap: clamp(32px, 7vw, 105px);
  align-items: center;
  padding-block: clamp(32px, 5vw, 70px);
}
.split-section__image, .about-grid__image { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); }
.split-section__image img, .about-grid__image img { width: 100%; height: auto; object-fit: cover; }
.split-section__content p { margin: 16px 0 12px; max-width: 42ch; }

.request-grid { display: grid; grid-template-columns: .82fr 1fr; align-items: center; gap: clamp(32px, 8vw, 116px); }
.request-grid__intro p { max-width: 38ch; margin: 15px 0; }

.page-heading {
  padding-block: clamp(30px, 6vw, 70px) clamp(34px, 6vw, 70px);
  background:
    radial-gradient(ellipse at 100% 0%, rgb(128 68 19 / 20%), transparent 44%),
    linear-gradient(145deg, #191a1d, #101113 70%);
  border-bottom: 1px solid var(--border);
}
.page-heading h1 { max-width: 1020px; }
.page-heading p { max-width: 68ch; margin-top: 14px; color: #d0d0d3; font-size: clamp(1rem, 2vw, 1.22rem); }
.page-heading__icon { width: 48px; height: 48px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 21px; color: var(--dim); font-size: .84rem; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current] { color: #dfdfdf; }

.prose { max-width: 76ch; }
.prose > * + * { margin-top: 1em; }
.prose p { color: #d3d3d6; }
.prose h2 { margin-top: 1.45em; font-size: clamp(1.53rem, 3.2vw, 2.2rem); }
.prose > :first-child { margin-top: 0; }
.prose h3 { margin-top: 1.3em; }
.prose li { color: #d3d3d6; }
.prose a { color: var(--accent-bright); }
.prose a:hover { color: var(--ink); }
.prose img { height: auto; }
.prose--above { margin-bottom: 35px; }

.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(245px, 315px); gap: clamp(30px, 6vw, 84px); align-items: start; }
.detail-sidebar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 25px; }
.detail-sidebar h2 { font-size: 1.45rem; }
.detail-sidebar p { margin: 12px 0 18px; font-size: .91rem; }
.detail-sidebar__phone { display: flex; align-items: center; gap: 8px; margin-top: 15px; color: #ececec; font-size: .9rem; text-decoration: none; }
.detail-sidebar__phone svg { color: var(--accent); }
.about-grid { display: grid; grid-template-columns: 1fr .8fr; align-items: start; gap: clamp(30px, 6vw, 84px); }
.action-section { padding-bottom: clamp(52px, 7vw, 90px); }
.action-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: clamp(20px, 4vw, 38px);
  border: 1px solid #704520;
  border-radius: var(--radius);
  background: linear-gradient(100deg, #271e18, #18191c 75%);
}
.action-panel h2 { font-size: clamp(1.35rem, 2.8vw, 2rem); }
.action-panel p { margin-top: 7px; }
.action-panel > .button { flex: 0 0 auto; }

.contact-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-strip a {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 19px 22px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .86rem;
  text-decoration: none;
}
.contact-strip svg { width: 24px; height: 24px; color: var(--accent); }
.contact-strip strong { display: block; color: var(--ink); font-size: 1.13rem; overflow-wrap: anywhere; }
.contact-strip a:hover { border-color: #8a5522; }
.map-section, .forms-grid { margin-top: clamp(38px, 5vw, 65px); }
.office-grid, .forms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.office-card { overflow: hidden; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); }
.office-card__details { display: flex; align-items: center; gap: 12px; padding: 19px; }
.office-card__details > svg { color: var(--accent); }
.office-card__details p { margin-top: 4px; font-size: .87rem; }
.office-card__details .text-link { margin-left: auto; flex: 0 0 auto; }
.office-card iframe { display: block; width: 100%; height: 290px; border: 0; background: #282b30; }
.forms-grid { align-items: start; }

.inquiry-panel {
  padding: clamp(20px, 3.7vw, 40px);
  background: #181a1e;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.inquiry-panel__heading h2 { font-size: clamp(1.55rem, 3vw, 2.22rem); }
.inquiry-panel__heading p { margin: 8px 0 21px; font-size: .93rem; }
.inquiry-form { display: grid; gap: 14px; }
.inquiry-form > .button { justify-self: start; }
.form-field { display: grid; gap: 5px; }
.form-field label { font-size: .91rem; font-weight: 675; }
.form-field label span { color: var(--dim); font-weight: 400; }
.form-field :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 47px;
  padding: 10px 13px;
  color: var(--ink);
  background: #111215;
  border: 1px solid #414349;
  border-radius: 5px;
  font: inherit;
  font-size: 1rem;
}
.form-field :is(input, textarea)::placeholder { color: #9698a0; opacity: 1; }
.form-field textarea { resize: vertical; }
.form-note { color: var(--dim); font-size: .78rem; line-height: 1.48; }
.form-note a { display: inline-block; margin-left: 4px; }
.form-notice { padding: 10px 13px; background: #292b30; border: 1px solid #4b4e55; border-radius: 5px; color: var(--ink); font-size: .89rem; }
.form-notice--success { color: #c3f0d1; background: #1b3025; border-color: #3c6a4e; }
.form-notice--error { color: #ffdbd1; background: #38251f; border-color: #84513d; }
.trap { position: absolute; overflow: hidden; width: 1px; height: 1px; clip-path: inset(50%); }

.site-footer { background: #0b0c0e; border-top: 1px solid #292b30; color: var(--dim); }
.footer-grid { display: grid; grid-template-columns: 1.15fr .8fr 1fr; gap: 25px; padding-block: 42px; }
.footer-grid h2 { margin-bottom: 12px; font-size: 1.05rem; letter-spacing: -.01em; }
.footer-grid p { margin-top: 7px; font-size: .87rem; }
.footer-grid p a { text-decoration: none; }
.footer-grid p strong { color: var(--ink); }
.footer-brand p { margin-top: 13px; max-width: 30ch; }
.social-links { display: flex; flex-wrap: wrap; gap: 4px 15px; margin-top: 11px; font-size: .81rem; }
.social-links a { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; text-decoration: none; }
.social-links svg { color: var(--accent); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-block: 14px; border-top: 1px solid #292b30; font-size: .77rem; }

.posts-list { display: grid; gap: 33px; margin-block: 25px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; }

@media (min-width: 1700px) {
  .hero__visual img { object-position: 62% 50%; }
}

@media (max-width: 960px) {
  .hero { min-height: 490px; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .office-card__details { flex-wrap: wrap; }
}

@media (max-width: 820px) {
  .site-header__inner { min-height: 64px; gap: 12px; flex-wrap: wrap; padding-block: 10px; }
  .primary-nav { flex-basis: 100%; flex-wrap: wrap; gap: 7px 22px; padding-bottom: 5px; }
  .primary-nav__list { flex-wrap: wrap; gap: 2px 17px; }
  .primary-nav--collapsible { flex-direction: column; align-items: stretch; gap: 8px; }
  .primary-nav--collapsible .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav--collapsible .primary-nav__list a { width: 100%; border-bottom: 1px solid #25262a; }
  .primary-nav--collapsible .button { align-self: flex-start; margin-top: 7px; }
  .split-section, .request-grid, .about-grid { gap: 28px; }
  .office-card iframe { height: 245px; }
}

@media (max-width: 680px) {
  .contact-bar__inner { min-height: 33px; gap: 11px; justify-content: space-between; font-size: .72rem; }
  .contact-bar__inner > :first-child { display: none; }
  .hero { min-height: 0; }
  .hero__visual { bottom: auto; height: clamp(230px, 59vw, 365px); }
  .hero__visual img { object-position: 88% 48%; }
  .hero::after {
    background:
      linear-gradient(0deg, #101113 0%, #101113 46%, rgb(16 17 19 / 93%) 54%, transparent 81%),
      linear-gradient(90deg, rgb(16 17 19 / 38%), transparent 65%);
  }
  .hero__inner { align-self: end; padding-top: clamp(168px, 43vw, 235px); padding-bottom: 35px; }
  .hero h1 { font-size: clamp(3.0rem, 11vw, 4.8rem); letter-spacing: -.062em; }
  .hero p { margin: 16px 0 20px; }
  .service-grid, .split-section, .request-grid, .about-grid, .detail-grid, .office-grid, .forms-grid { grid-template-columns: 1fr; }
  .service-card { min-height: auto; padding: 19px; }
  .service-card__icon { margin-bottom: 11px; }
  .service-card p { margin-bottom: 11px; }
  .split-section { min-height: 0; }
  .split-section__image { order: 2; }
  .split-section__content p { margin-bottom: 5px; }
  .action-panel { flex-direction: column; align-items: start; }
  .office-card iframe { height: 250px; }
  .contact-strip { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; padding-block: 30px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 360px) {
  .contact-bar__inner svg { display: none; }
  .office-card__details .text-link { margin-left: 28px; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}