/*
Theme Name:   fraew - modern light
Theme URI:    https://thebigcity.co.nz/fraew-modern-light/
Description:  A modern, light editorial theme with an archive/database feel — warm off-white palette, Space Grotesk and IBM Plex typography, a two-column post layout with a right sidebar, and footer widget areas. Clean and typographic out of the box, with an "entry" counter and mono metadata that suit catalogues, journals and long-running blogs. Publishes a design-token contract that companion plugins can adopt to match, and requires no plugins.
Author:       fraew
Author URI:   https://thebigcity.co.nz
Version:      1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, news, entertainment, two-columns, right-sidebar, custom-logo, custom-menu, custom-header, featured-images, footer-widgets, threaded-comments, translation-ready, theme-options, block-styles, wide-blocks
Text Domain:  fraew-modern-light

fraew - modern light, Copyright 2026 fraew
fraew - modern light is distributed under the terms of the GNU GPL v2 or later.

This theme, like WordPress, is licensed under the GPL.

Bundled third-party resources (self-hosted in assets/fonts/, see assets/fonts/LICENSE.txt):
  IBM Plex Sans,  Copyright 2017 IBM Corp., SIL Open Font License 1.1
  IBM Plex Mono,  Copyright 2017 IBM Corp., SIL Open Font License 1.1
  Space Grotesk,  Copyright 2020 Florian Karsten, SIL Open Font License 1.1
  License: https://scripts.sil.org/OFL
*/

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	--fraew-bg:        #f7f5ef;
	--fraew-panel:     #efece2;
	--fraew-ink:       #141a19;
	--fraew-body:      #2c3634;
	--fraew-muted:     #4a534f;
	--fraew-faint:     #6f7573;
	--fraew-dim:       #8f948e;
	--fraew-rule:      #d8d3c4;
	--fraew-rule-soft: #e2ddd0;
	--fraew-dark:      #1f2d2b;
	--fraew-teal:      #3d7d6c;
	--fraew-mint:      #7fd6c4;

	--fraew-sans:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--fraew-display: 'Space Grotesk', var(--fraew-sans);
	--fraew-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	--fraew-wrap: 1240px;
	--fraew-gut:  48px;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--fraew-bg);
	color: var(--fraew-body);
	font-family: var(--fraew-sans);
	font-size: 15px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

img, iframe, video, embed, object { max-width: 100%; }
img { height: auto; }

a { color: var(--fraew-teal); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--fraew-teal);
	outline-offset: 2px;
}

::selection { background: rgba(0, 0, 0, 0.15); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fraew-display);
	color: var(--fraew-ink);
	font-weight: 700;
	line-height: 1.2;
}

.fraew-wrap {
	max-width: var(--fraew-wrap);
	margin: 0 auto;
	padding-left: var(--fraew-gut);
	padding-right: var(--fraew-gut);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--fraew-dark);
	color: var(--fraew-bg);
	padding: 12px 20px;
	font-family: var(--fraew-mono);
	font-size: 13px;
}
.skip-link:focus { left: 0; }

/* Shared "eyebrow" label — mono, teal, tracked out */
.fraew-eyebrow {
	font-family: var(--fraew-mono);
	font-size: 12px;
	color: var(--fraew-teal);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0;
}

/* ==========================================================================
   WordPress required core classes
   ========================================================================== */

.alignleft {
	float: left;
	margin: 0.4em 1.6em 1.2em 0;
}
.alignright {
	float: right;
	margin: 0.4em 0 1.2em 1.6em;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignnone { margin: 0 0 1.2em; }

.alignwide { margin-left: -80px; margin-right: -80px; max-width: none; width: auto; }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: auto; }

/* Float containment — the theme unit test floats images beside short paragraphs. */
.fraew-content::after,
.fraew-card::after,
.comment-body::after {
	content: "";
	display: table;
	clear: both;
}

.wp-caption {
	max-width: 100%;
	margin-bottom: 20px;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0;
}
.wp-caption .wp-caption-text,
.wp-caption-text,
.gallery-caption,
.wp-block-image figcaption,
figcaption {
	font-family: var(--fraew-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--fraew-faint);
	padding: 8px 0 0;
	margin: 0;
	text-align: left;
}

/* Sticky posts get a filed-to-the-top marker rather than a colour change. */
.fraew-card.sticky { outline: 2px solid var(--fraew-dark); outline-offset: -1px; }
.fraew-card.sticky .fraew-card__title::before {
	content: "★ ";
	color: var(--fraew-teal);
}

.bypostauthor > .comment-body .comment-author::after {
	content: " / " attr(data-author-label);
}
.bypostauthor > .comment-body { border-left: 3px solid var(--fraew-teal); padding-left: 16px; }

/* Long unbroken strings (URLs, non-breaking titles) must not blow out the grid. */
.fraew-content,
.fraew-card__title,
.fraew-filehead__title,
.comment-body {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Password form */
.post-password-form input[type="password"] {
	padding: 12px;
	border: 1px solid var(--fraew-rule);
}

/* ==========================================================================
   Header / navigation
   ========================================================================== */

.fraew-header {
	background: var(--fraew-bg);
	border-bottom: 2px solid var(--fraew-dark);
}

.fraew-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.fraew-brand {
	display: flex;
	align-items: baseline;
	gap: 10px;
	text-decoration: none;
}
.fraew-brand__name {
	font-family: var(--fraew-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--fraew-ink);
}
.fraew-brand__tag {
	font-family: var(--fraew-mono);
	font-size: 11px;
	color: var(--fraew-faint);
	text-transform: uppercase;
}
.fraew-brand img { display: block; max-height: 40px; width: auto; }

.fraew-nav {
	display: flex;
	align-items: center;
	gap: 26px;
}

.fraew-nav ul {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.fraew-nav li { position: relative; }
.fraew-nav a {
	font-family: var(--fraew-mono);
	font-size: 13px;
	text-transform: uppercase;
	color: var(--fraew-body);
	text-decoration: none;
	white-space: nowrap;
}
.fraew-nav a:hover,
.fraew-nav .current-menu-item > a,
.fraew-nav .current-menu-ancestor > a {
	color: var(--fraew-teal);
}

/* Sub-menus */
.fraew-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	display: block;
	min-width: 220px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 8px 0;
	margin-top: 12px;
	background: var(--fraew-bg);
	border: 1px solid var(--fraew-rule);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;
}
.fraew-nav li:hover > .sub-menu,
.fraew-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.fraew-nav .sub-menu a { display: block; padding: 8px 18px; }
.fraew-nav .sub-menu a:hover { background: var(--fraew-panel); }

/* The 12px margin-top leaves a gap between the item and its dropdown. Moving the
   cursor down across it would drop :hover and close the menu before you reach it.
   This transparent bridge fills the gap; because it lives inside the submenu (and
   so inside the <li>), hovering it keeps the parent :hover alive. */
.fraew-nav .sub-menu::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 12px;
}

/* Trailing top-level items sit near the right edge; open their dropdowns
   leftward so a 220px submenu doesn't push a horizontal scrollbar onto the page. */
.fraew-nav > ul > li:last-child > .sub-menu,
.fraew-nav > ul > li:nth-last-child(2) > .sub-menu { left: auto; right: 0; }

.fraew-support {
	background: var(--fraew-dark);
	color: var(--fraew-bg) !important;
	padding: 8px 16px;
	font-weight: 600;
	font-family: var(--fraew-mono);
	font-size: 13px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
.fraew-support:hover { background: var(--fraew-teal); }

.fraew-search-toggle,
.fraew-nav-toggle {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--fraew-mono);
	font-size: 13px;
	text-transform: uppercase;
	color: var(--fraew-body);
}
.fraew-search-toggle:hover { color: var(--fraew-teal); }
.fraew-nav-toggle { display: none; }

/* Search modal */
.fraew-search-modal {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding-top: 18vh;
	background: rgba(20, 26, 25, 0.92);
}
.fraew-search-modal.is-open { display: flex; }
.fraew-search-modal__inner { width: min(720px, 90vw); }
.fraew-search-modal .fraew-eyebrow { margin-bottom: 12px; }
.fraew-search-modal__close {
	position: absolute;
	top: 24px;
	right: 32px;
	background: none;
	border: 0;
	color: var(--fraew-bg);
	font-family: var(--fraew-mono);
	font-size: 13px;
	text-transform: uppercase;
	cursor: pointer;
}

.fraew-searchform { display: flex; }
.fraew-searchform input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 14px 16px;
	border: 1px solid var(--fraew-rule);
	background: var(--fraew-bg);
	color: var(--fraew-ink);
	font-family: var(--fraew-sans);
	font-size: 16px;
}
.fraew-searchform button {
	padding: 14px 22px;
	border: 0;
	background: var(--fraew-dark);
	color: var(--fraew-bg);
	font-family: var(--fraew-mono);
	font-size: 13px;
	text-transform: uppercase;
	cursor: pointer;
}
.fraew-searchform button:hover { background: var(--fraew-teal); }

/* ==========================================================================
   Home hero
   ========================================================================== */

.fraew-hero {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	border-bottom: 2px solid var(--fraew-dark);
}
.fraew-hero__text { padding: 48px; }
.fraew-hero__title {
	font-size: 52px;
	font-weight: 700;
	line-height: 1.05;
	margin: 16px 0 0;
}
.fraew-hero__sub {
	font-size: 15px;
	color: var(--fraew-muted);
	margin: 20px 0 0;
	max-width: 480px;
}
.fraew-hero__media {
	background: var(--fraew-rule-soft);
	background-size: cover;
	background-position: center;
	min-height: 320px;
}

/* ==========================================================================
   Card grid (home, archive, search)
   ========================================================================== */

.fraew-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--fraew-rule);
	border: 1px solid var(--fraew-rule);
	margin: 40px 0;
}

.fraew-card {
	background: var(--fraew-bg);
	padding: 24px;
	display: flex;
	flex-direction: column;
}
.fraew-card__media {
	display: block;
	height: 180px;
	margin-bottom: 16px;
	background: var(--fraew-rule-soft);
	overflow: hidden;
}
.fraew-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}
.fraew-card:hover .fraew-card__media img { transform: scale(1.03); }

.fraew-card__title {
	font-size: 19px;
	font-weight: 600;
	margin: 8px 0 0;
}
.fraew-card__title a { color: var(--fraew-ink); text-decoration: none; }
.fraew-card__title a:hover { color: var(--fraew-teal); }

.fraew-card__excerpt {
	font-size: 14px;
	color: var(--fraew-muted);
	margin: 10px 0 0;
}
.fraew-card__date {
	font-family: var(--fraew-mono);
	font-size: 12px;
	color: var(--fraew-dim);
	margin-top: auto;
	padding-top: 14px;
}

/* ==========================================================================
   Page / post hero strip
   ========================================================================== */

.fraew-filehead {
	background: var(--fraew-panel);
	border-bottom: 1px solid var(--fraew-rule);
	padding-top: 32px;
	padding-bottom: 32px;
}
.fraew-filehead__title {
	font-size: 44px;
	font-weight: 700;
	margin: 6px 0 0;
}
.fraew-filehead__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 12px;
	font-family: var(--fraew-mono);
	font-size: 13px;
	text-transform: uppercase;
	color: var(--fraew-muted);
}
.fraew-filehead__meta a { color: inherit; text-decoration: none; }
.fraew-filehead__meta a:hover { color: var(--fraew-teal); }
.fraew-filehead__meta .sep { color: var(--fraew-dim); }

/* ==========================================================================
   Single layout
   ========================================================================== */

.fraew-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 48px;
	padding-top: 48px;
	padding-bottom: 48px;
}
.fraew-layout--full { grid-template-columns: 1fr; }

/* Grid items default to min-width:auto, which lets a full-size image or embed
   force the column past the viewport. Reset it on every grid container the theme
   uses so columns can shrink and the img/gallery max-width rules take over. */
.fraew-layout > *,
.fraew-grid > *,
.fraew-hero > * { min-width: 0; }

/* Post body */
.fraew-content { font-size: 15px; line-height: 1.75; color: var(--fraew-body); }
.fraew-content > * { margin-top: 0; margin-bottom: 20px; }
.fraew-content > :last-child { margin-bottom: 0; }

.fraew-content h2 {
	font-size: 22px;
	font-weight: 700;
	margin-top: 40px;
	margin-bottom: 16px;
}
.fraew-content h3 { font-size: 18px; margin-top: 32px; margin-bottom: 12px; }
.fraew-content a { color: var(--fraew-teal); }

.fraew-content blockquote {
	margin: 0 0 20px;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--fraew-teal);
	font-style: italic;
	color: var(--fraew-ink);
	font-size: 16px;
}
.fraew-content blockquote cite,
.fraew-content blockquote footer {
	display: block;
	font-style: normal;
	font-size: 13px;
	color: var(--fraew-muted);
	margin-top: 10px;
	font-family: var(--fraew-mono);
	text-transform: uppercase;
}

/* Members / Discography / Links read as rows of an archive record */
.fraew-content ul,
.fraew-content ol { padding-left: 0; list-style: none; }
.fraew-content li {
	font-size: 14px;
	padding: 10px 0;
	border-bottom: 1px solid var(--fraew-rule);
}
.fraew-content li:last-child { border-bottom: 0; }

/* Gallery */
.fraew-content .wp-block-gallery { gap: 12px !important; }
.fraew-content .wp-block-gallery img { display: block; }

/* Embeds (Bandcamp iframe, SoundCloud oEmbed) */
.fraew-content iframe { border: 1px solid var(--fraew-rule); background: #fff; }
.fraew-content figure { margin-left: 0; margin-right: 0; }

/* Tags */
.fraew-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--fraew-rule);
}
.fraew-tags__label {
	font-family: var(--fraew-mono);
	font-size: 12px;
	color: var(--fraew-muted);
	text-transform: uppercase;
}
.fraew-tags a {
	background: var(--fraew-dark);
	color: var(--fraew-bg);
	font-size: 11px;
	font-weight: 600;
	padding: 6px 12px;
	font-family: var(--fraew-mono);
	text-transform: uppercase;
	text-decoration: none;
}
.fraew-tags a:hover { background: var(--fraew-teal); }

/* ==========================================================================
   Sidebar + category-post-list widget
   ========================================================================== */

.fraew-sidebar__thumb {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
	margin-bottom: 24px;
	border: 1px solid var(--fraew-rule);
	background: var(--fraew-rule-soft);
}

.fraew-widget { margin-bottom: 40px; }
.fraew-widget__title {
	font-family: var(--fraew-mono);
	font-size: 12px;
	font-weight: 400;
	color: var(--fraew-teal);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

/* Generic widgets */
.fraew-widget ul { list-style: none; margin: 0; padding: 0; }
.fraew-widget ul li { font-size: 14px; padding: 7px 0; border-bottom: 1px solid var(--fraew-rule); }
.fraew-widget ul li a { color: var(--fraew-muted); text-decoration: none; }
.fraew-widget ul li a:hover { color: var(--fraew-teal); }

/* ==========================================================================
   Archive header, pagination, comments
   ========================================================================== */

.fraew-archive-head { padding-top: 40px; }
.fraew-archive-head__title { font-size: 36px; margin: 6px 0 0; }
.fraew-archive-head__desc { color: var(--fraew-muted); margin-top: 12px; max-width: 640px; }

.fraew-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 64px;
	font-family: var(--fraew-mono);
	font-size: 13px;
}
.fraew-pagination .page-numbers {
	padding: 8px 14px;
	border: 1px solid var(--fraew-rule);
	color: var(--fraew-body);
	text-decoration: none;
}
.fraew-pagination .page-numbers:hover { border-color: var(--fraew-teal); color: var(--fraew-teal); }
.fraew-pagination .page-numbers.current {
	background: var(--fraew-dark);
	border-color: var(--fraew-dark);
	color: var(--fraew-bg);
}
.fraew-pagination .dots { border-color: transparent; }

.fraew-comments { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--fraew-rule); }
.fraew-comments__title { font-size: 22px; margin: 0 0 24px; }
.fraew-comments .comment-list { list-style: none; margin: 0; padding: 0; }
.fraew-comments .comment-list li { padding: 16px 0; border-bottom: 1px solid var(--fraew-rule); }
.fraew-comments .comment-list .children { list-style: none; padding-left: 28px; }
.fraew-comments .comment-meta {
	font-family: var(--fraew-mono);
	font-size: 12px;
	text-transform: uppercase;
	color: var(--fraew-dim);
	margin-bottom: 8px;
}
.fraew-comments .comment-author { display: flex; align-items: center; gap: 10px; }
.fraew-comments .comment-author img { border-radius: 50%; display: block; }

.comment-form label {
	display: block;
	font-family: var(--fraew-mono);
	font-size: 12px;
	text-transform: uppercase;
	color: var(--fraew-muted);
	margin-bottom: 6px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--fraew-rule);
	background: #fff;
	font-family: var(--fraew-sans);
	font-size: 15px;
}
.comment-form .submit,
.fraew-button {
	padding: 12px 22px;
	border: 0;
	background: var(--fraew-dark);
	color: var(--fraew-bg);
	font-family: var(--fraew-mono);
	font-size: 13px;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}
.comment-form .submit:hover,
.fraew-button:hover { background: var(--fraew-teal); }

/* ==========================================================================
   Footer
   ========================================================================== */

.fraew-footer {
	background: var(--fraew-dark);
	color: #a8b0ae;
	margin-top: 64px;
	padding-top: 56px;
	padding-bottom: 40px;
	font-size: 14px;
}
.fraew-footer a { color: var(--fraew-mint); text-decoration: none; }
.fraew-footer a:hover { text-decoration: underline; }
.fraew-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.fraew-footer .fraew-widget__title { color: var(--fraew-mint); }
.fraew-footer .fraew-widget ul li { border-bottom-color: rgba(255, 255, 255, 0.12); }
.fraew-footer .fraew-widget ul li a { color: #a8b0ae; }
.fraew-footer__menu {
	display: flex;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.fraew-footer__bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-top: 32px;
	font-family: var(--fraew-mono);
	font-size: 12px;
	text-transform: uppercase;
	color: #7d8482;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1023px) {
	:root { --fraew-gut: 28px; }

	.fraew-nav-toggle { display: block; }
	.fraew-nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 50;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 16px var(--fraew-gut) 24px;
		background: var(--fraew-bg);
		border-bottom: 2px solid var(--fraew-dark);
	}
	.fraew-nav.is-open { display: flex; }
	.fraew-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.fraew-nav > ul > li > a { display: block; padding: 12px 0; border-bottom: 1px solid var(--fraew-rule); }
	.fraew-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		border: 0;
		box-shadow: none;
		margin: 0 0 8px;
		padding: 0 0 0 16px;
		min-width: 0;
	}
	.fraew-header__inner { position: relative; }

	.fraew-hero { grid-template-columns: 1fr; }
	.fraew-hero__text { padding: 40px var(--fraew-gut); }
	.fraew-hero__title { font-size: 40px; }

	.fraew-layout { grid-template-columns: 1fr; gap: 40px; }
	.fraew-grid { grid-template-columns: repeat(2, 1fr); }
	.fraew-footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 599px) {
	:root { --fraew-gut: 20px; }
	.fraew-grid { grid-template-columns: 1fr; }
	.fraew-footer__cols { grid-template-columns: 1fr; }
	.fraew-hero__title { font-size: 32px; }
	.fraew-filehead__title { font-size: 32px; }
	.fraew-content .wp-block-gallery { gap: 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}