/* ══════════════════════════════════════════════════════════════
   SITE SEARCH — shared structure for resources/views/shared/site-search.blade.php

   Every domain renders the same markup, so the layout lives here once. Themes
   only restate colour and type through the --ss-* properties below, set on their
   own band wrapper (.ah-searchband, .fb-searchband, …). Nothing here hard-codes a
   palette, so a new site needs a variable block and no new rules.
   ══════════════════════════════════════════════════════════════ */

.site-search {
  --ss-height:      44px;
  --ss-radius:      0px;
  --ss-font:        inherit;
  --ss-field-bg:    #ffffff;
  --ss-field-border:#dcdcdc;
  --ss-text:        #1a1a18;
  --ss-muted:       #8a8a84;
  --ss-btn-bg:      #1a1a18;
  --ss-btn-fg:      #ffffff;
  --ss-btn-hover:   #444440;
  --ss-chip-bg:     #efece6;
  --ss-chip-fg:     #55534e;
  --ss-chip-hover-bg: var(--ss-btn-bg);
  --ss-chip-hover-fg: var(--ss-btn-fg);

  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  font-family: var(--ss-font);
}

.site-search-field {
  order: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--ss-height);
  padding: 0 16px;
  background: var(--ss-field-bg);
  border: 1px solid var(--ss-field-border);
  border-right: none;
  border-radius: var(--ss-radius) 0 0 var(--ss-radius);
}

.site-search-icon { display: flex; flex-shrink: 0; color: var(--ss-muted); }

.site-search-field input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ss-text);
}
.site-search-field input::placeholder { color: var(--ss-muted); opacity: 1; }
/* The browser's own clear button lands on the themed background and reads as dirt. */
.site-search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }

.site-search-btn {
  order: 2;
  flex-shrink: 0;
  height: var(--ss-height);
  padding: 0 32px;
  margin-right: 8px;
  border: none;
  cursor: pointer;
  border-radius: 0 var(--ss-radius) var(--ss-radius) 0;
  background: var(--ss-btn-bg);
  color: var(--ss-btn-fg);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.2s;
}
.site-search-btn:hover { background: var(--ss-btn-hover); }

.site-search-popular {
  order: 3;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-search-popular-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ss-muted);
}
.site-search-chip {
  /* Themes that underline links site-wide (RealityBlow) would draw a rule
     through every chip, so the pill opts out explicitly. */
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--ss-chip-bg);
  color: var(--ss-chip-fg);
  transition: background 0.15s, color 0.15s;
}
.site-search-chip:hover { background: var(--ss-chip-hover-bg); color: var(--ss-chip-hover-fg); }

/* Chips are the first thing to go — below this the field is the more useful of the
   two, and four chips were eating roughly as much width as the input itself. */
@media (max-width: 1200px) { .site-search-popular { display: none; } }
@media (max-width: 640px) {
  .site-search-btn { padding: 0 18px; letter-spacing: 0.08em; }
  .site-search-field { padding: 0 12px; }
}

/* ── per-site palettes ─────────────────────────────────────── */

/* AirHome — warm walnut / ochre */
.ah-searchband { background: var(--warm); border-bottom: 1px solid var(--border); }
.ah-searchband-inner { max-width: var(--maxw); margin: 0 auto; padding: 14px var(--hpad); }
.ah-searchband .site-search {
  --ss-font: var(--fb);
  --ss-field-border: var(--border);
  --ss-text: var(--ink);
  --ss-muted: var(--soft);
  --ss-btn-bg: var(--walnut);
  --ss-btn-hover: var(--sienna);
  --ss-chip-bg: var(--sand);
  --ss-chip-fg: var(--mid);
}

/* FitBlow — mono/uppercase, red accent */
.fb-searchband { background: var(--surface); border-bottom: var(--border); }
.fb-searchband-inner { max-width: 1200px; margin: 0 auto; padding: 13px 24px; }
.fb-searchband .site-search {
  --ss-font: var(--mono);
  --ss-radius: 2px;
  --ss-height: 42px;
  --ss-field-border: rgba(26,26,24,.14);
  --ss-text: var(--ink);
  --ss-muted: var(--ink-60);
  --ss-btn-bg: var(--ink);
  --ss-btn-hover: var(--red);
  --ss-chip-bg: #fff;
  --ss-chip-fg: var(--ink-60);
  --ss-chip-hover-bg: var(--ink);
  --ss-chip-hover-fg: #fff;
}

/* RealityBlow — navy on off-white */
.rb-searchband { background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.rb-searchband-inner { max-width: 1200px; margin: 0 auto; padding: 13px 24px; }
.rb-searchband .site-search {
  --ss-font: var(--sans);
  --ss-radius: 3px;
  --ss-height: 42px;
  --ss-field-border: var(--border);
  --ss-text: var(--ink);
  --ss-muted: var(--muted);
  --ss-btn-bg: var(--navy);
  --ss-btn-hover: var(--green);
  --ss-chip-bg: #fff;
  --ss-chip-fg: var(--soft);
  --ss-chip-hover-bg: var(--navy);
  --ss-chip-hover-fg: #fff;
}

/* TheFacturation — gold on cream, serif masthead */
.tf-searchband { background: var(--cream); border-bottom: 1px solid var(--line); }
.tf-searchband-inner { max-width: var(--max-width); margin: 0 auto; padding: 13px 24px; }
.tf-searchband .site-search {
  --ss-font: var(--font-ui);
  --ss-height: 42px;
  --ss-field-bg: var(--white);
  --ss-field-border: var(--gray-light);
  --ss-text: var(--black);
  --ss-muted: var(--gray-mid);
  --ss-btn-bg: var(--black);
  --ss-btn-hover: var(--gold);
  --ss-chip-bg: var(--white);
  --ss-chip-fg: var(--gray-dark);
  --ss-chip-hover-bg: var(--gold);
  --ss-chip-hover-fg: var(--black);
}

/* RollingRhythm — dark band, Google CSE target */
.rr-searchband { background: #141414; border-bottom: 1px solid rgba(255,255,255,.12); }
.rr-searchband-inner { max-width: 1240px; margin: 0 auto; padding: 13px 24px; }
.rr-searchband .site-search {
  --ss-radius: 2px;
  --ss-height: 42px;
  --ss-field-bg: rgba(255,255,255,.07);
  --ss-field-border: rgba(255,255,255,.16);
  --ss-text: #f5f5f2;
  --ss-muted: rgba(255,255,255,.45);
  --ss-btn-bg: #e8452c;
  --ss-btn-hover: #ff5c40;
  --ss-btn-fg: #fff;
  --ss-chip-bg: rgba(255,255,255,.09);
  --ss-chip-fg: rgba(255,255,255,.72);
  --ss-chip-hover-bg: #e8452c;
  --ss-chip-hover-fg: #fff;
}

/* Textuno — Google CSE target */
.tx-searchband { background: #f4f4f1; border-bottom: 1px solid #e2e2dc; }
.tx-searchband-inner { max-width: 1200px; margin: 0 auto; padding: 13px 24px; }
.tx-searchband .site-search {
  --ss-radius: 3px;
  --ss-height: 42px;
  --ss-field-border: #dcdcd4;
  --ss-btn-bg: #1c1c1a;
  --ss-btn-hover: #444;
}

/* Dealvisions — Tailwind theme, blue accent */
.dv-searchband { background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.dv-searchband-inner { max-width: 1280px; margin: 0 auto; padding: 13px 24px; }
.dv-searchband .site-search {
  --ss-radius: 6px;
  --ss-height: 42px;
  --ss-field-border: #cbd5e1;
  --ss-text: #0f172a;
  --ss-muted: #64748b;
  --ss-btn-bg: #2563eb;
  --ss-btn-hover: #1d4ed8;
  --ss-chip-bg: #e2e8f0;
  --ss-chip-fg: #334155;
  --ss-chip-hover-bg: #2563eb;
  --ss-chip-hover-fg: #fff;
}