/* Sea Urchin Surf House — design tokens and shadcn-style component overrides.
   Loaded after site.css so these rules win the cascade. See README.md for
   the design review this implements. */

:root{
  --su-cream:#EAE6DD;
  --su-paper:#F6F3EC;
  --su-ink:#2D2D2A;
  --su-ink-soft:#6B6559;
  --su-teal-600:#2F6360;
  --su-teal-300:#7BB5B2;
  --su-sand-400:#D3B369;
  --su-sand-800:#5A4420;
  --su-rust-600:#AA473C;
  --su-border:#DCD3C2;
  --su-radius-sm:8px;
  --su-radius-lg:12px;
  --su-shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 10px rgba(0,0,0,.05);
}

/* Fix: accent teal fails WCAG AA (1.85:1) as text directly on the cream
   background. Deepened teal passes at 5.5:1 while staying in-family. */
.list-item-content__title{
  color:var(--su-teal-600) !important;
}

/* Buttons — shadcn-style variant scale, replacing the single asymmetric
   45px/0 pill radius used everywhere on the source site. */
.sqs-button-element--primary{
  background-color:var(--su-teal-600) !important;
  border:1px solid var(--su-teal-600) !important;
  color:var(--su-paper) !important;
  border-radius:var(--su-radius-sm) !important;
  padding:12px 22px !important;
  transition:background-color .15s ease, transform .1s ease;
}
.sqs-button-element--primary:hover{
  background-color:var(--su-ink) !important;
  border-color:var(--su-ink) !important;
}
.sqs-button-element--primary:active{
  transform:scale(0.98);
}
.sqs-button-element--secondary{
  background-color:transparent !important;
  box-shadow:inset 0 0 0 1px var(--su-border) !important;
  border:none !important;
  color:var(--su-ink) !important;
  border-radius:var(--su-radius-sm) !important;
  padding:12px 22px !important;
  transition:background-color .15s ease;
}
.sqs-button-element--secondary:hover{
  background-color:var(--su-paper) !important;
}
.sqs-button-element--tertiary{
  background-color:transparent !important;
  border:none !important;
  color:var(--su-ink-soft) !important;
  border-radius:var(--su-radius-sm) !important;
  padding:12px 18px !important;
  transition:color .15s ease;
}
.sqs-button-element--tertiary:hover{
  color:var(--su-ink) !important;
}

/* Cards — group each accommodation listing (image, title, button) into one
   bordered, lifted surface instead of a bare image-then-button stack. */
li.list-item{
  background:var(--su-paper);
  border-radius:var(--su-radius-lg);
  overflow:hidden;
  box-shadow:var(--su-shadow), inset 0 0 0 1px var(--su-border);
}
.list-item-content{
  padding:16px 20px 24px;
}
.list-item-content__button-wrapper{
  margin-top:4px;
}

/* Frames — lift in-content photography (not full-bleed section backgrounds,
   which live outside .sqs-block and are left untouched). */
.sqs-block-image .image-block-outer-wrapper{
  border-radius:var(--su-radius-sm);
  overflow:hidden;
  box-shadow:var(--su-shadow), inset 0 0 0 1px var(--su-border);
}

/* Language picker — replaces Squarespace's never-populated multilingual
   dropdown with a working one linking en/es/fr/pt versions of each page. */
.language-picker{
  position:relative;
}
.language-picker .current-language{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  border:none;
  cursor:pointer;
  font:inherit;
  color:inherit;
  padding:4px 2px;
}
.lang-caret{
  font-size:10px;
}
.language-picker-content{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  background:var(--su-paper);
  border-radius:var(--su-radius-sm);
  box-shadow:var(--su-shadow), inset 0 0 0 1px var(--su-border);
  padding:6px;
  min-width:140px;
  z-index:60;
}
.language-picker-content[hidden]{
  display:none;
}
.language-picker-content a{
  display:block;
  padding:8px 10px;
  border-radius:6px;
  font-size:14px;
  color:inherit;
  text-decoration:none;
}
.language-picker-content a:hover{
  background:var(--su-cream);
}
.language-picker-content a[aria-current="true"]{
  font-weight:700;
  color:var(--su-teal-600);
}
.lang-picker-mobile-list{
  position:static;
  box-shadow:none;
  padding:0;
  min-width:0;
}
.lang-picker-mobile-list a{
  font-size:16px;
  padding:12px 0;
}