/* Typography: local Gill Sans registration */
@font-face {
  font-family: 'Gill Sans Std';
  src: url('/fonts/GillSansStd.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gill Sans Std';
  src: url('/fonts/GillSansStdBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --brand-strong: #0b3d2e; /* deep green */
  --brand-accent: #b98f4b; /* warm gold */
  --brand-bg: #f7f3ea; /* soft cream paper */
  --text: #222222;
  /* Typographic scale */
  --fs-base: 16px; /* 1rem */
  --fs-small: 0.875rem;
  --fs-lead: 1rem; /* lead body size */
  --fs-h1: 2.75rem;
  --fs-h1-lg: 3.75rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.125rem;
  --line-height-base: 1.5;
}

/* Base layout */
html,body{height:100%}
body{
  margin:0;
  font-family: 'Gill Sans Std', Arial, Helvetica, sans-serif;
  background: var(--brand-bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:var(--fs-base);
  line-height:var(--line-height-base);
}

.container{max-width:900px;margin:0 auto;padding:2rem}

/* Header */
header{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.25rem 0;
}
header img{max-width:360px;height:auto;display:block}

/* Hero (poster-inspired) */
.hero{
  /* Box removed: keep generous spacing and subtle background removed per request */
  padding:2.25rem 1.25rem;
  margin-top:1.25rem;
  text-align:center;
  background: transparent;
  border-top: none;
  border-bottom: none;
}
.hero h1{
  margin:0;
  font-size:var(--fs-h1);
  line-height:1.05;
  color:var(--brand-strong);
  font-weight:700;
  letter-spacing:0.5px;
}

.lead{
  margin-top:0.75rem;
  color: rgba(0,0,0,0.7);
  font-size:var(--fs-lead);
}

/* Responsive tweaks */
@media (min-width:768px){
  .hero h1{font-size:var(--fs-h1-lg)}
  .container{padding:3rem}
}

/* Small utility */
.muted{color:rgba(0,0,0,0.55);font-size:var(--fs-small)}


/* Hours grid: side-by-side layout */
.hours-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin-top:1rem;
}
.hours-card{
  padding:1rem;
  border-radius:6px;
  background: transparent;
  box-shadow: none;
}
.hours-card h3{margin-top:0.5rem;margin-bottom:0.25rem;color:var(--brand-strong);font-size:var(--fs-h2);font-weight:700;letter-spacing:0.6px}
.hours-list{line-height:1.5;margin:0}

@media (min-width:720px){
  .hours-grid{grid-template-columns:1fr 1fr}
}

/* Table styling: center days and times and center table within card */
.hours-table{
  margin:0 auto;
  border-collapse:collapse;
  width:100%;
  max-width:420px;
}
.hours-table td{
  padding:0.25rem 0.5rem;
  border-bottom:1px solid rgba(0,0,0,0.04);
  vertical-align:middle;
  font-size:var(--fs-h3);
}
.hours-table tr:last-child td{border-bottom:none}

/* Days on the right, times on the left */
.hours-table td:first-child{text-align:left}
.hours-table td:last-child{text-align:right}

/* On small screens keep table layout but center both columns */
@media (max-width:719px){
  /* Keep table cells as table-cells and center their content */
  .hours-table td{display:table-cell;padding:0.35rem 0;text-align:center}
  .hero h1, .lead {text-align:center}
  .hours-card {text-align:center}
  /* Make sure table width is responsive */
  .hours-table{max-width:100%}
}

/* Contact form styling */
.contact-form{width:50%;max-width:680px;margin:0.5rem auto 2rem;padding:0.9rem}
.contact-form label{display:block;margin-top:0.25rem;font-weight:700;color:var(--brand-strong);letter-spacing:0.4px}
.contact-form .form-row{display:flex;gap:0.75rem;margin-bottom:0.5rem;align-items:flex-start}
.contact-form .field{flex:1;min-width:0}

/* Dramatic field styles */
.contact-form .field label{font-size:var(--fs-small);text-transform:uppercase;opacity:0.95}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width:100%;
  padding:0.75rem 0.9rem;
  margin-top:0.25rem;
  border:2px solid rgba(11,61,46,0.12);
  border-radius:10px;
  background: linear-gradient(180deg,#ffffff,#f7f7f7);
  color: #111111;
  font-family: inherit;
  font-size:var(--fs-h3);
  box-sizing: border-box;
  box-shadow: 0 6px 18px rgba(11,61,46,0.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.contact-form textarea{min-height:140px;resize:vertical;margin-top:0.5rem}
.contact-form input::placeholder, .contact-form textarea::placeholder{color:#8a8a8a}

.contact-form input:focus, .contact-form textarea:focus{
  outline:none;
  transform: translateY(-2px);
  border-color: var(--brand-accent);
  box-shadow: 0 14px 34px rgba(11,61,46,0.12);
}

/* Button: stronger visual presence */
.contact-form button{
  margin-top:0.75rem;
  padding:0.8rem 1.1rem;
  border-radius:10px;
  border: none;
  background: linear-gradient(180deg, var(--brand-strong), #093622);
  color: white;
  font-weight:800;
  cursor: pointer;
  opacity:1;
  box-shadow: 0 8px 22px rgba(11,61,46,0.18);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  font-size:var(--fs-h3);
}
.contact-form button:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(11,61,46,0.22)}
.contact-form button[disabled]{cursor:not-allowed;opacity:0.65;box-shadow:none}

/* Make submit button span full width on small screens */
@media (max-width:520px){
  .contact-form button{width:100%}
}

/* Disabled inputs look clear but inactive */
.contact-form input[disabled], .contact-form textarea[disabled]{opacity:0.6}

/* status messages */
.form-status{margin-top:0.5rem;text-align:center;font-weight:600}
.form-status.success{color:var(--brand-strong)}
.form-status.error{color:#b00020}

/* Center the Contact section title and add breathing space */
/* Reduced top spacing so title sits closer to the form */
/* Standardized section titles: hours and contact */
#contact {text-align:center;margin-top:0.5rem;margin-bottom:0.25rem;font-size:var(--fs-h2);font-weight:700;letter-spacing:0.6px;color:var(--brand-strong)}

/* Responsive: stack the name/email fields on small screens */
@media (max-width:720px){
  .contact-form{width:100%;padding:0.5rem}
  /* On small tablets/phones make name + email stack and take full width */
  .contact-form .form-row{flex-direction:column;gap:0.5rem}
  .contact-form .form-row .field{width:100%}
}

@media (max-width:520px){
  .contact-form .form-row{flex-direction:column}
  .contact-form .form-row .field{width:100%}
}