/*
Theme Name: NEB GPA Calculator
Theme URI: https://neb.ankitak.com.np/
Author: NEB GPA Calculator
Author URI: https://neb.ankitak.com.np/
Description: A clean, education-focused WordPress theme for Nepal NEB GPA calculator websites. Ships a homepage (hero, GPA-to-percentage button, stream cards, about, grading table, FAQ), header/footer you can edit without code, and page templates that pair with the NEB GPA Calculator Core plugin for working Science and Management GPA calculators with printable provisional marksheets.
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.1.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: neb-gpa-calculator
Tags: education, blog, custom-logo, custom-menu, custom-colors, featured-images, full-width-template, block-patterns, translation-ready, right-sidebar, accessibility-ready

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

/* ==========================================================================
   1. Design tokens
   Values are overridden inline by the Customizer (see inc/customizer-css.php).
   ========================================================================== */

:root {
	--neb-primary: #4361ee;
	--neb-primary-dark: #3a56d4;
	--neb-secondary: #3f37c9;
	--neb-accent: #4895ef;
	--neb-heading: #212529;
	--neb-text: #333333;
	--neb-text-light: #666666;
	--neb-bg: #f5f7fa;
	--neb-surface: #ffffff;
	--neb-line: #e5e7eb;
	--neb-btn-bg: #4361ee;
	--neb-btn-text: #ffffff;
	--neb-btn2-bg: #ffffff;
	--neb-btn2-text: #4361ee;
	--neb-header-bg: #ffffff;
	--neb-header-text: #333333;
	--neb-footer-bg: #212529;
	--neb-footer-text: #ffffff;
	--neb-radius: 8px;
	--neb-radius-lg: 22px;
	--neb-section-space: 5rem;
	--neb-content-width: 1200px;
	--neb-font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--neb-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--neb-body-size: 1rem;
	--neb-h1-size: 2.6rem;
	--neb-h2-size: 2rem;
	--neb-h3-size: 1.4rem;
	--neb-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--neb-font-body);
	font-size: var(--neb-body-size);
	line-height: 1.7;
	color: var(--neb-text);
	background-color: var(--neb-bg);
	background-image:
		radial-gradient(circle at 8% -15%, rgba(67, 97, 238, 0.14), transparent 35%),
		radial-gradient(circle at 95% 0%, rgba(72, 149, 239, 0.12), transparent 30%),
		linear-gradient(180deg, #f3f7ff 0%, #f8fbff 60%, #f2f7ff 100%);
	background-attachment: fixed;
	word-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--neb-font-heading);
	color: var(--neb-heading);
	line-height: 1.25;
	margin: 0 0 0.6em;
	font-weight: 600;
}

h1 { font-size: var(--neb-h1-size); }
h2 { font-size: var(--neb-h2-size); }
h3 { font-size: var(--neb-h3-size); }

p { margin: 0 0 1.25rem; }

a {
	color: var(--neb-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover { color: var(--neb-primary-dark); }

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

ul, ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }

blockquote {
	margin: 0 0 1.5rem;
	padding: 0.75rem 1.25rem;
	border-left: 4px solid var(--neb-accent);
	background: #f5f7fa;
	border-radius: var(--neb-radius);
}

code, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.92em;
}

pre {
	background: #0f172a;
	color: #e2e8f0;
	padding: 1.1rem;
	border-radius: var(--neb-radius);
	overflow-x: auto;
}

table { border-collapse: collapse; }

hr {
	border: 0;
	border-top: 1px solid var(--neb-line);
	margin: 2rem 0;
}

/* ==========================================================================
   3. Accessibility helpers
   ========================================================================== */

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

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 100001;
	background: var(--neb-primary);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--neb-radius) var(--neb-radius);
	text-decoration: none;
	font-weight: 600;
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: 0;
	color: #fff;
}

:focus-visible {
	outline: 3px solid var(--neb-primary-dark);
	outline-offset: 2px;
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

.neb-container {
	width: min(var(--neb-content-width), 94%);
	margin-inline: auto;
}

.neb-section {
	padding: var(--neb-section-space) 0;
}

.neb-section--alt {
	background: rgba(255, 255, 255, 0.6);
}

.neb-section-title {
	text-align: center;
	margin-bottom: 0.6rem;
}

/* Short accent bar under centred section headings. */
.neb-section-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin: 0.9rem auto 0;
	border-radius: 999px;
	background-color: var(--neb-accent);
}

.neb-section-intro {
	text-align: center;
	max-width: 46rem;
	margin: 0 auto 2.5rem;
	color: var(--neb-text-light);
}

.neb-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 3rem;
	padding: var(--neb-section-space) 0;
	align-items: start;
}

.neb-layout--full {
	grid-template-columns: minmax(0, 1fr);
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.neb-button,
.wp-block-button__link,
button.neb-button,
input[type="submit"] {
	display: inline-block;
	background-color: var(--neb-btn-bg);
	color: var(--neb-btn-text);
	border: 2px solid var(--neb-btn-bg);
	border-radius: var(--neb-radius);
	padding: 0.75rem 1.6rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.neb-button:hover,
.neb-button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background-color: var(--neb-primary-dark);
	border-color: var(--neb-primary-dark);
	color: var(--neb-btn-text);
}

.neb-button--large {
	padding: 0.95rem 2rem;
	font-size: 1.05rem;
}

.neb-button--outline {
	background-color: var(--neb-btn2-bg);
	color: var(--neb-btn2-text);
	border-color: var(--neb-btn2-text);
}

.neb-button--outline:hover,
.neb-button--outline:focus {
	background-color: var(--neb-btn2-text);
	color: var(--neb-btn2-bg);
}

.neb-button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.75rem;
}

/* ==========================================================================
   6. Site header and navigation
   ========================================================================== */

.neb-header {
	position: sticky;
	top: 0;
	z-index: 9990;
	background: color-mix(in srgb, var(--neb-header-bg) 88%, transparent);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(67, 97, 238, 0.12);
	box-shadow: 0 10px 28px rgba(58, 86, 212, 0.07);
}

.neb-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.85rem 0;
}

.neb-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--neb-header-text);
}

.neb-brand__logo img {
	max-height: 46px;
	width: auto;
}

/* Logo mark, used only when the header brand is set to "Logo image only".
   The artwork has its own dark background, so a small radius and a hairline
   keep it looking deliberate on the white header instead of like a stray
   rectangle. */
.neb-brand__img {
	height: 46px;
	width: auto;
	max-width: 210px;
	object-fit: contain;
	border-radius: 10px;
}

@media (max-width: 600px) {
	.neb-brand__img { height: 38px; }
}

.neb-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

/* The wordmark is the whole brand, so it carries a little more weight than a
   title that sits next to a logo image would. */
.neb-brand__title {
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--neb-header-text);
}

.neb-brand__title .neb-brand__accent {
	background: linear-gradient(90deg, var(--neb-primary), var(--neb-accent));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.neb-brand__tagline {
	font-size: 0.8rem;
	color: var(--neb-text-light);
	font-weight: 400;
}

.neb-nav {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.neb-nav__menu {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.neb-nav__menu li { position: relative; }

.neb-nav__menu > li > a {
	display: block;
	padding: 0.55rem 0.85rem;
	border-radius: var(--neb-radius);
	color: var(--neb-header-text);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.97rem;
	white-space: nowrap;
}

.neb-nav__menu > li > a:hover,
.neb-nav__menu > li > a:focus,
.neb-nav__menu > .current-menu-item > a,
.neb-nav__menu > .current_page_item > a,
.neb-nav__menu > .current-menu-ancestor > a {
	color: var(--neb-primary);
	background: rgba(67, 97, 238, 0.09);
}

/* Sub-menus */
.neb-nav__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 13rem;
	background: var(--neb-surface);
	border: 1px solid var(--neb-line);
	border-radius: var(--neb-radius);
	box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
	list-style: none;
	margin: 0;
	padding: 0.4rem;
	display: none;
	z-index: 20;
}

.neb-nav__menu li:hover > .sub-menu,
.neb-nav__menu li:focus-within > .sub-menu {
	display: block;
}

.neb-nav__menu .sub-menu a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: calc(var(--neb-radius) - 2px);
	color: var(--neb-text);
	text-decoration: none;
	font-size: 0.92rem;
}

.neb-nav__menu .sub-menu a:hover,
.neb-nav__menu .sub-menu a:focus {
	background: rgba(67, 97, 238, 0.09);
	color: var(--neb-primary);
}

.neb-nav-toggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	border: 1px solid var(--neb-line);
	border-radius: var(--neb-radius);
	color: var(--neb-header-text);
	padding: 0.5rem 0.8rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.neb-nav-toggle__bars {
	display: inline-block;
	width: 1.15rem;
	height: 2px;
	background: currentColor;
	position: relative;
}

.neb-nav-toggle__bars::before,
.neb-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
}

.neb-nav-toggle__bars::before { top: -6px; }
.neb-nav-toggle__bars::after { top: 6px; }

.neb-nav-toggle[aria-expanded="true"] .neb-nav-toggle__bars { background: transparent; }

.neb-nav-toggle[aria-expanded="true"] .neb-nav-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.neb-nav-toggle[aria-expanded="true"] .neb-nav-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

.neb-header--centered .neb-header__inner {
	flex-direction: column;
	text-align: center;
}

.neb-header--centered .neb-nav__menu { justify-content: center; }

/* ==========================================================================
   7. Hero
   ========================================================================== */

.neb-hero {
	padding: var(--neb-section-space) 0;
}

.neb-hero__inner {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 3rem;
	align-items: center;
}

.neb-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(76, 201, 240, 0.16);
	border: 1px solid rgba(76, 201, 240, 0.35);
	color: #0b6a95;
	border-radius: 999px;
	padding: 0.4rem 0.85rem;
	font-size: 0.82rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.neb-hero__title {
	font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin-bottom: 0.9rem;
}

.neb-hero__subtitle {
	font-size: 1.15rem;
	color: var(--neb-text-light);
	margin-bottom: 1.5rem;
	max-width: 40rem;
}

.neb-hero__visual {
	display: flex;
	justify-content: center;
}

.neb-hero__image {
	width: 100%;
	max-width: 520px;
	height: auto;
	border-radius: var(--neb-radius-lg);
}

.neb-hero__card {
	background: var(--neb-surface);
	border: 1px solid rgba(67, 97, 238, 0.16);
	border-radius: var(--neb-radius-lg);
	padding: 1.75rem;
	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}

.neb-hero__card-title {
	margin-bottom: 0.5rem;
}

.neb-hero__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.neb-hero__list li {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin-bottom: 0.6rem;
	font-size: 0.95rem;
}

.neb-hero__list li::before {
	content: "\2713";
	color: var(--neb-primary);
	font-weight: 700;
	line-height: 1.6;
}

/* ==========================================================================
   8. Stream cards
   ========================================================================== */

.neb-streams {
	display: grid;
	/* min() stops the track forcing the layout wider than a 320px phone. */
	grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
	gap: 2rem;
}

.neb-stream-card {
	display: flex;
	flex-direction: column;
	background: var(--neb-surface);
	border: 1px solid var(--neb-line);
	border-radius: var(--neb-radius-lg);
	padding: 2rem;
	box-shadow: var(--neb-shadow);
	text-align: center;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.neb-stream-card:hover,
.neb-stream-card:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 18px 34px rgba(15, 23, 42, 0.13);
}

.neb-stream-card__icon {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 auto 1.1rem;
	border-radius: 50%;
	background: rgba(67, 97, 238, 0.1);
	color: var(--neb-primary);
	font-size: 1.5rem;
	overflow: hidden;
}

.neb-stream-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Optional Customizer image, used instead of the built-in icon. */
.neb-stream-card__image {
	display: block;
	width: 84px;
	height: 84px;
	object-fit: contain;
	margin: 0 auto 1.25rem;
}

.neb-stream-card__title {
	margin-bottom: 0.6rem;
}

.neb-stream-card__text {
	color: var(--neb-text-light);
	margin-bottom: 1.1rem;
}

.neb-stream-card__features {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	text-align: left;
}

.neb-stream-card__features li {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin-bottom: 0.5rem;
	font-size: 0.95rem;
}

.neb-stream-card__features li::before {
	content: "\2713";
	color: #16a34a;
	font-weight: 700;
	line-height: 1.6;
}

.neb-stream-card__actions {
	margin-top: auto;
}

/* ==========================================================================
   9. About + formula
   ========================================================================== */

.neb-about {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 3rem;
	align-items: start;
}

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

.neb-feature-list li {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	margin-bottom: 0.7rem;
}

.neb-feature-list li::before {
	content: "\2713";
	color: var(--neb-primary);
	font-weight: 700;
	line-height: 1.7;
}

.neb-formula-box {
	background: var(--neb-surface);
	border: 1px solid rgba(67, 97, 238, 0.16);
	border-radius: var(--neb-radius-lg);
	padding: 1.75rem;
	box-shadow: var(--neb-shadow);
}

.neb-formula-box p {
	margin-bottom: 0.9rem;
}

.neb-formula-box p:last-child { margin-bottom: 0; }

.neb-formula {
	display: block;
	margin-top: 0.5rem;
	background: #eef3ff;
	border-radius: var(--neb-radius);
	padding: 0.65rem 0.85rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9rem;
	color: #26327a;
	word-break: break-word;
}

/* ==========================================================================
   10. Grading tables and content tables
   ========================================================================== */

.neb-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.neb-content table,
.neb-table--content {
	width: 100%;
	border: 1px solid var(--neb-line);
	border-radius: var(--neb-radius);
	box-shadow: var(--neb-shadow);
	background: var(--neb-surface);
}

.neb-content th,
.neb-content td {
	padding: 0.8rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--neb-line);
	vertical-align: top;
}

.neb-content thead th {
	background: var(--neb-primary);
	color: #fff;
	font-weight: 600;
}

.neb-content tbody tr:nth-child(even) { background: #f9fafb; }

.neb-content tbody tr:last-child th,
.neb-content tbody tr:last-child td { border-bottom: 0; }

.neb-note-box {
	background: #f5f7fa;
	border-left: 4px solid var(--neb-accent);
	border-radius: var(--neb-radius);
	padding: 1.1rem 1.35rem;
	margin-top: 1.5rem;
}

.neb-note-box p:last-child { margin-bottom: 0; }

/* ==========================================================================
   11. FAQ accordion
   ========================================================================== */

.neb-faq {
	max-width: 52rem;
	margin: 0 auto;
}

.neb-faq__item {
	background: var(--neb-surface);
	border: 1px solid var(--neb-line);
	border-radius: var(--neb-radius);
	margin-bottom: 0.85rem;
	overflow: hidden;
}

.neb-faq__question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	width: 100%;
	background: transparent;
	border: 0;
	padding: 1.15rem 1.35rem;
	font: inherit;
	font-weight: 600;
	text-align: left;
	color: var(--neb-heading);
	cursor: pointer;
}

.neb-faq__question:hover { background: #f9fafb; }

.neb-faq__icon {
	flex: 0 0 auto;
	position: relative;
	width: 0.9rem;
	height: 0.9rem;
}

.neb-faq__icon::before,
.neb-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--neb-primary);
	transition: transform 0.2s ease;
}

.neb-faq__icon::after { transform: rotate(90deg); }

.neb-faq__question[aria-expanded="true"] .neb-faq__icon::after {
	transform: rotate(0deg);
}

.neb-faq__answer {
	padding: 0 1.35rem 1.25rem;
	color: var(--neb-text);
}

.neb-faq__answer[hidden] { display: none; }

.neb-faq__answer p:last-child { margin-bottom: 0; }

/* ==========================================================================
   12. Footer
   ========================================================================== */

.neb-footer {
	background: var(--neb-footer-bg);
	color: var(--neb-footer-text);
	padding: 4rem 0 0;
	margin-top: 0;
}

.neb-footer a { color: rgba(255, 255, 255, 0.82); }
.neb-footer a:hover { color: #fff; }

.neb-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 2.5rem;
	padding-bottom: 2.5rem;
}

.neb-footer__heading {
	color: inherit;
	font-size: 1.1rem;
	margin-bottom: 1rem;
}

.neb-footer__text { opacity: 0.82; }

.neb-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.neb-footer__list li { margin-bottom: 0.75rem; }

.neb-footer__list a { text-decoration: none; }

.neb-footer__list a:hover,
.neb-footer__list a:focus { text-decoration: underline; }

.neb-footer__social {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
}

.neb-footer__social a {
	display: grid;
	place-items: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 0.6rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	font-size: 0.85rem;
	text-decoration: none;
}

.neb-footer__social a:hover,
.neb-footer__social a:focus {
	background: rgba(255, 255, 255, 0.12);
}

.neb-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 1.35rem 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	align-items: center;
	font-size: 0.9rem;
}

.neb-footer__bottom p { margin: 0; opacity: 0.78; }

.neb-footer__legal {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.neb-footer__legal a { text-decoration: none; font-size: 0.9rem; }

.neb-footer__logo img {
	/* The wide artwork is the wordmark version, so it is allowed to be a bit
	   larger here. */
	max-width: 240px;
	height: auto;
	margin-bottom: 0.85rem;
	display: block;
}

/* The bundled artwork carries its own near-black background, which would show
   as a slightly-different black rectangle on the dark footer. Blending it drops
   that background away. Scoped to the bundled file only: a logo you upload may
   be dark, and blending that would hide it. */
.neb-logo--blend {
	mix-blend-mode: screen;
}

@media (max-width: 600px) {
	.neb-footer__logo img { max-width: 190px; }
}

/* ==========================================================================
   13. Content, entries, widgets
   ========================================================================== */

.neb-content {
	background: var(--neb-surface);
	border: 1px solid var(--neb-line);
	border-radius: var(--neb-radius-lg);
	padding: 2.25rem;
	box-shadow: var(--neb-shadow);
}

.neb-content--bare {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.neb-content > *:first-child { margin-top: 0; }
.neb-content > *:last-child { margin-bottom: 0; }

.neb-content img { border-radius: var(--neb-radius); }

.neb-entry__header { margin-bottom: 1.5rem; }

.neb-entry__meta {
	font-size: 0.9rem;
	color: var(--neb-text-light);
	margin-bottom: 0.5rem;
}

.neb-entry__meta a { color: inherit; }

.neb-entry__thumb img { border-radius: var(--neb-radius-lg); }

.neb-entry__footer {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--neb-line);
}

.neb-posts {
	display: grid;
	gap: 1.5rem;
}

.neb-post-card {
	background: var(--neb-surface);
	border: 1px solid var(--neb-line);
	border-radius: var(--neb-radius-lg);
	padding: 1.75rem;
	box-shadow: var(--neb-shadow);
}

.neb-post-card__title { margin-bottom: 0.4rem; }
.neb-post-card__title a { text-decoration: none; }

.neb-sidebar .widget {
	background: var(--neb-surface);
	border: 1px solid var(--neb-line);
	border-radius: var(--neb-radius-lg);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: var(--neb-shadow);
}

.neb-sidebar .widget-title,
.neb-sidebar .wp-block-heading { font-size: 1.1rem; margin-bottom: 0.85rem; }

.neb-sidebar ul { list-style: none; padding: 0; }
.neb-sidebar li { margin-bottom: 0.5rem; }

.neb-breadcrumbs {
	font-size: 0.88rem;
	color: var(--neb-text-light);
	margin-bottom: 1rem;
}

.neb-breadcrumbs a { color: inherit; }

.neb-pagination {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 2.5rem;
}

.neb-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.6rem;
	border: 1px solid var(--neb-line);
	border-radius: var(--neb-radius);
	background: var(--neb-surface);
	text-decoration: none;
}

.neb-pagination .page-numbers.current {
	background: var(--neb-primary);
	border-color: var(--neb-primary);
	color: #fff;
}

/* Forms in content */
.neb-content input[type="text"],
.neb-content input[type="email"],
.neb-content input[type="url"],
.neb-content input[type="number"],
.neb-content input[type="search"],
.neb-content input[type="tel"],
.neb-content textarea,
.neb-content select,
.neb-comment-form input:not([type="submit"]):not([type="checkbox"]),
.neb-comment-form textarea {
	width: 100%;
	padding: 0.7rem 0.95rem;
	border: 1px solid var(--neb-line);
	border-radius: var(--neb-radius);
	font: inherit;
	background: #fff;
}

.neb-content label,
.neb-comment-form label {
	display: block;
	font-weight: 500;
	margin-bottom: 0.35rem;
}

.neb-comment-form .comment-form-cookies-consent label {
	display: inline;
}

.neb-comment-form .form-submit { margin-top: 1rem; }

/* Comments */
.neb-comments { margin-top: 3rem; }

.neb-comments ol { list-style: none; padding: 0; }

.neb-comment {
	background: var(--neb-surface);
	border: 1px solid var(--neb-line);
	border-radius: var(--neb-radius);
	padding: 1.25rem;
	margin-bottom: 1.25rem;
}

.neb-comment .children { margin-top: 1.25rem; padding-left: 1.5rem; }

.neb-comment__meta {
	font-size: 0.88rem;
	color: var(--neb-text-light);
	margin-bottom: 0.6rem;
}

/* ==========================================================================
   14. Calculator page wrapper
   ========================================================================== */

.neb-calculator-page {
	padding: calc(var(--neb-section-space) * 0.6) 0 var(--neb-section-space);
}

.neb-calculator-page__content {
	margin-bottom: 2rem;
}

.neb-calculator-page__content > :last-child { margin-bottom: 0; }

/* ==========================================================================
   15. WordPress core blocks and alignment
   ========================================================================== */

.alignwide {
	width: min(1400px, 96vw);
	max-width: 96vw;
	margin-left: auto;
	margin-right: auto;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.aligncenter { margin-inline: auto; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }

.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption { font-size: 0.9rem; color: var(--neb-text-light); }

.sticky { position: relative; }

.bypostauthor { display: block; }

.wp-block-image img { border-radius: var(--neb-radius); }

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
	gap: 0.85rem;
}

.gallery-item { margin: 0; }

.wp-block-quote { border-left: 4px solid var(--neb-accent); padding-left: 1.25rem; }

.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th,
.wp-block-table td { border: 1px solid var(--neb-line); padding: 0.7rem 0.9rem; }

.post-password-form input[type="password"] {
	padding: 0.7rem 0.95rem;
	border: 1px solid var(--neb-line);
	border-radius: var(--neb-radius);
}

.alignleft.wp-block-pullquote { float: none; }

/* ==========================================================================
   16. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.neb-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.neb-about { grid-template-columns: 1fr; gap: 2rem; }
	.neb-hero__inner { grid-template-columns: 1fr; gap: 2rem; }
	.neb-hero__card { order: 2; }
}

@media (max-width: 880px) {
	:root {
		--neb-section-space: 3.25rem;
		--neb-h1-size: 2rem;
		--neb-h2-size: 1.6rem;
	}

	.neb-nav-toggle { display: inline-flex; }

	.neb-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		background: var(--neb-surface);
		border-bottom: 1px solid var(--neb-line);
		box-shadow: 0 20px 34px rgba(15, 23, 42, 0.14);
		max-height: calc(100vh - 100%);
		overflow-y: auto;
		padding: 1rem 0;
	}

	.neb-nav.is-open { display: block; }

	.neb-nav__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.neb-nav__menu > li > a {
		padding: 0.85rem 1.5rem;
		border-radius: 0;
		border-bottom: 1px solid var(--neb-line);
	}

	.neb-nav__menu .sub-menu {
		position: static;
		display: block;
		border: 0;
		box-shadow: none;
		padding: 0 0 0 1rem;
		min-width: 0;
	}

	.neb-header--centered .neb-header__inner {
		flex-direction: row;
		text-align: left;
	}
}

@media (max-width: 600px) {
	.neb-content { padding: 1.5rem; border-radius: var(--neb-radius); }
	.neb-stream-card { padding: 1.5rem; }
	.neb-footer__bottom { flex-direction: column; text-align: center; }
	.neb-footer__legal { justify-content: center; }
	.neb-button-row .neb-button { width: 100%; text-align: center; }
	.alignleft, .alignright { float: none; margin: 1rem 0; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.neb-stream-card { transition: none; }
	.neb-stream-card:hover { transform: none; }
	.neb-convert-button { transition: none; }
	.neb-convert-button:hover { transform: none; }
	.skip-link { transition: none; }
}

/* ==========================================================================
   17. Call to action band
   ========================================================================== */

.neb-cta__panel {
	background-image: linear-gradient(120deg, var(--neb-primary), var(--neb-secondary) 55%, var(--neb-accent));
	border-radius: var(--neb-radius-lg);
	padding: clamp(2rem, 1.2rem + 3vw, 3.5rem);
	text-align: center;
}

.neb-cta__title {
	color: #fff;
	margin-bottom: 0.5rem;
}

.neb-cta__text {
	color: rgba(255, 255, 255, 0.92);
	max-width: 40rem;
	margin: 0 auto 1.75rem;
}

.neb-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	justify-content: center;
}

.neb-button--light {
	background-color: #fff;
	border-color: #fff;
	color: var(--neb-primary);
}

.neb-button--light:hover,
.neb-button--light:focus {
	background-color: rgba(255, 255, 255, 0.88);
	border-color: rgba(255, 255, 255, 0.88);
	color: var(--neb-secondary);
}

@media (max-width: 600px) {
	.neb-cta__actions .neb-button { width: 100%; text-align: center; }
}

/* ==========================================================================
   18. GPA to percentage button
   The prominent button above the stream cards that opens the converter page.
   Colours come from the palette variables, so the Colours screen controls them.
   ========================================================================== */

.neb-convert--center {
	text-align: center;
}

.neb-convert--left {
	text-align: left;
}

.neb-convert__note {
	max-width: 42rem;
	margin: 0 auto 1.6rem;
	color: var(--neb-text-light);
	font-size: 1.02rem;
}

.neb-convert--left .neb-convert__note {
	margin-inline: 0;
}

.neb-convert-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 3.4rem;
	padding: 1rem 2.1rem;
	border: 2px solid transparent;
	border-radius: 999px;
	background-color: var(--neb-btn-bg);
	color: var(--neb-btn-text);
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 10px 22px rgba(58, 86, 212, 0.24);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.neb-convert-button__icon {
	flex: none;
}

.neb-convert-button:hover {
	background-color: var(--neb-primary-dark);
	color: var(--neb-btn-text);
	transform: translateY(-2px);
	box-shadow: 0 16px 30px rgba(58, 86, 212, 0.3);
}

/* The theme's global :focus-visible ring, tightened here so it stays clear of
   the rounded edge and reads against both the button and the page. */
.neb-convert-button:focus-visible {
	outline: 3px solid var(--neb-secondary);
	outline-offset: 3px;
}

/* Blue to navy, the same two palette colours the call-to-action band uses. */
.neb-convert-button--gradient {
	background-image: linear-gradient(120deg, var(--neb-primary), var(--neb-secondary));
}

.neb-convert-button--gradient:hover {
	background-image: linear-gradient(120deg, var(--neb-primary-dark), var(--neb-secondary));
}

/* A quieter option, using the outline button colours. */
.neb-convert-button--outline {
	background-color: var(--neb-btn2-bg);
	border-color: var(--neb-btn2-text);
	color: var(--neb-btn2-text);
	box-shadow: 0 8px 18px rgba(58, 86, 212, 0.16);
}

.neb-convert-button--outline:hover {
	background-color: var(--neb-btn2-text);
	border-color: var(--neb-btn2-text);
	color: var(--neb-btn2-bg);
}

@media (max-width: 600px) {
	/* Wide enough to tap, still inside the page on a small phone. */
	.neb-convert-button {
		width: 100%;
		max-width: 26rem;
		padding-inline: 1.4rem;
		font-size: 1.05rem;
	}
}

/* ==========================================================================
   19. Print
   ========================================================================== */

@media print {
	.neb-header,
	.neb-footer,
	.neb-sidebar,
	.neb-breadcrumbs,
	.neb-pagination,
	.neb-comments,
	.neb-cta,
	.neb-convert,
	.skip-link {
		display: none !important;
	}

	body {
		background: #fff !important;
		font-size: 11pt;
	}

	.neb-content {
		border: 0;
		box-shadow: none;
		padding: 0;
	}
}