/*
Theme Name: House of Bouquet
Theme URI: https://www.instagram.com/houseofbouquet.pattaya/
Author: House of Bouquet Pattaya
Description: Bilingual (English / Thai) landing-page block theme for House of Bouquet Pattaya. Soft white, black and beige, with a language chooser at the root, separate /en/ and /th/ pages, and an enquiry form that prepares a message for Instagram.
Version: 1.1.1
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: house-of-bouquet
Tags: block-patterns, full-site-editing, one-column, translation-ready
*/

/* Layout: logo-led header, split hero with tall arched photo, soft white sections alternating with light beige panels */
:root {
	--hob-bg: var(--wp--preset--color--soft-white, #FAF8F5);
	--hob-panel: var(--wp--preset--color--beige-light, #F2EDE5);
	--hob-beige: var(--wp--preset--color--beige, #E7DDCD);
	--hob-beige-dark: var(--wp--preset--color--beige-dark, #C9BBA3);
	--hob-ink: var(--wp--preset--color--ink, #1C1A18);
	--hob-ink-soft: #3D3630;
	--hob-muted: var(--wp--preset--color--muted, #6B645C);
	--hob-line: var(--wp--preset--color--line, #E5DDD1);
	--hob-card: var(--wp--preset--color--white, #FFFFFF);
	--hob-err: #B3261E;
	--hob-display: var(--wp--preset--font-family--display, "Bodoni Moda", Georgia, serif);
	--hob-sans: var(--wp--preset--font-family--body, "IBM Plex Sans Thai", system-ui, sans-serif);
	--hob-r: 22px;
	--hob-gutter: clamp(16px, 4vw, 40px);
	--hob-top: var(--wp-admin--admin-bar--height, 0px);
	color-scheme: light;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(84px + var(--hob-top)); }
body { background: var(--hob-bg); color: var(--hob-ink); margin: 0; }
html[lang="th"] body { line-height: 1.85; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--hob-ink); outline-offset: 3px; border-radius: 6px; }

/* Remove WordPress flow margins inside theme containers; spacing comes from grid gaps */
.wp-block-group[class*="hob-"] > *,
.hob-main > *,
.hob-main .entry-content > *,
.wp-site-blocks > * { margin-block: 0; }
.hob-main .wp-block-post-content { margin: 0; }

.hob-wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--hob-gutter); box-sizing: border-box; width: 100%; }
.hob-section { padding-block: clamp(56px, 8vw, 104px); }
.hob-panel { background: var(--hob-panel); }
.hob-wrap, .hob-sec-head, .hob-hero-text, .hob-about-text, .hob-contact-side, .hob-card, .hob-step, .hob-ig { display: grid; gap: 18px; align-content: start; }
.hob-wrap { gap: 36px; }
.hob-sec-head { max-width: 720px; gap: 14px; }

/* Type */
.hob-main h1, .hob-main h2, .hob-main h3 { font-family: var(--hob-display); font-weight: 400; text-wrap: balance; margin: 0; }
.hob-main h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); line-height: 1.08; letter-spacing: -0.01em; }
.hob-main h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.15; }
.hob-main h3 { font-size: 1.35rem; line-height: 1.3; }
html[lang="th"] .hob-main h1, html[lang="th"] .hob-main h2, html[lang="th"] .hob-main h3 { font-family: var(--hob-sans); font-weight: 500; letter-spacing: 0; }
html[lang="th"] .hob-main h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.4; }
html[lang="th"] .hob-main h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.45; }
.hob-main p { max-width: 62ch; margin: 0; }
.hob-eyebrow { font-size: 0.74rem !important; letter-spacing: 0.24em; text-transform: uppercase; color: var(--hob-ink-soft); font-weight: 500; }
.hob-lead { color: var(--hob-muted); font-size: 1.06rem; }
.hob-support, .hob-note, .hob-help, .hob-privacy { color: var(--hob-muted); font-size: 0.88rem; }

/* Buttons (core Button block + theme HTML buttons) */
.wp-block-buttons { gap: 12px; }
.wp-block-button .wp-block-button__link, .hob-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 46px; box-sizing: border-box;
	padding: 10px 22px; border-radius: 999px; border: 1px solid var(--hob-ink);
	background: var(--hob-ink); color: var(--hob-bg); font: 500 0.95rem/1.3 var(--hob-sans); text-decoration: none;
	transition: background 0.2s, color 0.2s;
}
.wp-block-button .wp-block-button__link:hover, .hob-btn-primary:hover { background: var(--hob-ink-soft); border-color: var(--hob-ink-soft); color: var(--hob-bg); }
.wp-block-button.is-style-outline .wp-block-button__link, .hob-btn-outline { background: transparent; color: var(--hob-ink); border: 1px solid var(--hob-ink); padding: 10px 22px; }
.wp-block-button.is-style-outline .wp-block-button__link:hover, .hob-btn-outline:hover { background: var(--hob-panel); color: var(--hob-ink); }
.hob-btn-sm { min-height: 40px; padding: 8px 16px; font-size: 0.88rem; }
button.hob-btn { cursor: pointer; }

/* Header */
.hob-header { position: sticky; top: var(--hob-top); z-index: 20; background: color-mix(in srgb, var(--hob-bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hob-line); }
.hob-header-inner { max-width: 1180px; margin-inline: auto; padding: 12px var(--hob-gutter); display: flex; align-items: center; gap: 20px; box-sizing: border-box; }
.hob-logo { display: block; flex: none; width: 118px; aspect-ratio: 544 / 298; background: var(--hob-ink);
	-webkit-mask: url("assets/img/logo.png") center / contain no-repeat; mask: url("assets/img/logo.png") center / contain no-repeat; }
.hob-logo-lg { width: 140px; }
.hob-logo-xl { width: min(320px, 70vw); margin-inline: auto; }
.hob-nav { display: flex; gap: 22px; margin-left: auto; font-size: 0.9rem; }
.hob-nav a { text-decoration: none; color: var(--hob-muted); }
.hob-nav a:hover { color: var(--hob-ink); }
.hob-lang { display: flex; align-items: center; gap: 4px; font-size: 0.88rem; flex: none; }
.hob-lang a { text-decoration: none; padding: 4px 8px; border-radius: 999px; color: var(--hob-muted); }
.hob-lang a[aria-current="true"] { background: var(--hob-panel); color: var(--hob-ink); font-weight: 500; }
.hob-lang span { color: var(--hob-line); }
@media (max-width: 1020px) { .hob-nav { display: none; } .hob-lang { margin-left: auto; } }
@media (max-width: 560px) { .hob-header-btn { display: none !important; } .hob-logo { width: 96px; } }

/* Photo frames. Empty frames show a beige placeholder in the editor; on the site, layouts collapse until a photo is added */
.hob-arch, .hob-square, .hob-gallery .wp-block-image { margin: 0; overflow: hidden; background: var(--hob-panel); }
.hob-arch { border-radius: 999px 999px var(--hob-r) var(--hob-r); aspect-ratio: 4 / 5; max-width: 470px; width: 100%; justify-self: end; }
.hob-square { border-radius: var(--hob-r); aspect-ratio: 1 / 1; max-width: 100%; }
.hob-arch img, .hob-square img, .hob-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hero */
.hob-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.hob-hero-grid:not(:has(.hob-arch img[src])) { grid-template-columns: 1fr; }
.hob-hero-text > * { min-width: 0; }
.hob-hero { padding-block: clamp(40px, 7vw, 88px); }
@media (max-width: 820px) { .hob-hero-grid { grid-template-columns: 1fr; } .hob-arch { justify-self: center; max-width: 380px; order: -1; } }

/* Occasions */
.hob-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hob-card { background: var(--hob-card); border: 1px solid var(--hob-line); border-radius: var(--hob-r); padding: 26px; gap: 10px; }
.hob-card::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--hob-beige-dark); }
.hob-card p { color: var(--hob-muted); font-size: 0.96rem; }
.hob-card-idea { background: transparent; border-style: dashed; border-color: var(--hob-ink); }
@media (max-width: 900px) { .hob-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hob-cards { grid-template-columns: 1fr; } }

/* About */
.hob-about-grid { grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.hob-about-grid:not(:has(.hob-square img[src])) { grid-template-columns: 1fr; }
@media (max-width: 820px) { .hob-about-grid { grid-template-columns: 1fr; } }

/* Gallery */
.hob-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hob-gallery .wp-block-image { aspect-ratio: 4 / 5; border-radius: 16px; }
.hob-gallery:not(:has(img[src])) { display: none; }
.editor-styles-wrapper .hob-gallery { display: grid; }
@media (max-width: 900px) { .hob-gallery { grid-template-columns: repeat(2, 1fr); } }

/* Instagram feed strip (hidden on the site until a feed plugin is active) */
.hob-ig { margin-top: 20px; padding-top: 36px; border-top: 1px solid var(--hob-line); gap: 16px; }
.hob-ig-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.hob-handle { color: var(--hob-muted); font-size: 0.9rem; }

/* Steps */
.hob-steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hob-line); }
.hob-step { padding: 28px 28px 28px 0; gap: 10px; border-right: 1px solid var(--hob-line); }
.hob-step + .hob-step { padding-left: 28px; }
.hob-step:last-child { border-right: 0; }
.hob-step-n { font-family: var(--hob-display); font-size: 2.6rem !important; line-height: 1; font-style: italic; color: var(--hob-ink); }
.hob-step p:not(.hob-step-n) { color: var(--hob-muted); font-size: 0.96rem; }
@media (max-width: 820px) { .hob-steps { grid-template-columns: 1fr; } .hob-step, .hob-step + .hob-step { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--hob-line); } }

/* FAQ */
.hob-faq-grid { grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px, 6vw, 80px); }
.hob-faq-grid > * { min-width: 0; }
.hob-faq-list { display: block !important; }
.hob-faq-list .wp-block-details { border-bottom: 1px solid var(--hob-line); margin: 0; }
.hob-faq-list .wp-block-details:first-child { border-top: 1px solid var(--hob-line); }
.hob-faq-list summary { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; position: relative; font-weight: 500; }
.hob-faq-list summary::-webkit-details-marker { display: none; }
.hob-faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-family: var(--hob-display); font-size: 1.6rem; }
.hob-faq-list details[open] summary::after { content: "–"; }
.hob-faq-list details p { padding-bottom: 20px; color: var(--hob-muted); }
@media (max-width: 820px) { .hob-faq-grid { grid-template-columns: 1fr; } }

/* Contact + form */
.hob-contact-grid { grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.hob-contact-grid > * { min-width: 0; }
@media (max-width: 820px) { .hob-contact-grid { grid-template-columns: 1fr; } }
.hob-dl { margin: 0; border-top: 1px solid var(--hob-line); font-size: 0.92rem; }
.hob-dl div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hob-line); }
.hob-dl dt { color: var(--hob-muted); }
.hob-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.hob-form { background: var(--hob-card); border: 1px solid var(--hob-line); border-radius: var(--hob-r); padding: clamp(20px, 4vw, 36px); display: grid; gap: 16px; }
.hob-form-title { font-family: var(--hob-display); font-weight: 400; font-size: 1.35rem; margin: 0; }
html[lang="th"] .hob-form-title { font-family: var(--hob-sans); font-weight: 500; }
.hob-form p { margin: 0; }
.hob-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .hob-grid2 { grid-template-columns: 1fr; } .hob-dl div { grid-template-columns: 110px 1fr; } }
.hob-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.hob-field label { font-size: 0.88rem; font-weight: 500; }
.hob-opt { color: var(--hob-muted); font-weight: 400; }
.hob-form input, .hob-form select, .hob-form textarea { font: inherit; font-size: 1rem; color: var(--hob-ink); background: var(--hob-bg); border: 1px solid var(--hob-line); border-radius: 12px; padding: 11px 14px; width: 100%; min-height: 46px; box-sizing: border-box; }
.hob-form textarea { min-height: 120px; resize: vertical; }
.hob-form input:focus, .hob-form select:focus, .hob-form textarea:focus { outline: 2px solid var(--hob-ink); outline-offset: 1px; border-color: transparent; }
.hob-err { font-size: 0.8rem; color: var(--hob-err); }
.hob-form [aria-invalid="true"] { border-color: var(--hob-err); }
.hob-composed { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--hob-panel); border-radius: 12px; padding: 14px 16px; font-size: 0.92rem; line-height: 1.65; min-height: 3em; }
.hob-composed.is-empty { color: var(--hob-muted); }
.hob-how { margin: 0; padding-left: 1.3em; font-size: 0.88rem; color: var(--hob-muted); display: grid; gap: 2px; }
.hob-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hob-status { border-radius: 14px; padding: 14px 16px; font-size: 0.92rem; background: var(--hob-beige); }

/* Footer + mobile bar */
.hob-footer { border-top: 1px solid var(--hob-line); }
.hob-footer-inner { max-width: 1180px; margin-inline: auto; padding: 48px var(--hob-gutter) 110px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; box-sizing: border-box; }
.hob-foot-desc { color: var(--hob-muted); font-size: 0.92rem; margin: 14px 0 0; }
.hob-foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: flex-end; font-size: 0.9rem; }
.hob-foot-links a { color: var(--hob-muted); text-underline-offset: 3px; }
.hob-copy { grid-column: 1 / -1; font-size: 0.8rem; color: var(--hob-muted); margin: 0; }
@media (max-width: 700px) { .hob-footer-inner { grid-template-columns: 1fr; } .hob-foot-links { justify-content: flex-start; } }
@media (min-width: 821px) { .hob-footer-inner { padding-bottom: 48px; } }
.hob-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--hob-bg); border-top: 1px solid var(--hob-line); }
.hob-mbar .hob-btn { flex: 1; }
@media (max-width: 820px) { .hob-mbar { display: flex; } }

/* Root language chooser */
.hob-chooser-main { min-height: 100vh; display: grid; place-items: center; padding: 48px var(--hob-gutter); box-sizing: border-box; }
.hob-chooser { display: grid; gap: 40px; text-align: center; max-width: 820px; }
.hob-chooser-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.hob-chooser-cols p { margin: 0; color: var(--hob-muted); }
.hob-chooser-h { font-family: var(--hob-display); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 1.9rem) !important; line-height: 1.3; margin: 0 0 10px !important; color: var(--hob-ink) !important; }
[lang="th"] .hob-chooser-h { font-family: var(--hob-sans); font-weight: 500; line-height: 1.5; font-size: clamp(1.25rem, 2.2vw, 1.6rem) !important; }
.hob-chooser-actions { justify-content: center; }
.hob-chooser-actions .hob-btn { min-width: 150px; }
@media (max-width: 640px) { .hob-chooser-cols { grid-template-columns: 1fr; } }

/* Plain pages (privacy notice etc.) */
.hob-plain { padding-block: clamp(48px, 7vw, 88px); max-width: 760px; gap: 24px; }

/* Rose cursor: bloom points to the top-left, hotspot on the bloom */
html, body, a, button, summary, select, label, .wp-block-button__link, .hob-btn {
	cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cg transform=%22rotate(-35 16 16)%22 stroke=%22%231C1A18%22 stroke-width=%221.1%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M16 15C16 20 15.5 25 16 30.5%22 fill=%22none%22 stroke=%22%235F6B55%22 stroke-width=%221.6%22/%3E%3Cpath d=%22M16 21C13 19.5 11 20 10 22C12 23 14.5 22.5 16 21Z%22 fill=%22%239AA58C%22/%3E%3Cpath d=%22M16 24.5C19 23 21 23.5 22 25.5C20 26.5 17.5 26 16 24.5Z%22 fill=%22%239AA58C%22/%3E%3Cellipse cx=%2216%22 cy=%228.6%22 rx=%225.6%22 ry=%225.4%22 fill=%22%23D9AFAA%22/%3E%3Cpath d=%22M10 7.5C9.2 5.6 10.2 4.2 12.2 4C12.6 6 12 7.2 10 7.5ZM22 7.5C22.8 5.6 21.8 4.2 19.8 4C19.4 6 20 7.2 22 7.5Z%22 fill=%22%23CFA19C%22/%3E%3Cpath d=%22M10 8C10 13 13 15 16 15C19 15 22 13 22 8C20 9.5 18 9 16 7C14 9 12 9.5 10 8Z%22 fill=%22%23D9AFAA%22/%3E%3Cpath d=%22M12 7C12 3.5 14.5 2.5 16 2.5C17.5 2.5 20 3.5 20 7C18.5 8 17 8 16 7C15 8 13.5 8 12 7Z%22 fill=%22%23EBCFCB%22/%3E%3Cpath d=%22M14.4 5.6C15.4 4.4 17.6 4.9 17.3 6.4%22 fill=%22none%22/%3E%3C/g%3E%3C/svg%3E") 7 5, auto;
}
input, textarea { cursor: text; }
.editor-styles-wrapper, .editor-styles-wrapper * { cursor: auto; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }