/*-----------------*/
/*--- F O N T S ---*/
/*-----------------*/

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*-------------------------------------------*/
/*--- S I T E W I D E   C O N S T A N T S ---*/
/*-------------------------------------------*/

:root {
    /*--- standard colours ---*/
    --black: 0, 0, 0;
    --grey-dark: 16, 16, 16;
    --grey-875: 32, 32, 32;
    --grey-750: 64, 64, 64;
    --grey-625: 96, 96, 96;
    --grey-500: 128, 128, 128;
    --grey-375: 160, 160, 160;
    --grey-250: 192, 192, 192;
    --grey-125: 224, 224, 224;
    --grey-light: 239, 239, 239;
    --white: 255, 255, 255;

    /*--- design specific ---*/
    --blue-dark: 45, 61, 112;
    --blue-light: 0, 150, 211;
    --green: 197, 192, 0;
    --red: 223, 19, 28;
    --orange: 237, 103, 45;

    /*--- font sizes ---*/
    --l: 36rem;
    --m: 20rem;
    --s: 16rem;
    --xs: 14rem;
}


/*-------------------*/
/*--- G L O B A L ---*/
/*-------------------*/

* {
    margin: 0;
    padding: 0;
    line-height: 1;
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
    background-color: rgb(var(--blue-dark));
    scroll-behavior: smooth;
}

body {
    display: flex;
    max-width: 1920px;
    min-height: 100%;
    margin: 0 auto;
    flex-direction: column;
    font-family: 'Poppins', sans-serif;
    font-size: var(--s);
    font-weight: 300;
    color: rgb(var(--grey-750));
    background-color: rgb(var(--white));
}

iframe{ max-width: 100%; }

/*--- PAGE SPECIFIC : ERROR ---*/

#error { display: block; }

main { flex: 1; }


/*---------------------*/
/*--- H E L P E R S ---*/
/*---------------------*/

.sr-only {
    position: absolute;
    left: -10000px;
}

.hidden-onload { display: none !important; }


/*-----------------------*/
/*--- D E F A U L T S ---*/
/*-----------------------*/

a {
    color: rgb(var(--grey-875));
    text-decoration: none;
}

strong { font-weight: 600; }


/*---------------------------------------*/
/*--- T E X T   F O R A M A T T I N G ---*/
/*---------------------------------------*/

.text h1, .text .h1 {
    display: block;
    max-width: 960rem;
    margin-top: 0;
    font-family: 'Lora', sans-serif;
    font-size: var(--l);
    font-weight: 600;
    line-height: 1.2;
    color: rgb(var(--blue-dark));
}

.text h1 span { opacity: 0.33; }

.text h2, .text h3, .text dt {
    max-width: 960rem;
    margin-top: 1em;
    font-size: var(--m);
    font-weight: 400;
    line-height: 1.35;
    color: rgb(var(--orange));
}

.text h3 {
    font-size: var(--s);
    font-weight: 600;
    color: rgb(var(--blue-dark));
}

/*--- increase gap ---*/
.text p + h2, .text p + h3,
.text ul + h2, .text ul + h3,
.text table + h2, .text table + h3,
.text dd + dt {
    margin-top: 1.5em;
}

/*--- reduce gap ---*/
.text h2 + p, .text h3 + p,
.text dd > p {
    margin-top: 0.5em;
}

.text p {
    max-width: 960rem;
    line-height: 1.5;
    margin-top: 1em;
}

.text .small { font-size: 0.75em; }

.text ul {
    max-width: 960rem;
    margin-top: 1em;
    list-style-position: inside;
}

.text ul li {
    margin: 1em 0;
    line-height: 1.5;
}

.text ul li ul {
    margin: 1em 0 1em 2em;
}

.text strong {
    font-weight: 600;
    line-height: inherit;
}

.text a:not(.button) {
    display: inline-block;
    line-height: inherit;
    font-weight: 400;
    color: rgb(var(--blue-dark));
    text-decoration: underline;
    white-space: pre;
}

.text a:hover {
    opacity: 0.85;
}

.text p strong,
.text table strong {
    color: rgb(var(--blue-dark));
}

.text table {
    max-width: 960rem;
    margin-top: 1em;
    text-align: left;
}

.text table tr th {
    font-weight: 500;
    color: rgb(var(--orange));
}

.text table tr th,
.text table tr td {
    padding: 10rem 25rem 10rem 10rem;
    line-height: 1.5;
    vertical-align: top;
    border-bottom: 1px solid rgba(var(--blue-dark), 0.25);
}

.text table tr:nth-child(even) th,
.text table tr:nth-child(even) td {
    background-color: rgba(var(--blue-dark), 0.05);
}

.text hr {
    margin: 45rem -45rem;
    border: none;
    border-top: 1px solid rgb(var(--blue-dark));
}


/*---------------------*/
/*--- B U T T O N S ---*/
/*---------------------*/

button {
    appearance: none;
    border: none
}

.button {
    position: relative;
    display: inline-flex;
    min-height: 45rem;
    min-width: 180rem;
    padding: 5rem 15rem;
    align-items: center;
    justify-content: center;
    font-size: var(--s);
    font-weight: 400;
    color: rgb(var(--blue-dark));
    line-height: 1;
    text-decoration: none !important;
    border: 1px solid rgb(var(--blue-dark));
    border-radius: 4rem;
    cursor: pointer;
    transition: all ease-in-out .15s;
}

.button:hover { text-decoration: none; }

.button.-v2 {
    color: rgb(var(--white));
    background-color: rgb(var(--orange));
    border-color: rgb(var(--orange));
}

.button.-v3 {
    color: rgb(var(--white));
    background-color: rgb(var(--blue-dark));
    border-color: rgb(var(--blue-dark));
}

.button:hover,
.button.selected {
    color: rgb(var(--white));
    background-color: rgb(var(--blue-dark));
}

.button.-v2:hover, .button.-v3:hover {
    color: rgb(var(--blue-dark));
    background-color: rgb(var(--white));
    border: 1px solid rgb(var(--blue-dark));
}


/*-------------------------*/
/*--- R E A D   M O R E ---*/
/*-------------------------*/

div.read-more {
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

div.read-more.-loaded {
    position: relative;
}

div.read-more.-is-busy + button.read-more {
    opacity: 0.25;
    transition: unset;
}

div.read-more.-selected {
    opacity: 1;
}

button.read-more {
    margin-top: 1em;
    padding: 5rem 10rem;
    min-width: 0;
    min-height: 0;
    font-size: var(--xs);
    background-color: rgb(var(--white));
    border-radius: 0;
}


/*-------------------------*/
/*--- C A R O U R S E L ---*/
/*-------------------------*/

.carousel-slide {
    width: 100%;
}

.carousel-slide img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/*------------------------------*/
/*--- P I C T U R E    B O X ---*/
/*------------------------------*/

.picture-box {
    position: relative;
    aspect-ratio: 3/2;
    background-color: rgb(var(--white));
    border-radius: 15rem;
    overflow: hidden;
}

.picture-box::before {
    position: absolute;
    top: 20%;
    right: 20%;
    bottom: 20%;
    left: 20%;
    content: "";
    background: url('/images/young-and-gilling-logo.png') center / contain no-repeat;
    opacity: 0.25;
}

.picture-box img {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    justify-self: center;
    transition: all ease-in-out .15s;
}


/*---------------*/
/*--- I C O N ---*/
/*---------------*/

.icon {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    content: "";
    font-family: 'Material Symbols Outlined';
    font-size: inherit;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}


/*-------------*/
/*--- N A V ---*/
/*-------------*/

#nav {
    width: 100%;
    padding: 10rem;
}

#nav ul {
    display: flex;
    width: 100%;
    max-width: 1440rem;
    margin: 0 auto;
    padding: 0 45rem;
    align-items: center;
    gap: 15rem;
    list-style: none;
}

#nav ul li.logo {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
}

#nav img {
    max-width: 195rem;
}


/*-------------------*/
/*--- H E A D E R ---*/
/*-------------------*/

#header {
    position: relative;
}

#header .carousel-slide {
    aspect-ratio: 3;
}

#header nav {
    position: absolute;
    bottom: 0;
    width: 100%;
    max-width: 1440rem;
    padding: 0 45rem;
    justify-self: center;
}

#header nav ul {
    display: flex;
    gap: 7.5rem;
    justify-content: center;
    border-top-left-radius: 4rem;
    border-top-right-radius: 4rem;
    list-style: none;
    overflow: hidden;
}

#header nav ul li {
    flex-basis: 20%;
}

#header nav ul li a {
    display: flex;
    height: 90rem;
    align-items: center;
    justify-content: center;
    font-family: 'Lora', sans-serif;
    font-size: 24rem;
    color: rgb(var(--blue-dark));
    line-height: 1.1;
    text-align: center;
    background-color: rgb(var(--white));
    border-bottom: 5rem solid;
    transition: 0.15s ease-in-out;
}

#header nav ul li:first-child a { border-color: rgb(var(--red)); }

#header nav ul li:nth-child(2) a { border-color: rgb(var(--orange)); }

#header nav ul li:nth-child(3) a { border-color: rgb(var(--blue-dark)); }

#header nav ul li:nth-child(4) a { border-color: rgb(var(--blue-light)); }

#header nav ul li:last-child a { border-color: rgb(var(--green)); }

#header nav ul li a:hover,
#header nav ul li a.selected {
    color: rgb(var(--white));
    background-color: rgb(var(--blue-dark));
}


/*-------------------------------------*/
/*--- P R O P E R T Y   S E A R C H ---*/
/*-------------------------------------*/

#property-search {
    display: flex;
    width: 100%;
    min-height: 75rem;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    color: rgb(var(--white));
    background-color: rgb(var(--blue-dark));
}

#property-search ul {
    display: flex;
    gap: 45rem;
    align-items: center;
    list-style: none;
}

#property-search ul li {
    position: relative;
}

#property-search li::before,
#property-search li::after {
    position: absolute;
    top: 50%;
    right: 0;
    color: rgb(var(--white));
    font-family: 'Material Symbols Outlined';
    font-size: var(--m);
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
    content: "arrow_drop_down";
    transform: translateY(-50%);
}

#property-search li::before {
    right: unset;
    left: 0;
    color: rgb(var(--orange));
}

#property-search li.usage::before { content: "home_work"; }

#property-search li.market::before { content: "sell"; }

#property-search li.prices::before { content: "currency_pound"; }

#property-search li.bedrooms::before { content: "bed"; }

#property-search li:last-child::before,
#property-search li:last-child::after {
    content: unset;
}

#property-search select {
    position: relative;
    appearance: unset;
    -webkit-appearance: unset;
    padding: 10rem 30rem;
    font-size: var(--s);
    color: rgb(var(--white));
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgb(var(--white));
}

#property-search button {
    padding: 10rem 25rem;
    text-transform: uppercase;
    color: rgb(var(--white));
    background-color: rgb(var(--orange));
    border-radius: 100rem;
    cursor: pointer;
    transition: all ease-in-out .15s;
}

#property-search button:hover {
    color: rgb(var(--orange));
    background-color: rgb(var(--white));
}

/*---------------*/
/*--- M A I N ---*/
/*---------------*/

main {
    width: 100%;
    max-width: 1440rem;
    margin: 0 auto;
    padding: 75rem;
}

main .two-column {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 90rem;
}

main .two-column > * {
    max-width: unset;
    flex: 1;
}

main .two-column > h1 {
    flex-basis: 100%;
}

main .two-column > h2 {
    flex-basis: 100%;
    padding-right: calc(50% + 45rem);
}


/*--- PAGE SPECIFIC : HOME ---*/
#home main > div {
    max-width: 980rem;
}

main .services {
    display: flex;
    max-width: 800rem;
    margin-top: 1.5em;
    white-space: nowrap;
    flex-wrap: wrap;
    gap: 15rem;
    list-style: none;
}

main .services li { margin: 0; }

/*--- PAGE SPECIFIC : ERROR ---*/
#error main {
    max-width: 800rem;
    margin-top: 30rem;
    padding: 30rem;
    text-align: center;
    border: 1px solid rgb(var(--blue-dark));
    box-shadow: 10rem 10rem rgba(var(--blue-dark), 0.1);
}


/*-------------------------------*/
/*--- L I S T I N G   L I S T ---*/
/*-------------------------------*/

#listing-list #results {
    max-width: unset;
    list-style: none;
}

#listing-list .h1 { margin: 45rem 0 30rem; }

#listing-list .h1 + p { margin-top: -15rem; }

#listing-list #results li {
    margin: 0;
    padding: 45rem 0;
}

#listing-list #results li:nth-child(odd) {
    position: relative;
    background-color: rgba(var(--orange), 0.05);
}

#listing-list #results li:nth-child(odd)::before,
#listing-list #results li:nth-child(odd)::after {
    position: absolute;
    top: 0;
    left: calc(((1920px - 100%) / 2) * -1);
    width: calc((1920px - 100%) / 2);
    bottom: 0;
    content: "";
    background-color: rgba(var(--orange), 0.05);
}

#listing-list #results li:nth-child(odd)::after {
    left: unset;
    right: calc(((1920px - 100%) / 2) * -1);
}

#listing-list #results .property a {
    display: flex;
    gap: 60rem;
    text-decoration: none;
    white-space: unset;
}

#listing-list #results .property .picture-box { flex: 0 0 35%; }

#listing-list #results .property h2 { margin-top: 0; }

#listing-list #results .property h3 { margin-top: 0.5em; }

#listing-list #results .property span {
    margin-top: 1em;
    min-width: unset;
    min-height: unset;
    padding: 5rem 10rem;
    font-size: var(--xs);
    color: rgb(var(--white));
    background-color: rgb(var(--blue-dark));
    border-radius: unset;
}

#listing-list #results .property a:hover {
    opacity: unset;
}

#listing-list #results .property a:hover span {;
    background-color: rgb(var(--orange));
    border-color: rgb(var(--orange));
}

#listing-list #results .property a:hover img {
    width: 110%;
    filter: brightness(1.1);
}


/*-------------------------------------*/
/*--- L I S T I N G   D E T A I L S ---*/
/*-------------------------------------*/

#listing-details main {
    display: flex;
    gap: 60rem;
}

#listing-details .photos {
    flex: 0 0 35%;
}

#listing-details .photos ul {
    list-style: none;
}

#listing-details .photos .listing-photos-nav {
    margin-top: 15rem;
}

#listing-details .photos .listing-photos-nav .carousel-slide {
    margin: 0 7.5rem;
    width: calc((100% - 45rem) / 3);
}

#listing-details .photos .carousel-slide {
    aspect-ratio: 3/2;
}

#listing-details .photos .carousel-slide img {
    border-radius: 15rem;
}

#listing-details .downloads {
    margin: 30rem 0;
    list-style: none;
}

#listing-details .downloads li a {
    position: relative;
    padding-left: 35rem;
}

#listing-details .downloads li a::before {
    position: absolute;
    top: 50%;
    left: 0;
    color: rgb(var(--orange));
    font-family: 'Material Symbols Outlined';
    font-size: 26rem;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
    content: "download";
    transform: translateY(-50%);
}

#listing-details .downloads li a.floorplan::before {
    content: "branding_watermark";
}

#listing-details .downloads li a.epc::before {
    content: "bolt";
}

#listing-details .downloads li a.location::before {
    content: "pin_drop";
}


/*-------------------*/
/*--- F O O T E R ---*/
/*-------------------*/

footer {
    color: rgb(var(--white));
    font-size: var(--xs);
    background-color: rgb(var(--blue-dark));
}

footer a {
    color: rgb(var(--white));
}

footer a:hover {
    text-decoration: underline;
}

/*--- top : coloured blocks and brand logos ---*/
footer .top {
    position: relative;
    margin: 3rem 0;
    background-color: rgb(var(--white));
}

footer .top::before,
footer .top::after {
    position: absolute;
    top: -3rem;
    right: 0;
    height: 3rem;
    left: 0;
    content: "";
    background: linear-gradient(90deg,
    rgb(var(--red)) 0% 20%,
    rgb(var(--orange)) 20% 40%,
    rgb(var(--blue-dark)) 40% 60%,
    rgb(var(--blue-light)) 60% 80%,
    rgb(var(--green)) 80% 100%
    );
}

footer .top::after {
    top: unset;
    bottom: -3rem;
}

footer .top ul {
    display: flex;
    max-width: 1440rem;
    margin: 0 auto;
    padding: 15rem 45rem;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}

footer .top ul li img {
    width: 100%;
    max-width: 150rem;
    max-height: 37.5rem;
}

/*--- middle : contact details ---*/
footer .middle {
    position: relative;
    display: flex;
    max-width: 1350rem;
    margin: 0 auto;
    padding: 30rem 45rem;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid rgb(var(--blue-light));
}

footer .middle::before,
footer .middle::after {
    position: absolute;
    left: 25%;
    width: 1px;
    background-color: rgb(var(--blue-light));
    top: 30rem;
    bottom: 30rem;
    content: "";
}

footer .middle::after {
    left: 66%;
}

footer .middle h2 {
    display: flex;
    margin-left: -45rem;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
    font-weight: 600;
    line-height: 1.4;
}

footer .middle > a {
    position: relative;
    line-height: 1.4;
}

footer .middle > a::before,
footer .middle ul::before,
footer .middle ul::after {
    position: absolute;
    top: -3.75rem;
    left: -30rem;
    content: "pin_drop";
    font-family: 'Material Symbols Outlined';
    font-size: 20rem;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

footer .middle ul {
    position: relative;
    display: flex;
    margin: 7.5rem -45rem 7.5rem 0;
    flex-direction: column;
    align-self: stretch;
    justify-content: space-between;
    list-style: none;
}

footer .middle ul::before,
footer .middle ul::after {
    content: "call";
}

footer .middle ul::after {
    top: unset;
    bottom: -3.75rem;
    content: "email";
}

/*--- bottom : legal and privacy ---*/

footer .bottom {
    display: flex;
    max-width: 1440rem;
    margin: 0 auto;
    padding: 30rem 45rem;
    justify-content: space-between;
}

footer .bottom a{
    text-decoration: underline;
}

footer .bottom div {
    display: flex;
    flex-direction: column;
    gap: 15rem;
}

footer .bottom div ul {
    display: flex;
    list-style: none;
}

footer .bottom div ul:last-child {
    font-size: 0.85em;
}

footer .bottom div ul li:not(:first-child)::before {
    padding: 0 5rem;
    content: "·";
}

footer .bottom > ul{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15rem;
    list-style: none;
}