/* Responsive styles voor mobile en alle platformen. Toevoegen in met (uit home/, bio/, wijnorg/, wijnwoordenboek/, contact/) of href="../../css/responsive.css" (uit wijnorg/wijnlanden/) */ /* Alle header-varianten: centrale uitlijning logo + titel + subtitel */ .header table.header-table, .header table.embed-table, .header > table { margin-left: auto; margin-right: auto; } .header .header-main, .header .embed-table__main, .header .embed-table__title { text-align: center; } .header .logo { display: block; margin-left: auto; margin-right: auto; height: auto; max-width: min(100%, 220px); } .header .header-main h1, .header .header-main p, .header .embed-table__main h1, .header .embed-table__main p, .header .embed-table__title h1, .header .embed-table__title p { text-align: center; } /* Desktop: header-tabel expliciet als tabel (blijft netjes bij wisselen mobile ↔ desktop) */ @media (min-width: 769px) { .header-table, .embed-table, .header > table { display: table; width: 100%; table-layout: auto; } .header-table tr, .embed-table tr, .header > table tr { display: table-row; } .header-table td, .embed-table td, .header > table td { display: table-cell; vertical-align: middle; padding: 0 10px; width: auto; } /* Alleen bij ≥2 cellen: eerste/laatste kolom = zijkanten; één cell (colspan) niet forceren */ .header-table td:first-child:not(:only-child), .embed-table td:first-child:not(:only-child), .header > table td:first-child:not(:only-child) { width: 1%; white-space: nowrap; } .header-table td:last-child:not(:only-child), .embed-table td:last-child:not(:only-child), .header > table td:last-child:not(:only-child) { width: 1%; white-space: nowrap; text-align: right; } /* Symmetrische zijkolommen houden logo/titel/subtitel exact gecentreerd */ .header-table td.header-side { width: 56px; min-width: 56px; white-space: nowrap; text-align: right; } .header-table td.header-main { text-align: center; } } /* Kleine schermen (mobiel, grote telefoon) */ @media (max-width: 768px) { body { font-size: 16px; /* voorkomt zoom op iOS bij focus op input */ } .header { padding: 20px 12px; } .header h1 { font-size: 1.5em; } .header p { font-size: 1em; } /* Header-tabel: laat kolommen stapelen of compacter worden */ .header-table, .embed-table, .header > table { display: block; } .header-table tr, .embed-table tr, .header > table tr { display: block; } .header-table td, .embed-table td, .header > table td { display: block; padding: 8px 0; text-align: center; } .header-table td:first-child .logo, .embed-table td:first-child .logo, .header > table td:first-child .logo { margin-left: auto; margin-right: auto; } /* Bovenbalk: links mogen wrappen, iets kleinere marge */ .top-nav { padding: 8px 12px; text-align: center; } .top-nav a { margin: 0 8px; font-size: 0.9em; } /* Container: minder padding op kleine schermen */ .container { padding: 24px 12px; } /* Navigatielinks onderaan: wrappen, grotere touch-targets */ .nav-links { padding: 1rem 0; } .nav-links a { display: inline-block; padding: 10px 8px; min-height: 44px; line-height: 24px; box-sizing: border-box; } /* Hamburger-menu: voldoende touch-oppervlak */ .hamburger { min-width: 44px; min-height: 44px; padding: 11px; box-sizing: border-box; } .menu a { padding: 12px 0; min-height: 44px; line-height: 24px; box-sizing: border-box; } /* * Brede databereik-tabellen horizontaal scrollbaar — niet toegepast op echte layout-tabellen * (Wijnwoordenboek kaarten-lijst, zoek-resultaat enz.): die breken onder display:block. */ .container table:not(.preserve-table):not(.result-table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .container table:not(.preserve-table):not(.result-table) th, .container table:not(.preserve-table):not(.result-table) td { white-space: nowrap; font-size: 0.9em; padding: 6px 10px; } /* Afbeeldingen: nooit breder dan viewport */ img { max-width: 100%; height: auto; } /* Zoekveld en knoppen: full width op mobiel */ .search-box { flex-direction: column; align-items: stretch; } #search-input { max-width: none; } /* Keurmerken / cert-logos: netjes onder elkaar */ .cert-logos { gap: 1rem; } .cert-logos img { max-width: 100%; } /* Age-gate knoppen: stack op zeer smal scherm */ .age-gate-buttons { flex-direction: column; } #age-gate-yes, #age-gate-no { min-height: 44px; width: 100%; } /* CTA-kaarten (index): onder elkaar */ .cta-grid { grid-template-columns: 1fr !important; } .cta-card { min-width: 0; } /* Wijnhuis-/artikelkaarten: stapelen */ .winery-card, .article-card { flex-direction: column; } .winery-card-image, .article-card-image { flex: none; max-width: 100%; } } /* * Site-topbalk (alle subsites): hamburger + uitklapmenu (zelfde gedrag als shop). * Hamburger altijd zichtbaar; tekstlinks in de balk verbergen op smalle viewports. */ .site-nav-shell { position: relative; z-index: 1000; } .site-nav-shell .menu-toggle { display: none; } .site-nav-shell > nav.menu { display: none; position: absolute; top: 100%; left: 12px; right: auto; width: min(22rem, calc(100vw - 24px)); z-index: 1001; max-height: min(85vh, 28rem); overflow-y: auto; background-color: #fff4e6; padding: 10px 15px; text-align: left; border: 1px solid #e7d2b8; border-radius: 0 0 8px 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); } .site-nav-shell > nav.menu a { display: block; padding: 8px 0; text-decoration: none; color: #333; } .site-nav-shell .menu-toggle:checked ~ nav.menu { display: block; } .site-nav-shell .top-nav td.top-nav__burger-cell, table.top-nav td.top-nav__burger-cell { display: table-cell !important; width: auto !important; min-width: 44px !important; padding: 8px 12px 8px 16px !important; vertical-align: middle !important; } @media (max-width: 991px) { .site-nav-shell .top-nav td.top-nav__link, table.top-nav td.top-nav__link { display: none !important; } .site-nav-shell .top-nav td.menu-spacer, table.top-nav td.menu-spacer { display: none !important; width: 0 !important; padding: 0 !important; } } /* Zeer kleine schermen (kleine telefoons) */ @media (max-width: 480px) { .header h1 { font-size: 1.25em; } .top-nav a { margin: 0 4px; font-size: 0.85em; } .container { padding: 16px 10px; } h2 { font-size: 1.25em; } } /* Iframes: niet breder dan viewport (embed kan nog fixed width hebben) */ iframe { max-width: 100%; box-sizing: border-box; } /* Voorkom horizontaal scrollen door overflow */ html { overflow-x: hidden; } body { overflow-x: hidden; } /* Hamburger-menu overal consistent: rechts en compact */ .header .header-table td:last-child > div, .header .embed-table__menu > div { position: relative; display: inline-block; } .header .header-table td:last-child, .header .embed-table__menu { text-align: right; } .header .menu { position: absolute; right: 0; left: auto; top: calc(100% + 8px); width: min(320px, 80vw); max-width: 320px; border: 1px solid #e7d2b8; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); z-index: 1000; } /* Touch-vriendelijke focus (toegankelijkheid) */ @media (hover: none) { a:focus, button:focus { outline: 2px solid #8B4513; outline-offset: 2px; } }