/*
Theme Name: Glamour by Laurie
Description: Zelfstandig block-theme voor Glamour by Laurie. Huisstijl en header, fase 3A.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: glamourbylaurie
License: GNU General Public License v2 or later
*/

/* Layout tokens also apply to the existing Gutenberg content. */
html { scroll-padding-top: 2rem; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { text-underline-offset: .23em; text-decoration-thickness: 1px; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid #335e67;
  outline-offset: 5px;
}
.wp-site-blocks > * { margin-block-start: 0; }
.wp-site-blocks > header.wp-block-template-part { position: relative; z-index: 100; }
.glam-main { padding: clamp(24px, 3vw, 48px) clamp(20px, 4vw, 48px); }
.glam-main > .wp-block-post-content { width: 100%; }
.glam-main .wp-block-post-content > .alignfull { max-width: 1280px; margin-inline: auto; }
.glam-main p { text-wrap: pretty; }
.glam-main :where(h1,h2,h3,h4) { text-wrap: balance; }
.glam-main :where(input:not([type=checkbox]):not([type=radio]):not([type=submit]),select,textarea),
.wpforms-container :where(input[type=text],input[type=email],textarea) {
  font: inherit;
  color: #182139;
  background: #fffefc;
  border: 1px solid #d8d7d1;
  border-radius: 8px;
  padding: .8rem 1rem;
  max-width: 100%;
}
.wp-block-button__link, .wp-element-button, .woocommerce a.button,
.woocommerce button.button, .wpforms-container button[type=submit] {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  min-height: 44px;
}
.woocommerce a.button, .woocommerce button.button, .wpforms-container button[type=submit] {
  font: 500 .9375rem/1.3 "DM Sans", sans-serif;
  border-radius: 999px;
  padding: .9rem 1.5rem;
  border: 1px solid transparent;
  color: #182139;
  background: #c6e4de;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.wpforms-container button[type=submit]:hover { color: #182139; background: #b3d9d1; }

/* Header: single native navigation block, including the original six links. */
.glam-header {
  position: relative;
  background: #fffefc;
  border-bottom: 1px solid #eceae5;
  isolation: isolate;
}
.glam-header::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: min(25vw, 360px);
  background: linear-gradient(115deg, transparent, #eef7f5);
  z-index: -1;
  pointer-events: none;
}
.glam-header__inner {
  max-width: 1280px;
  min-height: 118px;
  padding: 18px 0;
  margin: 0 auto !important;
  width: calc(100% - 80px);
  gap: 26px !important;
}
.glam-brand { flex: 0 0 auto; gap: 14px !important; }
.glam-brand__logo { margin: 0 !important; flex: 0 0 76px; }
.glam-brand__logo a { display: block; border-radius: 4px; }
.glam-brand__logo img { display: block; object-fit: contain; }
.glam-brand__text { margin: 0 !important; }
.glam-brand__name {
  margin: 0 !important;
  font: 400 clamp(18px, 1.55vw, 23px)/1.35 "Playfair Display", Georgia, serif;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.glam-brand__name a { text-decoration: none; color: #182139; }
.glam-brand__tagline {
  margin: 8px 0 0 !important;
  color: #626878;
  font-size: 8px;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: .19em;
  white-space: nowrap;
}
.glam-header__nav { margin: 0 !important; flex: 1 1 auto; font-size: 13px; line-height: 1.5; }
.glam-header__nav .wp-block-navigation__container { gap: clamp(16px, 1.65vw, 27px); }
.glam-header__nav .wp-block-navigation-item__content {
  position: relative;
  padding-block: 13px;
  color: #424b61;
  white-space: nowrap;
  text-decoration: none;
}
.glam-header__nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  bottom: 4px;
  inset-inline: 0;
  height: 3px;
  border-radius: 3px;
  background: #a8d3e4;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.glam-header__nav .current-menu-item > .wp-block-navigation-item__content::after,
.glam-header__nav .wp-block-navigation-item__content:hover::after { transform: scaleX(1); }
.glam-header__nav .current-menu-item > .wp-block-navigation-item__content { color: #182139; }
.glam-header__booking { flex: 0 0 auto; margin: 0 !important; }
.glam-booking-button .wp-block-button__link {
  padding: 14px 22px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: #182139;
  background: #c6e4de;
}
.glam-booking-button span { display: inline-block; margin-left: 13px; font-size: 19px; line-height: .6; }
.glam-header__nav .wp-block-navigation__responsive-container-open {
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: #f3f6f3;
  color: #182139;
}
.glam-header__nav .wp-block-navigation__responsive-container-open:hover { background: #e3f0ec; }
.glam-header__nav .wp-block-navigation__responsive-container.is-menu-open {
  background: #fffefc !important;
  color: #182139 !important;
  padding: 28px clamp(24px, 6vw, 60px);
}
.glam-header__nav .is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: stretch;
  padding-top: 68px;
}
.glam-header__nav .is-menu-open .wp-block-navigation__container { align-items: stretch; gap: 0; width: 100%; }
.glam-header__nav .is-menu-open .wp-block-navigation-item { width: 100%; }
.glam-header__nav .is-menu-open .wp-block-navigation-item__content {
  width: 100%;
  padding: 17px 0;
  border-bottom: 1px solid #e4e2dd;
  font-size: 22px;
  font-family: "Playfair Display", Georgia, serif;
}
.glam-header__nav .wp-block-navigation__responsive-container-close {
  border-radius: 50%;
  padding: 9px;
  background: #edf5f1;
}
/* Keep the existing footer's content; only constrain its inherited layout. */
.glam-legacy-footer { margin-top: 0; border-top: 1px solid #e4e2dd; background: #f7f4ef; }
.glam-legacy-footer > .wp-block-group { max-width: 1280px; margin-inline: auto !important; }
.glam-legacy-footer .wp-block-navigation a { white-space: normal; }
.glam-shop ul.products li.product .woocommerce-loop-product__title { font-family: "Playfair Display", Georgia, serif; }
.glam-shop .woocommerce-ordering select { border-radius: 8px; }

@media (max-width: 1100px) {
  .glam-header__inner { min-height: 102px; width: calc(100% - 48px); gap: 18px !important; }
  .glam-brand { flex: 1 1 auto; }
  .glam-header__nav { order: 3; flex: 0 0 auto; }
  .glam-header__booking { order: 2; }
  .glam-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
  .glam-header__nav .wp-block-navigation__responsive-container-open { display: flex !important; }
}
@media (min-width: 1101px) {
  .glam-header__nav .wp-block-navigation__responsive-container-open { display: none !important; }
  .glam-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: block !important; }
}
@media (max-width: 620px) {
  .glam-header__inner { min-height: 96px; padding-block: 12px; width: calc(100% - 32px); gap: 12px !important; }
  .glam-brand__text { display: none; }
  .glam-brand__logo { flex-basis: 68px; }
  .glam-brand__logo img { width: 68px !important; height: 68px !important; }
  .glam-booking-button .wp-block-button__link { padding: 13px 16px; font-size: 12px; }
  .glam-booking-button span { margin-left: 8px; }
  .glam-header__nav .wp-block-navigation__responsive-container-open { min-width: 42px; min-height: 42px; }
  .glam-main { padding-inline: 20px; }
}
@media (max-width: 360px) {
  .glam-header__inner { gap: 8px !important; }
  .glam-brand__logo { flex-basis: 58px; }
  .glam-brand__logo img { width: 58px !important; height: 58px !important; }
  .glam-booking-button .wp-block-button__link { padding-inline: 12px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}