/* ============================================================
   Project location card (AB#10570)

   Styles for _PartialProjectLocationDisplay.cshtml, linked per-block from the "projectlocation"
   case in Row.cshtml and _PartialProjectAdminRows.cshtml, the way Milestone.css already is. Per AGENTS.md, custom styles live in a .css
   file: no <style> blocks in views and no inline style= attributes.

   Values follow the PublicInput Frontend Public design system v2.0.0:
     - the tinted pale-blue card, #DBF1FF, is the dominant card pattern
     - 15px radius on boxes and images
     - no shadow on a card; shadows are for dropdowns and popovers only
     - Montserrat SemiBold for the heading, Libre Franklin for body
     - #0069B8 rather than brand #0395FF wherever text sits on the colour, because brand blue
       carries white at 2.8:1 and fails AA
   ============================================================ */

.plc-card {
    background: #DBF1FF;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 16px;
    position: relative;
}

/* The admin's configured title, and the card's only heading (council review F2, AD-16). The project
   name is never shown here: a blank title means no heading, so nothing sits above the map. Each
   text line carries the gap down to the map itself, so a card with no text has no empty space. */
.plc-custom-title {
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.4;
    color: #333333;
    margin: 0 0 16px;
}

.plc-custom-title[hidden],
.plc-location-text[hidden],
.plc-popup b[hidden],
.plc-fallback-text[hidden] {
    display: none;
}

/* The text description of the location (AC-6). Real text, so a screen reader never needs the map. */
.plc-location-text {
    font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: #333333;
    margin: 0 0 16px;
}

/* Under a visible title the description sits close to it; the 16px gap moves below the pair. */
.plc-custom-title:not([hidden]) + .plc-location-text {
    margin-top: -12px;
}

/* Wraps the map box and the popup it opens (AD-10). */
.plc-map-frame {
    position: relative;
}

/* The pointer cursor only promises a click when a popup is really bound to the frame. */
.plc-map-frame[data-plc-popup-bound="true"] {
    cursor: pointer;
}

.plc-map {
    position: relative;
    height: 230px;
    border-radius: 15px;
    overflow: hidden;
    background: #eef1ea;
}

/* The popup sits inside the map frame and is closed until the shape is selected. Shadowed, because
   it is a popover rather than a card. */
.plc-popup[hidden] {
    display: none;
}

.plc-popup-description {
    display: block;
    font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #333333;
    margin-top: 2px;
}

.plc-popup-description:empty {
    display: none;
}

.plc-popup {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 9px 12px;
    z-index: 4;
}

.plc-popup b {
    display: block;
    font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #333333;
}

/* A map that could not be drawn is hidden, so the card shows its text and never an empty frame
   (PRD NFR-2). Set by Scripts/Project/ProjectLocationCard.js. */
.plc-map--failed {
    display: none;
}

/* The map draws in a same-origin iframe (AD-14) that fills the map box, so the frame's CSS pixels are
   the box's pixels. */
.plc-map-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* The map did not draw in time. The fallback text covers the box; the iframe keeps its size underneath
   (hidden, not removed), so a render that arrives late can still draw and take the text away. */
.plc-map--error {
    cursor: default;
}

.plc-map--error .plc-map-iframe {
    visibility: hidden;
}

.plc-map-fallback {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13.5px;
    color: #333333;
    margin: 0;
}

/* ---- Colour control (admin, AD-10) ---- */

.plc-swatches {
    margin-bottom: 10px;
}

.plc-swatch.btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px solid #ffffff;
    /* #696868 on the white modal is 5.7:1, past the 3:1 non-text minimum; #C4CDD4 was 1.6:1. */
    box-shadow: 0 0 0 1px #696868;
}

.plc-swatch.btn.active,
.plc-swatch.btn[aria-pressed="true"] {
    box-shadow: 0 0 0 3px #333333;
}

.plc-swatch-0069b8, .plc-swatch-0069b8:hover, .plc-swatch-0069b8:focus { background: #0069B8; }
.plc-swatch-0395ff, .plc-swatch-0395ff:hover, .plc-swatch-0395ff:focus { background: #0395FF; }
.plc-swatch-333333, .plc-swatch-333333:hover, .plc-swatch-333333:focus { background: #333333; }
.plc-swatch-f6a572, .plc-swatch-f6a572:hover, .plc-swatch-f6a572:focus { background: #F6A572; }
.plc-swatch-1c6434, .plc-swatch-1c6434:hover, .plc-swatch-1c6434:focus { background: #1C6434; }
.plc-swatch-d0353c, .plc-swatch-d0353c:hover, .plc-swatch-d0353c:focus { background: #D0353C; }

.plc-colour-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.plc-colour-picker label,
.plc-colour-hex label {
    display: block;
}

.plc-colour-input {
    width: 64px;
    height: 34px;
    padding: 2px;
    border: 1px solid #C4CDD4;
    border-radius: 4px;
}

.plc-colour-hex {
    flex: 1 1 200px;
}

.plc-field-error {
    color: #D0353C;
}

/* The hex error is also a Bootstrap 3 .help-block, whose display: block beats the user-agent [hidden]
   rule, so the error showed with a valid value. Three classes/attributes outrank .help-block and
   .has-error .help-block. */
.help-block.plc-field-error[hidden],
.plc-field-error[hidden] {
    display: none;
}

/* The visible opacity percentage; the range input carries it as aria-valuetext. */
.plc-opacity-value {
    margin-left: 6px;
    font-weight: 600;
}

/* ---- Configuration modal (admin) ---- */

.plc-preview {
    position: relative;
    height: 200px;
    border-radius: 15px;
    overflow: hidden;
    background: #eef1ea;
}

.plc-preview-empty {
    font-size: 13.5px;
    color: #696868;
    margin: 0;
}

/* Bootstrap 3 styles a legend as a large rule-topped heading; this one labels a button group. */
.plc-legend {
    font-size: 14px;
    font-weight: 600;
    border: 0;
    margin-bottom: 6px;
}

/* Admin-only. A resident with no geometry set sees nothing at all, so this never reaches them. */
.plc-empty-admin {
    background: #F5F8FA;
    border: 1px dashed #C4CDD4;
    border-radius: 15px;
    padding: 24px;
    text-align: center;
}

.plc-empty-admin b {
    display: block;
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #333333;
    margin-bottom: 5px;
}

.plc-empty-admin span {
    font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: #696868;
}

/* Sidebar and narrow columns. The card must stay legible at 375px with no horizontal overflow
   (AC-20), so the map loses height rather than the text losing size. */
@media (max-width: 480px) {
    .plc-card {
        padding: 16px;
    }

    .plc-map {
        height: 180px;
    }
}