/* ==========================================================================
   NURSOY — responsive layer (phone / iPad / desktop)
   Fixes the broken mobile drawer, iOS parallax, tap targets and overflow.
   Loaded after main.css and i18n.css.
   ========================================================================== */

/* ---------- base safeguards ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
}

img,
video,
iframe,
table {
  max-width: 100%;
}

a,
button,
.nav-link,
.list-group-item,
.mobile-nav-toggle,
.lang-switch__btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Long words and Latin names must never push the layout sideways */
main p,
main li,
main td,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  overflow-wrap: anywhere;
}

/* ---------- iOS / Android: fixed parallax backgrounds break page titles ----------
   background-attachment:fixed is ignored or jitters on touch browsers.        */
@media (hover: none),
(max-width: 1024px) {
  [style*="background-attachment"],
  .page-title {
    background-attachment: scroll !important;
  }
}

/* ---------- header & language switcher ----------
   From 768px up the header keeps the size the site was built with; only
   tablets in portrait and phones give a little room to the switcher. */
@media (max-width: 767.98px) {
  header#header {
    padding: 8px 0 !important;
  }

  header#header .logo img {
    max-height: 40px !important;
  }

  header#header .sitename {
    font-size: 12.5px !important;
    letter-spacing: .5px !important;
    white-space: normal !important;
    line-height: 1.15;
  }
}

@media (max-width: 575.98px) {
  header#header .logo img {
    max-height: 34px !important;
    margin-inline-end: 8px !important;
  }

  header#header .sitename {
    font-size: 11px !important;
  }
}

/* ---------- the mobile / tablet drawer (was completely hidden) ----------
   The page-level rule `.navmenu { display:none }` killed the whole menu,
   including the hamburger drawer, on every phone and iPad.                */
@media (max-width: 1199.98px) {

  header#header .navmenu {
    display: block !important;
  }

  #navmenu {
    padding: 0;
    z-index: 9997;
  }

  /* Bootstrap's `.d-flex !important` on the <ul> must not beat the drawer */
  #navmenu > ul {
    display: none !important;
    position: fixed;
    inset: 62px 14px calc(14px + env(safe-area-inset-bottom)) 14px;
    flex-direction: column !important;
    align-items: stretch !important;
    margin: 0;
    padding: 8px 0 !important;
    list-style: none;
    background: #111c2c;
    background: color-mix(in srgb, var(--nav-mobile-background-color, #1b2634), transparent 2%);
    border: 1px solid var(--nursoy-line, rgba(209, 173, 126, .28));
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 9998;
  }

  body.mobile-nav-active #navmenu > ul {
    display: block !important;
  }

  #navmenu > ul > li {
    padding: 0 !important;
    white-space: normal !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }

  #navmenu a,
  #navmenu a:focus {
    padding: 13px 20px !important;
    min-height: 48px;
    font-size: 14px !important;
    letter-spacing: .6px;
    white-space: normal !important;
    justify-content: space-between;
  }

  #navmenu > ul > li > a:hover,
  #navmenu > ul > li > a.active {
    color: var(--nursoy-gold, #d1ad7e) !important;
    background: rgba(209, 173, 126, .07);
  }

  /* accordion sub-menus, opened by tap instead of hover */
  header#header .navmenu .dropdown-custom > ul {
    position: static !important;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    min-width: 0 !important;
    margin: 0 12px 10px !important;
    padding: 4px 0 !important;
    background: rgba(3, 14, 46, .55) !important;
    border: 1px solid rgba(209, 173, 126, .18) !important;
    border-top: 1px solid rgba(209, 173, 126, .18) !important;
    border-radius: 12px;
    box-shadow: none !important;
  }

  header#header .navmenu .dropdown-custom.active > ul,
  header#header .navmenu .dropdown-custom > ul.dropdown-active {
    display: block !important;
  }

  header#header .navmenu .dropdown-custom > ul > li > a {
    color: rgba(255, 255, 255, .8) !important;
    padding: 11px 18px !important;
    font-size: 13px !important;
    border-radius: 10px;
  }

  header#header .navmenu .dropdown-custom > ul > li > a:hover {
    background: rgba(209, 173, 126, .12) !important;
    color: #fff !important;
    padding-inline-start: 24px !important;
  }

  header#header .navmenu .dropdown-custom > a i {
    transition: transform .25s ease;
  }

  header#header .navmenu .dropdown-custom.active > a i {
    transform: rotate(180deg);
  }

  /* dark, on-brand panel behind the open drawer */
  body.mobile-nav-active .navmenu {
    background: rgba(3, 8, 20, .78) !important;
    backdrop-filter: blur(3px);
  }

  body.mobile-nav-active .mobile-nav-toggle {
    top: 12px;
    z-index: 10002;
  }
}

/* ---------- desktop dropdown panel: match the navy/gold identity ---------- */
@media (min-width: 1200px) {
  header#header .navmenu .dropdown-custom > ul {
    background: rgba(8, 18, 40, .97) !important;
    border: 1px solid rgba(209, 173, 126, .28);
    border-top: 3px solid var(--nursoy-gold, #d1ad7e);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .5);
    min-width: 230px;
    padding: 8px !important;
  }

  header#header .navmenu .dropdown-custom > ul > li > a {
    color: rgba(255, 255, 255, .85) !important;
    padding: 10px 14px !important;
    border-radius: 8px;
  }

  header#header .navmenu .dropdown-custom > ul > li > a:hover {
    background: rgba(209, 173, 126, .16) !important;
    color: var(--nursoy-gold, #d1ad7e) !important;
    padding-left: 18px;
  }

  html[dir="rtl"] header#header .navmenu .dropdown-custom > ul > li > a:hover {
    padding-left: 14px;
    padding-right: 18px;
  }

  /* keyboard and touch users can open menus without hovering */
  header#header .navmenu .dropdown-custom.is-open > ul,
  header#header .navmenu .dropdown-custom:focus-within > ul {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ---------- home hero ----------
   The hero keeps the proportions the site was built with (each half 50vh inside
   an 85vh band). Only the headline block, which did not exist in the original
   markup, is sized down so it still fits inside that half on a phone. */
@media (max-width: 991.98px) {
  .hero-split .est-tag {
    margin-bottom: 8px;
  }

  .hero-split .hero-title {
    font-size: clamp(21px, 5.4vw, 30px) !important;
  }

  .hero-split .divider-line {
    width: 56px;
    height: 3px;
    margin: 14px auto;
  }

  .hero-split .hero-desc {
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 0;
  }
}

/* ---------- inner page titles ---------- */
@media (max-width: 767.98px) {
  .page-title {
    height: 30vh !important;
    min-height: 190px;
  }

  .page-title h1 {
    font-size: clamp(19px, 5.6vw, 26px) !important;
    letter-spacing: 2px !important;
  }

  .page-title p {
    font-size: 11.5px !important;
    letter-spacing: 1px !important;
    padding: 0 12px;
  }

  .section {
    padding: 46px 0 !important;
  }
}

/* iPad landscape keeps a calmer scale than desktop */
@media (min-width: 768px) and (max-width: 1024px) {
  .page-title {
    height: 34vh !important;
  }

  .page-title h1 {
    font-size: 30px !important;
  }

  .container {
    max-width: 100%;
    padding-inline: 22px;
  }
}

/* ---------- content blocks ---------- */
@media (max-width: 767.98px) {
  [style*="height: 35vh"],
  [style*="height:35vh"] {
    height: 30vh !important;
    min-height: 190px;
  }

  .custom-card,
  .project-info-box {
    border-radius: 16px !important;
  }

  .project-info-box.p-4 {
    padding: 16px !important;
  }

  /* tab strips scroll instead of wrapping into a wall */
  .nav-pills,
  .machinery-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 6px;
  }

  .nav-pills .nav-link {
    white-space: nowrap;
    min-height: 44px;
    font-size: 11px !important;
    padding: 8px 12px !important;
  }

  .machinery-nav .list-group-item {
    min-height: 48px;
    font-size: 13px;
  }

  .zoom-img {
    aspect-ratio: 16 / 10;
  }

  #fh5co-footer {
    border-radius: 46% 46% 0 0 / 46px 46px 0 0;
    padding: 56px 0 18px;
  }

  .footer-info-item {
    font-size: 12.5px;
  }

  .gallery .glightbox-container,
  .swiper-button-next,
  .swiper-button-prev {
    --swiper-navigation-size: 22px;
  }
}

/* tables and maps */
@media (max-width: 991.98px) {
  .table {
    font-size: 12.5px;
  }

  iframe {
    min-height: 260px;
  }
}

/* ---------- hover-only effects must not strand touch users ---------- */
@media (hover: none) {
  .border-gold:hover,
  .custom-card:hover,
  .swiper-slide:hover .zoom-img,
  .zoom-effect:hover {
    transform: none !important;
  }

  .expertise-card .overlay,
  [class*="overlay"] {
    opacity: 1 !important;
  }
}

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------
   Desktop header: brand, menu and language switcher share one row.
   main.css pads every item twice - 14px on the <li> plus 15px on the
   <a> - so the row needs ~1470px and, inside the 1140px/1320px
   container, the menu used to spill over the company name. The air
   between the labels is what gives way here; the site's own link
   typography stays untouched.
   From 1200px to 1399px Bootstrap pins the row to 1140px no matter how
   wide the screen is, so that band gets the tightest fit: label text to
   label text is 14px (the template asks for 58px, which measured 31px
   wider than the row can ever be). 1400px and up restores the air.
   ------------------------------------------------------------ */
@media (min-width: 1200px) {
  header#header .container-fluid {
    gap: 6px;
  }

  header#header .logo {
    flex: 0 0 auto;
  }

  header#header .logo img {
    max-height: 38px !important;
    margin-inline-end: 7px !important;
  }

  header#header .sitename {
    font-size: 13px !important;
    letter-spacing: .4px !important;
  }

  header#header .lang-switch {
    flex: 0 0 auto;
  }

  header#header .navmenu {
    flex: 1 1 auto;
    min-width: 0;
  }

  header#header .navmenu > ul {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  /* vertical padding and the 13px type are the template's own - only the air
     between the labels is trimmed, so the header keeps its look and height */
  header#header .navmenu > ul > li {
    flex: 0 0 auto;
    padding: 15px 0 !important;
  }

  header#header .navmenu > ul > li > a {
    padding: 10px 7px !important;
    white-space: nowrap;
  }
}

@media (min-width: 1400px) {
  header#header .container-fluid {
    gap: 10px;
  }

  header#header .logo img {
    max-height: 46px !important;
    margin-inline-end: 10px !important;
  }

  header#header .sitename {
    font-size: 15px !important;
    letter-spacing: .8px !important;
  }

  header#header .navmenu > ul > li {
    padding: 15px 4px !important;
  }

  header#header .navmenu > ul > li > a {
    padding: 10px 9px !important;
  }
}

@media (min-width: 1680px) {
  /* Bootstrap keeps the row at 1320px however big the screen gets, so on a 1920px
     display the growing brand used to eat the menu last pixel of air. The header
     alone is allowed to breathe to 1400px - still centred, 40px wider than the
     text blocks below it. */
  header#header .container-fluid.container-xl {
    max-width: 1400px;
  }

  header#header .logo img {
    max-height: 50px !important;
    margin-inline-end: 12px !important;
  }

  header#header .sitename {
    font-size: 16px !important;
    letter-spacing: 1px !important;
  }
}

/* Phones and iPads: the same template leftover (main.css max-width:1200px) puts the
   logo *after* the switcher and the hamburger, stranding the brand on the right.
   Conventional order restored — logo anchors the start, switcher + hamburger the end. */
@media (max-width: 1199.98px) {
  header#header .logo {
    order: 0;
    flex: 0 1 auto;
    margin-inline-end: auto !important;
  }

  header#header .lang-switch {
    order: 1;
  }

  header#header .mobile-nav-toggle {
    order: 2;
    margin: 0;
    margin-inline-start: 10px;
  }

  header#header .navmenu {
    order: 3;
  }
}

/* The drawer's close button is pinned with a physical `right` in main.css. */
html[dir="rtl"] body.mobile-nav-active .mobile-nav-toggle {
  right: auto;
  left: 15px;
}

/* main.css re-orders the header children at max-width:1200px (template left-over),
   which makes the language switcher jump to the far side at exactly 1200px. */
@media (min-width: 1200px) {
  header#header .logo {
    order: 0;
  }

  header#header .navmenu {
    order: 1;
  }

  header#header .lang-switch {
    order: 2;
  }
}

/* Hover panels are wider than their trigger; main.js shifts them back inside
   the viewport when they would run past either edge (works in LTR and RTL). */