/* ==========================================================================
   GLOBAL
   ========================================================================== */

/* — Reset & Variables — */
:root {
  --font-body:      'Lora', serif;
  --bg-image:       url('../images/bg-zen-garden.jpg') center/cover no-repeat;
  --bg-papyrus:     url('../images/bg-papyrus.jpg')   center/cover no-repeat;
  --bg-wood:        url('../images/bg-wood.png')      center/cover no-repeat;
  --clay:           #2e2a27;
  --cream-dark:     #d6cdaa;
  --cream:          #f5f1e8;
  --gold-dark:      #9F4613;
  --gold:           #CB5713;
  --maroon:         #5c3d3a;
  --sand:           #A68E6D;
  --wood-brown:     #32221D;
}

/* — Box‑Model Reset — */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

/* — Base Layout & Footer — */
html, body {
  height: 100%;
}

body {
  font:                1.2rem/1.3 var(--font-body);
  background:          var(--bg-image);
  background-attachment: fixed;
  background-size:     cover;
  background-color:    var(--wood-brown);
  color:               var(--clay);

  display:             flex;
  flex-direction:      column;
}

/* — Global Links (except nav) — */
a {
  color:           var(--gold);
  text-decoration: none;
  font-weight:     bold;
}
a:hover {
  color:           var(--gold-dark);
  text-decoration: underline;
}

q {
  color:      var(--maroon);
  font-style: italic;
}

/* — Container — */
.container {
  max-width: 1100px;
  margin:    0 auto;
  padding:   0 1rem;
}

/* — Header — */
.site-header {
  position:       sticky;
  top:            0;
  width:          100%;
  z-index:        1000;
  background:     var(--bg-wood);
  transition:     padding 0.3s ease;
  padding:        1rem 0;
  box-shadow:     0 4px 10px rgba(0, 0, 0, 0.3);
}
.site-header.scrolled {
  padding:        0.5rem 0;
}

.header-inner {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}

.logo img {
  height:      44px;
  transition:  height 0.3s ease;
}
.site-header.scrolled .logo img {
  height:      33px; /* 75% of 44px */
}

.site-nav a {
  color:         var(--cream);
  margin-left:   1.5rem;
  font-weight:   bold;
  text-decoration: none;
}
.site-nav a:hover {
  color:         var(--sand);
}
.site-nav a.active {
  color:         var(--sand);
}

/* — Hamburger & Drawer — */
.hamburger {
  display:        none;
  background:     none;
  border:         none;
  font-size:      2rem;
  color:          var(--cream);
  cursor:         pointer;
}
.side-drawer {
  position:      fixed;
  top:           0;
  right:         0;
  width:         75%;
  max-width:     300px;
  height:        100%;
  background:    var(--bg-wood);
  transform:     translateX(100%);
  transition:    transform 0.3s ease;
  z-index:       1001;
  padding-top:   2rem;
}
.side-drawer.open {
  transform:     translateX(0);
}
.side-drawer .site-nav {
  display:        flex;
  flex-direction: column;
  padding:        2rem 1rem;
  gap:            1rem;
}
.drawer-close {
  position:      absolute;
  top:           1rem;
  right:         1rem;
  background:    none;
  border:        none;
  font-size:     2rem;
  color:         var(--cream);
  cursor:        pointer;
}

/* — Main Spacing — */
main {
  margin-top: 25px;
  flex:       1;
}

/* — Hero + Content — */
.hero {
  position:       relative;
  margin:         1rem 0 2rem;
}
.hero-inner {
  position:       relative;
  display:        flex;
  flex-wrap:      wrap;
  gap:            2rem;
  width:          calc(100% - 2rem);
  max-width:      1100px;
  margin:         0 auto;
  background:     var(--bg-papyrus);
  background-size:cover;
  border-radius:  16px;
  padding:        2rem;
  box-shadow:     0 12px 32px rgba(0,0,0,0.2);
  z-index:        10;
}
.portrait {
  flex:        0 0 280px;
  text-align:  center;
}
.portrait img {
  max-width:      100%;
  border-radius:  16px;
  display:        block;
  margin:         0 auto 1rem;
  box-shadow:     0 4px 12px rgba(0,0,0,0.2);  
}
.portrait figcaption img {
  margin-top:     1rem;
  display:        inline-block;
  max-width:      90%;
  box-shadow:     none;
}
.hero-content {
  flex:        1 1 0;
  max-width: 100%;
}
.hero-content h2 {
  font-size:      2rem;
  margin-bottom:  0.5rem;
}
.hero-content p {
  margin-bottom:  1rem;
}
.hero-content ul {
  margin:         1rem 0 1.5rem 1.5rem;
}
.hero-content ul li {
  margin-bottom:  0.5rem;
}

/* — Button — */
.btn {
  display:        inline-block;
  background:     var(--maroon);
  color:          var(--cream);
  padding:        0.75rem 1.5rem;
  border-radius:  8px;
  text-decoration:none;
  font-weight:    bold;
  transition:     background 0.2s, transform 0.2s;
  font-family:    var(--font-body);
  font-size:      1.2rem;
  line-height:    1.3;
}
.btn:hover {
  background:     var(--gold-dark);
  color:          var(--cream);
  transform:      scale(1.05);
  text-decoration: none;
}

/* — Footer — */
.site-footer {
  background:     var(--bg-wood);
  color:          var(--cream-dark);
  text-align:     center;
  padding:        1rem 0;
  width:          100%;
  box-shadow:     0 -2px 8px rgba(0,0,0,0.2);
}
.site-footer p {
  margin:     0;
  font-size:  0.9rem;
}

/* ==========================================================================
   SHARED MASONRY GRID 
   ========================================================================== */
.masonry-grid {
  column-count:  3;     
  column-gap:    1rem;  
  margin-top:    1.5rem;
}

.masonry-grid > * {
  -webkit-column-break-inside: avoid;
     -moz-column-break-inside: avoid;
          column-break-inside: avoid;

  display:      inline-block; 
  width:        100%;
  margin-bottom:1rem;
}

@media (max-width: 800px) {
  .masonry-grid {
    column-count: 2;
  }
}
@media (max-width: 400px) {
  .masonry-grid {
    column-count: 1;
  }
}

/* ==========================================================================
   TESTIMONIALS
   ==========================================================================
*/

.testimonials-grid {
  column-count: 1;
}

/* Testimonial card styling */
.masonry-grid .testimonial-card {
  break-inside:   avoid-column;
  margin-bottom:  1rem;
  background:     var(--cream-dark);
  color:          var(--clay);
  padding:        1rem;
  border-radius:  8px;
  box-shadow:     0 4px 12px rgba(0, 0, 0, 0.1);
}
.masonry-grid .testimonial-card blockquote {
  margin:       0 0 0.75rem;
  font-style:   italic;
  line-height:  1.4;
}
.masonry-grid .testimonial-card .attribution {
  text-align:   right;
  font-weight:  bold;
  font-size:    0.9rem;
}

/* Masonry images rounding */
.masonry-grid img {
  border-radius: 5px;
}

/* ==========================================================================
   TIPS 
   ========================================================================== 
*/
.tips-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   2rem;
  margin:                2rem 0;
}

.tip-card {
  background:          var(--cream-dark);
  color:               var(--clay);
  padding:             1.5rem;
  border-radius:       8px;
  box-shadow:          0 4px 12px rgba(0, 0, 0, 0.1);
}
.tip-card h3,
.tip-card p,
.tip-card ol {
  margin-bottom:       1rem;
}
.tip-card ol {
  margin-left:         1.5rem;
}
.tip-card figure {
  width:        80%;
  margin:       0 auto;
  text-align:   center;
}
.tip-card figure img {
  display:      block;
  max-width:    100%;
  height:       auto;
}

/* ==========================================================================
   CONTACT
   ==========================================================================
*/

#contact-form {
  max-width:     480px;
  margin-top:    1.5rem;
}

#contact-form .form-group {
  display:        flex;
  flex-direction: column;
  margin-bottom:  1.25rem;
}

#contact-form .form-group label {
  font-weight:    bold;
  margin-bottom:  0.5rem;
}

#contact-form .form-group input,
#contact-form .form-group textarea {
  width:         100%;
  padding:       0.75rem 1rem;
  border:        1px solid var(--sand);
  border-radius: 4px;
  font:          1rem/1.4 var(--font-body);
  color:         var(--clay);
  background:    var(--cream);
  transition:    border-color 0.2s;
}
#contact-form .form-group input:focus,
#contact-form .form-group textarea:focus {
  outline:       none;
  border-color:  var(--gold);
}
#contact-form .form-group textarea {
  min-height:   120px;
  resize:       vertical;
}

#contact-form .btn {
  margin-top:    0.5rem;
  display:       inline-block;
  border:        none;
}

.form-message {
  padding: 1em;
  margin-bottom: 1.5em;
  border-radius: 5px;
  font-weight: bold;
}
.form-message.success {
  background-color: #d1f4d1;
  color: #0a5c0a;
}
.form-message.error {
  background-color: #f9d6d6;
  color: #a10000;
}


/* ==========================================================================
   Responsive Breakpoints
   ==========================================================================
*/

@media (max-width: 1023px) {
  .site-nav  { 
    display:             none; 
  }
  .hamburger { 
    display:             block; 
  }
}

@media (max-width: 800px) {
  .hero-inner {
    flex-direction:      column;
    width:               auto;    
    margin:              0 1rem;
    padding:             2rem 1rem;
  }
  .hero-content { 
    text-align:          left;
    min-width:           0;
  }
  .hero-content ul {
    margin-left:          0;
    padding-left:         0;
    list-style-position:  inside;
  }
  .testimonials-grid { 
    column-count:         1; 
  }

  .tips-grid {
    display:              flex;
    flex-direction:       column;
    gap:                  1.5rem;
    margin:               2rem 0;
  }

}

@media (max-width: 600px) {
  .tips-grid {
    grid-template-columns: 1fr;
    gap:                   1.5rem;    
    margin:                2rem 1rem;
  }
  .logo img {
    height:                33px;
  }
}