/**
 * EW AI Search — header search icon + modal overlay.
 *
 * v2.0.0 — adds a magnifying-glass icon to the site header that opens
 * a centered modal with live autocomplete. Submitting navigates to the
 * deep-search page with the query in `?q=`.
 *
 * Inherits Kadence theme palette + fonts via CSS custom properties so
 * the widget looks native to enduringword.com without hardcoded colors.
 * Falls back gracefully if the theme doesn't expose those variables.
 */

/* ----- Header icon ------------------------------------------------- */

.ews-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0 0.25rem;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--global-palette3, #000d13);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.ews-icon-button:hover,
.ews-icon-button:focus-visible {
    background: var(--global-palette8, rgba(0, 0, 0, 0.05));
    color: var(--global-palette1, #029ce9);
    outline: none;
}

.ews-icon-button:focus-visible {
    box-shadow: 0 0 0 2px var(--global-palette1, #029ce9);
}

.ews-icon-button svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

/* v2.2.0: the footer-rendered icons are hidden until JS mounts them into
   the header — prevents a flash at the bottom of the page on load. */
.ews-icon-button[data-ews-mount="pending"] {
    display: none;
}

/* ----- Social-mode icon (Kadence header social row, DESKTOP) ------- */
/* v2.2.0: the icon is a filled square that matches the Kadence "Filled"
   social buttons. The square is the SVG's <rect fill="currentColor"> and
   the glass is masked out, showing the button's `background` through it
   (light) — exactly like FB/IG/YT.
   We drive the colors explicitly rather than inheriting Kadence's social
   hover: FB/IG/YT get their blue hover from a per-network brand class
   (`social-link-facebook` …) that our icon doesn't have, so the generic
   `.social-button:hover` would render dark. The `!important` defends the
   two color declarations against Kadence's equal-specificity social rules.
   Override per-site via the --ews-square-* / --ews-glass-* custom props.
   JS sizes the button to match a sibling social button (see mountDesktopIcon).

   v2.2.1: standard state inverted to match the way enduringword.com renders
   its social row — LIGHT square + DARK glass at rest — then EW blue square +
   light glass on hover. The square is the <rect fill="currentColor"> (driven
   by `color`); the glass is the button `background` showing through the mask. */
.ews-icon-button.ews-icon-as-social {
    margin: 0;
    padding: 0;
    border-radius: 3px;
    background: var(--ews-glass-rest, #404a4e) !important;  /* dark glass at rest */
    color: var(--ews-square-rest, #f7f7f7) !important;      /* light square at rest */
}

.ews-icon-button.ews-icon-as-social:hover,
.ews-icon-button.ews-icon-as-social:focus-visible {
    background: var(--ews-glass-hover, #f7f7f7) !important; /* light glass on hover */
    color: var(--ews-square-hover, #029ce9) !important;     /* EW blue square on hover */
}

.ews-icon-button.ews-icon-as-social .ews-icon-square {
    width: 100%;
    height: 100%;
    display: block;
}

/* ----- Mobile-mode icon (left of the hamburger) -------------------- */
/* v2.2.0: a plain charcoal glyph (no square) that matches the line-style
   mobile toggle, sitting just to its left. Inherits the toggle row's
   color; lights up to the brand blue on hover/focus. */
.ews-icon-button.ews-icon-mobile {
    width: auto;
    height: auto;
    margin: 0;
    padding: 5.6px 8.4px; /* match the Kadence toggle button padding */
    background: transparent;
    border-radius: 0;
    color: inherit;
}

.ews-icon-button.ews-icon-mobile:hover,
.ews-icon-button.ews-icon-mobile:focus-visible {
    background: transparent;
    color: var(--global-palette1, #029ce9);
}

.ews-icon-button.ews-icon-mobile .ews-icon-glyph {
    width: 22px;
    height: 22px;
    display: block;
}

.ews-shortcut-hint {
    display: none;
    font-family: var(--global-body-font-family, "Karla", sans-serif);
    font-size: 12px;
    line-height: 1;
    padding: 2px 5px;
    margin-left: 6px;
    border: 1px solid var(--global-palette6, #cbd5e0);
    border-radius: 4px;
    color: var(--global-palette5, #4d565a);
}

@media (min-width: 1024px) {
    .ews-icon-button .ews-shortcut-hint {
        display: inline-block;
    }
}

/* ----- Modal overlay ----------------------------------------------- */

dialog.ews-modal {
    width: min(640px, 92vw);
    max-height: 80vh;
    margin: 10vh auto auto auto;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: var(--global-palette9, #ffffff);
    color: var(--global-palette3, #000d13);
    box-shadow: 0 30px 80px -20px rgba(0, 13, 19, 0.45);
    font-family: var(--global-body-font-family, "Karla", sans-serif);
    overflow: hidden;
    /* Native dialog opens already-positioned; reset insets in case the
       theme set `top: 50%; transform: translateY(-50%)` somewhere. */
    inset: unset;
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

dialog.ews-modal::backdrop {
    background: rgba(0, 13, 19, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.ews-modal[open] {
    animation: ews-modal-in 160ms ease-out;
}

@keyframes ews-modal-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----- Search input row -------------------------------------------- */

.ews-input-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--global-palette7, #f0f1f3);
}

.ews-input-row svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--global-palette6, #718096);
}

.ews-modal-input {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 18px;
    line-height: 1.4;
    color: var(--global-palette3, #000d13);
    outline: none;
}

.ews-modal-input::placeholder {
    color: var(--global-palette6, #718096);
}

/* v2.2.2: the input-row button is now a deep-search-style SEARCH submit
   (replaces the old "esc" close button). Mirrors .ew-search-button:
   blue → EW cyan on hover, uppercase, 3px radius, soft drop-shadow. */
.ews-modal-submit {
    flex-shrink: 0;
    /* v2.2.3: fixed height + flex-centered label so the button matches the
       input field height. The theme inflates button `line-height` to ~42px,
       which made a padding-sized button render ~66px tall; an explicit height
       with centered text is immune to that. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 26px;
    box-sizing: border-box;
    background: var(--global-palette1, #029ce9);
    color: #fff;
    border: 0;
    border-radius: 3px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ews-modal-submit:hover,
.ews-modal-submit:focus-visible {
    background: #02e9c3;          /* EW cyan — matches the deep-search button */
    color: #000d13;
    box-shadow: 0 15px 25px -7px rgba(0, 0, 0, 0.1);
    outline: none;
}

/* v2.2.2: footer "Try:" hint, replacing the keyboard-shortcut legend, to
   match the deep-search hint line. */
.ews-modal-hint {
    color: var(--global-palette5, #4d565a);
}

.ews-modal-hint .ews-hint-example {
    color: var(--global-palette1, #029ce9);
    font-weight: 600;
}

/* ----- Suggestion list --------------------------------------------- */

.ews-suggest-list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    max-height: 50vh;
    overflow-y: auto;
}

.ews-suggest-list:empty { display: none; }

.ews-suggest-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.25rem;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 80ms ease;
}

.ews-suggest-item:hover,
.ews-suggest-item.ews-suggest-active {
    background: var(--global-palette8, #fafbfc);
}

.ews-suggest-item-arrow {
    color: var(--global-palette6, #718096);
    font-size: 14px;
    flex-shrink: 0;
}

.ews-suggest-active .ews-suggest-item-arrow {
    color: var(--global-palette1, #029ce9);
}

.ews-suggest-item-type {
    font-family: var(--global-heading-font-family, "Lato", sans-serif);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--global-palette6, #718096);
    margin-left: auto;
}

/* ----- Footer hint row --------------------------------------------- */

.ews-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.25rem;
    border-top: 1px solid var(--global-palette7, #f0f1f3);
    background: var(--global-palette8, #fafbfc);
    font-size: 12px;
    color: var(--global-palette5, #4d565a);
}

.ews-modal-footer kbd {
    font-family: inherit;
    font-size: 11px;
    padding: 1px 5px;
    background: var(--global-palette9, #ffffff);
    border: 1px solid var(--global-palette7, #cbd5e0);
    border-radius: 4px;
    color: var(--global-palette5, #4d565a);
    margin: 0 2px;
}

.ews-modal-footer strong {
    color: var(--global-palette1, #029ce9);
    font-weight: 600;
}

/* v2.1.6: Nomion AI credit link */
.ews-credit-link {
    color: inherit;
    text-decoration: none;
}

.ews-credit-link:hover,
.ews-credit-link:focus-visible {
    text-decoration: underline;
}

/* ----- Responsive tweaks ------------------------------------------- */

@media (max-width: 640px) {
    dialog.ews-modal {
        margin-top: 4vh;
        width: 96vw;
        border-radius: 10px;
    }
    .ews-input-row { padding: 0.9rem 1rem; }
    .ews-modal-input { font-size: 16px; }
    .ews-suggest-item { padding: 0.6rem 1rem; }
    .ews-modal-footer { padding: 0.55rem 1rem; }
}