/* ==========================================================================
   pages.css — styling for the Richmond Tutoring inner pages
   (subject landing pages + results page).

   Uses the SAME palette + typography as the existing Divi homepage:
     #0946a0  primary blue   (FAQ section bg, header button)
     #f67d12  accent orange
     #7EBEC5  soft teal accent
     #f4f4f5  light section bg
     #000000  footer bar
     'IBM Plex Sans' headings (already loaded by the shared header)

   Everything is scoped under .rt-page so the Divi homepage is untouched.
   ========================================================================== */

.rt-page{
  --rt-blue:#0946a0;
  --rt-blue-dark:#06336f;
  --rt-orange:#f67d12;
  --rt-teal:#7EBEC5;
  --rt-light:#f4f4f5;
  --rt-ink:#303030;
  --rt-text:#5b6472;
  --rt-border:#e3e7ee;
  --rt-radius:14px;
  font-family:'Open Sans',Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.75;
  color:var(--rt-text);
  background:#fff;
}

.rt-page *,.rt-page *:before,.rt-page *:after{box-sizing:border-box}

.rt-page h1,.rt-page h2,.rt-page h3,.rt-page h4,.rt-page h5{
  font-family:'IBM Plex Sans',Helvetica,Arial,Lucida,sans-serif;
  color:var(--rt-ink);
  padding:0;
  margin:0 0 14px;
  line-height:1.22;
  font-weight:600;
}
.rt-page h1{font-size:clamp(32px,4.4vw,52px);line-height:1.1;letter-spacing:-.5px}
.rt-page h2{font-size:clamp(26px,3vw,36px)}
.rt-page h3{font-size:20px}
.rt-page h4{font-size:17px}
.rt-page p{margin:0 0 16px;padding:0}
.rt-page p:last-child{margin-bottom:0}
.rt-page a{color:var(--rt-blue);text-decoration:none}
.rt-page a:hover{text-decoration:underline}
.rt-page strong,.rt-page b{color:var(--rt-ink);font-weight:700}
.rt-page img{max-width:100%;height:auto}

/* ------------------------------------------------------------------ shell */
.rt-wrap{width:min(1180px,90%);margin:0 auto}
.rt-section{padding:74px 0}
.rt-section--light{background:var(--rt-light)}
.rt-section--tight{padding-top:0}
.rt-section--blue{background:var(--rt-blue);color:#e6eefb}
.rt-section--blue h2,.rt-section--blue h3{color:#fff}

.rt-eyebrow{
  color:var(--rt-blue);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;font-size:13px;margin-bottom:12px;display:block;
}
.rt-head{max-width:820px;margin:0 auto 42px;text-align:center}
.rt-head--left{margin-left:0;text-align:left}
.rt-head p{font-size:17px}
.rt-lead{font-size:18px;line-height:1.75}

/* ----------------------------------------------------------------- button */
.rt-btn{
  display:inline-block;padding:13px 30px;border-radius:29px;
  background:var(--rt-blue);color:#fff!important;font-size:15px;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;text-decoration:none!important;
  border:2px solid var(--rt-blue);transition:all .25s ease;line-height:1.4;
}
.rt-btn:hover{background:var(--rt-blue-dark);border-color:var(--rt-blue-dark)}
.rt-btn--ghost{background:transparent;color:var(--rt-blue)!important}
.rt-btn--ghost:hover{background:var(--rt-blue);color:#fff!important}
.rt-btn--orange{background:var(--rt-orange);border-color:var(--rt-orange)}
.rt-btn--orange:hover{background:#dd6c07;border-color:#dd6c07}
.rt-btn--light{background:#fff;color:var(--rt-blue)!important;border-color:#fff}
.rt-btn--light:hover{background:var(--rt-orange);color:#fff!important;border-color:var(--rt-orange)}
.rt-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* ------------------------------------------------------------------- hero */
.rt-hero{
  background:linear-gradient(135deg,#eaf1fb 0%,#fdfcff 62%,#fff 100%);
  padding:70px 0 66px;border-bottom:1px solid var(--rt-border);
}
.rt-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
.rt-hero h1{color:#10243e}
.rt-hero p{font-size:19px;color:#4a5566;max-width:640px}
/* .rt-page p sets margin shorthand, so this needs the same specificity to
   keep its breathing room under the hero buttons */
.rt-page p.rt-hero-note{font-size:15px;margin:30px 0 0;color:var(--rt-blue);font-weight:600}

.rt-card-hero{
  background:#fff;border:1px solid var(--rt-border);border-radius:18px;
  padding:32px;box-shadow:0 18px 45px rgba(9,70,160,.10);
}
.rt-card-hero h3{margin-top:0;font-size:21px}
.rt-check{display:flex;gap:12px;margin:12px 0;font-size:15.5px;line-height:1.55}
.rt-check i{
  flex:0 0 22px;height:22px;border-radius:50%;background:#e8f1ff;color:var(--rt-blue);
  font-style:normal;font-size:12px;font-weight:700;display:grid;place-items:center;margin-top:3px;
}
.rt-score{
  margin-top:22px;padding:16px 18px;border-radius:12px;
  background:#fff6ec;border-left:4px solid var(--rt-orange);font-size:15px;color:var(--rt-ink);
}

/* hero photo — sits in the right column, with a soft accent block behind it */
.rt-hero-media{position:relative}
.rt-hero-media:before{
  content:"";position:absolute;right:-16px;top:-16px;width:58%;height:58%;
  border-radius:20px;background:linear-gradient(135deg,var(--rt-teal),rgba(246,125,18,.55));
  opacity:.35;z-index:0;
}
.rt-hero-media img{
  position:relative;z-index:1;width:100%;border-radius:18px;display:block;
  box-shadow:0 22px 55px rgba(9,70,160,.18);
}

/* -------------------------------------------------------------- usp strip */
.rt-usp{background:var(--rt-light);padding:52px 0}
.rt-usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 32px}
.rt-usp-item{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;line-height:1.55}
.rt-usp-item i{
  flex:0 0 26px;height:26px;border-radius:50%;background:var(--rt-blue);color:#fff;
  font-style:normal;font-size:13px;font-weight:700;display:grid;place-items:center;margin-top:2px;
}

/* ------------------------------------------------------ image + text split */
.rt-split{display:grid;grid-template-columns:1fr 1.1fr;gap:52px;align-items:center}
.rt-split--flip .rt-split-media{order:2}
.rt-split-media img{
  width:100%;border-radius:18px;display:block;box-shadow:0 20px 48px rgba(9,70,160,.15);
}

/* ------------------------------------------------------------- card icons */
.rt-icon{
  width:66px;height:66px;border-radius:16px;background:#fff6ec;
  display:grid;place-items:center;margin-bottom:16px;
}
.rt-icon img{width:40px;height:40px;display:block}
.rt-subject-icon-img{
  width:74px;height:74px;border-radius:50%;background:#fff6ec;
  display:grid;place-items:center;margin:0 auto 16px;
}
.rt-subject-icon-img img{width:44px;height:44px;display:block}

/* ------------------------------------------------------------------ cards */
.rt-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rt-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.rt-card{
  background:#fff;border:1px solid var(--rt-border);border-radius:var(--rt-radius);
  padding:28px;transition:transform .25s ease,box-shadow .25s ease;
}
.rt-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(9,70,160,.10)}
.rt-card h3{margin-bottom:8px}
.rt-card p{font-size:15.5px}
.rt-card--plain:hover{transform:none;box-shadow:none}

.rt-topics{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.rt-topic{
  background:#fff;border:1px solid var(--rt-border);border-left:4px solid var(--rt-blue);
  border-radius:12px;padding:22px 24px;
}
.rt-topic h3{font-size:18px;margin-bottom:6px}
.rt-topic p{font-size:15.5px;margin-bottom:8px}
.rt-topic .rt-mark{
  font-size:13.5px;color:var(--rt-orange);font-weight:700;margin:0;
  text-transform:uppercase;letter-spacing:.03em;
}

.rt-subjects{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rt-subject{
  background:#fff;border:1px solid var(--rt-border);border-radius:var(--rt-radius);
  padding:30px 26px;text-align:center;
}
.rt-subject-icon{font-size:38px;line-height:1;margin-bottom:14px;display:block}
.rt-subject p{font-size:15.5px}

/* --------------------------------------------------------------- process  */
.rt-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 40px;counter-reset:rtstep}
.rt-steps--3{grid-template-columns:repeat(3,1fr)}
.rt-step{position:relative;padding-left:64px}
.rt-step:before{
  counter-increment:rtstep;content:counter(rtstep);
  position:absolute;left:0;top:2px;width:44px;height:44px;border-radius:50%;
  background:var(--rt-blue);color:#fff;display:grid;place-items:center;
  font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:18px;
}
.rt-step h3{margin-bottom:6px;font-size:19px}
.rt-step p{font-size:15.5px}

.rt-highlight{
  background:#fff;border:1px solid var(--rt-border);border-radius:12px;
  padding:24px 26px;margin-bottom:18px;border-top:3px solid var(--rt-orange);
}
.rt-highlight h3{margin-bottom:6px;font-size:18px}
.rt-highlight p{font-size:15.5px;margin-bottom:0}

/* -------------------------------------------------------------------- faq */
.rt-faqs{max-width:900px;margin:0 auto}
.rt-faq{
  background:#fff;border:1px solid var(--rt-border);border-radius:10px;
  margin-bottom:12px;overflow:hidden;
}
.rt-faq summary{
  cursor:pointer;list-style:none;padding:18px 52px 18px 22px;position:relative;
  font-family:'IBM Plex Sans',Helvetica,Arial,sans-serif;font-weight:600;
  font-size:17px;color:var(--rt-ink);
}
.rt-faq summary::-webkit-details-marker{display:none}
.rt-faq summary:after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:24px;font-weight:400;color:var(--rt-blue);line-height:1;
}
.rt-faq[open] summary:after{content:"\2013"}
.rt-faq[open] summary{color:var(--rt-blue)}
.rt-faq-body{padding:0 22px 20px;font-size:15.5px}
.rt-faq-body p{margin-bottom:0}

/* ------------------------------------------------------------------- form */
.rt-form-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:start}
.rt-form-points{font-size:15.5px;line-height:2}
.rt-form{
  background:#fff;border:1px solid var(--rt-border);border-radius:16px;
  padding:32px;box-shadow:0 16px 40px rgba(9,70,160,.08);
}
.rt-form h3{margin-top:0}
.rt-form label{
  display:block;font-weight:600;font-size:14px;color:var(--rt-ink);
  margin:16px 0 6px;font-family:'IBM Plex Sans',sans-serif;
}
.rt-form input,.rt-form select,.rt-form textarea{
  width:100%;padding:12px 14px;border:1px solid #cfd6e2;border-radius:8px;
  font:inherit;font-size:15px;color:var(--rt-ink);background:#fdfdfe;
}
.rt-form input:focus,.rt-form select:focus,.rt-form textarea:focus{
  outline:none;border-color:var(--rt-blue);box-shadow:0 0 0 3px rgba(9,70,160,.10)
}
.rt-form textarea{min-height:110px;resize:vertical}
.rt-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rt-form button{
  width:100%;margin-top:24px;padding:15px;border:0;border-radius:29px;
  background:var(--rt-blue);color:#fff;font-size:15px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;cursor:pointer;transition:background .25s ease;
}
.rt-form button:hover{background:var(--rt-orange)}
.rt-form-hp{position:absolute;left:-9999px}
.rt-form-alert{
  margin-bottom:18px;padding:12px 16px;border-radius:8px;font-size:15px;
  background:#fdecea;border:1px solid #f5c6c0;color:#a3241a;
}

/* -------------------------------------------------------------------- cta */
.rt-cta{background:var(--rt-blue);color:#dbe7f8;text-align:center;padding:66px 0;position:relative}
.rt-cta h2{color:#fff}
.rt-cta p{max-width:720px;margin:0 auto 26px;font-size:17.5px}
/* photo-backed CTA: the image sits behind a strong blue wash so text stays readable */
.rt-cta--photo{
  background-image:linear-gradient(rgba(9,70,160,.90),rgba(6,51,111,.94)),
                   url(/assets/uploads/2026/03/Richmond-Tutoring-banner.webp);
  background-size:cover;background-position:center;padding:82px 0;
}

/* ---------------------------------------------------------------- results */
.rt-hero--photo{
  background-image:linear-gradient(rgba(9,70,160,.90),rgba(6,51,111,.93)),
                   url(/assets/uploads/2026/03/Richmond-Tutoring-banner.webp);
  background-size:cover;background-position:center;border-bottom:0;padding:74px 0 70px;
}
.rt-hero--photo h1{color:#fff}
.rt-hero--photo p{color:#d7e4f7}
.rt-hero--photo .rt-eyebrow{color:#9dc2ff}
/* blue buttons would vanish on the blue wash — switch them to orange / outline-white */
.rt-hero--photo .rt-btn{background:var(--rt-orange);border-color:var(--rt-orange)}
.rt-hero--photo .rt-btn:hover{background:#dd6c07;border-color:#dd6c07}
.rt-hero--photo .rt-btn--ghost{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.75)}
.rt-hero--photo .rt-btn--ghost:hover{background:#fff;color:var(--rt-blue)!important;border-color:#fff}

.rt-stats{
  background:var(--rt-blue);padding:0;
}
.rt-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.18)}
.rt-stat{background:var(--rt-blue);padding:34px 20px;text-align:center;color:#cfe0f7}
.rt-stat strong{
  display:block;font-family:'IBM Plex Sans',sans-serif;font-size:44px;
  line-height:1;color:#fff;margin-bottom:8px;font-weight:700;
}
.rt-stat span{font-size:14px;line-height:1.5;display:block}

.rt-year{margin-bottom:42px}
.rt-year-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.rt-year-title{
  font-family:'IBM Plex Sans',sans-serif;font-size:26px;font-weight:700;color:var(--rt-ink);
}
.rt-tier{
  background:#e8f1ff;color:var(--rt-blue);font-size:13px;font-weight:700;
  padding:5px 14px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em;
}
.rt-table-scroll{overflow-x:auto;border:1px solid var(--rt-border);border-radius:12px;background:#fff}
.rt-table{width:100%;border-collapse:collapse;min-width:620px;font-size:15px}
.rt-table th{
  background:var(--rt-blue);color:#fff;text-align:left;padding:14px 18px;
  font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:14px;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
}
.rt-table td{padding:13px 18px;border-top:1px solid var(--rt-border);color:var(--rt-text)}
.rt-table tbody tr:nth-child(even) td{background:#fafbfd}
.rt-table td:first-child{color:var(--rt-ink);font-weight:600}
.rt-grade{
  display:inline-block;min-width:34px;text-align:center;padding:3px 10px;border-radius:20px;
  font-weight:700;background:#eef1f6;color:var(--rt-ink);font-family:'IBM Plex Sans',sans-serif;
}
.rt-grade-9{background:#0946a0;color:#fff}
.rt-grade-8{background:#2f7bd8;color:#fff}
.rt-grade-7{background:#7EBEC5;color:#08343a}
.rt-marks{white-space:nowrap;font-variant-numeric:tabular-nums}
.rt-note{
  margin-top:6px;background:#fff6ec;border-left:4px solid var(--rt-orange);
  border-radius:10px;padding:20px 24px;font-size:16px;
}
.rt-grades-line{
  font-family:'IBM Plex Sans',sans-serif;font-size:28px;font-weight:700;color:var(--rt-blue);
  letter-spacing:.14em;margin-top:14px;
}

/* ------------------------------------------------------------ header menu */
/* The "Find Your Tutor" button is positioned with a fixed margin-top in the
   frozen Divi build, so it drifts out of line with the logo/menu as the
   viewport width changes. Centre the header row instead. */
@media(min-width:981px){
  .et_pb_section_0_tb_header .et_pb_row--with-menu{display:flex;align-items:center}
  .et_pb_section_0_tb_header .et_pb_button_0_tb_header_wrapper{margin-top:0!important}
  .et_pb_sticky .et_pb_button_0_tb_header_wrapper{margin-top:0!important}
}

/* The frozen Divi build ships no <ul class="et_mobile_menu">, so its own JS
   never opens anything. inc/header.php now renders that list and inc/footer.php
   toggles this class — the rules below are all the mobile menu needs. */
body.rt-mnav-open .et_pb_menu .et_mobile_menu{display:block!important}
.et_pb_menu .et_mobile_menu li a{color:#303030!important;font-weight:600}
.et_pb_menu .et_mobile_menu .menu-item-has-children>a{cursor:default}
.et_pb_menu .et_mobile_menu li li a{font-weight:500;color:#5b6472!important}
/* The theme's collapsing-mobile-menu CSS hides sub-menus until its jQuery
   snippet adds .visible. With only four subject links there is nothing to
   collapse, so show them straight away and drop the toggle icon. */
ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu{
  display:block!important;visibility:visible!important;
}
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon{display:none!important}
/* desktop dropdown: Divi styles it, this only keeps the label-only parent
   ("Subjects") looking and behaving like the other menu links */
.et-menu li.menu-item-has-children>a:not([href]){cursor:default}
.et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-ancestor>a{color:#0946a0!important}

/* ----------------------------------------------------------------- footer */
.rt-footer-links{background:#0b1a30;color:#b9c6d8;padding:52px 0 40px}
.rt-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.rt-footer-links h4{
  color:#fff;font-family:'IBM Plex Sans',sans-serif;font-size:15px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px;padding:0;
}
.rt-footer-links ul{list-style:none;margin:0;padding:0}
.rt-footer-links li{margin-bottom:9px;font-size:15px;line-height:1.6}
.rt-footer-links a{color:#b9c6d8;text-decoration:none;transition:color .2s ease}
.rt-footer-links a:hover{color:var(--rt-orange);text-decoration:none}
.rt-footer-links p{font-size:15px;margin-bottom:12px;color:#b9c6d8}
.rt-footer-logo{max-width:150px;margin-bottom:16px;display:block}

/* ------------------------------------------------------------ responsive  */
@media(max-width:1024px){
  .rt-hero-grid,.rt-form-grid,.rt-split{grid-template-columns:1fr;gap:38px}
  .rt-split--flip .rt-split-media{order:0}
  .rt-usp-grid{grid-template-columns:repeat(2,1fr)}
  .rt-grid-3,.rt-subjects{grid-template-columns:repeat(2,1fr)}
  .rt-steps--3{grid-template-columns:repeat(2,1fr)}
  .rt-stats-grid{grid-template-columns:repeat(2,1fr)}
  .rt-footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:720px){
  .rt-page{font-size:15.5px}
  .rt-section{padding:52px 0}
  .rt-hero{padding:48px 0 46px}
  .rt-grid-3,.rt-grid-2,.rt-topics,.rt-subjects,.rt-steps,.rt-steps--3,
  .rt-form-row,.rt-footer-grid,.rt-usp-grid{grid-template-columns:1fr}
  .rt-hero-media:before{display:none}
  .rt-cta--photo,.rt-hero--photo{padding:54px 0}
  .rt-head{text-align:left;margin-bottom:30px}
  .rt-card-hero,.rt-form{padding:24px}
  .rt-btns .rt-btn{width:100%;text-align:center}
  .rt-stat strong{font-size:36px}
}