/* ============================================================================
   Site search — the box at the top of the left menu, and the results page.

   The same markup serves the desktop sidebar and the mobile menu (sidebar.php
   renders both), so the box is styled once and only its width changes.
   ========================================================================= */

/* Visually hidden but readable by screen readers (used for the <label>). */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- shared field resets ----------
   input[type="search"] is the least consistent control across engines:
   Safari draws its own rounded box and ignores height, Chrome adds a cancel
   button, Firefox inherits a smaller font. Reset all three so the field looks
   identical everywhere and our own box is the only thing visible. */
.pmg-search-form,
.pmg-search-form * { box-sizing: border-box; }

.pmg-search-form input[type="search"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font: inherit;                 /* Firefox/Safari shrink form fonts otherwise */
    margin: 0;
    border-radius: 0;              /* Safari rounds search fields by default */
}

/* Chrome/Safari: hide the engine's own clear + magnifier decorations. */
.pmg-search-form input[type="search"]::-webkit-search-cancel-button,
.pmg-search-form input[type="search"]::-webkit-search-decoration,
.pmg-search-form input[type="search"]::-webkit-search-results-button,
.pmg-search-form input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* Firefox: kill the dotted inner focus outline on buttons. */
.pmg-search-form button::-moz-focus-inner { border: 0; padding: 0; }

/* ---------- the box in the menu ----------
   Built to the same geometry as the jurisdiction switcher it sits above, so the
   two are one set: .menu-search mirrors .jur-box, .pmg-search-form mirrors
   .jur-toggle. Change those and change these together.

   The field is a solid white pill rather than a translucent one because the
   desktop sidebar is dark but the mobile slide-in panel is white — translucent
   white vanished on mobile. */
#side-menu .menu-wrap { padding: 0; }

.menu-search {
    position: relative;
    margin: 12px 12px;
}

/* mirrors .jur-menu .menu .jur-toggle */
.pmg-search-form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(122, 77, 23, .35);
    border-radius: 6px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.pmg-search-form:focus-within {
    border-color: #cbb594;
    box-shadow: 0 0 0 3px rgba(203, 181, 148, .28);
}

.pmg-search-form__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5b6977;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.pmg-search-form__icon:hover,
.pmg-search-form__icon:focus { color: #2f4759; }

.pmg-search-form input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2f4759;
    font-size: 14px;
    line-height: 1.2;
    outline: none;
}

.pmg-search-form input[type="search"]::placeholder { color: #8a97a2; opacity: 1; }
.pmg-search-form input[type="search"]::-ms-input-placeholder { color: #8a97a2; }

@media screen and (max-width: 767px) {
    /* 16px keeps iOS Safari from zooming the viewport when the field is focused. */
    .pmg-search-form input[type="search"] { font-size: 16px; }
}

/* ---------- the results page ----------
   Same control as in the menu — icon on the left, no separate button — just
   full width and a slightly larger type size. Everything else is inherited from
   .pmg-search-form so the two can never drift apart. */
.pmg-search-form--page {
    width: 100%;
    max-width: none;
    margin: 0 0 30px;
}

.pmg-search-form--page input[type="search"] { font-size: 16px; }

.pmg-search-count { font-size: 16px; margin: 0 0 28px; }
.pmg-search-hint  { color: #666; font-size: 15px; }

/* content-base.css lays every ol/li out as flex with a 30px indent and recolours
   links, so these rules are scoped under .section-block to outrank it rather than
   reaching for !important. */
.section-block .pmg-search-results,
.section-block ol.pmg-search-results {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.section-block .pmg-search-results > li.pmg-search-result {
    display: block;
    padding: 16px 0;
    margin: 0;
    border-top: 1px solid #e4e4e4;
}

.section-block .pmg-search-results > li.pmg-search-result::before,
.section-block .pmg-search-results > li.pmg-search-result::marker { content: none; }

.section-block .pmg-search-results > li.pmg-search-result:first-child {
    border-top: 0;
}

/* Flag + title on one row. flex-start, not center: a title that wraps to two
   lines would otherwise park the flag in the gap between them — it belongs
   beside the first line. The margin optically centres it there
   (title line box 18px x 1.3 ≈ 23px, flag 18px). */
.section-block .pmg-search-result__head {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.section-block .pmg-search-result__head .flag-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    /* The Cyprus flag is almost entirely white, so on the white results page it
       would read as empty space without a rim. */
    box-shadow: 0 0 0 1px rgba(47, 71, 89, .18);
}

.section-block a.pmg-search-result__title {
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    color: #2f4759;
    text-decoration: none;
    line-height: 1.3;
}

.section-block a.pmg-search-result__title:hover {
    color: #cbb594;
    text-decoration: underline;
}

.section-block .pmg-search-result__snippet {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: #444;
}

.section-block .pmg-search-result__snippet mark {
    background: #fbeec4;
    color: inherit;
    padding: 0 1px;
}

@media screen and (max-width: 767px) {
    .section-block a.pmg-search-result__title { font-size: 17px; }
}