/* techmerion.gr 28/10/2026: «Υπηρεσίες» opens a panel with the seven services (hover, focus or click).
   Left: the list in two columns. Right: a preview of the service under the pointer. */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd-top{display:inline-flex;align-items:center;gap:7px;padding:8px 0;position:relative;white-space:nowrap;background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.nav-dd-top:after{content:"";height:2px;position:absolute;left:0;right:0;bottom:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-dd:hover .nav-dd-top:after,.nav-dd.is-open .nav-dd-top:after,.nav-dd-top[aria-current]:after{transform:scaleX(1)}
.nav-dd-caret{width:9px;height:9px;transition:transform .2s}
.nav-dd:hover .nav-dd-caret,.nav-dd.is-open .nav-dd-caret{transform:rotate(180deg)}
.nav-dd-panel{position:absolute;top:100%;left:50%;width:min(1060px,calc(100vw - 48px));padding-top:16px;transform:translate(-50%,8px);opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility 0s linear .18s;z-index:60}
.nav-dd:hover .nav-dd-panel,.nav-dd.is-open .nav-dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .18s,transform .18s}
.nav-dd.is-shut .nav-dd-panel{opacity:0;visibility:hidden}
.nav-dd-inner{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-top:2px solid var(--ink);border-radius:4px;box-shadow:0 22px 50px rgba(22,25,23,.13);overflow:hidden}
.nav-dd-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:6px;margin:0;padding:12px 10px 14px}
.nav-dd-all{grid-column:1/-1}
.nav-dd-group{display:block;padding:12px 12px 4px;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.nav-dd-item{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;align-items:start;padding:10px 12px;border-radius:4px;color:var(--ink);text-decoration:none}
.nav-dd-item:hover,.nav-dd-item.is-active,.nav-dd-item:focus-visible{background:var(--wash)}
.nav-dd-item[aria-current] .nav-dd-t{color:var(--accent)}
.nav-dd-ico{grid-row:span 2;width:36px;height:36px;border-radius:4px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.nav-dd-ico svg{width:20px;height:20px}
.nav-dd-t{font:600 14.5px/1.3 var(--head);letter-spacing:-.01em}
.nav-dd-d{font-size:12.5px;line-height:1.5;color:var(--ink-soft);margin-top:2px;white-space:normal}
.nav-dd-preview{display:flex;flex-direction:column;gap:14px;padding:22px 22px 24px;background:var(--wash);border-left:1px solid var(--line)}
.nav-dd-shot{position:relative;aspect-ratio:16/10;border-radius:4px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.nav-dd-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.nav-dd-shot .slot-art{position:absolute;inset:0;display:grid;place-items:center;color:var(--accent);background:linear-gradient(135deg,var(--accent-soft),var(--surface) 70%)}
.nav-dd-shot .slot-art svg{width:64px;height:64px;opacity:.85}
.nav-dd-pt{font:600 18px/1.3 var(--head);letter-spacing:-.02em;margin:0}
.nav-dd-pd{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0}
.nav-dd-more{margin-top:auto;font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);align-self:flex-start;padding-bottom:2px}
.nav-dd-more:hover{color:var(--accent);border-color:var(--accent)}
.nav-dd-all{display:block;margin:6px 12px 0;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none}
.nav-dd-all:hover{color:var(--accent)}
@media(max-width:1180px){.nav-dd-inner{grid-template-columns:1fr}.nav-dd-preview{display:none}.nav-dd-panel{width:min(740px,calc(100vw - 48px))}}

/* Mobile menu: the seven services under «Υπηρεσίες» */
.nav-mobile-panel .nav-m-sub{display:flex;flex-direction:column;margin:-4px 0 6px;padding-left:16px;border-left:2px solid var(--line)}
.nav-mobile-panel .nav-m-sub a{font-size:15px;padding:7px 0;color:var(--ink-soft)}
.nav-mobile-panel .nav-m-sub a[aria-current]{color:var(--accent)}

@media(prefers-reduced-motion:reduce){.nav-dd-panel,.nav-dd-caret,.nav-dd-top:after{transition:none}}