/************************************************
Theme Name: GeneratePress Child
Template: generatepress
Version: 1.1
Description: Child theme for GPA Calculator site.
Typography, colors, and spacing defined in
gpa-design-tokens.css (source of truth: gpa-homepage.css).

/* ---- Container ---- */
 
/* ============================================
   1. SECTION HEADER (label pill + H2)
   ============================================ */
.content-label {
    display: inline-block !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 24px !important;
}
.content-label-blue { background: #DBEAFE !important; color: #1E40AF !important; }
.content-label-green { background: #D1FAE5 !important; color: #065F46 !important; }
.content-label-amber { background: #FEF3C7 !important; color: #92400E !important; }
.content-label-pink { background: #FCE7F3 !important; color: #9D174D !important; }
.content-label-teal { background: #CCFBF1 !important; color: #115E59 !important; }
.content-label-slate { background: #E2E8F0 !important; color: #1E293B !important; }

.content-h2 {
    font-family: var(--gpa-font) !important;
    font-size: var(--gpa-h2-size) !important;
    font-weight: var(--gpa-h2-weight) !important;
    line-height: var(--gpa-h2-line) !important;
    color: var(--gpa-text-heading) !important;
    margin-bottom: 16px !important;
}

/* ============================================
   2. PARAGRAPH TEXT
   ============================================ */
.content-text {
    font-family: var(--gpa-font) !important;
    font-size: var(--gpa-body-size) !important;
    color: var(--gpa-text-body) !important;
    line-height: var(--gpa-body-line) !important;
    font-weight: var(--gpa-body-weight) !important;
}

/* ============================================
   3. BULLET LIST
   ============================================ */
.content-bullets {
  list-style: disc outside;
  padding-left: 1.5rem;
  margin-bottom: 24px;
}
.content-bullets li {
  font-family: var(--gpa-font) !important;
  font-size: var(--gpa-body-size) !important;
  color: var(--gpa-text-body) !important;
  line-height: var(--gpa-body-line) !important;
  margin-bottom: 12px !important;
  display: list-item;
  padding-left: 0;
}
.content-bullets li::before {
  content: none;
}

/* ============================================
   4. NUMBERED LIST
   ============================================ */
.content-numbered {
  list-style: decimal outside;
  padding-left: 1.5rem;
  margin-bottom: 24px;
}
.content-numbered li {
  font-family: var(--gpa-font) !important;
  font-size: var(--gpa-body-size) !important;
  color: var(--gpa-text-body) !important;
  line-height: var(--gpa-body-line) !important;
  margin-bottom: 16px !important;
  display: list-item;
  padding-left: 0;
}
.content-numbered li::before {
  content: none;
}

/* ============================================
   5. TABLE
   ============================================ */
figure.wp-block-table.content-table {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 32px !important;
    overflow: hidden !important;
}
.content-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #fff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #E5E7EB !important;
}
.content-table thead {
    background: #2563EB !important;
}
.content-table thead th {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 16px 24px !important;
    text-align: center !important;
    border: none !important;
}
.content-table tbody td {
    font-size: 16px !important;
    padding: 16px 24px !important;
    text-align: center !important;
    color: #1F2937 !important;
    border-bottom: 1px solid #E5E7EB !important;
    border-left: none !important;
    border-right: none !important;
}
.content-table tbody tr:hover {
    background: #F9FAFB !important;
}
/* Gray header variant (for example calculations) */
.content-table-gray thead {
    background: #F3F4F6 !important;
}
.content-table-gray thead th {
    color: #1F2937 !important;
}

/* ============================================
   6. DEFINITION BLOCK
   ============================================ */
.content-card-definition {
    background: #EFF6FF !important;
    border-radius: 8px !important;
    padding: 24px !important;
    border-left: 4px solid #2563EB !important;
    margin-bottom: 32px !important;
}
.content-card-definition .content-card-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1E3A8A !important;
    margin-bottom: 8px !important;
}
.content-card-definition .content-card-body {
    font-size: 16px !important;
    color: #374151 !important;
    line-height: 1.7 !important;
}

/* ============================================
   7. IMPORTANT NOTE BLOCK
   ============================================ */
.content-card-note {
    background: #FFFBEB !important;
    border-radius: 12px !important;
    padding: 24px !important;
    border: 2px solid #FBBF24 !important;
    margin-bottom: 32px !important;
}
.content-card-note .content-card-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #78350F !important;
    margin-bottom: 8px !important;
}
.content-card-note .content-card-body {
    font-size: 16px !important;
    color: #92400E !important;
    line-height: 1.7 !important;
}

/* ============================================
   8. TIP BLOCK
   ============================================ */
.content-card-tip {
    background: #F0FDF4 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    border: 2px solid #4ADE80 !important;
    margin-bottom: 32px !important;
}
.content-card-tip .content-card-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #14532D !important;
    margin-bottom: 8px !important;
}
.content-card-tip .content-card-body {
    font-size: 16px !important;
    color: #166534 !important;
    line-height: 1.7 !important;
}

/* ============================================
   9. FORMULA BLOCK
   ============================================ */
.content-formula {
    background: #EFF6FF !important;
    border-radius: 12px !important;
    padding: 32px !important;
    border: 1px solid #BFDBFE !important;
    text-align: center !important;
    margin-bottom: 32px !important;
}
.content-formula p {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1D4ED8 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}
@media (min-width: 768px) {
    .content-formula p { font-size: 30px !important; }
}

/* ============================================
   10. EXAMPLE CALCULATION BLOCK
   ============================================ */
.content-result {
    background: linear-gradient(to right, #F0FDF4, #EFF6FF) !important;
    border-radius: 8px !important;
    padding: 24px !important;
    border: 2px solid #22C55E !important;
    text-align: center !important;
    margin-bottom: 32px !important;
}
.content-result p {
    font-size: 20px !important;
    color: #374151 !important;
    margin: 0 !important;
}
.content-result-big {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #15803D !important;
}
@media (min-width: 768px) {
    .content-result-big { font-size: 48px !important; }
}

/* ============================================
   11. IMAGE WITH CAPTION
   ============================================ */
.content-image {
    background: #F3F4F6 !important;
    border-radius: 8px !important;
    padding: 32px !important;
    border: 1px solid #D1D5DB !important;
    text-align: center !important;
    margin-bottom: 32px !important;
}
.content-image img {
    border-radius: 8px !important;
    max-width: 100% !important;
    height: auto !important;
    margin-bottom: 16px !important;
}
.content-image figcaption,
.content-caption {
    font-size: 16px !important;
    color: #4B5563 !important;
    font-style: italic !important;
}

/* ============================================
   12. FAQ ACCORDION
   (Rank Math FAQ block — same as calculator page)
   ============================================ */
.content-faq .rank-math-faq-item,
.content-faq .wp-block-rank-math-faq-block .rank-math-faq-item {
    background: #fff !important;
    border-radius: 8px !important;
    padding: 32px !important;
    border: 1px solid #E5E7EB !important;
    margin-bottom: 24px !important;
}
.content-faq .rank-math-question {
    font-family: var(--gpa-font) !important;
    font-size: var(--gpa-h4-size) !important;
    font-weight: var(--gpa-h4-weight) !important;
    color: var(--gpa-text-heading) !important;
    margin-bottom: 12px !important;
}
.content-faq .rank-math-answer,
.content-faq .rank-math-answer p {
    font-family: var(--gpa-font) !important;
    font-size: var(--gpa-body-size) !important;
    color: var(--gpa-text-muted) !important;
    line-height: 1.6 !important;
}

/* ============================================
   13. RELATED LINKS CARDS
   ============================================ */
.content-related-grid {
    gap: 24px !important;
    margin-bottom: 24px !important;
}
.content-rel-card {
    background: #fff !important;
    border-radius: 8px !important;
    padding: 32px !important;
    border: 1px solid #E5E7EB !important;
    transition: all 0.3s ease !important;
}
.content-rel-card:hover {
    border-color: #2563EB !important;
}
.content-rel-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
    font-size: 24px !important;
}
.content-rel-icon-blue { background: #2563EB !important; }
.content-rel-icon-green { background: #16A34A !important; }
.content-rel-icon-amber { background: #D97706 !important; }
.content-rel-icon-purple { background: #7C3AED !important; }

.content-rel-title {
    font-family: var(--gpa-font) !important;
    font-size: var(--gpa-h3-size) !important;
    font-weight: var(--gpa-h3-weight) !important;
    color: var(--gpa-text-heading) !important;
    margin-bottom: 12px !important;
}
.content-rel-desc {
    font-family: var(--gpa-font) !important;
    font-size: var(--gpa-body-lg-size) !important;
    color: var(--gpa-text-body) !important;
    margin-bottom: 16px !important;
}
.content-rel-cta a {
    font-family: var(--gpa-font) !important;
    font-size: var(--gpa-body-lg-size) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: transform 0.2s ease !important;
}
.content-rel-cta a:hover { transform: translateX(4px) !important; }
.content-rel-cta-blue a { color: #2563EB !important; }
.content-rel-cta-green a { color: #16A34A !important; }
.content-rel-cta-amber a { color: #D97706 !important; }
.content-rel-cta-purple a { color: #7C3AED !important; }

/* ============================================
   SECTION DIVIDERS
   (colored header bars from style guide)
   ============================================ */
.content-section-bar {
    padding: 24px 32px !important;
    border-radius: 12px !important;
    margin-bottom: 40px !important;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1) !important;
}
.content-section-bar h2 {
    font-family: var(--gpa-font) !important;
    font-size: var(--gpa-h1-size-m) !important;
    font-weight: var(--gpa-h1-weight) !important;
    color: #fff !important;
    line-height: var(--gpa-h1-line) !important;
    margin: 0 !important;
    -webkit-text-fill-color: #fff !important;
}
@media (min-width: 768px) {
    .content-section-bar h2 { font-size: var(--gpa-h1-size) !important; }
}
.content-bar-blue { background: linear-gradient(to right, #2563EB, #1D4ED8) !important; }
.content-bar-green { background: linear-gradient(to right, #16A34A, #15803D) !important; }
.content-bar-amber { background: linear-gradient(to right, #D97706, #B45309) !important; }
.content-bar-pink { background: linear-gradient(to right, #DB2777, #BE185D) !important; }
.content-bar-teal { background: linear-gradient(to right, #0D9488, #0F766E) !important; }
.content-bar-slate { background: linear-gradient(to right, #334155, #1E293B) !important; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .content-h2 { font-size: var(--gpa-h2-size-m) !important; }
    .content-label { font-size: 16px !important; padding: 8px 16px !important; }
    .content-card-definition,
    .content-card-note,
    .content-card-tip { padding: 20px !important; }
    .content-formula { padding: 24px !important; }
    .content-result { padding: 20px !important; }
    .content-table thead th { padding: 12px !important; font-size: 14px !important; }
    .content-table tbody td { padding: 12px !important; font-size: 14px !important; }
    .content-rel-card { padding: 24px !important; }
    .content-section-bar { padding: 20px 24px !important; }
    .content-section-bar h2 { font-size: var(--gpa-h1-size-m) !important; }
}


/* ---- Accessibility utilities ---- */
.screen-reader-text {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    word-wrap: normal !important;
}

/* ============================================
   HEADER / NAV - Match Bolt
   ============================================ */
.site-header {
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    border-bottom: 1px solid #E5E7EB !important;
}
.site-header .site-title,
.site-header .site-title a {
    font-family: "Lexend", "Lexend Fallback", system-ui, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #2563EB !important;
    text-decoration: none !important;
}
.main-navigation a,
.main-navigation .main-nav a {
    font-family: "Lexend", "Lexend Fallback", system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
	
    color: #4B5563 !important;
/*     padding: 10px 16px !important; */
    transition: color 0.2s !important;
}
.main-navigation a{
	color:#4b5563 !important;
}
/* ============================================
   FOOTER - Match Bolt (dark style)
   ============================================ */
.site-footer {
    background:#1f2937 !important;
    color: #D1D5DB !important;
    font-family: "Lexend", "Lexend Fallback", system-ui, sans-serif !important;
}
.site-footer .footer-widgets {
    background: #1f2937 !important;
    padding: 3rem 0 !important;
}
.site-footer .footer-widgets .widget {
    color: #D1D5DB !important;
}
.site-footer .footer-widgets .widget-title,
.site-footer .footer-widgets h2 {
    font-family: "Lexend", "Lexend Fallback", system-ui, sans-serif !important;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600 !important;
    color: #fff !important;
    margin-bottom: 16px !important;
}
.site-footer .footer-widgets a {
    color: #D1D5DB !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}
.site-footer .footer-widgets a:hover {
    color: #fff !important;
}
.site-footer .footer-widgets ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.site-footer .footer-widgets li {
    margin-bottom: 8px !important;
    line-height: 20px;
}

/* Footer Bar */
.site-footer .footer-bar,
.site-info {
    background: #1f2937 !important;
    border-top: 1px solid #374151 !important;
    padding: 24px 0 !important;
    text-align: center !important;
    color: #9CA3AF !important;
    font-size: 14px !important;
}
.site-info a {
    color: #9CA3AF !important;
    text-decoration: none !important;
}


.main-navigation a:hover,
.main-navigation .main-nav a:hover {
    color: #111827 !important;
/*     background: #F9FAFB !important; */
    border-radius: 8px !important;
}
.main-navigation .sub-menu {
    background: #fff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; 
    min-width: 260px !important;
}
.main-navigation .sub-menu a {
    font-size: 13px !important; line-height: 1.25rem !important;
    color: #374151 !important; 
}
 
.main-navigation .sub-menu a:hover {
    color: #111827 !important;
    background: #F9FAFB !important;
	
}

.home .main-navigation #menu-top-nav   .sub-menu  li  a{
	display:block !important;
		padding: 0.625rem !important;  
	
}
.menu-item-has-children .dropdown-menu-toggle{
	padding-right:0 !important;
}
#menu-top-nav{
	gap:25px;
}
.main-navigation .main-nav ul li.menu-item-has-children>a{
	padding-left:0 !important;
}

.main-navigation .main-nav ul li a{
	padding:0 !important;
}
 .main-navigation #menu-top-nav .sub-menu li a{
	display: block !important;
    padding: 0.625rem !important;
}
/* .fs-sticky-footer{
	display:none !important;
} */

/* NATIVE LIST SEMANTICS - content-bullets / content-numbered badges removed */
.gpa-embed select + .absolute.inset-y-0.left-3.flex.items-center.pointer-events-none.text-blue-600 {
  display: none !important;
} 
 

/* ============================================================
 * GPA_INTERACTIVE — hover and focus feedback
 * Every interactive element already resolved to cursor:pointer;
 * the problem was that hover states were invisible (nav hover
 * was rgba(0,0,0,.02) over a white header). These give a
 * visible hover, and a clear keyboard focus ring via
 * :focus-visible so GeneratePress's mouse-focus suppression
 * is left intact.
 * ============================================================ */

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li a:focus-visible {
	background-color: rgba(37, 99, 235, 0.10) !important;
	color: #1d4ed8 !important;
}

.entry-content a:not([class]):hover {
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

button:not(.menu-toggle):hover,
.wp-block-button__link:hover,
.gpa-cta a:hover {
	filter: brightness(0.94);
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid #2563eb !important;
	outline-offset: 2px !important;
}
 
/* 24-SEP-2026  */
.gpa-rail {
	position: absolute;
	display: none;
	flex-direction: column;
	z-index: 20;
	pointer-events: none;
}
body.gpa-rails-on .gpa-rail { display: flex; }
 
.gpa-rail__seg {
	flex: 1 1 0;
	min-height: 620px;
}
.gpa-rail__sticky {
	position: sticky;
	top: 90px;
	pointer-events: auto;
}
.gpa-rail [id^="gpacalculator-net_siderail"] {
	min-height: 600px;
}
 
/* Kargo spotlight is auto-sized by Freestar */
#gpacalculator-net_kargo_spotlight { min-height: 0 !important; }
 
/* Never on tablet / mobile */
@media (max-width: 1023px) {
	.gpa-rail { display: none !important; }
}

/* GPA_FULLBLEED — homepage hero and section bands span the full viewport */
body.home { overflow-x: clip; }
body.home .inside-article { background: transparent !important; }
body.home .entry-content > .wp-block-group {
	margin-left:  calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding-left:  calc(50vw - 50%) !important;
	padding-right: calc(50vw - 50%) !important;
}

@media (min-width: 1560px) {
  body.home .site-content { max-width: 900px !important; }
}

@media (min-width: 1440px) {
	body.page-template-template-calculator .entry-content,
	body.page-template-template-content .entry-content,
	body.gpa-template-content .entry-content,
	body.home .site-content,
	body.single-colleges .db-container,
	body.post-type-archive-colleges .db-container {
		width: min(100%, calc(100vw - 680px)) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}
 
/* College templates force width:100% on page elements, which was
   stretching the rails to full screen width. Keep rails their own size. */
html body div.gpa-rail {
	width: max-content !important;
	max-width: 336px !important;
}

/* 9/24/2026 */
:is(body.page-template-template-calculator, body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content) .entry-content {
	max-width: 900px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
 
/* Calculator, tables, media, charts: full 900px */
:is(body.page-template-template-calculator, body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content) .entry-content :is(#root, table, .wp-block-table, figure, .wp-block-image, iframe, canvas, svg):not(#root *) {
	max-width: 100%;
}
 
/* Article text: 800px, centred (ad slots are not text, so they keep 900px) */
:is(body.page-template-template-calculator, body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content) .entry-content :is(p, ul, ol, blockquote, h2, h3, h4, h5, h6):not(#root *) {
	max-width: 800px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
 
/* Homepage body typography */
:is(body.page-template-template-calculator, body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content) .entry-content :is(p, li):not(#root *) {
	font-size: 20px !important;
	line-height: 34px !important;
}
:is(body.page-template-template-calculator, body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content) .entry-content p:not(#root *) {
	margin-top: 0 !important;
	margin-bottom: 24px !important;
}
:is(body.page-template-template-calculator, body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content) .entry-content li:not(#root *) {
	margin-bottom: 10px !important;
}
:is(body.page-template-template-calculator, body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content) .entry-content h2:not(#root *) {
	margin-top: 64px !important;
	margin-bottom: 16px !important;
}
 
/* Section rhythm */
:is(body.page-template-template-calculator, body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content) .entry-content > :is(.rx-sec, .wp-block-group):not(:last-child) {
	margin-bottom: 80px !important;
}
 
/* Mobile */
@media (max-width: 767px) {
	:is(body.page-template-template-calculator, body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content) .entry-content :is(p, li):not(#root *) {
		font-size: 18px !important;
		line-height: 30px !important;
	}
	:is(body.page-template-template-calculator, body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content) .entry-content h2:not(#root *) {
		margin-top: 48px !important;
	}
	:is(body.page-template-template-calculator, body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content) .entry-content > :is(.rx-sec, .wp-block-group):not(:last-child) {
		margin-bottom: 56px !important;
	}
}
 
 /* Give rail slots their size before the ad loads */
.gpa-rail [id^="gpacalculator-net_siderail"] { min-width: 300px; }