/*
Theme Name: Peoria Biotic Tracker
Theme URI: https://peoriapark.gov
Description: Companion theme for the Peoria Biotic Tracker plugin. Role-aware navigation, full Customizer control, and a responsive field-sciences aesthetic — no widget areas required.
Version: 1.5.0
Requires at least: 6.3
Requires PHP: 8.0
Author: Willie Howe
Author URI: https://peoriapark.gov
Text Domain: pbt-theme
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-menu, custom-logo, custom-colors, custom-header, featured-images, full-width-template, theme-options, accessibility-ready, responsive-layout
*/

/* ============================================================
   1. DESIGN TOKENS  (overridden by Customizer via inline CSS)
   ============================================================ */
:root {
	--pbt-primary:        #1f5c3f;
	--pbt-primary-dark:   #163f2b;
	--pbt-primary-light:  #2e7d52;
	--pbt-accent:         #5c9e6b;
	--pbt-accent-warm:    #8ab87a;
	--pbt-sand:           #f7f3ea;
	--pbt-sand-dark:      #ede8dd;
	--pbt-ink:            #1d2b24;
	--pbt-ink-muted:      #506257;
	--pbt-border:         #dce6db;
	--pbt-white:          #ffffff;
	--pbt-surface:        #fcfdfb;
	--pbt-header-bg:      #1f5c3f;
	--pbt-header-text:    #ffffff;
	--pbt-nav-active:     #5c9e6b;
	--pbt-footer-bg:      #163f2b;
	--pbt-footer-text:    #c8ddd1;
	--pbt-link:           #1f5c3f;
	--pbt-link-hover:     #2e7d52;
	--pbt-radius:         14px;
	--pbt-radius-sm:      8px;
	--pbt-radius-lg:      22px;
	--pbt-shadow:         0 4px 20px rgba(31,92,63,.09);
	--pbt-shadow-lg:      0 10px 40px rgba(31,92,63,.14);
	--pbt-font-body:      'Georgia', 'Times New Roman', serif;
	--pbt-font-ui:        system-ui, -apple-system, 'Segoe UI', sans-serif;
	--pbt-container:      1200px;
	--pbt-sidebar-w:      280px;
	/* Touch target minimum */
	--pbt-touch:          44px;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
	font-size: 16px;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%; /* prevent iOS auto-zoom */
}

body {
	font-family: var(--pbt-font-ui);
	color: var(--pbt-ink);
	background: var(--pbt-sand);
	line-height: 1.6;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

a {
	color: var(--pbt-link);
	text-decoration: none;
}
a:hover { color: var(--pbt-link-hover); text-decoration: underline; }

/* Prevent tap highlight on iOS */
a, button { -webkit-tap-highlight-color: transparent; }

/* ============================================================
   3. SKIP LINK
   ============================================================ */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 1rem;
	z-index: 9999;
	background: var(--pbt-primary);
	color: #fff;
	padding: .5rem 1rem;
	border-radius: var(--pbt-radius-sm);
	font-size: .875rem;
	font-weight: 700;
}
.skip-link:focus { left: 1rem; }

/* ============================================================
   4. LAYOUT WRAPPERS
   ============================================================ */
.pbt-site-wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.pbt-container {
	width: 100%;
	max-width: var(--pbt-container);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 1.5rem);
}

.pbt-content-area {
	flex: 1;
	padding-block: clamp(1.25rem, 4vw, 2.5rem);
}

/* Sidebar layout — single column by default, two-col on wide screens */
.pbt-with-sidebar .pbt-content-area {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

/* ============================================================
   5. SITE HEADER
   ============================================================ */
.pbt-header {
	background: var(--pbt-header-bg);
	color: var(--pbt-header-text);
	box-shadow: 0 2px 12px rgba(0,0,0,.18);
	position: sticky;
	top: 0;
	z-index: 100;
}

.pbt-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	min-height: 60px;
}

/* Branding */
.pbt-site-branding {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex-shrink: 0;
	text-decoration: none;
	min-width: 0; /* allow text truncation */
}
.pbt-site-branding:hover { text-decoration: none; }

.pbt-custom-logo {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.pbt-site-title-wrap { min-width: 0; }

.pbt-site-title {
	font-size: clamp(.9rem, 2.5vw, 1.1rem);
	font-weight: 700;
	color: var(--pbt-header-text);
	line-height: 1.2;
	letter-spacing: -.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pbt-site-tagline {
	font-size: .72rem;
	color: rgba(255,255,255,.65);
	letter-spacing: .03em;
	margin-top: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Leaf icon fallback */
.pbt-logo-icon {
	width: 38px;
	height: 38px;
	background: rgba(255,255,255,.15);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.pbt-logo-icon svg { width: 20px; height: 20px; fill: #fff; }

/* Header right */
.pbt-header-right {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-shrink: 0;
}

/* User chip */
.pbt-user-chip {
	display: flex;
	align-items: center;
	gap: .45rem;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 50px;
	padding: .3rem .75rem .3rem .35rem;
	font-size: .8rem;
	color: #fff;
	text-decoration: none;
	transition: background .18s;
	white-space: nowrap;
	max-width: 180px;
	overflow: hidden;
}
.pbt-user-chip:hover {
	background: rgba(255,255,255,.22);
	text-decoration: none;
	color: #fff;
}
.pbt-user-chip .pbt-avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--pbt-nav-active);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .68rem;
	font-weight: 700;
	color: #fff;
	overflow: hidden;
	flex-shrink: 0;
}
.pbt-user-chip .pbt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pbt-user-chip .pbt-chip-name {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Auth links */
.pbt-auth-link {
	font-size: .8rem;
	color: rgba(255,255,255,.85);
	text-decoration: none;
	padding: .4rem .7rem;
	border: 1px solid rgba(255,255,255,.3);
	border-radius: 50px;
	transition: background .18s, color .18s;
	white-space: nowrap;
	min-height: var(--pbt-touch);
	display: inline-flex;
	align-items: center;
}
.pbt-auth-link:hover {
	background: rgba(255,255,255,.15);
	color: #fff;
	text-decoration: none;
}

/* Mobile menu toggle */
.pbt-menu-toggle {
	display: none;
	background: none;
	border: 1px solid rgba(255,255,255,.35);
	color: #fff;
	border-radius: var(--pbt-radius-sm);
	padding: .45rem .6rem;
	cursor: pointer;
	align-items: center;
	gap: .35rem;
	font-size: .8rem;
	font-family: var(--pbt-font-ui);
	line-height: 1;
	min-height: var(--pbt-touch);
	min-width: var(--pbt-touch);
	justify-content: center;
}
.pbt-menu-toggle:hover { background: rgba(255,255,255,.1); }

/* ============================================================
   6. PRIMARY NAVIGATION
   ============================================================ */
.pbt-nav-wrap {
	background: var(--pbt-primary-dark);
	border-top: 1px solid rgba(255,255,255,.08);
}

.pbt-nav-inner { display: flex; align-items: center; }

.pbt-primary-nav {
	display: flex;
	list-style: none;
	flex-wrap: wrap; /* allow wrapping on medium screens */
}

.pbt-primary-nav > li { position: relative; }

.pbt-primary-nav > li > a {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .7rem 1rem;
	color: rgba(255,255,255,.82);
	font-size: .86rem;
	font-weight: 500;
	text-decoration: none;
	transition: color .15s, background .15s;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	min-height: var(--pbt-touch);
}

.pbt-primary-nav > li > a:hover,
.pbt-primary-nav > li.current-menu-item > a,
.pbt-primary-nav > li.current-page-ancestor > a {
	color: #fff;
	background: rgba(255,255,255,.07);
	border-bottom-color: var(--pbt-accent-warm);
	text-decoration: none;
}

.pbt-primary-nav > li > a .pbt-nav-icon {
	width: 15px;
	height: 15px;
	opacity: .75;
	flex-shrink: 0;
}

/* Dropdown */
.pbt-primary-nav > li:hover > ul,
.pbt-primary-nav > li:focus-within > ul { display: block; }

.pbt-primary-nav ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--pbt-primary-dark);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 0 0 var(--pbt-radius) var(--pbt-radius);
	box-shadow: var(--pbt-shadow-lg);
	z-index: 200;
	list-style: none;
	padding: .35rem 0;
}

.pbt-primary-nav ul li a {
	display: block;
	padding: .55rem 1rem;
	color: rgba(255,255,255,.8);
	font-size: .84rem;
	text-decoration: none;
	transition: background .13s, color .13s;
	min-height: var(--pbt-touch);
	display: flex;
	align-items: center;
}
.pbt-primary-nav ul li a:hover {
	background: rgba(255,255,255,.08);
	color: #fff;
	text-decoration: none;
}

/* Role badge */
.pbt-role-badge {
	font-size: .62rem;
	font-weight: 700;
	background: rgba(255,255,255,.18);
	border-radius: 50px;
	padding: .1rem .4rem;
	letter-spacing: .04em;
	color: rgba(255,255,255,.85);
	margin-left: .25rem;
}

/* ============================================================
   7. ACCESS NOTICE BAR
   ============================================================ */
.pbt-access-notice {
	background: var(--pbt-sand);
	border: 1px solid var(--pbt-border);
	border-left: 4px solid var(--pbt-accent);
	border-radius: var(--pbt-radius);
	padding: .75rem 1rem;
	font-size: .87rem;
	color: var(--pbt-ink-muted);
	margin-bottom: 1.25rem;
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	flex-wrap: wrap;
}
.pbt-access-notice svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--pbt-accent); margin-top: .1rem; }
.pbt-access-notice a { color: var(--pbt-primary); font-weight: 700; }
.pbt-access-notice.is-editor {
	background: #edf7ef;
	border-left-color: var(--pbt-primary);
}

/* ============================================================
   8. PAGE HERO
   ============================================================ */
.pbt-page-hero {
	background: linear-gradient(135deg, var(--pbt-primary) 0%, var(--pbt-primary-light) 100%);
	color: #fff;
	padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1.25rem, 3vw, 2rem);
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.pbt-page-hero h1 {
	font-size: clamp(1.35rem, 4vw, 2rem);
	font-weight: 800;
	letter-spacing: -.03em;
	margin-bottom: .4rem;
	line-height: 1.15;
}
.pbt-page-hero p {
	font-size: clamp(.88rem, 2vw, 1rem);
	color: rgba(255,255,255,.78);
	max-width: 560px;
}

/* ============================================================
   9. MAIN CONTENT / ENTRY
   ============================================================ */
.pbt-main { background: transparent; }

.pbt-entry {
	background: var(--pbt-white);
	border-radius: var(--pbt-radius-lg);
	padding: clamp(1.25rem, 4vw, 2.25rem) clamp(1rem, 5vw, 2.5rem);
	box-shadow: var(--pbt-shadow);
	border: 1px solid var(--pbt-border);
}

.pbt-entry-header { margin-bottom: 1.5rem; }

.pbt-entry-title {
	font-size: clamp(1.3rem, 4vw, 1.85rem);
	font-weight: 800;
	color: var(--pbt-primary);
	line-height: 1.2;
	letter-spacing: -.02em;
	font-family: var(--pbt-font-body);
}

.pbt-entry-meta {
	margin-top: .5rem;
	font-size: .82rem;
	color: var(--pbt-ink-muted);
}

.pbt-entry-content {
	font-family: var(--pbt-font-body);
	line-height: 1.75;
	color: var(--pbt-ink);
}
.pbt-entry-content h2,
.pbt-entry-content h3,
.pbt-entry-content h4 {
	font-family: var(--pbt-font-ui);
	color: var(--pbt-primary);
	margin-top: 1.75em;
	margin-bottom: .5em;
}
.pbt-entry-content p { margin-bottom: 1.25em; }
.pbt-entry-content ul,
.pbt-entry-content ol { margin: 0 0 1.25em 1.5em; }
.pbt-entry-content li { margin-bottom: .4em; }
.pbt-entry-content blockquote {
	border-left: 4px solid var(--pbt-accent);
	padding: .75rem 1.25rem;
	background: var(--pbt-sand);
	border-radius: 0 var(--pbt-radius-sm) var(--pbt-radius-sm) 0;
	margin: 1.5em 0;
	font-style: italic;
	color: var(--pbt-ink-muted);
}

/* ============================================================
   10. SIDEBAR
   ============================================================ */
.pbt-sidebar-section {
	background: var(--pbt-white);
	border: 1px solid var(--pbt-border);
	border-radius: var(--pbt-radius-lg);
	padding: 1.25rem 1.35rem;
	margin-bottom: 1.25rem;
	box-shadow: var(--pbt-shadow);
}

.pbt-sidebar-section h3 {
	font-size: .83rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--pbt-primary);
	margin-bottom: .85rem;
	padding-bottom: .55rem;
	border-bottom: 2px solid var(--pbt-border);
}

.pbt-sidebar-nav { list-style: none; }
.pbt-sidebar-nav li { border-bottom: 1px solid var(--pbt-border); }
.pbt-sidebar-nav li:last-child { border-bottom: none; }
.pbt-sidebar-nav a {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 0;
	font-size: .9rem;
	color: var(--pbt-ink);
	text-decoration: none;
	transition: color .14s;
	min-height: var(--pbt-touch);
}
.pbt-sidebar-nav a:hover { color: var(--pbt-primary); text-decoration: none; }
.pbt-sidebar-nav .pbt-nav-icon { width: 16px; height: 16px; color: var(--pbt-accent); flex-shrink: 0; }

/* Stat grid in sidebar — 2x2 always */
.pbt-sidebar-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .65rem;
}
.pbt-sidebar-stat {
	background: var(--pbt-sand);
	border-radius: var(--pbt-radius);
	padding: .7rem .5rem;
	text-align: center;
}
.pbt-sidebar-stat strong {
	display: block;
	font-size: 1.3rem;
	color: var(--pbt-primary);
	font-weight: 800;
	line-height: 1;
}
.pbt-sidebar-stat span {
	display: block;
	font-size: .68rem;
	color: var(--pbt-ink-muted);
	margin-top: .25rem;
}

/* ============================================================
   11. BUTTONS
   ============================================================ */
.pbt-btn {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .65rem 1.25rem;
	border-radius: var(--pbt-radius);
	font-size: .9rem;
	font-weight: 700;
	cursor: pointer;
	border: 2px solid transparent;
	text-decoration: none;
	transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
	font-family: var(--pbt-font-ui);
	line-height: 1;
	min-height: var(--pbt-touch);
}
.pbt-btn-primary {
	background: var(--pbt-primary);
	color: #fff;
	border-color: var(--pbt-primary);
}
.pbt-btn-primary:hover {
	background: var(--pbt-primary-light);
	border-color: var(--pbt-primary-light);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(31,92,63,.25);
}
.pbt-btn-outline {
	background: transparent;
	color: var(--pbt-primary);
	border-color: var(--pbt-primary);
}
.pbt-btn-outline:hover {
	background: var(--pbt-primary);
	color: #fff;
	text-decoration: none;
}
.pbt-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ============================================================
   12. ALERTS & MESSAGES
   ============================================================ */
.pbt-alert {
	padding: .85rem 1.1rem;
	border-radius: var(--pbt-radius);
	font-size: .9rem;
	margin-bottom: 1.25rem;
	display: flex;
	align-items: flex-start;
	gap: .6rem;
}
.pbt-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: .1rem; }
.pbt-alert-success { background: #edf7ef; border: 1px solid #b5d9bc; color: #1f5c3f; }
.pbt-alert-warning { background: #fdf9ed; border: 1px solid #e8d98d; color: #7a5f0a; }
.pbt-alert-info    { background: #edf3fb; border: 1px solid #b5cef0; color: #1b3e6e; }

/* ============================================================
   13. FOOTER
   ============================================================ */
.pbt-footer {
	background: var(--pbt-footer-bg);
	color: var(--pbt-footer-text);
	padding: clamp(1.25rem, 3vw, 2rem) 0 1.25rem;
	margin-top: auto;
}

.pbt-footer-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	align-items: start;
}

.pbt-footer-brand .pbt-site-title { color: #fff; font-size: 1rem; }
.pbt-footer-brand .pbt-site-tagline { color: rgba(255,255,255,.5); margin-top: .25rem; font-size: .76rem; }

.pbt-footer-links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.1rem;
}
.pbt-footer-links a {
	color: rgba(255,255,255,.6);
	font-size: .82rem;
	text-decoration: none;
	transition: color .14s;
	min-height: var(--pbt-touch);
	display: inline-flex;
	align-items: center;
}
.pbt-footer-links a:hover { color: #fff; text-decoration: none; }

.pbt-footer-bottom {
	border-top: 1px solid rgba(255,255,255,.1);
	margin-top: 1.1rem;
	padding-top: .9rem;
	font-size: .74rem;
	color: rgba(255,255,255,.4);
	text-align: center;
}

/* ============================================================
   14. 404
   ============================================================ */
.pbt-not-found {
	text-align: center;
	padding: clamp(2rem, 8vw, 4rem) 1rem;
}
.pbt-not-found .pbt-big-number {
	font-size: clamp(4rem, 15vw, 7rem);
	font-weight: 900;
	color: var(--pbt-border);
	line-height: 1;
}
.pbt-not-found h1 { font-size: clamp(1.25rem, 4vw, 1.75rem); color: var(--pbt-primary); margin-bottom: 1rem; }
.pbt-not-found p { color: var(--pbt-ink-muted); margin-bottom: 1.5rem; }

/* ============================================================
   15. PAGINATION
   ============================================================ */
.pbt-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	justify-content: center;
	margin-top: 2rem;
}
.pbt-pagination a,
.pbt-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--pbt-touch);
	height: var(--pbt-touch);
	border-radius: var(--pbt-radius-sm);
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
}
.pbt-pagination a {
	background: var(--pbt-white);
	border: 1px solid var(--pbt-border);
	color: var(--pbt-ink);
}
.pbt-pagination a:hover {
	background: var(--pbt-primary);
	color: #fff;
	border-color: var(--pbt-primary);
	text-decoration: none;
}
.pbt-pagination .current {
	background: var(--pbt-primary);
	color: #fff;
}

/* ============================================================
   16. GUEST LANDING PAGE (logged-out front page)
   ============================================================ */
.pbt-guest-wrap {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	padding-block: clamp(1.25rem, 4vw, 2.5rem);
}

/* Intro / left panel */
.pbt-guest-intro { padding: .25rem 0; }

.pbt-guest-leaf {
	display: inline-flex;
	width: 60px;
	height: 60px;
	background: var(--pbt-primary);
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
	box-shadow: 0 6px 20px rgba(31,92,63,.22);
}
.pbt-guest-leaf svg { width: 30px; height: 30px; fill: #fff; }

.pbt-guest-title {
	font-size: clamp(1.6rem, 5vw, 2.5rem);
	font-weight: 900;
	color: var(--pbt-primary);
	line-height: 1.1;
	letter-spacing: -.03em;
	margin-bottom: .6rem;
	font-family: var(--pbt-font-body);
}

.pbt-guest-tagline {
	font-size: clamp(.9rem, 2.5vw, 1.1rem);
	color: var(--pbt-ink-muted);
	margin-bottom: 1.25rem;
	font-style: italic;
}

.pbt-guest-about {
	font-size: .96rem;
	color: var(--pbt-ink);
	line-height: 1.7;
	margin-bottom: 1.75rem;
}

/* Stat tiles below the about text */
.pbt-guest-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .65rem;
}
.pbt-guest-stat {
	background: var(--pbt-white);
	border: 1px solid var(--pbt-border);
	border-radius: var(--pbt-radius);
	padding: .85rem .6rem;
	text-align: center;
	box-shadow: var(--pbt-shadow);
}
.pbt-guest-stat strong {
	display: block;
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--pbt-primary);
	line-height: 1;
}
.pbt-guest-stat span {
	display: block;
	font-size: .7rem;
	color: var(--pbt-ink-muted);
	margin-top: .3rem;
}

/* ============================================================
   17. LOGIN CARD (embedded on guest landing)
   ============================================================ */
.pbt-login-card {
	background: var(--pbt-white);
	border: 1px solid var(--pbt-border);
	border-radius: var(--pbt-radius-lg);
	padding: clamp(1.35rem, 4vw, 2rem) clamp(1.25rem, 4vw, 2rem) 1.75rem;
	box-shadow: var(--pbt-shadow-lg);
}

.pbt-login-heading {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--pbt-primary);
	margin-bottom: 1.35rem;
}
.pbt-login-heading svg { width: 20px; height: 20px; flex-shrink: 0; }

.pbt-login-error {
	background: #fef2f2;
	border: 1px solid #f5c6c6;
	color: #8b1a1a;
	border-radius: var(--pbt-radius-sm);
	padding: .65rem .9rem;
	font-size: .86rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: 1.1rem;
}
.pbt-login-error svg { width: 16px; height: 16px; flex-shrink: 0; }

.pbt-login-form { display: flex; flex-direction: column; gap: .9rem; }

.pbt-login-field label {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: .82rem;
	font-weight: 700;
	color: var(--pbt-primary);
	margin-bottom: .35rem;
}
.pbt-login-field label svg { width: 14px; height: 14px; flex-shrink: 0; }

.pbt-login-field input {
	width: 100%;
	padding: .85rem 1rem;
	border: 1.5px solid var(--pbt-border);
	border-radius: var(--pbt-radius);
	font-size: 1rem; /* 16px prevents iOS zoom-on-focus */
	font-family: var(--pbt-font-ui);
	color: var(--pbt-ink);
	background: var(--pbt-surface);
	transition: border-color .15s, box-shadow .15s;
	outline: none;
	-webkit-appearance: none;
}
.pbt-login-field input:focus {
	border-color: var(--pbt-primary);
	box-shadow: 0 0 0 3px rgba(31,92,63,.12);
}

/* Password show/hide */
.pbt-password-wrap { position: relative; }
.pbt-password-wrap input { padding-right: 3rem; }
.pbt-toggle-pw {
	position: absolute;
	right: .7rem;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	color: var(--pbt-ink-muted);
	padding: .3rem;
	line-height: 0;
	transition: color .14s;
	min-width: var(--pbt-touch);
	min-height: var(--pbt-touch);
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.pbt-toggle-pw:hover { color: var(--pbt-primary); }
.pbt-toggle-pw svg { width: 18px; height: 18px; }

/* Remember + forgot row */
.pbt-login-options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	flex-wrap: wrap;
	font-size: .82rem;
}
.pbt-remember {
	display: flex;
	align-items: center;
	gap: .4rem;
	cursor: pointer;
	color: var(--pbt-ink-muted);
	min-height: var(--pbt-touch);
}
.pbt-remember input[type=checkbox] {
	accent-color: var(--pbt-primary);
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}
.pbt-forgot-link {
	color: var(--pbt-ink-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-size: .82rem;
	white-space: nowrap;
	min-height: var(--pbt-touch);
	display: inline-flex;
	align-items: center;
}
.pbt-forgot-link:hover { color: var(--pbt-primary); }

/* Submit button */
.pbt-login-submit {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 1rem;
	background: var(--pbt-primary);
	color: #fff;
	border: none;
	border-radius: var(--pbt-radius);
	font-size: 1rem;
	font-weight: 700;
	font-family: var(--pbt-font-ui);
	cursor: pointer;
	transition: background .18s, box-shadow .18s;
	margin-top: .25rem;
	min-height: var(--pbt-touch);
}
.pbt-login-submit:hover {
	background: var(--pbt-primary-light);
	box-shadow: 0 6px 20px rgba(31,92,63,.25);
}
.pbt-login-submit svg { width: 18px; height: 18px; }

.pbt-login-footer-note {
	text-align: center;
	font-size: .79rem;
	color: var(--pbt-ink-muted);
	margin-top: 1rem;
}

/* ============================================================
   18. ADMIN BAR OFFSET FIX
   ============================================================ */
body.pbt-logged-in:not(.admin-bar) {
	margin-top: 0 !important;
}

/* ============================================================
   19. RESPONSIVE — TABLET  (≥ 640px)
   ============================================================ */
@media (min-width: 640px) {
	.pbt-guest-stats {
		grid-template-columns: repeat(4, 1fr);
	}
	.pbt-footer-inner {
		grid-template-columns: 1fr auto;
		align-items: center;
	}
	.pbt-footer-links { justify-content: flex-end; }
}

/* ============================================================
   20. RESPONSIVE — DESKTOP  (≥ 900px)
   ============================================================ */
@media (min-width: 900px) {
	/* Two-column sidebar layout */
	.pbt-with-sidebar .pbt-content-area {
		grid-template-columns: 1fr var(--pbt-sidebar-w);
		gap: 2rem;
		align-items: start;
	}

	/* Guest landing: intro left, login card right */
	.pbt-guest-wrap {
		grid-template-columns: 1fr 400px;
		gap: 2.5rem;
		align-items: start;
	}
	.pbt-login-card {
		position: sticky;
		top: 80px;
	}
	.pbt-guest-about { max-width: 520px; }
}

/* ============================================================
   21. RESPONSIVE — MOBILE NAV (≤ 720px)
   ============================================================ */
@media (max-width: 720px) {
	/* Show hamburger, hide nav by default */
	.pbt-menu-toggle { display: flex; }
	.pbt-nav-wrap { display: none; }
	.pbt-nav-wrap.is-open { display: block; }

	/* Stack nav items vertically */
	.pbt-primary-nav {
		flex-direction: column;
		flex-wrap: nowrap;
	}
	.pbt-primary-nav > li > a {
		padding: .85rem 1.25rem;
		border-bottom: 1px solid rgba(255,255,255,.08);
		border-bottom-width: 1px; /* override the active underline trick */
	}
	/* Submenus: inline, indented */
	.pbt-primary-nav ul {
		display: block;
		position: static;
		border-radius: 0;
		border: none;
		box-shadow: none;
		background: rgba(0,0,0,.14);
		padding-left: 1rem;
	}

	/* Collapse user chip text on small screens */
	.pbt-user-chip .pbt-chip-name { display: none; }
	.pbt-user-chip { padding: .3rem .45rem; border-radius: 50%; max-width: none; }
}

/* ============================================================
   22. RESPONSIVE — SMALL PHONE  (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
	/* Hide tagline in header to save space */
	.pbt-site-tagline { display: none; }

	/* Tighten entry card padding */
	.pbt-entry {
		border-radius: var(--pbt-radius);
	}

	/* Stack login options column */
	.pbt-login-options {
		flex-direction: column;
		align-items: flex-start;
		gap: .35rem;
	}

	/* Full-width buttons in hero areas */
	.pbt-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   23. PRINT
   ============================================================ */
@media print {
	.pbt-header, .pbt-nav-wrap, .pbt-footer, .pbt-sidebar,
	.pbt-menu-toggle, .pbt-login-card { display: none !important; }
	.pbt-with-sidebar .pbt-content-area { display: block; }
	.pbt-guest-wrap { display: block; }
	body { background: #fff; color: #000; }
	a { color: #000; }
}

/* ============================================================
   24. FRONT-END ADMIN PORTAL  (.pbt-frontend-admin)
   The plugin renders its admin screens on the front end using
   WP admin markup classes. These styles make them look native
   to the theme rather than plain WP-admin grey.
   ============================================================ */

/* Portal container */
.pbt-frontend-admin {
	background: var(--pbt-sand);
	border: 1px solid var(--pbt-border);
	border-radius: var(--pbt-radius-lg);
	padding: clamp(1rem, 3vw, 1.75rem);
}

/* Tab strip */
.pbt-frontend-admin .nav-tab-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	border-bottom: 2px solid var(--pbt-border);
	margin-bottom: 1.5rem;
	padding-bottom: 0;
}

.pbt-frontend-admin .nav-tab {
	display: inline-flex;
	align-items: center;
	padding: .6rem 1.1rem;
	font-size: .86rem;
	font-weight: 600;
	color: var(--pbt-ink-muted);
	text-decoration: none;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: var(--pbt-radius-sm) var(--pbt-radius-sm) 0 0;
	background: transparent;
	transition: color .14s, background .14s;
	min-height: var(--pbt-touch);
	margin-bottom: -2px; /* overlap the border-bottom */
}

.pbt-frontend-admin .nav-tab:hover {
	color: var(--pbt-primary);
	background: var(--pbt-white);
	text-decoration: none;
}

.pbt-frontend-admin .nav-tab-active,
.pbt-frontend-admin .nav-tab-active:hover {
	color: var(--pbt-primary);
	background: var(--pbt-white);
	border-color: var(--pbt-border);
	border-bottom-color: var(--pbt-white);
}

/* Portal inner wrap */
.pbt-frontend-admin .wrap {
	background: var(--pbt-white);
	border: 1px solid var(--pbt-border);
	border-radius: var(--pbt-radius);
	padding: clamp(1rem, 3vw, 1.5rem);
	margin: 0;
}

.pbt-frontend-admin .wrap > h1 {
	font-size: clamp(1.1rem, 3vw, 1.5rem);
	font-weight: 800;
	color: var(--pbt-primary);
	margin-bottom: 1.25rem;
	padding-bottom: .75rem;
	border-bottom: 2px solid var(--pbt-border);
}

/* Stat cards */
.pbt-frontend-admin .pbt-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: .85rem;
	margin-bottom: 1.5rem;
}

.pbt-frontend-admin .pbt-card {
	background: var(--pbt-surface);
	border: 1px solid var(--pbt-border);
	border-radius: var(--pbt-radius);
	padding: 1.1rem 1rem;
	box-shadow: var(--pbt-shadow);
}

.pbt-frontend-admin .pbt-card strong {
	display: block;
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: 800;
	color: var(--pbt-primary);
	line-height: 1;
	margin-bottom: .3rem;
}

.pbt-frontend-admin .pbt-card span {
	font-size: .8rem;
	color: var(--pbt-ink-muted);
}

/* Panel sections */
.pbt-frontend-admin .pbt-panel {
	background: var(--pbt-surface);
	border: 1px solid var(--pbt-border);
	border-radius: var(--pbt-radius);
	padding: 1.25rem;
	margin-top: 1rem;
}

.pbt-frontend-admin .pbt-panel > h2 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--pbt-primary);
	margin-bottom: 1rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--pbt-border);
}

/* Tables inside portal */
.pbt-frontend-admin table.widefat {
	width: 100%;
	border-collapse: collapse;
	font-size: .88rem;
	background: var(--pbt-white);
	border: 1px solid var(--pbt-border);
	border-radius: var(--pbt-radius-sm);
	overflow: hidden;
}

.pbt-frontend-admin table.widefat thead th {
	background: var(--pbt-sand);
	color: var(--pbt-primary);
	font-weight: 700;
	padding: .7rem .9rem;
	text-align: left;
	font-size: .82rem;
	border-bottom: 2px solid var(--pbt-border);
}

.pbt-frontend-admin table.widefat tbody td {
	padding: .65rem .9rem;
	border-bottom: 1px solid var(--pbt-border);
	vertical-align: middle;
	color: var(--pbt-ink);
}

.pbt-frontend-admin table.widefat tbody tr:last-child td {
	border-bottom: none;
}

.pbt-frontend-admin table.widefat tbody tr:hover td {
	background: var(--pbt-sand);
}

/* Make table scrollable on small screens */
.pbt-frontend-admin .pbt-panel {
	overflow-x: auto;
}

/* Form tables */
.pbt-frontend-admin .form-table {
	width: 100%;
	border-collapse: collapse;
}

.pbt-frontend-admin .form-table th {
	width: 200px;
	padding: .75rem .5rem .75rem 0;
	font-weight: 700;
	font-size: .88rem;
	color: var(--pbt-ink);
	vertical-align: top;
	padding-top: 1rem;
}

.pbt-frontend-admin .form-table td {
	padding: .5rem 0 .75rem;
}

.pbt-frontend-admin .form-table input[type=text],
.pbt-frontend-admin .form-table input[type=email],
.pbt-frontend-admin .form-table select,
.pbt-frontend-admin .form-table textarea {
	width: 100%;
	max-width: 400px;
	padding: .7rem .9rem;
	border: 1.5px solid var(--pbt-border);
	border-radius: var(--pbt-radius-sm);
	font-size: .93rem;
	font-family: var(--pbt-font-ui);
	color: var(--pbt-ink);
	background: var(--pbt-white);
	transition: border-color .15s, box-shadow .15s;
	outline: none;
	-webkit-appearance: none;
}

.pbt-frontend-admin .form-table input:focus,
.pbt-frontend-admin .form-table select:focus,
.pbt-frontend-admin .form-table textarea:focus {
	border-color: var(--pbt-primary);
	box-shadow: 0 0 0 3px rgba(31,92,63,.1);
}

.pbt-frontend-admin .form-table .large-text {
	max-width: 100%;
	font-family: var(--pbt-font-ui);
	font-size: .88rem;
	min-height: 200px;
}

.pbt-frontend-admin .form-table label {
	font-size: .88rem;
	color: var(--pbt-ink-muted);
}

/* Submit / action buttons */
.pbt-frontend-admin .button,
.pbt-frontend-admin .button-primary,
.pbt-frontend-admin .button-secondary {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .65rem 1.25rem;
	border-radius: var(--pbt-radius);
	font-size: .9rem;
	font-weight: 700;
	cursor: pointer;
	font-family: var(--pbt-font-ui);
	line-height: 1;
	text-decoration: none;
	transition: background .18s, box-shadow .18s, border-color .18s;
	min-height: var(--pbt-touch);
	border: 2px solid transparent;
}

.pbt-frontend-admin .button-primary,
.pbt-frontend-admin input[type=submit] {
	background: var(--pbt-primary);
	color: #fff !important;
	border-color: var(--pbt-primary);
}

.pbt-frontend-admin .button-primary:hover,
.pbt-frontend-admin input[type=submit]:hover {
	background: var(--pbt-primary-light);
	border-color: var(--pbt-primary-light);
	box-shadow: 0 4px 14px rgba(31,92,63,.22);
	text-decoration: none;
	color: #fff !important;
}

.pbt-frontend-admin .button-secondary {
	background: var(--pbt-white);
	color: var(--pbt-primary) !important;
	border-color: var(--pbt-primary);
}

.pbt-frontend-admin .button-secondary:hover {
	background: var(--pbt-primary);
	color: #fff !important;
	text-decoration: none;
}

/* Checklist print styles augment */
@media print {
	.pbt-frontend-admin .nav-tab-wrapper,
	.pbt-frontend-admin .button,
	.pbt-frontend-admin .button-primary,
	.pbt-frontend-admin .button-secondary { display: none !important; }
}

/* Responsive: stack form-table on mobile */
@media (max-width: 640px) {
	.pbt-frontend-admin .form-table,
	.pbt-frontend-admin .form-table tbody,
	.pbt-frontend-admin .form-table tr,
	.pbt-frontend-admin .form-table th,
	.pbt-frontend-admin .form-table td {
		display: block;
		width: 100%;
	}
	.pbt-frontend-admin .form-table th {
		padding-bottom: .25rem;
		padding-top: .75rem;
		width: auto;
	}
	.pbt-frontend-admin .form-table input[type=text],
	.pbt-frontend-admin .form-table input[type=email],
	.pbt-frontend-admin .form-table select,
	.pbt-frontend-admin .form-table textarea {
		max-width: 100%;
	}
	.pbt-frontend-admin .nav-tab {
		font-size: .78rem;
		padding: .5rem .75rem;
	}
}