/*
Theme Name: Atos Notariais
Theme URI: https://atosnotariais.servicos.top
Author: Telex
Description: Tema institucional para o escritório de advocacia Atos Notariais — assessoria jurídica notarial e registral com foco em seriedade, confiança e acolhimento. Paleta petrol-teal com acentos dourados, tipografia serifada para títulos e sans-serif para corpo.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atos-notariais
Tags: block-patterns, block-styles, custom-colors, custom-fonts, custom-menu, editor-style, full-site-editing, one-column, translation-ready, wide-blocks
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
*/

/* =========================================================================
   0. RESETS & BASE
   ========================================================================= */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Ensure sticky positioning is never broken by ancestor overflow */
:root,
body,
.wp-site-blocks {
	overflow: visible;
}

/* =========================================================================
   1. TYPOGRAPHY POLISH
   ========================================================================= */

/* Display headings — Cormorant Garamond warmth */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	text-wrap: balance;
}

/* Italicised display accents — the legal-tradition serif voice */
h1 em,
h2 em,
h3 em,
.wp-block-heading em {
	font-style: italic;
	color: var(--wp--preset--color--champagne);
}

/* Body copy comfort */
p {
	text-wrap: pretty;
}

/* Fine-print / caption / metadata */
figcaption,
.wp-block-post-date,
.wp-element-caption {
	letter-spacing: 0.02em;
}

/* Blockquote citation */
.wp-block-quote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-text);
}

/* =========================================================================
   2. LINK STYLES
   ========================================================================= */

a {
	transition: color 0.2s ease;
}

/* Underline treatment for content links */
.wp-block-post-content a:not(.wp-block-button__link):not(.wp-block-navigation-item__content) {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--champagne);
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.wp-block-post-content a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):hover {
	text-decoration-color: var(--wp--preset--color--gold);
}

/* =========================================================================
   3. BUTTON STYLES
   ========================================================================= */

.wp-block-button__link {
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(201, 168, 76, 0.2);
}

.wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Outline variant */
.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 1.5px;
	border-style: solid;
	background: transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--petrol-deep);
	color: var(--wp--preset--color--champagne);
	border-color: var(--wp--preset--color--petrol-deep);
}

/* Gold gradient CTA — hero primary */
.wp-block-button.is-style-gold-gradient .wp-block-button__link {
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--champagne) 50%, var(--wp--preset--color--gold-light) 100%);
	color: var(--wp--preset--color--petrol-deep);
	box-shadow: 0 4px 20px rgba(201, 168, 76, 0.25);
}

.wp-block-button.is-style-gold-gradient .wp-block-button__link:hover {
	box-shadow: 0 6px 28px rgba(201, 168, 76, 0.35);
}

/* =========================================================================
   4. NAVIGATION
   ========================================================================= */

/* Desktop nav link underline on hover */
.wp-block-navigation-item__content {
	position: relative;
	transition: color 0.2s ease;
}

.wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 2px;
	background: var(--wp--preset--color--champagne);
	transition: width 0.25s ease;
}

.wp-block-navigation-item__content:hover::after {
	width: 60%;
}

/* Current page indicator */
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
	width: 60%;
	background: var(--wp--preset--color--gold);
}

/* =========================================================================
   5. MOBILE HAMBURGER OVERLAY
   ========================================================================= */

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
}

/* =========================================================================
   6. HEADER — GOLD ACCENT STRIP
   ========================================================================= */

/* Thin gold gradient bar beneath the header */
.site-header::after {
	content: "";
	display: block;
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--gold) 0%,
		var(--wp--preset--color--champagne) 40%,
		var(--wp--preset--color--gold-light) 60%,
		var(--wp--preset--color--gold) 100%
	);
}

/* =========================================================================
   7. IMAGE TREATMENTS
   ========================================================================= */

/* Warm, inviting image polish — no cold clinical look */
.wp-block-image img,
.wp-block-cover__image-background,
.wp-block-media-text__media img {
	border-radius: 3px;
}

/* Subtle warm filter on images for cohesion */
.wp-block-image:not(.is-style-unfiltered) img {
	filter: saturate(0.92) contrast(1.03);
	transition: filter 0.3s ease, transform 0.3s ease;
}

.wp-block-image:not(.is-style-unfiltered):hover img {
	filter: saturate(1) contrast(1);
}

/* Cover block overlay warmth */
.wp-block-cover::after {
	border-radius: 3px;
}

/* Gallery items */
.wp-block-gallery .wp-block-image img {
	border-radius: 2px;
}

/* =========================================================================
   8. CARDS & GROUP SURFACES
   ========================================================================= */

/* Card-style groups on cream backgrounds */
.wp-block-group.has-cream-background-color {
	border-radius: 4px;
	border: 1px solid var(--wp--preset--color--border-light);
	transition: box-shadow 0.3s ease, transform 0.25s ease;
}

.wp-block-group.has-cream-background-color:hover {
	box-shadow: 0 8px 32px rgba(27, 58, 61, 0.08);
	transform: translateY(-2px);
}

/* =========================================================================
   9. SEPARATOR POLISH
   ========================================================================= */

.wp-block-separator {
	opacity: 1;
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	max-width: 120px;
	border: none;
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--gold) 0%,
		var(--wp--preset--color--champagne) 100%
	);
	border-radius: 2px;
}

.wp-block-separator.is-style-wide {
	border: none;
	height: 1px;
}

/* =========================================================================
   10. COVER BLOCK REFINEMENTS
   ========================================================================= */

.wp-block-cover {
	border-radius: 0;
}

/* Hero cover blocks — full bleed, no rounding */
.wp-block-cover.alignfull {
	border-radius: 0;
}

/* Inner content in dark covers */
.wp-block-cover .wp-block-cover__inner-container {
	max-width: var(--wp--style--global--wide-size, 1320px);
}

/* =========================================================================
   11. COLUMNS — AREA-OF-PRACTICE CARDS GRID
   ========================================================================= */

/* Responsive card columns */
.wp-block-columns {
	flex-wrap: wrap;
}

@media (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* =========================================================================
   12. FORM ELEMENTS (Contact page)
   ========================================================================= */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--normal);
	color: var(--wp--preset--color--graphite);
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 3px;
	padding: 0.75rem 1rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--wp--preset--color--champagne);
	box-shadow: 0 0 0 3px rgba(212, 175, 106, 0.15);
}

/* =========================================================================
   13. TABLE STYLING
   ========================================================================= */

.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table td,
.wp-block-table th {
	border-color: var(--wp--preset--color--border-light);
	padding: var(--wp--preset--spacing--30);
}

.wp-block-table thead {
	background: var(--wp--preset--color--petrol-deep);
	color: var(--wp--preset--color--offwhite);
}

.wp-block-table thead th {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-color: var(--wp--preset--color--petrol);
}

/* =========================================================================
   14. CHAT WIDGET PLACEHOLDER
   ========================================================================= */

.chat-widget-placeholder {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--champagne) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 28px rgba(201, 168, 76, 0.35), 0 2px 8px rgba(0, 0, 0, 0.15);
	z-index: 100;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chat-widget-placeholder::before {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 2px solid rgba(212, 175, 106, 0.3);
	pointer-events: none;
}

.chat-widget-placeholder:hover {
	transform: scale(1.08);
	box-shadow: 0 8px 36px rgba(201, 168, 76, 0.45), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.chat-widget-placeholder svg {
	width: 26px;
	height: 26px;
	color: var(--wp--preset--color--petrol-deep);
}

/* =========================================================================
   15. WHATSAPP FIXED BUTTON (Mobile)
   ========================================================================= */

.whatsapp-fixed-btn {
	position: fixed;
	bottom: 1.5rem;
	left: 1.5rem;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
	z-index: 99;
	transition: transform 0.2s ease;
}

.whatsapp-fixed-btn:hover {
	transform: scale(1.08);
}

.whatsapp-fixed-btn svg {
	width: 28px;
	height: 28px;
	fill: #fff;
}

@media (min-width: 782px) {
	.whatsapp-fixed-btn {
		display: none;
	}
}

/* =========================================================================
   16. OAB BADGE (Hero)
   ========================================================================= */

.hero-oab-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--champagne);
	opacity: 0.7;
	padding: 0.35rem 0.9rem;
	border: 1px solid rgba(212, 175, 106, 0.2);
	border-radius: 2px;
}

/* =========================================================================
   17. CREDENTIAL STRIP (Hero bottom)
   ========================================================================= */

.credential-strip {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.credential-strip .credential-divider {
	width: 1px;
	height: 16px;
	background: rgba(212, 175, 106, 0.2);
	display: inline-block;
	vertical-align: middle;
	margin: 0 var(--wp--preset--spacing--30);
}

/* =========================================================================
   18. GOLD ACCENT STRIPE (section divider)
   ========================================================================= */

.gold-stripe {
	height: 5px;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--petrol) 0%,
		var(--wp--preset--color--gold) 30%,
		var(--wp--preset--color--champagne) 50%,
		var(--wp--preset--color--gold-light) 70%,
		var(--wp--preset--color--offwhite) 100%
	);
}

/* =========================================================================
   19. HERO SPLIT LAYOUT HELPERS
   ========================================================================= */

/* Decorative concentric circles in hero */
.hero-decoration-circle {
	position: absolute;
	top: 50%;
	left: 45%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1.5px solid rgba(212, 175, 106, 0.08);
	background: radial-gradient(circle, rgba(212, 175, 106, 0.04) 0%, transparent 70%);
	pointer-events: none;
}

.hero-decoration-circle-inner {
	position: absolute;
	top: 50%;
	left: 45%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1px solid rgba(212, 175, 106, 0.05);
	pointer-events: none;
}

/* Hero image curved mask edge */
.hero-image-mask::before {
	content: "";
	position: absolute;
	top: 0;
	left: -80px;
	width: 160px;
	height: 100%;
	background: var(--wp--preset--color--petrol);
	z-index: 3;
	border-radius: 0 50% 50% 0 / 0 8% 8% 0;
}

@media (max-width: 781px) {
	.hero-image-mask::before {
		display: none;
	}
}

/* =========================================================================
   20. POST / BLOG CARD REFINEMENTS
   ========================================================================= */

.wp-block-post-template .wp-block-post-featured-image img {
	border-radius: 3px 3px 0 0;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.wp-block-post-template .wp-block-post-title a {
	text-decoration: none;
}

.wp-block-post-template .wp-block-post-title a:hover {
	color: var(--wp--preset--color--petrol);
}

/* =========================================================================
   21. DETAILS / ACCORDION (FAQ)
   ========================================================================= */

details.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	padding-block: var(--wp--preset--spacing--30);
}

details.wp-block-details summary {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium-large);
	font-weight: 600;
	color: var(--wp--preset--color--petrol-deep);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

details.wp-block-details summary::-webkit-details-marker {
	display: none;
}

details.wp-block-details summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	color: var(--wp--preset--color--champagne);
	transition: transform 0.2s ease;
}

details.wp-block-details[open] summary::after {
	content: "\2212";
}

/* =========================================================================
   22. FOOTER POLISH
   ========================================================================= */

.site-footer a {
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-footer a:hover {
	color: var(--wp--preset--color--gold-light);
}

/* =========================================================================
   23. SELECTION COLOR
   ========================================================================= */

::selection {
	background: var(--wp--preset--color--champagne);
	color: var(--wp--preset--color--petrol-deep);
}

/* =========================================================================
   24. SCROLLBAR (thin, themed)
   ========================================================================= */

:root {
	scrollbar-color: var(--wp--preset--color--border-light) var(--wp--preset--color--offwhite);
	scrollbar-width: thin;
}

/* =========================================================================
   25. PRINT STYLES
   ========================================================================= */

@media print {
	.chat-widget-placeholder,
	.whatsapp-fixed-btn,
	.wp-block-navigation {
		display: none !important;
	}
}

/* =========================================================================
   26. LOOP LAYOUT UTILITIES
   ========================================================================= */

/* These classes are wired to the wp:query blocks emitted by content/pages and
   templates. Do not rename. Tune colours and spacing to theme.json tokens. */

/* Horizontal scrollable rail */
.wp-block-query.is-style-loop-rail .wp-block-post-template {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-bottom: var(--wp--preset--spacing--20);
}
.wp-block-query.is-style-loop-rail .wp-block-post-template > * {
	flex: 0 0 320px;
	scroll-snap-align: start;
}

/* Compact list with hairline row dividers */
.wp-block-query.is-style-loop-list .wp-block-post-template > * {
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	padding-block: var(--wp--preset--spacing--30);
}
.wp-block-query.is-style-loop-list .wp-block-post-template > *:last-child {
	border-bottom: 0;
}

/* Zigzag — flip the columns inside every even entry */
.wp-block-query.is-style-loop-zigzag .wp-block-post-template > *:nth-child(even) .wp-block-columns {
	flex-direction: row-reverse;
}

/* Timeline — vertical line with node markers per entry */
.wp-block-query.is-style-loop-timeline .wp-block-post-template {
	position: relative;
	padding-inline-start: 2.5rem;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0.5rem;
	width: 2px;
	background: var(--wp--preset--color--champagne);
	opacity: 0.15;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template > * {
	position: relative;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template > *::before {
	content: "";
	position: absolute;
	inset-inline-start: -2.25rem;
	inset-block-start: 0.6rem;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--wp--preset--color--champagne);
	border-radius: 50%;
	background: var(--wp--preset--color--offwhite);
}

/* Magazine — first child spans 2 columns of the grid */
.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
	grid-column: span 2;
}
@media (max-width: 600px) {
	.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
		grid-column: auto;
	}
}