/* MOBILE (<=991px): hamburger left, logo centered */ @media (max-width:991px){ body header .header.header-sticky-menu{ position:relative !important; } body header .header.header-sticky-menu > .toggle-menu{ position:absolute !important; left:14px !important; top:50% !important; transform:translateY(-50%) !important; margin:0 !important; z-index:6 !important; } body header .header.header-sticky-menu > .header-right{ position:absolute !important; right:14px !important; top:50% !important; transform:translateY(-50%) !important; } body header .header.header-sticky-menu > .header-left{ display:block !important; width:100% !important; float:none !important; text-align:center !important; } body header .header.header-sticky-menu .header-left a.logo.d-block.d-lg-none{ display:inline-block !important; float:none !important; width:auto !important; max-width:70% !important; margin:0 auto !important; text-align:center !important; } body header .header.header-sticky-menu .header-left a.logo.d-block.d-lg-none img{ display:inline-block !important; } } /* DESKTOP >=1280px: center the main menu on ONE row. width:max-content + white-space:nowrap stop the shrink-to-fit wrap that was clipping the menu above the header once the menu grew past ~720px. */ @media (min-width:1280px){ .header.header-sticky-menu{ position:relative !important; } .header.header-sticky-menu ul.menu.main-menu{ position:absolute !important; left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important; margin:0 !important; width:max-content !important; max-width:calc(100vw - 360px) !important; white-space:nowrap !important; } } /* SMALL DESKTOP / TABLET 992-1279px: the menu is too wide to center on one row (logo + menu + login would overlap). Keep it in-flow and let it wrap to a compact, centered 2-row block so it NEVER overlaps the logo or the login button. */ @media (min-width:992px) and (max-width:1279px){ .header.header-sticky-menu{ position:relative !important; } .header.header-sticky-menu .header-left{ flex:1 1 auto !important; min-width:0 !important; } .header.header-sticky-menu ul.menu.main-menu{ position:static !important; transform:none !important; left:auto !important; top:auto !important; margin:0 !important; width:auto !important; display:flex !important; flex-wrap:wrap !important; justify-content:center !important; align-content:center !important; row-gap:0 !important; column-gap:4px !important; white-space:nowrap !important; } .header.header-sticky-menu ul.menu.main-menu > li > a{ padding-top:4px !important; padding-bottom:4px !important; line-height:1.4 !important; } } /* ===== 2026-07-21: Tour card images site-wide ===== The theme forces tour-card images to height:100% (object-fit:fill → distorted, e.g. a 900x600 photo squished into a tall 284x376 / 340x440 box). On the Elementor homepage this also made cards overflow their section so the next heading («Προορισμοί», «Γιατί με εμάς;») overlapped the cards; on the search pages it distorted every result and cut the titles. Force the image to its natural aspect (cover) so every tour card sizes correctly and never overflows. Covers homepage widgets, /search-tour(-sidebar)/ + EN equivalents, and any tour archive using .item.service-border. */ .item.service-border .featured-image img, .service-list-wrapper .featured-image img, .st-list-service .featured-image img{ height:auto !important; object-fit:cover !important; } /* MOBILE (<=991px): keep the OneTourismo search form inside the screen */ @media (max-width:991px){ .onetourismo-forms .uk-container{ width:100% !important; max-width:100% !important; padding-left:10px !important; padding-right:10px !important; box-sizing:border-box; } .onetourismo-forms .uk-input, .onetourismo-forms .uk-select, .onetourismo-forms input, .onetourismo-forms select{ width:100% !important; max-width:100% !important; box-sizing:border-box; } .onetourismo-forms .uk-dropdown, .onetourismo-forms .uk-drop{ max-width:92vw !important; left:0 !important; box-sizing:border-box; } } /* ===== 2026-06-11 site-wide tweaks (approved exception to NO-TOUCH this session) ===== */ /* Tour cards: remove the empty round avatar (bottom-right of image) + equalise card heights */ .service-avatar { display:none !important; } .item.service-border h3.title, .content-item h3.title { min-height:52px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* Blog/article cards (only those have .excerpt-wrapper): fix the excerpt area to one height so all boxes match */ .excerpt-wrapper { height:270px !important; overflow:hidden !important; align-items:flex-start !important; } /* "Γιατί με εμάς" CTA boxes: reserve equal description height so all 4 boxes match */ .elementor-cta__description { min-height:100px !important; } /* AI chat (AI Engine / mwai ChatGPT theme): recolour to match the site */ .mwai-chatgpt-theme .mwai-header { background:#027987 !important; } .mwai-chatgpt-theme .mwai-header, .mwai-chatgpt-theme .mwai-name { color:#ffffff !important; } .mwai-chatgpt-theme .mwai-header svg, .mwai-chatgpt-theme .mwai-close-button svg { fill:#ffffff !important; stroke:#ffffff !important; } .mwai-chatgpt-theme .mwai-body { background:#ffffff !important; } .mwai-chatgpt-theme .mwai-conversation, .mwai-chatgpt-theme .mwai-reply .mwai-text { color:#16293f !important; } .mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-text { background:#eef4f7 !important; color:#16293f !important; } .mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-text { background:#027987 !important; color:#ffffff !important; } .mwai-chatgpt-theme .mwai-input { background:#eef4f7 !important; } /* the element you TYPE in is a