/* =============================
   styles.css — unified, ready to use
   One blue header bar: logo | menu | language
   Mobile: smart-sticky (hide on scroll down, show on scroll up)
   ============================= */

/* -------- Reset & Base -------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #fff;
}
h1, h2, h3 { margin-bottom: 1rem; font-weight: 600; }
section { padding: 20px 20px; max-width: 1200px; margin: 0 auto; }



/* -------- Layout + Theme variables (single source of truth) -------- */
:root {
  /* layout */
  --header-h: 64px;

  /* brand */
  --brand-blue: #2aa5df;

  /* logo (set to your real asset size) */
  --logo-w: 144px;
  --logo-h: 40px;

  /* feature/checklist icon */
  --feat-size: 56px;
  --feat-thick: 4px;
  --feat-color: var(--brand-blue);
}
@media (max-width: 900px) { :root { --header-h: 72px; } }



html { scroll-padding-top: var(--header-h); }  /* anchor-safe offset */
body { padding-top: var(--header-h); }         /* reserve space for fixed header */

@media (max-width: 900px) {
  :root { --header-h: 72px; }        /* mobile header slightly taller */
}

/* -------- Buttons -------- */
button {
  background: #2aa5df; color: #fff; padding: 10px 20px;
  border: 0; border-radius: 3px; cursor: pointer; transition: background .3s ease;
}
button:hover { background: #1d7bab; }
button:focus-visible { outline: 3px solid #9ad7f3; outline-offset: 2px; }

/* ================= Header (fixed; smart-sticky on mobile) ================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #2aa5df;
  color: #fff;
  transform: translateY(0);
  transition: transform 200ms ease;
  will-change: transform;
  min-height: var(--header-h);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
/* Hide header only on MOBILE when scrolling down; JS toggles .is-hidden */
@media (max-width: 900px) {
  .site-header.is-hidden { transform: translateY(-100%); }
}

/* Optional small top info bar */
.site-header .top-bar {
  background: #1d7bab; color: #fff; font-size: .9rem;
  padding: 5px 20px; display: flex; justify-content: space-between; align-items: center;
}

/* Main nav row: Logo | Inline Menu | Actions (language + hamburger) */
/* NEW */
.site-header nav {
  display: flex;
  align-items: center;              /* vertical center */
  justify-content: space-between;   /* left group vs language */
  gap: 20px;
  padding: 10px 20px;
  background: #2aa5df;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}



/* group: logo + menu */
.nav-left { display: flex; align-items: center; gap: 24px; }

/* Logo (unified) */
.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  width: var(--logo-w);
  height: var(--logo-h);
  flex: 0 0 var(--logo-w);
}


.logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;           /* строго сохраняем пропорции logo.webp */
}

/* Mobile: логотип ниже по высоте (28px), ширина пересчитывается пропорционально */
@media (max-width: 900px) {
  .logo {
    height: 28px;
    width: calc(28px * var(--logo-w) / var(--logo-h));
    flex-basis: calc(28px * var(--logo-w) / var(--logo-h));
  }
}

.logo .brand { font-size: 1.05rem; line-height: 1; white-space: nowrap; }

/* Desktop menu (new selector tied to class .menu) */
#main-nav .menu {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}
#main-nav .menu a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
#main-nav .menu a:hover,
#main-nav .menu a:focus-visible {
  text-decoration: underline;
}

/* Desktop: vertical centering of items */
@media (min-width: 901px) {
  .site-header nav { min-height: 64px; } /* стабильная высота бара */
  #main-nav .menu { align-items: center; }
  #main-nav .menu li { display: flex; }
  #main-nav .menu a { display: inline-flex; align-items: center; height: 36px; }
}

/* Mobile nav panel (same UX, new selector) */
@media (max-width: 900px) {
  .menu-toggle { display: inline-block; }

  #main-nav .menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #2aa5df; padding: 12px 16px 16px;
    flex-direction: column; gap: 12px;
    border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    z-index: 1000;
  }
  #main-nav.open .menu { display: flex; }

  /* порядок действий справа остаётся */
  .nav-actions { order: 3; display: flex; align-items: center; gap: 8px; }
  .nav-actions .lang-dd { order: 1; }
  .nav-actions .menu-toggle { order: 2; }

  /* Размеры логотипа на мобайле */
  .logo img { height: 28px; }
  .logo .brand { font-size: 1rem; }
}


/* Actions (language + hamburger) aligned to the right */
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Language button (trigger) */
.lang-btn {
  background: transparent; color: #fff; border: 1px solid #fff; border-radius: 6px;
  padding: 6px 10px; font-weight: 600; cursor: pointer;
}
.lang-btn:hover { background: #fff; color: #2aa5df; }
.lang-btn:focus-visible { outline: 3px solid #9ad7f3; outline-offset: 2px; }

/* Language dropdown panel */
.lang-dd { position: relative; }
.lang-list {
  list-style: none; margin: 6px 0 0; padding: 6px 0;
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 160px; max-width: 240px;
  background: #fff; color: #333; border: 1px solid #e5e5e5;
  border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,.12);
  display: none;
  z-index: 1001; /* above mobile menu panel */
}
.lang-dd.open .lang-list { display: block; }
.lang-list li { margin: 0; }
.lang-list button {
  width: 100%; padding: 10px 12px; background: transparent; border: 0;
  text-align: left; cursor: pointer; color: #333; font-weight: 500; line-height: 1.4;
}
.lang-list button:hover { background:#f2f7fb; }
.lang-list button:focus-visible { outline: 2px solid #9ad7f3; outline-offset: 2px; }

/* Hamburger (hidden on desktop) */
/* Hamburger (hidden on desktop, visible on mobile) */
.menu-toggle {
  display: none;
  position: relative;
  background: transparent;
  border: 0;
  padding: 12px;
  cursor: pointer;
}
@media (max-width: 900px) {
  .menu-toggle { display: inline-block; }
}

.menu-toggle span[aria-hidden="true"] {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px 0;
  background: #fff;
  border-radius: 1px;
  transition: transform .25s ease, opacity .2s ease;
}
/* X state */
.menu-toggle.is-open span[aria-hidden="true"]:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span[aria-hidden="true"]:nth-child(2){ opacity: 0; }
.menu-toggle.is-open span[aria-hidden="true"]:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }


/* ================= Sections ================= */
.hero {
  position: relative;                 /* allow overlay */
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 120px 20px;
  background: url('../img/hero-desktop.webp') center/cover no-repeat;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

@media (max-width: 900px) {
  .hero {
    background: url('../img/hero-mobile.webp') center/cover no-repeat;
  }
}

/* overlay */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);  /* dark overlay */
  z-index: 0;
}

.hero h1,
.hero p,
.hero a,
.hero button {
  position: relative;
  z-index: 1;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  font-size: 1.2rem; /* increase text size */
}


.hero h1 { font-size: 2.5rem; }
.hero p { margin: 20px 0; font-size: 1.2rem; }



#services { text-align: center; }
#services h2 { grid-column: 1 / -1; margin-bottom: 30px; }
#services .services-grid {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px;
}
#services .service {
  flex: 1 1 30%; max-width: 32%;
  padding: 20px; border: 1px solid #ddd; border-radius: 6px;
  transition: box-shadow .3s ease;
}
#services .service:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
@media (max-width: 900px) {
  #services .service { flex: 1 1 100%; max-width: 100%; }
}

#stats { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; text-align:center; background:#2aa5df; color:#fff; padding:40px 20px; }
#stats div { flex:1 1 200px; }
#stats span { display:block; font-size:2rem; font-weight:700; }

#team { text-align:center; }
#team .member { display:inline-block; margin:10px; padding:20px; border:1px solid #ddd; border-radius:6px; }

#pricing { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; text-align:center; }
#pricing .plan { flex:1 1 250px; border:1px solid #ddd; border-radius:6px; padding:20px; transition: box-shadow .3s ease; }
#pricing .plan:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }

#testimonials { background:#f8f8f8; text-align:center; }
#testimonials blockquote { font-style: italic; margin: 20px auto; max-width: 600px; }

#blog { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap:20px; }
#blog article { border:1px solid #ddd; border-radius:6px; padding:20px; }

#contact form { max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:15px; }
#contact label { font-weight:700; }
#contact input, #contact textarea { padding:10px; border:1px solid #ccc; border-radius:4px; }

footer { background:#1d7bab; color:#fff; text-align:center; padding:20px; }

/* ---------- Services page (cards version) ---------- */
.services { padding: 60px 20px; }
.services h2 { text-align: center; margin-bottom: 24px; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.service-card {
  border: 1px solid #e5e7eb; border-radius: 12px; padding: 18px; background: #fff;
}
.service-card h3 { margin-bottom: 8px; font-size: 1.25rem; }
.service-card p { margin-bottom: 12px; color: #4b5563; }

.btn {
  display: inline-block; padding: 10px 16px; border-radius: 10px;
  background: #2aa5df; color: #fff; text-decoration: none; font-weight: 600;
}
.btn:hover { background:#1d7bab; }
.btn:focus-visible { outline: 3px solid #9ad7f3; outline-offset: 2px; }
.btn.btn-secondary { background:#333; }
.btn.btn-secondary:hover { background:#111; }

@media (max-width: 960px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }

/* ---------- Services details (two-column -> single) ---------- */
.services-hero {
  position: relative;          /* allow overlay positioning */
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: center;
  padding: 100px 20px;
  background: url('../img/services.webp') center/cover no-repeat;
  color: #fff;
  overflow: hidden;
}


.services-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);  /* semi-transparent black overlay */
  z-index: 0;
}

.services-hero h1,
.services-hero .services-sub {
  position: relative;           /* keep text above overlay */
  z-index: 1;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6); /* strong readability */
}

.services-hero h1 { margin-bottom: 8px; }
.services-hero .services-sub { color:#555; }

.services-details { max-width: 1200px; margin: 0 auto; padding: 40px 20px; display: grid; gap: 24px; }
.service-article { border: 1px solid #ddd; border-radius: 10px; padding: 20px; background: #fff; }
.service-article h2 { margin-bottom: 6px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card { border: 1px solid #eef2f7; border-radius: 8px; padding: 14px; background: #fafcff; }
.cta-row { display:flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }


/* Contact form: mobile-first single-column, perfect alignment */
.section.contact .contact-form {
  display: grid;
  gap: 14px;
  max-width: 640px;
  margin: 0 auto;
}

.section.contact .contact-form label,
.section.contact .contact-form .form-group {
  display: block;
  width: 100%;
}

.section.contact .contact-form input,
.section.contact .contact-form textarea,
.section.contact .contact-form select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
}

.section.contact .contact-form textarea {
  min-height: 160px;
}

.section.contact .contact-form .btn {
  width: 100%;
}

/* Optional: on wider screens, switch to two columns if you want */
@media (min-width: 900px) {
  .section.contact .contact-form {
    grid-template-columns: 1fr 1fr;
  }
  .section.contact .contact-form .form-group:nth-last-child(n+3),
  .section.contact .contact-form label:nth-last-child(n+3) {
    grid-column: span 1; /* Name, Email, Phone, Service side-by-side on desktop */
  }
  .section.contact .contact-form .form-full,
  .section.contact .contact-form textarea,
  .section.contact .contact-form .btn,
  .section.contact .contact-form .back-to-top {
    grid-column: 1 / -1; /* Message + button full width */
  }
}
/* small icons on contact info*/
.header-contact { display: inline-flex; align-items: center; gap: 12px; }
.contact-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; text-decoration: none; }
.contact-icon svg { width: 20px; height: 20px; fill: currentColor; }
.contact-icon:focus-visible { outline: 2px solid #0a66c2; outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Add to assets/css/styles.css (end of file) */
.contact-head {
  text-align: center;         /* centers only the wrapped elements */
}
.contact-head .section-title {
  margin-block-end: 0.25rem;  /* optional: tighten spacing */
}

/* Allow vertical resize, block horizontal resize */
textarea {
  resize: vertical;
  width: 100%;  /* keeps it responsive and prevents horizontal overflow */
  box-sizing: border-box;
}


#about p.justified {
  text-align: justify;
  text-justify: inter-word; /* helps distribute spacing more evenly */
}

h2[data-i18n="why.title.japan"] {
  text-align: center;
}

h2[data-i18n="why.title"] {
  text-align: center;
}

/* === Features (Why Us) === */
.features { background: #fff; }
.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 36px;
  max-width: 1100px;
  margin: 0 auto;
}

.feature {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: flex-start;
  gap: 14px;
}

/* keep About within the global section container (max-width:1200; margin:auto) */
#about {
  background: #f8f8f8;
  padding: 60px 20px; /* match global section padding */
}

/* 2) About paragraph — use full section width and justify text */
#about p {
  max-width: 1200px;   /* align with section container */
  margin: 0 auto;
  padding: 0;
}
#about p.justified {
  text-align: justify;
  text-justify: inter-word;
}

/* 3) About heading — centered as requested */
#about h2 {
  text-align: center;
}

/* align “Why Us” list to the same left/right as Services/About (1200px container, no extra side padding) */


/* Mobile: collapse to one column */

/* Single-element icon: outlined light-blue circle + centered tick */
/* === Features (Why Us) — align container with other sections === */
.features-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 36px;
  max-width: 1200px;   /* was 1100px -> caused misalignment */
  margin: 0 auto;
}

/* === Checklist (Why choose Japan) — single, clean source of truth === */
.checklist{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* desktop: two columns */
  gap: 16px 36px;                   /* row/column gaps */
  list-style: none;
  margin: 0 auto;
  max-width: 1200px;
  padding: 0;                        /* no extra side padding on desktop */
}

/* each item = [icon | text] */
.checklist li{
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  column-gap: 12px;
}

/* icon bullet */
.checklist li::before{
  content: "";
  width: 24px; height: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232aa5df' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9.7'/><path d='M8 12.5 L10.7 15.2 L16 9.9'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* text cell */
.checklist .text{
  grid-column: 2;
  color: #1f2937;
  line-height: 1.6;
  font-size: 1rem;
  text-align: justify;
  text-justify: inter-word;
}

/* Mobile: stack neatly in one column (use a wider breakpoint) */
@media (max-width: 900px){
  .checklist{
    grid-template-columns: 1fr; /* single column */
    gap: 14px;
    padding: 0 20px;            /* breathing room at edges */
  }
  .checklist li{
    grid-template-columns: 26px 1fr;
    column-gap: 10px;
  }
  .checklist li::before{ width: 22px; height: 22px; }
}



/* About Us key facts: stack labels/values on small screens */
/* === Company Profile (About Us) === */
.key-facts {
  display: grid;
  grid-template-columns: minmax(160px,220px) 1fr; /* desktop: two columns */
  gap: 12px 20px;
  margin: 16px 0 32px;
}

@media (max-width: 600px) {
  .key-facts {
    grid-template-columns: 1fr; /* mobile: single column */
  }
  .key-facts dt {
    font-weight: 700;
    margin-top: 12px;
  }
  .key-facts dd {
    margin-left: 0;
  }
}

.card ul {
  margin-left: 20px; /* adjust between 10–20px as desired */
  padding-left: 10px; /* keeps bullets cleanly visible */
}

/* === Footer Social Links === */
              .site-footer {
                position: relative;
                background: #1d7bab;
                color: #fff;
                text-align: center;
                padding: 20px;
              }

              /* === Footer alignment fix === */
              .site-footer p.footer-left {
                text-align: left;
                margin-left: 20px;
              }


              .site-footer .social-links a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 30px;
                height: 30px;
                text-decoration: none;
              }

              .site-footer .social-links .icon {
                width: 26px;
                height: 26px;
                transition: transform 0.3s ease, filter 0.3s ease;
              }
/* footer text — smaller, tidy, and consistent */
.site-footer p.footer-left {
  margin: 0;               /* keep tight */
  text-align: left;
  font-size: 0.875rem;     /* ~14px on most browsers */
  line-height: 1.4;
  opacity: 0.9;            /* subtle de-emphasis vs icons */
}

/* optional: slightly smaller on very small screens */
@media (max-width: 480px) {
  .site-footer p.footer-left {
    font-size: 0.8125rem;  /* ~13px */
  }
}



              /* Hover effect */
              .site-footer .social-links a:hover .icon,
              .site-footer .social-links a:focus-visible .icon {
                transform: scale(1.1);
                filter: brightness(1.25);
              }
                  /* === Footer: responsive left text + right icons === */
                  .site-footer {
                    position: relative;
                    background: #1d7bab;
                    color: #fff;
                    padding: 16px 20px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between; /* left text | right icons */
                    gap: 12px;
                    flex-wrap: wrap; /* allow wrap on narrow screens */
                  }



                  .site-footer .social-links a {
                    width: 30px;       /* tighten clickable boxes */
                    height: 30px;
                    line-height: 0;
                    margin-left: -2px; /* tiny optical overlap for seamless look */
                  }

                  .site-footer .social-links a:first-child {
                    margin-left: 0;    /* keep first icon aligned */
                  }


                  .site-footer .social-links .icon {
                    width: 26px;
                    height: 26px;
                    display: block;
                    transition: transform .25s ease, filter .25s ease;
                  }

                  /* hover/focus feedback */
                  .site-footer .social-links a:hover .icon,
                  .site-footer .social-links a:focus-visible .icon {
                    transform: scale(1.1);
                    filter: brightness(1.2);
                  }

                  /* keyboard focus ring on the anchor */
                  .site-footer .social-links a:focus-visible {
                    outline: 2px solid #9ad7f3;
                    outline-offset: 2px;
                  }

                  /* small screens: keep row layout; let items wrap if needed */
                  @media (max-width: 480px) {
                    .site-footer {
                      padding: 14px 16px;
                    }
                    .site-footer .social-links {
                      gap: 14px;
                    }
                  }

/* === Facebook icon override === */
.site-footer .social-links a[aria-label="Facebook"] .icon path {
  fill: #ffffff !important; /* pure white */
}


/* === Language-specific visibility === */
/* Hide <ABOUT US>  info in Russian English version */
:lang(ru) [data-i18n="about.companyProfile.keyFacts.capital.label"],
:lang(ru) [data-i18n="about.companyProfile.keyFacts.capital.value"],
:lang(en) [data-i18n="about.companyProfile.keyFacts.capital.label"],
:lang(en) [data-i18n="about.companyProfile.keyFacts.capital.value"],
:lang(ru) [data-i18n="about.companyProfile.keyFacts.corporateNumber.label"],
:lang(en) [data-i18n="about.companyProfile.keyFacts.corporateNumber.label"],
:lang(ru) [data-i18n="about.companyProfile.keyFacts.corporateNumber.value"],
:lang(en) [data-i18n="about.companyProfile.keyFacts.corporateNumber.value"]
{
  display: none !important;
}