/*
Theme Name: ThipThai Rath Block Spa
Theme URI: https://www.thipthai-rath.de/
Author: Torsten Querbach
Description: Komplettes, voll editierbares Full-Site-Editing Block-Theme für ThipThai Rath. Enthält Startseite, Massage-Unterseiten, Preis-Unterseiten, Angebote, Gutschein, Bonuskarte, Über-uns-Bereiche, Kontaktseiten, Blog und Rechtliches als Gutenberg-Inhalte.
Version: 4.0.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: thipthai-rath
Tags: block-patterns, full-site-editing, custom-logo, featured-images, wide-blocks, accessibility-ready
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
  --tt-cream: #f8efe2;
  --tt-cream-soft: #fffaf2;
  --tt-cream-deep: #ead6b6;
  --tt-gold: #c89435;
  --tt-gold-light: #ebcc86;
  --tt-gold-pale: #f7e6bd;
  --tt-brown: #351b09;
  --tt-brown-2: #583015;
  --tt-brown-3: #75491f;
  --tt-ink: #2d1b10;
  --tt-muted: #775f4b;
  --tt-white: #fffdf9;
  --tt-shadow: 0 28px 80px rgba(52, 28, 11, .16);
  --tt-shadow-soft: 0 15px 44px rgba(52, 28, 11, .10);
  --tt-radius: 30px;
  --tt-radius-sm: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--tt-ink);
  background:
    radial-gradient(circle at 10% 8%, rgba(220, 173, 88, .18), transparent 30rem),
    radial-gradient(circle at 90% 45%, rgba(145, 87, 31, .07), transparent 34rem),
    var(--tt-cream);
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background-image:
    linear-gradient(rgba(201, 148, 53, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 148, 53, .10) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

img { max-width: 100%; height: auto; }
a { text-underline-offset: 3px; }
::selection { background: var(--tt-gold-light); color: var(--tt-brown); }

/* Gutenberg editing helpers */
.editor-styles-wrapper .tt-reveal { opacity: 1 !important; transform: none !important; }
.editor-styles-wrapper .tt-parallax { transform: none !important; }
.editor-styles-wrapper .tt-tilt { transform: none !important; }
.editor-styles-wrapper .tt-marquee-track { animation: none !important; }

/* Generic editable design classes */
.tt-section { position: relative; padding-top: clamp(74px, 8vw, 128px); padding-bottom: clamp(74px, 8vw, 128px); }
.tt-section-tight { position: relative; padding-top: clamp(44px, 5vw, 76px); padding-bottom: clamp(44px, 5vw, 76px); }
.tt-section-dark {
  position: relative;
  overflow: hidden;
  color: #f9e7c4;
  background:
    radial-gradient(circle at 75% 15%, rgba(209,157,67,.20), transparent 27rem),
    linear-gradient(135deg, #241004 0%, #47230c 52%, #2a1205 100%);
}
.tt-section-dark h1,.tt-section-dark h2,.tt-section-dark h3,.tt-section-dark h4 { color: #fff5e2; }
.tt-section-dark a:not(.wp-block-button__link) { color: var(--tt-gold-light); }
.tt-kicker {
  margin-bottom: 12px !important;
  color: #9e6b21;
  font-size: .78rem !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .19em;
}
.tt-section-dark .tt-kicker { color: var(--tt-gold-light); }
.tt-display { font-size: clamp(3.2rem, 7vw, 7.4rem) !important; line-height: .95 !important; letter-spacing: -.045em !important; }
.tt-title { font-size: clamp(2.45rem, 5vw, 5.2rem) !important; line-height: 1.02 !important; letter-spacing: -.035em !important; }
.tt-lead { font-size: clamp(1.08rem, 1.8vw, 1.34rem) !important; line-height: 1.65 !important; color: #6e523b; }
.tt-section-dark .tt-lead { color: #ead3ad; }
.tt-gold-text { color: #b77b22 !important; }
.tt-muted { color: var(--tt-muted); }
.tt-smallcaps { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 800; }
.tt-center { text-align: center; }
.tt-divider { width: 170px; height: 1px; margin: 25px 0 30px; background: linear-gradient(90deg, transparent, var(--tt-gold), transparent); position: relative; }
.tt-divider::after { content: "✦"; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-54%); padding: 0 9px; color: var(--tt-gold); background: var(--tt-cream); font-size: .66rem; }
.tt-section-dark .tt-divider::after { background: #341907; }

.tt-glass {
  border: 1px solid rgba(255,255,255,.48);
  border-radius: var(--tt-radius);
  background: rgba(255,250,242,.76);
  box-shadow: var(--tt-shadow-soft);
  backdrop-filter: blur(16px) saturate(1.06);
}
.tt-card {
  overflow: hidden;
  border: 1px solid rgba(173,111,33,.16);
  border-radius: var(--tt-radius);
  background: rgba(255,251,244,.78);
  box-shadow: var(--tt-shadow-soft);
}
.tt-card-padding { padding: clamp(25px, 3vw, 42px) !important; }
.tt-luxury-card {
  padding: clamp(26px, 3vw, 44px) !important;
  border: 1px solid rgba(214,164,79,.24);
  border-radius: var(--tt-radius);
  background: linear-gradient(145deg, rgba(78,38,11,.98), rgba(41,18,5,.98));
  box-shadow: 0 32px 90px rgba(36,17,5,.25);
  color: #f8e4be;
}
.tt-luxury-card h2,.tt-luxury-card h3 { color: #fff3db; }
.tt-luxury-card strong { color: var(--tt-gold-light); }
.tt-shadow { box-shadow: var(--tt-shadow); }
.tt-radius { border-radius: var(--tt-radius) !important; overflow: hidden; }
.tt-radius-sm { border-radius: var(--tt-radius-sm) !important; overflow: hidden; }
.tt-overlap-up { position: relative; z-index: 4; margin-top: clamp(-64px,-5vw,-36px) !important; }
.tt-sticky-card { position: sticky; top: 120px; }

/* Buttons */
.wp-block-button__link {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border: 1px solid var(--tt-gold);
  border-radius: 999px;
  background: linear-gradient(135deg, #e6bf6e, #c88f2d);
  color: #2b1607;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(164,106,30,.22);
  transition: transform .24s ease, box-shadow .24s ease, filter .24s ease;
}
.wp-block-button__link:hover { color: #2b1607; transform: translateY(-2px); filter: saturate(1.07); box-shadow: 0 18px 36px rgba(164,106,30,.30); }
.is-style-outline > .wp-block-button__link { background: rgba(255,255,255,.04); color: inherit; border-color: currentColor; box-shadow: none; }
.tt-section-dark .is-style-outline > .wp-block-button__link { color: #f6d99f; border-color: rgba(246,217,159,.55); }

/* Site header / footer are template parts and editable in Site Editor */
.tt-scroll-progress { position: fixed; z-index: 99999; top: 0; left: 0; width: 100%; height: 3px; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg,#f4d595,#bd7d22,#e8bd66); }
.tt-topbar { background: #241004 !important; color: #e8d0ab; font-size: .79rem; }
.tt-topbar a { color: #f0d8b0; }
.tt-header {
  position: sticky;
  top: 0;
  z-index: 900;
  border-bottom: 1px solid rgba(186,129,46,.17);
  background: rgba(255,250,242,.90) !important;
  box-shadow: 0 8px 34px rgba(48,25,9,.05);
  backdrop-filter: blur(18px) saturate(1.12);
  transition: background .3s ease, box-shadow .3s ease;
}
.admin-bar .tt-header { top: 32px; }
.tt-header.is-scrolled { background: rgba(255,250,242,.97) !important; box-shadow: 0 14px 42px rgba(48,25,9,.11); }
.tt-brand-row { min-height: 86px; transition: min-height .28s ease; }
.tt-header.is-scrolled .tt-brand-row { min-height: 72px; }
.tt-brand-row .wp-block-site-logo img { width: 156px; max-height: 70px; object-fit: contain; mix-blend-mode: multiply; }
.tt-header .wp-block-navigation-item__content { font-size: .9rem; font-weight: 750; color: var(--tt-brown-2); }
.tt-header .wp-block-navigation-item__content:hover { color: #a56e20; }

/* Hero: full-page blocks, all inner content remains editable */
.tt-hero {
  min-height: min(860px, calc(100vh - 115px));
  display: grid;
  align-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.tt-hero .wp-block-cover__background { background: linear-gradient(90deg, rgba(30,13,4,.77) 0%, rgba(43,20,7,.47) 45%, rgba(29,13,4,.18) 100%) !important; }
.tt-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: clamp(250px,32vw,520px);
  height: clamp(250px,32vw,520px);
  right: -6%;
  top: -8%;
  border: 1px solid rgba(237,196,119,.20);
  border-radius: 50%;
  box-shadow: 0 0 0 45px rgba(218,166,77,.045), 0 0 0 95px rgba(218,166,77,.025);
  pointer-events: none;
}
.tt-hero-inner { position: relative; z-index: 3; padding-top: clamp(88px,10vw,140px) !important; padding-bottom: clamp(90px,10vw,145px) !important; }
.tt-hero-copy { max-width: 760px; }
.tt-hero-copy .tt-kicker { color: #f0c878; }
.tt-hero-copy .tt-display { color: #fff5e4; margin-top: 0; }
.tt-hero-copy .tt-lead { color: #f2ddbc; max-width: 690px; }
.tt-hero-facts { margin-top: 34px !important; }
.tt-hero-facts > .wp-block-column { border-left: 1px solid rgba(240,205,143,.35); padding-left: 18px; }
.tt-hero-facts strong { display: block; color: #f3cf87; font-family: Georgia,"Times New Roman",serif; font-size: 1.45rem; }
.tt-hero-facts p { margin: 0; color: #e9d5b5; font-size: .78rem; }
.tt-hero-offer {
  max-width: 380px;
  margin-left: auto !important;
  padding: clamp(25px,3vw,40px) !important;
  border: 1px solid rgba(240,207,148,.35);
  border-radius: 28px;
  background: rgba(36,15,4,.72);
  box-shadow: 0 28px 75px rgba(0,0,0,.28);
  backdrop-filter: blur(16px);
  color: #f9e6c5;
}
.tt-hero-offer h2 { color: #fff1d6; }
.tt-hero-price { margin: 6px 0 0 !important; color: #efc878; font-family: Georgia,"Times New Roman",serif; font-size: clamp(3rem,5vw,5.2rem) !important; line-height: .95; }
.tt-scroll-cue { position: absolute; left: 50%; bottom: 30px; z-index: 4; transform: translateX(-50%); color: #f1d49e; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }

/* Moving brand band */
.tt-marquee { overflow: hidden; background: #2a1205; color: #e8c17b; border-top: 1px solid rgba(232,193,123,.18); border-bottom: 1px solid rgba(232,193,123,.18); }
.tt-marquee-track { display: flex; width: max-content; gap: 22px; padding: 17px 0; animation: ttMarquee 28s linear infinite; text-transform: uppercase; letter-spacing: .15em; font-size: .8rem; font-weight: 800; }
.tt-marquee-track span::after { content: "✦"; margin-left: 22px; color: #9f6b22; }
@keyframes ttMarquee { to { transform: translateX(-50%); } }

/* Visual editorial sections */
.tt-image-stack { position: relative; min-height: 620px; }
.tt-image-stack > figure:first-child { width: 82%; margin: 0; }
.tt-image-stack > figure:nth-child(2) { width: 54%; margin: -170px 0 0 auto; position: relative; z-index: 2; border: 10px solid var(--tt-cream); box-shadow: var(--tt-shadow); }
.tt-image-stack > figure img { width: 100%; height: 100%; object-fit: cover; }
.tt-image-stack > figure:first-child img { min-height: 500px; }
.tt-image-stack > figure:nth-child(2) img { min-height: 290px; }
.tt-ornament { font-family: Georgia,"Times New Roman",serif; font-size: 8rem !important; line-height: .6 !important; color: rgba(190,131,45,.20) !important; }

.tt-service-grid > .wp-block-column { min-width: 0; }
.tt-service-cover { min-height: 520px !important; border-radius: 28px; overflow: hidden; box-shadow: var(--tt-shadow-soft); }
.tt-service-cover .wp-block-cover__image-background { transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.tt-service-cover:hover .wp-block-cover__image-background { transform: scale(1.055); filter: saturate(1.08); }
.tt-service-cover .wp-block-cover__background { background: linear-gradient(to top, rgba(31,14,4,.92) 0%, rgba(31,14,4,.22) 62%, rgba(31,14,4,.06) 100%) !important; }
.tt-service-cover .wp-block-cover__inner-container { align-self: flex-end; }
.tt-service-cover h3 { color: #fff4df; font-size: clamp(1.75rem,2.5vw,2.7rem); margin-bottom: 8px; }
.tt-service-cover p { color: #edd7b4; }
.tt-service-cover strong { color: #efc875; }

.tt-feature-cover { min-height: 690px !important; border-radius: 32px; overflow: hidden; }
.tt-feature-cover .wp-block-cover__background { background: linear-gradient(90deg, rgba(29,13,4,.82), rgba(29,13,4,.28)) !important; }
.tt-feature-cover h2 { color: #fff4df; }
.tt-feature-cover p { color: #eddbbd; }

/* Price tables: native Gutenberg table blocks */
.tt-price-table { overflow: hidden; border-radius: 22px; border: 1px solid rgba(175,115,39,.18); background: rgba(255,253,248,.82); box-shadow: var(--tt-shadow-soft); }
.tt-price-table table { margin: 0; width: 100%; border-collapse: collapse; font-size: .94rem; }
.tt-price-table th { background: linear-gradient(90deg,#bd812a,#ddb260); color: #2f1808; font-weight: 850; }
.tt-price-table th,.tt-price-table td { padding: 13px 14px; border-color: rgba(150,92,27,.12) !important; }
.tt-price-table tbody tr:nth-child(even) { background: rgba(219,178,105,.09); }
.tt-price-table td:first-child { font-weight: 700; color: var(--tt-brown); }
.tt-price-table .has-fixed-layout { table-layout: auto; }
.tt-price-note { font-size: .82rem !important; color: #82674e; }

/* Gift cards / imagery */
.tt-gift-image img { border-radius: 26px; box-shadow: var(--tt-shadow); }
.tt-floating { box-shadow: var(--tt-shadow); }
.tt-gallery-strip .wp-block-image img { height: 310px; width: 100%; object-fit: cover; border-radius: 22px; }

/* Details / FAQ */
.wp-block-details.tt-faq {
  margin-bottom: 12px;
  padding: 18px 20px;
  border: 1px solid rgba(167,107,34,.16);
  border-radius: 16px;
  background: rgba(255,251,244,.74);
}
.wp-block-details.tt-faq summary { color: var(--tt-brown); font-weight: 800; cursor: pointer; }
.wp-block-details.tt-faq p { margin-top: 13px; color: #6f5845; }

/* Contact */
.tt-contact-panel { padding: clamp(30px,4vw,54px) !important; border-radius: 30px; background: linear-gradient(145deg,#4a250d,#281104); color: #f7e2bd; box-shadow: var(--tt-shadow); }
.tt-contact-panel h2,.tt-contact-panel h3 { color: #fff4df; }
.tt-contact-panel a { color: #f1c976; }
.tt-hours-list { margin: 0; padding: 0; list-style: none; }
.tt-hours-list li { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid rgba(239,202,134,.14); }

/* Blog */
.tt-post-card { padding: 0 0 28px; border-bottom: 1px solid rgba(160,100,32,.16); }
.tt-post-card .wp-block-post-featured-image img { border-radius: 24px; aspect-ratio: 16/10; object-fit: cover; }
.tt-post-card .wp-block-post-title a { text-decoration: none; }

/* Footer */
.tt-footer { background: #211004 !important; color: #dfc6a1; }
.tt-footer h2,.tt-footer h3 { color: #fff1d5; }
.tt-footer a { color: #e8c37f; }
.tt-footer .wp-block-site-logo img { width: 170px; filter: brightness(1.15); mix-blend-mode: screen; }
.tt-footer-bottom { border-top: 1px solid rgba(229,190,119,.16); }

/* Motion */
.tt-reveal { opacity: 0; transform: translateY(32px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); transition-delay: var(--tt-delay,0ms); }
.tt-reveal.is-visible { opacity: 1; transform: translateY(0); }
.tt-parallax { transform: translate3d(0,var(--tt-parallax-y,0),0); will-change: transform; }
.tt-tilt { transform: perspective(1100px) rotateX(var(--tt-tilt-x,0deg)) rotateY(var(--tt-tilt-y,0deg)); transform-style: preserve-3d; transition: transform .22s ease-out; }
.tt-tilt:hover { z-index: 5; }

@media (max-width: 980px) {
  .tt-hero { min-height: auto; }
  .tt-hero-inner { padding-top: 110px !important; padding-bottom: 100px !important; }
  .tt-hero-offer { max-width: none; margin-left: 0 !important; margin-top: 28px !important; }
  .tt-image-stack { min-height: 520px; }
  .tt-image-stack > figure:nth-child(2) { margin-top: -120px; }
  .tt-sticky-card { position: static; }
  .tt-service-cover { min-height: 430px !important; }
  .tt-header .wp-block-navigation__responsive-container.is-menu-open { background: #fff9ef; color: var(--tt-brown); padding: 28px; }
}

@media (max-width: 782px) {
  .admin-bar .tt-header { top: 46px; }
  .tt-topbar { display: none; }
  .tt-brand-row { min-height: 74px; }
  .tt-brand-row .wp-block-site-logo img { width: 128px; }
  .tt-display { font-size: clamp(3rem,15vw,5.2rem) !important; }
  .tt-title { font-size: clamp(2.35rem,12vw,4.2rem) !important; }
  .tt-section { padding-top: 68px; padding-bottom: 68px; }
  .tt-hero-facts { gap: 8px !important; }
  .tt-hero-facts > .wp-block-column { flex-basis: 30% !important; padding-left: 10px; }
  .tt-image-stack { min-height: 420px; }
  .tt-image-stack > figure:first-child { width: 92%; }
  .tt-image-stack > figure:first-child img { min-height: 360px; }
  .tt-image-stack > figure:nth-child(2) { width: 58%; margin-top: -90px; border-width: 6px; }
  .tt-image-stack > figure:nth-child(2) img { min-height: 210px; }
  .tt-service-cover { min-height: 390px !important; }
  .tt-feature-cover { min-height: 560px !important; }
  .tt-gallery-strip .wp-block-image img { height: 220px; }
  .tt-price-table { overflow-x: auto; }
  .tt-price-table table { min-width: 720px; font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .tt-reveal { opacity: 1; transform: none; }
  .tt-parallax,.tt-tilt { transform: none !important; }
}
.tt-marquee-track p { margin: 0; white-space: nowrap; }
.tt-marquee-track p::after { content: "✦"; margin-left: 22px; color: #9f6b22; }


/* V4 complete-site components */
.tt-subhero { position: relative; overflow: hidden; }
.tt-subhero::after {
  content: ""; position: absolute; inset: auto -8% -24% 32%; height: 48%;
  background: radial-gradient(ellipse at center, rgba(231,190,111,.22), transparent 68%);
  pointer-events: none;
}
.tt-service-link-card {
  height: 100%; overflow: hidden; padding: 16px 16px 24px;
  border: 1px solid rgba(177,122,40,.22); border-radius: var(--tt-radius);
  background: rgba(255,250,242,.86); box-shadow: var(--tt-shadow-soft);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.tt-service-link-card:hover { transform: translateY(-7px); box-shadow: var(--tt-shadow); border-color: rgba(177,122,40,.45); }
.tt-service-link-card .tt-service-thumb { margin: -16px -16px 22px; }
.tt-service-link-card .tt-service-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 24px 24px 12px 12px; }
.tt-service-link-card h3 { margin-top: 0; font-size: clamp(1.4rem, 2.1vw, 2rem); }
.tt-card-price { color: var(--tt-brown-2); }
.tt-price-card-grid { margin-top: 28px; }
.tt-price-chip { padding: 12px 0; border-bottom: 1px solid rgba(117,73,31,.16); }
.tt-price-chip:last-child { border-bottom: 0; }
.tt-price-chip p { margin: 0; }
.tt-hours-panel { padding: clamp(28px,5vw,58px); border-radius: var(--tt-radius); background: rgba(255,250,242,.9); box-shadow: var(--tt-shadow-soft); }
.tt-hours-table table { border-collapse: collapse; }
.tt-hours-table td { padding: 16px 14px; border-bottom: 1px solid rgba(117,73,31,.14); }
.tt-hours-table td:last-child { text-align: right; }
.tt-legal-note { padding: 22px 24px; margin: 26px 0 38px; border-left: 4px solid var(--tt-gold); border-radius: 0 18px 18px 0; background: #fff4d9; }
.tt-legal-note p { margin: 0; }
.tt-nav-compact .wp-block-navigation__submenu-container { min-width: 270px !important; }
.tt-nav-compact .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .75rem 1rem; }
@media (max-width: 1100px) {
  .tt-topbar { display:none; }
  .tt-brand-row { gap: 18px; }
}
@media (max-width: 781px) {
  .tt-service-link-card .tt-service-thumb img { aspect-ratio: 16/10; }
  .tt-hours-table td { padding: 12px 8px; }
}