/**
 * Anan Search Tabs
 *
 * Folder tabs: a full width row of three tabs sitting flush on top of the
 * search card, the selected one sharing the card's white surface so the two
 * read as one sheet. The wrapper itself carries no surface; the panel below
 * is the card and holds the single elevation.
 */

.anan-st {
    position: relative;
}

.anan-st .advanced_search_shortcode {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* ------------------------------------------------------------- folder tabs */

.anan-st__nav {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
}

.anan-st__tab {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    padding: 13px 14px;
    border: 0;
    /* Square feet so the tab meets the card without a seam. */
    border-radius: 10px 10px 0 0;
    /*
     * #7a7264, not the brand #6e6659. The search bar is pinned across the first
     * three homepage sections, and the third of those - the Meet Anan band - is
     * #6e6659 exactly, so at the old value the unselected tabs were the same
     * colour as the wall behind them and simply vanished.
     *
     * Lifting the band instead was the obvious fix and is the wrong one: its
     * body copy (#EDEBE7) already sits at 4.76:1, and raising the band far
     * enough to separate a #6e6659 tab drops that to 3.2:1. The tab is the
     * element with contrast to spare - white on #7a7264 is 4.86:1 - so the tab
     * moves and the band stays where it is.
     */
    background: #7a7264;
    color: #fff;
    /*
     * The fill can only move so far before the white label drops under 4.5:1,
     * so most of the definition comes from this edge instead: it costs no text
     * contrast at all, and it works over the two photographic sections the bar
     * also crosses, where no fill colour would be reliable.
     */
    box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.55 ),
                inset 1px 0 0 rgba( 255, 255, 255, 0.38 ),
                inset -1px 0 0 rgba( 255, 255, 255, 0.38 );
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.anan-st__tab:hover,
.anan-st__tab:focus-visible {
    background: #5f584d;
    color: #fff;
}

.anan-st__tab.is-active,
.anan-st__tab.is-active:hover {
    z-index: 2;
    background: #fff;
    box-shadow: none;
    color: #6e6659;
}

/* Whichever tab is selected, the other two always include the middle one, so
   giving it a slightly lighter taupe keeps the seam between two idle tabs
   readable without introducing a third state. Kept within one step of the base
   taupe: white on #7a7264 is 4.75:1, still clear of the 4.5:1 AA floor. */
.anan-st__tab:nth-child(2):not(.is-active) {
    background: #7a7264;
}

.anan-st__tab:nth-child(2):not(.is-active):hover,
.anan-st__tab:nth-child(2):not(.is-active):focus-visible {
    background: #6b6355;
}

/* The curve where the selected tab spills out into the card. A square of the
   card's white with a quarter circle bitten out of the corner nearest the tab,
   sat just outside each side of it. Suppressed at the ends of the row, where
   there is no card surface to curve into. */
.anan-st__tab.is-active::before,
.anan-st__tab.is-active::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 10px;
    height: 10px;
    pointer-events: none;
}

.anan-st__tab.is-active::before {
    left: -10px;
    background: radial-gradient(circle at 0 0, transparent 10px, #fff 10px);
}

.anan-st__tab.is-active::after {
    right: -10px;
    background: radial-gradient(circle at 100% 0, transparent 10px, #fff 10px);
}

.anan-st__tab:first-child.is-active::before,
.anan-st__tab:last-child.is-active::after {
    display: none;
}

/* ------------------------------------------------------------------- panel */

.anan-st__panels {
    position: relative;
    z-index: 0;
    background: #fff;
    border-radius: 0 0 10px 10px;
    padding: 25px;
    box-shadow: 0 10px 27px rgba(37, 42, 44, 0.08);
}

/* The tab row sits at z-index 1-2 to make the folder seam, which also puts it
   in front of the panel's children: a dropdown menu opening upward slides
   BEHIND the tabs and loses a band of its options. While the visitor is
   interacting inside the panel, lift the whole panel above the tabs; the seam
   is only a resting-state visual and nothing about it is needed mid-click. */
.anan-st__panels:focus-within,
.anan-st__panels:has(.dropdown-menu[style*="block"]),
.anan-st__panels:has(.dropdown.open),
.anan-st__panels:has(.dropdown.show) {
    z-index: 3;
}

.anan-st__panel {
    display: none;
}

.anan-st__panel.is-active {
    display: block;
}

/* Keeps the card from collapsing while the Ask Ana panel is still empty. */
.anan-st__panel[data-pane="ana"] {
    min-height: 104px;
}

/* ------------------------------------------------------- free text search */

.anan-fts__deal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 16px;
}

.anan-fts__deal-btn {
    padding: 8px 16px;
    border: 0.8px solid #e9e8e6;
    border-radius: 10px;
    background: #e9e8e6;
    color: #6e6659;
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.anan-fts__deal-btn.is-active {
    border-color: #6e6659;
    background: #6e6659;
    color: #fff;
}

.anan-fts__row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.anan-fts__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 10px 18px;
    border: 0.8px solid #e7e7e7;
    border-radius: 10px;
    background: #fff;
    color: #252a2c;
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-size: 14px;
}

.anan-fts__input::placeholder {
    color: #5c727d;
    opacity: 1;
}

.anan-fts__input:focus {
    outline: none;
    border-color: #6e6659;
    box-shadow: 0 0 0 1px #6e6659;
}

.anan-fts__submit {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 34px;
    border: 0.8px solid #6e6659;
    border-radius: 10px;
    background: #6e6659;
    color: #fff;
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.anan-fts__submit:hover {
    opacity: 0.9;
}

.anan-fts__submit:active {
    transform: translateY(1px);
}

/* --------------------------------------------- advanced search deal tabs */

/* Out in the open the theme floats this row above the search box: the tabs are
   absolutely positioned at top:-50px and the form carries a 30px top margin to
   clear them. Inside our card there is nothing to float over, and it left the
   row sitting higher than the free text pills, so switching panels made it
   jump. Put it back in normal flow at the top of the panel instead. */

.anan-st .anan-st__panel[data-pane="advanced"] .advanced_search_shortcode {
    margin-top: 0;
}

/* The theme's own margin-top here comes off an id selector, hence the id in
   ours. Matches .anan-fts__deal, so both rows start and end on the same line. */
.anan-st .adv_search_tab .nav-tabs,
.anan-st #advanced_search_shortcode .nav-tabs {
    position: static;
    margin: 0 0 16px;
    gap: 8px;
}

/* line-height matches the free text pills; without it these buttons stand 39px
   tall against the pills' 33px and everything below the row shifts too. */
.anan-st .adv_search_tab .nav-tabs .adv_search_tab_item {
    margin: 0;
    line-height: 1.2;
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 767px) {
    .anan-st__tab {
        padding: 10px 6px;
        font-size: 10px;
        line-height: 1.35;
        letter-spacing: 0.04em;
    }

    .anan-st__panels {
        padding: 18px;
    }

    .anan-fts__row {
        flex-direction: column;
    }

    .anan-fts__submit {
        width: 100%;
    }
}

/* ==== Ask Ana pane (2026-08-17) ==== */
.anan-ask { display: flex; flex-direction: column; gap: 13px; }
.anan-ask__lead {
  margin: 0; max-width: 660px;
  font: 300 15px/1.55 Montserrat, sans-serif; color: #3c3a35;
}
.anan-ask__form { display: flex; gap: 10px; align-items: stretch; }
.anan-ask__input {
  flex: 1 1 auto; min-width: 0; resize: none; overflow: hidden;
  height: 54px; padding: 15px 18px; border-radius: 10px;
  border: 1px solid #d8d2c4; background: #fff; color: #252a2c;
  font: 400 15px/1.5 Montserrat, sans-serif;
}
.anan-ask__input::placeholder { color: #9b958a; }
.anan-ask__input:focus {
  outline: none; border-color: #958359;
  box-shadow: 0 0 0 3px rgba(149, 131, 89, .16);
}
.anan-ask__cta {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px;
  padding: 0 28px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, #958359, #b9a26e);
  color: #fff; font: 600 15.5px/1 Montserrat, sans-serif; letter-spacing: .2px;
  box-shadow: 0 4px 16px rgba(149, 131, 89, .35);
  transition: filter .15s ease, transform .15s ease;
}
.anan-ask__cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.anan-ask__cta-mark { font-size: 19px; font-weight: 600; line-height: 1; }
.anan-ask__hint { margin: 0; font: 400 12.5px/1.5 Montserrat, sans-serif; color: #8a8578; }

/* Gold spark on the Ask Ana tab itself, so the nav hints there is a person here */
.anan-st__tab--ana { position: relative; padding-right: 26px; }
.anan-st__tab--ana::after {
  content: ""; position: absolute; top: 50%; right: 11px; margin-top: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #D2C196; box-shadow: 0 0 7px rgba(210, 193, 150, .95);
}

@media (max-width: 560px) {
  .anan-ask__form { flex-direction: column; }
  .anan-ask__cta { justify-content: center; min-height: 50px; }
}

/* ==== v1.9.0: Ask Ana tab — subtitle + sweeping shine (2026-08-17) ====
   The shine lives on an inner span (inset 0, clipped to the tab's radius)
   because the button itself must NOT get overflow:hidden — the active-tab
   corner curves are pseudo-elements drawn OUTSIDE the button box. */
.anan-st__tab--ana { padding-top: 7px; padding-bottom: 7px; }
.anan-st__tab-main { position: relative; display: block; }
.anan-st__tab-sub {
  position: relative; display: block; margin-top: 2px;
  font-size: 8.5px; letter-spacing: .07em; font-weight: 500;
  color: #fff; opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.anan-st__tab-shine {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: inherit; pointer-events: none;
}
.anan-st__tab-shine::before {
  content: ""; position: absolute; top: -25%; bottom: -25%; left: 0; width: 34%;
  background: linear-gradient(105deg,
    transparent 0%, rgba(255, 255, 255, .07) 30%,
    rgba(255, 255, 255, .30) 50%,
    rgba(255, 255, 255, .07) 70%, transparent 100%);
  transform: translateX(-160%) skewX(-18deg);
  animation: anan-st-shine 4.6s ease-in-out infinite;
}
@keyframes anan-st-shine {
  0%        { transform: translateX(-160%) skewX(-18deg); }
  55%, 100% { transform: translateX(480%) skewX(-18deg); }
}
/* white-on-white would be invisible on the active tab anyway; save the paint */
.anan-st__tab.is-active .anan-st__tab-shine { display: none; }
@media (prefers-reduced-motion: reduce) { .anan-st__tab-shine { display: none; } }
@media (max-width: 560px) {
  .anan-st__tab-sub { display: none; }
  .anan-st__tab--ana { padding-top: 10px; padding-bottom: 10px; }
}


/* ==== v1.9.1: 'Introducing Ana' pill in the Ask Ana pane footer ==== */
.anan-ask__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.anan-ask__foot .anan-ask__hint { margin: 0; }
.anan-ask__meet {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 11px/1 Montserrat, sans-serif; letter-spacing: .6px;
  text-transform: uppercase; white-space: nowrap;
  color: #958359; text-decoration: none;
  border: 1px solid rgba(149, 131, 89, .45); border-radius: 999px;
  padding: 8px 14px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.anan-ask__meet svg { flex: 0 0 auto; transition: transform .2s ease; }
.anan-ask__meet:hover, .anan-ask__meet:focus-visible {
  background: linear-gradient(135deg, #958359, #b9a26e);
  color: #fff; border-color: transparent;
}
.anan-ask__meet:hover svg { transform: translateX(3px); }