/**
 * Footer — υλοποίηση του εγκεκριμένου orthofocus-footer-v2.
 * Markup: template-parts/footer/ · Λογική: inc/footer.php · Χωρίς JavaScript.
 *
 * Mobile-first:
 *   έως 520px     μία στήλη
 *   521–767px     λογότυπο σε όλο το πλάτος, μενού ανά δύο, support κάτω
 *   768–1050px    λογότυπο + μενού σε μία σειρά, support σε όλο το πλάτος (οριζόντιο)
 *   1051px+       4 στήλες: λογότυπο/επικοινωνία, προϊόντα, πληροφορίες, support (όριο 1050px του mockup)
 * Αν λείπει μενού ή support box, οι υπόλοιπες στήλες μοιράζονται τον χώρο (flex, χωρίς κενές στήλες).
 *
 * Οι διαστάσεις του mockup είναι tokens στο .of-footer και αλλάζουν μόνο εκεί.
 * Χρώματα και γραμματοσειρά έρχονται από τα global tokens του Design System.
 */

.of-footer {
	/* Κύριο μέρος */
	--ft-padding: 52px 0 36px;
	--ft-gap: 34px 28px;
	--ft-brand-grow: 1.35;
	--ft-col-grow: 1;
	--ft-support-grow: 1.15;
	--ft-brand-max: 340px;

	/* Λογότυπο */
	--ft-logo-gap: 10px;
	--ft-logo-margin: 18px;
	--ft-logo-size: 28px;
	--ft-logo-tracking: -0.035em;
	--ft-logo-image-h: 48px;
	--ft-logo-mark: 38px;
	--ft-logo-mark-radius: 12px;
	--ft-logo-mark-size: 18px;

	/* Κείμενα */
	--ft-description-size: var(--fs-small);
	--ft-description-lh: 1.75;
	--ft-description-max: 320px;
	--ft-description-margin: 22px;
	--ft-contact-gap: 10px;
	--ft-contact-size: 13px;
	--ft-contact-lh: 1.5;
	--ft-contact-icon: 17px;
	--ft-contact-stroke: 1.9;
	--ft-contact-icon-offset: 2px;
	--ft-title-size: var(--fs-small);
	--ft-title-margin: 18px;
	--ft-links-gap: 11px;
	--ft-link-size: 13px;

	/* Support box */
	--ft-support-padding: 22px;
	--ft-support-radius: 16px;
	--ft-support-bg: color-mix(in srgb, var(--color-on-primary) 5.5%, transparent);
	--ft-support-border: color-mix(in srgb, var(--color-on-primary) 8%, transparent);
	--ft-support-title-size: var(--fs-body);
	--ft-support-title-lh: 1.35;
	--ft-support-title-margin: 9px;
	--ft-support-text-size: 13px;
	--ft-support-text-lh: 1.6;
	--ft-support-text-margin: 17px;
	--ft-support-text-max: 520px;
	--ft-support-gap: 24px;
	--ft-support-btn-height: 42px;
	--ft-support-btn-padding-x: 16px;
	--ft-support-btn-size: 13px;

	/* Κάτω μπάρα */
	--ft-bottom-line: color-mix(in srgb, var(--color-on-primary) 9%, transparent);
	--ft-bottom-padding: 22px 0;
	--ft-bottom-min-h: 0px;
	--ft-bottom-size: var(--fs-xs);
	--ft-legal-gap: 12px 16px;

	/* Χρώματα κειμένου πάνω στο σκούρο μωβ */
	--ft-text: color-mix(in srgb, var(--color-on-primary) 68%, transparent);
	--ft-text-strong: color-mix(in srgb, var(--color-on-primary) 82%, transparent);
	--ft-link: color-mix(in srgb, var(--color-on-primary) 66%, transparent);
	--ft-support-text: color-mix(in srgb, var(--color-on-primary) 64%, transparent);
	--ft-bottom-text: color-mix(in srgb, var(--color-on-primary) 52%, transparent);

	/* Focus: ανοιχτό περίγραμμα, για να φαίνεται πάνω στο σκούρο φόντο */
	--focus-color: var(--color-on-primary);

	background-color: var(--color-primary-dark);
	color: var(--color-on-primary);
	line-height: normal;
}

/* Μικρό κινητό (έως 520px, όπως το mockup) */
@media (max-width: 520px) {
	.of-footer {
		--container-padding: 14px;
	}
}

@media (min-width: 521px) {
	.of-footer {
		--ft-legal-gap: 18px;
	}
}

/* Tablet 768–1050: το λογότυπο λίγο φαρδύτερο (όπως το mockup) */
@media (min-width: 768px) and (max-width: 1050px) {
	.of-footer {
		--ft-brand-grow: 1.4;
	}
}

/* Tablet 768+ */
@media (min-width: 768px) {
	.of-footer {
		--ft-padding: 64px 0 42px;
		--ft-gap: 46px;
		--ft-bottom-padding: 0;
		--ft-bottom-min-h: 72px;
	}
}

/* ==========================================================================
   Διάταξη στηλών
   ========================================================================== */

.of-footer .of-footer__main {
	padding: var(--ft-padding);
}

.of-footer .of-footer__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ft-gap);
}

/* Κινητό: όλα σε μία στήλη */
.of-footer .of-footer__brand,
.of-footer .of-footer__col,
.of-footer .of-footer__support {
	flex: 1 1 100%;
	min-width: 0;
}

/* 521+: λογότυπο σε όλο το πλάτος, μενού ανά δύο */
@media (min-width: 521px) {
	.of-footer .of-footer__col {
		flex: var(--ft-col-grow) 1 0;
	}
}

/* 768+: λογότυπο και μενού σε μία σειρά, support από κάτω σε όλο το πλάτος */
@media (min-width: 768px) {
	.of-footer .of-footer__brand {
		flex: var(--ft-brand-grow) 1 0;
	}
}

/* 1051+: 4 στήλες όπως το mockup */
@media (min-width: 1051px) {
	.of-footer .of-footer__support {
		flex: var(--ft-support-grow) 1 0;
	}
}

/* ==========================================================================
   Λογότυπο, κείμενο, επικοινωνία
   ========================================================================== */

.of-footer .of-footer__brand > * {
	max-width: var(--ft-brand-max);
}

.of-footer .of-footer__logo,
.of-footer .of-footer__logo:hover,
.of-footer .of-footer__logo:focus {
	display: inline-flex;
	align-items: center;
	gap: var(--ft-logo-gap);
	margin-bottom: var(--ft-logo-margin);
	color: var(--color-on-primary);
	font-size: var(--ft-logo-size);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ft-logo-tracking);
	text-decoration: none;
}

.of-footer .of-footer__logo-image {
	width: auto;
	max-height: var(--ft-logo-image-h);
}

.of-footer .of-footer__logo-mark {
	display: grid;
	flex: none;
	place-items: center;
	width: var(--ft-logo-mark);
	height: var(--ft-logo-mark);
	border-radius: var(--ft-logo-mark-radius);
	background-color: var(--color-accent);
	color: var(--color-on-accent);
	font-size: var(--ft-logo-mark-size);
	letter-spacing: 0;
}

.of-footer .of-footer__description {
	max-width: var(--ft-description-max);
	margin: 0 0 var(--ft-description-margin);
	color: var(--ft-text);
	font-size: var(--ft-description-size);
	line-height: var(--ft-description-lh);
}

.of-footer .of-footer__contact {
	display: grid;
	gap: var(--ft-contact-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.of-footer .of-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: var(--ft-contact-gap);
	margin: 0;
	color: var(--ft-text-strong);
	font-size: var(--ft-contact-size);
	line-height: var(--ft-contact-lh);
}

.of-footer .of-footer__contact-icon {
	--icon-size: var(--ft-contact-icon);
	--icon-stroke: var(--ft-contact-stroke);
	margin-top: var(--ft-contact-icon-offset);
	color: var(--color-accent);
}

.of-footer .of-footer__contact-link,
.of-footer .of-footer__contact-link:visited {
	color: inherit;
	text-decoration: none;
}

.of-footer .of-footer__contact-link:hover,
.of-footer .of-footer__contact-link:focus {
	color: var(--color-on-primary);
}

/* ==========================================================================
   Στήλες μενού
   ========================================================================== */

.of-footer .of-footer__title {
	margin: 0 0 var(--ft-title-margin);
	color: var(--color-on-primary);
	font-size: var(--ft-title-size);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
}

.of-footer .of-footer__links {
	display: grid;
	gap: var(--ft-links-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.of-footer .of-footer__links li {
	margin: 0;
}

.of-footer .of-footer__links a,
.of-footer .of-footer__links a:visited {
	color: var(--ft-link);
	font-size: var(--ft-link-size);
	text-decoration: none;
	transition: color var(--transition-default);
}

.of-footer .of-footer__links a:hover,
.of-footer .of-footer__links a:focus,
.of-footer .of-footer__links .current-menu-item > a {
	color: var(--color-on-primary);
}

/* ==========================================================================
   Support box
   ========================================================================== */

.of-footer .of-footer__support-box {
	padding: var(--ft-support-padding);
	border: var(--border-width) solid var(--ft-support-border);
	border-radius: var(--ft-support-radius);
	background-color: var(--ft-support-bg);
}

.of-footer .of-footer__support-title {
	margin: 0 0 var(--ft-support-title-margin);
	color: var(--color-on-primary);
	font-size: var(--ft-support-title-size);
	font-weight: var(--fw-bold);
	line-height: var(--ft-support-title-lh);
}

.of-footer .of-footer__support-text {
	margin: 0 0 var(--ft-support-text-margin);
	color: var(--ft-support-text);
	font-size: var(--ft-support-text-size);
	line-height: var(--ft-support-text-lh);
}

/* 768–1050: οριζόντιο support box σε όλο το πλάτος (όπως το mockup) */
@media (min-width: 768px) and (max-width: 1050px) {
	.of-footer .of-footer__support-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--ft-support-gap);
	}

	.of-footer .of-footer__support-text {
		max-width: var(--ft-support-text-max);
		margin-bottom: 0;
	}
}

/* Κουμπί: button component (primary), στις διαστάσεις του mockup */
.of-footer .of-footer__support-btn {
	--btn-height: var(--ft-support-btn-height);
	--btn-padding-x: var(--ft-support-btn-padding-x);
	flex-shrink: 0;
	font-size: var(--ft-support-btn-size);
	font-weight: var(--fw-bold);
}

/* ==========================================================================
   Κάτω μπάρα
   ========================================================================== */

.of-footer .of-footer__bottom {
	border-top: var(--border-width) solid var(--ft-bottom-line);
}

.of-footer .of-footer__bottom-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-5);
	min-height: var(--ft-bottom-min-h);
	padding: var(--ft-bottom-padding);
	color: var(--ft-bottom-text);
	font-size: var(--ft-bottom-size);
}

@media (min-width: 768px) {
	.of-footer .of-footer__bottom-inner {
		flex-direction: row;
		align-items: center;
	}
}

.of-footer .of-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ft-legal-gap);
}

.of-footer .of-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ft-legal-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.of-footer .of-footer__legal-links li {
	margin: 0;
}

.of-footer .of-footer__legal-links a,
.of-footer .of-footer__legal-links a:visited {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-default);
}

.of-footer .of-footer__legal-links a:hover,
.of-footer .of-footer__legal-links a:focus {
	color: var(--color-on-primary);
}

/* Credit (σταθερό): δεν σπάει σε δύο γραμμές, δεν βγαίνει έξω από την οθόνη */
.of-footer .of-footer__credit {
	margin: 0;
	white-space: nowrap;
}

.of-footer .of-footer__credit a,
.of-footer .of-footer__credit a:visited {
	color: var(--ft-text-strong);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	transition: color var(--transition-default);
}

.of-footer .of-footer__credit a:hover,
.of-footer .of-footer__credit a:focus {
	color: var(--color-on-primary);
}