/* ==== VARIABLES ==== */
:root {
 --header-height:72px; /* fallback header height used to size sections */
}

/* ==== GENERAL RESET ==== */
* {
 margin:0;
 padding:0;
 box-sizing: border-box;
 font-family: Verdana, sans-serif;
}

html, body {
 height:100%;
}

body {
 color: #222;
 background: #f8f9fa;
 transition: background0.4s, color0.4s;
 line-height:1.6;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

/* ==== HEADER ==== */
header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding:02rem; /* horizontal padding only; use fixed height for consistent section sizing */
 height: var(--header-height);
 background-color: #3084B2;
 position: sticky;
 top:0;
 z-index:1000;
}

@keyframes gradientShift {
0% {
 background-position:0%50%;
 }

50% {
 background-position:100%50%;
 }

100% {
 background-position:0%50%;
 }
}

/* ==== LOGO ==== */
.logo {
 width: 120px; /* Adjust as needed for desired size */
 height: auto;
 cursor: pointer;
 transition: transform0.3s;
 background-color: transparent; /* Make logo background transparent */
 display: block; /* Ensure logo is treated as a block element */
 margin: 0 auto; /* Center the logo if needed */
 position: relative;
 z-index: 1; /* Ensure logo is above header background */
 float: left; /* Adjusted: logo floats left */
 margin-left: 10px; /* Adjust as needed */
}

.logo:hover {
 transform: scale(1.05);
}

/* ==== NAVIGATION ==== */
nav ul {
 display: flex;
 list-style: none;
 gap:1.2rem;
}

nav a {
 color: white;
 text-decoration: none;
 font-weight:500;
 transition: opacity0.3s;
}

nav a:hover {
 opacity:0.7;
}

/* ==== MOBILE MENU ==== */
.menu-toggle {
 display: none;
 background: transparent;
 border: none;
 color: white;
 font-size:1.8rem;
 cursor: pointer;
 padding: 0.5rem;
 min-width: 44px;
 min-height: 44px;
 display: flex;
 align-items: center;
 justify-content: center;
 touch-action: manipulation;
}

.menu-toggle:focus {
 outline: 2px solid rgba(255,255,255,0.8);
 outline-offset: 2px;
}

@media (max-width:768px) {
 .menu-toggle {
 display: flex;
 }

 nav ul {
 display: none;
 flex-direction: column;
 position: absolute;
 top: var(--header-height);
 left:0;
 width:100%;
 background: linear-gradient(180deg, #007BFF, #FFD700);
 text-align: center;
 padding:1rem0;
 gap: 0;
 }

 nav ul.active {
 display: flex;
 }

 nav li {
 width: 100%;
 }

 nav a {
 color: white;
 font-size:1.2rem;
 display: block;
 padding: 1rem 0.5rem;
 min-height: 44px;
 display: flex;
 align-items: center;
 justify-content: center;
 }

 nav a:focus {
 outline: 2px solid rgba(255,255,255,0.8);
 outline-offset: -2px;
 }
}

@media (max-width:480px) {
 nav a {
 font-size: 1rem;
 padding: 0.75rem 0.5rem;
 }
}

/* ==== HOME FLYER IMAGE ==== */
.home-flyer {
 width: 100%;
 max-width: 500px;
 height: auto;
 display: block;
 margin: 20px auto;
 object-fit: contain;
 border-radius: 12px;
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
 animation: fadeIn 0.8s ease-in-out;
}

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

/* ==== HOME SECTION ==== */
#home {
 background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
 height: calc(100vh - var(--header-height));
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: 0;
 text-align: center;
}

.home-flyer-image {
 width: 100%;
 height: 100%;
 display: block;
 margin: 0;
 object-fit: cover;
 border-radius: 0;
 box-shadow: none;
 animation: fadeIn 0.8s ease-in-out;
}

#home h1 {
 margin-bottom: 0.5rem;
 animation: fadeIn 0.8s ease-in-out;
 max-width: 600px;
 color: white;
 text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
 font-size: 1.75rem;
}

/* ==== MAIN: make sections act as full-page slides ==== */
main {
 height: calc(100vh - var(--header-height));
 overflow-y: auto;
 scroll-snap-type: y proximity; /* allow smooth snapping */
 -webkit-overflow-scrolling: touch;
 scroll-behavior: smooth; /* enable smooth programmatic scrolling */
}

section {
 scroll-snap-align: start;
 /* ensure anchored section headings are not hidden behind the sticky header */
 scroll-margin-top: calc(var(--header-height) +12px);
 min-height: calc(100vh - var(--header-height));
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding:2rem;
}

/* keep a narrower content column inside each section */
section > * {
 max-width:900px;
 width:100%;
}

h1, h2 {
 color: #0056b3;
 margin-bottom:1rem;
}

/* remove default section spacing now that each is full-screen */
section + section {
 margin-top:0;
}

/* ==== CALCULATOR ==== */
/* extra top padding for calculator to avoid overlap with sticky header */
#calculator {
 padding-top: calc(var(--header-height) +4rem);
}

#calculator form {
 display: flex;
 flex-direction: column;
 gap:1rem;
 max-width:400px;
}

#calculator input {
 padding:0.6rem;
 border:1px solid #ccc;
 border-radius:6px;
 font-size:1rem;
 min-height: 44px;
 width: 100%;
 -webkit-appearance: none;
 appearance: none;
}

#calculator input:focus {
 outline: 2px solid #007BFF;
 outline-offset: 2px;
 border-color: #007BFF;
}

#calculator label {
 font-weight: 600;
 margin-top: 0.5rem;
 display: block;
}

#calculator button {
 background-color: #007BFF;
 color: white;
 border: none;
 border-radius:6px;
 padding:0.8rem;
 cursor: pointer;
 transition: background-color0.3s;
 min-height: 44px;
 font-size: 1rem;
 font-weight: 600;
 touch-action: manipulation;
}

#calculator button:hover {
 background-color: #0056b3;
}

#calculator button:focus {
 outline: 2px solid rgba(0,0,0,0.2);
 outline-offset: 2px;
}

canvas {
 margin-top:1.5rem;
 width:100% !important;
 max-height:300px;
}

/* ==== EMAIL BUTTON ==== */
#emailEstimate {
 margin-top:1rem;
 background: #28a745;
}

#emailEstimate:hover {
 background: #218838;
}

/* ==== FOOTER ==== */
footer {
 text-align: center;
 padding:1rem;
 background: #007BFF;
 color: white;
}

footer p {
 margin: 0.5rem 0;
}

/* Contact form styling */
#contactForm {
 display: flex;
 flex-direction: column;
 gap: 1rem;
 max-width: 400px;
}

#contactForm label {
 font-weight: 600;
 margin-bottom: 0.25rem;
 display: block;
}

#contactForm input,
#contactForm textarea {
 padding: 0.6rem;
 border: 1px solid #ccc;
 border-radius: 6px;
 font-size: 1rem;
 min-height: 44px;
 width: 100%;
 -webkit-appearance: none;
 appearance: none;
 font-family: inherit;
}

#contactForm textarea {
 min-height: auto;
 resize: vertical;
}

#contactForm input:focus,
#contactForm textarea:focus {
 outline: 2px solid #007BFF;
 outline-offset: 2px;
 border-color: #007BFF;
}

#contactForm button {
 background-color: #007BFF;
 color: white;
 border: none;
 border-radius: 6px;
 padding: 0.8rem;
 cursor: pointer;
 font-size: 1rem;
 font-weight: 600;
 min-height: 44px;
 touch-action: manipulation;
 transition: background-color 0.3s;
}

#contactForm button:hover {
 background-color: #0056b3;
}

#contactForm button:focus {
 outline: 2px solid rgba(0,0,0,0.2);
 outline-offset: 2px;
}

/* ==== WHATSAPP BUTTON ==== */
.whatsapp-button {
 position: fixed;
 bottom:20px;
 right:20px;
 background-color: #25D366; /* WhatsApp green */
 border-radius:50%;
 padding:12px;
 box-shadow:04px8px rgba(0,0,0,0.3);
 z-index:1000;
 transition: transform0.18s ease;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 56px;
 min-height: 56px;
 text-decoration: none;
 touch-action: manipulation;
}

.whatsapp-button:hover { 
 transform: scale(1.06); 
}

.whatsapp-button:focus {
 outline: 2px solid rgba(0,0,0,0.3);
 outline-offset: 2px;
}

.whatsapp-svg {
 width:24px;
 height:24px;
 display: block;
 flex-shrink:0;
 pointer-events: none;
}

@media (max-width:480px) {
 .whatsapp-button {
 bottom: 16px;
 right: 16px;
 padding: 10px;
 min-width: 52px;
 min-height: 52px;
 }

 .whatsapp-svg {
 width: 20px;
 height: 20px;
 }
}

/* Terms list styling */
#terms ol {
 list-style: decimal;
 list-style-position: outside;
 padding-left:1.2rem; /* leave space for numbers */
 max-width:900px;
}

#terms li {
 padding:0.8rem0;
 border-bottom:1px solid rgba(0,0,0,0.08);
 text-indent: -0.4rem; /* pull first line slightly left to align numbers */
}

#terms li:last-child {
 border-bottom: none;
}

/* keep the first sentence inline with the list number, add a small gap */
#terms li strong {
 display: inline;
 margin-right:0.4rem;
}

#terms li p {
 margin:0.4rem000;
}

/* Terms footnote panel */
.terms-tab {
 background: transparent;
 border: none;
 color: white;
 font-weight:600;
 cursor: pointer;
 padding:0.4rem0.6rem;
}

.terms-panel {
 position: fixed;
 left:0;
 right:0;
 bottom:0;
 height:0;
 overflow: hidden;
 background: rgba(255,255,255,0.98);
 box-shadow:0 -8px24px rgba(0,0,0,0.15);
 transition: height270ms ease;
 z-index:1200;
}

.terms-panel[aria-hidden="false"] {
 height:60vh; /* visible state */
}

.terms-panel-inner {
 height:100%;
 display:flex;
 flex-direction:column;
}

.terms-panel-header {
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:1rem;
 border-bottom:1px solid rgba(0,0,0,0.06);
}

.terms-panel-body {
 padding:1rem;
 overflow:auto;
}

.terms-close {
 background:transparent;
 border:none;
 font-size:1.25rem;
 cursor:pointer;
}

/* adjust ol inside panel */
.terms-panel-body ol {
 padding-left:1.2rem;
}

.terms-panel-body li {
 margin-bottom:0.75rem;
}

@media (max-width:600px) {
 .terms-panel[aria-hidden="false"] { height:80vh; }
}

/* Footer footnote for small expandable terms */
.footer-content {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:1rem;
 padding:1rem;
 background: #007BFF;
 color: white;
}

.terms-tab {
 background: transparent;
 border:1px solid rgba(255,255,255,0.2);
 color: white;
 padding:0.4rem0.6rem;
 border-radius:6px;
 cursor: pointer;
}

.terms-footnote {
 max-height:0;
 overflow:hidden;
 background: #fff;
 color:#222;
 transition: max-height300ms ease;
 border-top:1px solid rgba(0,0,0,0.06);
 font-size:0.95rem;
}

/* Expanded: let the footnote grow to fit content (no inner clipping) */
.terms-footnote[aria-hidden="false"] {
 max-height: none;
 overflow: visible;
}

.terms-footnote-inner {
 padding:1rem;
}

.terms-footnote ol { padding-left:1.2rem; }
.terms-footnote li { margin-bottom:0.8rem; }

@media (max-width:600px) {
 .terms-footnote[aria-hidden="false"] { max-height: none; }
}

/* Additional responsive improvements for smaller devices */
@media (max-width:480px) {
 header {
 padding: 0 1rem;
 height: 64px;
 }

 :root {
 --header-height: 64px;
 }

 section {
 padding: 1.5rem;
 }

 h1 {
 font-size: 1.75rem;
 }

 h2 {
 font-size: 1.5rem;
 }

 p {
 font-size: 0.95rem;
 }

 #calculator form {
 max-width: 100%;
 }

 #contactForm {
 max-width: 100%;
 }

 .terms-footnote-inner {
 padding: 0.75rem;
 }

 .footer-content {
 flex-direction: column;
 gap: 0.5rem;
 padding: 0.75rem;
 }

 .terms-tab {
 width: 100%;
 }
}

/* Large desktop screens - optimize spacing */
@media (min-width: 1200px) {
 section > * {
 max-width: 1100px;
 }

 #calculator form {
 max-width: 500px;
 }

 #contactForm {
 max-width: 500px;
 }
}

/* Print styles */
@media print {
 header, footer, .whatsapp-button, .menu-toggle {
 display: none;
 }

 section {
 page-break-after: always;
 min-height: auto;
 }

 a {
 color: #0056b3;
 text-decoration: underline;
 }
}