/* Theme Name: Scholarship Alert Theme URI: http://localhost:8888/scholarship Author: Larry Frank Description: A scholarship and study-funding content platform. Includes scholarship posts (country/type/opportunity filters), AI-assisted bulk scholarship import, and standalone landing pages — built for Scholarship Alert. Version: 1.0 Requires at least: 6.4 Requires PHP: 7.4 Text Domain: scholarship-alert */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url('assets/fonts/inter-var.woff2') format('woff2'); } :root{ --white:#FFFFFF; --ink:#1A1A1A; --gray:#666666; --line:#E7E7E7; --red:#D3212C; --red-tint:#FBEAEA; --warm:#E8A33D; --warm-tint:#FBF0DE; --contrast:#152F44; --contrast-tint:#E8EDF1; } *{box-sizing:border-box;} body{margin:0; background:var(--white); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.6;} h1,h2,h3{font-family:'Inter',sans-serif; font-weight:700; margin:0; letter-spacing:-0.01em;} .wrap{max-width:1100px; margin:0 auto; padding:0 32px;} .narrow{max-width:700px; margin:0 auto; padding:0 32px;} a{color:inherit; text-decoration:none;} ul{margin:0; padding:0;} .divider{border:none; border-top:1px solid var(--line); margin:0;} /* header — shared across all templates */ header{border-bottom:1px solid var(--line); position:relative;} header .wrap{display:flex; align-items:center; justify-content:space-between; height:84px;} .logo{font-size:20px; font-weight:700;} .logo a{display:flex; align-items:center;} .sa-logo-img{display:block; max-height:40px; width:auto;} .logo span{color:var(--red);} nav{display:flex; gap:34px; list-style:none; margin:0; padding:0;} nav a{font-size:14.5px; font-weight:500; color:var(--ink);} nav a:hover, nav a.active{color:var(--red);} /* Dropdowns — a parent item (e.g. "JAMB & Exams") shows its children in a floating panel on hover. */ nav .menu-item{position:relative; list-style:none;} nav .menu-item.has-children > a{display:inline-flex; align-items:center; gap:5px;} nav .menu-item.has-children > a::after{content:"▾"; font-size:9px; display:inline-block; color:var(--gray); transition:transform 0.15s ease, color 0.15s ease;} nav .menu-item.has-children:hover > a::after{color:var(--red); transform:translateY(1px) rotate(180deg);} nav .sub-menu{ /* top:100% with zero margin — no gap between the link and the dropdown box means no dead zone for the mouse to lose :hover crossing on the way down to a child item. The box's border/shadow start right at the link's edge; padding-top just pushes the actual items down a touch inside the (still fully hoverable) box. */ display:none; position:absolute; top:100%; left:-16px; margin-top:0; padding:12px 8px 8px; min-width:220px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 14px 30px rgba(21,47,68,0.12); z-index:60; list-style:none; } nav .menu-item.has-children:hover > .sub-menu, nav .menu-item:hover > .sub-menu{display:block;} nav .sub-menu li{list-style:none;} nav .sub-menu a{display:block; padding:9px 12px; border-radius:5px; font-size:13.5px; white-space:nowrap;} nav .sub-menu a:hover{background:var(--red-tint); color:var(--red);} /* hamburger toggle — hidden on desktop, shown at the mobile breakpoint below */ .menu-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; padding:0; background:none; border:none; cursor:pointer;} .menu-toggle span{display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform 0.2s ease, opacity 0.2s ease;} .menu-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);} .menu-toggle.is-active span:nth-child(2){opacity:0;} .menu-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .btn{display:inline-block; padding:10px 20px; border-radius:4px; font-size:14px; font-weight:600; border:none; cursor:pointer;} .btn-red{background:var(--red); color:#fff;} .btn-outline{border:1px solid var(--ink); color:var(--ink); background:none;} /* Nav search — an icon toggle beside the header's CTA button that drops down a search form, closing on outside click, Escape, or submitting. */ .nav-actions{display:flex; align-items:center; gap:10px;} .nav-search-toggle{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none; border-radius:50%; border:1px solid var(--line); background:none; color:var(--ink); cursor:pointer; transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .nav-search-toggle:hover, .nav-search-toggle[aria-expanded="true"]{ background:var(--red-tint); color:var(--red); border-color:var(--red-tint); } .nav-search-form{ position:absolute; top:100%; right:32px; margin-top:0; display:flex; gap:8px; width:360px; max-width:calc(100vw - 64px); background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; box-shadow:0 14px 30px rgba(21,47,68,0.12); z-index:60; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; } .nav-search-form.is-open{opacity:1; visibility:visible; transform:translateY(0);} .nav-search-form input{flex:1; min-width:0; border:1px solid var(--line); border-radius:8px; padding:10px 14px; font-size:14px; font-family:inherit; color:var(--ink); background:#FAFAFA;} .nav-search-form input:focus{outline:none; border-color:var(--red); background:#fff;} .nav-search-form button{ flex:none; display:flex; align-items:center; justify-content:center; width:40px; border:none; border-radius:8px; background:var(--red); color:#fff; cursor:pointer; } /* eyebrow / page title band — shared by hero + inner page headers */ .eyebrow{font-size:13px; font-weight:600; color:var(--red); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:16px;} .page-title{padding:64px 0 40px; text-align:center;} .page-title h1{font-size:38px;} .page-title p{font-size:16px; color:var(--gray); max-width:520px; margin:16px auto 0;} /* section rhythm */ section{padding:90px 0;} /* Homepage sections run noticeably tighter than the 90px site-wide default — scoped to the front page only, and explicitly excludes .home-hero, which keeps its own smaller top-only padding above. */ body.home section:not(.home-hero){padding:40px 0;} .section-head{text-align:center; max-width:560px; margin:0 auto 50px;} .section-head h2{font-size:30px;} .section-head p{color:var(--gray); font-size:15px; margin-top:12px;} /* badges — shared by job board + single job */ .badge{font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:20px; background:var(--red-tint); color:var(--red); display:inline-block;} .badge.outline{background:none; border:1px solid var(--line); color:var(--gray);} /* job row — shared by job board list + similar jobs */ .job-row{ display:flex; align-items:center; gap:20px; border:1px solid var(--line); border-radius:6px; padding:24px 26px; margin-bottom:14px; } .job-row:hover{border-color:var(--red);} .job-main{flex:1; min-width:0;} .job-top{display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap;} .job-title, .job-row-title{font-size:17px; font-weight:600;} .job-meta{font-size:14px; color:var(--gray);} .job-meta span{margin-right:14px;} .job-side{text-align:right; flex:none;} .job-salary{font-size:14.5px; font-weight:600;} .job-posted{font-size:12.5px; color:var(--gray); margin-top:4px;} /* post card — shared by homepage blog teaser, blog archive, related posts */ .post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-bottom:30px;} .post-card{border:1px solid var(--line); border-radius:6px; padding:26px; display:flex; flex-direction:column;} .post-card:hover{border-color:var(--red);} .post-tag, .post-card-tag{font-size:11.5px; font-weight:600; color:var(--red); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:12px;} .post-card h3{font-size:17px; line-height:1.4; margin-bottom:10px;} .post-card p{font-size:14px; color:var(--gray); margin:0 0 16px; flex:1;} .post-meta, .post-card-meta{font-size:12.5px; color:var(--gray); border-top:1px solid var(--line); padding-top:14px;} /* scholarship card — homepage listing only: country/type split left-right instead of one category tag, deadline instead of date+reading-time */ .sa-scholarship-card{border-color:var(--red);} .sa-card-thumb{margin:-26px -26px 16px; border-radius:6px 6px 0 0; overflow:hidden;} .sa-card-thumb img{display:block; width:100%; height:220px; object-fit:cover;} .sa-card-terms{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;} .sa-card-terms .post-card-tag{margin-bottom:0;} .sa-card-term-right{text-align:right;} .sa-card-deadline-row{display:flex; justify-content:space-between; align-items:center; gap:10px;} .sa-card-deadline{color:var(--red); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;} .sa-card-meta-row{display:flex; align-items:center; justify-content:space-between; gap:10px;} .sa-card-meta-row .sa-card-date{color:var(--gray); font-weight:600;} .sa-card-funding-type{font-size:11.5px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:0.04em; white-space:nowrap;} /* Minimal related/similar cards — title only, no thumbnail/tag/meta row, 4 per row on desktop so they read as quick links rather than full previews. */ .sa-mini-grid{grid-template-columns:repeat(4,1fr); gap:18px;} .sa-mini-card{ display:block; border:1px solid var(--line); border-radius:8px; padding:18px 20px; transition:border-color 0.15s ease, box-shadow 0.15s ease; } .sa-mini-card:hover{border-color:var(--red); box-shadow:0 4px 14px rgba(0,0,0,0.05);} .sa-mini-card h3{font-size:14.5px; line-height:1.45; font-weight:600; color:var(--ink); margin:0;} .sa-mini-card:hover h3{color:var(--red);} /* Previous/Next article nav — shown once per single post, right before the Similar/Related section. */ .sa-prevnext{border-top:1px solid var(--line); padding:30px 0;} .sa-prevnext-row{display:grid; grid-template-columns:1fr 1fr; gap:0 32px;} .sa-prevnext-link{position:relative; display:block; text-decoration:none;} .sa-prevnext-prev{padding-right:32px; border-right:1px solid var(--line);} .sa-prevnext-next{padding-left:0; text-align:right;} .sa-prevnext-label{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--red); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:10px; } .sa-prevnext-title{display:block; font-size:18px; font-weight:700; line-height:1.4; color:var(--ink);} .sa-prevnext-link:hover .sa-prevnext-title{color:var(--red);} /* pagination — shared by job board + blog archive */ .pagination{display:flex; justify-content:center; gap:8px; padding-bottom:90px; flex-wrap:wrap;} .page-btn{width:36px; height:36px; border:1px solid var(--line); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--ink);} .page-btn.active{background:var(--red); border-color:var(--red); color:#fff;} .page-btn.wide{width:auto; padding:0 16px;} /* share icons — shared by single job + single post */ .share-row{display:flex; gap:10px; margin-top:14px;} .share-icon{width:36px; height:36px; border:1px solid var(--line); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--gray);} .share-icon:hover{border-color:var(--red); color:var(--red);} /* newsletter — shared by homepage + single post */ .newsletter{background:var(--red-tint); text-align:center;} .newsletter h2{font-size:26px; margin-bottom:10px;} .newsletter p{color:var(--gray); font-size:14.5px; margin-bottom:26px;} /* Homepage-only variant — the navy contrast color, kept off the shared .newsletter used on single posts/category archives so it doesn't bleed into pages this redesign isn't meant to touch. */ .newsletter.newsletter-dark{background:var(--contrast); color:#fff;} .newsletter.newsletter-dark p{color:rgba(255,255,255,0.72);} .newsletter.newsletter-dark .news-form input{border:none;} .newsletter.newsletter-dark .news-form button{background:var(--warm); color:var(--ink);} .news-form{display:flex; justify-content:center; gap:10px;} .news-form input{width:280px; padding:12px 16px; border-radius:4px; border:1px solid var(--line); font-size:14px;} .news-form button{background:var(--red); color:#fff; border:none; padding:12px 22px; border-radius:4px; font-weight:600; font-size:14px; cursor:pointer;} /* footer — shared across all templates */ footer{padding:0;} /* 4-column footer — About / Scholarships by Country / Tools / Hot Topics, dark background by default (admin-editable). Text colors use fixed semi-transparent whites rather than the --ink/--gray variables, since those are tuned for a light background and would be close to invisible here. Columns the admin has toggled off / left empty simply don't render (see footer.php), so the grid never shows an awkward empty gap. */ .sa-footer{padding:64px 0 0; color:rgba(255,255,255,0.78); font-size:14px;} .sa-footer-cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px;} .sa-footer-col h4{font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#fff; margin:0 0 20px;} .sa-footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px;} .sa-footer-col ul a{font-size:14px; color:rgba(255,255,255,0.72); text-decoration:none; transition:color 0.15s ease, padding-left 0.15s ease;} .sa-footer-col ul a:hover{color:#fff; padding-left:3px;} .sa-footer-logo{margin-bottom:16px;} .sa-footer-logo, .sa-footer-logo a{font-size:20px; font-weight:800; color:#fff; letter-spacing:-0.01em;} .sa-footer-logo .sa-logo-img{display:block; max-height:38px; width:auto;} .sa-footer-about-text{font-size:14px; line-height:1.7; color:rgba(255,255,255,0.65); margin:0 0 22px; max-width:320px;} .sa-footer-social{display:flex; flex-wrap:wrap; gap:10px;} .sa-footer-social a{ font-size:12.5px; font-weight:600; color:rgba(255,255,255,0.85); text-decoration:none; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,0.08); transition:background 0.15s ease, color 0.15s ease; } .sa-footer-social a:hover{background:#fff; color:var(--contrast);} /* Bottom bar — copyright + the (optional) App/Mobile menu sit together on the left, the right-side note stays on the right, all on one line. */ .foot-bottom{ border-top:1px solid rgba(255,255,255,0.12); padding:20px 0 24px; display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:rgba(255,255,255,0.5); flex-wrap:wrap; gap:10px 24px; } .foot-bottom-left{display:flex; align-items:center; flex-wrap:wrap; gap:10px 20px;} .sa-footer-menu{list-style:none; margin:0; display:flex; flex-wrap:wrap; gap:8px 18px;} .sa-footer-menu li{list-style:none;} .sa-footer-menu a{font-size:12.5px; font-weight:600; color:rgba(255,255,255,0.65); text-decoration:none; transition:color 0.15s ease;} .sa-footer-menu a:hover{color:#fff;} /* ============ homepage (editorial layout) ============ */ /* Hero — asymmetric two-column: headline+search+topic cloud on the left, the ad/email widget on the right. A soft radial wash (not a flat block) keeps the "little bit of color" request from turning into a loud banner. */ .home-hero{ padding:44px 0 0; background: radial-gradient(640px 320px at 8% 0%, var(--red-tint) 0%, transparent 70%), radial-gradient(520px 280px at 100% 10%, var(--warm-tint) 0%, transparent 65%); } .hero-split{display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:start; padding-bottom:40px;} .hero-kicker{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--contrast); margin-bottom:14px;} .hero-kicker .dot{width:7px; height:7px; border-radius:50%; background:var(--warm); display:inline-block; box-shadow:0 0 0 4px var(--warm-tint);} .home-hero h1{font-size:34px; line-height:1.22; max-width:480px; margin:0 0 20px; position:relative; display:inline-block;} .home-hero h1::after{content:""; display:block; width:52px; height:4px; border-radius:4px; margin-top:16px; background:linear-gradient(90deg,var(--red),var(--warm));} .hero-search{display:flex; gap:0; max-width:440px; margin:0 0 20px; border-radius:999px; background:#fff; padding:5px; box-shadow:0 2px 14px rgba(21,47,68,0.08); border:1px solid var(--line);} .hero-search input{flex:1; border:none; background:none; border-radius:999px; padding:10px 18px; font-size:14.5px; font-family:'Inter',sans-serif; color:var(--ink);} .hero-search input:focus{outline:none;} .hero-search .btn{flex:none; border-radius:999px;} /* Topic Cloud + ad/email widget, side by side */ .topic-cloud{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px;} .cloud-chip{display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:9px 18px; font-weight:600; border:1px solid transparent; transition:transform 0.15s ease, box-shadow 0.15s ease;} .cloud-chip::before{content:""; width:6px; height:6px; border-radius:50%; flex:none;} .cloud-chip--0{font-size:15px; background:var(--red-tint); color:var(--red);} .cloud-chip--0::before{background:var(--red);} .cloud-chip--1{font-size:13px; background:var(--warm-tint); color:#9C6512;} .cloud-chip--1::before{background:var(--warm);} .cloud-chip--2{font-size:14px; background:var(--contrast); color:#fff;} .cloud-chip--2::before{background:#fff;} .cloud-chip:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(21,47,68,0.14);} .cloud-widget{border:1px solid var(--line); border-top:3px solid var(--warm); border-radius:10px; padding:4px; overflow:hidden; background:#fff;} /* Default content for the Ad/Email widget slot (sa_home_cloud_html) when that field is empty — a compact set of links to the site's free tools, each with its own accent color via --tile-color (same pattern as .topic-strip). Replaced entirely the moment an admin pastes real ad or email-capture HTML into that field. */ .home-tools{padding:18px 16px;} .home-tools-head{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gray); margin-bottom:12px;} .home-tools-list{display:flex; flex-direction:column; gap:10px;} .home-tools-card{ --tile-color: var(--red); --tile-tint: var(--red-tint); display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid transparent; border-left:4px solid var(--tile-color); border-radius:10px; background:var(--tile-tint); transition:transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .home-tools-card:hover{box-shadow:0 10px 22px rgba(21,47,68,0.12); transform:translateY(-2px); filter:brightness(0.98);} .home-tools-ic{ width:36px; height:36px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--tile-color); color:#fff; font-size:14px; } .home-tools-text{flex:1; min-width:0;} .home-tools-text strong{display:block; font-size:13.5px; color:var(--ink);} .home-tools-text span{display:block; font-size:11.5px; color:var(--gray); margin-top:1px;} .home-tools-arrow{flex:none; color:var(--tile-color); font-size:13px; opacity:0.6;} .home-tools-card:hover .home-tools-arrow{opacity:1;} /* Browse by Topic — a compact icon strip; each tile's accent color rides along on a CSS variable set per-tile in the markup (--tile-color), driving both the icon circle and a hover top-border in the same color. */ .topic-strip{display:flex; flex-wrap:wrap; gap:14px;} .topic-strip a{ --tile-color: var(--red); flex:1 1 calc(33.33% - 14px); min-width:200px; display:flex; align-items:center; gap:14px; padding:20px; border:1px solid var(--line); border-top:3px solid transparent; border-radius:10px; background:#fff; transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .topic-strip a:hover{border-color:var(--line); border-top-color:var(--tile-color); box-shadow:0 10px 24px rgba(21,47,68,0.1); transform:translateY(-3px);} .topic-strip .ic{width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; background:var(--tile-color);} .topic-strip .ic svg{width:18px; height:18px;} .topic-strip h3{font-size:15px; margin-bottom:3px;} .topic-strip p{font-size:12.5px; color:var(--gray); margin:0;} /* Latest Scholarships / Editorial Pick — compact "board" lists, each with its own colored left rail so the two sitting side by side read as related but distinct. */ .board{border-top:1px solid var(--line); border-left:3px solid var(--line); border-radius:0 6px 6px 0; overflow:hidden;} .board--pick{border-left-color:var(--contrast);} .board--apply{border-left-color:var(--warm);} .board-row{display:flex; align-items:center; gap:16px; padding:15px 16px; border-bottom:1px solid var(--line);} .board-row:hover{background:var(--contrast-tint);} .board--apply .board-row:hover{background:var(--warm-tint);} .board-title{flex:1; font-size:14.5px; font-weight:600; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .board-row:hover .board-title{color:var(--red);} .board-meta{flex:none; font-size:12.5px; color:var(--gray);} .board-badge{flex:none; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:#fff; border-radius:999px; padding:6px 14px;} .board-badge--apply{background:var(--warm);} .board-badge--pick{background:var(--contrast);} /* Latest Posts / Popular Guides — a dense index list, two columns side by side */ .two-col{display:grid; grid-template-columns:1fr 1fr; gap:48px;} /* Latest Posts / Popular Guides — short date beside the title, no topic tag. A thin colored accent bar slides in from the left on hover, with the whole card lifting slightly. */ .index-list{display:flex; flex-direction:column; gap:12px;} .index-row{ position:relative; display:flex; align-items:center; padding:16px 20px 16px 24px; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:transform 0.18s ease, box-shadow 0.18s ease; } .index-row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--red); transform:scaleY(0); transform-origin:bottom; transition:transform 0.2s ease; } .index-row:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,0.07);} .index-row:hover::before{transform:scaleY(1);} .index-row .idx-date{ flex:none; width:44px; font-size:12.5px; color:var(--gray); padding-right:16px; margin-right:16px; border-right:1px solid var(--line); align-self:stretch; display:flex; align-items:center; } .index-row h4{flex:1; min-width:0; font-size:15px; font-weight:500; margin:0; line-height:1.4; color:var(--contrast);} .index-row:hover h4{color:var(--red);} .guide-card ul li a{font-size:13.5px; color:var(--ink); font-weight:600;} .guide-card ul li a:hover{color:var(--red);} .view-all{font-size:13.5px; font-weight:600; color:var(--red); display:inline-flex; align-items:center; gap:5px;} .view-all:hover{gap:8px;} .paths-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;} .path-card{border:1px solid var(--line); border-radius:6px; padding:40px;} .path-card h3{font-size:22px; margin-bottom:10px;} .path-card .sub{color:var(--gray); font-size:14.5px; margin-bottom:26px;} .path-card ul li{list-style:none; padding:14px 0; border-top:1px solid var(--line); font-size:14.5px;} .path-card ul li:first-child{border-top:none;} .path-card a.more{display:inline-block; margin-top:22px; font-size:14px; font-weight:600; color:var(--red);} .provinces{background:#FAFAFA;} .prov-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;} .prov{border:1px solid var(--line); border-radius:6px; padding:18px; text-align:center; font-size:14.5px; font-weight:600; background:#fff; display:block;} .prov:hover{border-color:var(--red); color:var(--red);} /* ============ job board (archive-job) ============ */ .filter-bar{padding:28px 0; background:var(--red-tint);} .filter-row{display:flex; gap:12px; margin-bottom:12px;} .filter-row input, .filter-row select{ border:1px solid var(--line); border-radius:4px; padding:12px 14px; font-size:14px; font-family:'Inter',sans-serif; color:var(--ink); background:#fff; } .filter-row input{flex:1.6;} .filter-row select{flex:1;} .filter-row .btn{flex:none;} .more-filters{border-top:1px solid var(--line); padding-top:14px;} .more-filters summary{ list-style:none; cursor:pointer; font-size:14px; font-weight:600; color:var(--red); display:flex; align-items:center; gap:6px; width:fit-content; } .more-filters summary::-webkit-details-marker{display:none;} .more-filters summary .chev{transition:transform 0.15s ease; font-size:12px;} .more-filters[open] summary .chev{transform:rotate(180deg);} .more-row{display:flex; gap:12px; margin-top:16px;} .more-row select, .more-row input{ border:1px solid var(--line); border-radius:4px; padding:12px 14px; font-size:14px; font-family:'Inter',sans-serif; color:var(--ink); background:#fff; flex:1; } .results-head{padding:0 0 24px; display:flex; justify-content:space-between; align-items:center;} .results-count{font-size:14.5px; color:var(--gray);} .results-count strong{color:var(--ink);} .sort-row{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--gray);} .sort-row select{border:1px solid var(--line); border-radius:4px; padding:8px 12px; font-size:14px; font-family:'Inter',sans-serif; color:var(--ink);} .job-list{padding-bottom:70px;} /* ============ single job ============ */ .job-header{padding:30px 0;} .job-head-top{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap;} .job-title-block h1{font-size:32px; margin-bottom:10px;} .company-line{font-size:15.5px; color:var(--gray);} .company-line strong{color:var(--ink); font-weight:600;} .badge-row{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap;} .apply-cta{text-align:right; flex:none;} .apply-cta .btn{width:180px; text-align:center;} .sa-single-meta-strip{display:flex; align-items:center; gap:20px; flex-wrap:wrap; background:var(--red-tint); color:var(--red); font-size:13.5px; font-weight:600; padding:10px 16px; border-radius:6px; margin-top:16px;} .sa-single-meta-strip span{display:inline-flex; align-items:center; gap:7px;} .sa-single-meta-strip strong{font-weight:700;} /* Breadcrumbs — Home → section → most specific term → current title, shown under the

on every single post. The post-header context centers its title, so the trail centers with it there; the scholarship job-header stays left-aligned to match that header's own layout. */ .sa-breadcrumbs{margin-top:10px;} .sa-breadcrumbs ol{list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; padding:0; font-size:13px; font-weight:400;} .sa-breadcrumbs li{display:flex; align-items:center; gap:6px; list-style:none;} .sa-breadcrumbs li:not(:first-child)::before{content:"/"; color:var(--line); font-size:12px;} .sa-breadcrumbs a{color:var(--gray); font-weight:400; text-decoration:none; transition:color 0.15s ease;} .sa-breadcrumbs a:hover{color:var(--red);} /* Non-scholarship single posts (.post-header) center their title, so the trail centers with it; the scholarship job-header stays left-aligned to match that header's own layout. */ .post-header .sa-breadcrumbs ol{justify-content:center;} /* minmax(0, ...) instead of a bare fr is required here: grid items default to min-width:auto, meaning a track refuses to shrink below its content's intrinsic min-width even when the fr proportion says it should — a long unbreakable string anywhere inside .scholarship-body (a raw URL, a long provider name, etc.) can otherwise force the whole grid wider than its container and drag the sidebar out of alignment with it. */ .content-layout{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:56px; padding-bottom:30px;} /* Desktop-only apply button under the post content — on mobile the sidebar's own Apply button already lands directly below the content once .content-layout stacks to one column, so this would just duplicate it there. */ .sa-post-apply-cta{margin-top:30px;} .sa-post-apply-cta .btn{padding:14px 34px;} .scholarship-body{overflow-wrap:break-word;} .scholarship-body h2{font-size:19px; margin:30px 0 14px;} .scholarship-body h2:first-child{margin-top:0;} .scholarship-body h3{font-size:16.5px; margin:22px 0 10px;} .scholarship-body p{font-size:15px; color:var(--ink); margin:0 0 14px;} .scholarship-body ul{margin:0 0 14px;} .scholarship-body ul li{list-style:none; font-size:15px; padding:8px 0 8px 20px; position:relative; color:var(--ink);} .scholarship-body ul li::before{content:"•"; position:absolute; left:4px; color:var(--red);} .scholarship-body p a, .scholarship-body li a{color:var(--red); text-decoration:underline;} .scholarship-body p a:hover, .scholarship-body li a:hover{text-decoration:none;} .side-card{border:1px solid var(--line); border-radius:6px; padding:26px; margin-bottom:20px;} .side-card h3{font-size:14px; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:16px;} .overview-row{display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--line); font-size:14px;} .overview-row:first-of-type{border-top:none;} .overview-row .label{color:var(--gray);} .overview-row .value{font-weight:600; text-align:right;} .side-card .btn{width:100%; text-align:center; margin-top:6px;} .similar{padding:30px 0;} /* ============ 404 page ============ */ .sa-404-nav{display:flex; justify-content:center; gap:14px; padding:36px 0; flex-wrap:wrap;} @media (max-width:480px){ .sa-404-nav{flex-direction:column; align-items:stretch; padding:26px 0;} .sa-404-nav .btn{text-align:center;} } /* ============ blog archive ============ */ .blog-grid{padding-bottom:70px;} /* ============ single post ============ */ .post-header{padding:30px 0; text-align:center;} .post-header h1{font-size:36px; line-height:1.2;} .post-meta{font-size:14px; color:var(--gray); margin-top:18px;} .post-meta span{margin:0 8px;} .article{padding:30px 0 20px;} .article p{font-size:16.5px; color:var(--ink); margin:0 0 20px;} .article p a, .article li a{color:var(--red); text-decoration:underline;} .article p a:hover, .article li a:hover{text-decoration:none;} .article h2{font-size:22px; margin:30px 0 16px;} .article h3{font-size:18px; margin:24px 0 12px;} .article ul li{list-style:none; font-size:16.5px; padding:8px 0 8px 20px; position:relative; margin-bottom:4px;} .article ul li::before{content:"•"; position:absolute; left:4px; color:var(--red);} .pull-quote, .article blockquote{border-left:3px solid var(--red); padding:6px 0 6px 24px; margin:30px 0; font-size:19px; font-weight:600; color:var(--ink);} /* Expired-job notice — top of .scholarship-body, before the description */ .sa-scholarship-expired-notice{ margin:0 0 24px; padding:18px 22px; border:1px solid #f3d38a; border-radius:8px; background:#FFF8EA; } .sa-scholarship-expired-notice p{margin:0 0 8px; font-size:15px; font-weight:600; color:#7A5B12;} .sa-scholarship-expired-notice p:last-child{margin-bottom:0;} .sa-scholarship-expired-notice a{color:var(--red); font-weight:600;} /* Mid-content related-jobs / related-posts widget — inserted inside .scholarship-body or .article */ .sa-related-widget{margin:30px 0; padding:22px 24px; border:1px solid var(--line); border-radius:8px; background:#FAFAFA;} .sa-related-widget-title{font-size:15px; font-weight:700; margin:0 0 14px;} .sa-related-list{display:flex; flex-direction:column; gap:10px;} .sa-related-row{ display:flex; align-items:center; gap:16px; background:#fff; border-radius:6px; border-top:0; border-bottom:0; border-left:0; border-right:1px solid var(--line); padding:14px 18px; } .sa-related-row:hover{border-right-color:var(--red);} .sa-related-row-thumb{width:80px; height:54.2px; flex:none; border-radius:4px; overflow:hidden;} .sa-related-row-thumb img{display:block; width:100%; height:100%; object-fit:cover;} .sa-related-row-title{flex:1; min-width:0; font-size:15px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .sa-related-row-btn{font-size:14px; font-weight:600; color:var(--red); flex:none; white-space:nowrap;} /* Post widget: no button — just the title, free to wrap across as many lines as it needs. */ .sa-related-row-title-only .sa-related-row-title{ white-space:normal; overflow:visible; text-overflow:clip; -webkit-line-clamp:unset; -webkit-box-orient:unset; } /* Related Posts widget on blog posts (scoped via .article): keeps the same card frame + border as everywhere else, just with red title text. */ .article .sa-related-row-title{color:var(--red);} @media (max-width:480px){ .sa-related-widget{padding:18px;} /* Stays a side-by-side row (not stacked) — the title just wraps onto up to 2 lines instead of truncating, with the button centered beside it. */ .sa-related-row{gap:12px;} .sa-related-row-title{ white-space:normal; text-overflow:clip; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } } /* "Similar Posts" box — manually built per-post via the SMLA Post Manual Plugin's [smla_post_start]/[smla_post_end] shortcodes (and the matching _h_start/_h_end pair for a plain header with no "Similar Posts" label), wrapping a hand-picked list of links. Same card family as .sa-related-widget above, just themed for a shortcode-authored block instead of an auto-generated one. */ .smla-posts{margin:30px 0; padding:22px 24px; border:1px solid var(--line); border-radius:8px; background:#FAFAFA;} .smla-posts > p{font-size:15px; font-weight:700; margin:0 0 14px; color:var(--ink);} .smla-posts > hr{border:none; border-top:1px solid var(--line); margin:0 0 14px;} .smla-posts ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;} .smla-posts li{ background:#fff; border-radius:4px 6px 6px 4px; border-left:3px solid var(--red); padding:14px 18px; font-size:15px; font-weight:600; } .smla-posts li a{color:var(--ink); text-decoration:none;} .smla-posts li a:hover{color:var(--red);} @media (max-width:480px){ .smla-posts{padding:18px;} } .article-footer{padding:20px 0 30px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;} .tags-row{display:flex; gap:8px; flex-wrap:wrap;} .tags-row span{font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:20px; border:1px solid var(--line); color:var(--gray);} .related{padding:30px 0;} /* single post + single job share a 30px cap on their section-head bottom margin and the newsletter section's padding (scoped to body.single so the homepage's own section-head/newsletter spacing is untouched) */ body.single .section-head{margin:0 auto 30px;} body.single .newsletter{padding:30px 0;} /* ============ responsive ============ */ @media (max-width:900px){ .post-grid{grid-template-columns:repeat(2,1fr);} .sa-mini-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width:560px){ .sa-prevnext-row{grid-template-columns:1fr; gap:24px;} .sa-prevnext-prev{padding-right:0; border-right:none; border-bottom:1px solid var(--line); padding-bottom:24px;} .sa-prevnext-next{text-align:left;} .sa-mini-grid{grid-template-columns:1fr;} } @media (max-width:880px){ .sa-footer-cols{grid-template-columns:1fr 1fr; gap:32px 24px;} .sa-footer-col--about{grid-column:1 / -1;} .menu-toggle{display:flex;} nav{ display:none; flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0; background:var(--white); border-bottom:1px solid var(--line); padding:8px 32px; z-index:50; } nav.is-open{display:flex;} nav a{padding:14px 0; border-top:1px solid var(--line);} nav .menu-item:first-child > a{border-top:none;} /* No hover on touch — children just stack, indented, under their parent instead of floating. */ nav .sub-menu{display:block; position:static; margin:0 0 4px; padding:0 0 0 16px; border:none; box-shadow:none;} nav .sub-menu a{padding:10px 0; border-top:1px solid var(--line); font-size:13.5px;} nav .menu-item.has-children > a::after{display:none;} .paths-grid{grid-template-columns:1fr;} .prov-grid{grid-template-columns:repeat(2,1fr);} .home-hero h1{font-size:28px; max-width:none;} .hero-search{flex-direction:column; gap:8px; border-radius:16px; padding:8px; max-width:100%;} .hero-search input{border-radius:10px; background:#FAFAFA; padding:12px 16px;} .hero-search .btn{width:100%; padding:12px; text-align:center;} .hero-split{grid-template-columns:1fr; gap:24px;} .topic-strip a{flex:1 1 calc(50% - 14px);} .two-col{grid-template-columns:1fr; gap:36px;} .board-row{flex-wrap:wrap;} .board-meta{order:3;} .news-form{flex-direction:column; align-items:center;} .news-form input, .news-form button{width:100%; max-width:280px;} .page-title{padding:44px 0 32px;} .page-title h1{font-size:30px;} .filter-bar{padding:20px 0;} .filter-row{flex-wrap:wrap;} .filter-row input, .filter-row select, .filter-row .btn{flex:1 1 100%;} .more-row{flex-wrap:wrap;} .more-row select, .more-row input{flex:1 1 100%;} .results-head{flex-direction:column; align-items:flex-start; gap:10px;} .job-row{flex-wrap:wrap; padding:20px;} .job-main{flex:1 1 100%;} .job-side{text-align:left; flex:1 1 100%; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); display:flex; justify-content:space-between; align-items:center;} .job-top{gap:8px;} .content-layout{grid-template-columns:1fr; gap:8px;} .job-title-block h1{font-size:26px;} .apply-cta{width:100%; text-align:left;} .apply-cta .btn{width:100%;} .apply-cta.sa-hide-mobile{display:none;} .sa-post-apply-cta{display:none;} .post-header h1{font-size:27px;} } @media (max-width:600px){ .page-title h1{font-size:28px;} .post-grid{grid-template-columns:1fr; gap:18px;} .topic-strip a{flex:1 1 100%;} .pagination{flex-wrap:wrap;} .article p, .article ul li, .pull-quote{font-size:15.5px;} .article-footer{flex-direction:column; align-items:flex-start;} .post-header h1{font-size:23px;} } @media (max-width:480px){ .wrap, .narrow{padding:0 16px;} header .wrap{height:64px; gap:10px;} .logo{font-size:15px;} .logo a{white-space:nowrap;} .menu-toggle{width:26px; height:26px; gap:4px; flex:none;} header .btn{padding:8px 14px; font-size:13px; flex:none;} .nav-search-toggle{width:32px; height:32px;} .nav-search-form{right:16px; width:calc(100vw - 32px);} .page-title h1{font-size:24px;} .page-title p{font-size:14.5px;} .job-title-block h1{font-size:22px;} .job-title{font-size:15.5px;} .job-meta span{margin-right:10px; display:inline-block;} .sa-footer-cols{grid-template-columns:1fr; gap:28px;} .sa-footer-col--about{grid-column:auto;} .sa-footer-about-text{max-width:none;} .foot-bottom{flex-direction:column; text-align:center;} } /* Comments — threaded replies nest as a