/* Small additions for the static copy of the Joomla/Gantry site.
   Everything else is the original template CSS, unchanged. */

/* Banner: the original was a one-slide UIkit slideshow, full viewport height, image "cover".
   Same on desktop; on phones show the whole image instead of a tall crop of its middle. */
#custom-slider .g-content { margin: 0; padding: 0; }
.static-banner { position: relative; height: 100vh; min-height: 300px; overflow: hidden; }
.static-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
@media only all and (max-width: 48rem) {
  .static-banner { height: auto; min-height: 0; }
  .static-banner img { position: static; height: auto; }
}

/* Mobile menu (Gantry's own script did this) */
#g-mobilemenu-container ul { list-style: none; margin: 0; padding: 0; }
#g-mobilemenu-container .g-menu-item-container { display: block; padding: 0.938rem 1.25rem; }
#g-offcanvas a, #g-offcanvas .g-menu-item-title { color: #000; }

/* Header: the divider used to separate the menu from the (removed) product search box */
#g-header .g-block:nth-child(2) .g-content { border-right: 0; }
/* On phones the menu lives in the off-canvas panel (as Gantry did), not in the header */
@media only all and (max-width: 48rem) { #g-header .menuborder { display: none; } }

/* Popup image fills its box the same way */
#ingallery-popup-wrap-img-cnt img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Contact page banner: original slideshow was ratio 4.27:1, min-height 300px, image "cover" */
.static-banner.static-banner-strip { height: auto; aspect-ratio: 4.27 / 1; min-height: 300px; }
.static-banner.static-banner-strip img { position: absolute; height: 100%; }

/* Contact form status messages (Convert Forms showed these inline) */
.cf-note { display: none; padding: 12px 16px; margin: 0 0 20px; border-radius: 3px; font-weight: 600; }
.cf-note:target, noscript .cf-note { display: block; }
.cf-note-ok { background: #e8f6ec; color: #1d6b33; }
.cf-note-bad { background: #fdecec; color: #a11; }
.cf-note-warn { display: block; background: #fff6e0; color: #7a5200; }
#cf_1 textarea.cf-input { resize: vertical; }

/* Convert Forms per-form settings (were emitted inline by Joomla on the contact page) */
.convertforms { --color-primary:#4285F4; --color-success:#0F9D58; --color-danger:#d73e31; --color-warning:#F4B400; --color-default:#444; --color-grey:#ccc; }
#cf_1 { --background-color:rgba(255,255,255,1); --border-radius:0px; --control-gap:10px; --label-color:#666666; --label-size:16px; --label-weight:400;
        --input-color:#666666; --input-placeholder-color:#66666670; --input-text-align:left; --input-background-color:#ffffff;
        --input-border-color:#cccccc; --input-border-radius:5px; --input-size:16px; --input-padding:11px 20px; }
#cf_1 .cf-control-group[data-key="1"] { --button-border-radius:5px; --button-padding:11px 15px; --button-color:#ffffff; --button-font-size:14px; --button-background-color:#81736f; }
.cf-field-hp { display:none; position:absolute; left:-9000px; }
/* Button: the archived convertforms.css is an older version without the variable-driven
   button rules, so apply the form's button settings directly */
#cf_1 .cf-btn { display:inline-block; width:auto; border:0; background-color:var(--button-background-color); color:var(--button-color);
                padding:var(--button-padding); border-radius:var(--button-border-radius); font-size:var(--button-font-size); line-height:1.2; }
#cf_1 .cf-btn:hover { opacity:.85; }

/* ---------- Home "thank you" banner, rebuilt from final-banner.jpg (1920x1080) ----------
   The "37" strip is the original artwork (thanks-37.png = crop x236-1214, y305-427 of the
   original, white made transparent) over a full-width CSS black bar; the paragraph is real text.
   Wide screens: everything placed at the original's coordinates, scaled to fit (never cropped).
   Phones: strip and text stack, text wraps normally. */
.thanks { position: relative; background: #fff; }
.thanks-band { position: relative; margin: 0; padding: 0; line-height: 0; font-size: 0; }
.thanks-bar { position: absolute; left: 0; right: 0; top: 25.4098%; height: 68.0328%; background: #000; } /* band rows 32-112 of 122, +1 row each side to hide sub-pixel seams */
.thanks-art { position: relative; display: block; max-width: none; height: auto; }
.thanks-text { margin: 0; text-align: left; color: #000; font-family: 'Figtree', 'Avenir Next', Avenir, 'Open Sans', sans-serif; font-weight: 600; }

@media only all and (min-width: 48.0625rem) {
  .thanks { container-type: size; height: clamp(300px, 56.25vw, 100vh); overflow: hidden; }
  .thanks-box {
    position: absolute; inset: 0;
    --s: min(calc(100cqw / 1920), calc(100cqh / 1080));      /* 1 original px */
    --ox: calc((100cqw - var(--s) * 1920) / 2);              /* centre the 1920x1080 "canvas" */
    --oy: calc((100cqh - var(--s) * 1080) / 2);
  }
  .thanks-band { position: absolute; left: 0; right: 0; top: calc(var(--oy) + var(--s) * 305); height: calc(var(--s) * 122); }
  .thanks-art { position: absolute; top: 0; left: calc(var(--ox) + var(--s) * 236); width: calc(var(--s) * 978); }
  .thanks-text {
    position: absolute; left: calc(var(--ox) + var(--s) * 284); top: calc(var(--oy) + var(--s) * 543);
    font-size: calc(var(--s) * 36.8); line-height: calc(var(--s) * 43); white-space: nowrap;
  }
}
@media only all and (max-width: 48rem) {
  .thanks { padding: 28px 0 4px; }
  .thanks-art { width: 100%; }
  .thanks-text { padding: 22px 16px 0; font-size: 1.3rem; line-height: 1.35; }
  .thanks-br { display: none; }
}