/* Responsive overrides for the vazas template. Desktop (>1024px) is untouched. */

.nav-toggle {display:none;}
#optional .phone .tel-link {color:inherit; text-decoration:none;}
/* Content box no longer overlaps the menu; small gap below it (all screen sizes) */
#Middle .wrap {top:0; margin-top:10px;}
#Middle {margin-bottom:0;}
.contact-sent {background:#e4f5e6; border:1px solid #9ad3a1; color:#256b2e; padding:12px 15px; margin:0 10px 15px; border-radius:4px; font-size:14px;}

/* ---------- Tablet & below ---------- */
@media screen and (max-width: 1024px) {
  html, body {overflow-x:hidden;}
  img {max-width:100%; height:auto;}

  .wrap,
  #Middle .wrap,
  #Footer_container .wrap {width:auto !important; max-width:992px; box-sizing:border-box;}
  #Middle .wrap {padding:10px; border-radius:0;}
  #Footer_container .wrap {padding:20px 10px;}

  /* Compact header: logo left + phone button right, then link buttons, motto, hours */
  #Header {background-color:#208ed2; background-repeat:repeat-x;}
  #Header .wrap {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; min-height:0; padding:10px 12px 12px; text-align:left;}
  #Header .wrap > .clr, #optional > .clr {display:none;}
  #optional {display:contents;}
  #optional .mods {margin:0;}
  #Header .logo {order:1; position:static; margin:0; flex:0 0 auto;}
  #Header .logo img {height:56px; width:auto;}
  #optional .phone {order:2; margin:0; flex:0 0 auto;}
  #optional .phone p {display:block; margin:0; text-align:right;}
  #optional .phone .tel-link {display:inline-block; background:#fff; color:#207fb9; border-radius:8px; padding:6px 12px; box-shadow:0 1px 3px rgba(0,0,0,.25);}
  #optional .phone img {height:26px; width:26px; margin:0 6px 0 0; vertical-align:middle;}
  #optional .phone span.tel {font-size:20px; vertical-align:middle;}
  #optional .phone span.address {display:block; position:static; font-size:11px; margin-top:6px; text-align:right;}
  #optional .topmenu {order:3; flex:1 1 100%; margin:14px 0 0; position:static;}
  #optional .topmenu ul {display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin:0; padding:0;}
  #optional .topmenu li {display:flex; padding:0;}
  #optional .topmenu a {flex:1; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.45); border-radius:6px; padding:10px 6px; text-align:center; font-size:13px; line-height:1.25; color:#fff; background-image:none;}
  #optional .topmenu a:hover {background:#fff; color:#207fb9;}
  #optional .moto {order:4; flex:1 1 100%; margin:12px 0 0; padding:0 0 0 22px; font-size:15px; text-align:center;}
  #optional .moto p {margin:0;}
  #optional .moto p:before {font-size:200%; top:-8px; left:0;}
  #optional .working-days {order:5; flex:1 1 100%; position:static; margin:8px 0 0; font-size:11px; text-align:center; opacity:.9;}
  #optional .working-days div, #optional .working-days .mooquee-text {position:static !important; width:auto !important; height:auto !important; white-space:normal !important; display:block;}

  /* Main navigation container */
  #nav {height:auto; padding-bottom:0;}
  #nav .wrap {background:none; padding:0;}

  /* Slider: JS is disabled on small screens (see Slider.astro); stack the slides */
  #Middle .slider {height:auto; margin-bottom:0; padding:10px 0;}
  #Middle .djslider-loader,
  #Middle .djslider,
  #Middle .slider-container {position:static !important; width:100% !important; max-width:100% !important; height:auto !important; overflow:visible !important; opacity:1 !important;}
  #Middle .djslider-in {position:static !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important;}
  #Middle .djslider-in > li {float:none !important; position:static !important; display:block !important; width:auto !important; height:auto !important; margin:0 0 15px !important; overflow:hidden;}
  #Middle .mods_slider img.slider-img,
  #Middle .mods_slider .img-trailer {float:none; display:block; margin:0 auto;}
  #Middle .mods_slider img.slider-img {width:100% !important; max-width:539px; height:auto !important;}
  #Middle .mods_slider .slide-desc {width:auto !important; position:static !important; padding:0 10px;}
  #Middle .mods_slider .slide-title {margin:10px 0 !important;}
  #Middle .mods_slider .readmore {margin:10px auto 0;}
  #Middle .navigation-container-custom,
  #Middle .djslider-end {display:none !important;}

  /* Home boxes: 2 columns */
  #Middle .home_boxes {margin:10px 0; font-size:0;}
  #Middle .mods_home_boxes_pc, #Middle .mods_home_boxes_laptop, #Middle .mods_home_boxes_mac,
  #Middle .mods_home_boxes_iphone, #Middle .mods_home_boxes_screen, #Middle .mods_home_boxes_contact {
    width:calc(50% - 10px); box-sizing:border-box; margin:0 5px 10px !important; height:auto; min-height:0; padding-bottom:15px;}

  /* Home page content blocks */
  #Middle .itemFullText .moduletable {display:block; width:auto; height:auto; overflow:visible; margin:0 0 10px;}
  #Middle .home_content_title, #Middle .home_content_desc {width:auto; float:none; overflow:hidden;}
  #Middle .home_content_image {margin-right:10px;}
  #Middle .main_content_bottom {text-align:center;}
  #Middle .mods_main_bottom_team, #Middle .mods_main_bottom_contact {margin-left:10px;}

  /* Two-column pages: content first, sidebar after */
  #Middle.cols2 .wrap {display:flex; flex-direction:column;}
  #Middle.cols2 .main_content_right {order:1; width:auto; float:none;}
  #Middle.cols2 .leftpos {order:2; width:auto; float:none; margin-top:20px;}
  #Middle.cols2 .clr {order:3;}
  .leftpos .mods_leftservices {width:auto;}
  .leftpos .mods_alternative {text-align:center;}
  .leftpos .mods_aggeli li {float:none; display:inline-block;}

  /* Article content */
  #Middle .middle_content_header {font-size:24px; line-height:1.2;}
  #Middle .itemFullText img[style*="float"] {max-width:40%;}
  #Middle .itemFullText table {width:100% !important; max-width:100%;}
  .steps-main .steps-desc1, .steps-main .steps-desc2, .steps-main .steps-desc3, .steps-main .steps-desc4, .steps-main .steps-desc5,
  .steps-main .steps-desc1-footer, .steps-main .steps-desc2-footer, .steps-main .steps-desc3-footer, .steps-main .steps-desc4-footer, .steps-main .steps-desc5-footer {
    width:auto; float:none; box-sizing:border-box;}
  .steps-main h2 {font-size:36px !important;}

  /* Our team grid: 2 per row */
  #Middle .itemContainer {width:50% !important; box-sizing:border-box;}
  #Middle .catItemImage img {width:100% !important; max-width:200px;}

  /* Contact page */
  #Middle .contact .dl-horizontal dt, #Middle .contact .dl-horizontal dd {float:none; width:auto; margin:0; text-align:left;}
  #Middle .contact input[type=text], #Middle .contact input[type=email], #Middle .contact textarea {width:100%; max-width:100%; box-sizing:border-box;}
  #Middle .contact .g-recaptcha {transform:scale(0.85); transform-origin:0 0;}

  /* Footer: 2 columns, static extras */
  #Footer_container .wrap {min-height:0; font-size:0;}
  #Footer_container .mods_footer_boxes_1, #Footer_container .mods_footer_boxes_2, #Footer_container .mods_footer_boxes_3,
  #Footer_container .mods_footer_boxes_4, #Footer_container .mods_footer_boxes_5 {
    display:inline-block; position:static; width:50%; box-sizing:border-box; height:auto; margin:0 0 15px; font-size:12px;}
  #Footer_container .mods_footer_boxes_3 li {width:100%; display:block;}
  #Footer_container .mods_socialmedia {position:static; text-align:center; font-size:12px;}
}

/* ---------- Tablet only: all menu tabs visible in one row (like desktop) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  #nav ul {display:flex;}
  #nav li {float:none; flex:1 1 0; min-width:0; height:70px;}
  #nav li a {width:auto; height:70px; padding:0 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.15; font-size:12px;
    background:url(../images/bck-menu.png) 100% -140px no-repeat;}
  #nav li:last-child a {background:none;}
  #nav li a img {display:block; margin:0 0 4px;}
  #nav li a .image-title {display:block; text-align:center;}
  #nav li.current a, #nav li.active a {color:#fff;}
}

/* ---------- Phones ---------- */
@media screen and (max-width: 767px) {
  body {font-size:13px;}
  #Middle {font-size:14px; line-height:1.5;}

  #optional .topmenu ul {grid-template-columns:1fr 1fr;}

  /* Hamburger menu with a flat dark background instead of the striped sprite */
  #nav {background:#1c1c1c;}
  .nav-toggle {display:block; width:100%; border:0; border-bottom:1px solid #333; border-radius:0; margin:0; padding:0 15px; height:50px; line-height:50px; text-align:left;
    background:#111; color:#fff; font:bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif; cursor:pointer; text-shadow:none;}
  .nav-toggle:before {content:"\2630"; display:inline-block; margin-right:10px; font-size:20px;}
  #nav ul {display:none; background:#1c1c1c;}
  #nav.open ul {display:block;}
  #nav li {float:none; height:auto; border-bottom:1px solid #333; background:none !important;}
  #nav li a {width:auto; background:none; line-height:48px; text-align:left; padding:0 15px; color:#ddd; text-shadow:none;}
  #nav li a img {margin-right:12px;}
  #nav li a .image-title {display:inline-block; vertical-align:middle; line-height:1.2;}
  #nav li.item-101 a img, #nav li.item-118 a img, #nav li.item-119 a img, #nav li.item-120 a img, #nav li.item-121 a img, #nav li.item-122 a img {width:56px;}
  #nav li:hover {background:none !important;}
  #nav li a:hover, #nav li.active a, #nav li.current a {color:#fff; background:#2b2b2b;}
  #nav li.current a {box-shadow:inset 4px 0 0 #44ace0;}

  #Middle .mods_home_boxes_pc, #Middle .mods_home_boxes_laptop, #Middle .mods_home_boxes_mac,
  #Middle .mods_home_boxes_iphone, #Middle .mods_home_boxes_screen, #Middle .mods_home_boxes_contact {
    display:block; width:auto; margin:0 0 10px !important;}

  #Middle .home_content_image {float:none; text-align:center; margin:0 0 5px;}
  #Middle .mods_main_bottom_cv, #Middle .mods_main_bottom_team, #Middle .mods_main_bottom_contact {display:block; margin:20px 0 0;}
  #Middle .mods_main_bottom_cv ul {right:auto; left:50%; margin-left:-120px;}

  #Middle .itemFullText img[style*="float"] {float:none !important; display:block; margin:0 auto 10px; max-width:100%;}
  #Middle .itemFullText table, #Middle .itemFullText tbody, #Middle .itemFullText tr, #Middle .itemFullText td, #Middle .itemFullText th {display:block; width:auto !important; text-align:left !important;}
  #Middle .itemContainer {width:100% !important;}
  #Middle .middle_content_header {font-size:22px;}

  #Footer_container .mods_footer_boxes_1, #Footer_container .mods_footer_boxes_2, #Footer_container .mods_footer_boxes_3,
  #Footer_container .mods_footer_boxes_4, #Footer_container .mods_footer_boxes_5 {display:block; width:auto;}
}