/* === OTY Homepage Styles (SpaceCraft-safe) === */
.oty-hero {
  position: relative;
  min-height: 90vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #fff;
  background-image: url('/images/oldtownyoga-hero.jpg'); /* replace with your uploaded image path */
  background-size: cover; background-position: center;
}
.oty-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.oty-hero__inner { position: relative; z-index: 1; padding: 0 1rem; max-width: 900px; }
.oty-logo { position: absolute; top: 2rem; left: 2rem; z-index: 2; width: 160px; height: auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,.35)); }
.oty-hero h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.15; margin: 0 0 .75rem; font-weight: 800; }
.oty-hero p.lede { font-size: clamp(1.1rem, 2.2vw, 1.5rem); opacity: .95; margin: 0 0 1.25rem; }
.oty-btn { display: inline-block; padding: .9rem 1.3rem; border-radius: 14px; font-weight: 700; text-decoration: none; background: #f59e0b; color: #fff; }
.oty-btn:hover { background: #d4880a; }

.oty-uvp { background: #fff; color: #111; text-align: center; padding: 5rem 1.5rem; }
.oty-uvp h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin: 0 0 .75rem; }
.oty-uvp p { max-width: 860px; margin: 0 auto; color: #525252; font-size: 1.1rem; }

.oty-services { background: #f5f5f5; padding: 4rem 1.5rem; }
.oty-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px){ .oty-grid { grid-template-columns: repeat(3, 1fr); } }
.oty-card { background: #fff; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.06); padding: 2rem; text-align: center; }
.oty-card h3 { margin: .5rem 0 .25rem; font-size: 1.2rem; }
.oty-card p { color: #616161; margin: 0; font-size: 1rem; }
.oty-icon-img { width: 56px; height: 56px; margin: 0 auto .75rem; display: block; opacity: .95; object-fit: contain; }

.oty-cta { background: #f59e0b; color: #fff; text-align: center; padding: 4rem 1.5rem; }
.oty-cta h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin: 0 0 .75rem; }
.oty-cta p { max-width: 760px; margin: 0 auto 1rem; }
.oty-cta .oty-btn--light { background: #fff; color: #92400e; }
.oty-cta .oty-btn--light:hover { background: #fafafa; }
/**********
 SCHEDULE
**********/
/*date/class row font size and height*/
html div.healcode table.schedule tr th,
html div.healcode table.enrollments tr th, 
html div.healcode table.healcode-appointments tr th, 
html div.healcode ol.enrollment_list li.cancelled div tr th {
    padding: 1em .5em;
    font-size: 16px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
/*time/sign-up height*/
html div.healcode table.schedule tr td, 
html div.healcode table.schedule tr th, 
html div.healcode table.enrollments tr td, 
html div.healcode table.enrollments tr th, 
html div.healcode table.healcode-appointments tr td, 
html div.healcode table.healcode-appointments tr th, 
html div.healcode ol.enrollment_list li.cancelled div tr td, 
html div.healcode ol.enrollment_list li.cancelled div tr th {
    padding: 1em .5em;
}
html div.healcode .header select {
    margin: 1em .5em;
}
html div.healcode .header .date_links .week_links {
    padding: 1em 0;
}
html div.healcode .week_links a, 
html div.healcode .healcode-date-links-area a, 
html div.healcode .week_links a, div.healcode .week_links a:visited, 
html div.healcode .healcode-date-links-area a, 
html div.healcode .healcode-date-links-area a:visited {
    padding: 1em 0;
    font-size: 12px;
}
/*class/instructor dropdown height*/
html div.healcode .header select {
    height: 38px;
}
/*button radius and animation*/
html div.healcode a.hc-button, 
html div.healcode input.hc-button {
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
}
/*other button radius*/
html div.healcode .week_links span.next_week a, 
html div.healcode .healcode-date-links-area span.healcode-next a {
    -moz-border-radius-topright: 2px;
    -webkit-border-top-right-radius: 2px;
    -o-border-top-right-radius: 2px;
    -ms-border-top-right-radius: 2px;
    -khtml-border-top-right-radius: 2px;
    border-top-right-radius: 2px;
    -moz-border-radius-bottomright: 2px;
    -webkit-border-bottom-right-radius: 2px;
    -o-border-bottom-right-radius: 2px;
    -ms-border-bottom-right-radius: 2px;
    -khtml-border-bottom-right-radius: 2px;
    border-bottom-right-radius: 2px;
}
html div.healcode .week_links span.previous_week a, 
html div.healcode .healcode-date-links-area span.healcode-previous a {
    -moz-border-radius-topleft: 2px;
    -webkit-border-top-left-radius: 2px;
    -o-border-top-left-radius: 2px;
    -ms-border-top-left-radius: 2px;
    -khtml-border-top-left-radius: 2px;
    border-top-left-radius: 2px;
    -moz-border-radius-bottomleft: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -o-border-bottom-left-radius: 2px;
    -ms-border-bottom-left-radius: 2px;
    -khtml-border-bottom-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
html div.healcode .header .date_links .healcode-jump-to-date input {
    background-position: 6px 8px;
    padding: 1em 0 1em 30px;
    width: 92%;
}
html div.healcode .header input[type="text"] {
    border-radius: 2px;
}

/**********
  CLASSES
**********/  
html div.healcode .healcode-image-area {      
    display: none;  
}    
html div.healcode .class_list .class_offered_link {      
    padding: 1em;      
    -webkit-border-radius: 0;      
    -moz-border-radius: 0;      
    -moz-box-shadow: 0 0 0 transparent;      
    -webkit-box-shadow: 0 0 0 transparent;      
    box-shadow: 0 0 0 transparent;      
} 
html div.healcode {  
    font-size: 15px;  
}  
html div.healcode .class_list .class_description {     
    padding-bottom: 15px;      
    padding-top: 15px;      
    line-height: 1.7em;  
}  
html div.healcode .class_list h1.class_name {      
    font-size: 20px;      
    text-transform: uppercase;  
}  
html div.healcode img {  
    display: none;  
}

div.healcode select {
  color: black;
}