/*
Theme Name: Maison Travel
Theme URI: https://maisondecollection.com
Author: Maison de Collection
Author URI: https://maisondecollection.com
Description: Premium, Airbnb-inspired block theme for the Maison de Collection travel platform. Pairs with the Maison Travel Core booking plugin and shares its design system (Rausch accent, Inter, soft rounded surfaces).
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.1
Version: 0.2.9
License: Proprietary
Text Domain: maison-travel
Tags: block-theme, travel, e-commerce, one-column, full-site-editing
*/

/* Base tweaks layered on top of theme.json global styles. */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { transition: color .16s cubic-bezier(.4,0,.2,1); }

/* Header */
.maison-site-header { position: sticky; top: 0; z-index: 40; background: #fff; }
/* WooCommerce injects the account + mini-cart as extra flex children of the header, so the
   default space-between stranded the nav menu in the middle. Keep the logo left and group the
   nav + account + cart together on the right. !important + the double-class selector are needed
   to beat WordPress's generated block-layout rule (.wp-container-…{justify-content:space-between}). */
.wp-block-group.maison-site-header { justify-content: flex-start !important; align-items: center; column-gap: 26px;
  /* Full-width border, but keep the logo + nav centered within the content width (not stretched edge-to-edge). */
  padding-left: max(24px, calc((100% - 1280px) / 2)); padding-right: max(24px, calc((100% - 1280px) / 2)); }
/* Logo left; everything after it (account icon, language switcher) grouped on the right. */
.maison-site-header > .wp-block-site-logo { margin-right: auto !important; }
/* wpautop wraps the inline account shortcode in a <p>; neutralise it so alignment/height stay clean. */
.maison-site-header > p { margin: 0; padding: 0; display: inline-flex; align-items: center; }
/* Account button: circular initial-avatar (logged in) or person-icon (guest), Airbnb-style. */
.maison-acct { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 9999px; border: 1px solid var(--wp--preset--color--hairline, #ddd); background: #fff; color: #222;
  cursor: pointer; text-decoration: none; padding: 0; line-height: 1;
  transition: box-shadow .2s ease, border-color .2s ease; }
.maison-acct:hover { border-color: transparent; box-shadow: rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.16) 0 2px 8px; }
.maison-acct--avatar { background: var(--acct-bg, #eee); color: var(--acct-fg, #222); border-color: transparent;
  font-weight: 600; font-size: 16px; letter-spacing: 0; }
.maison-acct--guest svg { width: 20px; height: 20px; }
/* Mobile nav overlay: the navigation block ships no overlay background, so the full-screen menu
   rendered as transparent text floating over the page. Give it a solid panel with readable,
   left-aligned, full-width items. */
.maison-site-header .wp-block-navigation__responsive-container.is-menu-open { background: #fff; }
.maison-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: flex-start !important; width: 100%; padding: 12px 24px 32px; }
.maison-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: flex-start !important; gap: 12px; width: 100%; }
.maison-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a { font-size: 19px; }
/* Keep the header on one line and prevent overflow on small screens. */
@media (max-width: 600px) {
  .wp-block-group.maison-site-header { column-gap: 14px; padding-left: 16px; padding-right: 16px; }
  .maison-site-header .wp-block-site-logo img, .maison-site-header .wp-block-site-logo { max-width: 140px; }
}

/* Footer columns */
.maison-footer-col a { display: block; padding: 4px 0; color: #222; }
.maison-footer-col a:hover { text-decoration: underline; }

/* Make WooCommerce cart/checkout inherit the palette without fighting the plugin. */
.woocommerce a.button, .woocommerce button.button.alt, .wc-block-components-button {
  background: #ff385c !important; color: #fff !important; border-radius: 8px !important;
}
.woocommerce a.button:hover, .woocommerce button.button.alt:hover { background: #e00b41 !important; }

/* ---- Custom block styles (registered in functions.php) ---- */
.wp-block-button.is-style-maison-pill .wp-block-button__link { border-radius: 9999px; }
.wp-block-button.is-style-maison-outline .wp-block-button__link {
  background: transparent; color: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--ink);
}
.wp-block-button.is-style-maison-outline .wp-block-button__link:hover { background: var(--wp--preset--color--soft); }
.wp-block-image.is-style-maison-rounded img { border-radius: 14px; }
.wp-block-group.is-style-maison-card {
  background: #fff; border: 1px solid var(--wp--preset--color--hairline); border-radius: 14px; padding: 24px;
  box-shadow: rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.1) 0 4px 8px 0;
}

/* Destination card pattern */
.maison-dest-card { transition: transform .25s cubic-bezier(.4,0,.2,1); }
.maison-dest-card:hover { transform: translateY(-3px); }
.maison-dest-card img { border-radius: 14px; }

/* ---- Airbnb-style "Confirm and pay" checkout (restyle of the WooCommerce block checkout) ---- */
.maison-checkout-title { color: #222; letter-spacing: -.02em; }
/* Left column: each checkout step becomes a soft card. */
.wc-block-checkout__main .wc-block-components-checkout-step {
  border: 1px solid #ebebeb; border-radius: 16px; padding: 22px 24px; margin-bottom: 20px;
  background: #fff; box-shadow: rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.05) 0 3px 10px 0;
}
.wc-block-checkout__main .wc-block-components-checkout-step::before,
.wc-block-checkout__main .wc-block-components-checkout-step__heading-content { border: 0 !important; }
.wc-block-components-checkout-step__title { font-size: 20px !important; font-weight: 600 !important; color: #222 !important; }
/* Right column: sticky Airbnb reservation-summary card. */
.wc-block-checkout__sidebar { position: sticky; top: 96px; align-self: flex-start; }
.wc-block-checkout__sidebar > .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-order-summary,
.wc-block-checkout__sidebar > div:first-child {
  border: 1px solid #ddd; border-radius: 16px; padding: 22px 24px; background: #fff;
  box-shadow: rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.08) 0 6px 16px 0;
}
.wc-block-components-order-summary-item__image img { border-radius: 12px; }
.wc-block-components-totals-footer-item { font-size: 17px; font-weight: 600; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: #222; }
/* Place order button already inherits the Rausch style from the WC override above. */
.wc-block-components-checkout-place-order-button { border-radius: 10px !important; font-weight: 600 !important; padding: 16px !important; }

/* Language switcher as a segmented pill ([maison_lang] → "[EN][KO]"). */
.maison-site-header .maison-lang { box-sizing: border-box; height: 40px; display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--wp--preset--color--hairline, #ddd); border-radius: 9999px; padding: 0 4px; }
.maison-lang__item { font-size: 12.5px; font-weight: 600; letter-spacing: .03em; color: var(--wp--preset--color--muted, #6a6a6a);
  text-decoration: none; padding: 8px 12px; border-radius: 9999px; line-height: 1;
  transition: background .18s var(--m-ease, ease), color .18s var(--m-ease, ease); }
.maison-lang__item:hover { color: #222; }
.maison-lang__item.is-active { background: #222; color: #fff; }

/* Header currency switcher ([maison_currency] — UI only, no price conversion yet). */
.maison-cur { position: relative; display: inline-flex; align-items: center; }
.maison-cur__toggle { box-sizing: border-box; height: 40px; display: inline-flex; align-items: center; gap: 5px; background: transparent;
  border: 1px solid var(--wp--preset--color--hairline, #ddd); border-radius: 9999px; padding: 0 14px;
  font-family: var(--m-sans, inherit); font-size: 12.5px; font-weight: 600; letter-spacing: .03em; color: #222;
  cursor: pointer; line-height: 1; transition: box-shadow .18s ease, border-color .18s ease; }
.maison-cur__toggle:hover { border-color: transparent; box-shadow: rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.12) 0 2px 8px; }
.maison-cur__chev { width: 13px; height: 13px; opacity: .6; }
.maison-cur__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 210px; margin: 0;
  list-style: none; padding: 6px; background: #fff; border: 1px solid var(--wp--preset--color--hairline-soft, #ebebeb);
  border-radius: 14px; box-shadow: rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.14) 0 10px 28px -6px; }
.maison-cur__item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer;
  font-size: 14px; color: #222; transition: background .14s ease; }
.maison-cur__item:hover { background: var(--wp--preset--color--soft, #f7f7f7); }
.maison-cur__item.is-active { font-weight: 600; }
.maison-cur__item.is-active::after { content: "✓"; margin-left: auto; color: #222; }
.maison-cur__sym { width: 20px; text-align: center; color: var(--wp--preset--color--muted, #6a6a6a); }
.maison-cur__code { font-weight: 600; letter-spacing: .02em; }
.maison-cur__name { color: var(--wp--preset--color--muted, #6a6a6a); }