/* =========================================================
   70%30 BARBERSHOP — MONOCHROME DESIGN LAYER
   Visual-only overrides on top of Astra + Spectra (UAGB) blocks.
   No content, structure, or plugin behaviour is touched here.
   ========================================================= */

:root{
	--ink:        #0b0b0a;
	--ink-soft:   #1c1c1a;
	--paper:      #fbfaf7;
	--paper-dim:  #f0eee9;
	--line:       rgba(11,11,10,.14);
	--line-dark:  rgba(251,250,247,.18);
	--gray:       #6c6a66;
	--gray-light: #a9a7a2;
	--white:      #ffffff;
	--ease:       cubic-bezier(.16,1,.3,1);
	--container:  1160px;
}

/* ---------------------------------------------------------
   0. Base
   --------------------------------------------------------- */
html{ scroll-behavior:smooth; }

body{
	background:var(--paper) !important;
	color:var(--ink) !important;
	font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
	font-size:17px;
	line-height:1.7;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

*{ border-color:var(--line); }

::selection{ background:var(--ink); color:var(--paper); }

a{ color:var(--ink); }

.ast-container,
.ast-separate-container .ast-article-single{
	max-width:var(--container) !important;
}

/* Grayscale photography for a consistent monochrome mood,
   with a soft colour reveal on hover as a small "special" touch. */
.entry-content img,
.uagb-rm__content img,
.wp-block-uagb-image img,
.spectra-image-gallery__media-thumbnail{
	filter:grayscale(1) contrast(1.05) !important;
	transition:filter .6s var(--ease);
}
.entry-content img:hover,
.uagb-rm__content img:hover,
.spectra-image-gallery__media-thumbnail:hover{
	filter:grayscale(0) contrast(1.02) !important;
}

/* Photo-background sections (heroes, texture/dark sections) are
   applied via UAGB's generated per-page stylesheet, not an inline
   style attribute, and every page/post has different block ids —
   so interactions.js detects them generically (computed background-
   image) and adds .bh-photo-section. A ::before copies the block's
   own background via `background:inherit` and is grayscaled on its
   own layer (so the filter never touches the text/buttons on top);
   ::after adds a darkening gradient for legibility. */
.bh-photo-section{
	position:relative;
	isolation:isolate;
}
.bh-photo-section::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:0;
	background:inherit;
	filter:grayscale(1) contrast(1.1) brightness(.92);
	pointer-events:none;
}
.bh-photo-section::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:0;
	background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.2) 38%, rgba(0,0,0,.85) 100%);
	pointer-events:none;
}
.bh-photo-section > *{
	position:relative;
	z-index:1;
}

/* Text sitting inside a photo section needs to flip to light colours
   regardless of which page/block it's on. */
.bh-photo-section h1,
.bh-photo-section h2,
.bh-photo-section h3,
.bh-photo-section .uagb-ifb-title,
.bh-photo-section .uagb-cta__title,
.bh-photo-section .uagb-rm__title{
	color:var(--paper) !important;
}
.bh-photo-section .uagb-ifb-title-prefix,
.bh-photo-section h4,
.bh-photo-section h5,
.bh-photo-section h6{
	color:var(--gray-light) !important;
}
.bh-photo-section p,
.bh-photo-section li,
.bh-photo-section .uagb-ifb-desc,
.bh-photo-section .uagb-rm__desc{
	color:rgba(251,250,247,.82) !important;
}

/* ---------------------------------------------------------
   1. Typography
   --------------------------------------------------------- */
h1,h2,h3,
.uagb-ifb-title,
.uagb-cta__title,
.uagb-rm__title{
	font-family:'Bebas Neue',sans-serif !important;
	text-transform:uppercase;
	letter-spacing:.03em;
	line-height:1.05;
	color:var(--ink) !important;
	font-weight:400 !important;
}

h4,h5,h6,
.uagb-ifb-title-prefix{
	font-family:'Oswald',sans-serif !important;
	text-transform:uppercase;
	letter-spacing:.16em;
	font-weight:500 !important;
	font-size:.75rem !important;
	color:var(--gray) !important;
}

p, li, .uagb-ifb-desc, .uagb-rm__desc{
	font-family:'Inter',sans-serif !important;
	color:var(--ink-soft);
}

/* ---------------------------------------------------------
   2. Header / navigation
   --------------------------------------------------------- */
#masthead{
	background:transparent !important;
	border:0 !important;
	box-shadow:none !important;
}
#masthead .ast-container{ max-width:var(--container) !important; }

.site-header .site-title,
.site-header .site-title a,
.ast-site-identity{
	font-family:'Bebas Neue',sans-serif !important;
	letter-spacing:.04em;
	color:var(--white) !important;
	font-size:1.4rem !important;
}

.main-header-menu .menu-item.current-menu-item > .menu-link,
.main-header-menu .menu-item.current_page_item > .menu-link{
	background:transparent !important;
}
.main-header-menu .menu-item > .menu-link{
	font-family:'Oswald',sans-serif !important;
	text-transform:uppercase;
	letter-spacing:.14em;
	font-size:.78rem !important;
	font-weight:500 !important;
	color:var(--white) !important;
	padding:.5em .9em !important;
	position:relative;
}
.main-header-menu .menu-item > .menu-link::after{
	content:"";
	position:absolute;
	left:.9em; right:.9em; bottom:.15em;
	height:1px;
	background:currentColor;
	transform:scaleX(0);
	transform-origin:left;
	transition:transform .35s var(--ease);
}
.main-header-menu .menu-item:hover > .menu-link::after,
.main-header-menu .current-menu-item > .menu-link::after{
	transform:scaleX(1);
}
.main-header-menu .menu-item > .menu-link:hover{
	color:var(--white) !important;
}

/* Language toggle button, injected into the primary nav */
.bh-lang-item{
	display:flex;
	align-items:center;
	margin-left:.5em;
}
.bh-lang-toggle{
	font-family:'Oswald',sans-serif;
	text-transform:uppercase;
	letter-spacing:.14em;
	font-size:.72rem;
	font-weight:600;
	color:var(--white);
	background:transparent;
	border:1px solid rgba(251,250,247,.55);
	padding:.4em .8em;
	cursor:pointer;
	transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.bh-lang-toggle:hover{
	background:var(--white);
	color:var(--ink);
	border-color:var(--white);
}
body:not(.ast-theme-transparent-header) .bh-lang-toggle{
	color:var(--ink);
	border-color:var(--line);
}
body:not(.ast-theme-transparent-header) .bh-lang-toggle:hover{
	background:var(--ink);
	color:var(--paper);
	border-color:var(--ink);
}

/* Solid state once Astra's own header type isn't transparent
   (e.g. inner/archive pages, or once the transparent class is
   absent) — keep it strictly black & white instead of default theme colours. */
body:not(.ast-theme-transparent-header) #masthead{
	background:var(--paper) !important;
	border-bottom:1px solid var(--line) !important;
}
body:not(.ast-theme-transparent-header) .main-header-menu .menu-item > .menu-link,
body:not(.ast-theme-transparent-header) .site-header .site-title,
body:not(.ast-theme-transparent-header) .site-header .site-title a{
	color:var(--ink) !important;
}

/* Mobile toggle */
.ast-mobile-menu-buttons-minimal svg,
.astra-mobile-toggle svg,
.menu-toggle-close,
.menu-toggle-open{
	fill:var(--white) !important;
}
/* The mobile dropdown panel has no opaque background of its own
   in Astra's markup, so the white nav-link colour above would be
   illegible once it opens. Give the panel a solid dark background
   at mobile/tablet widths (Astra's default header breakpoint). */
@media (max-width:921px){
	.main-header-bar-navigation .main-header-menu{
		background:var(--ink) !important;
		padding:.5rem 1.5rem 1.5rem !important;
	}
	.main-header-bar-navigation .main-header-menu .menu-link{
		color:var(--paper) !important;
	}
}

/* ---------------------------------------------------------
   3. Buttons (hero CTAs)
   --------------------------------------------------------- */
.wp-block-button__link,
.uagb-infobox-cta-link,
.uagb-cta__button-link-wrapper{
	font-family:'Oswald',sans-serif !important;
	text-transform:uppercase;
	letter-spacing:.14em;
	font-size:.78rem !important;
	font-weight:600 !important;
	border-radius:0 !important;
	padding:1em 2.1em !important;
	display:inline-flex !important;
	align-items:center;
	gap:.65em;
	transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.wp-block-button__link svg,
.uagb-cta__button-link-wrapper svg{
	width:.95em; height:.95em;
	fill:currentColor !important;
}

/* Primary — solid */
.uagb-infobox-cta-link.wp-block-button__link{
	background:var(--paper) !important;
	color:var(--ink) !important;
	border:1px solid var(--paper) !important;
}
.uagb-infobox-cta-link.wp-block-button__link:hover{
	background:transparent !important;
	color:var(--paper) !important;
	transform:translateY(-2px);
}

/* Secondary — outline */
.uagb-cta__button-link-wrapper.wp-block-button__link{
	background:transparent !important;
	color:var(--paper) !important;
	border:1px solid var(--paper) !important;
}
.uagb-cta__button-link-wrapper.wp-block-button__link:hover{
	background:var(--paper) !important;
	color:var(--ink) !important;
	transform:translateY(-2px);
}

.uagb-cta__title{
	color:var(--paper) !important;
	font-size:1.1rem !important;
	opacity:.75;
}

/* ---------------------------------------------------------
   4. Hero (info-box repurposed as hero content)
   --------------------------------------------------------- */
.uagb-is-root-container:has(.uagb-ifb-title){
	min-height:78vh !important;
	padding-top:0 !important;
	padding-bottom:clamp(3rem, 6vw, 5rem) !important;
	padding-left:max(1.5rem, calc((100vw - var(--container)) / 2)) !important;
	padding-right:max(1.5rem, calc((100vw - var(--container)) / 2)) !important;
	display:flex !important;
	align-items:flex-end !important;
}
.uagb-ifb-content{
	max-width:640px;
	text-align:left !important;
	margin:0 !important;
}
.uagb-ifb-title-wrap{ text-align:left !important; }
.uagb-is-root-container:has(.uagb-ifb-title) .uagb-container-inner-blocks-wrap{
	align-items:flex-start !important;
}
.uagb-cta__wrap,
.uagb-cta__buttons{
	text-align:left !important;
	justify-content:flex-start !important;
}
/* Colour is handled generically by .bh-photo-section above (every
   hero across every page is a photo section); this is just sizing. */
.uagb-is-root-container:has(.uagb-ifb-title) .uagb-ifb-title{
	font-size:clamp(2.6rem, 6vw, 4.6rem) !important;
	margin-bottom:.4em !important;
}
.uagb-is-root-container:has(.uagb-ifb-title) .uagb-ifb-desc{
	font-size:1.05rem;
	max-width:32em;
	margin:15% 0 4% 0 !important;
}
.uagb-cta__wrap{ margin-bottom:.75em; }

/* ---------------------------------------------------------
   5. Opening hours + emblem section
   --------------------------------------------------------- */
.wp-block-uagb-container.uagb-is-root-container:has(.wp-block-list){
	padding:6rem 0 !important;
	border-top:1px solid var(--line);
}
ul.wp-block-list{
	list-style:none;
	padding:0;
	margin:1.5em 0 0 !important;
}
ul.wp-block-list li{
	display:flex;
	justify-content:space-between;
	max-width:22em;
	padding:.6em 0;
	border-bottom:1px solid var(--line);
	font-family:'Oswald',sans-serif;
	letter-spacing:.03em;
	text-transform:uppercase;
	font-size:.92rem;
}
ul.wp-block-list li:first-child{ border-top:1px solid var(--line); }

/* The emblem artwork is a PNG on a solid white canvas, which reads
   as a hard card against the page's off-white background. Multiply
   blend-mode makes the white canvas disappear into whatever sits
   behind it, leaving just the linework — no re-export needed. */
.wp-block-uagb-image--effect-grayscale img{
	filter:grayscale(1);
	mix-blend-mode:multiply;
}

/* "Let op" note under the hours/emblem row */
.uagb-block-22b0840c{
	max-width:var(--container);
	margin:0 auto;
	padding:0 1.5rem 4rem !important;
	text-align:center;
}
.uagb-block-22b0840c .uagb-ifb-icon-wrap svg{
	width:22px; height:22px;
	fill:var(--ink);
}
.uagb-block-22b0840c .uagb-ifb-title{
	font-size:1.15rem !important;
	margin:.6em 0 .3em !important;
}
.uagb-block-22b0840c .uagb-ifb-desc{
	color:var(--gray) !important;
	text-transform:uppercase;
	letter-spacing:.14em;
	font-size:.75rem !important;
	font-family:'Oswald',sans-serif;
}

/* ---------------------------------------------------------
   6. Services / pricing list (restaurant-menu block)
   --------------------------------------------------------- */
.wp-block-uagb-restaurant-menu{
	max-width:var(--container);
	margin:0 auto !important;
	padding:2rem 1.5rem 7rem !important;
	border-top:1px solid var(--line);
	padding-top:5rem !important;
}
.uagb-rest_menu__wrap{
	padding:1.6rem 0 !important;
}
.uagb-rm__content{
	align-items:flex-start !important;
	gap:1.25rem !important;
}
.uagb-rm__content img{
	width:84px !important;
	height:84px !important;
	object-fit:cover;
	border-radius:0 !important;
}
.uagb-rm-details{ flex:1; }
.uagb-rm__title{
	font-size:1.2rem !important;
	margin-bottom:.25em !important;
}
.uagb-rm__desc{
	font-size:.88rem !important;
	color:var(--gray) !important;
	line-height:1.55;
}
.uagb-rm__price{
	font-family:'Bebas Neue',sans-serif !important;
	font-size:1.3rem !important;
	color:var(--ink) !important;
	letter-spacing:.02em;
	white-space:nowrap;
}
.uagb-rm__separator{
	border-top-color:var(--line) !important;
	opacity:1 !important;
}

/* ---------------------------------------------------------
   7. Footer
   --------------------------------------------------------- */
#colophon{
	background:var(--ink) !important;
	border-top:1px solid var(--line-dark);
}
#colophon,
#colophon a{
	color:var(--paper) !important;
}
.ast-footer-copyright p{
	font-family:'Oswald',sans-serif;
	text-transform:uppercase;
	letter-spacing:.1em;
	font-size:.72rem !important;
	text-align:center;
	padding:2.2rem 0;
	opacity:.7;
}
.ast-footer-copyright a{
	text-decoration:underline;
	text-underline-offset:.2em;
}

/* ---------------------------------------------------------
   8. Forms (SureForms) — kept monochrome if used anywhere
   --------------------------------------------------------- */
.srfm-input-common,
.srfm-input-wrap input,
.srfm-input-wrap textarea,
.srfm-input-wrap select{
	border:1px solid var(--line) !important;
	border-radius:0 !important;
	background:var(--paper) !important;
	color:var(--ink) !important;
	font-family:'Inter',sans-serif !important;
}
.srfm-input-common:focus,
.srfm-input-wrap input:focus,
.srfm-input-wrap textarea:focus{
	outline:none !important;
	border-color:var(--ink) !important;
}
.srfm-submit-button,
.srfm-button-primary,
.srfm-submit-button-wrap button{
	background:var(--ink) !important;
	color:var(--paper) !important;
	border:1px solid var(--ink) !important;
	border-radius:0 !important;
	font-family:'Oswald',sans-serif !important;
	text-transform:uppercase;
	letter-spacing:.12em;
	transition:background .3s var(--ease), color .3s var(--ease);
}
.srfm-submit-button:hover,
.srfm-button-primary:hover{
	background:var(--paper) !important;
	color:var(--ink) !important;
}
.bh-photo-section label{
	color:rgba(251,250,247,.82) !important;
}

/* ---------------------------------------------------------
   9. Scroll-to-top
   --------------------------------------------------------- */
#ast-scroll-top{
	background:var(--ink) !important;
	border-radius:0 !important;
}
#ast-scroll-top:hover{
	background:var(--ink-soft) !important;
}
#ast-scroll-top svg{ fill:var(--paper) !important; }

/* ---------------------------------------------------------
   10. Focus states & accessibility
   --------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible{
	outline:2px solid var(--ink);
	outline-offset:3px;
}

/* ---------------------------------------------------------
   11. Scroll-reveal (paired with interactions.js;
        content is visible by default, JS only enhances)
   --------------------------------------------------------- */
.bh-reveal{
	opacity:0;
	transform:translateY(18px);
	transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.bh-reveal.bh-in{
	opacity:1;
	transform:none;
}
@media (prefers-reduced-motion:reduce){
	.bh-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
	html{ scroll-behavior:auto; }
}

/* ---------------------------------------------------------
   12. Responsive
   --------------------------------------------------------- */
@media (max-width:768px){
	body{ font-size:16px; }
	.uagb-is-root-container:has(.uagb-ifb-title){
		min-height:78vh;
		padding-bottom:8vw !important;
	}
	.uagb-ifb-title{ font-size:2.4rem !important; }
	.wp-block-uagb-restaurant-menu{ padding-top:3.5rem !important; padding-bottom:4rem !important; }
	.uagb-rm__content img{ width:64px !important; height:64px !important; }
}

/* Floating mobile-only language toggle (see PHP: wp_body_open).
   Sits left of the hamburger icon so it's reachable even though the
   mobile menu panel itself has a pre-existing bug that hides its
   items. Hidden on desktop; the nav-based button handles that. */
.bh-lang-toggle-mobile{
	display:none;
}
@media (max-width:921px){
	.bh-lang-toggle-mobile{
		display:inline-flex;
		position:fixed;
		top:1.1rem;
		right:4.2rem;
		z-index:99;
	}
	body:not(.ast-theme-transparent-header) .bh-lang-toggle-mobile{
		color:var(--ink);
		border-color:var(--line);
	}
	.bh-lang-item{
		display:none;
	}
}