/*
Theme Name: AdattoCasa
Theme URI: https://adattocasa.com/
Author: Neiko
Author URI: https://www.neiko.it/
Description: Tema AdattoCasa - 2026
Version: 1.0
License: GNU General Public License v2 or later
*/

/*  FONTS e COLORI */

@font-face {
    font-family: 'Jost*';
    src: local('Jost* Book'), local('Jost-Book'),
        url('assets/fonts/Jost-Book.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Jost*';
    src: local('Jost* Medium'), local('Jost-Medium'),
        url('assets/fonts/Jost-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Jost*';
    src: local('Jost* Semi'), local('Jost-Semi'),
        url('assets/fonts/Jost-Semi.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
	interpolate-size: allow-keywords;

	/* Primitives */
	--color-gunmetal: hsl(60 1 23);
	--color-grey:     hsl(0 0 50);
	--color-copper:   hsl(27 28 50);
	--color-white:    hsl(0 0 100);

	--unit-size: 12px;

	/* Tokens */
	--surface-primary: var(--color-gunmetal);
	--surface-secondary: var(--color-grey);
	--surface-tertiary: var(--color-copper);
	--border-primary: var(--color-white);
	--border-secondary: var(--color-grey);
	--text-primary: var(--color-white);
	--text-secondary: var(--color-copper);
	--text-tertiary: var(--color-grey);

    /* Fonts */
	--font-family: 'Jost*', Inter, Arial, sans-serif;
	--font-regular: 400;
	--font-medium: 500;
	--font-semi: 600;

    /* Animations */
	--ease-in: cubic-bezier(0.7, 0, 0.84, 0);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.9, 0, 0.1, 1);

    /* Layout */
    --external-padding: clamp(1rem, 1.875vw, 3rem);
}

/*
============================================
SCROLLBAR
============================================
*/

:root {
	scrollbar-width: thin;
	scrollbar-color: var(--surface-tertiary) var(--surface-primary);
}

/*
============================================
LAYOUT
============================================
*/

html {
	scrollbar-gutter: stable;
	font-size: clamp(calc(var(--unit-size) * 1.5), 1.250vw, calc(var(--unit-size) * 2));
	background: var(--surface-primary);
}

body {
    position: relative;
	margin: 0;
	padding: 0;
	background: var(--surface-primary);
	color: var(--text-primary);
	font-family: var(--font-family);
	font-weight: var(--font-regular);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
}

.container-fluid {
	padding-left: var(--external-padding);
	padding-right: var(--external-padding);
}

.row {
	--bs-gutter-x: var(--unit-size);
}

/*
============================================
TYPOGRAPHY
============================================
*/

.small {
	font-size: calc(1rem * 0.75);
}

b,
strong,
.bold {
	font-weight: var(--font-semi) !important;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: var(--font-regular);
}

h1,
.h1 {
	font-size: clamp(2.000rem, 3.125vw, 2.500rem);
	line-height: clamp(2.000rem, 3.125vw, 2.500rem);
}

h2,
.h2 {
	font-size: clamp(1.500rem, 2.500vw, 2.000rem);
	line-height: clamp(1.500rem, 2.500vw, 2.000rem);
}

h3,
.h3 {
	font-size: clamp(1.250rem, 1.875vw, 1.500rem);
	line-height: clamp(1.250rem, 1.875vw, 1.500rem);
}

h4,
.h4 {
	font-size: clamp(1.000rem, 1.458vw, 1.167rem);
}

h5,
.h5 {
	font-size: clamp(1.000rem, 1.458vw, 1.167rem);
}

.p,
p {
	font-size: 1rem;
	font-weight: var(--font-regular);
}

.copper {
	color: var(--text-secondary);
}

*::selection {
	background: var(--surface-tertiary);
	color: var(--surface-primary);
}

/*
============================================
SURFACES
============================================
*/

.surface-primary {
	background: var(--surface-primary);
}

.surface-secondary {
	background: var(--surface-secondary)
}

.surface-tertiary {
	background: var(--surface-tertiary);
}

/*
============================================
COMPONENTS
============================================
*/

@property --gradient-start {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@property --gradient-end {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@property --fade-size {
    syntax: '<angle>';
    initial-value: 40deg;
    inherits: false;
}

a.button,
button.button {
    position: relative;
    z-index: 0;
    border-radius: calc(var(--unit-size) * 0.5);
    overflow: hidden;
    padding: calc(var(--unit-size) * 0.66) calc(var(--unit-size) * 1.33);
    display: inline-block;
    background: var(--surface-primary);
    color: white;
    text-decoration: none;
    font-weight: 500;

	&:is(button) {
		border: 0;
		font: inherit;
		cursor: pointer;
	}

    &::before {
        content: '';
        position: absolute;
        z-index: -2;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        opacity: 0;

        background: conic-gradient(
            from var(--gradient-start),
            transparent 0deg,
            var(--surface-tertiary) min(var(--fade-size), var(--gradient-end)),
            var(--surface-tertiary) var(--gradient-end),
            transparent calc(var(--gradient-end) + min(var(--fade-size), var(--gradient-end)))
        );

        transition:
            --gradient-start 0s var(--ease-out) 400ms,
            --gradient-end 0s var(--ease-out) 400ms,
            --fade-size 0s var(--ease-out) 400ms,
            opacity 400ms var(--ease-out);
    }

    &::after {
        content: '';
        position: absolute;
        z-index: -1;
        left: 2px;
        top: 2px;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        background: var(--surface-primary);
        border-radius: calc(var(--unit-size) * 0.4);
    }

    &:hover::before {
        opacity: 1;

        --gradient-start: 180deg;
        --gradient-end: 360deg;
        --fade-size: 0deg;

        transition:
            --gradient-start 1.5s var(--ease-in-out),
            --gradient-end 1.5s var(--ease-in-out) 80ms,
            --fade-size 1.5s var(--ease-in-out),
            opacity 400ms var(--ease-in-out);
    }
}

a.link {
	color: var(--text-primary);
	text-decoration: none;
	position: relative;

	&::before {
		content: '';
		position: absolute;
		bottom: calc(-1 * (var(--unit-size) * 0.25));
		right: 0;
		width: 0;
		height: 1px;
		background-color: var(--surface-tertiary);
		transition: width 600ms var(--ease-in-out);
	}

	&:hover::before {
		right: unset;
		left: 0;
		width: 100%;
		transition: width 600ms var(--ease-out);
	}
}

.default-page-template-content a {
	color: var(--text-primary);
	text-decoration: none;
	position: relative;

	&::before {
		content: '';
		position: absolute;
		bottom: calc(-1 * (var(--unit-size) * 0.25));
		left: 0;
		width: 100%;
		height: 1px;
		background-color: var(--surface-tertiary);
		transition: width 600ms var(--ease-out);
	}

	&::after {
		content: '';
		position: absolute;
		bottom: calc(-1 * (var(--unit-size) * 0.25));
		right: 0;
		width: 0;
		height: 1px;
		background-color: var(--surface-tertiary);
		transition: width 600ms var(--ease-out) 300ms;
	}

	&:hover::before {
		left: unset;
		right: 0;
		width: 0%;
		transition: width 600ms var(--ease-in-out);
	}

	&:hover::after {
		right: unset;
		left: 0;
		width: 100%;
		transition: width 600ms var(--ease-in-out) 300ms;
	}
}

a.filled-button,
button.filled-button {
	color: var(--text-primary);
	background: var(--surface-tertiary);
	padding: calc(var(--unit-size) * 0.66) calc(var(--unit-size) * 1.33);
	border-radius: calc(var(--unit-size) / 2);
	border: none;
	text-decoration: none;
	transition: 600ms var(--ease-in-out);

	&:hover,
	&:focus-visible {
		background: var(--text-primary);
		color: var(--surface-primary);
	}

	&:active {
		scale: 0.9;
	}
}

.image-wrapper {
	overflow: hidden;
	border-radius: calc(var(--unit-size) / 1.5);

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/*
============================================
ANIMATIONS
============================================
*/

[animate="fadeInUp"] {
	transform: translateY(30%);
	opacity: 0;
	transition: 1s var(--ease-out);
	transition-delay: var(--delay);
	&.fadeInUp {
		transform: translateY(0);
		opacity: 1;
	}
}

[animate="fadeIn"] {
	opacity: 0;
	transition: 1s;
	transition-delay: var(--delay);
	&.fadeIn {
		opacity: 1;
	}
}

/*
============================================
PAGES
============================================
*/

.product-item {
	display: flex;
	flex-direction: column;
	align-items: start;

	.link-wrapper {
		position: relative;
		width: 100%;
		color: var(--text-primary);
		transition: scale 600ms var(--ease-out);

		&:active {
			scale: 0.95;
		}

		.image-wrapper img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: scale 600ms var(--ease-out);

			@media (hover: hover) {
				.link-wrapper:hover & {
					scale: 1.1;
				}
			}

		}

		a {
			color: inherit;
			text-decoration: none;

			.label {
				position: relative;

				&::before {
					content: '';
					position: absolute;
					bottom: calc(-1 * (var(--unit-size) * 0.25));
					right: 0;
					width: 0;
					height: 1px;
					background-color: var(--surface-tertiary);
					transition: width 600ms var(--ease-in-out);
				}

				.link-wrapper:hover &::before {
					right: unset;
					left: 0;
					width: 100%;
					transition: width 600ms var(--ease-out);
				}
			} 
		}
	}
}

.company-title-text {
	position: relative;

	h1,
	p {
		display: inline;
		font-size: clamp(2.000rem, 3.125vw, 2.500rem);
		line-height: clamp(2.000rem, 3.125vw, 2.500rem);
	}

	h1 {
		color: var(--text-secondary);
	}
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: calc(var(--unit-size) * 4);
	list-style: none;
	margin: 0;
	padding: 0;

	li {
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;
		gap: var(--30);

		img {
			width: clamp(80px, 8.333vw, 160px);
			height: clamp(80px, 8.333vw, 160px);
			object-fit: contain;
		}

		.p {
			text-align: center;
		}
	}

	@media (max-width: 767.98px) {
		grid-template-columns: repeat(2, 1fr);

		li {
			min-width: 0;
		}
	}
}

.ac-table {
	width: 100%;
	border-collapse: collapse;

	.col-1 { width: 10%; }
	.col-2 { width: 20%; }
	.col-3 { width: 30%; }
	.col-4 { width: 40%; }
	.col-5 { width: 50%; }
	.col-6 { width: 60%; }
	.col-7 { width: 70%; }
	.col-8 { width: 80%; }
	.col-9 { width: 90%; }
	.col-10 { width: 100%; }

	tr {
		border-bottom: 1px solid var(--border-secondary);
	}

	td {
		vertical-align: top;
		padding: var(--unit-size);
	}
}

.download-list {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
	list-style: none;

	li {
		width: 100%;
		padding: 0;

		.download-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			color: inherit;
			font: inherit;
			text-align: left;
			text-decoration: none;
			background: transparent;
			border: 0;
			border-bottom: 1px solid var(--border-secondary);
			cursor: pointer;
			padding: var(--unit-size);
			position: relative;
			transition: color 400ms var(--ease-in-out);

			@media (hover: hover) {
				&:hover {
					color: var(--text-primary);
				}
			}

			&.download-accordion-toggle[aria-expanded="true"] {
				color: var(--text-primary);
			}

			&::before {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 0;
				background: var(--border-secondary);
				transition: height 400ms var(--ease-in-out);
				z-index: 0;
			}

			@media (hover: hover) {
				&:hover::before {
					height: 100%;
				}
			}

			&.download-accordion-toggle[aria-expanded="true"]::before {
				height: 100%;
			}

			.download-label {
				position: relative;
			}

			.download-button {
				position: relative;
				width: calc(var(--unit-size) * 3);
				height: calc(var(--unit-size) * 3);
				display: flex;
				justify-content: center;
				align-items: center;
				color: var(--text-primary);
				background: var(--surface-primary);
				border: 1px solid var(--border-secondary);
				border-radius: calc(var(--unit-size) * 0.5);
				transition: 400ms var(--ease-in-out);

				svg {
					width: calc(var(--unit-size) * 2);
					height: auto;
					transition: 400ms var(--ease-in-out);
				}
			}

			@media (hover: hover) {
				&:hover .download-button {
					border: 1px solid var(--text-primary);
					background: var(--surface-secondary);
				}
			}
		}
	}

	/* .download-accordion-panel .download-item { } */

	.download-accordion-panel {
		height: 0;
		overflow: clip;
		transition: height 350ms var(--ease-in-out);
		margin-left: calc(var(--unit-size) * 2);
		padding-left: calc(var(--unit-size) * 2);
		border-left: 1px solid var(--border-secondary);
	}

	.download-accordion-panel.is-open {
		height: auto;
	}

	.download-accordion-toggle[aria-expanded="true"] .download-button {
		background: var(--surface-secondary);
		border: 1px solid var(--text-primary);

		svg {
			transform: rotate(180deg);
		}
	}
}

/*
============================================
PRIVACY
============================================
*/

.table-responsive .table {
	width: 100%;

	td,
	th {
		padding: var(--unit-size) calc(var(--unit-size) * 1.5);
		border: 1px solid var(--border-secondary);
	}
}

/*
============================================
FOOTER
============================================
*/

.site-footer-nav {
	position: relative;
}

.contacts-list,
.site-footer-nav-list {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
	list-style: none;
}

.social-list {
	display: flex;
	flex-direction: row;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--unit-size);

	img {
		width: clamp(1.500rem, 2.500vw, 2.000rem);
		height: auto;
		transition: 400ms var(--ease-out); 

		&:hover {
			opacity: 0.75;
			scale: 0.9;
		}
	}
}

.site-footer-nav-list {
	gap: var(--unit-size);
}

.otgs-development-site-front-end {
	display: none !important;
}