/*
Theme Name: Diarie
Theme URI: https://diarie.com.br
Author: Diarie
Description: Tema do marketplace Diarie. Cabeçalho com menu e botão de pedido, rodapé com links e dados da empresa, menu de celular e modelos de blog, busca e 404. Feito para o plugin Diarie — Marketplace de Serviços.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: diarie-tema
Tags: full-site-editing, block-patterns, custom-logo, custom-menu, wide-blocks
*/

/* ------------------------------------------------------------------
 * Cabeçalho
 * ---------------------------------------------------------------- */
.dt-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--wp--preset--color--ice-2);
}
.dt-header__bar {
	min-height: 76px;
	gap: 28px;
}
.dt-header .wp-block-site-logo img {
	display: block;
	height: auto;
}
.dt-header .wp-block-site-title { margin: 0; font-weight: 900; font-size: 26px; }
.dt-header .wp-block-site-title a { color: var(--wp--preset--color--primary); text-decoration: none; }

/* Links do menu: o traço menta da logo aparece embaixo do item ativo ou em foco */
.dt-nav { flex: 1; }
.dt-nav .wp-block-navigation-item__content {
	position: relative;
	padding: 8px 2px;
	font-weight: 800;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.dt-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 8px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 30 2, 68 0, 98 4' fill='none' stroke='%2322E39B' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .18s ease;
}
.dt-nav .wp-block-navigation-item__content:hover::after,
.dt-nav .wp-block-navigation-item__content:focus-visible::after,
.dt-nav .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.dt-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primary); }

.dt-header__actions { gap: 18px; flex-shrink: 0; }
.dt-account {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 800;
	color: var(--wp--preset--color--deep);
	text-decoration: none;
	white-space: nowrap;
}
.dt-account svg { width: 22px; height: 22px; }
.dt-account:hover { color: var(--wp--preset--color--primary); }
.dt-cta .wp-block-button__link { white-space: nowrap; }
.dt-only-mobile { display: none !important; }

/* Menu aberto no celular */
.dt-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px 20px 32px;
}
.dt-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 56px;
	gap: 6px;
}
.dt-nav .is-menu-open .wp-block-navigation-item__content {
	color: #fff;
	font-size: 24px;
	padding: 10px 0;
}
.dt-nav .is-menu-open .wp-block-navigation-item__content::after { bottom: 2px; }
.dt-nav .wp-block-navigation__responsive-container-open,
.dt-nav .wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
}
.dt-nav .wp-block-navigation__responsive-container-open { background: var(--wp--preset--color--ice); color: var(--wp--preset--color--deep); }
.dt-nav .wp-block-navigation__responsive-container-close { color: #fff; }

.dt-nav .wp-block-navigation__container { flex-wrap: nowrap; }
.dt-nav .wp-block-navigation-item__content { white-space: nowrap; }

@media (max-width: 1080px) {
	.dt-hide-md { display: none !important; }
	.dt-header__bar { gap: 18px; }
}
/* Até 960px o menu vira o botão de abrir (o WordPress só faz isso abaixo de 600px). */
@media (max-width: 960px) {
	.dt-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.dt-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.dt-header__bar.dt-header__bar { justify-content: flex-start; }
	.dt-nav { flex: 0 0 auto; order: 3; }
	.dt-header__actions { margin-left: auto; }
	.dt-only-mobile, .dt-hide-md { display: block !important; }
}
@media (max-width: 599px) {
	.dt-header__bar { min-height: 64px; gap: 10px; }
	.dt-header .wp-block-site-logo img { width: 112px !important; }
	.dt-account { display: none; }
	.dt-cta .wp-block-button__link { padding: 10px 16px; font-size: 15px; }
}

/* ------------------------------------------------------------------
 * Conteúdo
 * ---------------------------------------------------------------- */
.dt-main { min-height: 50vh; }
body.diarie-screen .dt-main { padding-top: 24px !important; padding-bottom: 0 !important; }
body.diarie-screen .dt-main > .wp-block-post-title { display: none; }

.dt-postcard {
	background: var(--wp--preset--color--ice);
	border-radius: 20px;
	padding: 24px 26px;
}
.dt-postcard .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--deep); }
.dt-postcard .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }
.dt-meta { color: var(--wp--preset--color--ink-soft); font-weight: 700; font-size: 14px; }
.wp-block-post-featured-image img { border-radius: 20px; }
.dt-404-mark { font-size: clamp(96px, 18vw, 180px); line-height: .9; font-weight: 900; color: var(--wp--preset--color--primary); letter-spacing: -.04em; margin: 0; }

/* ------------------------------------------------------------------
 * Rodapé
 * ---------------------------------------------------------------- */
.dt-footer {
	position: relative;
	margin-top: 48px;
	background: var(--wp--preset--color--deep);
	color: rgba(255, 255, 255, .86);
	border-radius: 32px 32px 0 0;
	overflow: hidden;
}
/* O traço menta da logo atravessa o topo do rodapé. */
.dt-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 30px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M-10 26 C 300 4, 820 -2, 1210 14' fill='none' stroke='%2322E39B' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	pointer-events: none;
}
.dt-footer a { color: #fff; text-decoration: none; }
.dt-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dt-footer h2 {
	color: #fff;
	font-size: 16px;
	font-weight: 900;
	margin: 0 0 14px;
}
.dt-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dt-footer ul.dt-links { padding-left: 0; }
.dt-footer li { margin: 0; font-weight: 600; }
.dt-footer__grid { gap: 36px 28px; }
@media (min-width: 1000px) {
	.dt-footer__grid.dt-footer__grid { grid-template-columns: 1.35fr repeat(4, 1fr); }
}
@media (min-width: 600px) and (max-width: 999px) {
	.dt-footer__grid.dt-footer__grid { grid-template-columns: repeat(2, 1fr); }
	.dt-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
	.dt-footer__grid.dt-footer__grid { grid-template-columns: 1fr; }
}
.dt-footer__grid > .wp-block-group:not(.dt-footer__brand) > * { margin-block-start: 0; }
body.diarie-screen .dt-footer { margin-top: 24px; }
.dt-footer p:empty { display: none; }
.dt-contact a { overflow-wrap: anywhere; }
.dt-footer__brand .wp-block-site-logo {
	display: inline-block;
	background: #fff;
	border-radius: 999px;
	padding: 10px 18px;
	line-height: 0;
}
.dt-footer__brand p { margin: 14px 0 0; }
.dt-footer__tagline { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.3; }
.dt-contact { display: grid; gap: 6px; margin-top: 16px; font-weight: 700; }
.dt-contact a { display: inline-flex; gap: 8px; align-items: center; }
.dt-contact svg { width: 18px; height: 18px; flex: none; color: var(--wp--preset--color--mint); }
.dt-footer__cta .wp-block-button__link { margin-top: 18px; }
.dt-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .7);
}
.dt-footer__legal p { margin: 0; }
.dt-company span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--wp--preset--color--mint); margin: 0 10px 2px; vertical-align: middle; }

@media (max-width: 781px) {
	.dt-footer { border-radius: 24px 24px 0 0; margin-top: 40px; }
	.dt-company span { display: block; }
	.dt-company span + span::before { display: none; }
}

/* Acessibilidade */
:where(.dt-header, .dt-footer) a:focus-visible,
.dt-cta .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--mint);
	outline-offset: 3px;
	border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
	.dt-nav .wp-block-navigation-item__content::after { transition: none; }
}

/* Botão contornado */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--ice-2);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ice);
	color: var(--wp--preset--color--deep);
}