/*
Theme Name: Waterstone
Theme URI: https://waterstone.com.my
Author: Waterstone
Author URI: https://waterstone.com.my
Description: A modern single-page landing theme for Waterstone residences. Includes a sticky top menu that anchors to Gallery, Facilities and Contact Us sections, a customizable photo gallery, a facilities showcase and a built-in contact form (name required, plus phone, WhatsApp or email).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: waterstone
*/

/* ==========================================================================
   0. Custom properties
   ========================================================================== */
:root{
  --ws-navy: #0c2b3a;
  --ws-navy-light: #123c50;
  --ws-teal: #2e7d6b;
  --ws-teal-light: #3f9c85;
  --ws-sand: #c9a24a;
  --ws-off-white: #f7f5f0;
  --ws-white: #ffffff;
  --ws-grey: #6b7680;
  --ws-border: #e4e1d8;
  --ws-radius: 6px;
  --ws-shadow: 0 10px 30px rgba(12,43,58,0.12);
  --ws-container: 1180px;
  --ws-font: 'Helvetica Neue', Arial, 'Segoe UI', sans-serif;
}

/* ==========================================================================
   1. Reset / base
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--ws-font);
  color:#26333b;
  background:var(--ws-off-white);
  line-height:1.65;
  font-size:16px;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: 'Georgia', 'Times New Roman', serif; margin:0 0 .5em; color:var(--ws-navy); font-weight:400; }
.ws-container{ max-width:var(--ws-container); margin:0 auto; padding:0 24px; }
.ws-eyebrow{ text-transform:uppercase; letter-spacing:.18em; font-size:.75rem; color:var(--ws-teal); font-weight:600; margin-bottom:.75rem; display:block; }
.ws-section{ padding:96px 0; }
.ws-section-alt{ background:var(--ws-white); }
.ws-section-header{ max-width:640px; margin:0 auto 3rem; text-align:center; }
.ws-section-header h2{ font-size:2.25rem; }
.ws-section-header p{ color:var(--ws-grey); }
.ws-btn{
  display:inline-block; padding:14px 34px; border-radius:2px;
  background:var(--ws-teal); color:var(--ws-white); font-size:.85rem;
  letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--ws-teal); cursor:pointer; transition:.25s ease;
}
.ws-btn:hover{ background:transparent; color:var(--ws-teal); }
.ws-btn-outline{ background:transparent; color:var(--ws-white); border-color:var(--ws-white); }
.ws-btn-outline:hover{ background:var(--ws-white); color:var(--ws-navy); }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }

/* ==========================================================================
   2. Header / nav
   ========================================================================== */
#masthead{
  position:fixed; top:0; left:0; right:0; z-index:999;
  background:rgba(12,43,58,0.92); backdrop-filter:blur(6px);
  transition:.3s ease;
}
#masthead .ws-header-inner{ display:flex; align-items:center; justify-content:space-between; height:82px; }
.ws-logo{ color:var(--ws-white); font-family:'Georgia',serif; font-size:1.5rem; letter-spacing:.12em; }
.ws-logo span{ color:var(--ws-sand); }
#ws-primary-menu{ display:flex; gap:2.5rem; }
#ws-primary-menu a{
  color:var(--ws-white); font-size:.82rem; text-transform:uppercase;
  letter-spacing:.1em; font-weight:600; position:relative; padding:6px 0;
}
#ws-primary-menu a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--ws-sand); transition:.25s ease;
}
#ws-primary-menu a:hover::after,
#ws-primary-menu li.current-menu-item a::after{ width:100%; }
.ws-menu-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:6px;
}
.ws-menu-toggle span{ display:block; width:26px; height:2px; background:var(--ws-white); margin:5px 0; }
.ws-header-actions a.ws-btn{ padding:10px 22px; font-size:.75rem; }

@media (max-width: 860px){
  #ws-primary-menu{
    position:absolute; top:82px; left:0; right:0; background:var(--ws-navy);
    flex-direction:column; gap:0; max-height:0; overflow:hidden; transition:.3s ease;
  }
  #ws-primary-menu.is-open{ max-height:400px; }
  #ws-primary-menu li{ border-top:1px solid rgba(255,255,255,.08); }
  #ws-primary-menu a{ display:block; padding:16px 24px; }
  .ws-menu-toggle{ display:block; }
  .ws-header-actions{ display:none; }
}

/* ==========================================================================
   3. Hero
   ========================================================================== */
#home.ws-hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background:linear-gradient(180deg, rgba(12,43,58,.55), rgba(12,43,58,.75)), var(--ws-navy);
  background-size:cover; background-position:center; color:var(--ws-white);
}
.ws-hero-content{ max-width:680px; padding-top:82px; }
.ws-hero-content h1{ color:var(--ws-white); font-size:3.4rem; line-height:1.15; margin-bottom:1rem; }
.ws-hero-content p{ font-size:1.15rem; color:rgba(255,255,255,.85); margin-bottom:2.25rem; max-width:540px; }
.ws-hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.ws-scroll-cue{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.7); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.ws-scroll-cue::after{ content:""; width:1px; height:36px; background:rgba(255,255,255,.5); }

@media (max-width: 640px){
  .ws-hero-content h1{ font-size:2.2rem; }
}

/* ==========================================================================
   4. About / overview strip
   ========================================================================== */
.ws-about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.ws-about-text p{ color:var(--ws-grey); }
.ws-stat-row{ display:flex; gap:2.5rem; margin-top:2rem; flex-wrap:wrap; }
.ws-stat b{ display:block; font-family:'Georgia',serif; font-size:1.9rem; color:var(--ws-teal); }
.ws-stat span{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ws-grey); }
.ws-about-image img{ border-radius:var(--ws-radius); box-shadow:var(--ws-shadow); }
@media (max-width: 860px){
  .ws-about-grid{ grid-template-columns:1fr; gap:2rem; }
}

/* ==========================================================================
   5. Gallery
   ========================================================================== */
.ws-gallery-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
}
.ws-gallery-item{
  position:relative; overflow:hidden; border-radius:var(--ws-radius);
  aspect-ratio:4/3; background:#ddd;
}
.ws-gallery-item:nth-child(1){ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
.ws-gallery-item img{ width:100%; height:100%; object-fit:cover; transition:.4s ease; }
.ws-gallery-item:hover img{ transform:scale(1.06); }
.ws-gallery-caption{
  position:absolute; left:0; right:0; bottom:0; padding:16px;
  background:linear-gradient(0deg, rgba(12,43,58,.85), transparent);
  color:var(--ws-white); font-size:.8rem; letter-spacing:.04em;
  opacity:0; transition:.25s ease;
}
.ws-gallery-item:hover .ws-gallery-caption{ opacity:1; }

@media (max-width: 760px){
  .ws-gallery-grid{ grid-template-columns:repeat(2, 1fr); }
  .ws-gallery-item:nth-child(1){ grid-column:span 2; }
}

/* ==========================================================================
   6. Facilities
   ========================================================================== */
.ws-facilities-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; background:var(--ws-border); }
.ws-facility{
  background:var(--ws-white); padding:2.75rem 2.25rem; text-align:left;
}
.ws-facility-icon{ width:44px; height:44px; color:var(--ws-teal); margin-bottom:1.25rem; }
.ws-facility-icon svg{ width:100%; height:100%; }
.ws-facility h3{ font-size:1.15rem; margin-bottom:.5rem; }
.ws-facility p{ color:var(--ws-grey); font-size:.92rem; margin:0; }

@media (max-width: 860px){
  .ws-facilities-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px){
  .ws-facilities-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   7. Contact
   ========================================================================== */
#contact.ws-section{ background:var(--ws-navy); color:var(--ws-white); }
#contact .ws-section-header h2{ color:var(--ws-white); }
#contact .ws-section-header p{ color:rgba(255,255,255,.7); }
.ws-contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:4rem; }
.ws-contact-info-list{ margin-top:1.5rem; }
.ws-contact-info-list li{ display:flex; gap:14px; margin-bottom:1.5rem; align-items:flex-start; }
.ws-contact-info-list .ws-ic{ width:22px; height:22px; flex:none; color:var(--ws-sand); margin-top:2px; }
.ws-contact-info-list .ws-ic svg{ width:100%; height:100%; }
.ws-contact-info-list b{ display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ws-sand); margin-bottom:2px; }
.ws-contact-info-list span, .ws-contact-info-list a{ color:rgba(255,255,255,.85); font-size:.95rem; }
.ws-social{ display:flex; gap:12px; margin-top:2rem; }
.ws-social a{
  width:38px; height:38px; border:1px solid rgba(255,255,255,.3); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.ws-social a svg{ width:16px; height:16px; }
.ws-social a:hover{ background:var(--ws-sand); border-color:var(--ws-sand); }

.ws-form-wrap{ background:var(--ws-white); border-radius:var(--ws-radius); padding:2.5rem; color:#26333b; box-shadow:var(--ws-shadow); }
.ws-form-notice{ padding:14px 18px; border-radius:4px; margin-bottom:1.5rem; font-size:.9rem; }
.ws-form-notice.success{ background:#e6f4ee; color:#1c6b4f; border:1px solid #b8e0cb; }
.ws-form-notice.error{ background:#fbeaea; color:#a3312c; border:1px solid #f2c6c4; }
.ws-form-row{ margin-bottom:1.25rem; }
.ws-form-row label{ display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.4rem; color:var(--ws-navy); font-weight:600; }
.ws-form-row .req{ color:#c0392b; }
.ws-form-row input, .ws-form-row textarea{
  width:100%; padding:12px 14px; border:1px solid var(--ws-border); border-radius:4px;
  font-family:var(--ws-font); font-size:.95rem; background:#fbfaf7;
}
.ws-form-row input:focus, .ws-form-row textarea:focus{ outline:none; border-color:var(--ws-teal); background:var(--ws-white); }
.ws-form-hint{ font-size:.78rem; color:var(--ws-grey); margin:.5rem 0 0; }
.ws-form-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media (max-width: 860px){
  .ws-contact-grid{ grid-template-columns:1fr; gap:2.5rem; }
}
@media (max-width: 560px){
  .ws-form-two-col{ grid-template-columns:1fr; }
}

/* ==========================================================================
   8. Footer
   ========================================================================== */
#colophon{ background:#081e29; color:rgba(255,255,255,.6); padding:32px 0; font-size:.82rem; }
.ws-footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.ws-footer-inner a{ color:rgba(255,255,255,.6); }
.ws-footer-inner a:hover{ color:var(--ws-sand); }

/* ==========================================================================
   9. Generic page (non front-page) content
   ========================================================================== */
.ws-page-content{ padding:150px 0 100px; max-width:800px; margin:0 auto; }