/*
Theme Name: Altechy
Theme URI: https://altechy.net
Author: Altechy
Author URI: https://altechy.net
Description: Custom block theme for Altechy AB, built and maintained in-house.
Version: 0.4.4
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: altechy
*/

/* ------------------------------------------------------------------
   Global
   ------------------------------------------------------------------ */

/* Hero "Read more" buttons jump to sections further down the homepage. */
html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Buttons: pill shape with a trailing arrow (visual direction borrowed from large consulting
   sites). The arrow is decorative, so it's added in CSS and hidden from screen readers by
   virtue of being generated content with no text meaning of its own. */
.wp-block-button__link::after,
.altechy-hero-cta::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.6em;
	transition: transform 0.2s ease;
}
.wp-block-button__link:hover::after,
.wp-block-button__link:focus-visible::after,
.altechy-hero-cta:hover::after,
.altechy-hero-cta:focus-visible::after {
	transform: translateX(4px);
}

/* Outline button style on dark sections. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 1.5px solid currentColor;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: rgba(255, 255, 255, 0.1);
}
/* Outline buttons on light sections (no text colour set on the block): blue instead of the default
   white button text, which would be invisible on white. */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--primary-dark, #0095c8);
}
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):focus-visible {
	background: rgba(10, 163, 243, 0.08);
}

/* Small "— Label" line above section headings. */
.altechy-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}
.altechy-eyebrow::before {
	content: "";
	display: inline-block;
	width: 2rem;
	height: 1.5px;
	background: currentColor;
}
.altechy-eyebrow a {
	color: inherit;
	text-decoration: none;
}
.altechy-eyebrow a:hover,
.altechy-eyebrow a:focus-visible {
	text-decoration: underline;
}

/* Insights (posts page and homepage teaser): article titles in the heading colour, not link blue. */
.altechy-insights .wp-block-post-date {
	margin-top: 1rem;
}
.altechy-insights .wp-block-post-title {
	margin-top: 0.35rem;
}
.altechy-insights .wp-block-post-title a,
.altechy-home .wp-block-post-title a {
	color: var(--wp--preset--color--ink, #1a1a1a);
	text-decoration: none;
}
.altechy-insights .wp-block-post-title a:hover,
.altechy-insights .wp-block-post-title a:focus-visible,
.altechy-home .wp-block-post-title a:hover,
.altechy-home .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--primary-dark, #0095c8);
	text-decoration: underline;
}

/* Pages still built in Elementor (e.g. About us) style their own headings (Roboto, weight 600).
   Keep plain h1/h2 inside that content at the same weight so they don't render as thin light
   headings next to Elementor's semi-bold ones. The light display headings apply to block-built
   pages only, until those Elementor pages are rebuilt. */
.elementor h1:not(.elementor-heading-title),
.elementor h2:not(.elementor-heading-title) {
	font-weight: 600;
	letter-spacing: normal;
}

/* Homepage and full-width pages: sections sit flush against each other (no white gap between
   dark bands). */
.altechy-home > * + *,
.altechy-landing > * + *,
.altechy-landing-content > * + * {
	margin-block-start: 0 !important;
}
/* ...and flush against the header and footer too (WordPress otherwise adds a white gap between
   the header, the main content and the footer). */
.wp-site-blocks > .altechy-home,
.wp-site-blocks > .altechy-landing,
.wp-site-blocks > .altechy-home + *,
.wp-site-blocks > .altechy-landing + * {
	margin-block-start: 0 !important;
}

/* ------------------------------------------------------------------
   Desktop "Services" dropdown: one line per item, compact size, so all nine services fit on
   screen without scrolling. Only applies above the phone breakpoint (600px), where the
   dropdown is used instead of the full-screen menu.
   ------------------------------------------------------------------ */
@media (min-width: 600px) {
	.wp-block-navigation:not(.is-menu-open) .wp-block-navigation__submenu-container {
		min-width: 17rem !important;
		width: max-content !important;
		padding: 0.5rem 0 !important;
		border: 1px solid var(--wp--preset--color--border, #d8d8d8) !important;
		border-radius: 12px;
		box-shadow: 0 12px 32px rgba(18, 21, 29, 0.12);
	}
	.wp-block-navigation:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		white-space: nowrap;
		font-size: 0.95rem;
		line-height: 1.4;
		padding: 0.5rem 1.25rem !important;
	}
	.wp-block-navigation:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.wp-block-navigation:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		background: var(--wp--preset--color--surface, #f5f5f5);
		color: var(--wp--preset--color--primary-dark, #0095c8);
	}
}

/* ------------------------------------------------------------------
   Phone menu (the full-screen overlay opened by the hamburger button)
   The header nav is right-aligned on desktop, which also right-aligned every item in the
   overlay and pushed text against the screen edge. Here the overlay gets a clean left-aligned
   list with dividers, and "Services" becomes an accordion (see assets/js/navigation.js).
   ------------------------------------------------------------------ */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 1rem 1.5rem 2rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch !important;
	padding-top: 3.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch !important;
	gap: 0 !important;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	align-items: stretch !important;
	border-bottom: 1px solid var(--wp--preset--color--border, #d8d8d8);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 1rem 0 !important;
	font-size: 1.2rem;
	font-weight: 500;
	text-align: left;
}
/* Chevron on accordion parents, rotating when open. */
.wp-block-navigation__responsive-container.is-menu-open .altechy-accordion > .wp-block-navigation-item__content::after {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	margin-right: 0.35rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .altechy-accordion.is-expanded > .wp-block-navigation-item__content::after {
	transform: rotate(-135deg);
}
.wp-block-navigation__responsive-container.is-menu-open .altechy-accordion:not(.is-expanded) > .wp-block-navigation__submenu-container {
	display: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: stretch !important;
	gap: 0 !important;
	padding: 0 0 0.75rem 1rem !important;
	border-left: 2px solid var(--wp--preset--color--primary, #0aa3f3) !important;
	margin-bottom: 1rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	width: 100%;
	justify-content: flex-start !important;
	align-items: stretch !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.55rem 0 !important;
	font-size: 1rem;
	color: var(--wp--preset--color--body-text, #4a4a4a);
	text-align: left;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open .altechy-accordion > .wp-block-navigation-item__content::after {
		transition: none;
	}
}

/* ------------------------------------------------------------------
   About teaser (#about-section)
   ------------------------------------------------------------------ */
/* Rounded photos used in the homepage sections. */
.altechy-about-image img,
.altechy-choose-image img,
.altechy-cta-image img,
.altechy-rounded-image img {
	width: 100%;
	height: auto;
	border-radius: 16px;
	display: block;
}
.altechy-choose-image,
.altechy-cta-image,
.altechy-rounded-image {
	margin: 0;
}

/* ------------------------------------------------------------------
   Why Choose Us (#choose-us)
   ------------------------------------------------------------------ */
.altechy-choose-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1.25rem;
}
/* The grid wrapper is a flow-layout group, which would otherwise add a top margin to every card
   after the first and knock the grid rows out of line. */
.altechy-choose-grid > * {
	margin-block-start: 0 !important;
}
.altechy-choose-card {
	height: 100%;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.altechy-choose-card:hover {
	background-color: #252b3c !important;
	transform: translateY(-2px);
}
.altechy-choose-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: rgba(10, 163, 243, 0.15);
	color: #0aa3f3;
	margin-bottom: 1.25rem;
}
.altechy-choose-icon svg {
	width: 1.5rem;
	height: 1.5rem;
}
.altechy-choose-card h3 {
	margin-top: 0;
}
.altechy-choose-card p {
	margin-bottom: 0;
}

/* Intro paragraph under a section heading: keep lines to a readable length. */
.altechy-lead {
	/* Keep the block the full content width (so it lines up with the heading above it) and
	   limit the line length with right padding instead of max-width. */
	box-sizing: border-box;
	padding-right: max(0px, calc(100% - 62ch));
}

/* Core value cards on light backgrounds (About us). Reuses the icon style from above. */
.altechy-value-card {
	height: 100%;
	border: 1px solid var(--wp--preset--color--border, #d8d8d8);
}
.altechy-value-card h3 {
	margin-top: 0;
}
.altechy-value-card p {
	margin-bottom: 0;
}

/* Service page offer cards: light cards with a thin blue accent on top. */
.altechy-service-card {
	height: 100%;
	border-top: 3px solid var(--wp--preset--color--primary, #0aa3f3);
}
.altechy-service-card h3 {
	margin-top: 0;
}
.altechy-service-card p {
	margin-bottom: 0;
}
.altechy-service-list {
	margin: 1rem 0 0;
	padding-left: 1.1rem;
}
.altechy-service-list li + li {
	margin-top: 0.35rem;
}

/* Contact page: contact details beside the form, stacked on narrow screens. */
.altechy-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
@media (max-width: 781px) {
	.altechy-contact-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* Grid and flex children: drop the block-gap top margin WordPress adds to every child after the
   first, which would push the form card and the item text out of line. */
.altechy-contact-grid > *,
.altechy-contact-item > *,
.altechy-contact-item + .altechy-contact-item {
	margin-block-start: 0 !important;
}
.altechy-contact-item {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border, #d8d8d8);
}
.altechy-contact-item:last-child {
	border-bottom: 0;
}
.altechy-contact-item .altechy-choose-icon {
	flex: none;
	margin-bottom: 0;
	color: var(--wp--preset--color--primary-dark, #0095c8);
}
.altechy-contact-item h3,
.altechy-contact-item p {
	margin: 0;
}
.altechy-contact-item h3 {
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body-text, #4a4a4a);
	margin-bottom: 0.25rem;
}
.altechy-contact-item a {
	color: var(--wp--preset--color--ink, #1a1a1a);
	text-decoration: none;
	font-weight: 600;
	overflow-wrap: anywhere;
}
.altechy-contact-item a:hover,
.altechy-contact-item a:focus-visible {
	color: var(--wp--preset--color--primary-dark, #0095c8);
	text-decoration: underline;
}
.altechy-contact-form h2,
.altechy-contact-form h3 {
	margin-top: 0;
}

/* Contact Form 7 fields in the site style. */
.wpcf7 form p {
	margin: 0 0 1.1rem;
}
.wpcf7 label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink, #1a1a1a);
}
.wpcf7 label br {
	display: none;
}
.wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.4rem;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid var(--wp--preset--color--border, #d8d8d8);
	border-radius: 10px;
	background: #fff;
	color: var(--wp--preset--color--ink, #1a1a1a);
	font: inherit;
	font-weight: 400;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wpcf7 textarea {
	height: 10rem;
	resize: vertical;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary, #0aa3f3);
	box-shadow: 0 0 0 3px rgba(10, 163, 243, 0.2);
}
.wpcf7 input[type="submit"] {
	display: inline-block;
	padding: 0.85rem 2rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--primary, #0aa3f3);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus-visible {
	background: var(--wp--preset--color--primary-dark, #0095c8);
}
.wpcf7 input[type="submit"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink, #1a1a1a);
	outline-offset: 2px;
}
.wpcf7-not-valid-tip {
	margin-top: 0.35rem;
	font-size: 0.85rem;
	font-weight: 400;
}
.wpcf7 form .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 10px;
	font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
	.altechy-choose-card,
	.wp-block-button__link::after,
	.altechy-hero-cta::after {
		transition: none;
	}
	.altechy-choose-card:hover {
		transform: none;
	}
}