:root { --bg:#e6d7ff; --accent:#8762b8; --accent2:#39383a; --text:#222; --header-height: 240px; --header-height-small: 20px; /* smaller height for non-home pages */ }
*{box-sizing:border-box}
html,body{
    min-height:100%; /* changed from height:100% to allow scrolling */
    margin:0;
    font-family:Segoe UI, Roboto, Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
    padding-top: var(--header-height);
    overflow-y: auto; /* ensure scrolling is enabled */
}
.container{
  max-width:800px;
  margin:3rem auto; /* changed: reduce top margin because header padding handles spacing */
  padding:2rem;
  background:#fff;
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  text-align:center;  
  position: relative;
  z-index: 1; /* higher than header so it will cover the header when scrolled */ /* existing comment left in place */}
.header{text-align:center;margin-bottom:2rem}
.buttonA{background:var(--accent);color:#ffffff;border:0;padding:.6rem 1rem;border-radius:6px;cursor:pointer;font-size:1rem}
.buttonA:hover{opacity:.95}
.buttonB{background:var(--accent2);color:#ffffff;border:0;padding:.6rem 1rem;border-radius:6px;cursor:pointer;font-size:1rem}
.buttonB:hover{opacity:.95}
.row { display:flex; gap:12px; align-items:center; justify-content:center; }
.expand-button{background:var(--bg);color:#000000;border:0;padding:.6rem 1rem;border-radius:6px;cursor:pointer;font-size:1rem}
.expand-button:hover{opacity:.95}

.expandable-content {
  max-height: 0; /* Collapsed state */
  overflow: hidden;
  transition: max-height 0.45s ease, opacity 0.45s ease; /* Smooth transition */
  opacity: 0; /* Initially hidden */
}

.expandable-content.expanded {
  opacity: 1; /* Fully visible */
}

@keyframes slideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.expandable-content.animated {
  animation: slideIn 0.7s ease forwards; /* Apply custom animation */
}

/* Form layout: align preceding messages (labels) beside inputs */
.contact-form{margin-top:1.25rem;text-align:left}
.form-row{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.form-row label{width:160px;flex:0 0 160px;text-align:right;font-weight:600;color:var(--accent2)}
.form-row input,.form-row textarea{flex:1;padding:.5rem .6rem;border:1px solid #dcdcdc;border-radius:6px;font-size:1rem}
.form-row textarea{resize:vertical;min-height:96px}
.form-row--actions{align-items:center}
.form-row--actions button{padding:.6rem 1rem;border-radius:6px;border:0;background:var(--accent);color:#fff;cursor:pointer}

/* Small screens: stack labels above inputs */
@media (max-width:520px){
  .form-row{flex-direction:column;align-items:stretch}
  .form-row label{width:auto;flex:0 0 auto;text-align:left;margin-bottom:.4rem}
  .form-row--actions{justify-content:flex-start}
}
.header {
   position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
  background: transparent; /* keep transparent so content will visually cover it */
}

.header .logo {
  width: 440px; /* adjust size */
  height: auto;
  display: block;
  margin-bottom: 8px;
}

.form-status{
  margin-top:0.75rem;
  font-size:0.95rem;
  color:var(--accent2);
  min-height:1.2em;
}

/* Add class for pages with smaller headers */
.page-content-small {
  padding-top: var(--header-height-small);
}