/*
Theme Name: Gio Tattoo Koblenz
Theme URI: https://avarise.io
Author: Avarise
Author URI: https://avarise.io
Description: Block-Theme für Gio Tattoo Koblenz. Texte und Bilder sind im Editor änderbar, das Layout ist gesperrt. Mit Instagram-Sync und Cookie-Consent.
Version: 1.1.0
Requires at least: 6.5
Requires PHP: 7.4
License: Proprietary
Text Domain: gio-tattoo
*/

* { box-sizing: border-box; }
body { margin: 0; -webkit-font-smoothing: antialiased; background-color: #2E2A25; color: #F1ECE3; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.wp-site-blocks { min-height: 100vh; width: 100%; overflow-x: clip; position: relative; padding: 0 !important; }
:where(.wp-site-blocks) > * { margin-block-start: 0; margin-block-end: 0; }
.wp-block-post-content { margin: 0; }
a { text-decoration: none; color: inherit; }
a:hover { color: #ffffff; }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }
@keyframes marquee-run { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }
@keyframes hero-zoomout { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes wa-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.35); } 50% { box-shadow: 0 0 0 10px rgba(37,211,102,0); } }

/* Hilfsklassen aus dem Konverter */
.gio-lt { display: contents; }
.wp-block-template-part.gio-part { display: contents; }

/* Header */
.gio-header { top: var(--wp-admin--admin-bar--height, 0px) !important; }
body.home .gio-header { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom-color: transparent !important; }
.gio-header a.is-active[data-nav] { color: #F1ECE3 !important; border-bottom-color: #F1ECE3 !important; }
.gio-header a.is-active.gio-pill { background: #b79a6f !important; color: #27231F !important; }

/* Desktop / Mobil (Umbruch wie im Design: 1100 px) */
[data-only="m"] { display: none !important; }
@media (max-width: 1099px) {
  [data-only="d"] { display: none !important; }
  [data-only="m"] { display: contents !important; }
}

/* Mobiles Menü */
[data-gio-menu] { display: none !important; }
[data-gio-menu].is-open { display: contents !important; }
body.gio-menu-open { overflow: hidden; }

/* Tabs (Portfolio, Aftercare) */
[data-tab-panel="b"] { display: none !important; }
.gio-tab-b [data-tab-panel="a"] { display: none !important; }
.gio-tab-b [data-tab-panel="b"] { display: block !important; }

/* Rechtstexte (Impressum, Datenschutz) */
.gio-legal { max-width: 860px; margin: 0 auto; padding: 150px 24px 110px; }
.gio-legal h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(2.4rem, 6vw, 3.4rem); margin: 0 0 36px; color: #F1ECE3; }
.gio-legal h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 1.7rem; margin: 46px 0 14px; color: #F1ECE3; }
.gio-legal h3 { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; margin: 30px 0 10px; color: #b79a6f; font-weight: 500; }
.gio-legal p, .gio-legal li { font-size: 15px; line-height: 1.8; font-weight: 300; color: #d8d2c7; }
.gio-legal a { color: #F1ECE3; border-bottom: 1px solid rgba(241,236,227,0.4); }
.gio-legal mark { background: #b79a6f; color: #27231F; padding: 1px 6px; }

/* Lightbox + Instagram-Fenster */
.gio-overlay { position: fixed; inset: 0; z-index: 95; background: rgba(12,11,10,0.9); display: flex; align-items: center; justify-content: center; padding: 24px; }
.gio-overlay__close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; background: none; border: none; color: #F1ECE3; font-size: 36px; line-height: 1; cursor: pointer; }
.gio-overlay__img { max-width: min(920px, 92vw); max-height: 88vh; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.12); }
.gio-igm { width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; background: #1b1917; border: 1px solid #4a443b; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.gio-igm__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #4a443b; font-size: 13px; color: #F1ECE3; }
.gio-igm__head img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.gio-igm__head span:last-child { margin-left: auto; font-size: 11px; color: #8f8779; }
.gio-igm__img { display: block; width: 100%; aspect-ratio: 4/5; max-height: 62vh; object-fit: cover; background: #0f0e0d; }
.gio-igm__body { padding: 16px 18px 6px; }
.gio-igm__stats { display: flex; gap: 18px; font-size: 13px; color: #F1ECE3; margin-bottom: 10px; }
.gio-igm__body p { font-size: 14px; line-height: 1.65; color: #c9c1b4; font-weight: 300; margin: 0; }
.gio-igm__cta { display: flex; align-items: center; justify-content: center; height: 46px; margin: 16px 18px 18px; background: #F1ECE3; color: #27231F !important; font-size: 11px; letter-spacing: 0.16em; }
.gio-igm iframe { display: block; width: 100%; height: min(720px, 75vh); border: 0; background: #fff; }

/* Externe Inhalte (Zwei-Klick) + Cookie-Banner */
.gio-ext { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 28px; min-height: 340px; height: 100%; background: #211f1c; color: #d8d2c7; font-size: 13px; line-height: 1.6; font-weight: 300; }
.gio-ext strong { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 500; color: #F1ECE3; }
.gio-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border: 1px solid #F1ECE3; background: #F1ECE3; color: #27231F; font-size: 11px; letter-spacing: 0.16em; cursor: pointer; font-family: inherit; }
.gio-btn--ghost { background: transparent; color: #F1ECE3; border-color: #5c554c; }
.gio-btn:hover { background: #fff; color: #27231F; }
.gio-btn--ghost:hover { background: transparent; color: #fff; border-color: #F1ECE3; }
.gio-consent { position: fixed; left: 24px; bottom: 24px; z-index: 90; width: min(440px, calc(100vw - 48px)); background: #1b1917; border: 1px solid #4a443b; box-shadow: 0 24px 60px rgba(0,0,0,0.5); padding: 24px 24px 22px; color: #d8d2c7; }
.gio-consent h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 24px; color: #F1ECE3; margin: 0 0 10px; }
.gio-consent p { font-size: 13px; line-height: 1.7; font-weight: 300; margin: 0 0 14px; }
.gio-consent a { color: #F1ECE3; border-bottom: 1px solid rgba(241,236,227,0.4); }
.gio-consent label { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; margin: 0 0 10px; }
.gio-consent input { margin-top: 3px; accent-color: #b79a6f; }
.gio-consent__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
@media (max-width: 600px) { .gio-consent { left: 12px; bottom: 12px; width: calc(100vw - 24px); } }