/* ==========================================================================
   Site chrome — header, footer, CV modal.
   Geometry matches the original Elementor header (template 53) and
   footer (template 134) exactly; see README for the measured targets.
   ========================================================================== */

/* --- Header --------------------------------------------------------------
   The header floats over the top of the page: it is 120px tall and carries a
   matching -120px bottom margin, so the first section still starts at y=0.
   ------------------------------------------------------------------------ */
.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 0 -120px;
  padding: 0 var(--gutter);
}

.site-header__logo {
  display: flex;
  align-items: flex-start;
  /* Elementor's icon widget sat in an inline line-box, leaving ~6px of
     descender space below the glyph. Reproducing it keeps the logo on the
     exact same baseline as the original. */
  padding-bottom: 6px;
}

.site-header__logo img {
  display: block;
  width: 50px;
  height: 50px;
}

/* --- Navigation ---------------------------------------------------------- */
.site-nav {
  margin-block: 50px;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 60px;
}

.site-nav__link {
  display: block;
  color: var(--color-secondary);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-transform: uppercase;
  transition: transform .4s, color .4s;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--color-secondary);
  transform: scale(1.2);
}

.site-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  padding: .25em;
  border: 0;
  border-radius: 3px;
  background-color: var(--color-secondary);
  color: var(--color-invert);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.site-nav__icon {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.site-nav__icon--close { display: none; }
.site-nav__toggle[aria-expanded='true'] .site-nav__icon--open { display: none; }
.site-nav__toggle[aria-expanded='true'] .site-nav__icon--close { display: block; }

@media (max-width: 767px) {
  .site-header {
    margin-bottom: -98px;
    padding: 0 var(--gutter-mobile);
  }

  .site-header__logo img { width: 40px; height: 40px; }

  .site-nav { margin-block: 30px; }

  .site-nav__toggle { display: flex; }

  /* Full-bleed dropdown panel, matching Elementor's "stretch" dropdown. */
  .site-nav__list {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9997;
    display: block;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    background-color: var(--color-invert);
    transform: scaleY(0);
    transform-origin: top;
    transition: max-height .3s, transform .3s;
  }

  .site-nav__list.is-open {
    max-height: 60vh;
    overflow-y: auto;
    transform: scaleY(1);
  }

  .site-nav__link {
    padding: 13px 20px;
    border-inline-start: 8px solid transparent;
    color: #33373d;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-transform: none;
  }

  .site-nav__link:hover,
  .site-nav__link:focus-visible { color: #33373d; transform: none; }
}

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  padding: 80px 155px 80px 0;
  background-color: var(--color-accent);
  background-image: url('/assets/images/Rokappa-footer-background.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--color-invert);
}

.site-footer__logo {
  display: block;
  width: 410px;
  height: 85px;
}

.site-footer__line {
  margin: 0;
  color: var(--color-invert);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

.site-footer__line a {
  position: relative;
  color: inherit;
}

.site-footer__line a:hover { color: inherit; text-decoration: underline; }

/* The phone and email lines are only 16px tall. Extend the tap area to ~44px
   with a pseudo-element so the layout is untouched. */
.site-footer__line a::after {
  content: '';
  position: absolute;
  inset: -11px -10px;
}

.site-footer__line--phone { margin: 40px 164px 0 0; }
.site-footer__line--email { margin: 20px 138px 0 0; }
.site-footer__line--address { margin: 20px 109px 0 0; }

.social {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 130px 0 0;
}

.social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
}

.social__link img { display: block; width: 25px; height: 25px; }

@media (max-width: 1366px) {
  .site-footer { padding: 80px 100px 80px 0; }
}

@media (max-width: 1200px) {
  .site-footer__logo { width: 300px; height: auto; }
}

@media (max-width: 880px) {
  .site-footer { padding: 40px 50px 40px 0; }
}

@media (max-width: 767px) {
  .site-footer { padding: 40px 40px 40px 0; }
  .site-footer__line--phone { margin: 40px 0 0; }
  .site-footer__line--email { margin: 20px 0 0; }
  .site-footer__line--address { margin: 20px 0 0; text-align: right; }
  .social { margin: 20px 0 0; }
}

/* --- CV modal ------------------------------------------------------------ */
.modal[hidden] { display: none; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .6);
  overflow-y: auto;
}

.modal__dialog {
  position: relative;
  width: 750px;
  max-width: 100%;
  max-height: calc(100vh - 40px);
  padding: 55px;
  border-radius: 40px;
  background: var(--color-page);
  overflow-y: auto;
}

.modal__close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-primary);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.modal__title { text-align: center; }

.modal__form { margin-top: 30px; }

.modal__form .form__row + .form__row { margin-top: 10px; }

.modal__form .field {
  border: 2px solid var(--color-secondary);
  background-color: var(--color-invert);
}

.modal__form .btn { font-size: 16px; }

.modal__note {
  display: flex;
  align-items: center;
  flex: 1 1 30%;
  min-width: 0;
  font-weight: 900;
}

.modal__upload { flex: 1 1 calc(70% - 10px); min-width: 0; }

@media (max-width: 1024px) {
  .modal__dialog { width: 610px; }
}

@media (max-width: 767px) {
  .modal__dialog { width: 320px; padding: 30px; }
  .modal__note,
  .modal__upload { flex-basis: 100%; }
}

body.is-modal-open { overflow: hidden; }

/* --- Floating WhatsApp button (replaces the Joinchat plugin widget) ------- */
.wa-button {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 9000;
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25d366;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0s4.686 12.283 0 16.97a12 12 0 0 1-13.754 2.299l-5.814.735a.392.392 0 0 1-.438-.44l.748-5.788A12 12 0 0 1 3.517 3.517zm3.61 17.043.3.158a9.85 9.85 0 0 0 11.534-1.758c3.843-3.843 3.843-10.074 0-13.918s-10.075-3.843-13.918 0a9.85 9.85 0 0 0-1.747 11.554l.16.303-.51 3.942a.196.196 0 0 0 .219.22zm6.534-7.003-.933 1.164a9.84 9.84 0 0 1-3.497-3.495l1.166-.933a.79.79 0 0 0 .23-.94L9.561 6.96a.79.79 0 0 0-.924-.445l-2.023.524a.797.797 0 0 0-.588.88 11.754 11.754 0 0 0 10.005 10.005.797.797 0 0 0 .88-.587l.525-2.023a.79.79 0 0 0-.445-.923L14.6 13.327a.79.79 0 0 0-.94.23z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
  box-shadow: 1px 6px 24px 0 rgba(7, 94, 84, .24);
  transition: background-color .2s linear;
}

.wa-button:hover,
.wa-button:focus-visible { background-color: #128c7e; }

@media (max-width: 767px) {
  .wa-button { right: 14px; bottom: 14px; }
}