/* =========================================
   RESET
   ========================================= */

/*
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&Anuphan:wght@100..700&family=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&display=swap');
*/
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Anuphan:wght@100..700&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
  height:100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

dl,
dd {
  margin: 0;
}

/* =========================================
   TOKENS
   ========================================= */

:root {
  --color-page-bg: #fbf7f3;
  --color-surface: #ffffff;
  --color-soft: #f6f5f2;
  --color-map: #f2f2f2;
  --color-text: #222222;
  --color-muted: #7a7a7a;
  --color-line: #e4e1db;
  --color-border: #d8d4cd;
  --color-social: #2b7de9;

  --font-serif: 'Anuphan', 'Literata', serif;
  --font-sans: 'Anuphan', 'Literata', Arial, Helvetica, sans-serif;

  --container-width: 1080px;
  --radius-frame: 7px;
  --radius-card: 7px;
  --shadow-frame: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 26px;
}

/* =========================================
   BASE
   ========================================= */

body {
  background: var(--color-page-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: #1f1f1f;
}

:focus-visible {
  outline: 2px solid #1f1f1f;
  outline-offset: 3px;
}

/* =========================================
   OBJECTS
   ========================================= */

.o-page-shell {
  padding: 28px 20px 60px;
}

.o-site-frame {
  width: min(100%, var(--container-width));
  position:relative;
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: var(--radius-frame);
  box-shadow: var(--shadow-frame);
  padding: 26px 75px 28px;
}

.o-layout {
  display: grid;
}

.o-layout--intro {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 48px;
  align-items: start;
}

.o-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}


.n-layout {
  display: block;
}

.n-layout .wp-block-image.size-full {
  display:block;
  margin:50px 0px 60px 0px;
}

.n-layout .wp-block-image.size-large {
  display:block;
  margin:50px 0px 60px 0px;
}

/* =========================================
   UTILITIES
   ========================================= */

.u-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
}

.u-skip-link:focus {
  left: 12px;
  top: 12px;
  background: #111;
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  z-index: 1000;
}

/* =========================================
   HEADER
   ========================================= */

.c-site-header {
  margin-bottom: 30px;
  position:relative;
}

.c-site-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.c-site-header_bdr {position:absolute;left: 220px;bottom: 25px;right:0px;border-bottom:1px dashed #a9a9a95e;}

.c-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin:0px 0px 0px -26px;
}

.c-brand__logo {

}

.c-brand__text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.c-brand__title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.c-brand__subtitle {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.16em;
}

.c-main-nav {
  padding-top:20px;
}

.c-main-nav__list {
  display: flex;
  gap: 24px;
}

.c-main-nav a {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  color: #000;
}

.c-main-nav a.active {
  text-decoration:underline;
}

.c-main-nav a:hover,
.c-main-nav a:focus-visible {
  text-decoration: underline;
}

/* =========================================
   MAIN
   ========================================= */

.c-main {
  padding-top: 42px;
}

.c-intro-section {
  padding-bottom: 46px;
}

.c-property-intro {
  max-width: 500px;
}

.c-property-intro__title {
  font-size: 30px;
  line-height: 1.2;
  margin-bottom: 24px;
  font-weight:400;
}

.c-property-intro__body p {
  font-size: 18px;
  color: #555;
  margin-bottom: 25px;
}

.c-facts-card {
  background: #f8f7f4;
  border-radius: 10px;
  padding: 26px 28px;
}

.c-facts-list {
  display: grid;
  gap: 14px;
}

.c-facts-list__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  align-items: start;
}

.c-facts-list dt {
  font-size: 15px;
  color: #a0a0a0;
}

.c-facts-list dd {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  line-height: 1.45;
}

.c-facts-list__slash {
  color: #888;
  font-weight: 400;
}

.c-gallery-section {
  padding-bottom: 74px;
}

.c-gallery-item {
  overflow: hidden;
  border-radius: 3px;
  padding: 15px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.c-gallery-item img {
  width: 100%;
  aspect-ratio: 1 / 0.75;
  object-fit: contain;
}

.c-location-section {
  padding-bottom: 96px;
}

.c-section-title {
  font-size: 25px;
  margin-bottom: 34px;
  font-weight:400;
}

.c-map-box {
  width: 100%;
  border-radius: 8px;
  overflow:hidden;
}
.c-map-box iframe {
  border-radius: 8px;
  overflow:hidden;
}

.c-section-view {position:absolute;top: 3px;right: 0px;}
.c-section-view .grid .ico {line-height:38px;font-size: 22px;color: #403d34;}
.c-section-view .list .ico {line-height:38px;color: #403d34;font-size: 24px;}
.c-section-view .opt {width:38px;height:38px;float:left;margin:0px 0px 0px 6px;text-align:center;border-radius: 6px;cursor:pointer;}
.c-section-view .opt:hover {background: #f8f7f4;}
.c-section-view .opt.active {background: #f8f7f4;cursor:default;}

/* Normal content */
.n-section {
  padding-bottom: 46px;
}

.n-section.ma-t1 {
  padding-bottom: 45px;
}

.n-section h1 {
  font-size: 27px;
  line-height: 1.2;
  margin-bottom: 24px;
  font-weight:600;
}

.n-section img {width:100%;border-radius:8px;}

.n-section h2, .n-section h3 {
  font-size: 24px;
  line-height:130%;
  margin-bottom: 24px;
  font-weight:500;
}

.n-section p {
  font-size: 18px;
  color: #555;
  margin-bottom: 6px;
}

.n-section p {
  font-size: 18px;
  line-height: 170%;
  color: #555;
  margin-bottom: 6px;
}

.n-section ul,
.n-section ol {
  list-style: unset;
  padding: 0px;
  margin:25px 0px 30px 35px;
}

.n-section ul li,
.n-section ol li {
  margin:0px 0px 10px 0px;
  padding:0px 0px 0px 6px;
  font-size:18px;
}

.n-section.forbeo h2 {
  padding:20px 0px 0px 0px;
}

.n-section.forbeo a {
  text-decoration:underline;
}

.n-section article p {margin:0px 0px 26px 0px;}
.n-section article p:last-child {margin:0;}

.n-image {padding:30px 0px 80px 0px;}
.n-image.nop {padding:0px;}

.n-image {
  width:100%;
  height:260px;
  border-radius:8px;
  margin:0px 0px 0px 0px;
}
.n-image img {
  width: 100%;
  height: 100%;
  object-fit:cover;
}


.frt-focus-t1 {background: #fcf7f4;border-radius: 20px;margin: 20px -40px 60px -40px;padding: 10px 40px 0px 40px;}
.frt-focus-t1 .n-section {padding-bottom:0px;}

.avail-t1 {clear:both;margin:0px 0px 55px 0px;padding:20px 0px 0px 0px;}
.avail-t1 h2 {margin:0px 0px 10px 0px;font-size:27px;}
.avail-t1 p {color:#545D62;}
.avail-itm-t1 {display:grid;position:relative;padding: 0px 0px 55px 36px;grid-template-columns: minmax(0, 1fr) 360px;gap: 48px;align-items: start;}
.avail-itm-t1 .lft {}
.avail-itm-t1 .lft h3 {margin: 0px 0px 18px 0px;font-size:23px;}
.avail-itm-t1 .lft h3 a {text-decoration:none;}
.avail-itm-t1 .lft h3 a:hover {text-decoration:underline;}
.avail-itm-t1 .lft a {text-decoration:underline;}
.avail-itm-t1 .lft a:hover {text-decoration:none;}
.avail-itm-t1 .lft .rnd {width:12px;height:12px;position:absolute;left: 2px;top:11px;border-radius:50%;background:#0FDD00;}
.avail-itm-t1 .rgt {}
.avail-itm-t1 .rgt .img-list-t1 {display:grid;grid-template-columns:repeat(3, 1fr);gap:10px;align-items:start;}
.avail-itm-t1 .rgt .img-list-t1 .itm {width:100%;height:80px;background:url(ejendom-t1.png) no-repeat 50% 50%;background-size:cover;border-radius: 3px;}

.avail-itm-t1 .rgt .img-list-t2 {display:block;}
.avail-itm-t1 .rgt .img-list-t2 .itm {width:100%;height:234px;background:url(ejendom-t1.png) no-repeat 50% 50%;background-size:cover;border-radius:8px;}

/* =========================================
   FOOTER
   ========================================= */

.c-site-footer {
  padding-top: 20px;
  padding-bottom:20px;
  position:relative;
  z-index:10;
}

.c-site-footer__top {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1fr;
  gap:50px;
  align-items: start;
  position:relative;
}

.c-brand--footer .c-brand__logo {
  height:90px;
}

.c-brand--footer .c-brand__title {
  font-size: 26px;
}

.c-brand--footer .c-brand__subtitle {
  font-size: 10px;
}

.c-footer-heading {
  font-size: 20px;
  margin-top: 14px;
  margin-bottom: 14px;
  font-weight:400;
}

.c-hours-list {
  display: grid;
  max-width:210px;
}

.c-hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  color: #6d6d6d;
  line-height:165%;
}

.c-footer-brand {height:100%;position:relative;}

.c-footer-col {padding:70px 0px 0px 0px;}
.c-footer-col .pt1 {margin: 0;font-size: 16px;line-height: 165%;}
.c-footer-col .pt1 span {color:#585D69;}


.c-site-footer__bottom {
  position: absolute;
  left: 0px;
  bottom: 2px;
}

.c-site-footer-bdr {position:absolute;left: 210px;top:42px;right:0px;border-bottom:1px dashed #a9a9a95e;}
.c-site-footer-bg {height:350px;position:absolute;left:0px;bottom:0px;right:0px;z-index:1;border-radius:0px 0px 7px 7px;background:linear-gradient(180deg,#fff 0%, #fbf7f3 100%);}

.c-social {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.c-social__item {
  width:36px;
  height:36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-social);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.c-social__item--facebook {
  background:url(/wp-content/themes/twentysixteen/gfx/icon-facebook-t1.svg) no-repeat 50% 50%;background-size:100% auto;
}
.c-social__item--linkedin {
  background:url(/wp-content/themes/twentysixteen/gfx/icon-linkedin-t1.svg) no-repeat 50% 50%;background-size:100% auto;
}

.c-copyright {
  font-size: 16px;
  color: #4a4a4a;
}

.c-nav-toggle {
  visibility:hidden;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 900px) {
  .o-site-frame {
    padding:8px 40px 28px 40px;
  }

  .o-layout--intro {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .c-main-nav {
    padding-top: 35px;
  }

  .c-footer-brand {
    grid-area: one;
  }

  .c-footer-col--contact {
    grid-area: two;
  }

  .c-footer-col--hours {
    grid-area: three;
  }

  .c-site-footer__top {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "one one"
      "two three";
    gap: 0px;
    row-gap: 10px;
    column-gap: 40px;
  }

  .frt-focus-t1 {
    margin: 20px -20px 60px -20px;
  }

  .avail-itm-t1 {
    grid-template-columns: minmax(0, 1fr) 45%;
  }

  .propertyGrid {
    grid-template-columns: none!important;
    gap:28px!important;
    padding-right:20px!important;
  }

  .n-image {
    height: 200px!important;
  }

  .c-site-footer__bottom {position:relative;}
  .c-social {
    position: absolute;
    top: -6px;
    right: 0px;
  }

  .c-footer-col {
    padding: 15px 0px 0px 0px;
  }

  .c-brand {
    margin: 0px 0px 0px -18px;
  }

  .c-map-box iframe {
    width:100%;height:400px;
  }

}

@media (max-width: 820px) {

  .c-main {
    padding-top: 8px;
  }

  .c-site-header__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .o-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .c-map-box {
    height: 360px;
  }

  .c-main-nav {
    padding-top: 0px;
  }

  .avail-itm-t1 {display:flex;flex-flow:column-reverse;padding-left:0px;gap:28px;padding-bottom:75px;}
  .avail-itm-t1 .rgt {width:100%;}
  .avail-itm-t1 .lft .rnd {display:none;}
  .n-image {
    background: #f4eeec;
  }
  .n-image img {
    object-fit: contain!important;
  }

  .c-nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 11px 6px 0px 6px;
    width:40px;
    height:40px;
    position: absolute;
    top: 18px;
    right: 10px;
    visibility:visible;
  }

  .c-nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #222;
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
  }

  .c-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .c-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .c-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }



  .c-main-nav {
    display: block;
    width: 100%;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 55px;
    z-index: 100;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    border-radius: 8px;
    transform-origin: top right;
    transform: scale(0.92);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.15s ease;
  }

  .c-main-nav.is-open {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  .c-main-nav__list {
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-radius: 8px;
    border: 0.5px solid var(--color-line);
    margin-top: 10px;
    overflow: hidden;
    padding:10px;
  }

  .c-main-nav__list li a {
    display: block;
    padding: 14px 18px;
    border-bottom: 0.5px solid var(--color-line);
    font-size: 17px;
  }

  .c-main-nav__list li:last-child a {
    border-bottom: none;
  }

}

@media (max-width: 560px) {
  .o-page-shell {
    padding: 5px;
  }

  .o-site-frame {
    padding: 20px 20px;
  }

  .o-gallery-grid {
    grid-template-columns: 1fr;
  }

  .c-site-footer__top {
    display:block;
  }

  .frt-focus-t1 {
      margin: 20px -25px 60px;
      padding: 10px 28px 0px 28px;
      border-radius:0px;
  }

  .c-main-nav__list {
    flex-wrap: wrap;
    gap: 14px 18px;
  }

  .c-property-intro__title {
    font-size: 24px;
  }

  .c-map-box {
    height: 280px;
  }
}