/* ==========================================================================
   HomeworkForYou - UI polish (branch ui-polish)
   Same layout, content, order and brand (logo, #f3e248 yellow, blue, chalk
   numbers, photos). Modernised boxes, inputs and buttons on ONE scale:
     spacing 4/8/12/16/24/32/48/72 - radius 10/14/18 - one shadow.
   Loaded last, from templates/master.html.
   Scope:
     - nav (desktop) and footer: site-wide (same markup on every page);
     - sections 1-10: homepage only (body.h4y-home) AND the homepage's own
       section selectors;
     - sections 11-20: every other page (body.h4y-page, the default body class
       in master.html) plus the modals, which can open on any page. Page
       tweaks are keyed on a page class set by the page's index template
       (h4y-project, h4y-post, h4y-payment, h4y-auth ...).
   ========================================================================== */

:root {
  --h4y-yellow: #f3e248;
  --h4y-yellow-hover: #e9d632;
  --h4y-ink: #1d1d1d;
  --h4y-text: #344054;
  --h4y-muted: #667085;
  --h4y-title: #5d8190;            /* existing "How it works." colour */
  --h4y-blue: #286090;             /* existing panel header blue */
  --h4y-link: #1f7fc9;
  --h4y-line: #e4e7ec;
  --h4y-surface: #f8f9fa;
  --h4y-r-sm: 10px;                /* controls, buttons */
  --h4y-r-md: 14px;                /* cards */
  --h4y-r-lg: 18px;                /* panels, form card */
  --h4y-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 12px rgba(16, 24, 40, .06);
  --h4y-gutter: 16px;
  --h4y-section: 48px;             /* vertical section padding */
  --h4y-band: 32px;                /* the stats strip under the hero: one step down */
  --h4y-max: 1140px;               /* content width */
  --h4y-ctl: 48px;                 /* input + button height */
  --h4y-nav: 84px;                 /* fixed navbar height (nav-bar.css) */
}
@media (min-width: 768px) {
  :root { --h4y-gutter: 24px; --h4y-section: 72px; --h4y-band: 48px; }
}

/* --------------------------------------------------------------------------
   1. Top nav (site-wide). Logo and links share one gutter; links are evenly
   spaced pills instead of full-height dark blocks.
   -------------------------------------------------------------------------- */
.navbar-fixed-top .nav-sh-margin-left { margin-left: var(--h4y-gutter); }
.navbar-fixed-top .navbar-toggle { margin-right: calc(var(--h4y-gutter) - 10px); }
@media (min-width: 1181px) {
  .navbar-fixed-top .navbar-brand { padding-left: 0; }
  .navbar-fixed-top .nav-sh-margin-right { margin-right: calc(var(--h4y-gutter) - 14px); }
  .navbar-fixed-top .navbar-nav { display: flex; align-items: center; height: var(--h4y-nav); gap: 4px; }
  .navbar-fixed-top .navbar-nav > li { float: none; }
  .navbar-default.navbar-fixed-top .navbar-nav > li > a,
  .navbar-fixed-top .nav-button {
    height: 40px !important;
    padding: 10px 14px !important;
    line-height: 20px;
    border-radius: var(--h4y-r-sm);
    transition: background-color .15s, color .15s;
  }
  .navbar-fixed-top .navbar-nav li a:hover,
  .navbar-fixed-top .navbar-nav li.active a,
  .navbar-fixed-top .nav-button:hover,
  .navbar-fixed-top .nav-button:focus {
    background-color: rgba(255, 255, 255, .14) !important;
  }
}

/* --------------------------------------------------------------------------
   2. Buttons (homepage sections): one primary (yellow) and one secondary
   (white) style. Same height, radius, weight and type.
   -------------------------------------------------------------------------- */
.h4y-home .cover-img .btn,
.h4y-home #home-data-list .btn,
.h4y-home .back-to-school-img .btn,
.h4y-home .how-it-works-wrap .btn,
.h4y-home #example .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--h4y-ctl);
  min-width: 220px;
  width: auto !important;
  max-width: 100% !important;
  margin: 0;
  padding: 0 24px !important;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  border-radius: var(--h4y-r-sm) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
  transition: background-color .15s, border-color .15s, transform .08s;
}
.h4y-home .cover-img .btn-warning,
.h4y-home #home-data-list .btn-warning,
.h4y-home .how-it-works-wrap .btn-warning {
  color: var(--h4y-ink) !important;
  background-color: var(--h4y-yellow) !important;
  border: 1px solid var(--h4y-yellow) !important;
}
.h4y-home .cover-img .btn-warning:hover,
.h4y-home .cover-img .btn-warning:focus,
.h4y-home #home-data-list .btn-warning:hover,
.h4y-home #home-data-list .btn-warning:focus,
.h4y-home .how-it-works-wrap .btn-warning:hover,
.h4y-home .how-it-works-wrap .btn-warning:focus {
  color: var(--h4y-ink) !important;
  background-color: var(--h4y-yellow-hover) !important;
  border-color: var(--h4y-yellow-hover) !important;
}
.h4y-home .back-to-school-img .btn-default,
.h4y-home #example .btn-default {
  color: var(--h4y-ink) !important;
  background-color: #fff !important;
  border: 1px solid #fff !important;
}
.h4y-home .back-to-school-img .btn-default:hover,
.h4y-home .back-to-school-img .btn-default:focus,
.h4y-home #example .btn-default:hover,
.h4y-home #example .btn-default:focus {
  background-color: #f2f4f7 !important;
  border-color: #f2f4f7 !important;
}
.h4y-home .cover-img .btn:active,
.h4y-home #home-data-list .btn:active,
.h4y-home .back-to-school-img .btn:active,
.h4y-home .how-it-works-wrap .btn:active,
.h4y-home #example .btn:active { transform: translateY(1px); }
.h4y-home .cover-img .btn:focus-visible,
.h4y-home #home-data-list .btn:focus-visible,
.h4y-home .back-to-school-img .btn:focus-visible,
.h4y-home .how-it-works-wrap .btn:focus-visible,
.h4y-home #example .btn:focus-visible { outline: 3px solid rgba(243, 226, 72, .6); outline-offset: 2px; }
@media (max-width: 767px) {
  .h4y-home #home-data-list .btn,
  .h4y-home .back-to-school-img .btn,
  .h4y-home .how-it-works-wrap .btn,
  .h4y-home #example .btn { width: 100% !important; max-width: 320px !important; min-width: 0; }
}

/* --------------------------------------------------------------------------
   3. Hero: same photo and copy. Even rhythm (title 12 subtitle 24 form 24
   activity line), a frosted form card with equal padding and 12px gaps.
   -------------------------------------------------------------------------- */
.h4y-home .jumbotron.cover-img {
  margin: 0;
  border-radius: 0;
  padding: calc(var(--h4y-nav) + 40px) var(--h4y-gutter) var(--h4y-section) !important;  /* .jumbotron zeroes padding-bottom with !important */
  /* Real overlay instead of shadow-cover-grey-full (an inset 1000px box-shadow,
     which leaves an un-darkened stripe on screens wider than 2000px). */
  box-shadow: none;
  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(/static/images/main_cover.jpg);
  background-size: cover;
  background-position: center;
}
@media (min-width: 768px) {
  /* keep the photo's presence: at least 640px tall, content centred below the nav */
  .h4y-home .jumbotron.cover-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 640px;
    padding-top: calc(var(--h4y-nav) + 48px) !important;
  }
  .h4y-home .jumbotron.cover-img > * { width: 100%; }
}
.h4y-home .cover-title,
.h4y-home .back-to-school-title,
.h4y-home .how-it-works-title,
.h4y-home .h4y-subjects h2,
.h4y-home #example .ex-p-title { text-wrap: balance; }
.h4y-home .cover-title {
  margin: 0;
  font-size: clamp(24px, 6.2vw, 50px);
  line-height: 1.15;
}
.h4y-home .cover-p {
  margin: 12px 0 0;
  padding: 0 !important;
  font-size: 16px;
  line-height: 1.4;
}
.h4y-home .cover-sub {
  max-width: 34em;
  margin: 24px auto 0 !important;
  padding: 0;
  font-size: 17px !important;
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
@media (min-width: 768px) {
  .h4y-home .cover-p { font-size: 20px; }
  .h4y-home .cover-sub { font-size: 20px !important; }
}

/* the form card */
.h4y-home .cover-img .form-inline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
  margin: 24px auto 0;
  padding: 16px;
  text-align: left;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--h4y-r-lg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}
.h4y-home .cover-img .form-inline .form-group {
  display: block;
  margin: 0 !important;
}
.h4y-home .cover-img .form-control {
  display: block;
  width: 100% !important;
  height: var(--h4y-ctl) !important;
  margin: 0;
  padding: 0 16px !important;
  font-size: 16px !important;
  line-height: normal;
  color: var(--h4y-ink);
  background-color: #fff !important;
  border: 1px solid rgba(16, 24, 40, .12) !important;
  border-radius: var(--h4y-r-sm) !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s;
}
.h4y-home .cover-img .form-control::placeholder { color: #8a919e; opacity: 1; }
.h4y-home .cover-img .form-control:focus {
  border-color: #d8c53a !important;
  box-shadow: 0 0 0 3px rgba(243, 226, 72, .55) !important;
  outline: 0;
}
/* the dropdown matches the inputs: same box, custom chevron, placeholder colour while empty */
.h4y-home .cover-img select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23667085' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
}
.h4y-home .cover-img select.form-control.ng-empty { color: #8a919e; }
.h4y-home .cover-img select.form-control option { color: var(--h4y-ink); }
.h4y-home .cover-img .form-control.submitted.ng-invalid {
  border-color: #d92d20 !important;
  background-color: #fff5f5 !important;
}
.h4y-home .cover-img .form-inline .btn { width: 100% !important; max-width: none !important; min-width: 0; }
@media (min-width: 768px) and (max-width: 991px) {
  /* tablets: 2 x 2 (Summary | Due Date / Willing to Pay | Post Homework) */
  .h4y-home .cover-img .form-inline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 600px;
  }
}
@media (min-width: 992px) {
  /* one row, identical heights */
  .h4y-home .cover-img .form-inline {
    flex-direction: row;
    align-items: stretch;
    max-width: 880px;
    padding: 12px;
  }
  .h4y-home .cover-img .form-inline .form-group { flex: 1 1 0; min-width: 0; }
  .h4y-home .cover-img .form-inline .form-group:first-child { flex-grow: 1.4; }
  .h4y-home .cover-img .form-inline .btn { flex: 0 0 auto; width: auto !important; min-width: 0; }
}

/* --------------------------------------------------------------------------
   4. Activity stats: chalk numbers and colours kept, each in an equal card.
   -------------------------------------------------------------------------- */
.h4y-home .num-wrap { padding: var(--h4y-band) var(--h4y-gutter); }
.h4y-home .num-wrap > div { max-width: var(--h4y-max); margin: 0 auto !important; }
.h4y-home .num-wrap .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
  margin: 0 !important;
}
.h4y-home .num-wrap .row::before,
.h4y-home .num-wrap .row::after { content: none; }
.h4y-home .num-wrap .row > [class*="col-"] {
  float: none;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;     /* numbers line up even if a label wraps */
  padding: 24px 12px !important;
  background: #fff;
  border: 1px solid var(--h4y-line);
  border-radius: var(--h4y-r-md);
  box-shadow: var(--h4y-shadow);
}
.h4y-home .num-num { display: block; font-size: 38px; line-height: 1.1; white-space: nowrap; }
.h4y-home .num-margin-txt {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3 !important;
  color: var(--h4y-text) !important;
}
@media (min-width: 768px) {
  .h4y-home .num-wrap .row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 992px) {
  .h4y-home .num-wrap .row { gap: 24px; }
  .h4y-home .num-num { font-size: 46px; }
}

/* --------------------------------------------------------------------------
   5. "Make Money by Being a Tutor": an inset panel. Desktop keeps the table
   (hairline rows, no zebra); mobile shows 5 light cards + "See All".
   -------------------------------------------------------------------------- */
.h4y-home #home-data-list {
  margin: 0 !important;
  padding: var(--h4y-section) var(--h4y-gutter) !important;
  background: #fff;
}
.h4y-home #home-data-list > .row {
  max-width: var(--h4y-max);
  margin: 0 auto !important;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--h4y-line);
  border-radius: var(--h4y-r-lg);
  box-shadow: var(--h4y-shadow);
}
.h4y-home #home-data-list > .row > [class*="col-"] { padding: 0; }
.h4y-home #home-data-list .project-home-row-header-dark {
  margin: 0 !important;
  padding: 16px 24px !important;
  font-size: 18px !important;
  line-height: 1.4;
  border-radius: 0;
}
.h4y-home #home-data-list .project-home-row-header-dark .row { margin: 0; }
.h4y-home #home-data-list .project-home-row-header-dark .col-sm-8 { width: 100%; padding: 0; }
.h4y-home #home-data-list .project-home-row-header-dark .col-sm-4 { display: none; }  /* an empty   column */
.h4y-home #home-data-list .margin-top-5 { margin: 0 !important; }
.h4y-home #home-data-list .r-d-wrap-home { margin: 0; padding: 8px 24px 32px; }
.h4y-home #home-data-list .r-big-wrap::before,
.h4y-home #home-data-list .r-big-wrap::after,
.h4y-home #home-data-list .r-d-inner::before,
.h4y-home #home-data-list .r-d-inner::after { content: none; }  /* Bootstrap .row clearfix would become grid/flex items */
.h4y-home #home-data-list .r-small-data a { color: var(--h4y-link); }
.h4y-home #home-data-list .r-small-data a:hover { text-decoration: underline; }
/* "Total N live projects" + See All */
.h4y-home #home-data-list .r-d-wrap-home > .row.pd-top-25 { padding: 24px 0 0 !important; }
.h4y-home #home-data-list .r-d-wrap-home > .row.pd-top-25 > div { padding: 0 !important; }
.h4y-home #home-data-list .pagination-text-no-color {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.5;
}
.h4y-home #home-data-list .r-d-wrap-home > .row.pd-bottom-30 { padding: 16px 0 0 !important; }
.h4y-home #home-data-list .r-d-wrap-home > .row.pd-top-15 { padding: 24px 0 !important; }

@media (min-width: 768px) {
  .h4y-home #home-data-list .r-big-wrap {
    display: flex;
    margin: 0 !important;
    padding: 12px 0 !important;
    font-size: 12px !important;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--h4y-muted);
    border-bottom: 1px solid var(--h4y-line);
  }
  .h4y-home #home-data-list .r-d-inner {
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 14px 0;
    font-size: 15px !important;
    line-height: 1.45;
    background: #fff !important;
    border-bottom: 1px solid #eef0f3;
    transition: background-color .15s;
  }
  .h4y-home #home-data-list .r-d-inner:hover { background: #f9fafb !important; }
  .h4y-home #home-data-list .r-big-wrap > div,
  .h4y-home #home-data-list .r-d-inner > div { float: none; overflow: visible !important; padding: 0 12px; }
  .h4y-home #home-data-list .r-big-wrap > div:first-child,
  .h4y-home #home-data-list .r-d-inner > div:first-child { padding-left: 12px; }
}

@media (max-width: 767px) {
  .h4y-home #home-data-list .project-home-row-header-dark { padding: 16px !important; }
  .h4y-home #home-data-list .r-d-wrap-home { padding: 16px 16px 24px; background: var(--h4y-surface); }
  .h4y-home #home-data-list .r-d-inner {
    display: grid;
    gap: 8px;
    margin: 0 0 12px !important;
    padding: 16px !important;
    line-height: 1.4;
    background: #fff !important;
    border: 1px solid var(--h4y-line);
    border-radius: var(--h4y-r-md);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  }
  .h4y-home #home-data-list .r-d-inner:hover { box-shadow: var(--h4y-shadow); }
  .h4y-home #home-data-list .r-d-inner > div {
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr);
    column-gap: 12px;
    padding: 0 !important;
    overflow: visible !important;
    text-align: left !important;
  }
  .h4y-home #home-data-list .r-small-header,
  .h4y-home #home-data-list .r-small-data { float: none; width: auto; margin: 0; padding: 0; }
  .h4y-home #home-data-list .r-small-header { font-size: 13px; font-weight: 600; line-height: 20px; color: var(--h4y-muted); }
  .h4y-home #home-data-list .r-small-data { font-size: 15px; line-height: 20px; color: var(--h4y-ink); }
  /* first 5 projects on mobile; "See All" opens the full list (child 1 is the desktop header row) */
  .h4y-home #home-data-list .r-d-inner:nth-child(n+7) { display: none !important; }
}

/* --------------------------------------------------------------------------
   6. Refer a friend: same photo band, one section rhythm, readable overlay.
   -------------------------------------------------------------------------- */
.h4y-home .back-to-school-img {
  padding: 0 var(--h4y-gutter);
  box-shadow: none;   /* was shadow-cover-grey-full-lite-2 */
  background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url(/static/images/back-to-school-cover.jpg);
  background-size: cover;
  background-position: center;
}
.h4y-home .back-to-school-img > div {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--h4y-section) 0 !important;
}
.h4y-home .back-to-school-title { font-size: 28px; line-height: 1.15; }
.h4y-home .back-to-school-p {
  max-width: 36em;
  margin: 0 auto;
  padding-top: 12px !important;
  font-size: 16px;
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.h4y-home .back-to-school-img .pd-top-20 { padding-top: 24px !important; }
@media (min-width: 768px) {
  .h4y-home .back-to-school-title { font-size: clamp(36px, 4.2vw, 48px); }
  .h4y-home .back-to-school-p { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   7. How it works + section titles.
   -------------------------------------------------------------------------- */
.h4y-home .how-it-works-wrap {
  width: auto;
  max-width: var(--h4y-max);
  margin: 0 auto;
  padding: var(--h4y-section) var(--h4y-gutter) !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 32px;
}
.h4y-home .how-it-works-wrap::before,
.h4y-home .how-it-works-wrap::after { content: none; }
.h4y-home .how-it-works-title,
.h4y-home .h4y-subjects h2 {
  margin: 0 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: none;
  color: var(--h4y-title) !important;
}
.h4y-home .how-it-works-wrap > .how-it-works-title,
.h4y-home .how-it-works-wrap > .how-it-works-sub,
.h4y-home .how-it-works-wrap > .pd-top-25 { grid-column: 1 / -1; }
.h4y-home .how-it-works-sub {
  max-width: 520px;
  margin: -24px auto 0;          /* 8px under the title (row-gap is 32) */
  padding: 0 !important;
  color: var(--h4y-text);
}
.h4y-home .how-it-works-sub p { font-size: 16px !important; }
.h4y-home .how-it-works-wrap > .col-sm-4 { float: none; width: auto; padding: 0 !important; }
.h4y-home .how-it-works-wrap > .col-sm-4 img { height: 96px; width: auto; }
.h4y-home .how-it-works-wrap > .col-sm-4 > .pd-top-10 { padding-top: 12px; }
.h4y-home .how-it-works-wrap > .col-sm-4 > .font-18 { margin-top: 4px; font-size: 16px !important; line-height: 1.5; color: var(--h4y-text); }
.h4y-home .how-it-works-wrap > .pd-top-25 { padding: 0; }
.h4y-home .how-it-works-wrap > .pd-top-25 .btn { margin: 0 !important; }
@media (min-width: 768px) {
  .h4y-home .how-it-works-title,
  .h4y-home .h4y-subjects h2 { font-size: 36px !important; }
  .h4y-home .how-it-works-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
  .h4y-home .how-it-works-sub { margin-top: -32px; }
  .h4y-home .how-it-works-wrap > .col-sm-4 img { height: 110px; }
}

/* --------------------------------------------------------------------------
   8. Photo cards (APA examples / Back to School / Get Help): equal cards in a
   grid, lighter shadow, shorter photos, bigger text, CTA at the bottom.
   -------------------------------------------------------------------------- */
.h4y-home #example { padding: 0 var(--h4y-gutter) var(--h4y-section); }
.h4y-home #example .ex-wrap { max-width: var(--h4y-max); margin: 0 auto; padding: 0 !important; }
.h4y-home #example .ex-wrap > .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0 !important;
}
.h4y-home #example .ex-wrap > .row::before,
.h4y-home #example .ex-wrap > .row::after { content: none; }
.h4y-home #example .ex-wrap > .row > [class*="col-"] { float: none; width: auto; padding: 0 !important; }
.h4y-home #example .ex-img-thumb {
  position: relative;
  height: 100%;
  margin: 0 !important;
  overflow: hidden;
  background: #1d2939;
  border-radius: var(--h4y-r-lg);
  box-shadow: var(--h4y-shadow);   /* was shadow-normal-outer: a heavy grey halo that showed as grey strips */
}
.h4y-home #example br { display: none; }
/* photo + overlay cards */
.h4y-home #example .boy-container { position: relative; height: 100%; min-height: 360px; }
.h4y-home #example .boy-container > img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}
.h4y-home #example .boy-tag {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 64px 24px 24px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .7) 55%);
}
.h4y-home #example .boy-tag .pd-top-bottom-34 { padding: 0 !important; }
.h4y-home #example .ex-p-title-wrap-300,
.h4y-home #example .ex-p-sub-wrap-300 { max-width: 320px; margin: 0 auto; padding: 0; }
.h4y-home #example .ex-p-title { font-size: 22px; line-height: 1.25; }
.h4y-home #example .ex-p-sub { margin-top: 8px !important; font-size: 16px !important; line-height: 1.5; }
.h4y-home #example .ex-p-sub-wrap-300:empty { display: none; }
.h4y-home #example .boy-tag .btn,
.h4y-home #example .ex-mid-mid-bottom .btn { margin-top: 16px !important; }  /* .blank-space zeroes it with !important on mobile */
/* the middle card: photo on top, blue box fills the rest */
.h4y-home #example #mid_div_id { padding: 0 !important; }
.h4y-home #example #mid_div_id .ex-img-thumb { display: flex; flex-direction: column; }
.h4y-home #example #mid_img_div_id img { display: block; width: 100%; height: 200px; object-fit: cover; }
.h4y-home #example .ex-mid-mid-bottom {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.h4y-home #example .ex-mid-mid-text-wrap-outer,
.h4y-home #example .ex-mid-mid-text-wrap-inner { display: block; width: 100%; height: auto !important; min-height: 0; padding: 0 !important; }  /* resize-mid-text-height sets an inline height/padding */
.h4y-home #example .ex-mid-mid-bottom form { display: block; }
@media (min-width: 768px) {
  .h4y-home #example .ex-wrap > .row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .h4y-home #example .boy-container { min-height: 440px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  /* three narrow columns: tighter padding, full-width buttons */
  .h4y-home #example .ex-wrap > .row { gap: 16px; }
  .h4y-home #example .boy-tag { padding: 48px 16px 16px; }
  .h4y-home #example .ex-mid-mid-bottom { padding: 16px; }
  .h4y-home #example .ex-p-title { font-size: 18px; }
  .h4y-home #example .ex-p-sub { font-size: 14px !important; }
  .h4y-home #example .btn { width: 100% !important; min-width: 0; padding: 0 12px !important; font-size: 15px !important; }
}

/* --------------------------------------------------------------------------
   9. Subjects grid: equal cards, one gap (the markup has inline styles).
   -------------------------------------------------------------------------- */
.h4y-home .h4y-subjects {
  padding: var(--h4y-section) var(--h4y-gutter) !important;
  background: var(--h4y-surface) !important;
  border-top: 1px solid var(--h4y-line) !important;
}
.h4y-home .h4y-subjects > .container-fluid { max-width: var(--h4y-max); margin: 0 auto; padding: 0; }
.h4y-home .h4y-subjects h2 { text-align: center; }
.h4y-home .h4y-subjects h2 + p {
  margin: 8px 0 32px !important;
  font-size: 16px !important;
  line-height: 1.5;
  color: var(--h4y-text) !important;
}
.h4y-home .h4y-subjects .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
  max-width: none !important;
  margin: 0 !important;
}
.h4y-home .h4y-subjects .row::before,
.h4y-home .h4y-subjects .row::after { content: none; }
.h4y-home .h4y-subjects .row > div { float: none; width: auto; margin: 0 !important; padding: 0 !important; }
.h4y-home .h4y-subjects .row > div > a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px 12px !important;
  background: #fff !important;
  border: 1px solid var(--h4y-line) !important;
  border-radius: var(--h4y-r-md) !important;
  box-shadow: var(--h4y-shadow) !important;
  transition: border-color .15s, box-shadow .15s, transform .15s !important;
}
.h4y-home .h4y-subjects .row > div > a:hover {
  border-color: #d0d5dd !important;
  box-shadow: 0 2px 4px rgba(16, 24, 40, .06), 0 8px 20px rgba(16, 24, 40, .08) !important;
  transform: translateY(-2px);
}
.h4y-home .h4y-subjects .row > div > a > div:nth-child(1) { margin: 0 0 8px !important; font-size: 28px !important; line-height: 1.2; }
.h4y-home .h4y-subjects .row > div > a > div:nth-child(2) { margin: 0 0 4px !important; font-size: 15px; line-height: 1.3; color: var(--h4y-ink); }
.h4y-home .h4y-subjects .row > div > a > div:nth-child(3) { font-size: 13px !important; line-height: 1.3; color: var(--h4y-muted) !important; }
@media (min-width: 768px) {
  .h4y-home .h4y-subjects .row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 992px) {
  .h4y-home .h4y-subjects .row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}

/* --------------------------------------------------------------------------
   10. Footer (site-wide): proper gutters, spacing between the rows.
   -------------------------------------------------------------------------- */
footer.footer-container-fluid { padding: var(--h4y-section) var(--h4y-gutter) 32px !important; }
footer.footer-container-fluid > .row {
  max-width: var(--h4y-max);
  margin-left: auto !important;
  margin-right: auto !important;
}
footer.footer-container-fluid > .row:first-child {
  padding: 24px 16px 20px !important;
  border: 1px solid var(--h4y-line) !important;
  border-radius: var(--h4y-r-md);
}
footer.footer-container-fluid > .row:first-child p { margin-bottom: 12px !important; }
footer.footer-container-fluid > .row:first-child a { margin: 4px 8px !important; }
footer.footer-container-fluid .footer-bottom-between-space { padding: 0 !important; margin-top: 32px; }
footer.footer-container-fluid .footer-bottom-between-space + .footer-bottom-between-space { margin-top: 24px; }
footer.footer-container-fluid .foot-nav-space { display: inline-block; margin: 4px 12px; }
footer.footer-container-fluid .footer-bottom-between-space .glyphicon { margin-bottom: 8px; }
footer.footer-container-fluid > .row:last-child {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--h4y-line);
}
footer.footer-container-fluid > .row:last-child > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
footer.footer-container-fluid > .row:last-child > div::before,
footer.footer-container-fluid > .row:last-child > div::after { content: none; }
footer.footer-container-fluid > .row:last-child .pull-left,
footer.footer-container-fluid > .row:last-child .pull-right { float: none !important; }
footer.footer-container-fluid > .row:last-child p { margin-bottom: 8px !important; font-size: 13px; line-height: 1.4; }

/* ==========================================================================
   SITE-WIDE (every page but the homepage: body.h4y-page)
   Same markup, same order; only boxes, controls and spacing change.
   ========================================================================== */

/* --------------------------------------------------------------------------
   11. Page frame: content inside the 1140px container and the page gutter,
   one top gap under the nav and one section gap above the footer.
   -------------------------------------------------------------------------- */
.h4y-page > .container-fluid {
  padding: 24px var(--h4y-gutter) 0 !important;   /* the footer brings its own 48/72 top padding */
}
.h4y-page > .container-fluid > * {
  max-width: var(--h4y-max);
  margin-left: auto !important;
  margin-right: auto !important;
}
.h4y-page .project-outer-wrap { margin: 0 auto; }
.h4y-page > .top-up-landing-container-fluid {     /* Assign to H4Y / top-up pages */
  max-width: calc(var(--h4y-max) + 2 * var(--h4y-gutter));
  margin: 0 auto;
  padding-left: var(--h4y-gutter) !important;
  padding-right: var(--h4y-gutter) !important;
}
@media (min-width: 768px) {
  .h4y-page > .container-fluid { padding-top: 32px !important; }
}

/* --------------------------------------------------------------------------
   12. Panels: one border, radius 18, the one shadow. Header bars keep their
   colours (light grey-blue, or the brand blue) with even padding.
   -------------------------------------------------------------------------- */
.h4y-page .project-border,
.h4y-page .project-border-dark,
.h4y-page .panel {
  background: #fff;
  border: 1px solid var(--h4y-line) !important;
  border-radius: var(--h4y-r-lg) !important;
  box-shadow: var(--h4y-shadow);
}
.h4y-page .project-row-header,
.h4y-page .project-row-header-dark,
.h4y-page .panel > .panel-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-height: 56px;
  margin-top: 0;
  padding: 12px 24px !important;
  font-size: 18px;
  line-height: 1.4 !important;
  text-align: left;
  border-radius: calc(var(--h4y-r-lg) - 1px) calc(var(--h4y-r-lg) - 1px) 0 0 !important;
}
.h4y-page .project-row-header { background-color: #f2f6f7; }
/* tutor bid page: the "Bidders / Average bid" stat header keeps its two columns */
.h4y-page .project-row-header-bid {
  padding: 16px 12px !important;
  line-height: 1.4;
  border-radius: calc(var(--h4y-r-lg) - 1px) calc(var(--h4y-r-lg) - 1px) 0 0 !important;
}
.h4y-page .project-row-header-bid ~ .row > .col-xs-12 { padding: 12px 8px 16px; }
.h4y-page .project-row-header::before,
.h4y-page .project-row-header::after,
.h4y-page .project-row-header-dark::before,
.h4y-page .project-row-header-dark::after { content: none; }
.h4y-page .project-row-header > [class*="col-"],
.h4y-page .project-row-header-dark > [class*="col-"] { float: none; width: auto; padding: 0 !important; }
.h4y-page .project-row-header > [class*="col-"]:only-child,
.h4y-page .project-row-header-dark > [class*="col-"]:only-child { flex: 1 1 auto; }
/* panels whose body column keeps its padding: 24px sides (16 on phones), header bleeds to the edge */
.h4y-page .project-border > .col-sm-12:not(.no-padding-lr),
.h4y-page .project-border-dark > .col-sm-12:not(.no-padding-lr) { padding-left: 24px; padding-right: 24px; }
.h4y-page .project-border > .col-sm-12:not(.no-padding-lr) > .project-row-header,
.h4y-page .project-border-dark > .col-sm-12:not(.no-padding-lr) > .project-row-header-dark { margin-left: -24px !important; margin-right: -24px !important; }
.h4y-page .project-row-header + form { padding-top: 16px; padding-bottom: 8px; }
/* header bars that hold a form (browse search): one line, controls 40px */
.h4y-page .project-row-header .form-group,
.h4y-page .project-row-header-dark .form-group { margin-bottom: 0; }
.h4y-page .project-row-header-dark .form-control-feedback { top: 0; height: 40px; margin-top: 0 !important; line-height: 40px; font-size: 18px !important; }
/* section dividers inside panels: one hairline, one rhythm */
.h4y-page .project-border-bottom { border-bottom: 1px solid #eef0f3 !important; padding-bottom: 24px; }
@media (max-width: 767px) {
  .h4y-page .project-border > .col-sm-12:not(.no-padding-lr),
  .h4y-page .project-border-dark > .col-sm-12:not(.no-padding-lr) { padding-left: 16px; padding-right: 16px; }
  .h4y-page .project-border > .col-sm-12:not(.no-padding-lr) > .project-row-header,
  .h4y-page .project-border-dark > .col-sm-12:not(.no-padding-lr) > .project-row-header-dark { margin-left: -16px !important; margin-right: -16px !important; }
  .h4y-page .project-row-header,
  .h4y-page .project-row-header-dark,
  .h4y-page .project-row-header-bid,
  .h4y-page .panel > .panel-heading { padding: 12px 16px !important; font-size: 17px; }
}

/* --------------------------------------------------------------------------
   13. Buttons: radius 10, weight 600, 40px (48px for .btn-lg). Yellow is the
   primary action (ink text), blue stays for "Assign", white is secondary.
   -------------------------------------------------------------------------- */
.h4y-page .btn,
.sim-modal .btn {
  border-radius: var(--h4y-r-sm);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.h4y-page .btn:not(.btn-xs):not(.btn-sm):not(.btn-lg):not(.btn-link),
.sim-modal .btn:not(.btn-xs):not(.btn-sm):not(.btn-lg):not(.btn-link) {
  min-height: 40px;
  padding: 9px 16px;
  font-size: 14px;
  line-height: 20px;
}
.h4y-page .btn-lg,
.sim-modal .btn-lg {
  min-height: 48px;
  padding: 13px 24px;
  font-size: 16px;
  line-height: 20px;
}
@media (max-width: 767px) {
  .h4y-page .btn:not(.btn-xs):not(.btn-sm):not(.btn-lg):not(.btn-link) { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 991px) {
  /* large buttons in half-width columns (e.g. Release Payment) wrap instead of clipping */
  .h4y-page .btn-lg { padding-left: 12px; padding-right: 12px; white-space: normal; }
}
/* the floating "Assign to H4Y" split button (project page, bottom right) */
.h4y-page .h4y-float {
  display: flex;
  gap: 2px;
  padding: 0;
  border-radius: var(--h4y-r-md);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .22);
}
.h4y-page .h4y-float > .btn { flex: 0 0 auto; }
.h4y-page .h4y-float .h4y-btn-right { width: 48px !important; }
.h4y-page .h4y-float .h4y-btn-left { margin: 0; border-radius: var(--h4y-r-md) 0 0 var(--h4y-r-md); }
.h4y-page .h4y-float .h4y-btn-right { margin: 0; padding-left: 0; padding-right: 0; border-radius: 0 var(--h4y-r-md) var(--h4y-r-md) 0; }
.h4y-page .btn:active,
.sim-modal .btn:active { box-shadow: none; transform: translateY(1px); }
.h4y-page .btn:focus-visible,
.sim-modal .btn:focus-visible { outline: 3px solid rgba(40, 96, 144, .35); outline-offset: 2px; }
.h4y-page .btn-warning,
.sim-modal .btn-warning {
  color: var(--h4y-ink) !important;
  background-color: var(--h4y-yellow);
  border-color: var(--h4y-yellow);
}
.h4y-page .btn-warning:hover,
.h4y-page .btn-warning:focus,
.h4y-page .btn-warning:active,
.h4y-page .open > .dropdown-toggle.btn-warning,
.sim-modal .btn-warning:hover,
.sim-modal .btn-warning:focus {
  color: var(--h4y-ink) !important;
  background-color: var(--h4y-yellow-hover);
  border-color: var(--h4y-yellow-hover);
}
.h4y-page .btn-warning .fa { color: inherit; }
.h4y-page .btn-primary { background-color: #337ab7; border-color: #337ab7; }
.h4y-page .btn-primary:hover,
.h4y-page .btn-primary:focus { background-color: #286090; border-color: #286090; }
.h4y-page .btn-default,
.sim-modal .btn-default {
  color: var(--h4y-text);
  background-color: #fff;
  border-color: #d0d5dd;
}
.h4y-page .btn-default:hover,
.h4y-page .btn-default:focus,
.sim-modal .btn-default:hover { color: var(--h4y-ink); background-color: #f9fafb; border-color: #c4cad4; }

/* --------------------------------------------------------------------------
   14. Form controls: one box for inputs, selects and textareas (radius 10,
   40px, 48px for the large ones), yellow focus ring as on the homepage.
   -------------------------------------------------------------------------- */
.h4y-page .form-control,
.sim-modal .form-control {
  height: 40px;                    /* pairs with the 40px buttons; .input-lg pairs with .btn-lg (48) */
  padding: 8px 12px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--h4y-ink);
  background-color: #fff;
  border: 1px solid #d0d5dd;
  border-radius: var(--h4y-r-sm);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  transition: border-color .15s, box-shadow .15s;
}
.h4y-page .form-control.input-lg,
.h4y-page .input-lg,
.sim-modal .form-control.input-lg { height: 48px; padding: 12px 16px; font-size: 16px; border-radius: var(--h4y-r-sm); }
.h4y-page textarea.form-control,
.h4y-page textarea.form-control.input-lg,
.sim-modal textarea.form-control,
.sim-modal textarea.form-control.input-lg { height: auto; padding: 12px 16px; line-height: 1.5; }
.h4y-page .form-control::placeholder,
.sim-modal .form-control::placeholder { color: #8a919e; opacity: 1; }
.h4y-page .form-control:focus,
.sim-modal .form-control:focus {
  border-color: #d8c53a;
  box-shadow: 0 0 0 3px rgba(243, 226, 72, .45);
  outline: 0;
}
.h4y-page .has-error .form-control,
.h4y-page .form-control.ng-invalid.submitted { border-color: #d92d20; }
.h4y-page .has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(217, 45, 32, .18); }
.h4y-page .control-label,
.sim-modal .control-label {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--h4y-text);
}
.h4y-page .asteriskField { margin-left: 2px; color: #d92d20; }
.h4y-page .help-block,
.h4y-page .custom_error { font-size: 13px; }
/* icons inside the large inputs sit centred in the 48px box */
.h4y-page .has-feedback .input-lg + .form-control-feedback,
.h4y-page .has-feedback .input-lg ~ .form-control-feedback { height: 48px; line-height: 48px; color: #98a2b3; }
.h4y-page .form-control-feedback { color: #98a2b3; }

/* file drop zone (post / modify / work pages) */
.h4y-page #dz-drop-zone {
  padding: 16px !important;
  color: var(--h4y-muted);
  background: var(--h4y-surface);
  border: 1.5px dashed #d0d5dd !important;
  border-radius: var(--h4y-r-md) !important;
}
.h4y-page #dz-drop-zone p { margin: 0 0 8px; }
.h4y-page #dz-click-here {
  border: 1px solid #d0d5dd !important;
  border-radius: var(--h4y-r-sm) !important;
  background: #fff;
  font-weight: 600;
}

/* inline error box ("Please fill up the highlighted information above.") */
.h4y-page .bg-error-full {
  padding: 12px 16px;
  font-weight: 600;
  color: #b42318;
  background: #fef3f2;
  border: 1px solid #fecdca;
  border-radius: var(--h4y-r-sm);
}

/* --------------------------------------------------------------------------
   15. Data lists (browse, dashboards, inbox, feedback): the homepage table.
   Desktop: uppercase 12px column labels, hairline rows, hover tint, no
   zebra. Mobile: light cards with an 84px label column.
   -------------------------------------------------------------------------- */
.h4y-page .r-big-wrap::before,
.h4y-page .r-big-wrap::after,
.h4y-page .r-d-inner::before,
.h4y-page .r-d-inner::after { content: none; }
@media (min-width: 768px) {
  .h4y-page .r-big-wrap {
    display: flex;
    align-items: flex-end;
    margin: 0 !important;
    padding: 12px 0 !important;
    font-size: 12px !important;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--h4y-muted) !important;
    border-bottom: 1px solid var(--h4y-line);
  }
  .h4y-page .r-d-inner {
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 14px 0 !important;
    font-size: 15px !important;
    line-height: 1.45;
    background: #fff !important;
    border-bottom: 1px solid #eef0f3;
    box-shadow: none !important;
    transition: background-color .15s;
  }
  .h4y-page .r-d-inner:hover { background: #f9fafb !important; }
  .h4y-page .r-big-wrap > div,
  .h4y-page .r-d-inner > div { float: none; overflow: visible !important; padding: 0 12px; }
}
@media (max-width: 767px) {
  .h4y-page .r-d-inner {
    display: grid;
    gap: 8px;
    width: auto;
    margin: 0 0 12px !important;
    padding: 16px !important;
    line-height: 1.4;
    background: #fff !important;
    border: 1px solid var(--h4y-line);
    border-radius: var(--h4y-r-md);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
  }
  .h4y-page .r-d-inner > div {
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: baseline;
    column-gap: 12px;
    float: none;
    width: auto;
    padding: 0 !important;
    overflow: visible !important;
    text-align: left !important;
  }
  .h4y-page .r-small-header,
  .h4y-page .r-small-data { float: none; width: auto; margin: 0; padding: 0 !important; }
  .h4y-page .r-small-header { font-size: 13px; font-weight: 600; line-height: 20px; color: var(--h4y-muted); }
  .h4y-page .r-small-data { font-size: 15px; line-height: 20px; color: var(--h4y-ink); overflow-wrap: anywhere; }
}

/* pagination: 36px rounded pills */
.h4y-page .pagination { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 16px 0 8px; }
.h4y-page .pagination > li { display: block; }
.h4y-page .pagination > li > a,
.h4y-page .pagination > li > span {
  float: none;
  display: block;
  min-width: 36px;
  height: 36px;
  margin: 0;
  padding: 0 12px;
  line-height: 34px;
  text-align: center;
  color: var(--h4y-text);
  border: 1px solid var(--h4y-line);
  border-radius: var(--h4y-r-sm) !important;
}
.h4y-page .pagination > li > a:hover { background: #f9fafb; }
.h4y-page .pagination > .active > a,
.h4y-page .pagination > .active > a:hover { color: #fff; background: #286090; border-color: #286090; }
.h4y-page .pagination-text,
.h4y-page .pagination-text-no-color { margin-top: 0 !important; font-size: 13px !important; color: var(--h4y-muted); }

/* --------------------------------------------------------------------------
   16. Tabs (Angular Material md-tabs on the dashboard): calmer labels, a
   brand-blue ink bar, one hairline under the tab row.
   -------------------------------------------------------------------------- */
.h4y-page md-tabs.md-border-bottom md-tabs-wrapper { border-bottom: 1px solid var(--h4y-line); }
.h4y-page md-tabs .md-tab {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--h4y-muted);
}
.h4y-page md-tabs .md-tab.md-active { color: #286090 !important; }
.h4y-page md-tabs md-ink-bar { height: 3px; color: #286090; background: #286090 !important; }

/* --------------------------------------------------------------------------
   17. Messages (Django messages under the nav): a floating card instead of a
   full-width bar with a 15px dark frame.
   -------------------------------------------------------------------------- */
.top-msg-div {
  top: calc(var(--h4y-nav) + 12px) !important;
  left: var(--h4y-gutter) !important;
  right: var(--h4y-gutter) !important;
  width: auto !important;
  max-width: 560px;
  margin: 0 auto !important;
  padding: 16px 24px !important;
  color: var(--h4y-text) !important;
  background: #fff !important;
  border: 1px solid var(--h4y-line) !important;
  border-radius: var(--h4y-r-md) !important;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .18) !important;
}
.top-msg-div .top-msg-div-close { text-align: right; }
.top-msg-div .top-msg-position { margin-top: -8px; font-size: 16px; line-height: 1.5; }
.top-msg-div .btn { min-width: 120px; margin: 12px 0 0 !important; border-radius: var(--h4y-r-sm); font-weight: 600; }
.top-msg-div .btn-warning { color: var(--h4y-ink); background: var(--h4y-yellow); border-color: var(--h4y-yellow); }

/* --------------------------------------------------------------------------
   18. Modals: the site's custom modal (post homework, assign to H4Y) and the
   security warning. Radius 18, the header colour kept, 40px buttons.
   -------------------------------------------------------------------------- */
.sim-modal-content {
  overflow: hidden;
  border-radius: var(--h4y-r-lg);
  box-shadow: 0 24px 48px rgba(16, 24, 40, .25);
}
.sim-modal-header { padding: 0 16px 0 24px; min-height: 56px; line-height: 56px !important; }
.sim-modal-header .sim-mh { padding: 0; }
.sim-modal-header .sim-close { line-height: 56px; padding: 0 8px; }
.sim-modal-body { padding: 16px 24px 24px !important; }
.hw-security-box {
  overflow: hidden;
  border-radius: var(--h4y-r-lg);
  box-shadow: 0 24px 48px rgba(16, 24, 40, .25) !important;
}
.hw-security-header { padding: 14px 24px !important; }
.hw-security-close { right: 16px !important; top: 14px !important; }
.hw-security-body { padding: 16px 24px !important; }
.hw-security-footer { padding: 16px 24px !important; border-top-color: var(--h4y-line) !important; }
.hw-security-btn {
  min-width: 120px;
  height: 40px;
  padding: 0 20px !important;
  font-size: 14px !important;
  border-radius: var(--h4y-r-sm);
}

/* --------------------------------------------------------------------------
   19. Sign in / sign up / password cards: the pattern background stays, the
   blue glow becomes the one card style.
   -------------------------------------------------------------------------- */
.h4y-page .login-wrap {
  padding: 32px !important;
  border: 1px solid var(--h4y-line);
  border-radius: var(--h4y-r-lg) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 32px rgba(16, 24, 40, .10) !important;
}
.h4y-page .login-outer-wrap { margin: 24px auto !important; }
.h4y-page .login-wrap .row + .row { margin-top: 12px !important; }
.h4y-page .login-wrap .form-group { margin-bottom: 0; }
.h4y-page .login-top-line { margin-top: 24px; border-top-color: var(--h4y-line); }
@media (max-width: 767px) {
  .h4y-page .login-wrap { padding: 24px 16px !important; }
}

/* --------------------------------------------------------------------------
   20. Page tweaks.
   -------------------------------------------------------------------------- */
/* Project pages: the breadcrumb was hidden under the fixed nav; it now sits
   below it, in the content column, and the panels follow 12px under it. */
.h4y-page > .project-breadcrumb {
  margin-top: var(--h4y-nav);
  padding: 16px max(var(--h4y-gutter), calc((100% - var(--h4y-max)) / 2)) 0 !important;
  font-size: 13px !important;
  line-height: 1.5;
  color: var(--h4y-muted) !important;
}
.h4y-page > .project-breadcrumb + .false-ex-nav { display: none; }
.h4y-page > .project-breadcrumb + .false-ex-nav + .container-fluid { padding-top: 12px !important; }
/* bid rows: Message / Assign wrap as a pair, right-aligned, 8px apart */
.h4y-project [class*="cls_dyn_var_pp_"] > .col-xs-12 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.h4y-project [class*="cls_dyn_var_pp_"] > .col-xs-12 > div:first-child { flex-basis: 100%; height: 4px; overflow: hidden; }

/* Browse: title and search on one line inside the blue header */
.h4y-browse .project-browse-header-gap { margin: 0; }
.h4y-browse .project-row-header-dark .row.no-margin-lr { display: flex; flex-wrap: wrap; align-items: center; row-gap: 12px; }
.h4y-browse .project-row-header-dark .row.no-margin-lr::before,
.h4y-browse .project-row-header-dark .row.no-margin-lr::after { content: none; }
.h4y-browse .project-row-header-dark form .col-sm-4 { padding-left: 8px !important; }
@media (max-width: 767px) {
  .h4y-browse .project-row-header-dark .row.no-margin-lr > [class*="col-"] { flex: 1 1 100%; }
  .h4y-browse .project-row-header-dark form .col-sm-8 { flex: 1 1 0; }
  .h4y-browse .project-row-header-dark form .col-sm-4 { flex: 0 0 auto; }
}

/* Payment pages (deposit/assign, rush, success, cancel: all #project-bid): the
   panel is the column itself; 24px sides like the others. Keyed on the id so
   the (immutable on prod) deposit/ templates need no change. The Stripe
   (checkout.js) and PayPal buttons are left exactly as rendered. */
.h4y-page #project-bid .col-sm-12.project-border { padding-left: 24px; padding-right: 24px; }
.h4y-page #project-bid .col-sm-12.project-border > .project-row-header { margin-left: -24px !important; margin-right: -24px !important; }
.h4y-page [style*="#fff8d6"] {           /* new-student offer box (inline styles; project + payment pages) */
  padding: 16px !important;
  margin-bottom: 16px !important;
  border: 1px solid #eadb5a !important;
  border-radius: var(--h4y-r-md) !important;
}
@media (max-width: 767px) {
  .h4y-page #project-bid .col-sm-12.project-border { padding-left: 16px; padding-right: 16px; }
  .h4y-page #project-bid .col-sm-12.project-border > .project-row-header { margin-left: -16px !important; margin-right: -16px !important; }
}
/* bidders panel: the empty-state line gets the panel's padding */
.h4y-project .project-row-header ~ .row > .col-xs-12.txt-black { padding: 16px 8px 24px !important; }
/* the hired tutor's bid: a 2px brand-blue outline card instead of a 5px dark frame */
.h4y-page .assigned-container {
  margin: 8px 0;
  padding: 12px 12px 12px 0;
  border: 2px solid #286090;
  border-radius: var(--h4y-r-md);
  background: #f5f9fc;
}
/* success box (5px dark frame) -> the neutral info box */
.h4y-page .bg-success-full {
  padding: 16px;
  font-size: 16px;
  border: 1px solid var(--h4y-line);
  border-radius: var(--h4y-r-md);
  background: var(--h4y-surface);
}
/* popovers (Assign to H4Y help): radius 14 and the elevated shadow */
.popover {
  border: 1px solid var(--h4y-line);
  border-radius: var(--h4y-r-md);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
}
/* avatars: no hard black ring */
.h4y-page .img-h-48,
.h4y-page .img-h-50 { border-color: var(--h4y-line); }

/* Profile / withdraw sidebar: the stacked blue buttons get 8px between them */
.h4y-account .btn-block + .btn-block,
.h4y-account .btn-primary.cm-width-full { margin-top: 8px; }

/* Static pages (help, terms, privacy, how it works, contact): readable side
   nav (the inactive links were #c0d0d7 on white) and body text at 15/1.6. */
.h4y-static .page-static-outer-wrap,
.h4y-static .page-outer-wrap { margin: 24px 0 0; }
.h4y-static .page-nav a {
  display: inline-block;
  margin: 0 0 2px -12px;
  padding: 6px 12px;
  font-size: 15px;
  line-height: 20px;
  color: var(--h4y-muted);
  border-radius: var(--h4y-r-sm);
  transition: background-color .15s, color .15s;
}
.h4y-static .page-nav a:hover { color: var(--h4y-ink); background: #f2f4f7; }
.h4y-static .page-nav a.active { color: #286090; font-weight: 700; background: #eef4f9; }
.h4y-static .page-sub-heading-text { margin-top: 24px; font-size: 15px; line-height: 1.6; color: var(--h4y-text); }
.h4y-static .page-sub-heading-text h2 { margin: 32px 0 8px; font-size: 17px; line-height: 1.35; color: var(--h4y-ink); }
.h4y-static .page-sub-heading-text p { margin: 0 0 12px; }
.h4y-static .page-top-line { display: none; }   /* a stray 30% hairline under the text */
@media (max-width: 767px) {
  .h4y-static .page-nav { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--h4y-line); }
  .h4y-static .page-nav a { margin-left: 0; }
}

/* Subject landing pages (/homework-help/<slug>/): the hero started under the
   fixed nav and its headings inherited the site's white body text, so the H1
   and the two section titles were invisible. Same content, visible, on the
   page grid, with the card system. */
.h4y-subject .subject-hero,
.h4y-subject .subject-stats,
.h4y-subject > .container-fluid,
.h4y-subject .faq-section { color: var(--h4y-text); }
.h4y-subject .subject-hero { padding: calc(var(--h4y-nav) + 24px) var(--h4y-gutter) var(--h4y-section); border-bottom-color: var(--h4y-line); }
.h4y-subject .subject-hero nav { margin-bottom: 16px !important; }
.h4y-subject .subject-hero h1 {
  max-width: 820px;
  margin: 0 auto 12px;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.2;
  color: var(--h4y-ink);
  text-wrap: balance;
}
.h4y-subject .subject-hero p { font-size: 17px; line-height: 1.5; color: var(--h4y-text); }
.h4y-subject .subject-stats { padding: 24px var(--h4y-gutter); border-bottom-color: var(--h4y-line); }
.h4y-subject .subject-stats .stat { margin: 8px 24px; }
.h4y-subject .subject-stats .stat-label { color: var(--h4y-muted); }
.h4y-subject > .container-fluid { padding: var(--h4y-section) var(--h4y-gutter) !important; background: #fff; }  /* body is 100vh tall: without this the html #fafafa showed through */
.h4y-subject .faq-section { padding: var(--h4y-section) 0; border-top: 1px solid var(--h4y-line); }
.h4y-subject .faq-section > .container-fluid { max-width: calc(var(--h4y-max) + 2 * var(--h4y-gutter)); margin: 0 auto; padding: 0 var(--h4y-gutter) !important; }
.h4y-subject .section-title { margin-bottom: 24px; font-size: 22px; font-weight: 700; color: var(--h4y-ink); border-bottom: 0; padding-bottom: 0; }
.h4y-subject .project-card,
.h4y-subject .faq-item {
  padding: 16px 20px;
  border-color: var(--h4y-line);
  border-radius: var(--h4y-r-md);
  box-shadow: var(--h4y-shadow);
}
.h4y-subject .project-card { min-height: 96px; }
.h4y-subject .project-card h3 a { color: var(--h4y-ink); }
.h4y-subject .project-card .project-meta { color: var(--h4y-muted); }
.h4y-subject .col-md-4 > div[style] {      /* sidebar boxes (inline styles) */
  padding: 24px !important;
  border-color: var(--h4y-line) !important;
  border-radius: var(--h4y-r-lg) !important;
  box-shadow: var(--h4y-shadow);
}
.h4y-subject .col-md-4 > div[style] h2 { color: var(--h4y-ink); }
.h4y-subject .col-md-4 a[href^="/homework-help/"] {   /* subject chips */
  margin: 0 6px 8px 0 !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: #f2f4f7 !important;
}
.h4y-subject .col-md-4 a[href^="/homework-help/"]:hover { background: #e4e7ec !important; }
.h4y-subject .col-md-4 a[href^="/homework-help/"].active { color: #fff !important; background: #286090 !important; }
.h4y-subject div[style*="#337ab7"] { padding: var(--h4y-section) var(--h4y-gutter) !important; }
@media (max-width: 991px) {
  .h4y-subject .col-md-4 { margin-top: 32px; }
}

/* Date picker dropdown (bootstrap-datepicker): the card radius and shadow; its
   own colours are kept. */
.datepicker.dropdown-menu {
  padding: 8px;
  border: 1px solid var(--h4y-line);
  border-radius: var(--h4y-r-md);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
}
.datepicker.dropdown-menu table { border-radius: var(--h4y-r-sm); overflow: hidden; }
.datepicker.dropdown-menu td.day,
.datepicker.dropdown-menu span { border-radius: 8px; }

/* Selects that carry an addon icon (book / $ on the post form and the post
   modal): the icon replaces the native chevron, so they no longer overlap. */
.h4y-page .form-group:has(> .form-control-feedback) select.form-control,
.sim-modal .form-group:has(> .form-control-feedback) select.form-control,
.h4y-page .has-feedback select.form-control,
.sim-modal .has-feedback select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 48px;
}

/* Stripe checkout.js button on narrow screens: its label wraps instead of
   being clipped ("...Credit/Debit Cards (Stripe)"). Markup and text untouched. */
@media (max-width: 767px) {
  .h4y-page #project-bid .stripe-button-el { max-width: 100%; height: auto !important; }
  .h4y-page #project-bid .stripe-button-el span {
    height: auto !important;
    min-height: 30px;
    padding: 6px 12px !important;
    line-height: 18px !important;
    white-space: normal !important;
  }
}

/* Footer bottom row: "Join us on" and "We accept" on one line at the top,
   their icons in neat rows underneath (the fixed 102/130px columns wrapped
   the card logos and pushed "We accept" up). */
footer.footer-container-fluid > .row:last-child > div { align-items: flex-start; }
footer.footer-container-fluid .ft-div-width-social,
footer.footer-container-fluid .div-width-we-accept {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: auto;
}
footer.footer-container-fluid .div-width-we-accept { justify-content: flex-end; }
footer.footer-container-fluid .ft-div-width-social > p,
footer.footer-container-fluid .div-width-we-accept > p {
  flex: 0 0 100%;
  margin: 0 0 4px !important;
  font-size: 13px;
  line-height: 20px;
  text-align: left;
}
footer.footer-container-fluid .div-width-we-accept > p { text-align: right; }
footer.footer-container-fluid .ft-div-width-social a { display: block; line-height: 0; }
footer.footer-container-fluid .ft-div-width-social .margin-left-5,
footer.footer-container-fluid .div-width-we-accept .margin-left-5 { margin-left: 0; }
/* the two footer columns share the row equally, so they stay side by side on phones */
footer.footer-container-fluid > .row:last-child > div > .pull-left,
footer.footer-container-fluid > .row:last-child > div > .div-width-we-accept { flex: 1 1 0; min-width: 0; }
@media (max-width: 480px) {
  footer.footer-container-fluid .ft-div-width-social,
  footer.footer-container-fluid .div-width-we-accept { gap: 6px; }
}