/* e-panigiria — Layout A «Η Αφίσα» */ :root{ /* warm near-black — chosen so #FE0000 clears 4.5:1 contrast on it */ --night:#131110; --night2:#1C1917; --night3:#262220; --line:#332D29; --line2:#453D38; --red:#FE0000; /* your accent, unchanged */ --red-lift:#FF5A4A; /* hover / focus only */ --ember:rgba(254,0,0,.14); /* used once, on .featured — a second accent would fight --red everywhere else, so it's scoped to the one card that's meant to look singled-out */ --gold:#D4AF37; --gold-soft:rgba(212,175,55,.4); --paper:#F2EDE6; --dim:#9C938B; --dim2:#6F6862; --serif:'Alegreya',Georgia,serif; --sc:'Alegreya SC',Georgia,serif; --sans:'Commissioner',system-ui,sans-serif; --w:1180px; } *{box-sizing:border-box} html{scroll-behavior:smooth} /* overflow-x:clip (not hidden) contains the 100vw ad bleeds without breaking position:sticky */ body{margin:0;background:var(--night);color:var(--paper);font-family:var(--sans); -webkit-font-smoothing:antialiased;overflow-x:clip} img{display:block;max-width:100%;height:auto} a{text-decoration:none;color:inherit} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} :focus-visible{outline:2px solid var(--red-lift);outline-offset:3px} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} .wrap{max-width:var(--w);margin:0 auto;padding:0 22px} /* -------- header -------- */ /* .stickytop (a direct child — see header.php) is the ONE sticky element, always, never .top itself: .top's containing block is now .stickytop (its parent), so if .top carried position:sticky it would only get .stickytop's own short height as "room" to stick within instead of the whole page — the exact bug .flyerbox had before .ev{align-items:stretch}. .stickytop has no such problem since IT is a direct child, giving it the full page's height to work with. */ .top{position:static;z-index:50;background:rgba(19,17,16,.94); backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} /* .topin's OWN top/bottom padding applied to every child equally, no matter what the child's own box/padding/margin did — a child can't "opt out" of its container's padding while still centered normally in flow (confirmed: symmetric margin has provably ZERO effect on a center-aligned flex item's rendered position, since the free-space redistribution exactly cancels it — padding-on-the-child likewise still sits inside the container's own inset, just adds more box around it). The only way to actually give the logo a smaller edge-gap than nav/.r is to shrink .topin's OWN padding (4px, benefiting everyone) and give the logo an EXPLICIT height that swallows the difference (53px = old total bar height 61 minus 2*4), so nav/.r's rendered position — which depends only on (total bar height, their own unchanged size) — comes out identical to before with no changes needed on them at all. */ .topin{max-width:var(--w);margin:0 auto;padding:4px 22px;display:flex;align-items:center;gap:28px} .logo{font-family:var(--serif);font-weight:800;font-size:32px;letter-spacing:-.025em;color:var(--paper); height:53px;box-sizing:border-box;display:flex;align-items:center} .logo span{color:var(--red)} /* items_wrap on the wp_nav_menu() call is '%3$s' — no