/* firstfund -- assets/css/site.css
   Purpose: The First Fund look on top of Bootstrap 5 - the original Classic ASP site styling (navy and
            green from the logo, Arial, green gradient hero, white bordered cards, accordion questions)
            with the pieces the ASP.NET rebuild needs: page hero breadcrumb, steps, data tables with copy
            buttons, enquiry forms and focus outlines.
            Green text, links and buttons use darker shades of the brand green so they pass WCAG 2.2 AA.
   Version: 2.6  (2026-10-21 16:40:00)
   Changelog (newest first):
     2.6  2026-10-21 16:40:00  Consent tickbox styles removed with the tickbox. Links in the note under the form
                               buttons are underlined.
     2.5  2026-10-21 16:20:00  No vertical scroll bar on tables - table-wrap scrolls sideways only, on narrow screens.
     2.4  2026-10-21 14:30:00  Right-aligned number columns and bold total rows for the pricing cost table.
     2.3  2026-10-21 13:25:00  Carousel pause button styles removed with the button.
     2.2  2026-10-21 11:50:00  Important information box in the footer (footer-disclaimer) and the note under the
                               form buttons (form-note).
     2.1  2026-10-20 16:45:00  Back to the old site look at Simon's request - Arial, the navy to green gradient hero,
                               rounded image with shadow, old nav weights and logo size, white bordered cards
                               (info-card), plain bullets, accordion style questions, old footer. Cookie bar removed.
     2.0  2026-10-20 14:30:00  Rewritten for the ASP.NET shell (layout.ascx).
     1.0  2026-04-12 20:50:00  Initial Classic ASP version from the ThemeForest template. */

:root {
  --ff-navy: #323e51;
  --ff-navy-deep: #1f2b3a;
  --ff-green: #2dab66;          /* brand green - accents, borders and large shapes only */
  --ff-green-btn: #228652;      /* buttons with white text, 4.6:1 */
  --ff-green-text: #1f7a49;     /* green text and links, 5.3:1 on white */
  --ff-text: #293442;
  --ff-muted: #5e6c7a;
  --ff-border: #dbe3eb;
  --ff-bg: #f4f7fa;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ff-text);
  line-height: 1.6;
  background: #fff;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { color: var(--ff-navy); font-weight: 600; }
a { color: var(--ff-green-text); text-decoration: none; }
a:hover { color: var(--ff-navy); }
p a, li a, td a, .faq .ans a { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: 3px solid var(--ff-green); outline-offset: 2px; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--ff-navy); color: #fff; padding: 0.75rem 1rem; }
.skip-link:focus { left: 1rem; top: 1rem; color: #fff; }

/* ---- buttons ---- */
.btn-brand { background: var(--ff-green-btn); color: #fff; border: 1px solid var(--ff-green-btn); font-weight: 600; }
.btn-brand:hover, .btn-brand:focus { background: #1d7444; color: #fff; border-color: #1d7444; }
.btn-outline-brand { color: var(--ff-green-text); border: 1px solid var(--ff-green-text); font-weight: 600; background: #fff; }
.btn-outline-brand:hover { background: var(--ff-green-btn); color: #fff; }

/* ---- header ---- */
.site-header { border-bottom: 1px solid var(--ff-border); background: #fff; position: sticky; top: 0; z-index: 1000; }
.navbar-brand img { height: 63px; width: auto; }
.site-header .navbar-nav .nav-link { color: var(--ff-navy); font-weight: 700; letter-spacing: 0.04em; padding-left: 1rem; padding-right: 1rem; font-size: 0.95rem; white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .site-header .navbar-nav .nav-link { padding-left: 0.5rem; padding-right: 0.5rem; letter-spacing: 0.02em; font-size: 0.9rem; }
  .site-header .navbar-nav .nav-item + .nav-item { margin-left: 0; }
  .navbar-brand img { height: 52px; }
  .site-header .btn-brand { white-space: nowrap; }
}
.site-header .navbar-nav .nav-link.active, .site-header .navbar-nav .nav-link:hover { color: var(--ff-green-text); }
@media (min-width: 1200px) { .site-header .navbar-nav .nav-item + .nav-item { margin-left: 0.35rem; } }
.navbar-toggler { border-color: var(--ff-border); }
.navbar-toggler:focus { box-shadow: none; }

/* ---- home carousel ---- */
.hero { position: relative; background: linear-gradient(120deg, #1f2b3a 0%, #323e51 55%, #2b8b59 100%); color: #fff; }
.hero .carousel-item { padding: 4.5rem 0 5rem; }
.hero-slide { display: flex; flex-wrap: wrap; align-items: center; gap: 2.5rem; }
.hero-slide-text { flex: 1 1 480px; min-width: 0; }
.hero-slide-media { flex: 1 1 420px; min-width: 0; }
.hero-slide-media img { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: 0 20px 45px rgba(0,0,0,0.25); aspect-ratio: 3 / 2; object-fit: cover; }
.hero h1, .hero h2, .hero p { color: #fff; }
.hero .lead { font-size: 1.2rem; opacity: 0.95; }
.hero .kicker { color: #56c486; font-size: 0.85rem; }
.hero-btns { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.hero .carousel-indicators { margin-bottom: 1.25rem; }
.hero .carousel-indicators [data-bs-target] { width: 32px; height: 4px; border: 0; border-radius: 2px; background-color: rgba(255,255,255,0.4); transition: background-color 0.2s ease; }
.hero .carousel-indicators [data-bs-target].active { background-color: #fff; }
.hero .carousel-control-prev, .hero .carousel-control-next { width: 4%; opacity: 0.45; }
.hero .carousel-control-prev:hover, .hero .carousel-control-next:hover { opacity: 0.9; }
.hero-note { padding: 0 0 1.25rem; }
.hero-note .cost-note { color: rgba(255,255,255,0.75); margin: 0; font-size: 0.85rem; }
.hero-note .cost-note a { color: #fff; }

/* ---- inner page hero ---- */
.page-hero { background: #eef4f8; border-bottom: 1px solid var(--ff-border); padding: 3.5rem 0 2.75rem; }
.page-hero .lead { max-width: 860px; color: var(--ff-muted); font-size: 1.05rem; font-weight: 400; }
.hero-photo { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 20px 45px rgba(0,0,0,0.15); aspect-ratio: 3 / 2; object-fit: cover; }
.crumbs { list-style: none; padding: 0; margin: 0 0 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.9rem; color: var(--ff-muted); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; }
.kicker { display: inline-block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ff-green-text); font-weight: 700; margin-bottom: 0.25rem; }

/* ---- sections and cards ---- */
.section { padding: 4rem 0; }
.section-muted { background: var(--ff-bg); }
.section .intro { max-width: 860px; }
.prose { max-width: 860px; }
.intro-card, .info-card, .faq-item, .comparison-card {
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: 10px;
  padding: 1.5rem;
  height: 100%;
}
.info-card h3, .comparison-card h3, .info-card .h3, .comparison-card .h3 { font-size: 1.25rem; }
.info-card > :last-child, .comparison-card > :last-child { margin-bottom: 0; }
.info-card h3 a, .intro-card h2 a { color: var(--ff-navy); text-decoration: none; }
.info-card h3 a:hover { color: var(--ff-green-text); text-decoration: underline; }
.card-stack > .info-card + .info-card { margin-top: 1.5rem; }
.card-stack > .info-card { height: auto; }
ul.tick-list { padding-left: 1.15rem; }
ul.tick-list li { margin-bottom: 0.45rem; }

/* numbered steps */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.steps > li { counter-increment: step; position: relative; padding: 0 0 1.25rem 3.25rem; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--ff-green-btn); color: #fff;
  font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.steps > li h3 { font-size: 1.2rem; margin-bottom: 0.25rem; padding-top: 0.3rem; }

/* tables */
.table-wrap { overflow-x: auto; overflow-y: hidden; }
.data-table { width: 100%; border-collapse: collapse; background: #fff; }
.data-table th, .data-table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--ff-border); vertical-align: top; text-align: left; }
.data-table thead th { color: var(--ff-navy); border-bottom: 2px solid var(--ff-border); }
.data-table tbody th { color: var(--ff-navy); font-weight: 600; }
.table-tools { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }
.data-table .num { text-align: right; white-space: nowrap; }
.data-table tr.total th, .data-table tr.total td { font-weight: 700; color: var(--ff-navy); border-top: 2px solid var(--ff-border); }

.cost-note { font-size: 0.9rem; color: var(--ff-muted); }

/* questions and answers, styled like the old accordion */
.faq details { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; margin-bottom: 0.75rem; overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: 1.1rem 3rem 1.1rem 1.25rem; font-weight: 600; color: #212529; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.35rem; top: 1.35rem; width: 0.6rem; height: 0.6rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.faq details[open] summary { background-color: rgba(32,160,90,0.08); }
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.6rem; }
.faq .ans { padding: 0.75rem 1.25rem 1.25rem; color: #4a4a4a; }

/* call to action band */
.cta-band { padding: 2.5rem 0; background: var(--ff-navy); }
.cta-band h2 { color: #fff; font-size: 1.6rem; margin-bottom: 0.25rem; }
.cta-band p { color: #fff; margin: 0; max-width: 46rem; }
.cta-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }

/* forms */
.enquiry-form { background: #fff; border: 1px solid var(--ff-border); border-radius: 10px; padding: 1.5rem; }
.enquiry-form .opt { color: var(--ff-muted); }
.enquiry-form .is-bad { border-color: #b3261e; box-shadow: 0 0 0 2px rgba(179,38,30,0.2); }
.form-intro, .form-text { color: var(--ff-muted); font-size: 0.95rem; }
.errbox { display: none; background: #fdecea; border: 1px solid #f1b0ab; color: #7a1c15; border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* footer */
.site-footer { background: var(--ff-navy-deep); color: #d3dde6; padding: 3rem 0 1rem; }
.footer-logo { height: 54px; width: auto; filter: brightness(0) invert(1); }
.foot-head { color: #fff; font-size: 1.1rem; font-weight: 600; margin-bottom: 0.75rem; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 0.35rem; }
.footer-links a, .site-footer a { color: #d3dde6; text-decoration: none; }
.footer-links a:hover, .site-footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid #34465a; margin-top: 1.5rem; padding-top: 1rem; }
.footer-bottom .small { color: rgba(255,255,255,0.65); }
.footer-disclaimer { border: 1px solid #3d5168; border-left: 4px solid var(--ff-green); border-radius: 10px; padding: 1.1rem 1.25rem; margin-top: 2rem; color: #e3e9ef; font-size: 0.95rem; }
.footer-disclaimer .foot-head { margin-bottom: 0.5rem; }
.footer-disclaimer p { margin-bottom: 0.6rem; }
.footer-disclaimer a { text-decoration: underline; }
.form-note { margin: 0.75rem 0 0; font-size: 0.9rem; color: var(--ff-muted); }
.form-check-label a, .form-note a { text-decoration: underline; }

@media (max-width: 991.98px) {
  .section { padding: 3rem 0; }
  .hero .carousel-item { padding: 3rem 0 4rem; }
}
@media (max-width: 767.98px) {
  .hero-slide { gap: 1.75rem; }
}
@media (max-width: 575.98px) {
  .hero .carousel-control-prev, .hero .carousel-control-next { display: none; }
  .navbar-brand img { height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-item { transition: none; }
}