/* App Portfolio — frontend styles
   Palette: coral #FF5A4D (primary), periwinkle #8DA8F5 (accent), AMOLED black #121212

   IMPORTANT: every panel below sets its OWN background AND its own text
   colors on every element inside it (headings, lists, paragraphs) rather
   than relying on inheritance. Themes frequently apply their own
   higher-specificity color rules to headings/paragraphs inside .entry-content,
   which silently overrides inherited color and causes invisible text —
   explicit rules here prevent that regardless of which theme is active. */

:root {
	--ap-coral: #FF5A4D;
	--ap-coral-hover: #e64a3e;
	--ap-periwinkle: #8DA8F5;
	--ap-black: #121212;
	--ap-surface: #1a1a1a;
	--ap-surface-raised: #212121;
	--ap-border: rgba(255,255,255,0.08);
	--ap-text: #f2f2f2;
	--ap-text-dim: #a8a8a8;
	--ap-radius: 18px;
}

/* =========================
   Grid / card list
   ========================= */
.ap-grid {
	display: grid;
	grid-template-columns: repeat(var(--ap-columns, 3), 1fr);
	gap: 22px;
	margin: 28px 0;
	font-family: 'Poppins', sans-serif;
}

@media (max-width: 900px) {
	.ap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.ap-grid { grid-template-columns: 1fr; }
}

.ap-card {
	display: flex;
	flex-direction: column;
	background: linear-gradient(160deg, var(--ap-surface-raised), var(--ap-surface));
	border-radius: var(--ap-radius);
	padding: 24px;
	text-decoration: none !important;
	border: 1px solid var(--ap-border);
	box-shadow: 0 1px 2px rgba(0,0,0,0.4);
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.ap-card:hover {
	transform: translateY(-4px);
	border-color: var(--ap-coral);
	box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}

.ap-card-icon {
	margin-bottom: 14px;
}

.ap-card-icon img {
	width: 60px;
	height: 60px;
	border-radius: 16px;
	object-fit: cover;
	display: block;
	box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

.ap-card-title {
	font-family: 'Poppins', sans-serif !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	line-height: 1.3 !important;
	margin: 0 0 6px !important;
	color: var(--ap-text) !important;
}

.ap-card-tagline {
	font-family: 'Poppins', sans-serif;
	font-size: 14px !important;
	color: var(--ap-text-dim) !important;
	margin: 0 0 14px !important;
	line-height: 1.5 !important;
	flex-grow: 1;
}

.ap-card-rating {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--ap-periwinkle) !important;
}

/* =========================
   Single app page
   ========================= */
.ap-single-app {
	font-family: 'Poppins', sans-serif;
	background: var(--ap-surface);
	color: var(--ap-text);
	border-radius: var(--ap-radius);
	border: 1px solid var(--ap-border);
	padding: 32px;
	margin: 24px 0;
	max-width: 760px;
}

@media (max-width: 600px) {
	.ap-single-app { padding: 22px; }
}

.ap-hero {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 20px;
}

.ap-hero-icon img {
	width: 72px;
	height: 72px;
	border-radius: 18px;
	object-fit: cover;
	display: block;
	box-shadow: 0 6px 14px rgba(0,0,0,0.4);
}

.ap-hero-info {
	flex: 1;
	min-width: 0;
}

.ap-single-app .ap-tagline {
	font-size: 17px !important;
	color: var(--ap-text-dim) !important;
	margin: 0 0 12px !important;
	line-height: 1.5 !important;
}

.ap-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ap-badge {
	background: rgba(141,168,245,0.12);
	color: var(--ap-periwinkle) !important;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 13px !important;
	font-weight: 600 !important;
	border: 1px solid rgba(141,168,245,0.25);
	white-space: nowrap;
}

.ap-cta {
	display: inline-block;
	background: var(--ap-coral) !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 15px;
	padding: 13px 30px;
	border-radius: 12px;
	text-decoration: none !important;
	margin: 22px 0 30px;
	box-shadow: 0 4px 14px rgba(255,90,77,0.3);
	transition: background 0.15s ease, transform 0.15s ease;
}

.ap-cta:hover {
	background: var(--ap-coral-hover) !important;
	transform: translateY(-1px);
	color: #fff !important;
}

.ap-section-heading {
	font-family: 'Poppins', sans-serif !important;
	font-weight: 700 !important;
	font-size: 19px !important;
	color: var(--ap-text) !important;
	margin: 30px 0 14px !important;
	padding: 0 !important;
}

.ap-feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ap-feature-list li {
	padding: 11px 0 11px 30px;
	position: relative;
	border-bottom: 1px solid var(--ap-border);
	color: var(--ap-text) !important;
	font-size: 15px;
	line-height: 1.5;
}

.ap-feature-list li:last-child {
	border-bottom: none;
}

.ap-feature-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 11px;
	color: var(--ap-coral);
	font-weight: 700;
}

.ap-long-description,
.ap-long-description p,
.ap-long-description li,
.ap-long-description span {
	color: var(--ap-text) !important;
	line-height: 1.7;
	font-size: 15px;
}

.ap-long-description a {
	color: var(--ap-periwinkle) !important;
}

.ap-screenshot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
	margin-top: 14px;
}

.ap-screenshot-grid img {
	width: 100%;
	border-radius: 14px;
	display: block;
	border: 1px solid var(--ap-border);
	transition: transform 0.18s ease;
}

.ap-screenshot-grid img:hover {
	transform: scale(1.03);
}