/*
Theme Name: WebApp Studio
Description: Tema su misura per WebApp Studio (Perugia) — siti web, app mobile e software. Colori del logo: azzurro, grafite, verde.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: webappstudio
*/

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { height: auto; }
::selection { background: var(--wp--preset--color--azzurro); color: #fff; }

/* ---------- header ---------- */
header.wp-block-template-part:has(.wa-header) { display: contents; }
.wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0 !important; }
.wa-header { position: sticky; top: 0; z-index: 50; transition: box-shadow .25s ease; border-bottom: 1px solid var(--wp--preset--color--grigio-chiaro); }
.admin-bar .wa-header { top: var(--wp-admin--admin-bar--height, 0); }
.wa-header.is-scrolled { box-shadow: 0 10px 30px -20px rgba(28, 34, 38, .45); }
.wa-logo { display: block; line-height: 0; }
.wa-header .wa-logo img { width: 180px; height: auto; }
.wa-footer .wa-logo img { width: 190px; height: auto; }
.wa-header .wp-block-navigation-item__content { padding: .35em 0; position: relative; }
.wa-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
	background: var(--wp--preset--color--azzurro); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.wa-header .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.wa-header .current-menu-item > .wp-block-navigation-item__content::after,
.wa-header .current-menu-ancestor > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.wa-header .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--grigio-chiaro) !important; border-radius: 14px;
	padding: .45rem 0 !important; box-shadow: 0 18px 40px -22px rgba(28, 34, 38, .45); min-width: 250px !important;
}
.wa-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .5rem 1.1rem !important; }
.wa-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--azzurro-chiaro); }

/* ---------- elementi ---------- */
.wa-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .78rem !important; font-weight: 600; }
.wa-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--verde); margin-right: .5rem; vertical-align: middle; box-shadow: 0 0 0 4px rgba(132, 200, 8, .2); }
.wa-list-plain { list-style: none; padding-left: 0; }
.wa-list-plain li { margin: .35rem 0; }
.wa-footer a { color: #fff; text-decoration: none; }
.wa-footer a:hover { color: var(--wp--preset--color--azzurro); }
.wa-frame { background: #fff; border-radius: 22px; padding: clamp(.8rem, 2vw, 1.5rem); box-shadow: 0 30px 60px -36px rgba(28, 34, 38, .55); }
.wa-frame img { border-radius: 12px; }
.wa-check { list-style: none; padding-left: 0; }
.wa-check li { position: relative; padding-left: 1.9rem; margin: .55rem 0; }
.wa-check li::before { content: ""; position: absolute; left: 0; top: .32em; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--wp--preset--color--azzurro-chiaro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230072A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
.wa-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.wa-chips li { padding: .4rem .9rem; border-radius: 999px; background: #fff; border: 1px solid var(--wp--preset--color--grigio-chiaro); font-size: .9rem; font-weight: 500; }

/* sezioni scure */
.has-grafite-background-color h1, .has-grafite-background-color h2, .has-grafite-background-color h3 { color: #fff; }
.has-grafite-background-color a:not(.wp-element-button) { color: var(--wp--preset--color--azzurro); }
.has-grafite-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.wa-btn-outline-light .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, .7); }
.has-grafite-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wa-btn-outline-light .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--grafite); }
.wa-btn-light .wp-block-button__link:hover { background: var(--wp--preset--color--grafite) !important; color: #fff !important; }

/* ---------- home ---------- */
.wa-hero { position: relative; overflow: hidden; }
.wa-hero::before { /* onde del logo */
	content: ""; position: absolute; right: -180px; bottom: -260px; width: 720px; height: 720px; border-radius: 50%; pointer-events: none;
	background: repeating-radial-gradient(circle, transparent 0 46px, rgba(0, 172, 236, .13) 46px 62px);
	-webkit-mask: linear-gradient(135deg, transparent 35%, #000 70%); mask: linear-gradient(135deg, transparent 35%, #000 70%);
}
.wa-hero > * { position: relative; z-index: 1; }
.wa-hero h1 strong { color: var(--wp--preset--color--azzurro); font-weight: inherit; }
.wa-num { font-family: var(--wp--preset--font-family--titoli); font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--wp--preset--color--azzurro); }

/* card servizi (home e sottopagine) */
.wa-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.4rem; margin-top: var(--wp--preset--spacing--50); }
.wa-cards--3 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 0; }
.wa-card { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; text-decoration: none !important; color: var(--wp--preset--color--testo) !important; border: 1px solid var(--wp--preset--color--grigio-chiaro); transition: transform .3s ease, box-shadow .3s ease, border-color .3s; }
.wa-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(28, 34, 38, .5); border-color: var(--wp--preset--color--azzurro); }
.wa-card__img { width: 100%; aspect-ratio: 445 / 300; object-fit: contain; background: #fff; padding: .6rem; box-sizing: border-box; }
.wa-card__body { display: flex; flex-direction: column; gap: .35rem; padding: .4rem 1.3rem 1.3rem; flex: 1; }
.wa-card__title { font-family: var(--wp--preset--font-family--titoli); font-weight: 600; font-size: 1.25rem; line-height: 1.2; }
.wa-card__text { font-size: .92rem; color: var(--wp--preset--color--testo-tenue); flex: 1; }
.wa-card__more { font-weight: 600; font-size: .9rem; color: var(--wp--preset--color--azzurro-scuro); }

/* ---------- pagine servizio ---------- */
.wa-page-head { position: relative; overflow: hidden; }
.wa-page-head::after { content: ""; position: absolute; right: -120px; top: -200px; width: 460px; height: 460px; border-radius: 50%; pointer-events: none; background: repeating-radial-gradient(circle, transparent 0 34px, rgba(0, 172, 236, .12) 34px 46px); }
.wa-page-head > * { position: relative; z-index: 1; }
.wa-subtitle { color: var(--wp--preset--color--grigio-chiaro); }
.wa-subtitle p { margin: 0; max-width: 46rem; }
.wa-crumbs { font-size: .85rem; color: #9fb0b8; }
.wa-crumbs a { color: #cfdbe1 !important; text-decoration: none; }
.wa-crumbs a:hover { color: var(--wp--preset--color--azzurro) !important; }

/* ---------- form contatti (Contact Form 7) ---------- */
.wpcf7-form p { margin: 0 0 1.1rem; }
.wpcf7-form label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form input[type=tel], .wpcf7-form textarea, .wpcf7-form select {
	width: 100%; box-sizing: border-box; font: inherit; padding: .8rem 1rem; border-radius: 12px;
	border: 1px solid var(--wp--preset--color--grigio-chiaro); background: #fff; color: var(--wp--preset--color--testo);
	transition: border-color .2s, box-shadow .2s;
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus { outline: none; border-color: var(--wp--preset--color--azzurro); box-shadow: 0 0 0 4px rgba(0, 172, 236, .15); }
.wpcf7-form textarea { min-height: 150px; }
.wpcf7-form .wpcf7-acceptance label { font-weight: 400; display: inline; }
.wpcf7-form .wpcf7-list-item { margin: 0; }
.wpcf7-form input[type=submit] {
	background: var(--wp--preset--color--azzurro-scuro); color: #fff; border: 0; border-radius: 999px;
	padding: .9rem 2.2rem; font: inherit; font-weight: 600; cursor: pointer; transition: background .2s;
}
.wpcf7-form input[type=submit]:hover { background: var(--wp--preset--color--grafite); }
.wa-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
@media (max-width: 640px) { .wa-grid-2 { grid-template-columns: 1fr; } }

/* ---------- mobile ---------- */
@media (max-width: 781px) {
	.wa-hide-mobile { display: none !important; }
	.wa-header .wa-logo img { width: 140px; }
	.wa-hero::before { width: 420px; height: 420px; right: -160px; bottom: -200px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}