/*
Theme Name: Porto
Theme URI: https://wizark.pt/
Author: Wizark
Author URI: https://wizark.pt/
Description: Porto is a corporate block theme inspired by the Porto HTML template. It ships with a structured library of block patterns (headers, footers, heroes, features, services, counters, testimonials, team, pricing, FAQ, contact and full pages), section styles and custom blocks built for the Site Editor.
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: porto
Tags: full-site-editing, block-patterns, block-styles, style-variations, custom-colors, custom-menu, custom-logo, editor-style, featured-images, wide-blocks, translation-ready, business, portfolio
*/

/*
 * Global front-end styles.
 *
 * Keep this file small: design tokens live in theme.json, and styles that
 * belong to a single core block live in assets/css/blocks/core/{block}.css
 * (loaded only when that block is on the page — see inc/enqueue.php).
 */

/* Links */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .15em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Reduce widows and orphans */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

:where(pre) {
	overflow-x: auto;
}

/* Smooth anchor scrolling, respecting user preference */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

/* Sticky header: add the "is-sticky" class to the header pattern's outer group.
 * Sticky must be set on the template part wrapper (the group's parent), otherwise
 * it can only stick inside the wrapper's own height. */
.wp-site-blocks > .wp-block-template-part:has(> .porto-header.is-sticky) {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .porto-header.is-sticky) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .porto-header.is-sticky) {
		top: 0;
	}
}

.porto-header {
	transition: box-shadow 0.3s ease;
}

.porto-header.is-scrolled {
	box-shadow: var(--wp--preset--shadow--header);
}

/* Top bar collapses once the page scrolls (sticky header only). */
.porto-header.is-sticky .porto-header__top {
	transition: margin-top 0.3s ease;
}

.porto-header.is-sticky.is-scrolled .porto-header__top {
	margin-top: calc(-1 * var(--porto-header-top-height, 0px));
}

/* Transparent header overlapping the first block of the page. */
.porto-header.is-transparent {
	position: absolute;
	inset-inline: 0;
	z-index: 100;
}

/* Responsive visibility classes (.porto-hide-mobile/-tablet/-desktop) live in
 * assets/css/porto-compat.css and are set from the block sidebar. */

/* -------------------------------------------------------------------------
 * Utilities (add via Advanced → Additional CSS class(es))
 * ---------------------------------------------------------------------- */

.porto-overflow-hidden {
	overflow: hidden;
}

.porto-hover-lift {
	transition: transform .3s ease, box-shadow .3s ease;
}

.porto-hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--card-hover);
}

/* Reveal-on-scroll animation (see assets/js/theme.js). */
@media (prefers-reduced-motion: no-preference) {
	.porto-reveal {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity .6s cubic-bezier(.215, .61, .355, 1), transform .6s cubic-bezier(.215, .61, .355, 1);
		transition-delay: var(--porto-reveal-delay, 0ms);
	}

	.porto-reveal.is-revealed {
		opacity: 1;
		transform: none;
	}
}

/* Never hide content inside the editors. */
.editor-styles-wrapper .porto-reveal {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------------------
 * Page content
 * Pages are full width so Porto sections (align full) can span the screen.
 * Regular content (text, images…) gets breathing room at the top/bottom;
 * full-width sections bring their own padding.
 * ---------------------------------------------------------------------- */

.porto-page-content > :first-child:not(.alignfull) {
	margin-block-start: var(--wp--preset--spacing--60);
}

.porto-page-content > :last-child:not(.alignfull) {
	margin-block-end: var(--wp--preset--spacing--60);
}

/* Consecutive full-width sections touch each other, like in Porto. */
.porto-page-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* Header, main and footer sit flush (no root blockGap between template parts). */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Header search (icon-only button) on transparent / dark headers. */
.porto-header-search .wp-block-search__button {
	padding: 0.5rem;
	border: 0;
	background: transparent;
	color: inherit;
}

.porto-header-search .wp-block-search__button svg {
	fill: currentColor;
}

.porto-header-search .wp-block-search__input {
	color: var(--wp--preset--color--contrast);
}

/* -------------------------------------------------------------------------
 * Cards (brand rule: title, subtitle and button aligned across a row)
 * Cards in a grid/columns share the row height and push their buttons to the bottom.
 * ---------------------------------------------------------------------- */

:is(.is-layout-grid, .wp-block-column, .wp-block-post-template) > :is(.is-style-card, .is-style-card-bordered, .is-style-featured-box) {
	display: flex;
	flex-direction: column;
	height: 100%;
}

:is(.is-style-card, .is-style-card-bordered, .is-style-featured-box) > :is(.wp-block-buttons, .wp-block-read-more):last-child {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

/* Images inside cards follow the card's rounded corners. */
:is(.is-style-card, .is-style-card-bordered) > :is(.wp-block-image, .wp-block-post-featured-image):first-child,
:is(.is-style-card, .is-style-card-bordered) > :is(.wp-block-image, .wp-block-post-featured-image):first-child img {
	border-radius: var(--wp--custom--radius--medium) var(--wp--custom--radius--medium) 0 0;
}

/* Eyebrows on dark backgrounds (dark/blue sections, covers) use the light
 * technical blue: the darker text shade is only readable on light backgrounds. */
:is(.is-style-section-dark, .is-style-section-primary, .wp-block-cover:not(.is-light)) .is-style-eyebrow:not(.has-text-color) {
	color: var(--wp--preset--color--secondary);
}

/* -------------------------------------------------------------------------
 * Header: transparent on the homepage (over the hero video), white on scroll.
 * ---------------------------------------------------------------------- */

.wp-site-blocks > .wp-block-template-part:has(> .porto-header.is-transparent) {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 100;
}

.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .porto-header.is-transparent) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.porto-header.is-transparent {
	position: static;
	background: linear-gradient(180deg, rgba(7, 21, 33, 0.55) 0%, rgba(7, 21, 33, 0) 100%);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.porto-header.is-transparent:is(.is-scrolled, .has-open-panel, .has-open-drawer) {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

.porto-header.is-transparent:is(.is-scrolled, .has-open-panel, .has-open-drawer) :is(a, .wp-block-site-title a, .porto-menu__link, .porto-menu__toggle, .porto-menu__burger, .porto-lang, .wp-block-search__button):not(.porto-menu__panel *) {
	color: var(--wp--preset--color--primary) !important;
}

.porto-header.is-transparent:is(.is-scrolled, .has-open-panel, .has-open-drawer) .wp-block-button.is-style-cta .wp-block-button__link {
	color: var(--wp--preset--color--contrast) !important;
}

/* Logo: white version over the hero, blue version once the header turns white. */
.porto-logo {
	margin: 0;
	line-height: 0;
	flex-shrink: 0;
}

.porto-logo img {
	max-width: 100%;
	height: auto;
}

/* Logos (header, footer, certifications, funding) are never rounded, framed or cropped. */
.porto-logo img,
.porto-logo a,
.porto-header .wp-block-image img,
footer .wp-block-image img {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible;
	object-fit: contain;
}

.porto-header.is-transparent .porto-logo--dark,
.porto-header.is-transparent:is(.is-scrolled, .has-open-panel, .has-open-drawer) .porto-logo--light {
	display: none;
}

.porto-header.is-transparent:is(.is-scrolled, .has-open-panel, .has-open-drawer) .porto-logo--dark {
	display: block;
}

@media (max-width: 781px) {
	.porto-header .porto-logo img {
		width: 150px !important;
	}
}

/* -------------------------------------------------------------------------
 * Header layout with the mega menu (block porto/menu, src/blocks/menu).
 * The header is the positioning box of the full-width panels.
 * ---------------------------------------------------------------------- */

.porto-header {
	position: relative;
}

/* Pre-header hidden when its menu is empty. */
.porto-header__top:not(:has(.porto-menu__item)) {
	display: none;
}

.porto-header__top .porto-menu--pre-header {
	width: 100%;
}

/* Mobile / tablet: logo left; search, then hamburger on the right.
 * Language and CTA move to the bottom of the menu panel. */
@media (max-width: 1279.98px) {
	.porto-header__desktop-only {
		display: none !important;
	}

	.porto-header__actions > .porto-menu--mega {
		order: 10;
	}

	.porto-header__actions {
		gap: 0.25rem !important;
	}
}

/* Footer: "Preferências de cookies" next to the legal menu, same look. */
.porto-footer-legal {
	margin: 0;
}

.porto-footer-legal a {
	color: inherit;
}

.porto-footer-legal a:hover,
.porto-footer-legal a:focus-visible {
	text-decoration: underline;
}

/* Header with the larger type scale: CTA on one line. Seven menu items only fit
 * with a compact bar between 1280 and 1440px and tighter gaps above. */
.porto-header .wp-block-button__link {
	white-space: nowrap;
}

.porto-header__main > .alignwide {
	gap: var(--wp--preset--spacing--30) !important;
}

@media (min-width: 1280px) and (max-width: 1439.98px) {
	.porto-menu--mega .porto-menu__link {
		font-size: 0.8125rem;
	}

	.porto-menu--mega .porto-menu__list {
		gap: 0.7rem;
	}

	.porto-header .porto-logo img {
		width: 140px !important;
	}

	.porto-header__actions {
		gap: 0.6rem !important;
	}

	.porto-header .is-style-cta > .wp-block-button__link {
		padding: 0.6rem 1rem;
		font-size: 0.75rem;
	}
}

@media (min-width: 1440px) {
	.porto-menu--mega .porto-menu__link {
		font-size: 0.875rem;
	}

	.porto-menu--mega .porto-menu__list {
		gap: 1rem;
	}

	.porto-header__actions {
		gap: 0.625rem !important;
	}

	.porto-header .is-style-cta > .wp-block-button__link {
		padding-inline: 1.1rem;
		font-size: 0.8125rem;
	}
}

/* Mobile: breadcrumbs on one compact line. */
@media (max-width: 781.98px) {
	.wp-block-porto-breadcrumbs {
		font-size: var(--wp--preset--font-size--x-small) !important;
	}
}