/* =========================================================================
   Symonds & Greenaway - PropertyHive custom styling
   Consolidates the old inline <style> blocks and adds the redesigned
   listing cards, search toolbar, single-property layout and enquiry form.
   Brand vars (--oxford-blue, --buff, --dark) come from style.css.
   ========================================================================= */

/* ----------------------------------------------------------------------- */
/* Link focus: no outline on mouse click, tidy brand outline for keyboard   */
/* ----------------------------------------------------------------------- */

a:focus {
    outline: none;
}

a:focus-visible {
    outline: 2px solid var(--buff);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------------- */
/* Listing cards (search results + featured + homepage)                    */
/* ----------------------------------------------------------------------- */

.propertyhive ul.properties li.property {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6e7e8;
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow .3s ease, transform .3s ease;
}

.propertyhive ul.properties li.property:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(1, 22, 56, 0.12);
}

.propertyhive ul.properties li.property .thumbnail {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.propertyhive ul.properties li.property .thumbnail img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform .5s ease;
}

.propertyhive ul.properties li.property:hover .thumbnail img {
    transform: scale(1.05);
}

.propertyhive ul.properties li.property .details {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.1em 1.2em 1.3em;
    text-align: left;
}

.propertyhive ul.properties li.property .details h3 {
    font-weight: 400;
    font-size: 1.15em;
    line-height: 1.25;
    margin: 0 0 .35em;
}

.propertyhive ul.properties li.property .details h3 a {
    color: var(--oxford-blue);
}

.propertyhive ul.properties li.property .price {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--oxford-blue);
    line-height: 1.1;
    margin: 0 0 .5em;
}

.propertyhive ul.properties li.property .summary {
    font-weight: 300;
    color: var(--dark);
    margin-bottom: 1em;
}

/* Status badge overlay */
.sg-status-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-block;
    padding: .35em .8em;
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--oxford-blue);
    border-radius: 4px;
}

.sg-status-badge.sg-status-sold-stc,
.sg-status-badge.sg-status-sold,
.sg-status-badge.sg-status-let-agreed,
.sg-status-badge.sg-status-under-offer {
    background: var(--buff);
    color: var(--oxford-blue);
}

/* Key facts row (beds / baths / receptions) */
.sg-key-facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin: 0 0 1em;
    padding: 0;
}

.sg-key-facts .sg-fact {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-size: .9em;
    color: var(--dark);
}

.sg-key-facts .sg-fact i {
    color: var(--buff);
}

.propertyhive ul.properties li.property .actions {
    margin-top: auto;
    display: block;
}

.propertyhive ul.properties li.property .actions a,
.sg-card-cta {
    display: inline-block;
    margin-top: .4em;
    font-weight: 600;
    color: var(--oxford-blue);
}

.sg-card-cta i {
    transition: transform .25s ease;
}

.propertyhive ul.properties li.property:hover .sg-card-cta i {
    transform: translateX(4px);
}

/* Keep the homepage featured section cards consistent */
.featured-properties .columns-3 ul.properties li.property a h3,
.featured-properties .details {
    text-align: left;
}

/* ----------------------------------------------------------------------- */
/* Search results toolbar (result count + ordering)                        */
/* ----------------------------------------------------------------------- */

.sg-results-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin: 1.5em 0;
    padding-bottom: 1em;
    border-bottom: 1px solid #e6e7e8;
}

.propertyhive-result-count {
    margin: 0;
    font-weight: 600;
    color: var(--oxford-blue);
}

.propertyhive-ordering {
    margin: 0;
}

.propertyhive-ordering select {
    margin: 0;
}

/* Department segmented control (groupings) */
.sg-department-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    margin: 0 0 1.5em;
}

.sg-department-filter a {
    display: inline-block;
    padding: .55em 1.4em;
    border: 1px solid var(--oxford-blue);
    border-radius: 40px;
    font-weight: 600;
    color: var(--oxford-blue);
    transition: background .25s ease, color .25s ease;
}

.sg-department-filter a:hover {
    background: rgba(1, 22, 56, 0.06);
}

.sg-department-filter a.active {
    background: var(--oxford-blue);
    color: #fff;
}

/* No results */
.sg-no-results {
    max-width: 720px;
    margin: 2em auto 3em;
    text-align: center;
}

.sg-no-results h2 {
    color: var(--oxford-blue);
}

.sg-no-results .button,
.sg-no-results a.sg-reset {
    display: inline-block;
    margin-top: 1em;
    padding: .7em 1.6em;
    background: var(--buff);
    color: var(--oxford-blue);
    font-weight: 700;
    border-radius: 40px;
}

/* ----------------------------------------------------------------------- */
/* Archive / single hero (moved out of inline <style> blocks)              */
/* ----------------------------------------------------------------------- */

.image-header {
    margin-bottom: 2em;
}

.image-header .wrapper {
    justify-content: flex-start;
    flex-direction: column;
    width: 1440px;
    max-width: 90%;
}

.image-header .wrapper h1 {
    max-width: 760px;
    line-height: 1.05em;
}

.single-property .image-header {
    margin-bottom: 3em;
    min-height: 520px;
}

.single-property .image-header .price {
    color: var(--buff);
    font-weight: 700;
    font-size: 2em;
    margin-top: .3em;
}

.single-property .image-header .sg-status-badge {
    position: static;
    align-self: flex-start;
    width: auto;
    margin-bottom: 1em;
}

/* ----------------------------------------------------------------------- */
/* Single property layout                                                  */
/* ----------------------------------------------------------------------- */

.body-content {
    padding-bottom: 5em;
}

/* .content-area is the flex row (matches the original right-sidebar selector
   so it overrides the desktop base rule in style.css by source order). */
.single-property.right-sidebar .content-area {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2em;
}

.single-property div.property {
    flex: 1 1 auto;
    min-width: 0;
    float: none;
}

/* Key facts bar under the title */
.sg-single-key-facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    margin: 0 0 1.5em;
    padding: 1em 1.2em;
    background: #f4f4f5;
    border-radius: 12px;
}

.sg-single-key-facts li {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-weight: 600;
    color: var(--oxford-blue);
}

.sg-single-key-facts li i {
    color: var(--buff);
    font-size: 1.1em;
}

.sg-single-key-facts li span.label {
    font-weight: 300;
    color: var(--dark);
}

/* Tabbed content (replaces the old footer DOM-reordering hack) */
.sg-tabs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .25em;
    margin: 2em 0 0;
    padding: 0;
}

.sg-tabs li {
    padding: .7em 1.4em;
    background: #f4f4f5;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--dark);
    transition: background .2s ease, color .2s ease;
}

.sg-tabs li:hover {
    color: var(--oxford-blue);
}

.sg-tabs li.active {
    background: #e6e7e8;
    color: var(--oxford-blue);
}

/* Fallback (no JS): each section is its own box. */
.single-property .summary,
.single-property .property_actions,
.single-property .features,
.single-property .description {
    padding: 1.5em;
    background: #e6e7e8;
    border-radius: 0 12px 12px 12px;
    margin-bottom: 1.5em;
}

/* Tabs enabled: the wrapper is the single box; inner sections sit flush. */
.single-property .sg-tab-panel {
    padding: 1.5em;
    background: #e6e7e8;
    border-radius: 0 12px 12px 12px;
    margin-bottom: 1.5em;
}

.single-property .sg-tab-panel > .summary,
.single-property .sg-tab-panel > .property_actions,
.single-property .sg-tab-panel > .features,
.single-property .sg-tab-panel > .description {
    padding: 0;
    background: none;
    border-radius: 0;
    margin: 0 0 1.5em;
}

.single-property .sg-tab-panel > :last-child {
    margin-bottom: 0;
}

/* Readable spacing for the room-by-room full description */
.single-property .description-contents p,
.single-property .summary-contents p {
    margin: 0 0 1em;
    line-height: 1.5;
}

.single-property .description-contents p:last-child,
.single-property .summary-contents p:last-child {
    margin-bottom: 0;
}

/* Normalise content pasted from other portals (inline-styled divs/spans with
   their own fonts, colours and white backgrounds) so it blends into the panel.
   Scoped to the description only; !important is needed to beat inline styles. */
.single-property .description-contents,
.single-property .description-contents * {
    background: transparent !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    letter-spacing: normal !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
}

.single-property .description-contents img {
    height: auto !important;
}

.single-property .description-contents a {
    color: var(--oxford-blue) !important;
    text-decoration: underline;
}

/* ----------------------------------------------------------------------- */
/* Negotiator / office sidebar + native enquiry form                       */
/* ----------------------------------------------------------------------- */

.sidebar-with-contact {
    width: 420px;
    flex: 0 0 420px;
    background: #e6e7e8;
    padding: 2em;
    border-radius: 20px;
    font-size: .92em;
    position: sticky;
    top: 100px;
}

.sidebar-with-contact .logo-container img {
    width: 100%;
    max-width: 200px;
    margin-bottom: 1em;
}

.sg-negotiator {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 1em 0;
    margin-bottom: 1em;
    border-bottom: 1px solid #cfd0d2;
}

.sg-negotiator img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.sg-negotiator .sg-negotiator-name {
    font-weight: 700;
    color: var(--oxford-blue);
}

.sg-negotiator .sg-negotiator-role {
    font-size: .85em;
    color: var(--dark);
}

.sidebar-with-contact .address h3 {
    margin-bottom: .5em;
}

.sidebar-with-contact .address p {
    line-height: 1.3;
    margin-bottom: .5em;
}

.sidebar-with-contact i {
    width: 25px;
    color: var(--buff);
}

.sidebar-with-contact .address a {
    color: var(--buff);
}

.sidebar-with-contact .address a:hover {
    color: var(--oxford-blue);
}

.sidebar-with-contact .form-title {
    margin: 1em 0 .5em;
    font-weight: 700;
    line-height: 1.2;
    color: var(--oxford-blue);
}

/* Native PropertyHive enquiry form */
.property-enquiry-form .control {
    margin-bottom: .8em;
}

.property-enquiry-form label {
    display: block;
    margin-bottom: .25em;
    font-weight: 600;
    color: var(--oxford-blue);
}

.property-enquiry-form input[type="text"],
.property-enquiry-form input[type="email"],
.property-enquiry-form input[type="tel"],
.property-enquiry-form input[type="number"],
.property-enquiry-form input[type="date"],
.property-enquiry-form select,
.property-enquiry-form textarea {
    width: 100%;
    padding: .6em .7em;
    border: 1px solid #c4c5c7;
    border-radius: 8px;
    background: #fff;
    color: var(--dark);
    font-size: .95em;
}

.property-enquiry-form select option {
    color: var(--dark);
}

.property-enquiry-form textarea {
    min-height: 110px;
}

.property-enquiry-form input[type="submit"] {
    width: 100%;
    margin-top: .5em;
    padding: .8em 1.2em;
    border: none;
    border-radius: 40px;
    background: var(--buff);
    color: var(--oxford-blue);
    font-weight: 700;
    cursor: pointer;
    transition: background .25s ease;
}

.property-enquiry-form input[type="submit"]:hover {
    background: var(--oxford-blue);
    color: #fff;
}

.property-enquiry-form input[type="submit"].is-loading,
.property-enquiry-form input[type="submit"]:disabled {
    opacity: .75;
    cursor: wait;
}

.property-enquiry-form .required {
    color: #c0392b;
}

.property-enquiry-form .alert {
    padding: .8em 1em;
    margin-bottom: 1em;
    border-radius: 8px;
    font-size: .9em;
}

.property-enquiry-form .alert-success {
    background: #e3f4e7;
    color: #1e6b35;
}

.property-enquiry-form .alert-danger {
    background: #fbe6e6;
    color: #a12626;
}

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

@media (max-width: 1100px) {
    .single-property.right-sidebar .content-area {
        flex-direction: column;
    }

    .sidebar-with-contact {
        width: 100%;
        flex-basis: auto;
        position: static;
        margin-top: 2em;
    }
}

@media (max-width: 768px) {
    .propertyhive ul.properties li.property .thumbnail img {
        height: 220px;
    }

    .sg-results-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .sg-tabs li {
        padding: .6em 1em;
        font-size: .9em;
    }

    .sg-single-key-facts {
        gap: 1em;
    }
}