/*
Theme Name: App Portal
Theme URI: https://cebaxo.com/
Author: Che Geiser
Description: A block theme for an app developer's portal: a home page that lists every app, per-app pages, support guides, privacy policies and video instructions. Built for AutoTracker, MyTodo.txt, mdNotes and BikeScale.
Version: 1.2.2
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: app-portal
Tags: block-patterns, full-site-editing, one-column, wide-blocks, style-variations
*/

/* Most styling lives in theme.json. This file covers what theme.json can't express. */

.app-card {
	transition: transform .15s ease, box-shadow .15s ease;
}
.app-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(15, 23, 42, .10);
}
.app-card .app-icon img,
.app-hero .app-icon img {
	border-radius: 22%;
	box-shadow: 0 2px 8px rgba(15, 23, 42, .15);
}
.app-card .wp-block-buttons {
	margin-top: auto;
}
.app-card > .wp-block-group__inner-container,
.app-card {
	display: flex;
	flex-direction: column;
}

/* Phone screenshots on support pages */
.is-style-phone-shot img {
	max-width: 300px;
	border-radius: 18px;
	border: 1px solid var(--wp--preset--color--border);
}

/* "Works on" labels on the app cards: Mobile, Tablet, Watch, Computer */
.platform-pills {
	gap: .4rem !important;
	align-items: center;
}
.platform-pills p {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}
.platform-pills .platform-label {
	flex-basis: 100%;
	font-weight: 600;
}
.platform-pills .platform {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .15rem .6rem .15rem .45rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
}
.platform-pills .platform::before {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--platform-icon) center / contain no-repeat;
	mask: var(--platform-icon) center / contain no-repeat;
}
.platform-mobile { --platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2' width='10' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.platform-tablet { --platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.platform-watch { --platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='3'/%3E%3Cpath d='M9 6l1-4h4l1 4M9 18l1 4h4l1-4'/%3E%3C/svg%3E"); }
.platform-computer { --platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E"); }

/* Tables in support/privacy pages */
.wp-block-table table {
	border-collapse: collapse;
}
.wp-block-table thead {
	border-bottom: 2px solid var(--wp--preset--color--border);
}
.wp-block-table td,
.wp-block-table th {
	border: 1px solid var(--wp--preset--color--border);
	padding: .5em .75em;
	vertical-align: top;
}

/* FAQ disclosures */
.wp-block-details {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: .75rem 1rem;
	background: var(--wp--preset--color--base);
}
.wp-block-details + .wp-block-details {
	margin-top: .5rem;
}
.wp-block-details summary {
	font-weight: 600;
	cursor: pointer;
}

/* Video cards on the Videos page */
.video-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 10px;
}

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

.footer-links {
	list-style: none;
	padding-left: 0;
	line-height: 2;
}

.is-style-phone-shot {
	text-align: center;
}
.app-card h3 a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.app-card h3 a:hover {
	color: var(--wp--preset--color--primary);
}

/*
 * Dark mode follows the visitor's device or browser setting. The colours match the
 * "Dark" style variation (styles/dark.json). :root:root outranks the colours WordPress
 * prints from theme.json, whichever loads first.
 */
@media (prefers-color-scheme: dark) {
	:root:root {
		color-scheme: dark;
		--wp--preset--color--base: #0e1320;
		--wp--preset--color--surface: #161d2e;
		--wp--preset--color--contrast: #e8ecf4;
		--wp--preset--color--muted: #a2acc2;
		--wp--preset--color--border: #2a3348;
		--wp--preset--color--primary: #6c95ff;
		--wp--preset--color--primary-dark: #95b3ff;
		--wp--preset--color--accent: #1b2847;
	}
	/* Filled buttons keep white text readable on a deeper blue. */
	:root .wp-block-button:not(.is-style-outline) > .wp-block-button__link,
	:root .wp-element-button:not(.wp-block-button__link):not(.is-style-outline) {
		background-color: #3b6ef0;
		color: #fff;
	}
	:root .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
		background-color: #2b5fd9;
	}
	/* Light app icons and screenshots get a soft edge on the dark background. */
	.app-card .app-icon img,
	.app-hero .app-icon img {
		box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
	}
}