/*
Theme Name: Tech OOOOO
Theme URI: https://ooooo.id/tech
Author: OOOOO
Author URI: https://ooooo.id
Description: A minimal, modern one-column block theme for apps, products, tech services and portfolios. Purple and yellow, one centred column, square images everywhere, 2- or 3-column square galleries and a WhatsApp button built in. Includes a light style (Violet Pop), a dark style (Midnight Volt), three free fonts (Inter, Space Grotesk, Space Mono), 17 section patterns and 5 starter pages.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.1.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tech-ooooo
Tags: one-column, full-site-editing, block-patterns, block-styles, style-variations, custom-colors, editor-style, translation-ready, blog, portfolio
*/

/* Square photos everywhere (opt out with the "Original ratio" image style). */
.wp-block-image:not(.is-style-original) img,
.wp-block-post-featured-image img,
.wp-block-media-text__media img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; }
.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-post-featured-image a,
.wp-block-media-text__media img,
.wp-block-gallery.has-nested-images figure.wp-block-image,
.wp-block-gallery.has-nested-images figure.wp-block-image img { border-radius: var(--wp--custom--radius); }
.wp-block-gallery.has-nested-images figure.wp-block-image { overflow: hidden; aspect-ratio: 1 / 1; }
.wp-block-gallery.has-nested-images figure.wp-block-image img { height: 100%; }
.wp-block-gallery.has-nested-images { gap: 0.9rem; }

/* Highlighter: <mark> in headings and text. */
mark { background: linear-gradient(transparent 58%, var(--wp--preset--color--highlight) 58% 92%, transparent 92%); color: inherit; padding: 0 .06em; }

/* Small uppercase label above headings. */
.is-style-eyebrow { font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--accent); margin-bottom: -.4rem; }

/* Cards. */
.is-style-card { border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius); padding: 1.4rem 1.5rem; background: var(--wp--preset--color--base); }
.is-style-card-soft { background: var(--wp--preset--color--accent-soft); border-color: transparent; padding: clamp(1.75rem, 5vw, 3rem); }
.wp-block-columns .is-style-card { padding: 1.6rem; }
.is-style-card > .wp-block-heading { margin-top: 0; }
.tech-num { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; margin: 0; border-radius: var(--wp--custom--radius-small); background: var(--wp--preset--color--highlight); color: var(--wp--preset--color--on-highlight); font-weight: 800; font-size: var(--wp--preset--font-size--small); }
.tech-price { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: .2rem 0 .4rem; }
.tech-price span { font-size: var(--wp--preset--font-size--small); font-weight: 400; color: var(--wp--preset--color--muted); letter-spacing: 0; }
.wp-block-column.is-style-card:last-child { border: 2px solid var(--wp--preset--color--accent); }
.tech-stat { font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 0; color: var(--wp--preset--color--accent); }

/* Checklist. */
.is-style-check { list-style: none; padding-left: 0; }
.is-style-check li { position: relative; padding-left: 1.75rem; margin: .35rem 0; }
.is-style-check li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--wp--preset--color--highlight) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231E1B2E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }

/* Timeline. */
.tech-timeline { border-left: 2px solid var(--wp--preset--color--line); padding-left: 1.5rem; }
.tech-step { position: relative; }
.tech-step::before { content: ""; position: absolute; left: calc(-1.5rem - 7px); top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--wp--preset--color--accent); box-shadow: 0 0 0 4px var(--wp--preset--color--base); }
.tech-tag { display: inline-block; margin: 0; padding: .1rem .6rem; border-radius: 999px; background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--accent); font-size: var(--wp--preset--font-size--x-small); font-weight: 700; }

/* Buttons: WhatsApp and highlight styles. */
.wp-block-button.is-style-whatsapp .wp-block-button__link { display: inline-flex; align-items: center; gap: .5em; background: var(--wp--custom--whatsapp--background); color: var(--wp--custom--whatsapp--text); }
.wp-block-button.is-style-whatsapp .wp-block-button__link::before { content: ""; width: 1.15em; height: 1.15em; flex: none; background: currentColor; -webkit-mask: var(--tech-wa) center / contain no-repeat; mask: var(--tech-wa) center / contain no-repeat; }
.wp-block-button.is-style-whatsapp .wp-block-button__link:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
:root { --tech-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.6.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .1-1.3c0-.1-.2-.2-.5-.3z'/%3E%3C/svg%3E"); }
.tech-header-wa .wp-block-button__link { padding: .55rem 1rem; font-size: var(--wp--preset--font-size--x-small); }
@media (max-width: 600px) { .tech-header-wa .wp-block-button__link { font-size: 0; gap: 0; padding: .6rem; } .tech-header-wa .wp-block-button__link::before { font-size: 1rem; } }

/* Floating WhatsApp button. */
.tech-wa-float { position: fixed; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px); z-index: 60; margin: 0 !important; }
.tech-wa-float .wp-block-button__link { border-radius: 999px !important; box-shadow: 0 10px 30px rgba(46, 16, 101, .3); padding: .9rem 1.3rem; }
@media (max-width: 600px) { .tech-wa-float .wp-block-button__link { font-size: 0; gap: 0; padding: 1rem; } .tech-wa-float .wp-block-button__link::before { font-size: 1.5rem; } }

/* Announcement bar. */
.tech-announce { position: relative; padding: .55rem 2.5rem; }
.tech-announce p { margin: 0; }
.tech-announce a { color: inherit; font-weight: 700; }
.tech-announce-close { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); background: none; border: 0; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: .3rem .5rem; }
.tech-announce.is-closed { display: none; }

/* Post list rows. */
.tech-post-row { padding: 1.1rem 0; border-bottom: 1px solid var(--wp--preset--color--line); gap: 1.2rem; }
.tech-post-row .wp-block-post-featured-image { flex: none; margin: 0; }
.tech-post-row .wp-block-post-title { margin: 0; }
.tech-post-row .wp-block-post-excerpt { margin: 0; }
.tech-post-row .wp-block-post-excerpt__excerpt { margin: 0; }
@media (max-width: 480px) { .tech-post-row .wp-block-post-featured-image { width: 84px !important; height: 84px !important; } }
.tech-credit { margin: 0; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }

/* Details (FAQ). */
.wp-block-details summary { font-weight: 700; cursor: pointer; list-style: none; position: relative; padding-right: 2rem; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; position: absolute; right: 0; top: -.1rem; font-size: 1.4rem; line-height: 1; color: var(--wp--preset--color--accent); }
.wp-block-details[open] summary::after { content: "–"; }
.wp-block-details > p { margin-top: .6rem; }

/* Forms (comments, search, Pro contact form) follow the theme. */
input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], textarea, select { font: inherit; color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius-small); padding: .75rem .9rem; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 1px; }
.bop-booking, .bop-contact-form { border-radius: var(--wp--custom--radius) !important; }
.bop-grid input, .bop-grid select, .bop-grid textarea { border-radius: var(--wp--custom--radius-small) !important; }
.bop-card__img { aspect-ratio: 1 / 1 !important; }
.bop-booking, .bop-contact-form { box-sizing: border-box; }
.bop-card { border-radius: var(--wp--custom--radius); overflow: hidden; }
.bop-card__img { border-radius: 0; }
.bop-order .wp-block-button__link, .bop-float { background: var(--wp--custom--whatsapp--background) !important; border-color: transparent !important; color: var(--wp--custom--whatsapp--text) !important; }