/* Home pages: the pieces added in the UI refresh (hero buttons, plans, ATES rows, donation card), in the look of the account pages.
   It is loaded after styles.css, so where it repeats a selector it wins. */

/* ---------- header button and hero link ---------- */
/* The plans button is the geovisor button's twin (same classes), so both have the same height, type and icon size. */
.home-plans-link p { font-size: 14px; font-weight: 500; color: #163156; margin-top: 13px; }
.home-plans-link button { box-shadow: none; line-height: 13px; background: #F9F9F9; }
.home-plans-link button:hover, .home-plans-link button:focus { box-shadow: none; background: rgba(158, 158, 158, .2); }
.home-plans-link button p { margin: 0; line-height: 1; }
@media (max-width: 900px) { .home-plans-link { display: none; } }

#ates-hero .home-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 14px; }
#ates-hero .home-hero-actions .ui-btn { min-width: 190px; text-decoration: none; }
#ates-hero .home-hero-actions .ui-btn .material-icons { font-size: 20px; }
/* Not a third button: a pill under the two actions, so the plans are seen without competing with them. */
#ates-hero .home-hero-plans { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(22, 49, 86, .82); color: #fff; font: 500 13px/1.2 Roboto, Helvetica, Arial, sans-serif; letter-spacing: .02em; text-decoration: none; }
#ates-hero .home-hero-plans .material-icons { font-size: 18px; }
#ates-hero .home-hero-plans:hover { background: #163156; color: #fff; text-decoration: none; }
#ates-hero .home-hero-plans:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, .6); }
@media (max-width: 600px) { #ates-hero .home-hero-actions .ui-btn { flex: 1 1 100%; } }

/* ---------- ATES rows: the image and the three classes share the same top and centre ---------- */
.home-media-row { align-items: center; }
.home-media-row .mdl-cell { margin-top: 8px; margin-bottom: 8px; }
.home-media-row img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 1px 2px rgba(22, 49, 86, .06), 0 6px 20px rgba(22, 49, 86, .08); }
.home-media-row h4 { margin: 0 0 4px; }
.home-media-row p { text-align: left; margin: 0 0 18px; }
.home-media-row p:last-child { margin-bottom: 0; }

/* ---------- plans ---------- */
.home-plans { background: #f3f5f8; }
.home-plans h2 { margin-top: 0; }
.home-plans .home-plans__intro { max-width: 760px; text-align: left; color: #5d6b7c; }
.home-plans__cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 24px 0 16px; }
.home-plan { display: flex; flex-direction: column; align-items: flex-start; margin: 0; }
.home-plan { border-top: 3px solid #c3ccd7; }
.home-plan--pro { border-top-color: #3098CF; }
.home-plan--guide { border-top-color: #163156; }
.home-plan .ui-badge { margin-bottom: 10px; }
.home-plan .ui-badge .material-icons { font-size: 15px; }
.home-plan__name { margin: 0 0 6px; font: 600 18px/1.3 Montserrat, Helvetica, Arial, sans-serif; color: #163156; }
.home-plan .home-plan__price { margin: 0 0 8px; font: 600 22px/1.2 Montserrat, Helvetica, Arial, sans-serif; color: #1f7cb2; text-align: left; min-height: 48px; }
.home-plan__trial { margin: 0 0 8px; font-size: 14px; color: #1f7cb2; }
.home-plan__price small { display: block; font: 400 13px/1.4 Roboto, Helvetica, Arial, sans-serif; color: #5d6b7c; }
.home-plan .home-plan__tagline { flex: 1; margin: 0 0 18px; color: #1b2430; font-size: 14px; line-height: 1.5; text-align: left; }
.home-plans__table-card { margin: 0; }
.home-plans__scroll { overflow-x: auto; }
.home-plans__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.home-plans__table th, .home-plans__table td { padding: 9px 10px; border-bottom: 1px solid #dfe5ec; text-align: center; }
.home-plans__table thead th { font: 600 12px/1.2 Montserrat, Helvetica, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #5d6b7c; }
.home-plans__table tbody th { text-align: left; font-weight: 400; color: #1b2430; }
.home-plans__table tbody tr:last-child th, .home-plans__table tbody tr:last-child td { border-bottom: 0; }
.home-plans__yes { color: #1e6b36; font-weight: 700; font-size: 16px; }
.home-plans__no { color: #c3ccd7; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* ---------- donation card ---------- */
#donate { width: 232px; right: 16px; bottom: 16px; transform: none; padding: 14px 16px 14px; font: 400 13px/1.45 Roboto, Helvetica, Arial, sans-serif; color: #1b2430; text-align: left; background: #fff; border: 1px solid #dfe5ec; border-radius: 4px; box-shadow: 0 1px 2px rgba(22, 49, 86, .06), 0 6px 20px rgba(22, 49, 86, .12); }
#donate > h5 { margin: 0 24px 4px 0; font: 600 14px/1.3 Montserrat, Helvetica, Arial, sans-serif; color: #163156; }
#donate form { margin-top: 10px !important; }
#donate input[type="image"] { margin-right: 0 !important; }
#donate .home-donate__close { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 3px; background: transparent; color: #5d6b7c; font-size: 18px; line-height: 1; cursor: pointer; }
#donate .home-donate__close:hover { background: #f3f5f8; }
#donate .home-donate__close:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(48, 152, 207, .35); }
@media (max-width: 600px) { #donate { width: 210px; right: 8px; bottom: 8px; padding: 10px 12px; font-size: 12px; } }

/* The header is fixed: the sections the links jump to stop below it instead of under it. */
.ates-content section[id], .ates-content footer[id] { scroll-margin-top: 64px; }

/* The plans section on the navy of the site's blue sections, with the white cards on it. */
.home-plans { background: #163156; }
.home-plans h2, .home-plans .home-plans__intro { color: #fff; }
.home-plans .home-plan--guide { border-top-color: #2f5f9e; }

/* ---------- hero on small screens ---------- */
/* The hero has a fixed height of 570px; on a phone the buttons, the plans pill and the app badges are taller than that and ran
   over the share block below, so the hero grows with its content and the badges sit centred under it. */
@media (max-width: 900px) {
  #ates-hero { height: auto; min-height: 570px; padding-bottom: 32px; box-sizing: border-box; }
  #ates-hero h1 { margin-top: 40px; }
  #ates-hero .floc-app { width: 100%; margin-top: 24px; }
  #ates-hero .floc-app .badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  #ates-hero .floc-app .badges a { display: block; line-height: 0; }
  #ates-hero .floc-app .badges img { margin: 0; height: 30px; width: auto; }
  .wrapper-social { margin: 24px auto; display: flex; justify-content: center; }
}