/*
Theme Name: PlanckStudio
Theme URI: https://planckstudio.in
Author: PlanckStudio
Author URI: https://planckstudio.in
Description: Modern digital studio & creative agency blog theme. Engineered with clean typography, soft lavender tints, electric indigo accents, and distraction-free reading. Built with Tailwind CSS via CDN and Vanilla JS.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: planckstudio
Tags: blog, clean, studio, agency, one-column, custom-colors, custom-menu, featured-images, translation-ready, accessibility-ready
*/

/* Core WordPress CSS fallbacks */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
.alignwide { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.wp-caption { margin-bottom: 1.5em; max-width: 100%; }
.wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text { text-align: center; font-size: 0.875rem; color: #716d77; font-style: italic; margin-top: 0.5rem; }
.gallery-caption { text-align: center; }

/* Accessible Screen Reader Text */
.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: #6b62fe;
	border-radius: 9999px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #ffffff;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 1rem;
	line-height: normal;
	padding: 0.75rem 1.5rem;
	text-decoration: none;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

/* PlanckStudio Global Tokens */
:root {
	--color-primary:        #6b62fe;
	--color-primary-hover:  #5b52ed;
	--color-primary-light:  #eeeaff;
	--color-secondary:      #25232a;
	--color-secondary-hover:#161519;

	--color-bg:             #fcfbff;
	--color-bg-alt:         #f5f3ff;
	--color-bg-card:        #ffffff;
	--color-bg-card-tint:   #f1efff;
	--color-bg-pill:        #eeeaff;
	--color-bg-input:       #ffffff;
	--color-bg-overlay:     rgba(37, 35, 42, 0.45);

	--color-text:           #25232a;
	--color-text-muted:     #716d77;
	--color-text-faint:     #aaa5ae;
	--color-text-inverse:   #ffffff;
	--color-heading:        #25232a;

	--color-border:         #e8e6ed;
	--color-border-card:    #e3e0e8;
	--color-border-strong:  #6b62fe;

	--font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
	--font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* Base Body */
body {
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
}

/* Gutenberg Block Styles Fallback */
figure.wp-block-image {
	margin: 2.5rem 0;
}
figure.wp-block-image img {
	border-radius: 1.5rem;
	border: 1px solid var(--color-border-card);
}
blockquote.wp-block-quote {
	border-left: 4px solid var(--color-primary);
	background-color: var(--color-bg-alt);
	padding: 1.25rem 1.5rem;
	border-radius: 0 1rem 1rem 0;
	font-size: 1.25rem;
	font-style: italic;
	color: var(--color-text);
	margin: 2rem 0;
}

/* Responsive Table */
.wp-block-table {
	overflow-x: auto;
	margin: 2rem 0;
	border-radius: 1rem;
	border: 1px solid var(--color-border);
}
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}
.wp-block-table th, .wp-block-table td {
	padding: 0.875rem 1rem;
	border: 1px solid var(--color-border);
	text-align: left;
}
.wp-block-table th {
	background-color: var(--color-bg-alt);
	font-weight: 700;
	color: var(--color-heading);
}

/* Smooth Focus Indicator for WCAG 2.1 AA */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}