/* ============================================================
   oceanparksm.com — css/searchbar.css — THE search bar, one source for
   every page's call to action (Stay, Eat & Drink, Things to Do, Beach
   Life). Sits in a full-width band under the sun band (CTA first, owner
   order 2026-10-24), before the photo.
   The bar is the standard segmented pattern: one white bar, cells
   divided by hairlines, ONE primary button at its end. Cell contents
   (calendar, list, stepper) come from js/datepicker.js + css/datepicker.css.
   Shared tokens only.
   ============================================================ */

/* the band: the sun band's navy, lightened toward the pacific blue */
.cta-band{
  position:relative;padding:12px 34px;
  background:color-mix(in srgb, var(--op-ink) 55%, var(--op-ocean));
}
.cta-band > *{max-width:1160px;margin-left:auto;margin-right:auto}

/* the bar: flex, so three or four cells both work — the ONE .ss-wide cell
   takes the room, the others fit their text, the button ends the row */
.search-bar{
  display:flex;align-items:stretch;
  background:var(--op-white);border-radius:16px;box-shadow:var(--shadow-card);
  border:1px solid color-mix(in srgb, var(--op-ink) 12%, transparent);
  /* no overflow:hidden — the popovers hang below the bar; the rounded
     corners live on the end cells instead */
}
.ss-cell{
  position:relative;flex:0 0 auto;min-width:0;
  display:flex;flex-direction:column;gap:2px;padding:10px 16px;
  border-right:1px solid color-mix(in srgb, var(--op-ink) 12%, transparent);
}
.ss-cell.ss-wide{flex:1 1 0}
/* the first CELL (hidden inputs may come before it, so not :first-child) */
.search-bar > .ss-cell:first-of-type{border-radius:15px 0 0 15px}
.ss-cell:focus-within{background:color-mix(in srgb, var(--op-ocean) 8%, var(--op-white))}
.ss-cell > span{
  font-size:.7rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--op-ocean);white-space:nowrap;
}
.ss-go{
  flex:0 0 auto;font-family:inherit;font-size:1rem;font-weight:800;cursor:pointer;
  border:0;padding:0 30px;color:var(--op-white);background:var(--op-sunset);
  border-radius:0 15px 15px 0;
}
.ss-go:hover{background:color-mix(in srgb, var(--op-sunset) 85%, var(--op-ink))}
.ss-go:disabled{opacity:.6;cursor:default}

/* the field inside a cell, the cell's second line: a button that reads
   as text (the pickers of js/datepicker.js), a text box, or a select */
.ss-field{
  font-family:inherit;font-size:1rem;font-weight:700;color:var(--op-ink);
  background:none;border:0;padding:0;text-align:left;cursor:pointer;
  width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ss-field:focus-visible{outline:2px solid var(--op-ocean);outline-offset:2px;border-radius:4px}
input.ss-field,select.ss-field{appearance:none;-webkit-appearance:none;outline:none}
input.ss-field{cursor:text}
input.ss-field::placeholder{color:var(--op-ink);opacity:1;font-weight:600}
select.ss-field{padding-right:18px}
.ss-pick::after{
  content:"▾";position:absolute;right:14px;bottom:11px;
  font-size:.8rem;color:var(--op-ink);pointer-events:none;
}

/* Designed break: under 760px tighter cells, same single row. */
@media (max-width:760px){
  .cta-band{padding:10px 16px 12px}
  .ss-cell{padding:8px 12px}
  .ss-field{font-size:.92rem}
  .ss-go{padding:0 18px}
}
/* Designed break: under 480px the wide cell takes the first row (wherever
   it sits in the bar), the other cells share the second with the button —
   the one width where a single row cannot hold them. */
@media (max-width:479px){
  .search-bar{flex-wrap:wrap}
  .search-bar:not(.ss-row) > .ss-cell.ss-wide{
    order:-1;flex:1 1 100%;border-right:0;border-radius:15px 15px 0 0;
    border-bottom:1px solid color-mix(in srgb, var(--op-ink) 12%, transparent);
  }
  .ss-cell:not(.ss-wide){flex:1 1 0}
  /* second row: its first cell takes the bottom-left corner */
  .search-bar:not(.ss-row) > .ss-cell.ss-wide:first-of-type + .ss-cell,
  .search-bar:not(.ss-row) > .ss-cell:first-of-type:not(.ss-wide){border-radius:0 0 0 15px}
  .ss-go{border-radius:0 0 15px 0;padding:12px 18px}
}

/* -- .ss-row: a bar that never wraps -------------------------------
   ONE row at every width, two lines per cell (owner, 2026-10-24): under
   480px the cells tighten instead of breaking onto a second row. */
.search-bar.ss-row{flex-wrap:nowrap}
@media (max-width:479px){
  .ss-row .ss-cell{padding:8px 10px}
  .ss-row .ss-cell.ss-wide{
    flex:1 1 0;border-bottom:0;border-radius:15px 0 0 15px;
    border-right:1px solid color-mix(in srgb, var(--op-ink) 12%, transparent);
  }
  .ss-row .ss-cell.ss-wide + .ss-cell{border-radius:0}
  .ss-row .ss-pick{flex:0 0 auto}
  .ss-row .ss-go{border-radius:0 15px 15px 0;padding:0 14px}
  .ss-pick::after{right:10px;bottom:9px}
}

/* -- the readings bar (inc/conditions-band.php) --------------------
   Same band, same bar; the cells are readings, each a link to its card
   on /now/. ONE row at every width, TWO lines per cell at most (label,
   reading) — owner, 2026-10-24. Cells share the bar by their content.
   Designed breaks: under 760px tighter cells and type; under 560px the
   reading keeps its figure only (the words stay in the cell's title). */

.cond-bar .ss-cell{flex:1 1 auto;text-decoration:none;color:var(--op-ink)}
.cond-bar .ss-cell:last-child{border-right:0;border-radius:0 15px 15px 0}
.cond-bar .ss-cell:hover{background:color-mix(in srgb, var(--op-ocean) 8%, var(--op-white))}
.cond-val{font-size:1rem;font-weight:800;color:var(--op-ink);white-space:nowrap}
.cond-val small{font-size:inherit;font-weight:600}
@media (max-width:759px){
  .cond-bar .ss-cell{padding:8px 10px}
  .cond-val{font-size:.92rem}
}
@media (max-width:559px){
  .cond-val small,.cond-word{display:none}
}
@media (max-width:399px){
  .cond-bar .ss-cell{padding:8px 7px}
  .cond-bar .ss-cell > span{letter-spacing:.03em}
}
@media (max-width:339px){.cta-band:has(.cond-bar){padding-left:8px;padding-right:8px}}

/* the wide cell keeps room for its label: a side cell (a long pick such as
   "Everything on the beach") takes at most 36 % of the bar, its value
   ellipsizing, and a long button label ("Find beach activities") may take
   a second line rather than squeeze the bar */
.search-bar .ss-cell:not(.ss-wide){max-width:36%}
.ss-go{max-width:30%;white-space:normal;line-height:1.15;text-align:center}
/* phones, one-row bars: the button shows a magnifier (its words stay in its
   label) and labels track tighter, so a long label ("Search photos of
   Santa Monica") stays whole; under 360px it ellipsizes as a last resort */
.ss-go-icon{display:none}
@media (max-width:479px){
  .ss-row .ss-cell > span{letter-spacing:.01em}
  .ss-row .ss-cell.ss-wide{padding-left:10px;padding-right:8px}
  .ss-row .ss-pick{padding-left:8px;padding-right:8px}
  .ss-row .ss-pick select.ss-field{width:calc(5.5ch + 16px);padding-right:16px}
  .ss-row .ss-go{padding:0 12px}
  .ss-row .ss-go-txt{display:none}
  .ss-row .ss-go-icon{display:block;width:20px;height:20px}
}
@media (max-width:399px){
  .ss-row .ss-cell.ss-wide > span{font-size:.64rem;letter-spacing:0}
  .ss-row .ss-cell.ss-wide{padding-left:8px;padding-right:6px}
  .ss-row .ss-go{padding:0 10px}
}
@media (max-width:359px){
  .ss-row .ss-cell.ss-wide > span{overflow:hidden;text-overflow:ellipsis}
}

/* .ss-fit: a cell that always shows its whole value and takes no more
   room than that (Things to Do's dates, owner 2026-10-25); the wide cell
   and the button absorb the squeeze — the button's words may take two
   lines under 600px, and under 480px it fills the second row beside it */
.search-bar > .ss-cell.ss-fit{flex:0 0 auto;max-width:none}
@media (max-width:599px){
  .search-bar:has(.ss-fit) .ss-go{max-width:24%}
}
@media (max-width:479px){
  .search-bar:not(.ss-row) > .ss-cell.ss-fit{flex:0 0 auto}
  .search-bar:has(.ss-fit) .ss-go{flex:1 1 0;max-width:none}
}

/* .ss-even: the cells share the bar EQUALLY (owner, 2026-10-25: "more
   evenly spaced"); a .ss-fit cell never goes below its own content. On
   phones the two-row layout above applies unchanged. */
@media (min-width:480px){
  .search-bar.ss-even > .ss-cell,
  .search-bar.ss-even > .ss-cell.ss-fit{flex:1 1 0;max-width:none}
  .search-bar.ss-even > .ss-cell.ss-fit{min-width:max-content}
}

/* a cell the page's script switches off (Eat & Drink's two modes) */
.search-bar > [hidden]{display:none}

/* -- .ss-eat: Eat & Drink — Table or Catering · event (owner,
   2026-10-29). One row from 760px. Designed break under 760px: three
   rows — What + Date, then the three choices, then the button. -- */
@media (max-width:759px){
  .search-bar.ss-eat{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
  .search-bar.ss-eat > .ss-cell{grid-column:span 2}
  .search-bar.ss-eat > .ss-cell{order:0;max-width:none;flex:none;border-right:1px solid color-mix(in srgb, var(--op-ink) 12%, transparent);
    border-bottom:1px solid color-mix(in srgb, var(--op-ink) 12%, transparent);border-radius:0}
  .search-bar.ss-eat > .ss-cell.ss-what{grid-column:span 3;border-radius:15px 0 0 0}
  .search-bar.ss-eat > .ss-cell.ss-wide{order:0;grid-column:span 3;border-right:0;border-radius:0 15px 0 0}
  .search-bar.ss-eat > .ss-cell.ss-last{border-right:0}
  .search-bar.ss-eat > .ss-go{grid-column:1 / -1;max-width:none;border-radius:0 0 15px 15px;padding:12px 18px}
}