style.css

/*
Theme Name: Warqa
Theme URI: https://softglaze.com/warqa/
Author: softglaze
Author URI: https://profiles.wordpress.org/softglaze/
Description: A fast, readable block theme for writers and publishers. Warqa gives long-form articles a comfortable measure, a clear typographic hierarchy and reserved, layout-stable space for a sidebar and in-content placements, so pages stay steady while they load. Includes light and dark style variations, editor-ready patterns and full site editing support.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: warqa
Tags: blog, news, one-column, two-columns, right-sidebar, block-patterns, full-site-editing, wide-blocks, block-styles, style-variations, translation-ready, custom-colors, custom-logo, custom-menu, featured-images, editor-style, threaded-comments

Warqa WordPress Theme, (C) 2026 softglaze
Warqa is distributed under the terms of the GNU GPL v2 or later.
*/

/* Block style variations registered in functions.php.
   Everything else lives in theme.json. */

.wp-block-group.is-style-warqa-rule-top {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--30);
}

.wp-block-heading.is-style-warqa-kicker {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wp-block-quote.is-style-warqa-pull {
	border-left: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
	padding-left: 0;
	text-align: center;
}

.wp-block-image.is-style-warqa-framed img {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--30);
}

/* Caption layout for slideshow blocks that render a caption element.
   Purely presentational: the theme requires no slider and works without one. */

/* Align a slideshow caption with the site's wide measure rather than the
   viewport edge, and give it room away from any navigation arrows. */
.warqa-slide-kicker,
.warqa-slide-title,
.warqa-slide-text,
.warqa-slide-button {
	display: block;
	max-width: 42rem;
}

.metaslider .caption-wrap,
.warqa-slide-wrap {
	box-sizing: border-box;
	opacity: 1;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.metaslider .caption {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--wp--style--global--wide-size, 64rem);
	width: 100%;
}

@media (max-width: 600px) {

	.metaslider .caption-wrap,
	.warqa-slide-wrap {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	}

	.warqa-slide-text {
		display: none;
	}
}

.warqa-slide-kicker {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	margin-bottom: var(--wp--preset--spacing--20);
	text-transform: uppercase;
}

.warqa-slide-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 600;
	line-height: 1.15;
	margin-bottom: var(--wp--preset--spacing--30);
}

.warqa-slide-text {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	margin-bottom: var(--wp--preset--spacing--40);
	opacity: 0.9;
}

.warqa-slide-button {
	background-color: var(--wp--preset--color--accent);
	border-radius: 4px;
	color: var(--wp--preset--color--base);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.75rem 1.25rem;
	text-decoration: none;
	width: auto;
}

.warqa-slide-button:hover,
.warqa-slide-button:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* A term list rendered as small inline chips, so a site with many categories
   stays compact instead of running down the page as a long list. */

.wp-block-categories.is-style-warqa-chips,
.wp-block-categories.is-style-warqa-chips ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-categories.is-style-warqa-chips li {
	margin: 0;
}

.wp-block-categories.is-style-warqa-chips li a {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	padding: 0.4em 0.9em;
	text-decoration: none;
}

.wp-block-categories.is-style-warqa-chips li a:hover,
.wp-block-categories.is-style-warqa-chips li a:focus {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Nested children sit inline with their parent rather than indenting. */
.wp-block-categories.is-style-warqa-chips li ul {
	display: contents;
}

/* Visible keyboard focus on form fields and controls.
   theme.json covers links and buttons; these are the inputs it cannot reach,
   including the search form and the comment form. */

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus,
.wp-block-search__input:focus,
.wp-block-search__button:focus,
.wp-block-post-comments-form input:focus,
.wp-block-post-comments-form textarea:focus,
.comment-form input:focus,
.comment-form textarea:focus,
.wp-block-navigation__responsive-container-open:focus,
.wp-block-navigation__responsive-container-close:focus,
.wp-block-query-pagination a:focus,
.wp-block-comments-pagination a:focus,
summary:focus,
[tabindex]:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Some browsers drop the default ring once a custom one is set; make sure a
   focused control is never left with no indicator at all. */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Form fields need a resting border so the focus ring reads as a change. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	max-width: 100%;
	padding: 0.6em 0.75em;
}

/* Content stability.
   Keeps unbroken strings, wide tables, media and code inside the layout so
   nothing forces horizontal scrolling. Tested against the Theme Unit Test. */

html {
	overflow-x: hidden;
}

body {
	overflow-wrap: break-word;
}

/* Long words and URLs in headings, titles and body copy. */
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
dd,
dt,
figcaption,
.wp-block-post-title,
.wp-block-post-title a,
.wp-block-comment-author-name,
.wp-block-query-title {
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
}

/* Tables scroll inside their own box rather than the page. */
.wp-block-table,
.wp-block-table.alignwide,
.wp-block-table.alignfull {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table td,
.wp-block-table th {
	border: 1px solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--20);
	word-break: normal;
}

/* Preformatted text and code. */
pre,
.wp-block-code,
.wp-block-preformatted,
.wp-block-verse {
	max-width: 100%;
	overflow-x: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/* Media never exceeds its container. */
img,
video,
iframe,
embed,
object,
canvas,
svg {
	height: auto;
	max-width: 100%;
}

.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-cover__image-background,
.wp-block-media-text__media img {
	max-width: 100%;
}

/* Classic editor content. The [caption] shortcode emits a figure carrying a
   fixed inline pixel width, which otherwise escapes narrow viewports. */
.wp-caption,
figure.wp-caption,
.gallery,
.gallery-item {
	max-width: 100%;
}

.wp-caption img,
.wp-caption a img,
.gallery img {
	height: auto;
	max-width: 100%;
}

.wp-caption-text,
.gallery-caption {
	max-width: 100%;
	overflow-wrap: break-word;
}

/* Floated (left/right aligned) images clear their container. Covers both the
   block classes and the classic ones applied directly to img and .wp-caption. */
.wp-block-image.alignleft,
.wp-block-image.alignright,
figure.alignleft,
figure.alignright,
img.alignleft,
img.alignright,
.wp-caption.alignleft,
.wp-caption.alignright {
	max-width: 50%;
}

.wp-block-gallery,
.wp-block-embed,
.wp-block-embed__wrapper {
	max-width: 100%;
}

/* Comment content from arbitrary users. */
.wp-block-comment-content,
.wp-block-comment-content p,
.comment-content {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

@media (max-width: 600px) {

	.wp-block-image.alignleft,
	.wp-block-image.alignright,
	figure.alignleft,
	figure.alignright,
	img.alignleft,
	img.alignright,
	.wp-caption.alignleft,
	.wp-caption.alignright {
		float: none;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}
}