/* =========================================================
   PHANGAN PROPERTY - COMPACT UI V4 UNIFIED
   Goals:
   - Bigger top logo
   - Smaller section titles: Articles & News / Gallery
   - Property + Blog tighter and more consistent
   - Same design language across the whole website
   ========================================================= */

:root{
  --pp-bg:#edf1f2;
  --pp-white:#ffffff;
  --pp-text:#0f2430;
  --pp-muted:#5d707c;
  --pp-border:#d7e1e5;
  --pp-primary:#0d3445;
  --pp-primary-2:#12485f;
  --pp-accent:#1da768;
  --pp-accent-2:#9adf59;
  --pp-radius-xs:8px;
  --pp-radius-sm:10px;
  --pp-radius-md:14px;
  --pp-radius-lg:18px;
  --pp-shadow:0 6px 18px rgba(11,35,47,.05);
  --pp-container:1240px;
}

html{font-size:13px}
body{
  background:var(--pp-bg);
  color:var(--pp-text);
  line-height:1.38;
}
.container,.wrap,.site-wrap,.main-wrap{max-width:var(--pp-container);margin-left:auto;margin-right:auto}
main{padding-top:8px !important}

/* ---------------- HEADER ---------------- */
.site-header,.header,.topbar,header.site-header{
  position:sticky;top:0;z-index:999;
  background:var(--pp-primary) !important;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
}
.site-header .container,.nav-wrap,.header-inner{
  min-height:60px !important;
  padding-top:6px !important;
  padding-bottom:6px !important;
}
.logo,.site-logo{
  display:flex;align-items:center;gap:10px !important;
  text-decoration:none;
}
.logo-icon{
  font-size:22px !important;
  line-height:1 !important;
  display:inline-flex;align-items:center;justify-content:center;
}
.logo strong,.site-logo strong{
  display:block;
  font-size:18px !important;
  line-height:1 !important;
  letter-spacing:.2px;
  color:#fff;
}
.logo small,.site-logo small{
  display:block;
  margin-top:2px;
  font-size:9px !important;
  line-height:1.1 !important;
  letter-spacing:.8px;
  color:#d8edf4;
}
.main-nav{
  display:flex;align-items:center;gap:3px !important;
}
.main-nav a{
  padding:7px 9px !important;
  font-size:11px !important;
  font-weight:700 !important;
  border-radius:8px !important;
  color:#f4f8fb !important;
  text-decoration:none !important;
}
.main-nav a.active,
.main-nav a:hover{
  color:#c4f077 !important;
  background:rgba(255,255,255,.04) !important;
}
.lang-switch{display:flex;gap:4px !important;margin-left:6px !important}
.lang-switch a{
  min-width:30px !important;
  padding:5px 7px !important;
  border-radius:999px !important;
  font-size:10px !important;
  font-weight:800 !important;
  line-height:1 !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#d8edf4 !important;
}
.lang-switch a.active,
.lang-switch a:hover{
  background:var(--pp-accent-2) !important;
  border-color:var(--pp-accent-2) !important;
  color:#153a31 !important;
}
.mobile-toggle{
  padding:6px 8px !important;
  font-size:13px !important;
  border-radius:8px !important;
}

/* ---------------- GLOBAL UNIFIED SYSTEM ---------------- */
h1,h2,h3,h4{line-height:1.1;color:var(--pp-text)}
h1{font-size:1.56rem !important}
h2{font-size:1.24rem !important}
h3{font-size:1.02rem !important}
p{margin:0 0 7px}
.section,.block,section{margin-bottom:10px !important}
.section-title,.block-title,.home-section-title{
  font-size:1.18rem !important;
  line-height:1.12 !important;
  margin-bottom:6px !important;
}
.section-subtitle,.muted,.small-note{
  font-size:11px !important;
  color:var(--pp-muted) !important;
}
.card,.box,.panel,
.property-card,.listing-card,.property-item,.post-card,.blog-card,.article-card,
.sidebar-card,.search-box,.filter-box,.contact-card,.info-card,.price-card,.similar-card{
  background:var(--pp-white) !important;
  border:1px solid var(--pp-border) !important;
  border-radius:var(--pp-radius-lg) !important;
  box-shadow:var(--pp-shadow) !important;
}
.btn,.button,a.btn{
  border-radius:10px !important;
  padding:8px 11px !important;
  font-size:12px !important;
  font-weight:700 !important;
}

/* ---------------- HOME PAGE ---------------- */
.hero,.home-hero,.featured-hero,.hero-slider{
  min-height:240px !important;
  border-radius:18px !important;
  overflow:hidden;
}
.hero .overlay,.home-hero .overlay,.hero-caption,.slide-content{
  padding:16px !important;
}
.hero h1,.home-hero h1,.slide-content h1{
  font-size:1.7rem !important;
  margin-bottom:6px !important;
}
.hero p,.home-hero p,.slide-content p{
  font-size:.9rem !important;
  margin-bottom:8px !important;
}
.featured-properties .property-item,
.property-list-item{
  padding:8px !important;
  border-radius:18px !important;
}
.featured-properties .thumb,
.property-list-item .thumb{max-width:160px !important}
.featured-properties .content,
.property-list-item .content{padding-left:8px !important;padding-right:8px !important}
.featured-properties .property-item h3,
.property-list-item h3{font-size:.98rem !important;margin-bottom:4px !important}
.property-meta,.meta-row,.facts-strip{
  gap:6px !important;
  font-size:11px !important;
  margin-bottom:5px !important;
}
.property-excerpt,.listing-excerpt{font-size:12px !important;line-height:1.42 !important}
.price,.property-price{
  font-size:1.24rem !important;
  line-height:1.02 !important;
  font-weight:800 !important;
}

/* Search box */
.search-box,.filter-box,.sidebar-search,.search-panel{
  padding:12px !important;
  border-radius:18px !important;
}
.search-box h3,.filter-box h3,.sidebar-search h3,.search-panel h3{
  font-size:1.16rem !important;
  margin-bottom:8px !important;
}
input,select,textarea,.form-control{
  min-height:36px !important;
  padding:7px 9px !important;
  border-radius:10px !important;
  font-size:12px !important;
}
label{font-size:11px !important;margin-bottom:3px !important}
textarea{min-height:84px !important}

/* Home small titles requested */
.articles-news h2,
.articles-news .section-title,
.home-articles h2,
.home-articles .section-title,
.gallery-section h2,
.gallery-section .section-title,
.koh-phangan-gallery h2,
.koh-phangan-gallery .section-title{
  font-size:1.02rem !important;
  margin-bottom:4px !important;
}
.articles-news .section-subtitle,
.gallery-section .section-subtitle{
  font-size:10px !important;
}

/* article cards on home smaller */
.articles-news .post-card,
.home-articles .post-card,
.articles-news .blog-card{
  padding:0 !important;
  overflow:hidden;
}
.articles-news .post-card .content,
.home-articles .post-card .content,
.articles-news .blog-card .content{
  padding:8px 10px 10px !important;
}
.articles-news .post-card h3,
.home-articles .post-card h3,
.articles-news .blog-card h3{
  font-size:.92rem !important;
  line-height:1.28 !important;
}
.articles-news .post-card .meta,
.home-articles .post-card .meta{
  font-size:10px !important;
  margin-bottom:4px !important;
}

/* gallery grid tighter */
.gallery-grid,.gallery-collage,.home-gallery-grid{
  gap:8px !important;
}
.gallery-grid img,.gallery-collage img,.home-gallery-grid img{
  border-radius:12px !important;
}

/* ---------------- PROPERTY PAGE ---------------- */
.property-main,.property-wrap,.single-property-wrap{
  gap:12px !important;
}
.property-hero,.property-header,.property-top,.property-main-hero{
  padding:10px !important;
  border-radius:18px !important;
}
.breadcrumb,.breadcrumbs{
  font-size:10px !important;
  margin-bottom:6px !important;
  color:var(--pp-muted) !important;
}
.property-title{
  font-size:1.42rem !important;
  margin-bottom:4px !important;
}
.property-subtitle,.property-location{
  font-size:12px !important;
  margin-bottom:6px !important;
}
.gallery-main,.property-cover img,.hero-cover img,
.property-gallery-main img{
  border-radius:14px !important;
}
.property-gallery-thumb img,.gallery-thumb img,
.property-thumbnails img{
  border-radius:10px !important;
}
.property-gallery-thumb,.gallery-thumb,.property-thumbnails .item{
  margin-top:6px !important;
}
.side-card,.sidebar-card,.price-card,.info-card,.contact-card,.similar-card{
  padding:12px !important;
  border-radius:18px !important;
}
.side-card h3,.sidebar-card h3,.similar-card h3,.price-card h3{
  font-size:1.08rem !important;
  margin-bottom:6px !important;
}
.price-card .price,.property-side-price{
  font-size:1.95rem !important;
  line-height:1 !important;
}
.details-grid,.property-details-grid{
  gap:8px !important;
}
.detail-card,.facts-card,.feature-card,.amenity-card{
  padding:9px !important;
  border-radius:12px !important;
}
.detail-card h4,.facts-card h4,.feature-card h4{
  font-size:11px !important;
  margin-bottom:3px !important;
}
.detail-card .value,.facts-card .value,.feature-card .value{
  font-size:12px !important;
}
.property-section-title,
.property-content h2,
.property-content h3{
  font-size:1.02rem !important;
  margin-bottom:6px !important;
}
.property-description,.property-content,.property-content p{
  font-size:13px !important;
  line-height:1.5 !important;
}
.similar-list,.mini-list,.similar-properties{
  gap:6px !important;
}
.similar-list .item,.mini-list .item,.similar-properties .item{
  padding:6px 0 !important;
}
.similar-list img,.mini-list img,.similar-properties img{
  width:78px !important;
  height:58px !important;
  object-fit:cover;
  border-radius:10px !important;
}
.similar-list .title,.mini-list .title,.similar-properties .title{
  font-size:.92rem !important;
  line-height:1.25 !important;
}
.similar-list .price,.mini-list .price,.similar-properties .price{
  font-size:1rem !important;
}

/* ---------------- BLOG LIST PAGE ---------------- */
.blog-header,.blog-hero{
  padding:14px !important;
  border-radius:18px !important;
}
.blog-header h1,.blog-hero h1{
  font-size:1.48rem !important;
  margin-bottom:4px !important;
}
.blog-grid,.post-grid{
  gap:10px !important;
}
.blog-card,.post-card,.article-card{
  padding:8px !important;
  border-radius:18px !important;
}
.blog-card img,.post-card img,.article-card img{
  border-radius:12px !important;
}
.blog-card h3,.post-card h3,.article-card h3{
  font-size:.96rem !important;
  margin-bottom:4px !important;
  line-height:1.28 !important;
}
.post-meta,.article-meta{
  gap:6px !important;
  font-size:10px !important;
  margin-bottom:4px !important;
}
.blog-card p,.post-card p,.article-card p{
  font-size:12px !important;
  line-height:1.42 !important;
}

/* ---------------- SINGLE POST PAGE ---------------- */
.post-layout,.single-post-layout,.article-layout{
  gap:12px !important;
}
.post-hero,.article-hero{
  padding:10px !important;
  border-radius:18px !important;
  overflow:hidden;
}
.post-hero img,.article-hero img{
  border-radius:14px !important;
}
.post-hero-title,.article-title,.single-post h1{
  font-size:1.4rem !important;
  margin:8px 0 5px !important;
  line-height:1.18 !important;
}
.post-content,.article-content{
  font-size:13px !important;
  line-height:1.58 !important;
}
.post-content h2,.article-content h2{
  font-size:1.02rem !important;
  margin:12px 0 6px !important;
}
.post-content h3,.article-content h3{
  font-size:.96rem !important;
  margin:10px 0 6px !important;
}
.post-sidebar .card,.article-sidebar .card,
.related-articles,.article-info{
  padding:12px !important;
  border-radius:18px !important;
}
.related-articles h3,.article-info h3{
  font-size:1.04rem !important;
  margin-bottom:6px !important;
}
.related-articles .item{
  padding:6px 0 !important;
}
.related-articles .item a{
  font-size:.92rem !important;
  line-height:1.25 !important;
}

/* ---------------- FOOTER ---------------- */
.site-footer,.footer{
  margin-top:14px !important;
  padding-top:18px !important;
  padding-bottom:16px !important;
}
.footer-grid{gap:12px !important}
.footer h4{font-size:.9rem !important;margin-bottom:7px !important}
.footer p,.footer a,.footer li{font-size:12px !important}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1100px){
  .main-nav a{padding:6px 7px !important;font-size:10.5px !important}
  .logo strong{font-size:16px !important}
  .price-card .price,.property-side-price{font-size:1.6rem !important}
}
@media (max-width:900px){
  html{font-size:12px}
  .site-header .container,.nav-wrap,.header-inner{
    min-height:56px !important;
    padding-top:5px !important;padding-bottom:5px !important;
  }
  .logo strong{font-size:15px !important}
  .logo small{font-size:8px !important}
  .hero,.home-hero,.featured-hero,.hero-slider{min-height:220px !important}
  .hero .overlay,.home-hero .overlay,.hero-caption,.slide-content{padding:12px !important}
  .property-title,.blog-header h1,.blog-hero h1,.post-hero-title,.article-title,.single-post h1{
    font-size:1.24rem !important;
  }
  .price-card .price,.property-side-price{font-size:1.45rem !important}
}