/*
Theme Name: Byggvangur Custom
Description: Кастомная тема — копия одностраничника byggvangur.is, собранная по снимку builder-to-theme вместо Oxygen.
Author: Studio Mango
Version: 1.0
*/

:root{
  --red:#B01C2A;
  --blue:#0074DB;
  --ink:#000;
  --soft:rgba(196,196,196,.1);
  --line:rgba(0,0,0,.2);
  --container:1170px;
  --pad:20px;
  --col-gap:61.5px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:var(--ink);font-size:19px;line-height:1.8;font-weight:400}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{width:min(var(--container),100% - (var(--pad) * 2));margin-inline:auto}

/* ---------- типографика (роли из ТЗ) ---------- */
h1,h2,h3{margin:0;font-weight:700}
h1{font-size:42px;line-height:1.48;color:var(--red)}
h2{font-size:40px;line-height:1.48;color:var(--ink)}
h3{font-size:32px;line-height:1.18;color:var(--red)}
p{margin:0}
.lead{font-size:20px;line-height:1.8;font-weight:700}
.muted{font-size:14px;line-height:1.8}
.note{font-size:16px;line-height:1.8;font-weight:700}

/* ---------- шапка ---------- */
.site-header{position:relative}
/* Выше 1120 оригинал кладёт шапку поверх hero (position:absolute, z-index 20),
   ниже — она в потоке. Брейкпоинт снят с самой страницы. */
@media (min-width:1121px){.site-header--overlay{position:absolute;top:0;left:0;right:0;z-index:20}}
.header-row{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;min-height:139px}
.header-logo{flex:none}
.header-logo img{width:151px;height:139px;object-fit:fill;max-width:none}
.nav{display:flex;gap:0;align-items:center}
.nav a{font-size:19px;line-height:1.48;font-weight:400;text-decoration:none;padding:0 17px}
.nav a:hover{color:var(--red)}
.nav a.nav-cta{background:var(--red);color:#fff;border-radius:70px;padding:13px 24px;margin-left:0}
.nav a.nav-cta:hover{color:#fff;opacity:.9}

/* Липкая шапка. В оригинале включается после ~200px прокрутки и только выше 1120,
   где шапка наложена на hero: строка ужимается со 139 до 92, логотип со 151×139 до
   100×92, фон становится белым. Ниже 1120 шапка остаётся в потоке и не липнет. */
.site-header.is-stuck{position:fixed;top:0;left:0;right:0;z-index:2147483640;background:#fff;
  animation:byg-header-fade .3s ease-out}
.site-header.is-stuck .header-row{min-height:92px}
.site-header.is-stuck .header-logo img{width:100px;height:92px}
@keyframes byg-header-fade{from{opacity:0}to{opacity:1}}

/* Гамбургер: три полосы 40×6 в боксе 40×32 — размеры сняты с оригинала */
.nav-toggle{display:none;width:40px;height:32px;padding:0;border:0;background:none;cursor:pointer;
  flex-direction:column;justify-content:space-between}
.nav-toggle span{display:block;width:40px;height:6px;border-radius:2px;background:var(--ink)}

/* ---------- hero ---------- */
.hero{min-height:639px;padding:75px var(--pad);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background-position:center;background-size:cover;background-repeat:no-repeat}
.hero-inner{width:1009px;max-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero h1{font-size:54px;line-height:1.48;color:var(--ink);text-align:center}

/* ---------- вводный блок «Þjónusta Byggvangs» ---------- */
.intro{background:var(--soft);padding:105px 0 75px}
.intro-row{position:relative;display:flex;justify-content:space-between}
.intro-deco{position:absolute;left:0;top:-142px;width:66px;height:66px}
.intro-col{display:flex;flex-direction:column;align-items:flex-start;width:100%}
.intro h2{text-align:justify}
/* 42px отступа слева и 15px до заголовка — из снимка; нижние 68.4px в оригинале
   набраны двумя пустыми строками, здесь это padding, чтобы не плодить пустые узлы */
.intro-text{margin-left:42px;margin-top:15px;padding-bottom:68.4px}
.intro-text p+p{margin-top:34.2px}

/* ---------- услуги ---------- */
.services{padding-top:145px;padding-bottom:158px}
/* два ряда по три карточки, между рядами 119px — как в оригинале.
   Одна общая обёртка на шесть карточек даёт другое разбиение при переносе на 768. */
.svc-row{display:flex;flex-wrap:wrap;justify-content:space-between}
.svc-row+.svc-row{margin-top:119px}
.svc{width:33%;max-width:349px;min-width:0;margin-bottom:10px}
.deco{width:60px;height:60px;margin-bottom:14px}
.svc-intro{margin-bottom:10px}
.svc-intro h2{margin-top:14px;text-align:justify}
.svc h3{margin-bottom:16px;text-align:justify}
.svc .muted{margin-bottom:10px}
.more{display:flex;width:fit-content;align-items:center;gap:12px;text-decoration:none;text-align:center}
.more span{font-size:16px;line-height:1.8;font-weight:700;text-transform:uppercase}
.more img{width:14px;height:17px}

/* ---------- сотрудники ---------- */
.staff{padding-bottom:168px;background:var(--soft)}
.staff .deco{margin-bottom:20px}
.staff h2{margin-bottom:20px}
/* фото центрируется по высоте строки — в оригинале это не фиксированный отступ,
   поэтому на узких экранах смещение растёт вместе с высотой текста */
.staff-grid{display:grid;grid-template-columns:224px 1fr;column-gap:54px;align-items:center;margin-bottom:54px}
.staff-photo{width:224px;height:293px;object-fit:fill}
.staff h3{margin:0 0 17px}
.staff-body p+p{margin-top:34.2px}

/* ---------- соцсети ---------- */
.social{text-align:center}
.social h2{margin-bottom:0}
/* В оригинале это блоки Гутенберга: figure с картинкой и figcaption
   (margin-top 9.5px, margin-bottom 19px, строка 34.2px). Колонкой должна быть
   именно ссылка — картинка и подпись лежат внутри неё. */
/* Блок шириной с подпись центрируется, а иконка внутри него прижата влево —
   это следствие figure/figcaption у Гутенберга, и на глаз заметно. */
.social-item{padding-bottom:19px}
.social-item a{display:inline-block;text-align:left;text-decoration:none}
.social-item img{display:block;margin-bottom:9.5px}
.social-item em{display:block;font-style:italic;color:var(--blue);font-size:19px;line-height:34.2px}

/* ---------- контакты ---------- */
.contact{margin-top:19px;padding:127px 0 117px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:0;align-items:start}
.contact h1{margin:20px 0 0;max-width:477px}
.contact .addr{margin-top:46px}
/* в оригинале под левой колонкой остаётся пустая строка — на планшете от неё
   зависит, где начинается форма, поэтому переносим её как явный отступ */
/* правый отступ 20px у левой колонки: из-за него заголовок на 1024 переносится
   в четыре строки, а не в три */
.contact-info{padding-bottom:41px;padding-right:20px}
/* форма шире 580px не растягивается ни на одной ширине */
.contact-form{max-width:610px;padding-left:10px;padding-right:20px}
.contact .maplink{display:inline-block;color:var(--red);text-decoration:none}

/* Форма своя, но структура строки повторяет ту, что отдавал Contact Form 7:
   <p><label>текст<br><span><input></span></label></p>. Своя раскладка здесь давала
   строку другой высоты, и поля расползались к низу формы — см. историю в README. */
form.byg-form label{font-size:16px;line-height:1.48;font-weight:700}
/* пара «Símanúmer/Netfang»: по 47% с распором — зазор в оригинале масштабируется
   вместе с формой (33px при 555, 28px при 462) */
form.byg-form .double-div{display:flex;justify-content:space-between}
form.byg-form .double-div p{flex:0 0 47%;margin:0}
form.byg-form p{margin:0 0 12px}
.byg-control{
  width:100%;height:40px;padding:0 10px;font:inherit;font-size:16px;
  background:rgba(255,255,255,0);border:1px inset var(--line);border-radius:0}
.byg-control.byg-textarea{height:80px;padding:8px 10px;border:1px solid var(--line)}
.byg-control.byg-submit{
  width:184px;height:50px;padding:0;border:1px outset var(--line);border-radius:70px;
  background:var(--red);color:#fff;font-weight:700;cursor:pointer}
/* ловушка для ботов: поле есть в разметке, но не видно и не попадает в табуляцию */
.byg-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.byg-msg{margin:0 0 12px;padding:10px 12px;font-size:16px;line-height:1.48;border:1px solid}
.byg-msg-ok{border-color:#2e7d32;color:#2e7d32}
.byg-msg-err{border-color:var(--red);color:var(--red)}
.byg-field-err{display:block;margin-top:4px;font-size:14px;font-weight:400;color:var(--red)}

/* ---------- адаптив: брейкпоинты сняты со страницы (992 / 768 / 1120) ---------- */
/* Во втором ряду услуг оригинал добавляет карточкам по 10px внутрь со стороны соседа —
   зазор между колонками там шире, чем в первом ряду. Только пока колонок две. */
@media (min-width:768px) and (max-width:991px){
  .svc-row+.svc-row .svc:nth-child(1),
  .svc-row+.svc-row .svc:nth-child(3){padding-right:10px}
  .svc-row+.svc-row .svc:nth-child(2){padding-left:10px}
}

/* Ниже 1120 меню сворачивается в гамбургер: пункты и кнопка прячутся,
   выпадающая панель открывается по клику. */
@media (max-width:1120px){
  .header-row{position:relative}
  .nav-toggle{display:flex}
  .nav{display:none}
  /* Открытое меню — белый экран целиком, пункты по центру с шагом 48px,
     крестик 51×51 в правом верхнем углу. Всё снято с оригинала. */
  .nav.is-open{display:flex;position:fixed;inset:0;z-index:2147483642;background:#fff;
    flex-direction:column;align-items:center;justify-content:center;gap:0;padding:0}
  /* отступ висит на самих пунктах, включая последний — иначе блок центрируется на 10px выше */
  .nav.is-open a{width:100%;text-align:center;padding:0 17px;margin-bottom:20px}
  /* В оригинале эта кнопка в открытом меню белым по белому — не видна. Оставляем
     красную пилюлю: размеры те же (54px по высоте), но пункт читается. */
  .nav.is-open a.nav-cta{width:auto;padding:13px 24px}
  .nav-toggle.is-open{position:fixed;top:25px;right:14px;z-index:2147483643;
    width:51px;height:51px;justify-content:center;gap:0}
  .nav-toggle.is-open span:nth-child(2){display:none}
  .nav-toggle.is-open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-3px) rotate(-45deg)}
  body.nav-open{overflow:hidden}
}

@media (max-width:991px){
  /* контакты складываются в одну колонку на планшете, блок сотрудников — нет:
     в оригинале фото остаётся слева от текста вплоть до 479px */
  .contact-grid{grid-template-columns:1fr;row-gap:0}
  .contact-info{padding-bottom:20px}
}
@media (max-width:991px){
  /* карточки фиксируются на 349px, ряд переносит их сам: 2 + 1 */
  .svc{width:349px}
}
@media (max-width:767px){
  h1{font-size:40px}
  .hero{min-height:100vh;padding:40px var(--pad)}
  .hero h1{font-size:40px;line-height:59.2px}
  .intro{padding-bottom:57px}
  .intro-text{margin-left:0}
  .services{padding-top:38px;padding-bottom:60px}
  /* ниже 768 карточки идут в одну колонку во всю ширину, ряды вплотную,
     блок сотрудника складывается — границу дал probe.mjs */
  .svc{width:100%;max-width:none;margin-bottom:30px}
  .svc-intro{margin-bottom:20px}
  .svc-row+.svc-row{margin-top:0}
  /* последняя карточка страницы в оригинале осталась с базовым отступом */
  .svc-row:last-child .svc:last-child{margin-bottom:10px}
  .staff{padding-bottom:45px}
  .staff-grid{grid-template-columns:1fr;row-gap:31px}
  .staff-photo{margin-top:0}
  .header-row{min-height:100px}
  .staff-photo{margin-inline:auto}
}

@media (max-width:479px){
  /* phone-portrait в Oxygen — свои значения отступов */
  form.byg-form .double-div{display:block}
  .staff{padding-bottom:40px}
  .intro{padding-top:44px;padding-bottom:40px}
  .intro-deco{top:-63px}
  .services{padding-top:40px;padding-bottom:40px}
  /* на этой ширине оригинал добавляет колонке 19px сверху */
  .intro-col{padding-top:19px}
}