/* =============================================================================
   AdriaGo — Base
   Buttons, links, form controls (light + on-dark), tables, layout utilities.
   Token-only. Component polish/micro-interactions live in components.css.
   ========================================================================== */

/* ------------------------------ A11y utils -------------------------------- */
.visually-hidden,.screen-reader-text{
	position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
	clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
	position:fixed;top:-100px;left:var(--sp-4);z-index:9999;
	background:var(--deep-black);color:var(--white);padding:var(--sp-3) var(--sp-5);
	border-radius:var(--r-pill);box-shadow:var(--shadow-md);transition:top var(--dur-fast) var(--ease-out-soft);
}
.skip-link:focus{top:var(--sp-4)}

/* -------------------------------- Links ----------------------------------- */
.link{
	color:var(--text-on-light);text-decoration:none;
	background-image:linear-gradient(var(--adria-orange),var(--adria-orange));
	background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;
	transition:background-size var(--dur-med) var(--ease-out-expo),color var(--dur-fast);
	padding-bottom:1px;
}
.link:hover,.link:focus-visible{background-size:100% 2px}
.on-dark .link{color:var(--text-on-dark)}

/* ------------------------------- Buttons ---------------------------------- */
.btn{
	display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
	font-family:var(--font-body);font-weight:600;font-size:var(--fs-body);line-height:1;
	padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);
	min-height:44px;cursor:pointer;white-space:nowrap;
	transition:transform var(--dur-fast) var(--ease-out-soft),background var(--dur-fast),
		color var(--dur-fast),box-shadow var(--dur-fast),border-color var(--dur-fast);
}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn .icon{width:1.15em;height:1.15em;flex:none}

.btn--primary{background:var(--adria-orange);color:var(--deep-black)}
.btn--primary:hover{background:var(--orange-hover);color:var(--deep-black);box-shadow:var(--shadow-glow)}
.btn--secondary{background:var(--deep-black);color:var(--text-on-dark-strong)}
.btn--secondary:hover{background:var(--charcoal)}
.btn--ghost{background:transparent;color:var(--text-on-light);border:1.5px solid var(--border)}
.btn--ghost:hover{border-color:var(--adria-orange);color:var(--adria-orange)}
.on-dark .btn--ghost{color:var(--text-on-dark);border-color:var(--border-dark)}
.on-dark .btn--ghost:hover{border-color:var(--adria-orange);color:var(--adria-orange)}
.btn--block{display:flex;width:100%}
.btn--sm{padding:var(--sp-2) var(--sp-4);min-height:38px;font-size:var(--fs-small)}
.btn--lg{padding:var(--sp-4) var(--sp-6);min-height:52px}

/* --------------------------------- Forms ---------------------------------- */
.field{display:flex;flex-direction:column;gap:var(--sp-2)}
.field__label{font-weight:600;font-size:var(--fs-small);color:var(--text-on-light)}
.field__hint{font-size:var(--fs-small);color:var(--text-muted)}
.field__error{font-size:var(--fs-small);color:#B3361B;min-height:1.1em}

.input,.select,.textarea{
	width:100%;font-family:var(--font-body);font-size:var(--fs-body);color:var(--text-on-light);
	background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-sm);
	padding:var(--sp-3) var(--sp-4);min-height:48px;
	transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast);
}
.textarea{min-height:120px;resize:vertical;line-height:var(--lh-body)}
.input::placeholder,.textarea::placeholder{color:var(--text-muted)}
.input:focus,.select:focus,.textarea:focus{
	outline:none;border-color:var(--adria-orange);box-shadow:0 0 0 4px var(--orange-glow);
}
.field--invalid .input,.field--invalid .select,.field--invalid .textarea{border-color:#B3361B}

/* On-dark form controls */
.on-dark .field__label{color:var(--text-on-dark)}
.on-dark .input,.on-dark .select,.on-dark .textarea{
	background:rgba(255,255,255,.04);border-color:var(--border-dark);color:var(--text-on-dark-strong);
}
.on-dark .input::placeholder,.on-dark .textarea::placeholder{color:var(--warm-gray)}

/* Checkbox row (GDPR etc.) */
.check{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--fs-small);line-height:var(--lh-snug)}
.check input[type="checkbox"]{width:20px;height:20px;flex:none;accent-color:var(--adria-orange);margin-top:1px}

/* Honeypot — visually + programmatically hidden, off the tab order */
.hp-field{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* -------------------------------- Tables ---------------------------------- */
.table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.table th,.table td{padding:var(--sp-3) var(--sp-4);text-align:left;border-bottom:1px solid var(--border)}
.table thead th{font-family:var(--font-display);font-weight:700;font-size:var(--fs-small);
	text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.table tbody tr:hover{background:var(--orange-tint)}
.table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ------------------------------- Layout utils ----------------------------- */
.grid{display:grid;gap:var(--gutter)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.stack>*+*{margin-top:var(--sp-4)}
.stack-lg>*+*{margin-top:var(--sp-6)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.flow-narrow{max-width:60ch}
.text-center{text-align:center}
.text-muted{color:var(--text-muted)}
.mt-0{margin-top:0}

@media (max-width:900px){
	.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
	.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}