/* =========================================================================
 * Curvita — Base styles
 * -------------------------------------------------------------------------
 * Typography, links, buttons, form elements. Everything here applies
 * globally — component-specific styles live in components.css (Step 5+).
 * =========================================================================
 */


/* ─── Body ────────────────────────────────────────────────────────── */

body {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-regular);
	line-height: var(--lh-base);
	color: var(--c-body-text);
	background: var(--c-body-bg);
}


/* ─── Headings ────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	color: var(--c-text);
	letter-spacing: var(--ls-normal);
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }


/* ─── Prose elements ──────────────────────────────────────────────── */

p {
	margin-block-end: var(--sp-4);
}
p:last-child {
	margin-block-end: 0;
}

strong,
b {
	font-weight: var(--fw-bold);
}

em,
i {
	font-style: italic;
}

small {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

hr {
	border: 0;
	border-top: var(--border-width-thin) solid var(--c-border);
	margin-block: var(--sp-6);
}


/* ─── Links ───────────────────────────────────────────────────────── */

a {
	color: var(--c-link);
	transition: color var(--transition-fast);
}

a:hover,
a:focus-visible {
	color: var(--c-link-hover);
}


/* ─── Focus ring — visible only for keyboard users ────────────────── */

:focus-visible {
	outline: 2px solid var(--c-coral);
	outline-offset: 2px;
}


/* ─── Utility: screen-reader-only text ────────────────────────────── */

.visually-hidden,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* But make it visible when focused (for skip-to-content links) */
.visually-hidden:focus,
.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
	white-space: normal;
}


/* ─── Images ──────────────────────────────────────────────────────── */

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}


/* ─── Buttons ─────────────────────────────────────────────────────── */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	font-family: var(--font-heading);
	font-size: var(--fs-button);
	font-weight: var(--fw-semibold);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--ls-normal);
	padding: 0.75rem 2.1875rem;      /* 12px 35px — brand spec (large) */
	border: var(--border-width) solid transparent;
	border-radius: var(--radius);
	background: transparent;
	color: inherit;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition:
		background var(--transition-fast),
		color var(--transition-fast),
		border-color var(--transition-fast);
}

.btn:disabled,
.btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}


/* Primary — navy bg, white text. Hover: coral (brand-consistent) */
.btn--primary {
	background: var(--c-primary);
	color: var(--c-primary-text);
	border-color: var(--c-primary);
}
.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--c-coral);
	border-color: var(--c-coral);
	color: var(--c-white);
}

/* Secondary — transparent, outlined in black. Hover fills black */
.btn--secondary {
	background: transparent;
	color: var(--c-black);
	border-color: var(--c-black);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
	background: var(--c-black);
	color: var(--c-white);
}

/* Small size variant — matches the "Επιλογή" / "Προσθήκη στο καλάθι"
 * buttons on product cards (8px 15px) */
.btn--sm {
	padding: 0.5rem 0.9375rem;
	font-size: 0.6875rem;  /* 11px */
}

/* Large size variant — for big CTAs on hero/landing sections */
.btn--lg {
	padding: 1rem 2.5rem;
	font-size: var(--fs-sm);
}

/* Full-width — useful in drawers and forms */
.btn--full {
	width: 100%;
}


/* ─── Form elements ───────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
	display: block;
	width: 100%;
	padding: var(--sp-3) var(--sp-4);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	color: var(--c-text);
	background: var(--c-white);
	border: var(--border-width-thin) solid var(--c-border);
	border-radius: var(--radius);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--c-coral);
	outline: none;
	box-shadow: var(--shadow-focus);
}

textarea {
	resize: vertical;
	min-height: 6rem;
}

label {
	display: block;
	font-weight: var(--fw-bold);
	margin-block-end: var(--sp-2);
}

/* ─── Placeholder text — a bit muted ──────────────────────────────── */
::placeholder {
	color: var(--c-text-muted);
	opacity: 1;
}


/* ─── Hide the "Comments are closed" message globally ─────────────── */

/* The legacy ignition plugin (still installed) hooks
 * ignition_the_post_comments() on ignition_after_single_entry, which
 * calls WP's comments_template(). Since pages don't support comments
 * by default, the fallback `<p class="nocomments">` ("Τα σχόλια είναι
 * απενεργοποιημένα.") renders on every page. There's a defensive PHP
 * unhook in inc/woocommerce.php — this CSS is belt-and-braces in
 * case another source ever renders the same element. */
.nocomments,
p.nocomments,
.comments-area:has(> .nocomments:only-child) {
	display: none !important;
}