/*
Theme Name: Pink Tank Engineered 2026
Theme URI: https://pinktank.ae
Author: Aidi Johari - aidijohari@gmail.com
Author URI: https://pinktank.ae
Description: The 2026 "engineered" design for Pink Tank — a UAE strategic advisory and learning
             and development firm. Mobile-first, accessible, ACF-block driven. Built from the
             client-approved concept in pinktank-concepts/public/engineered/.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pinktank-engineered-2026
Tags: business, portfolio, accessibility-ready, custom-menu, block-styles
*/

/*
 * The design system lives in assets/css/engineered.css, which is enqueued as the main
 * stylesheet. This file exists for the WordPress theme header above (which WordPress requires
 * to be in style.css specifically) and for small admin/wp-core overrides only.
 *
 * Do not add design rules here — they belong in assets/css/engineered.css.
 */

/*
 * WordPress-compat: let CSS aspect-ratio win over the img height attribute.
 *
 * The concept's markup carries no width/height attributes on images, but WordPress always emits
 * them. Those attributes are presentational hints that map to CSS width/height, so on
 * `.eng .dual img` — the one rule that puts `aspect-ratio` on the image itself without also
 * setting a height — the attribute won and the About dual band rendered roughly twice as tall
 * as the design (439x683 instead of 439x329).
 *
 * The card images (.wcard/.pcard .img img) already declare `height:100%` and the client logos
 * use `max-height`, so they override the attribute on their own and are not affected.
 */
.eng .dual img {
	height: auto;
}

/*
 * Crisp logo on hover-zoom.
 *
 * The logo grid scales each cell with `transform: scale(1.5)` (1.3 on mobile) over 0.3s. Without
 * a rasterisation hint, Chrome composites the cell into a GPU layer rasterised at 1x and then
 * scales that texture up — so the logo is razor-sharp for the first frame and then goes SOFT once
 * the transform settles (~0.3-0.5s), which reads as the logo being "swapped" mid-hover. It was
 * most obvious on touch, where the zoomed state persists after a tap.
 *
 * `will-change: transform` makes Chrome rasterise the layer at the scaled resolution, so it stays
 * sharp through and after the zoom. The 660px source displays at ~480px even zoomed, so there is
 * ample resolution — this is purely a compositor hint, not an image-size fix. Kept out of the
 * concept-ported engineered.css so that file stays a faithful copy of the approved design.
 */
.eng .clientgrid > div {
	will-change: transform;
}

/* WordPress core markup classes the design system does not otherwise cover. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #fff;
	clip: auto !important;
	clip-path: none;
	color: #0b0b0d;
	display: block;
	font-size: 14px;
	font-weight: 600;
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 16px 24px;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
	outline: 3px solid #00a9e0;
}

.alignleft {
	float: left;
	margin-right: 24px;
}

.alignright {
	float: right;
	margin-left: 24px;
}

.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.wp-caption-text,
.wp-element-caption {
	color: #6b6b73;
	font-size: 13px;
	padding-top: 8px;
}

/*
 * Contact Form 7 fit.
 *
 * The contact template (page-contact.php) styles a plain <form>: .field wrappers, block <label>s,
 * full-width inputs, and a pink <button> submit. When a CF7 form ID is set in Site Details, CF7
 * renders its own markup instead. Text inputs/textareas inherit the theme rules on their own, but:
 *   - CF7's submit is an <input type="submit">, which the concept's `.eng form button` rule does
 *     not target — so it would fall back to a browser-default grey button;
 *   - each control is wrapped in an inline <span class="wpcf7-form-control-wrap">;
 *   - CF7 adds a validation tip, a response line and a spinner the concept never had.
 * These rules make a CF7 form visually identical to the placeholder. Kept here (not in the
 * concept-faithful engineered.css) because CF7 is a site choice, not part of the approved design.
 */
.eng form input[type="submit"] {
	/* width:auto is the point — `.eng form input` forces width:100% on every input, which would
	   stretch the submit to a full-width bar; the design's button is content-sized. */
	width: auto;
	background: var(--pink);
	color: #fff;
	border: none;
	padding: 15px 34px;
	border-radius: 2px;
	font-family: 'Stack Sans Text', sans-serif;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: .25s;
}

.eng form input[type="submit"]:hover {
	transform: translateY(-2px);
}

.eng form .wpcf7-form-control-wrap {
	display: block;
}

.eng form .wpcf7-not-valid-tip {
	color: #b32d2e;
	font-size: 13px;
	margin-top: 6px;
}

.eng form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-radius: 3px;
	font-size: 14px;
	line-height: 1.5;
}

.eng .wpcf7-spinner {
	margin: 0 0 0 12px;
}

/*
 * Short-viewport hero fix.
 *
 * `.dhero` is `min-height:92vh` with its content (`.inner`) bottom-aligned, and the nav
 * (`.navbar` — position:absolute, top:0, z-index:60, ~88px tall) floats above it (z-index:2).
 * On a tall viewport the bottom-aligned content leaves room up top for the nav; on a SHORT
 * viewport the content grows past 92vh, rides up to the very top, and the higher-z nav paints
 * over it — the logo lands on the "PINK TANK" label and the heading rises into the lines.
 *
 * Reserving top clearance pushes the content below the nav whenever the hero has to grow. It is
 * invisible on tall viewports: the bottom-aligned, shorter-than-container content simply absorbs
 * the extra top space that was already empty there, so nothing moves. The absolute video/scrim
 * (inset:0, positioned against the padding box) still cover the full hero — no gap at the top.
 */
.eng .dhero {
	padding-top: 104px;
}