/* ============================================================
   IKON MOBILITY — stockist locator
   ------------------------------------------------------------
   Lifted from the <style> block that sat inside stockists.html.
   It was page-specific CSS and never lived in styles.css, so it
   had to come across separately. Enqueued only on the Stockist
   locator template, by ikon_assets() in functions.php.

   Two changes from the original are marked below. Everything
   else is untouched.
   ============================================================ */

/* ---- Store locator ---- */
/* CHANGED: was margin:.25rem 0 0.
   styles.css gives every "main > section > h2 + p" a max-width of
   650px and margin:0 auto — the auto is what centres the box. The
   original shorthand here reset the left and right margins to 0
   while leaving the 650px width in place, so the box sat flush left
   even though the text inside it was centred. Restoring auto fixes
   it. */
.locator-subhead { font-size:1.15rem; font-weight:700; color:#fff; text-align:center; margin:.25rem auto 0; }
.locator-section .locator { margin-top: 1.5rem; }

/* Keep the search row centred under the heading rather than
   stretched across the full section width. */
.locator-search { justify-content: center; max-width: 650px; margin-left: auto; margin-right: auto; }
.locator-search { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.25rem; }
.locator-search input[type="search"] {
    flex:1 1 240px; min-width:0; padding:1rem 1.2rem;
    /* CHANGED: was 3rem, which is ~48px and pushed the button
       onto its own line on most phones. 1.5rem stays large and
       easy to read without breaking the layout. */
    font-size:1.5rem; line-height:1.2; font-weight:700; letter-spacing:.02em;
    background: var(--dark-card); color: var(--text);
    border:1px solid var(--border-strong); border-radius: var(--radius);
}
.locator-search input[type="search"]::placeholder { color: var(--text-muted); font-size:1rem; font-weight:400; letter-spacing:0; }
.locator-btn {
    padding:.8rem 1.25rem; border-radius: var(--radius); border:1px solid transparent;
    background: var(--primary); color:#fff; font-weight:700; font-size:.95rem;
    cursor:pointer; transition: var(--transition);
}
.locator-btn:hover { background: var(--primary-bright); }
.locator-btn:disabled { opacity:.6; cursor:wait; }
#locator-map {
    height:460px; width:100%; position:relative; z-index:0;
    border-radius: var(--radius); border:1px solid var(--border);
    box-shadow: var(--shadow-md); background: var(--dark-card);
}
.locator-results { margin-top:1.25rem; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:.75rem; max-height:460px; overflow-y:auto; padding-right:.5rem; }
/* Nicer scrollbar on the results list, without hiding it */
.locator-results::-webkit-scrollbar { width:8px; }
.locator-results::-webkit-scrollbar-track { background:transparent; }
.locator-results::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:8px; }
.locator-results::-webkit-scrollbar-thumb:hover { background:var(--primary-bright); }
.stockist {
    background: var(--grad-card); border:1px solid var(--border); border-radius: var(--radius);
    padding:1rem 1.1rem; cursor:pointer; transition: var(--transition);
}
.stockist:hover, .stockist:focus-visible { border-color: var(--primary-bright); box-shadow: var(--shadow-sm); outline:none; }
.stockist.is-active { border-color: var(--accent-bright); }
.stockist h3 { font-size:1.05rem; color:#fff; margin:0 0 .15rem; display:flex; justify-content:space-between; gap:.5rem; align-items:baseline; }
.stockist .dist { font-size:.8rem; font-weight:700; color: var(--primary-bright); white-space:nowrap; }
.stockist .addr { color: var(--text-light); font-size:.9rem; line-height:1.4; margin:.1rem 0 .5rem; }
/* CHANGED: one link per line rather than a single row.
   Phone, Website and Directions sit under each other, so every
   retailer's card reads as a short list rather than a run of
   links. It also gives each one a full-width tap target, which
   matters on a phone and for anyone with limited dexterity —
   three links side by side on a 260px card were about 70px each. */
.stockist .links { display:flex; flex-direction:column; gap:.35rem; font-size:.88rem; margin:0; }
.stockist .links a { display:inline-block; padding:.15rem 0; }
.stockist .links a { color: var(--primary-bright); font-weight:600; text-decoration:none; }
.stockist .links a:hover { color: var(--accent-bright); text-decoration:underline; }
.locator-empty { color: var(--text-light); padding:1rem; }
.leaflet-popup-content { font-family:inherit; margin:.7rem .9rem; line-height:1.5; }
.leaflet-popup-content b { color:#0a0e1a; }
.leaflet-popup-content a { color: var(--primary); font-weight:600; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (max-width:760px) {
    #locator-map { height:360px; }
    .locator-results { max-height:360px; }
}

/* Invalid postcode: a visible border, not colour alone (WCAG 1.4.1).
   The message beside it carries the actual explanation. */
.locator-search input[type="search"][aria-invalid="true"] {
    border-color: #fca5a5;
    border-width: 2px;
}

/* ------------------------------------------------------------
   Postcode box and Search button, matched
   ------------------------------------------------------------
   Both take an equal share of the row: `flex: 1 1 0` with the same
   basis means the free space is split down the middle regardless of
   how wide the row is or how long the button label is.

   Heights are matched too. The two elements had different padding
   and very different font sizes, so they were never the same height
   — a mismatch that is obvious once they sit side by side at equal
   width. Setting an explicit height on both, rather than relying on
   padding, keeps them level whatever the font size does.
   ------------------------------------------------------------ */

.locator-search input[type="search"],
.locator-search .locator-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 64px;
    padding: 0 1.2rem;
    border-radius: var(--radius);
    box-sizing: border-box;
}

/* The button's text was 0.95rem against the input's 1.5rem, which
   read as an afterthought beside it. 1.25rem sits closer without
   overpowering the postcode the visitor has just typed. */
.locator-search .locator-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* Stacked on a narrow phone: still equal, just one above the other. */
@media (max-width: 560px) {
    .locator-search input[type="search"],
    .locator-search .locator-btn {
        flex: 1 1 100%;
        width: 100%;
    }
}