/* Accessibility, form and content fixes on top of the ported theme (see refinements.xml). */

/* ---- Skip link and visually hidden text ---- */
.fr-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.fr-skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 3000;
  padding: 12px 20px; border-radius: 0 0 6px 6px;
  background: #2b2118; color: #fff; font-weight: 700; text-decoration: none;
}
.fr-skip-link:focus { top: 0; color: #fff; }
#fr-main:focus, #content:focus { outline: none; }

/* ---- Contrast ---- */
/* Login: white on #fe8700 was 2.4:1; the menu-bar orange is 5.2:1 */
a.login-button.w-button { background-color: #c2410c; }
a.login-button.w-button:hover, a.login-button.w-button:focus { background-color: #9a3412; }
/* Tagline: #84716b on #e0d8c1 was 3.2:1 */
.tag-line { color: #5c4a3f; }
/* Footer grey #999 on cream was 2.4:1 */
.footer-element-info, .footer-blog-item-text { color: #6b5e50; }

/* ---- Tap targets ---- */
a.link-linkedin, a.link-facebook {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
}

/* ---- Headings demoted for the outline keep their old look ---- */
h2.element-header-exp {
  font-family: Exo, system-ui, sans-serif; font-size: 28px; font-weight: 700;
  line-height: 31px; letter-spacing: .01em; text-transform: uppercase;
  color: #c2410c; text-align: center;
  margin: 32px 0 24px; padding: 0 0 12px;
  border-bottom: 2px solid rgba(194, 65, 12, .18);
}
h2.footer-element-header {
  font-family: Exo, system-ui, sans-serif; font-size: 15px; font-weight: 700;
  line-height: 18px; letter-spacing: .02em; text-transform: uppercase;
  color: #2b2118; margin: 0 0 16px; padding: 0;
}
h3.footer-blog-item-heading {
  font-family: Exo, system-ui, sans-serif; font-size: 15px; font-weight: 600;
  line-height: 21px; text-transform: none; letter-spacing: normal;
  color: #2b2118; margin: 0 0 7.5px;
}

/* ---- Contact form (easyform) ----
   The form and its field wrapper both carry Bootstrap's .row (negative side margins),
   so the form ran past the content column and off the left edge on phones. */
#content .easyformForm,
#content .easyformForm > .row {
  display: block; width: auto; max-width: 640px;
  margin: 0; padding: 0;
}
#content .easyformForm > .row > * {
  width: auto; max-width: none; flex: none; padding: 0;
}
#content .easyformForm .field {
  display: block; position: static; height: auto; min-height: 0;
  margin: 0 0 20px; padding: 0; text-align: left; float: none;
}
#content .easyformForm label,
#content .easyformForm .form-label {
  display: block; position: static; left: auto; width: auto;
  margin: 0 0 6px; text-align: left;
  font-size: 15px; font-weight: 600; line-height: 1.4; color: #2b2118;
}
#content .easyformForm .form-control {
  display: block; box-sizing: border-box; width: 100%; max-width: 100%;
  height: auto; min-height: 44px; margin: 0; padding: 10px 12px;
  font-size: 16px; line-height: 1.4; color: #2b2118;
  background: #fff; border: 1px solid #cfc6b4; border-radius: 6px; box-shadow: none;
}
#content .easyformForm textarea.form-control { min-height: 140px; resize: vertical; }
#content .easyformForm .form-control:focus {
  border-color: #c2410c; outline: 2px solid #c2410c; outline-offset: 1px; box-shadow: none;
}
#content .easyformForm .form-text { margin-top: 6px; font-size: 14px; color: #6b5e50; }
#content .easyformForm .formControls { margin: 8px 0 0; padding: 0; background: none; border: 0; }
#content .easyformForm .formControls .btn,
#content .easyformForm .formControls button[type="submit"] {
  display: inline-block; min-height: 44px; padding: 12px 32px;
  font-size: 16px; font-weight: 700; line-height: 1.2; color: #fff;
  background: #c2410c; border: 0; border-radius: 999px; box-shadow: none;
  cursor: pointer;
}
#content .easyformForm .formControls .btn:hover,
#content .easyformForm .formControls .btn:focus { background: #9a3412; color: #fff; }
#content .easyformForm .formControls .btn:focus-visible { outline: 2px solid #2b2118; outline-offset: 2px; }
.fr-required-legend { margin: 0 0 20px; font-size: 14px; color: #6b5e50; }
.fr-required-legend .required {
  display: inline-block; width: 7px; height: 7px; margin: 0 4px 1px 0;
  border-radius: 50%; background: #c8102e; vertical-align: middle;
}
.fr-required-legend .required::after { content: none; }

/* ---- Summary listings (Plone 5 tileItem markup, see the listing_summary override) ----
   Testimonial cards are a wrapping flex row on the Plone 5 site: name and button on
   their own lines, photo beside the quote. */
body.template-summary_view #content-core article.tileItem { flex-wrap: wrap; }

/* ---- Desktop width (2026-10-08 critique) ----
   The theme's containers are a fixed 1117px from 992px up, so 992-1140px windows
   scrolled sideways and content sat flush against the edge. */
@media (min-width: 992px) {
  .gl-container,
  .nav-wrapper.gl-container,
  .container-footer.gl-container {
    width: auto;
    max-width: 1117px;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }
}

/* ---- Header contrast ----
   Login: the theme's three-class rule kept white on #fe8700 (2.4:1) over the fix above.
   Active section tab: white on #e36d0b was 3.3:1. */
a.login-button.gl-link-login-button.gl-authenticated-drop,
a.login-button.gl-link-memberarea { background-color: #c2410c; }
a.login-button.gl-link-login-button.gl-authenticated-drop:hover,
a.login-button.gl-link-login-button.gl-authenticated-drop:focus,
a.login-button.gl-link-memberarea:hover,
a.login-button.gl-link-memberarea:focus { background-color: #9a3412; }
.gl-menu-link.active,
.gl-menu-link.active.w--current { background-color: #7c2d12; }

/* ---- Testimonials landing page (rapido block testimonial-cover) ---- */
body.section-testimonials #content-core .fr-tm img {
  width: auto; height: auto; max-width: 100%;
  border: 0; border-radius: 0; margin: 0; position: static; transform: none;
}
.fr-tm { margin: 8px 0 48px; color: #4a3f33; text-align: left; }

/* Featured quote */
.fr-tm-featured {
  position: relative; margin: 0 0 56px; padding: 40px 48px 36px;
  background: #fff; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(43, 33, 24, .06), 0 8px 24px rgba(43, 33, 24, .06);
}
.fr-tm-featured-quote { margin: 0 0 28px; padding: 0; border: 0; }
.fr-tm-featured-quote p {
  margin: 0; max-width: 46ch;
  font-family: Exo, 'Open Sans', system-ui, sans-serif;
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; line-height: 1.35;
  letter-spacing: -.01em; color: #2b2118; text-wrap: pretty;
}
.fr-tm-featured-quote p::before { content: "\201C"; margin-left: -.45em; color: #c2410c; }
.fr-tm-featured-quote p::after { content: "\201D"; color: #c2410c; }
.fr-tm-featured-link {
  display: inline-block; margin-top: 24px; border: 0;
  font-weight: 700; color: #9a3412; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.fr-tm-featured-link:hover { color: #7c2d12; text-decoration-thickness: 2px; }
/* The theme gives #content-core links a grey bottom border */
body.section-testimonials #content-core a.fr-tm-featured-link { border: 0; }

/* Person line (featured and cards) */
.fr-tm-person { display: flex; align-items: center; gap: 12px; margin: 0; text-align: left; }
body.section-testimonials #content-core .fr-tm img.fr-tm-avatar {
  flex: none; width: 40px; height: 40px; object-fit: cover;
  border-radius: 50%; background: #efe9db;
}
body.section-testimonials #content-core .fr-tm .fr-tm-person--featured img.fr-tm-avatar {
  width: 64px; height: 64px;
}
.fr-tm-person-text { display: flex; flex-direction: column; min-width: 0; }
.fr-tm-name { font-weight: 700; color: #2b2118; font-size: 15px; line-height: 1.35; }
.fr-tm-role, .fr-tm-org { font-size: 13.5px; line-height: 1.4; color: #6b5b4a; }
.fr-tm-person--featured .fr-tm-name { font-size: 17px; }
.fr-tm-person--featured .fr-tm-org { font-weight: 600; color: #4a3f33; }

/* Programme cards */
.fr-tm-heading {
  margin: 0 0 20px; font-family: Exo, 'Open Sans', system-ui, sans-serif;
  font-size: 22px; font-weight: 700; color: #2b2118; letter-spacing: -.01em;
}
.fr-tm-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 24px; margin: 0; padding: 0; list-style: none;
}
.fr-tm-card {
  position: relative; display: flex; flex-direction: column; margin: 0; overflow: hidden;
  background: #fff; border: 1px solid rgba(43, 33, 24, .08); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(43, 33, 24, .06);
  transition: box-shadow 220ms cubic-bezier(.22, .61, .36, 1),
              border-color 220ms cubic-bezier(.22, .61, .36, 1);
}
.fr-tm-card:hover { border-color: rgba(194, 65, 12, .3); box-shadow: 0 2px 4px rgba(43, 33, 24, .06), 0 10px 24px rgba(43, 33, 24, .08); }
.fr-tm-card-media { height: 132px; overflow: hidden; background: #f0ece2; }
body.section-testimonials #content-core .fr-tm .fr-tm-card-media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.fr-tm-card-body { display: flex; flex-direction: column; flex: 1; gap: 16px; padding: 20px 24px 22px; }
.fr-tm-card-title {
  margin: 0; font-family: Exo, 'Open Sans', system-ui, sans-serif;
  font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
}
body.section-testimonials #content-core a.fr-tm-card-link { color: #2b2118; text-decoration: none; border: 0; }
/* The whole card is the link's hit area */
.fr-tm-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 16px; }
/* The card draws the focus ring, so the link itself doesn't */
html body .fr-tm a.fr-tm-card-link:focus,
html body .fr-tm a.fr-tm-card-link:focus-visible { outline: none; }
.fr-tm-card:focus-within { outline: 3px solid #2b2118; outline-offset: 3px; }
.fr-tm-card-quote { margin: 0; padding: 0; border: 0; }
.fr-tm-card-quote p {
  margin: 0; font-size: 15px; line-height: 1.6; color: #4a3f33; text-wrap: pretty;
}
.fr-tm-card-quote p::before { content: "\201C"; }
.fr-tm-card-quote p::after { content: "\201D"; }
.fr-tm-card-cta {
  margin-top: auto; padding-top: 4px;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #9a3412;
}
.fr-tm-card:hover .fr-tm-card-cta { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 600px) {
  .fr-tm-featured { margin-bottom: 40px; padding: 28px 22px 24px; }
  .fr-tm-featured-quote p { font-size: 20px; }
  .fr-tm-featured-quote p::before { margin-left: 0; }
  .fr-tm-grid { grid-template-columns: 1fr; gap: 16px; }
  .fr-tm-card-media { height: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-tm-card { transition: none; }
}

/* ---- Programme story pages (/testimonials/<collection>, summary listing) ----
   The photo link is inline, so the theme's height:100% never resolved and the round
   avatars rendered as 81x86 ovals (plus a stray 5px padding and a link underline
   that drew a hairline across the photo). */
html body.section-testimonials #content-core .tileImage { padding: 0 !important; }
body.section-testimonials #content-core .tileImage a { display: block; width: 100%; height: 100%; border: 0; }
body.section-testimonials #content-core .tileImage img { display: block; background: #efe9db; }