/*
Theme Name: Area IT (Twenty Twenty-Five child)
Template: twentytwentyfive
Description: Twenty Twenty-Five child theme with the Area IT header and footer.
Author: Area IT
Version: 1.0.0
Requires at least: 6.7
Text Domain: areait-tt5
*/

:root {
	--area-navy: #0b1f4d;
	--area-navy-text: #1b2a4e;
	--area-pink: #e8336f;
	--area-blue: #3b9be8;
	--area-yellow: #ffc61a;
	--area-orange: #f7941d;
	--area-notice-bg: #d7f1fb;
	--area-border: #e8ecf3;
}

/* ---------- Page layout ---------- */

/* Pages (templates/page.html) run straight from header to content to footer */
.wp-site-blocks > .area-main,
.wp-site-blocks > .area-main + footer {
	margin-block-start: 0;
}

/*
 * Plain text pages (privacy policy, terms, ...) and blog posts. Only direct children of the
 * page content are styled, so designed pages built inside a full-width
 * section keep their own typography.
 */
:is(.area-main, .single main) .wp-block-post-content > :is(p, ul, ol, blockquote, table) {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: normal;
	color: #2b2f3a;
}

:is(.area-main, .single main) .wp-block-post-content > :is(ul, ol) li {
	margin-bottom: 6px;
}

:is(.area-main, .single main) .wp-block-post-content > :is(h1, h2, h3, h4) {
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	color: var(--area-navy-text);
	margin-top: 2em;
}

:is(.area-main, .single main) .wp-block-post-content > h1 { font-size: 32px; }
:is(.area-main, .single main) .wp-block-post-content > h2 { font-size: 24px; }
:is(.area-main, .single main) .wp-block-post-content > h3 { font-size: 20px; }
:is(.area-main, .single main) .wp-block-post-content > h4 { font-size: 17px; }

:is(.area-main, .single main) .wp-block-post-content > p a {
	color: var(--area-blue);
}

/*
 * Blog posts (TT5 single template): wider column and the same typography the
 * posts' own ".ait-post" styles use (Roboto 17px, navy bold headings).
 */
.single main {
	--wp--style--global--content-size: 860px;
	--area-post-text: #4d5866;
	--area-post-navy: #002450;
	--area-post-line: #dde5f0;
}

.single main :is(.wp-block-post-title, .wp-block-post-content) {
	font-family: Roboto, sans-serif;
}

.single main .wp-block-post-title {
	font-size: 38px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	color: var(--area-post-navy);
	text-wrap: balance;
}

/* Blog list (Jaunumi) and category archives – templates/home.html, templates/archive.html */
.wp-site-blocks > .area-blog,
.wp-site-blocks > .area-blog + footer {
	margin-block-start: 0;
}

.area-blog {
	padding-block: 40px 72px;
	font-family: Roboto, sans-serif;
	font-weight: 400;
}

.area-blog .area-blog__title {
	margin-bottom: 8px;
	font-family: inherit;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	color: #002450;
}

.area-blog .wp-block-post-template {
	margin-block-start: 0;
}

.area-blog__item {
	display: grid;
	grid-template-columns: 280px 1fr;
	column-gap: 28px;
	align-content: start;
	padding-block: 28px;
	border-bottom: 1px solid #dde5f0;
}

.area-blog__item > * {
	grid-column: 2;
	margin-block: 0 !important;
}

.area-blog__item > .wp-block-post-featured-image {
	grid-column: 1;
	grid-row: 1 / span 3;
}

.area-blog__item:not(:has(> .wp-block-post-featured-image)) {
	display: block;
}

.area-blog__item .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1.9 / 1;
	object-fit: cover;
	border-radius: 10px;
}

.area-blog__item .wp-block-post-title {
	font-family: inherit;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
}

.area-blog__item .wp-block-post-title a {
	color: #002450;
	text-decoration: none;
}

.area-blog__item .wp-block-post-title a:hover {
	color: var(--area-blue);
}

.area-blog__item .wp-block-post-date {
	margin-top: 6px !important;
	font-size: 13px;
	color: #7a8594;
}

.area-blog__item .wp-block-post-excerpt {
	margin-top: 10px !important;
	font-size: 15px;
	line-height: 1.6;
	color: #4d5866;
}

.area-blog__item .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.area-blog__item .wp-block-post-excerpt__more-text {
	margin: 8px 0 0;
}

.area-blog__item .wp-block-post-excerpt__more-link {
	font-weight: 500;
	color: var(--area-blue);
	text-decoration: none;
}

.area-blog__item .wp-block-post-excerpt__more-link:hover {
	color: var(--area-pink);
}

.area-blog .area-blog__pagination {
	margin-top: 32px;
	font-size: 15px;
	font-weight: 500;
}

.area-blog .area-blog__pagination a {
	color: #002450;
	text-decoration: none;
}

.area-blog .area-blog__pagination a:hover {
	color: var(--area-blue);
}

.area-blog .area-blog__pagination .page-numbers.current {
	color: var(--area-blue);
}

@media (max-width: 700px) {
	.area-blog__item {
		display: block;
	}

	.area-blog__item > .wp-block-post-featured-image {
		margin-bottom: 14px !important;
	}
}

/* Bottom of blog posts: tags, previous/next links and "Vairāk ziņu" – same column as the text, compact */
.single main {
	--wp--style--global--wide-size: 860px;
}

.single main .wp-block-group:has(> .wp-block-post-terms) {
	padding-block: 8px 24px !important;
}

.single main .wp-block-group.alignwide:has(> nav .wp-block-post-navigation-link) {
	margin-block: 16px 0 !important;
}

.single main nav.wp-block-group:has(.wp-block-post-navigation-link) {
	flex-wrap: wrap !important;
	gap: 8px 24px;
	padding-block: 14px !important;
	border-bottom: 1px solid #dde5f0;
}

.single main .wp-block-post-navigation-link {
	max-width: calc(50% - 12px);
	font-family: Roboto, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
}

.single main .wp-block-post-navigation-link a {
	color: var(--area-post-navy);
	text-decoration: none;
}

.single main .wp-block-post-navigation-link a:hover {
	color: var(--area-blue);
}

/* Article wrapper ends right after the previous/next links */
.single main .wp-block-group.alignfull:has(.wp-block-post-navigation-link) {
	padding-bottom: 0 !important;
}

.single main .wp-block-group:has(> .wp-block-query) {
	padding-block: 24px 64px !important;
}

.single main .wp-block-group:has(> .wp-block-query) > .wp-block-heading {
	font-family: Roboto, sans-serif;
	font-size: 13px;
	letter-spacing: .08em;
	color: var(--area-post-navy);
}

.single main .wp-block-query {
	margin-block-start: 8px !important;
}

.single main .wp-block-query .wp-block-post > .wp-block-group {
	gap: 16px;
	padding-block: 11px !important;
	border-bottom-color: #dde5f0 !important;
}

.single main .wp-block-query .wp-block-post-title {
	font-family: Roboto, sans-serif;
	font-size: 16px !important;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: normal;
}

.single main .wp-block-query .wp-block-post-title a {
	color: var(--area-post-navy);
	text-decoration: none;
}

.single main .wp-block-query .wp-block-post-title a:hover {
	color: var(--area-blue);
}

.single main .wp-block-query .wp-block-post-date {
	flex-shrink: 0;
	font-family: Roboto, sans-serif;
	font-size: 13px;
	color: #7a8594;
}

.single main .wp-block-query .wp-block-post-date a {
	color: inherit;
	text-decoration: none;
}

@media (max-width: 600px) {
	.single main .wp-block-post-navigation-link {
		max-width: 100%;
	}
}

/* Featured image: own proportions, never wider than the image itself (TT5 crops it to 3:2) */
.single main .wp-block-post-featured-image img {
	aspect-ratio: auto !important;
	object-fit: contain !important;
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	border-radius: 12px;
}

.single main .wp-block-post-content > :is(p, ul, ol, blockquote, table) {
	font-size: 17px;
	line-height: 1.65;
	color: var(--area-post-text);
}

.single main .wp-block-post-content > :is(h1, h2, h3, h4) {
	font-weight: 700;
	color: var(--area-post-navy);
	text-wrap: balance;
}

.single main .wp-block-post-content > h1 { font-size: 34px; margin-top: 1em; }
.single main .wp-block-post-content > h2 { font-size: 26px; margin-top: 44px; }
.single main .wp-block-post-content > h3 { font-size: 19px; margin-top: 28px; }

.single main .wp-block-post-content > :is(p, ul, ol) a {
	color: var(--area-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.single main .wp-block-post-content > :is(p, ul, ol) a:hover {
	color: var(--area-pink);
}

.single main .wp-block-post-content > table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--area-post-line);
	font-size: 15px;
}

.single main .wp-block-post-content > table :is(th, td) {
	padding: 12px 16px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--area-post-line);
}

.single main .wp-block-post-content > table thead th {
	background: var(--area-post-navy);
	color: #fff;
	font-weight: 700;
}

/* Accordions (<details>) in posts and text pages – same look as the home page FAQ (.ait-faq-item) */
:is(.area-main, .single main) .wp-block-post-content > details {
	border: 1px solid #dde5f0;
	border-radius: 10px;
	margin-block: 10px 0;
	overflow: hidden;
	background: #fff;
	font-family: Roboto, sans-serif;
}

:is(.area-main, .single main) .wp-block-post-content > :not(details) + details {
	margin-block-start: 1em;
}

:is(.area-main, .single main) .wp-block-post-content > details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 52px;
	padding: 14px 20px;
	list-style: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	color: #002450;
}

:is(.area-main, .single main) .wp-block-post-content > details > summary::-webkit-details-marker {
	display: none;
}

:is(.area-main, .single main) .wp-block-post-content > details > summary::after {
	content: "+";
	flex-shrink: 0;
	color: var(--area-pink);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	transition: transform .2s;
}

:is(.area-main, .single main) .wp-block-post-content > details[open] > summary::after {
	transform: rotate(45deg);
}

:is(.area-main, .single main) .wp-block-post-content > details > summary :is(h2, h3, h4, p) {
	margin: 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: normal;
	color: inherit;
}

:is(.area-main, .single main) .wp-block-post-content > details > :not(summary) {
	margin: 0;
	padding: 0 20px 18px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	color: #4d5866;
}

:is(.area-main, .single main) .wp-block-post-content > details > :not(summary) a {
	color: var(--area-pink);
	text-decoration: underline;
}

/* Breathing room under the header and above the footer, unless the page starts/ends with a full-width section */
.area-main .wp-block-post-content > :first-child:not(.alignfull) {
	margin-top: 56px;
}

.area-main .wp-block-post-content > :last-child:not(.alignfull) {
	margin-bottom: 72px;
}

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

/* Same font as the page sections */
.area-header,
.area-footer,
.area-header :is(h1, h2, h3, p, a, button, .wp-element-button),
.area-footer :is(h1, h2, h3, p, a, button, .wp-element-button) {
	font-family: Roboto, sans-serif;
}

/* Roboto is loaded in 400/500/700/900 only – TT5's default 300 would be faked */
.area-header,
.area-footer {
	font-weight: 400;
}

.area-header {
	margin-block: 0;
	position: relative;
	z-index: 50;
}

.area-header > * {
	margin-block: 0 !important;
}

/* Announcement bar */
.area-notice {
	background: var(--area-notice-bg);
	color: var(--area-navy-text);
	padding-block: 8px;
}

.area-notice p {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
}

.area-notice a {
	color: var(--area-navy);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
	white-space: nowrap;
}

/* Dark top bar */
.area-topbar {
	background: var(--area-navy);
	padding-block: 6px;
}

.area-topbar .alignwide {
	gap: 24px;
}

.area-topbar__nav {
	gap: 24px;
	font-size: 14px;
	color: #fff;
}

.area-topbar .area-topbar__nav .wp-block-navigation-item .wp-block-navigation-item__content {
	color: #fff;
	opacity: .9;
	text-decoration: none;
}

.area-topbar .area-topbar__nav .wp-block-navigation-item .wp-block-navigation-item__content:hover {
	opacity: 1;
	color: var(--area-blue);
	text-decoration: none;
}

/* Main bar */
.area-mainbar {
	background: #fff;
	border-bottom: 1px solid var(--area-border);
	padding-block: 24px;
}

.area-main-nav {
	gap: 30px;
	font-size: 16px;
	font-weight: 400;
}

.area-main-nav .wp-block-navigation-item .wp-block-navigation-item__content {
	color: var(--area-navy-text);
	text-decoration: none;
}

.area-main-nav .wp-block-navigation-item .wp-block-navigation-item__content:hover,
.area-main-nav .wp-block-navigation-item .wp-block-navigation-item__content:focus,
.area-main-nav .wp-block-navigation-item .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--area-blue);
	text-decoration: none;
}

.area-main-nav .wp-block-navigation-item:hover > .wp-block-navigation__submenu-icon {
	color: var(--area-blue);
}

/* Active page (marked in functions.php) and the dropdown it sits under */
.area-main-nav .wp-block-navigation-item .wp-block-navigation-item__content[aria-current="page"],
.area-main-nav .wp-block-navigation-item.is-current-parent > .wp-block-navigation-item__content {
	font-weight: 500;
	color: var(--area-blue);
}

.area-main-nav .is-current-parent > .wp-block-navigation__submenu-icon {
	color: var(--area-blue);
}

/* Language switcher (LV/EN/RU) */
.area-main-nav .area-lang .wp-block-navigation-item__content {
	font-weight: 500;
}

.area-main-nav .wp-block-navigation__submenu-icon {
	width: 9px;
	height: 9px;
	margin-left: 5px;
	color: var(--area-navy-text);
}

/* Dropdowns */
.area-main-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--area-border) !important;
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(11, 31, 77, .12);
	padding: 8px 0;
	min-width: 230px !important;
}

/* Open dropdowns under their parent item, not to the left of it */
.area-main-nav.items-justified-right .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	top: calc(100% + 10px);
	left: -18px;
	right: auto;
}

/* Invisible bridge over the 10px gap so hover isn't lost on the way down */
.area-main-nav .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 12px;
}

.area-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 9px 18px;
	font-size: 15px;
}

.area-main-nav.items-justified-right .area-lang.has-child > .wp-block-navigation__submenu-container {
	min-width: 80px !important;
	left: auto;
	right: -18px;
}

/* Buttons */
.area-btn-yellow .wp-block-button__link {
	background: var(--area-yellow);
	color: var(--area-navy);
	font-size: 14px;
	font-weight: 500;
	padding: 6px 16px;
	border-radius: 6px;
}

.area-btn-yellow .wp-block-button__link:hover {
	background: #ffd54d;
}

/* Mobile */
@media (max-width: 781px) {
	.area-topbar .alignwide {
		justify-content: center;
		flex-wrap: wrap;
		gap: 12px;
	}

	.area-topbar__nav {
		gap: 14px;
	}

	.area-main-nav .wp-block-navigation__responsive-container.is-menu-open {
		padding: 24px;
	}

	.area-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: 18px;
	}
}

/* ---------- Footer ---------- */

.area-footer {
	margin-block-start: 0;
	padding-block: 56px 28px;
	color: #fff;
	background:
		radial-gradient(circle at 12% 95%, rgba(255, 176, 210, .55), transparent 38%),
		radial-gradient(circle at 88% 8%, rgba(132, 178, 255, .55), transparent 42%),
		linear-gradient(120deg, #3a3d9c 0%, #6a72d2 50%, #9aa6ea 100%);
}

.area-footer__cols {
	gap: 48px;
}

.area-footer__title {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 18px;
}

.area-footer p {
	font-size: 14px;
	line-height: 1.6;
	margin-block: 0 12px;
	color: rgba(255, 255, 255, .88);
}

.area-footer__links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.area-footer__links li {
	margin: 0 0 8px;
	font-size: 14px;
}

.area-footer a {
	color: rgba(255, 255, 255, .9);
	text-decoration: none;
}

.area-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.area-footer__buttons {
	gap: 0;
	margin-block: 16px;
}

.area-footer__buttons .wp-block-button__link {
	font-size: 13px;
	font-weight: 500;
	padding: 8px 18px;
	border-radius: 0;
	text-decoration: none !important;
}

.area-btn-white .wp-block-button__link {
	background: #fff;
	color: var(--area-navy);
	border-radius: 6px 0 0 6px !important;
}

.area-btn-orange .wp-block-button__link {
	background: var(--area-orange);
	color: #fff !important;
	border-radius: 0 6px 6px 0 !important;
}

.area-footer__copy {
	margin-top: 40px !important;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .2);
	font-size: 12px !important;
}

@media (max-width: 781px) {
	.area-footer__cols {
		gap: 32px;
	}
}