/*
Theme Name: Costess
Theme URI: https://costessbar.com/
Author: Rakur Studio
Description: Dark, photo-first block theme for Costéss Café & Bar (Cyber 2 Tower, Jakarta).
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.3.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: costess
*/

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
img { height: auto; }
:focus-visible { outline: 2px solid var(--wp--preset--color--orange); outline-offset: 3px; }
::selection { background: var(--wp--preset--color--orange); color: var(--wp--preset--color--night); }
.wp-site-blocks > *, main.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.wp-block-heading { text-wrap: balance; }
.cst-eyebrow { font-size: 0.75rem !important; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 500; color: var(--wp--preset--color--orange); }
.cst-muted { color: var(--wp--preset--color--ash); }
:root { --cst-header-h: 98px; }
[id] { scroll-margin-top: calc(var(--cst-header-h) + 16px); }

/* ---------- Header: transparent over the home slideshow, a floating bar once you scroll ---------- */
.wp-site-blocks > .wp-block-template-part:has(> .cst-header) { display: contents; }
.cst-header {
	position: sticky; top: 0; z-index: 50;
	margin-inline: auto; width: 100%; max-width: 100%; box-sizing: border-box;
	background: transparent;
	transition: max-width 0.45s cubic-bezier(.2, .8, .2, 1), top 0.45s cubic-bezier(.2, .8, .2, 1), background-color 0.35s ease, box-shadow 0.45s ease;
}
.admin-bar .cst-header { top: var(--wp-admin--admin-bar--height, 32px); }
body:not(.home) .cst-header { background: var(--wp--preset--color--night); border-bottom: 1px solid var(--wp--preset--color--line); }
.cst-header.is-floating {
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 12px) !important;
	max-width: min(1240px, calc(100% - 24px));
	background-color: rgba(18, 17, 16, 0.8) !important;
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	border: 1px solid rgba(244, 238, 230, 0.12) !important;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
	padding-left: clamp(1rem, 2.5vw, 1.75rem) !important;
	padding-right: clamp(0.75rem, 1.5vw, 1rem) !important;
	padding-top: 0.55rem !important; padding-bottom: 0.55rem !important;
}
.cst-header.is-floating > .alignwide { max-width: none; }
html.has-modal-open .cst-header.is-floating { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--wp--preset--color--night) !important; }
.cst-header .wp-block-navigation a { color: var(--wp--preset--color--cream); text-decoration: none; font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; }
.cst-header .wp-block-navigation a:hover, .cst-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--orange); }
.cst-header .wp-block-navigation, .cst-header .wp-block-buttons { flex-shrink: 0; white-space: nowrap; }
.cst-logo img { display: block; transition: width 0.4s ease; }
.cst-header.is-floating .cst-logo img { width: 124px !important; }
/* Home: the header floats over the full-screen slideshow. */
.home .cst-main--home { margin-top: calc(-1 * var(--cst-header-h)) !important; }

/* Mobile menu overlay */
.cst-header .wp-block-navigation__responsive-container.is-menu-open { padding: 1.25rem 1.5rem 2rem; }
.cst-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start !important; padding-top: 4.5rem; }
.cst-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start !important; gap: 0 !important; width: 100%; }
.cst-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--wp--preset--color--umber); }
.cst-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.75rem; letter-spacing: 0.12em; padding: 0.7rem 0 !important; display: block; width: 100%; }
.cst-header .wp-block-navigation__responsive-container-open svg, .cst-header .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }

/* ---------- Hero slideshow: Costess sizes (the rest is in assets/front.css) ---------- */
.cst-hero__title { font-size: clamp(2.75rem, 6.5vw, 5.75rem) !important; font-weight: 400 !important; letter-spacing: 0.04em !important; }
.cst-hero__content .cst-eyebrow { margin-bottom: 0.75rem; }

/* ---------- Section heads ---------- */
.cst-reveal-me .wp-block-heading { position: relative; }
.cst-rule { width: 56px; height: 2px; background: var(--wp--preset--color--orange); border: 0; margin: 1rem 0 0 !important; opacity: 1; }

/* ---------- Opening hours ---------- */
.cst-hours { border-top: 1px solid var(--wp--preset--color--line); }
.cst-hours p { margin: 0; }
.cst-hours .cst-hours__row { border-bottom: 1px solid var(--wp--preset--color--line); padding: 0.9rem 0; gap: 1rem; }
.cst-hours__day { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.8125rem; font-weight: 500; }
.cst-hours__time { color: var(--wp--preset--color--orange); font-weight: 400; }

/* ---------- Photo grids ---------- */
.cst-photos { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px !important; }
.cst-photos .wp-block-image { margin: 0; overflow: hidden; aspect-ratio: 3 / 4; }
.cst-photos .wp-block-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.cst-photos .wp-block-image:hover img { transform: scale(1.04); }
.cst-ktv .wp-block-image { margin: 0; overflow: hidden; }
.cst-ktv .wp-block-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- Inner page heroes ---------- */
.cst-page-hero .wp-block-cover__background { background: linear-gradient(0deg, rgba(18, 17, 16, 0.95) 0%, rgba(18, 17, 16, 0.35) 70%) !important; opacity: 1 !important; }

/* ---------- Menu list ---------- */
.cst-menu-list .wp-block-post-template { gap: 2.25rem 3.5rem !important; }
.cst-menu-item { gap: 1.25rem !important; align-items: flex-start !important; padding-bottom: 1.5rem; border-bottom: 1px solid var(--wp--preset--color--line); height: 100%; box-sizing: border-box; }
.cst-menu-thumb { flex: 0 0 96px; margin: 0 !important; border-radius: 50%; overflow: hidden; background: var(--wp--preset--color--umber); }
.cst-menu-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cst-menu-item__body { flex: 1 1 auto; min-width: 0; }
.cst-menu-item__head { gap: 1rem !important; }
.cst-menu-item__title { margin: 0 !important; font-size: 1.0625rem !important; letter-spacing: 0.12em; }
.cst-price { margin: 0 !important; color: var(--wp--preset--color--orange); font-weight: 500; white-space: nowrap; }
.cst-menu-item__desc { margin-top: 0.4rem !important; }
.cst-menu-item__desc p { margin: 0; color: var(--wp--preset--color--ash); font-size: var(--wp--preset--font-size--small); }

/* ---------- Events ---------- */
.cst-events .wp-block-post-template > li + li { margin-top: var(--wp--preset--spacing--60) !important; }
.cst-event__img { margin: 0 !important; overflow: hidden; }
.cst-event__img img { width: 100%; height: 100%; object-fit: cover; }
.cst-event__schedule { white-space: pre-line; color: var(--wp--preset--color--cream); border-left: 2px solid var(--wp--preset--color--orange); padding-left: 1rem; }
.cst-events .wp-block-post-title { margin-top: 0.35rem !important; }

/* Bound fields that are still empty (no price yet, no schedule) take no space. */
.cst-price:empty, .cst-event__schedule:empty, .cst-events .cst-eyebrow:empty { display: none; }

/* ---------- Gallery page ---------- */
.cst-gallery.wp-block-gallery { gap: 6px !important; }
.cst-gallery.wp-block-gallery.has-nested-images figure.wp-block-image img { object-fit: cover; }

/* ---------- Footer ---------- */
.cst-footer { border-top: 1px solid var(--wp--preset--color--line); }
.cst-footer__head { font-size: 0.75rem !important; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--orange); margin-bottom: 0.75rem; font-weight: 500; }
.cst-footer p { margin: 0; color: var(--wp--preset--color--ash); font-size: var(--wp--preset--font-size--small); }
.cst-footer a { color: var(--wp--preset--color--cream); text-decoration: none; }
.cst-footer a:hover { color: var(--wp--preset--color--orange); }

/* ---------- Home details ---------- */
.cst-hours-card { border-top: 2px solid var(--wp--preset--color--orange); }
.cst-hours-card .cst-hours { border-top: 0; }
.cst-hours-card .cst-hours__row:last-child { border-bottom: 0; }
.cst-ktv__main { margin: 0 !important; }
.cst-ktv .wp-block-image img { transition: transform 0.9s cubic-bezier(.2, .8, .2, 1); }
.cst-ktv .wp-block-image:hover img { transform: scale(1.03); }
.cst-strip figcaption { font-size: 0.6875rem !important; letter-spacing: 0.18em; text-transform: uppercase; }
.wp-block-button.is-style-outline .wp-block-button__link { border-color: rgba(244, 238, 230, 0.55); color: var(--wp--preset--color--cream); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--orange); background: var(--wp--preset--color--orange); color: var(--wp--preset--color--night); }

/* ---------- Page-load feedback ---------- */
.cst-pageload {
	position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; height: 2px; z-index: 100000; pointer-events: none;
	background: var(--wp--preset--color--orange); transform-origin: left center; transform: scaleX(0); opacity: 0;
}
.cst-pageload.is-active { opacity: 1; transform: scaleX(0.92); transition: transform 10s cubic-bezier(0.08, 0.82, 0.17, 1), opacity 0.2s ease; }
html.cst-is-navigating, html.cst-is-navigating a { cursor: progress; }
.wp-block-button__link.is-loading { pointer-events: none; }
.wp-block-button__link.is-loading::before {
	content: ""; display: inline-block; width: 0.95em; height: 0.95em; margin-right: 0.6em; vertical-align: -0.14em;
	border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cst-spin 0.7s linear infinite;
}
@keyframes cst-spin { to { transform: rotate(360deg); } }

/* ---------- Mobile ---------- */
@media (max-width: 781px) {
	:root { --cst-header-h: 98px; }
	.cst-hide-mobile { display: none !important; }
	.cst-header.is-floating { top: calc(var(--wp-admin--admin-bar--height, 0px) + 8px) !important; max-width: calc(100% - 16px); }
	.cst-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cst-hours .cst-hours__row { flex-direction: column; align-items: flex-start !important; gap: 0.15rem; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.cst-photos .wp-block-image img { transition: none; }
}

/* Inner page heroes: text lines up with the wide content column, not the screen edge. */
.cst-page-hero .wp-block-cover__inner-container { width: 100% !important; max-width: var(--wp--style--global--wide-size) !important; margin-inline: auto !important; }
.cst-page-hero .wp-block-cover__inner-container > .alignwide { max-width: none !important; }
/* Hero text column: padding (added next to the arrows) stays inside its width. */
.cst-hero__content { box-sizing: border-box; }
.cst-hours__time { white-space: nowrap; }
/* Menu: two columns on wide screens, one on phones. */
.cst-menu-list .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 781px) {
	.cst-menu-list .wp-block-post-template.is-layout-grid { grid-template-columns: minmax(0, 1fr) !important; }
}