/* styles.css
   Responsive, mobile-first styles for Seldom Rest Properties
*/

:root{
  --bg: #fbfbfb;
  --card: #ffffff;
  --muted: #6b6b6b;
  --text: #1f2933;
  --accent: #2b7a78; /* calm teal */
  --accent-2: #f0c987; /* warm accent */
  --radius: 10px;
  --container: 1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}
.container{
  width:90%;
  max-width:var(--container);
  margin:0 auto;
}

/* Header */
.site-header{
  background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.8));
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid rgba(32,32,32,0.04);
}
.header-inner{
  display:flex;
  gap:1rem;
  align-items:center;
  padding:0.8rem 0;
}
.brand{
  font-weight:700;
  color:var(--text);
  text-decoration:none;
  font-size:1.1rem;
}
.brand-quiet{font-weight:500; color:var(--muted); font-size:0.95rem; margin-left:6px}

.primary-nav{margin-left:auto}
.primary-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:1rem}
.primary-nav a{color:var(--text); text-decoration:none; padding:0.4rem 0.6rem; border-radius:6px}
.primary-nav a:hover{background:rgba(43,122,120,0.06)}

.nav-toggle{display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; padding:8px; margin-left:auto}
.hamburger{width:22px; height:2px; background:var(--text); display:block; position:relative}
.hamburger::before, .hamburger::after{content:""; position:absolute; left:0; width:22px; height:2px; background:var(--text)}
.hamburger::before{top:-6px}
.hamburger::after{top:6px}

/* Hero */
.hero{padding:2.2rem 0 2rem}
.hero-inner{display:flex; gap:1rem; align-items:center}
.hero-copy{flex:1}
.hero h1{margin:0 0 0.6rem; font-size:1.8rem}
.tagline{margin:0 0 1rem; color:var(--muted)}
.cred{margin-top:0.8rem; color:var(--muted); font-size:0.95rem}
.hero-ctas{display:flex; gap:0.6rem; flex-wrap:wrap}

.btn{display:inline-block; padding:0.65rem 1rem; border-radius:8px; text-decoration:none; font-weight:600; font-size:0.95rem}
.btn-primary{background:var(--accent); color:white}
.btn-outline{border:1px solid rgba(32,32,32,0.08); background:transparent; color:var(--text)}

/* Hero art */
.hero-art{display:none}
.home-card{width:150px; height:110px;}
.home-card .roof{height:28px; background:linear-gradient(90deg,var(--accent-2), #e6b86b); border-radius:6px 6px 0 0}
.home-card .body{height:82px; background:linear-gradient(180deg, #fff, #fafafa); border-radius:0 0 6px 6px; box-shadow:0 6px 14px rgba(31,41,47,0.06); display:flex; align-items:center; justify-content:center}
.home-card .window{width:30px; height:24px; background:linear-gradient(180deg,#e9f5f4,#d6efec); border-radius:4px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.6)}

/* Sections */
.section{padding:2rem 0}
.about .lead{font-size:1rem; color:var(--text); margin-top:0.5rem}
.subtle{color:var(--muted)}

/* Features grid */
.features{display:grid; gap:1rem; grid-template-columns:1fr}
.feature-card{background:var(--card); padding:1rem; border-radius:12px; box-shadow:0 8px 20px rgba(31,41,47,0.04)}
.feature-card h3{margin-top:0}

/* Contact */
.contact-grid{display:block}
.contact-form-wrap{background:var(--card); padding:1rem; border-radius:12px; box-shadow:0 8px 18px rgba(31,41,47,0.04); margin-bottom:1rem}
.contact-form-wrap label{display:block; margin-top:0.6rem; font-size:0.95rem}
.contact-form-wrap input, .contact-form-wrap textarea{width:100%; padding:0.7rem; border-radius:8px; border:1px solid rgba(31,41,47,0.08); margin-top:0.3rem}
.form-actions{display:flex; gap:0.6rem; margin-top:0.8rem}
.info-card{background:linear-gradient(180deg,#fff,#fbfbfb); padding:1rem; border-radius:12px; box-shadow:0 8px 18px rgba(31,41,47,0.04)}
.muted{color:var(--muted)}
.note{color:var(--muted); font-size:0.95rem}

/* Footer */
.site-footer{padding:1.2rem 0; color:var(--muted); border-top:1px solid rgba(32,32,32,0.04)}
.footer-inner{display:flex; align-items:center; justify-content:center}

/* Responsive / larger screens */
@media(min-width:720px){
  .hero{padding:3.2rem 0}
  .hero-inner{align-items:center}
  .hero h1{font-size:2.4rem}
  .hero-art{display:block}
  .container{width:92%;}
  .features{grid-template-columns:repeat(2,1fr)}
  .contact-grid{display:grid; grid-template-columns:1fr 320px; gap:1rem}
}

@media(min-width:1024px){
  .header-inner{padding:1rem 0}
  .container{width:88%}
  .features{grid-template-columns:repeat(3,1fr)}
  .brand{font-size:1.25rem}
}

/* Mobile nav hidden by default on small screens */
@media(max-width:719px){
  .primary-nav{position:absolute; left:0; right:0; top:64px; background:var(--card); border-top:1px solid rgba(0,0,0,0.04); display:none}
  .primary-nav.open{display:block}
  .primary-nav ul{flex-direction:column; padding:0.6rem}
}