/* Site base styles: shared utilities, components, and accessibility helpers */

/* Global mobile-friendly defaults */
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img{ max-width: 100%; height: auto; }

/* Buttons */
.btn{background:var(--brand,#2aa6b8);color:#fff;border:none;border-radius:10px;padding:8px 12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.secondary{background:#fff;color:var(--brand,#2aa6b8);border:1px solid rgba(3,50,59,.1)}
.btn.ghost{background:transparent;border:1px dashed rgba(3,50,59,.25);color:var(--text,#08323b)}
.btn.block{width:100%}

/* Cards/sections */
.card{background:var(--card,#fff);border-radius:12px;box-shadow:0 8px 20px rgba(3,50,59,.04);padding:12px}
.section{border:1px solid #e6f6f7;border-radius:10px;padding:12px;margin-top:12px;background:#fff}

/* Layout helpers */
.grid{display:grid;gap:12px}
@media(min-width:760px){.cols-2{grid-template-columns:1fr 1fr}.cols-3{grid-template-columns:1fr 1fr 1fr}}
.span-all{grid-column:1 / -1}
.inline{display:flex;gap:8px;align-items:center}
.inline svg{display:inline-block;vertical-align:middle}
.gap-8{gap:8px}
.sticky{position:sticky;top:14px}

/* Forms */
label{display:block;margin:6px 0 4px;font-weight:600}
input,select,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #e6f6f7;background:#fff}
textarea{min-height:84px;resize:vertical}

/* Unified form control sizes (use on inputs/selects/textarea as needed) */
.form-control{display:block;width:100%;padding:10px 12px;border:1px solid #e6f6f7;border-radius:10px;background:#fff;line-height:1.2;font-size:14px;height:44px;box-sizing:border-box}
select.form-control{height:44px}
textarea.form-control{height:auto;min-height:100px}
.form-control-sm{height:36px;padding-top:8px;padding-bottom:8px}
.form-control-lg{height:48px;padding-top:12px;padding-bottom:12px}

/* On iOS/tablets, keep input text >=16px to avoid browser zoom and improve legibility */
@media (max-width: 820px){
	.form-control{font-size:16px;height:46px}
	select.form-control{height:46px}
}

/* Accessibility */
button:focus, a:focus, input:focus, select:focus, textarea:focus{outline:3px solid rgba(42,166,184,.18);outline-offset:2px}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
/* Visibility utilities */
.hidden{display:none !important}
[hidden]{display:none !important}

/* Spacing utilities */
.mt-0{margin-top:0}
.mt-4{margin-top:4px}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.mt-16{margin-top:16px}
.mt-6{margin-top:6px}
.mt-14{margin-top:14px}
.mb-0{margin-bottom:0}
.mb-4{margin-bottom:4px}
.mb-8{margin-bottom:8px}
.mb-12{margin-bottom:12px}
.mb-16{margin-bottom:16px}
.pt-4{padding-top:4px}
.pt-8{padding-top:8px}
.pt-12{padding-top:12px}
.pb-4{padding-bottom:4px}
.pb-8{padding-bottom:8px}
.pb-12{padding-bottom:12px}

/* Padding utilities */
.p-12{padding:12px}
.px-12{padding-left:12px;padding-right:12px}
.py-12{padding-top:12px;padding-bottom:12px}
.pr-12{padding-right:12px}
.pl-12{padding-left:12px}

/* Border utilities */
.mb-0{margin-bottom:0}
.bdr-e{border-right:1px solid #eee}
.rounded-8{border-radius:8px}
.card > :first-child{ margin-top:0 }
.card > :last-child{ margin-bottom:0 }

/* Flex utilities */
.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.flex-1{flex:1 1 auto}

/* Typography utilities */
.text-center{text-align:center}
.fw-700{font-weight:700}
.fs-20{font-size:20px}
.fs-14{font-size:14px}
.color-brand{color:var(--brand,#2aa6b8)}

/* Size utilities */
.w-100{width:100%}
.h-120{height:120px}
.minw-160{min-width:160px}

/* Misc */
.object-cover{object-fit:cover}
.bg-white{background:#fff}

/* Slightly reduce container padding on very small screens */
@media(max-width:420px){
	.wrap{padding-left:10px;padding-right:10px}
}

/* -------- Container Query support -------- */
/* Enable container-based responsiveness for cards */
.card{container-type:inline-size}
@container (max-width: 520px){
	.card .inline{flex-wrap:wrap}
	.card .btn-group{flex-wrap:wrap}
}

/* Make simple tables scroll or stack inside narrow cards */
.table{width:100%;border-collapse:collapse;border:1px solid #e6f6f7}
@container (max-width: 420px){
	.table thead{display:none}
	.table tr{display:block;border-bottom:1px solid #eef6f7;padding:6px 0}
	.table td{display:flex;justify-content:space-between;border:none;padding:6px 0}
}