/* ============================================================================
   SUFFOLK INSTITUTE — custom.css
   ========================================================================== */

:root {
  /* --- Layout --- */
  --siah-site-width:    1400px;                  /* overall content width */
  --siah-side-pad:      clamp(16px, 3vw, 40px);  /* responsive edge padding */
  --siah-sidebar-width: 330px;
  --siah-gutter:        clamp(28px, 3vw, 48px);
  --siah-radius:        14px;
  --siah-radius-sm:     8px;
  --siah-logo-height:   84px;                    /* logo size in header */

  /* --- Type --- */
  --siah-menu-size:     0.95rem;                 /* main menu item size */
  --siah-body-size:     1rem;                    /* readable body text */

  /* --- Heading sizes (T4 Admin > Typography) --- */
  --h1-font-size: clamp(1.85rem, 2.4vw, 2.35rem); /* T4 Admin: H1 — restrained, elegant */
  --h2-font-size: clamp(1.45rem, 1.8vw, 1.7rem);  /* T4 Admin: H2 */
  --h3-font-size: clamp(1.2rem, 1.4vw, 1.35rem);  /* T4 Admin: H3 */
  --h4-font-size: 1.1rem;   /* T4 Admin: H4 */
  --h5-font-size: 1rem;     /* T4 Admin: H5 */
  --h6-font-size: 0.9rem;   /* T4 Admin: H6 */

  /* --- Derived tokens (built from the template palette — never hardcode colour) --- */
  --siah-accent:       var(--body-link-color, #c99130);
  --siah-accent-hover: var(--body-link-hover-color, #d6be95);
  --siah-ink:          var(--body-text-color, #212529);
  --siah-surface:      var(--body-bg-color, #ffffff);
  --siah-panel:        color-mix(in srgb, var(--siah-accent) 4%, var(--siah-surface));
  --siah-hairline:     color-mix(in srgb, var(--siah-ink) 12%, transparent);
  --siah-rule:         color-mix(in srgb, var(--siah-accent) 38%, transparent);
  --siah-muted:        color-mix(in srgb, var(--siah-ink) 58%, transparent);
  --siah-shadow:       0 2px 10px color-mix(in srgb, #000 4%, transparent);
  --siah-shadow-lift:  0 14px 34px color-mix(in srgb, var(--siah-accent) 10%, color-mix(in srgb, #000 8%, transparent));
  --siah-ease:         600ms cubic-bezier(.22,.61,.36,1);   /* refined, deliberate, unhurried */
}

/* ============================================================================
   WIDTH + RHYTHM
   ========================================================================== */

.t4-wrapper { overflow-x: clip; }

.t4-section-inner.container,
#t4-header .container,
.t4-footer .container,
.t4-footnav .container {
  width: 100%;
  max-width: var(--siah-site-width);
  padding-left: var(--siah-side-pad);
  padding-right: var(--siah-side-pad);
}

#t4-main-content .t4-section-inner.container {
  padding-top: clamp(1.75rem, 3vw, 2.75rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

/* Use a flex row so the content panel and sidebar TOPS line up exactly */
#t4-main-content .t4-row {
  --bs-gutter-x: var(--siah-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;        /* equal-height columns -> aligned tops */
}
#t4-main-content .component,
#t4-main-content .right { min-width: 0; }

body, p, li { font-size: var(--siah-body-size); }
p { line-height: 1.75; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font-family, "Cinzel"), serif;
  line-height: 1.25;
  color: var(--siah-ink);
}
h1 { font-size: var(--h1-font-size); }
h2 { font-size: var(--h2-font-size); }
h3 { font-size: var(--h3-font-size); }
h4 { font-size: var(--h4-font-size); }
h5 { font-size: var(--h5-font-size); }
h6 { font-size: var(--h6-font-size); }

/* Body links — clear gold, smooth hover */
#t4-main-content a { transition: color var(--siah-ease); }

/* ============================================================================
   HEADER — single-line, properly styled menu
   ========================================================================== */

#t4-header .t4-section-inner {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.header-block-2 .header-wrap {
  display: flex;
  align-items: center;          /* vertically centre logo + menu */
  flex-wrap: nowrap;
  gap: clamp(0.75rem, 2vw, 2rem);
  min-height: calc(var(--siah-logo-height) + 28px);
  position: relative;
  /* Align header EDGES to the content columns. The content panel sits 15px in
     from the row edge (Bootstrap --bs-gutter-x/2) and the sidebar CARD sits a
     further amount in. We inset the header-wrap so the LOGO lines up with the
     content panel's left edge and the MENU lines up with the sidebar's right
     edge. (Verified: left delta 0, right delta 0 at 1400px container.) */
  padding-left: 15px;
  padding-right: 15px;
}
/* Pull the menu's right edge in to meet the sidebar card's right edge.
   The site uses a right sidebar (col-md-3, fixed 330px) on its content pages;
   the sidebar card sits ~43px inside the row's right padding edge, so we inset
   the nav by the same amount. Verified: right delta 0 at the 1400px container.
   Below lg the menu collapses to the hamburger so this only applies on desktop. */
.header-block-2 .t4-navbar { padding-right: 43px; }

/* LOGO — the container must SHRINK-WRAP the image. The template leaves this
   container ~450px wide with z-index:100, so its empty right-hand strip sits
   ON TOP of the menu and steals clicks. We force it to width:max-content and
   drop the z-index so it can never overlap / intercept nav clicks. */
.header-block-2 .navbar-brand.logo-image {
  margin: 0; padding: 0;
  flex: 0 0 auto !important;
  display: inline-flex; align-items: center;
  width: max-content !important;   /* shrink to the logo, NOT the template's ~450px */
  max-width: 290px !important;
  min-width: 0;
  z-index: 1 !important;           /* below the nav, never over it */
  position: relative;
}
.header-block-2 .navbar-brand.logo-image > a {
  display: inline-flex; align-items: center; line-height: 0;
}
.navbar-brand .logo-img {
  display: block; width: auto; height: auto;
  max-height: var(--siah-logo-height); max-width: 290px;
}

/* Nav takes remaining width; items on ONE right-aligned line, vertically centred */
.header-block-2 .t4-navbar {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: flex-end;
  min-width: 0;
  position: relative;
  z-index: 2;                    /* nav sits ABOVE the logo box */
}
.header-block-2 .t4-navbar .navbar { padding: 0; margin: 0; width: 100%; display: flex; align-items: center; justify-content: flex-end; }
.header-block-2 .t4-megamenu.navbar-collapse { flex-basis: auto; align-items: center; }
.t4-navbar .navbar-nav {
  flex-direction: row;
  flex-wrap: nowrap;            /* never wrap to a second line */
  justify-content: flex-end;
  align-items: center;
  gap: 0;                        /* even spacing comes from link padding only */
  margin: 0;
}

/* Styled text links: uppercase serif, gold underline grows on hover/active.
   NOTE: selectors are scoped to .t4-palette-blue .t4-megamenu .navbar-nav so they
   beat the template's built-in palette rules (which force white on hover/active). */
.header-block .menu-item-title {
  font-family: var(--heading-font-family, "Cinzel"), serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: var(--siah-menu-size);
  font-weight: 500;
  white-space: nowrap;
}

/* base link colour (default state) */
.t4-palette-blue .t4-megamenu .navbar-nav > li > .nav-link,
.t4-navbar .navbar-nav > li > .nav-link {
  position: relative;
  padding: 0.55rem 0.7rem;
  color: var(--siah-ink);
  text-decoration: none;
  background: transparent;
  transition: color var(--siah-ease);
}

/* The last menu item must end flush with the content's right edge so the menu's
   right edge lines up with the sidebar's right edge (the trailing link padding
   would otherwise push it ~11px too far right). */
.t4-navbar .navbar-nav > li:last-child > .nav-link { padding-right: 0; }
.t4-navbar .navbar-nav > li:last-child > .nav-link::after { right: 0; }

/* HOVER / FOCUS / ACTIVE / CURRENT -> gold (override template white) */
.t4-palette-blue .t4-megamenu .navbar-nav > li > .nav-link:hover,
.t4-palette-blue .t4-megamenu .navbar-nav > li > .nav-link:focus,
.t4-palette-blue .t4-megamenu .navbar-nav > li > a:hover,
.t4-palette-blue .t4-megamenu .navbar-nav > li > a:focus,
.t4-palette-blue .t4-megamenu .navbar-nav > li.active > .nav-link,
.t4-palette-blue .t4-megamenu .navbar-nav > li.active > a,
.t4-palette-blue .t4-megamenu .navbar-nav > li.current > .nav-link,
.t4-palette-blue .t4-megamenu .navbar-nav > li.show > .nav-link,
.t4-navbar .navbar-nav > li > .nav-link:hover,
.t4-navbar .navbar-nav > li.active > .nav-link,
.t4-navbar .navbar-nav > li.current > .nav-link {
  color: var(--siah-accent) !important;   /* needed to beat template white */
  background: transparent;
}

/* gold underline indicator — pointer-events:none so it NEVER blocks clicks */
.t4-navbar .navbar-nav > li > .nav-link::after {
  content: "";
  position: absolute;
  left: 0.7rem; right: 0.7rem; bottom: 0.3rem;
  height: 2px; border-radius: 2px;
  background: var(--siah-accent);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--siah-ease);
  pointer-events: none;          /* <-- fixes the broken HOME / nav clicks */
}
.t4-navbar .navbar-nav > li > .nav-link:hover::after,
.t4-navbar .navbar-nav > li > .nav-link:focus::after,
.t4-navbar .navbar-nav > li.active > .nav-link::after,
.t4-navbar .navbar-nav > li.current > .nav-link::after { transform: scaleX(1); }

.t4-navbar .dropdown-toggle .item-caret { margin-left: 0.25rem; }
.dropdown-menu {
  border-radius: var(--siah-radius-sm);
  border-color: var(--siah-hairline);
  box-shadow: var(--siah-shadow);
  padding: 0.4rem;
  margin-top: 0.4rem;
}
.dropdown-item { border-radius: 6px; padding: 0.5rem 0.85rem; transition: background-color var(--siah-ease), color var(--siah-ease); }
.dropdown-item:hover, .dropdown-item:focus {
  background: color-mix(in srgb, var(--siah-accent) 12%, transparent);
  color: var(--siah-accent);
}

/* Safety net only on awkward mid widths: allow horizontal scroll, never wrap/overlap */
@media (min-width: 992px) and (max-width: 1130px) {
  .t4-navbar .nav-link { padding-left: 0.5rem; padding-right: 0.5rem; }
  .header-block .menu-item-title { font-size: 0.86rem; }
}

/* ============================================================================
   MAIN CONTENT PANEL (SRS soft panel) — full height so sidebar top aligns
   ========================================================================== */

#t4-main-content .component.col-md {
  display: flex;
  flex-direction: column;
}
#t4-main-content .component.col-md > .com-content-category-blog,
#t4-main-content .component.col-md > .com-content-article,
#t4-main-content .component.col-md > .item-page,
#t4-main-content .component.col-md > .com-contact,
#t4-main-content .component.col-md > .blog {
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
  border: 1px solid var(--siah-hairline);
  border-radius: var(--siah-radius);
  background: var(--siah-surface);
  box-shadow: var(--siah-shadow);
}

/* Section / page title with thin rule */
.com-content-category-blog > .page-header,
.com-content-article > .page-header,
.item-page > .page-header,
.com-contact > .page-header {
  margin: 0 0 1.8rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--siah-rule);
}
/* The PAGE intro title (e.g. "Membership", "Publications") is the page's main
   heading. Joomla outputs it as <h2 itemprop="headline"> inside .page-header, so
   it only inherited the small H2 size and looked lost. Promote it to the big H1
   scale so it reads as the proper introduction to the page. */
.com-content-category-blog > .page-header > h1,
.com-content-category-blog > .page-header > h2,
.com-content-article > .page-header > h1,
.com-content-article > .page-header > h2,
.item-page > .page-header > h1,
.item-page > .page-header > h2,
.com-contact > .page-header > h1,
.com-contact > .page-header > h2 {
  margin: 0;
  font-size: var(--h1-font-size);
  line-height: 1.2;
  font-weight: 600;
}

/* ============================================================================
   BLOG / NEWS CARDS — focused, elegant
   ========================================================================== */

.com-content-category-blog.blog { max-width: none; }
.com-content-category-blog__items, .blog-items, .items-leading { display: block; }

.com-content-category-blog__item.blog-item,
.blog .items-leading .blog-item,
.blog .blog-items .blog-item { margin: 0 0 1.4rem; padding: 0; }
.com-content-category-blog__item.blog-item:last-child,
.blog .blog-items .blog-item:last-child { margin-bottom: 0; }

/* Single card wrapper; inner .item-content reset to avoid doubling */
.blog-item-content {
  position: relative;
  padding: 1.8rem 2rem;
  border: 1px solid color-mix(in srgb, var(--siah-ink) 10%, transparent);
  border-radius: var(--siah-radius);
  background: var(--siah-surface);
  box-shadow: var(--siah-shadow);            /* present at rest = bolder card */
  overflow: hidden;
  transition: transform var(--siah-ease), box-shadow var(--siah-ease),
              border-color var(--siah-ease), background-color var(--siah-ease);
}
/* bold accent bar down the left, always visible, grows on hover */
.blog-item-content::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--siah-accent), color-mix(in srgb, var(--siah-accent) 55%, transparent));
  transform: scaleY(0.55); transform-origin: top;
  transition: transform var(--siah-ease), width var(--siah-ease);
  pointer-events: none;
}
/* smooth gold rule wipes across the top on hover */
.blog-item-content::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--siah-accent), color-mix(in srgb, var(--siah-accent) 35%, transparent));
  transform: scaleX(0); transform-origin: left;
  transition: transform 520ms cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.blog-item-content:hover,
.blog-item:focus-within .blog-item-content {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--siah-accent) 30%, var(--siah-hairline));
  background: color-mix(in srgb, var(--siah-accent) 2%, var(--siah-surface));
  box-shadow: var(--siah-shadow-lift);
}
.blog-item-content:hover::before,
.blog-item:focus-within .blog-item-content::before { transform: scaleY(1); width: 4px; }
.blog-item-content:hover::after,
.blog-item:focus-within .blog-item-content::after { transform: scaleX(1); }
.blog-item-content > .item-content,
.com-content-category-blog__item .item-content,
.blog-item .system-unpublished {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}

.blog-item .page-header {
  margin: 0 0 0.9rem;
  padding: 0 0 0.7rem;
  border: 0; border-bottom: 1px solid var(--siah-hairline);
  background: transparent;
}
.blog-item .page-header h2,
.blog-item .page-header h3 {
  margin: 0;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.blog-item .page-header a { color: var(--siah-ink); text-decoration: none; transition: color var(--siah-ease); }
.blog-item .page-header a:hover,
.blog-item .page-header a:focus { color: var(--siah-accent); }

.blog-item .article-aside,
.blog-item .article-info { margin: 0 0 0.5rem; padding: 0; color: var(--siah-muted); font-size: 0.92rem; }
.blog-item .article-aside:empty { display: none; }

.blog-item .item-intro { margin: 0; padding: 0; }
.blog-item .item-intro p { margin-bottom: 0.85rem; }
.blog-item .item-intro > :last-child,
.blog-item-content > :last-child { margin-bottom: 0; }

/* PDF / file links as subtle pills with hover fill */
.blog-item .item-intro a[href$=".pdf"],
.blog-item .item-intro a[href*="pdf_download_area"],
.blog-item .wf_file {
  display: inline-flex; align-items: center; gap: 0.45em;
  margin-top: 0.3rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--siah-rule);
  border-radius: 999px;
  color: var(--siah-accent);
  font-weight: 600; font-size: 0.95rem; text-decoration: none;
  transition: background-color var(--siah-ease), color var(--siah-ease), border-color var(--siah-ease);
}
.blog-item .item-intro a[href$=".pdf"]::before,
.blog-item .item-intro a[href*="pdf_download_area"]::before,
.blog-item .wf_file::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f019"; }
.blog-item .item-intro a[href$=".pdf"]:hover,
.blog-item .item-intro a[href*="pdf_download_area"]:hover,
.blog-item .wf_file:hover { background: var(--siah-accent); color: #fff; border-color: var(--siah-accent); }

/* ============================================================================
   SIDEBAR — aligned top, soft panels
   ========================================================================== */

#t4-main-content .right { display: flex; flex-direction: column; }
#t4-main-content .right .moduletable,
#t4-main-content aside .moduletable {
  margin: 0 0 1.4rem;
  padding: 1.4rem;
  border: 1px solid var(--siah-hairline);
  border-radius: var(--siah-radius);
  background: var(--siah-surface);
  box-shadow: var(--siah-shadow);
}
#t4-main-content .right .moduletable:first-child { margin-top: 0; }  /* top aligns with content panel */
#t4-main-content .right .moduletable > h3,
#t4-main-content aside .moduletable > h3 {
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--siah-rule);
  font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em;
}
#t4-main-content .right .custom img,
#t4-main-content aside .custom img {
  display: block; max-width: 100%; height: auto;
  margin-bottom: 0.75rem; border-radius: var(--siah-radius-sm);
  transition: transform var(--siah-ease), box-shadow var(--siah-ease);
}
#t4-main-content .right .custom a:hover img,
#t4-main-content aside .custom a:hover img { transform: scale(1.02); box-shadow: var(--siah-shadow); }
#t4-main-content .right hr, #t4-main-content aside hr { margin: 1.1rem 0; border: 0; border-top: 1px solid var(--siah-hairline); }

.mod-articlescategory, .mod-list { padding-left: 0; list-style: none; margin: 0; }
.mod-articlescategory li, .mod-list li { padding: 0.7rem 0; border-bottom: 1px solid var(--siah-hairline); }
.mod-articlescategory li:last-child, .mod-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.mod-articles-category-title { font-weight: 600; text-decoration: none; transition: color var(--siah-ease); }
.mod-articles-category-title:hover { color: var(--siah-accent); }
.mod-articles-category-date { display: block; margin-top: 0.2rem; color: var(--siah-muted); font-size: 0.85rem; }

/* ============================================================================
   FORMS  (sub-page styling)
   ========================================================================== */

.com-contact, .contact, .registration, .profile-edit,
.login, .remind, .reset { max-width: 100%; }

form, .form-validate, .com-contact__form, .contact-form { accent-color: var(--siah-accent); }
fieldset, form fieldset {
  margin-bottom: 1.5rem; padding: 1.5rem;
  border: 1px solid var(--siah-hairline); border-radius: var(--siah-radius);
  background: var(--siah-panel);
}
legend {
  float: none; width: auto; margin-bottom: 1rem; padding: 0;
  font-family: var(--heading-font-family, "Cinzel"), serif; font-size: 1.3rem; font-weight: 700;
}
.control-group, .form-group, .mb-3 { margin-bottom: 1.1rem; }
.control-label, .form-label, form label { margin-bottom: 0.4rem; font-weight: 600; display: inline-block; }

.form-control, .form-select, .inputbox,
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="password"], input[type="search"], input[type="number"], input[type="date"],
select, textarea {
  width: 100%; padding: 0.65rem 0.9rem;
  border: 1px solid var(--siah-hairline); border-radius: var(--siah-radius-sm);
  background-color: var(--siah-surface); color: var(--siah-ink);
  font-size: var(--siah-body-size);
  transition: border-color var(--siah-ease), box-shadow var(--siah-ease);
}
textarea, textarea.form-control, textarea.inputbox { min-height: 12rem; resize: vertical; }
.form-control:focus, .form-select:focus, .inputbox:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="tel"]:focus,
input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="date"]:focus,
select:focus, textarea:focus {
  border-color: var(--siah-accent);
  box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--siah-accent) 22%, transparent);
  outline: 0;
}
.form-check, .controls .checkbox, .controls .radio { display: flex; gap: 0.55rem; align-items: flex-start; }
.form-check-input, input[type="checkbox"], input[type="radio"] { flex: 0 0 auto; margin-top: 0.3em; }

/* ----------------------------------------------------------------------------
   RSForm! Pro  (Membership form) — the site's real form component.
   Classes: .rsform-block / .formControlLabel / .formControls /
   .rsform-input-box.form-control / .rsform-select-box.form-select /
   .rsform-submit-button.btn / .formRequired / .formValidation
   ---------------------------------------------------------------------------- */
#userForm,
.formContainer .rsform,
form[id^="userForm"] {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid var(--siah-hairline);
  border-radius: var(--siah-radius);
  background: var(--siah-surface);
  box-shadow: var(--siah-shadow);                    /* quiet, not shouty */
}
/* RSForm builds its own .formContainer > .row > .col-md-6 grid — work WITH it,
   don't impose another grid (that left a blank half-column). */
#userForm > h2 {
  margin: 0 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--siah-rule);
}
#userForm .formContainer .row { row-gap: 0; }

.rsform-block { margin-bottom: 1.2rem; }
.rsform-block .formControlLabel,
.rsform-block .form-label,
#userForm label {
  display: block; margin-bottom: 0.4rem;
  font-weight: 600; letter-spacing: 0.01em; font-size: 0.95rem;
  color: color-mix(in srgb, var(--siah-ink) 88%, transparent);
}
.formRequired { color: var(--siah-accent); margin-left: 0.15rem; }

.rsform-input-box.form-control,
.rsform-select-box.form-select,
#userForm .form-control,
#userForm .form-select {
  width: 100%; padding: 0.72rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--siah-ink) 16%, transparent);
  border-radius: var(--siah-radius-sm);
  background-color: var(--siah-surface); color: var(--siah-ink);
  font-size: var(--siah-body-size); line-height: 1.4;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.rsform-input-box.form-control:hover,
.rsform-select-box.form-select:hover,
#userForm .form-control:hover,
#userForm .form-select:hover {
  border-color: color-mix(in srgb, var(--siah-ink) 30%, transparent);
}
/* Effective but subtle focus: input lifts to white with a soft, thin gold ring */
.rsform-input-box.form-control:focus,
.rsform-select-box.form-select:focus,
#userForm .form-control:focus,
#userForm .form-select:focus {
  border-color: var(--siah-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--siah-accent) 16%, transparent);
  outline: 0;
}

/* Free-text declaration block: soft panel so it reads as a distinct note */
.rsform-block-text.rsform-type-freetext {
  margin-bottom: 1.25rem; padding: 1rem 1.2rem;
  border: 1px solid var(--siah-hairline); border-radius: var(--siah-radius-sm);
  background: color-mix(in srgb, var(--siah-ink) 2.5%, var(--siah-surface));
}
.rsform-block-text.rsform-type-freetext p:last-child { margin-bottom: 0; }
.rsform-block-text.rsform-type-freetext h2,
.rsform-block-text.rsform-type-freetext h3 { margin-top: 0; }

/* Checkbox / radio rows */
.rsform-block .form-check { display: flex; gap: 0.55rem; align-items: flex-start; padding-left: 0; }
.rsform-block .rsfp-fieldset { border: 0; margin: 0; padding: 0; }
.rsform-check, .rsform-block input[type="checkbox"], .rsform-block input[type="radio"] {
  flex: 0 0 auto; margin-top: 0.3em; accent-color: var(--siah-accent);
}
.rsform-block .form-check-label { font-weight: 500; margin: 0; }

/* Payment total — considered, but not loud */
.rsform-block-total .formControls { display: flex; align-items: baseline; gap: 0.5rem; }
.rsform_payment_total {
  font-family: var(--heading-font-family, "Cinzel"), serif;
  font-size: 1.35rem; font-weight: 700; color: var(--siah-accent);
}

/* Submit button — clean solid gold, quiet confident hover (no gradient/sheen) */
.rsform-submit-button.btn,
#userForm .rsform-submit-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85rem 2.2rem; min-width: 190px;
  border: 1px solid var(--siah-accent); border-radius: var(--siah-radius-sm);
  background: var(--siah-accent);
  color: #fff; font-size: 1rem;
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--siah-accent) 22%, transparent);
  transition: transform var(--siah-ease), box-shadow var(--siah-ease), background-color var(--siah-ease);
}
.rsform-submit-button.btn:hover,
.rsform-submit-button.btn:focus {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--siah-accent) 88%, #000);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--siah-accent) 30%, transparent);
  color: #fff;
}
.rsform-submit-button.btn:active { transform: translateY(0); }

/* Validation messaging */
.formNoError { display: none; }                 /* hidden until RSForm activates it */
.formValidation .formError,
.rsform-error { color: #b4232a; font-size: 0.9rem; margin-top: 0.25rem; display: block; }
.rsform-input-box.formError, .rsform-select-box.formError,
.form-control.formError { border-color: #b4232a; }

/* Article body niceties on sub-pages */
.item-page .item-image img,
.com-content-article .item-image img { border-radius: var(--siah-radius-sm); }
.item-page blockquote, .com-content-article blockquote {
  margin: 1.5rem 0; padding: 0.75rem 1.25rem;
  border-left: 4px solid var(--siah-accent);
  background: var(--siah-panel); border-radius: 0 var(--siah-radius-sm) var(--siah-radius-sm) 0;
  font-style: italic;
}
.item-page table, .com-content-article table { border-radius: var(--siah-radius-sm); overflow: hidden; }

/* ============================================================================
   BUTTONS
   ========================================================================== */

.btn, button, input[type="submit"], input[type="button"], input[type="reset"] {
  border-radius: var(--siah-radius-sm); font-weight: 600;
  transition: transform var(--siah-ease), box-shadow var(--siah-ease),
              background-color var(--siah-ease), border-color var(--siah-ease), color var(--siah-ease);
}
.btn-primary, .btn-success, button[type="submit"], input[type="submit"] {
  border: 1px solid var(--siah-accent); background-color: var(--siah-accent); color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-success:hover, .btn-success:focus,
button[type="submit"]:hover, button[type="submit"]:focus,
input[type="submit"]:hover, input[type="submit"]:focus {
  background-color: var(--siah-surface); color: var(--siah-accent); border-color: var(--siah-accent);
  transform: translateY(-2px); box-shadow: var(--siah-shadow);
}
.btn-outline-primary, .btn-secondary { border: 1px solid var(--siah-accent); background: transparent; color: var(--siah-accent); }
.btn-outline-primary:hover, .btn-secondary:hover { background: var(--siah-accent); color: #fff; transform: translateY(-2px); }

/* ============================================================================
   PAGINATION
   ========================================================================== */

.pagination-wrap { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.pagination { gap: 0.35rem; flex-wrap: wrap; }
.page-link {
  border-color: var(--siah-hairline); border-radius: var(--siah-radius-sm);
  color: var(--siah-accent);
  transition: background-color var(--siah-ease), color var(--siah-ease), border-color var(--siah-ease), transform var(--siah-ease);
}
.page-link:hover, .page-link:focus, .page-item.active .page-link {
  border-color: var(--siah-accent); background-color: var(--siah-accent); color: #fff; transform: translateY(-1px);
}
.counter { margin-top: 0.75rem; color: var(--siah-muted); }

/* ============================================================================
   FOOTER
   ========================================================================== */

.t4-footer .container, .t4-footnav .container { padding-top: 2.5rem; padding-bottom: 2.5rem; }

/* ============================================================================
   DESKTOP COLUMN BALANCE + RESPONSIVE
   ========================================================================== */

@media (min-width: 992px) {
  #t4-main-content .right.col-md-3,
  #t4-main-content .right {
    flex: 0 0 var(--siah-sidebar-width);
    width: var(--siah-sidebar-width);
  }
}

@media (max-width: 991.98px) {
  /* Below nav breakpoint the T4 offcanvas hamburger takes over */
  .header-block-2 .header-wrap { min-height: auto; gap: 1rem; justify-content: space-between; }
  .navbar-brand .logo-img { max-height: 64px; }
  .header-block-2 .t4-navbar { flex: 0 0 auto; }

  #t4-main-content .t4-row { display: block; }
  #t4-main-content .right { margin-top: 1.75rem; }
}

@media (max-width: 575.98px) {
  .blog-item-content { padding: 1.15rem 1.15rem; }
  #t4-main-content .component.col-md > .com-content-category-blog,
  #t4-main-content .component.col-md > .com-content-article,
  #t4-main-content .component.col-md > .item-page,
  #t4-main-content .component.col-md > .com-contact,
  #t4-main-content .component.col-md > .blog { padding: 1.15rem; }
}

/* ============================================================================
   Additional before live
   ========================================================================== */

.t4-navbar button {
    display: none !important;
}
.t4-palette-blue .nav li.active li.active > a {
  color: #C99130;
}
.t4-palette-blue .nav li.active li a:hover, .t4-palette-blue .nav li.active li a:focus, .t4-palette-blue .nav li.active li a:active {
  color: #C99130;
}
.t4-palette-blue .t4-megamenu .navbar-nav > li a:hover, .t4-palette-blue .t4-megamenu .navbar-nav > li a:focus, .t4-palette-blue .t4-megamenu .navbar-nav > li a:active, .t4-palette-blue .t4-megamenu .navbar-nav > li .nav-link:hover, .t4-palette-blue .t4-megamenu .navbar-nav > li .nav-link:focus, .t4-palette-blue .t4-megamenu .navbar-nav > li .nav-link:active {
  color: #C99130;
}
.container-iframe {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}