/* ==========================================================================
   Aquaventure Maldives - Joomla 6 template
   Visual identity carried over from theme3362 (Bootstrap 3).
   Every value here was measured from the live site's computed styles.
   ========================================================================== */

:root{
  --av-brand:#fa5d07;          /* the real brand colour  */
  --av-brand-2:#d80019;
  --av-ink:#292929;            /* headings, button fill  */
  --av-dark:#1a1a1a;           /* dark bands, footer     */
  --av-body:#777777;           /* body copy              */
  --av-bg:#ededed;             /* page ground            */
  --av-white:#ffffff;
  --av-rule:#dddddd;
  --av-container:1200px;
  --av-font:"Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* ---- base ---------------------------------------------------------- */
body.site{
  margin:0;
  background:var(--av-bg);
  color:var(--av-body);
  font-family:var(--av-font);
  font-size:17px;
  font-weight:300;
  line-height:28px;
  -webkit-font-smoothing:antialiased;
}
/* 15px, flat at every width - the original's Bootstrap 3 container. It
   pairs with the 30px grid gutter below: 1200 - 2*15 = 1170 of content,
   and two columns of 570 with 30 between them. At 20px the content came
   out 1160 wide and every section sat 5px in from where it should.     */
.container{max-width:var(--av-container);width:100%;margin-inline:auto;
  padding-inline:15px;box-sizing:border-box}
/* bootstrap-grid re-declares box-sizing on its own reset; be explicit so
   the horizontal padding never adds to the 100% width on small screens. */
.container,.row,[class*="col-"]{box-sizing:border-box}
.row{max-width:100%}
@media (min-width:1400px){ .container{max-width:var(--av-container)} }

/* ---- typography ----------------------------------------------------
   The identity is the WEIGHT CONTRAST: 700 against 100, both uppercase.
   Sizes use clamp() so the 75px desktop headline degrades on mobile
   instead of overflowing, which the Bootstrap 3 original did badly.     */
h1,h2,h3,h4,h5,h6{
  font-family:var(--av-font);
  color:var(--av-ink);
  text-transform:uppercase;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.4rem,6vw,75px);font-weight:700;line-height:1.04;letter-spacing:-.01em}
h2{font-size:clamp(2rem,5vw,60px);font-weight:100;line-height:1.23}
h3{font-size:clamp(1.4rem,3vw,32px);font-weight:700;line-height:1.2}
h4{font-size:clamp(1.15rem,2.2vw,22px);font-weight:700}
h5,h6{font-size:clamp(1.15rem,2.05vw,26px);font-weight:700;line-height:1.23;letter-spacing:0}
/* Content headings (inside article bodies) follow theme3362's content
   scale, NOT the big uppercase design-title treatment. The migration
   stripped the heading-style-N classes, but the original paired hN with
   style-N, so tag N maps to that size; h3/h6 keep their authored case.
   Scoped to content wrappers so .av-modtitle and section titles are
   unaffected. */
.item_introtext h3,.mod-articles-item-content h3{font-size:clamp(1.8rem,4vw,50px);text-transform:none}
.item_introtext h4,.mod-articles-item-content h4{font-size:clamp(1.6rem,3.4vw,36px)}
.item_introtext h5,.mod-articles-item-content h5{font-size:26px}
.item_introtext h6,.mod-articles-item-content h6{font-size:21px;text-transform:none}
/* a paragraph that is just an image (e.g. the price-list rate tables) is
   centred, not left-aligned. Floated figures (figure.left) are untouched. */
.item_introtext p:has(> img),.mod-articles-item-content p:has(> img),
.av-main p:has(> img){text-align:center}
.item_introtext img,.mod-articles-item-content img,.av-main .item-page img{max-width:100%;height:auto}

p{margin:0;padding:0 0 28px}
a{color:var(--av-brand);text-decoration:none;transition:color .2s ease}
a:hover,a:focus{color:var(--av-ink)}
a:focus-visible{outline:2px solid var(--av-brand);outline-offset:2px}
/* PADI "eLearning:" course links are bold inline links in the article body.
   They read as normal text links - dark + underlined - not brand-orange like
   nav/CTA links, matching the 8080 reference. Scoped to strong>a so the module
   title/category links (not bold) and card buttons are untouched. */
.mod-articles-item-content strong a{color:var(--av-ink);text-decoration:underline}
.mod-articles-item-content strong a:hover,
.mod-articles-item-content strong a:focus{color:var(--av-brand);text-decoration:underline}

/* Reversed-out headings over hero imagery */
.av-hero h1,.av-hero h2,.av-hero p,
.av-dark h1,.av-dark h2,.av-dark h3,.av-dark p,
.av-parallax h1,.av-parallax h2,.av-parallax p{color:var(--av-white)}

/* ---- buttons -------------------------------------------------------
   Square, large, uppercase. Bootstrap 5 defaults are rounded and much
   smaller, so these override rather than extend.                        */
.btn,.readmore .btn,a.btn,button.btn{
  --bs-btn-border-radius:0;
  display:inline-block;
  font-family:var(--av-font);
  font-size:clamp(1.05rem,2.05vw,26px);
  font-weight:700;
  line-height:28px;
  text-transform:uppercase;
  color:var(--av-white);
  background:var(--av-ink);
  border:0;
  border-radius:0;
  padding:21px 38px;
  transition:background .2s ease;
}
.btn:hover,.btn:focus{background:var(--av-brand);color:var(--av-white)}
.btn-primary{background:var(--av-brand)}
.btn-primary:hover{background:var(--av-ink)}

/* ---- navigation ------------------------------------------------------
   The bar is transparent and sits directly over the hero image; it has no
   background of its own. The dark wedge below it belongs to the hero
   (.av-hero::after), not to the nav.                                     */
.av-nav{background:transparent;pointer-events:none}
.av-nav > .container{position:relative;z-index:1;pointer-events:auto}
.av-nav .container{display:flex;align-items:center;gap:20px;min-height:74px;flex-wrap:nowrap}
.av-brand{font-weight:900;text-transform:uppercase;letter-spacing:.02em;
  color:var(--av-white);font-size:1.1rem;flex:0 0 auto;line-height:1.15;max-width:230px}
.av-brand img{max-height:52px;width:auto}
.av-menu{margin-left:auto;min-width:0}
.av-menu ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-end;
  gap:0 20px;margin:0;padding:0}
/* 11 top-level items is a lot; keep them on one row as long as possible */
.av-menu a{color:var(--av-brand);text-transform:uppercase;font-weight:700;
  font-size:.82rem;letter-spacing:.02em;line-height:74px;display:block;white-space:nowrap}
@media (min-width:1200px){ .av-menu a{font-size:.86rem} }
.av-menu a:hover,.av-menu .current>a,.av-menu .active>a{color:var(--av-white)}
.av-burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.av-burger span{display:block;width:26px;height:2px;background:var(--av-brand);margin:5px 0}

/* ---- hero ----------------------------------------------------------
   Full-bleed photography with reversed-out type is the whole design.    */
.av-hero{position:relative;background:var(--av-dark);overflow:hidden}
.av-hero img{width:100%;height:auto;display:block;object-fit:cover}
.av-hero .moduletable{position:relative}

/* ---- bands ---------------------------------------------------------- */
.av-band{padding:64px 0}

/* ---- the feature band ------------------------------------------------
   The site's signature element. It gets no background of its own - like
   every other band it paints through the shared skewed ::before (see
   "section backgrounds are skewed" below); all it declares here is the
   colour and the padding/negative-margin the original measured at.

   Padding and margin are measured from #feature on the live site:
   padding 3% / 12%, margin-bottom -6%. The negative margin pulls the
   following band up so that band paints over this one's lower edge -
   which is why feature must NOT be lifted out of flow order with a
   z-index. The original leaves it at z-index:auto for exactly that
   reason.                                                                */
.av-band.av-feature{
  --av-band-bg:var(--av-brand);
  color:var(--av-white);
  padding-top:3%;
  padding-bottom:12%;
  margin-bottom:-6%;
}
.av-feature h1,.av-feature h2,.av-feature h3,.av-feature h4,
.av-feature h5,.av-feature h6,.av-feature p,.av-feature a,.av-feature li,
.av-feature strong,.av-feature b,.av-feature .item_title,
.av-feature .item_title a,.av-feature .moduletable > h3{color:var(--av-white)}
.av-feature .item_title a:hover{color:var(--av-ink)}
.av-feature .btn{background:var(--av-ink);color:var(--av-white)}
.av-feature .btn:hover{background:var(--av-white);color:var(--av-ink)}
/* the section following the band sits in the negative margin */
.av-band.av-feature + *{position:relative;z-index:2}
@media (max-width:767.98px){
  .av-band.av-feature{padding-bottom:14%;margin-bottom:-8%}
}
/* Band colours are declared as --av-band-bg only, never as a background
   on the element itself: a solid element background is a RECTANGLE, and
   it paints over the skewed shape's own edges, flattening them. The
   original does the same - #content carries no background at all.       */
/* No bottom padding: the trailing 56px under the last row is the article
   list's own margin, exactly as in the original, where this band's
   padding-bottom is 0. Leaving the base 64px on top of it double-counted. */
.av-band.av-content-bottom{--av-band-bg:var(--av-bg);padding-top:8%;padding-bottom:0}
/* content-top band (e.g. "What can we Expect"): same 8% top as the
   original's #content, so its heading clears the orange band above.
   The parallax overlay variant keeps its own spacing.                    */
.av-band.av-content-top:not(.av-overlay){padding-top:8%}
/* Interior pages stack content-top -> (empty) av-main -> content-bottom,
   whose paddings compound into a large blank gap the original never had
   (its content flowed in one column). Trim it back on non-home pages:
   drop content-top's bottom pad, the empty component's row gutter, and
   the gallery band's big top pad when it sits right after an empty main. */
/* Zero content-top's bottom pad ONLY when a content-bottom band follows
   (the info page: tighten the gap before the gallery). When content-top
   is the last band - e.g. About's video - it keeps its 64px bottom so
   the section still breathes above the footer. */
body:not(.is-home) .av-band.av-content-top:not(.av-overlay):has(~ .av-band.av-content-bottom){padding-bottom:0}
body:not(.is-home) .av-main:has(.page-category):not(:has(.page-category *)) .row{--bs-gutter-y:0}
body:not(.is-home) .av-main:has(.page-category):not(:has(.page-category *)) + .av-band.av-content-bottom{padding-top:24px}
.av-dark{color:rgba(255,255,255,.82)}
.av-band.av-dark{--av-band-bg:var(--av-dark)}
/* The content area sits on the page ground, transparent - the original's
   #content/#component are transparent over the grey body, never a white
   card. (Was var(--av-white), which showed as a white slab.)             */
.av-main{padding:56px 0;background:transparent}
/* Category/menu pages whose content is delivered entirely by modules leave
   an EMPTY component here (<section class="page-category"> with no children).
   Collapse it so it doesn't add a blank band between the module sections.  */
.av-main:has(.page-category):not(:has(.page-category *)){padding-top:0;padding-bottom:0}
.av-showcase{background:var(--av-white);padding:34px 0}
.av-subnav{background:var(--av-white);border-bottom:1px solid var(--av-rule)}
.av-breadcrumbs{padding:14px 0;font-size:.9rem}
.av-breadcrumbs .breadcrumb{background:none;padding:0;margin:0}

.av-parallax{background:var(--av-dark);background-attachment:fixed;
  background-size:cover;background-position:center;padding:96px 0;color:var(--av-white)}
@media (hover:none){ .av-parallax{background-attachment:scroll} }

.av-map iframe,.av-map img{display:block;width:100%;border:0}

/* ---- footer --------------------------------------------------------- */
.av-footer{background:var(--av-dark);color:rgba(255,255,255,.7);padding:56px 0 34px}
.av-footer h1,.av-footer h2,.av-footer h3,.av-footer h4{color:var(--av-white)}
.av-footer a{color:rgba(255,255,255,.75)}
.av-footer a:hover{color:var(--av-brand)}
/* footer band: rgb(26,26,26) with 83px/68px vertical padding on the live site */
.av-copyright{background:var(--av-dark);color:rgba(255,255,255,.5);
  padding:83px 0 68px;font-size:.86rem}
/* Footer columns: Contact us / Social Media / PADI mark, then the credit
   line on its own row. Headings are H5 26px/700 uppercase in the original. */
.av-copyright .container{display:flex;flex-wrap:wrap;gap:34px 0;align-items:flex-start}
.av-copyright .moduletable > h3,
.av-copyright .moduletable > h4,
.av-copyright .moduletable > h5{font-family:var(--av-font);font-size:26px;
  font-weight:700;text-transform:uppercase;color:#fff;margin:0 0 25px;line-height:1.2}
.av-copyright .moduletable{flex:0 0 auto}
/* the PADI mark sits far right */
.av-copyright .moduletable:not(:has(.av-iconmenu)){margin-left:auto}
.av-copyright .moduletable img{max-width:130px;height:auto}
/* The PADI logo rides in a mod_articles item padded out with an empty
   paragraph and <br><br> (270px tall). Strip that chrome so the column is
   just the 130px logo, as the original single-image module was. */
.av-copyright .mod-articles-items{margin:0;padding:0;list-style:none}
.av-copyright .mod-articles-item-content p{margin:0}
.av-copyright .mod-articles-item-content br{display:none}
/* credit + legal drop to their own full-width row */
/* One-line colophon: "{sitename} © {year}. {links}", left-aligned, one
   row below the module columns - the original's single .copyright bar,
   not two stacked full-width rows. */
.av-colophon{flex:1 0 100%;order:2;margin:0;display:flex;flex-wrap:wrap;
  gap:2px 12px;align-items:baseline}
.av-colophon .av-credit,.av-colophon .av-legal{margin:0}
/* the two icon menus sit in separate columns, not run together */
.av-copyright .moduletable{margin-bottom:0;flex:0 0 auto}
.av-copyright ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 20px;margin:0;padding:0}
.av-copyright a{color:rgba(255,255,255,.65)}
.av-copyright a:hover{color:var(--av-brand)}

/* ---- modules -------------------------------------------------------- */
.moduletable{margin-bottom:26px}
.moduletable:last-child{margin-bottom:0}
.moduletable > h3{font-size:clamp(1.5rem,3.4vw,38px);font-weight:100;margin-bottom:.7em}

/* ---- content --------------------------------------------------------
   Site content is largely full-width imagery (price lists, course charts)
   authored at desktop widths, so images must scale down unconditionally
   rather than via a narrowly-scoped selector.                             */
img{max-width:100%;height:auto}
.av-main table{display:block;overflow-x:auto;max-width:100%}
.av-main iframe{max-width:100%}
.page-header h1,.page-header h2{margin-bottom:.35em}
.article-info{font-size:.85rem;color:#999;text-transform:uppercase;letter-spacing:.05em}
table{width:100%;border-collapse:collapse}
/* Only the header ROW gets the brand fill. Joomla's article list uses
   <th scope="row"> for titles, so an unscoped `th` rule paints whole
   columns orange and hides the orange links inside them. */
thead th{background:var(--av-brand);color:var(--av-white);text-transform:uppercase;
  font-weight:700;padding:12px 15px;text-align:left}
thead th a{color:var(--av-white);text-decoration:underline}
tbody th[scope="row"]{background:transparent;color:var(--av-ink);
  font-weight:700;padding:11px 15px;text-align:left;
  border-bottom:1px solid var(--av-rule)}
td{padding:11px 15px;border-bottom:1px solid var(--av-rule)}
tbody tr:hover{background:#f5f5f5}

/* ---- responsive ----------------------------------------------------- */
@media (max-width:767.98px){
  .av-nav{margin-bottom:0;pointer-events:auto}
  .av-nav::before{transform:none;top:0;bottom:0;background-image:none}
  .av-burger{display:block;margin-left:0}
  .av-menu{flex:0 0 100%;margin-left:0;max-height:0;overflow:hidden;transition:max-height .3s ease}
  .av-menu.is-open{max-height:75vh;overflow-y:auto;padding-bottom:16px}
  .av-menu ul{flex-direction:column;gap:0}
  .av-menu a{line-height:2.6}
  .av-nav .container{flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
}
@media (max-width:767.98px){
  body.site{font-size:16px;line-height:26px}
  .av-band,.av-main{padding:40px 0}
  .av-parallax{padding:60px 0}
  .btn{padding:15px 24px}
  .av-copyright .container{flex-direction:column;align-items:flex-start}
  .av-credit{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .av-parallax{background-attachment:scroll}
}

/* ---- com_content category layout ------------------------------------
   Class names match theme3362's override so existing site styling
   assumptions (and any custom CSS) keep working.                        */
.page-category .page_header{margin-bottom:.6em}
.page-category .category_title h2{margin-bottom:.5em}
.page-category .subheading-category{display:block}
.category_desc{margin-bottom:34px}
.category_desc img{margin-bottom:18px}

.items-leading > article{margin-bottom:46px}
.items-leading > article:last-child{margin-bottom:0}
.items-row{margin-bottom:10px}

.item_image{margin:0 0 18px}
.item_image img{width:100%;height:auto;display:block}
.item_image figcaption{font-size:.85rem;color:#999;padding-top:7px}

.item_header{margin-bottom:.4em}
.item_title{font-size:clamp(1.3rem,2.6vw,28px);font-weight:700;
  text-transform:uppercase;margin:0}
.item_title a{color:var(--av-ink)}
.item_title a:hover{color:var(--av-brand)}

.item_introtext{margin-bottom:1em}
.item_introtext > *:last-child{margin-bottom:0}

.item_info_dl{display:flex;flex-wrap:wrap;gap:0 18px;margin:0 0 12px;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:#999}
.item_info_dl dt{font-weight:700}
.item_info_dl dd{margin:0 12px 0 0}

.item_readmore{margin:18px 0 0}
.item_readmore .btn{font-size:clamp(.9rem,1.2vw,17px);padding:14px 26px}

.pagination-wrap{margin-top:34px}
.pagination-wrap ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.pagination-wrap a,.pagination-wrap span{display:block;padding:9px 15px;
  background:var(--av-white);border:1px solid var(--av-rule)}
.pagination-wrap a:hover{background:var(--av-brand);color:var(--av-white);border-color:var(--av-brand)}

/* ---- hero -----------------------------------------------------------
   Replaces mod_swiper. The original held a 53% aspect ratio with a 200px
   floor; reproduced here with aspect-ratio so the image never causes a
   layout shift while loading.                                            */
.av-hero-slides{position:relative;background:var(--av-dark);line-height:0}
.av-hero{position:relative;z-index:1}
.av-hero-slide{margin:0;position:relative}
.av-hero-slide img{width:100%;height:auto;display:block;
  aspect-ratio:1920/1018;object-fit:cover;min-height:200px}
.av-hero-slides.is-rotating .av-hero-slide{position:absolute;inset:0;opacity:0;
  transition:opacity .8s ease}
.av-hero-slides.is-rotating .av-hero-slide.is-active{position:relative;opacity:1}

.av-hero-caption{position:absolute;left:0;right:0;bottom:0;line-height:1.2;
  padding:0 0 6%;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0))}
.av-hero-caption h2{color:var(--av-white);font-weight:100;margin:0;
  font-size:clamp(1.6rem,4.4vw,60px);text-transform:uppercase;
  text-shadow:0 2px 18px rgba(0,0,0,.45)}

@media (max-width:767.98px){
  .av-hero-slide img{aspect-ratio:16/10}
  .av-hero-caption{padding-bottom:10%}
}
@media (prefers-reduced-motion:reduce){
  .av-hero-slides.is-rotating .av-hero-slide{transition:none}
}

/* ---- converted third-party modules ----------------------------------
   Parallax bands, Facebook video embeds and folder galleries were all
   third-party modules with no J6 build. Their content now lives in core
   mod_custom; these rules carry the presentation.                       */
.av-parallax{padding:0;position:relative;overflow:hidden}
/* Not background-attachment:fixed. The clip box is skewed for the angled
   band edges, and an element with a transform resolves its own fixed
   background against itself rather than the viewport - so `fixed` was
   inert here and the photo just scrolled with the page at 1:1. The drift
   is driven from index.php instead, which also works on iOS (where fixed
   backgrounds are unsupported outright).                                 */
.av-parallax-bg{min-height:200px;background-size:cover;background-position:center;
  background-attachment:scroll}
@media (hover:none),(max-width:767.98px){
  .av-parallax-bg{min-height:150px}
}

.av-video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.av-video{position:relative;aspect-ratio:16/9;background:#000}
.av-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- photo gallery ---------------------------------------------------
   theme3362's mod_responsivegallery: a large auto-advancing stage over a
   thumbnail strip, with a lightbox. The module ships a plain image grid
   (.av-gallery > figure.av-gal-item); index.php's JS enhances it and adds
   .is-slideshow. The :not(.is-slideshow) rule is the no-JS fallback.     */
.av-gallery:not(.is-slideshow){display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.av-gallery.is-slideshow{display:block}
.av-gallery-stage{position:relative;width:100%;aspect-ratio:1.9/1;
  /* the black padding is the frame - the original framed the image in a
     black wrapper (20px 30px) with a soft shadow, not a hard border. */
  background:#000;padding:20px 30px;box-sizing:border-box;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.9)}
.av-gallery-stage>img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.av-gallery-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.45);color:#fff;font-size:26px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.av-gallery-nav:hover{background:var(--av-brand)}
.av-gallery-nav.prev{left:14px}
.av-gallery-nav.next{right:14px}
.av-gallery-play{position:absolute;right:14px;bottom:14px;z-index:2;
  width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;font-size:15px;
  background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .2s ease}
.av-gallery-play:hover{background:var(--av-brand)}
.av-gallery-nav:focus-visible,.av-gallery-play:focus-visible,.av-gallery-thumb:focus-visible{
  outline:3px solid var(--av-brand);outline-offset:2px}
/* thumbnail strip - 60px thumbs, matching the original's elastislide row */
.av-gallery-thumbs{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 4px}
.av-gallery-thumbs::-webkit-scrollbar{height:6px}
.av-gallery-thumbs::-webkit-scrollbar-thumb{background:rgba(0,0,0,.25);border-radius:3px}
.av-gallery-thumb{flex:0 0 auto;width:60px;height:60px;padding:0;border:0;cursor:pointer;
  overflow:hidden;background:none;opacity:.5;outline:2px solid transparent;
  transition:opacity .2s ease,outline-color .2s ease}
.av-gallery-thumb>img{width:100%;height:100%;object-fit:cover;display:block}
.av-gallery-thumb:hover{opacity:.85}
.av-gallery-thumb.is-active{opacity:1;outline-color:var(--av-brand)}
/* lightbox (fancybox's role) */
.av-gallery-lightbox{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.9);
  display:flex;align-items:center;justify-content:center;padding:4vh 4vw;cursor:zoom-out}
.av-gallery-lightbox>img{max-width:100%;max-height:100%;object-fit:contain}
@media (max-width:767.98px){
  .av-gallery-stage{aspect-ratio:4/3}
  .av-gallery-nav{width:40px;height:40px;font-size:22px}
  .av-gallery-thumb{width:52px;height:52px}
}
.av-gal-item{margin:0;overflow:hidden;background:var(--av-dark);aspect-ratio:4/3}
.av-gal-item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease}
.av-gal-item:hover img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){ .av-gal-item img{transition:none} .av-gal-item:hover img{transform:none} }

/* ---- FAQ accordion (replaces the Bootstrap-3 panel accordion) --------
   The original bordered each QUESTION (grey, orange when open) with the
   answer sitting below the box; a chevron flips from right to down. The
   border lives on the <summary>, so the answer is outside it, as before. */
.av-accordion{margin:0}
.av-acc-item{margin:0 0 12px}
.av-acc-q{cursor:pointer;list-style:none;position:relative;display:block;
  border:1px solid #cfcfcf;background:transparent;
  padding:13px 46px 13px 18px;color:#555;font-weight:400;line-height:1.35;
  text-transform:none;font-size:clamp(1.05rem,1.8vw,21px);
  transition:border-color .2s ease}
.av-acc-q::-webkit-details-marker{display:none}
.av-acc-q::marker{content:""}
/* chevron: right (›) closed, down (v) open */
.av-acc-q::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;
  border-top:2px solid #8a8a8a;border-right:2px solid #8a8a8a;
  transform:translateY(-60%) rotate(45deg);transform-origin:center;
  transition:transform .2s ease,border-color .2s ease}
.av-acc-item[open] > .av-acc-q{border-color:var(--av-brand)}
.av-acc-item[open] > .av-acc-q::after{transform:translateY(-30%) rotate(135deg);border-color:var(--av-brand)}
.av-acc-q:hover{border-color:var(--av-brand)}
.av-acc-q:focus-visible{outline:2px solid var(--av-brand);outline-offset:2px}
.av-acc-a{padding:16px 18px 6px}
.av-acc-a > *:last-child{margin-bottom:0}

/* ---- cards (replaces Go Pricing tables) ------------------------------
   Used for both team/instructor cards and package listings. The original
   extension stored these PHP-serialized in WordPress-style tables; the
   content was recovered and rebuilt as plain markup.                     */
.av-cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.av-cards-1{grid-template-columns:minmax(0,320px)}
.av-cards-2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.av-card{background:var(--av-white);display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(41,41,41,.08),0 10px 26px -18px rgba(41,41,41,.5)}
.av-card-media{position:relative;--av-card-accent:var(--av-brand)}
/* card extras: header image with title overlay, CTA button, footnote */
.av-card-media{background-size:cover;background-position:50% 50%}
.av-card-media img{opacity:0}            /* the img is for alt text / SEO only */
.av-card-media .av-card-name{position:absolute;inset:auto 0 0 0;margin:0;padding:14px 16px;
  color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.av-card-sep{border-top:1px solid var(--av-rule);margin:8px 0;padding:0;height:0;list-style:none}
.av-card-btn{display:inline-block;margin-top:14px;font-size:clamp(.95rem,1.5vw,20px);padding:16px 28px;
  background:var(--av-brand);color:#fff}
.av-card-btn:hover{background:var(--av-ink);color:#fff}
.av-card-note{margin:10px 0 0;font-size:.8rem;color:var(--av-body);line-height:1.4}

.av-card-media::after{content:"";display:block;height:5px;background:var(--av-card-accent)}
.av-card-media img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover}
.av-card-body{padding:18px 18px 22px;flex:1}
.av-card-name{font-size:1.02rem;font-weight:700;text-transform:uppercase;
  color:var(--av-ink);margin:0 0 .4em;line-height:1.25}
.av-card-lines{list-style:none;margin:0;padding:0;font-size:.92rem;line-height:1.55}
.av-card-lines li{padding:3px 0;color:var(--av-body)}
.av-card-lines li + li{border-top:1px solid var(--rule-soft,#eee)}
/* go_pricing card layout (theme3362): title + price overlaid on the photo,
   body rows CENTERED, grey button (orange on the featured plan), and the
   middle plan lifted AND taller so it pops above and below its neighbours. */
/* pricing cards: landscape image (~2.47:1 like the original, not the
   default 3/4 portrait); equal-height cards so the raised plan pops
   uniformly via transform. */
.av-cards-3{align-items:stretch}
.av-cards-3 .av-card-media img{aspect-ratio:2.4;height:auto}
.av-cards-3 .av-card{transition:transform .22s ease,box-shadow .22s ease}
.av-card-over-title{position:absolute;top:0;left:0;right:0;z-index:2;
  padding:12px 14px;text-align:center;color:#fff;font-weight:700;
  text-transform:none;font-size:18px;line-height:1.2;
  background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,0))}
.av-card-price{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:#fff;text-align:center;pointer-events:none}
.av-card-price::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.22)}
.av-card-price .amt,.av-card-price .per{position:relative}
.av-card-price .amt{font-size:clamp(2.2rem,4vw,52px);font-weight:700;line-height:1;
  text-shadow:0 2px 10px rgba(0,0,0,.55)}
.av-card-price .per{font-size:1rem;letter-spacing:.02em;margin-top:4px;opacity:.92;
  text-shadow:0 2px 10px rgba(0,0,0,.55)}
/* centered body + grey button, matching the original */
.av-cards-3 .av-card-body{text-align:center}
.av-cards-3 .av-card-btn{background:#9d9d9d}
.av-cards-3 .av-card-btn:hover{background:var(--av-ink)}
.av-cards-3 .av-card--featured .av-card-btn{background:var(--av-brand)}
.av-cards-3 .av-card--featured .av-card-btn:hover{background:var(--av-ink)}
/* "enlarge current" hover, as in theme3362's go_pricing: the middle plan is
   raised at rest; hovering ANY card moves the raise to it (0.2s), and the
   previously-raised plan steps back. transform+shadow only, so it animates
   smoothly with no reflow. */
.av-card--featured{box-shadow:0 18px 40px -16px rgba(0,0,0,.45);z-index:2}
@media (min-width:768px){
  .av-card--featured{transform:translateY(-12px) scale(1.05)}
}
@media (hover:hover) and (min-width:768px){
  .av-cards-3 .av-card:hover{transform:translateY(-12px) scale(1.05);
    box-shadow:0 22px 44px -14px rgba(0,0,0,.5);z-index:3}
  .av-cards-3 .av-card:hover .av-card-btn{background:var(--av-brand)}
  /* while another card is hovered, the default-featured plan settles back */
  .av-cards-3:hover .av-card--featured:not(:hover){transform:none;
    box-shadow:0 8px 20px -14px rgba(0,0,0,.35);z-index:2}
  .av-cards-3:hover .av-card--featured:not(:hover) .av-card-btn{background:#9d9d9d}
}
/* PADI instructor cards (.av-cards-4): theme3362 rendered these as solid
   orange blocks with white text. Here the photo stays and the caption below
   it goes orange. Plus a bottom margin - this is the last band on the page,
   and content-bottom carries no bottom padding. */
.av-cards-4{margin-bottom:64px}
.av-cards-4 .av-card{background:var(--av-brand)}
.av-cards-4 .av-card-body{background:var(--av-brand);color:#fff}
.av-cards-4 .av-card-name{color:#fff}
.av-cards-4 .av-card-lines li{color:rgba(255,255,255,.92)}
.av-cards-4 .av-card-lines li + li{border-top-color:rgba(255,255,255,.25)}

/* ---- forms (replace Balbooa com_baforms: contact + booking) ---------
   Two-column short fields, full-width message, orange submit. Sits in the
   grey content-bottom band, so fields are white with a light border.
   .av-form is shared; .av-booking-form adds fieldset sections.          */
/* the intro line above the form (sits on the grey band, outside the card) */
.av-form-intro{margin:0 0 24px;color:var(--av-body);font-size:17px;line-height:1.6}
/* white card holding the form (theme3362 laid the fields on white with the
   page grey around it); full width like the original. */
.av-form{background:var(--av-white);padding:36px 40px 32px}
/* breathing room below the contact form card before the full-bleed map
   (the content-bottom band has no bottom padding of its own). */
.av-contact-form{margin-bottom:64px}
@media (max-width:767.98px){ .av-contact-form{margin-bottom:40px} }
.av-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
/* light-grey filled, borderless fields (original: #f5f8f9, 15px, 18px) */
.av-form input,.av-form textarea,.av-form select{
  width:100%;box-sizing:border-box;font-family:var(--av-font);font-size:18px;
  color:var(--av-ink);background:#f5f8f9;border:1px solid transparent;
  border-radius:0;padding:15px;transition:border-color .2s ease,background .2s ease}
.av-form select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--av-body) 50%),linear-gradient(135deg,var(--av-body) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.av-form textarea{display:block;margin-bottom:18px;resize:vertical;min-height:150px}
.av-form input::placeholder,.av-form textarea::placeholder{color:#8a8a8a}
/* borderless fields need a visible focus state - tint + brand ring */
.av-form input:focus,.av-form textarea:focus,.av-form select:focus{
  outline:none;background:var(--av-white);border-color:var(--av-brand)}
/* booking form section headings */
.av-fs{border:0;margin:0 0 22px;padding:0;min-width:0}
.av-fs legend{display:block;width:100%;font-weight:700;color:var(--av-ink);
  font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em;
  padding:0 0 12px;margin:0 0 16px;border-bottom:1px solid var(--av-rule);text-align:left}
.av-form-actions{text-align:left}
.av-form .av-form-send{background:var(--av-brand);cursor:pointer;text-transform:none;font-size:18px;line-height:1;padding:20px 60px}
.av-form .av-form-send:hover{background:var(--av-ink)}
.av-form-note{margin:14px 0 0;font-size:.85rem;color:var(--av-body)}
/* field wrapper so validation tooltips insert cleanly inside a grid cell */
.av-field{min-width:0}
.av-form input.is-invalid,.av-form textarea.is-invalid,.av-form select.is-invalid{border-color:var(--av-brand)}
.av-field .av-field-err{margin:-12px 0 14px}
@media (max-width:575.98px){ .av-form-grid{grid-template-columns:1fr} }

/* ---- booking wizard (faithful rebuild of the Balbooa multi-step form) --
   White card holding a chevron stepper + one visible panel at a time.     */
/* margin-bottom: the content-bottom band has no bottom padding, so without
   this the wizard card sits flush on the footer. */
.av-wiz{background:var(--av-white);padding:26px 30px 30px;text-align:left;margin-bottom:64px}
/* [hidden] must beat .btn{display:inline-block} on the footer buttons */
.av-wiz [hidden]{display:none}
/* chevron stepper - same border-triangle arrows the original used:
   each tab has a forward-pointing :after (tab colour) and a :before notch
   (card colour) cut into its left edge. */
.av-wiz-steps{display:flex}
.av-wiz-step{flex:1 1 0;min-height:56px;position:relative;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  margin-left:3px;padding:10px 10px 10px 20px;font-family:var(--av-font);
  font-weight:700;font-size:15px;line-height:1.2;color:var(--av-ink);
  background:rgba(214,214,214,.4)}
.av-wiz-step:first-child{margin-left:0;padding-left:10px;border-radius:4px 0 0 4px}
.av-wiz-step:last-child{border-radius:0 4px 4px 0}
.av-wiz-step.is-active{background:var(--av-brand);color:#fff}
.av-wiz-step:after{content:"";position:absolute;right:-10px;top:calc(50% - 10px);z-index:2;
  border-top:10px solid transparent;border-bottom:10px solid transparent;
  border-left:10px solid rgba(214,214,214,.4)}
.av-wiz-step.is-active:after{border-left-color:var(--av-brand)}
.av-wiz-step:before{content:"";position:absolute;left:0;top:calc(50% - 12px);
  border-top:12px solid transparent;border-bottom:12px solid transparent;
  border-left:12px solid var(--av-white)}
.av-wiz-step:first-child:before,.av-wiz-step:last-child:after{display:none}
@media (max-width:640px){.av-wiz-step{font-size:0;padding:10px}
  .av-wiz-step.is-active{font-size:13px}}

/* panels */
.av-wiz-panel{display:none;padding:30px 4px 8px}
.av-wiz-panel.is-active{display:block}
.av-wiz-h{font-size:1.15rem;font-weight:700;color:var(--av-ink);text-transform:none;margin:0 0 22px}
.av-wiz-lab{display:block;font-size:.95rem;font-weight:700;color:var(--av-ink);margin:0 0 8px}
.av-wiz-lab .req{color:var(--av-brand)}
.av-wiz-field-gap,.av-wiz .av-field{margin-bottom:4px}

/* fields: light grey, borderless (shared look with the simple forms) */
.av-wiz input,.av-wiz select,.av-wiz textarea{
  width:100%;box-sizing:border-box;font-family:var(--av-font);font-size:16px;
  color:var(--av-ink);background:#f5f8f9;border:1px solid transparent;border-radius:0;
  padding:15px;margin-bottom:18px;transition:border-color .2s ease,background .2s ease}
.av-wiz textarea{min-height:120px;resize:vertical;display:block}
.av-wiz input::placeholder,.av-wiz textarea::placeholder{color:#8a8a8a}
.av-wiz input:focus,.av-wiz select:focus,.av-wiz textarea:focus{
  outline:none;background:var(--av-white);border-color:var(--av-brand)}
.av-wiz select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--av-body) 50%),linear-gradient(135deg,var(--av-body) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
/* icon inside field (fish/plane/pencil/calendar) - 54px left zone */
.av-ico-field{position:relative}
.av-ico-field > svg{position:absolute;left:18px;top:27px;transform:translateY(-50%);
  color:var(--av-ink);pointer-events:none}
.av-ico-field input,.av-ico-field textarea{padding-left:54px}
.av-ico-field.av-ta > svg{top:30px}
.av-dates .av-ico-field{margin:0}
.av-dates{grid-template-columns:1fr 1fr}

/* help "?" */
.av-help{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:#9e9e9e;color:#fff;font-size:12px;font-weight:700;
  margin-left:6px;cursor:help;vertical-align:middle}

/* checkboxes */
.av-checks{display:flex;flex-wrap:wrap;gap:14px 28px;margin:2px 0 18px}
.av-check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:1rem;color:var(--av-ink)}
.av-check input{width:20px;height:20px;margin:0;accent-color:var(--av-brand);flex:0 0 auto}

/* phone */
.av-phone{display:flex;gap:10px;align-items:start}
.av-phone .av-dial{width:96px;flex:0 0 auto}
.av-phone input{flex:1}

.av-grid-3{grid-template-columns:1fr 1fr 1fr}

/* footer buttons */
.av-wiz-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:10px}
.av-wiz-foot-right{display:flex;align-items:center;gap:22px;margin-left:auto}
/* nav buttons: smaller text than the big page .btn so the stepper footer
   reads as controls, not hero buttons. */
.av-wiz .av-wiz-back,.av-wiz .av-wiz-next,.av-wiz .av-wiz-submit{
  font-size:14px;line-height:1;padding:15px 34px}
.av-wiz .av-wiz-back{background:#eef0f2;color:var(--av-ink)}
.av-wiz .av-wiz-back:hover{background:#e0e3e6}
.av-wiz .av-wiz-next,.av-wiz .av-wiz-submit{background:var(--av-brand);cursor:pointer}
.av-wiz .av-wiz-next:hover,.av-wiz .av-wiz-submit:hover{background:var(--av-ink)}
.av-wiz-save{background:none;border:0;color:var(--av-ink);font-weight:700;cursor:pointer;
  font-size:.95rem;padding:6px 2px}
.av-wiz-save:hover{color:var(--av-brand)}
.av-wiz-saved{color:var(--av-brand);font-weight:700;font-size:.9rem}

/* intro (step 1) */
.av-wiz-intro{text-align:center;padding:20px 0 6px}
.av-wiz-logo{max-width:150px;height:auto;margin:0 auto 18px;display:block}
.av-wiz-intro h4{font-size:1.15rem;font-weight:700;color:var(--av-ink);text-transform:none;margin:0 0 14px}
.av-wiz-intro p{max-width:640px;margin:0 auto 12px;color:var(--av-body)}
.av-wiz-team{font-weight:700;color:var(--av-ink)}
.av-wiz-room{max-width:100%;height:auto;display:block;margin:4px 0 0}

/* validation tooltip (orange, arrow on top) */
.av-ico-field.is-invalid input,.av-wiz .is-invalid{border-color:var(--av-brand)}
.av-field-err{position:relative;display:inline-block;margin:-10px 0 16px;
  background:var(--av-brand);color:#fff;font-size:12px;font-weight:700;padding:7px 12px}
.av-field-err:before{content:"";position:absolute;top:-6px;left:16px;
  border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--av-brand)}

/* dark date-picker popup */
.av-cal{position:absolute;z-index:60;width:300px;background:#2b3648;color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.35);padding:10px;font-size:14px}
.av-cal-head{display:flex;align-items:center;justify-content:space-between;padding:6px 4px 10px}
.av-cal-head button{background:none;border:0;color:#fff;cursor:pointer;font-size:16px;padding:4px 8px;border-radius:4px}
.av-cal-head button:hover{background:rgba(255,255,255,.12)}
.av-cal-title{font-weight:700}
.av-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.av-cal-dow{color:#9aa4b2;font-size:11px;text-transform:uppercase;padding:6px 0}
.av-cal-day{padding:8px 0;cursor:pointer;border-radius:4px;color:#e7ebf0}
.av-cal-day:hover{background:rgba(255,255,255,.12)}
.av-cal-day.is-muted{color:#5b6472;cursor:default}
.av-cal-day.is-sel{background:var(--av-brand);color:#fff}
.av-cal-today{margin-top:8px;width:100%;background:rgba(255,255,255,.06);border:0;color:#fff;
  padding:10px;cursor:pointer;border-radius:4px}
.av-cal-today:hover{background:rgba(255,255,255,.14)}

@media (max-width:575.98px){
  .av-wiz{padding:18px 16px 22px}
  .av-grid-3,.av-dates{grid-template-columns:1fr}
}

/* ---- dive-package pricing cards (go_pricing "budget packages") --------
   Tall orange cards: a lighter header bar, an empty upper zone, then the
   nights/price block and a white BOOK NOW button. Distinct from the PADI
   instructor .av-cards-4 (which is photo + orange caption).              */
.av-pkg-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0 0 8px}
.av-pkg{display:flex;flex-direction:column;color:#fff;border-radius:3px;overflow:hidden;
  background:linear-gradient(180deg,#f96f24 0%,var(--av-brand) 42%);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.45)}
.av-pkg-head{background:rgba(255,255,255,.13);text-align:center;color:#fff;
  font-weight:600;padding:14px 12px;font-size:.98rem}
.av-pkg-body{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:104px 20px 26px}
.av-pkg-title{color:#fff;font-weight:700;text-transform:none;font-size:1.12rem;margin:0 0 16px;line-height:1.25}
.av-pkg-line{margin:0 0 4px;color:rgba(255,255,255,.9);font-size:1rem;line-height:1.5}
.av-pkg-sep{display:block;width:74px;height:1px;background:rgba(255,255,255,.45);margin:20px 0}
.av-pkg-room{margin:0 0 2px;color:rgba(255,255,255,.85);font-size:.9rem}
.av-pkg-price{margin:0;color:#fff;font-weight:700;font-size:2.7rem;line-height:1}
.av-pkg-double{margin:4px 0 0;font-style:italic;color:rgba(255,255,255,.9);font-size:.92rem}
.av-pkg-double b{font-weight:700;font-style:italic}
.av-pkg-btn{display:inline-block;margin:22px 0 0;background:#fff;color:var(--av-brand);
  font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.03em;
  padding:12px 26px;text-decoration:none;transition:background .2s ease,color .2s ease}
.av-pkg-btn:hover{background:var(--av-ink);color:#fff}
.av-pkg-note{margin:18px 0 0;color:rgba(255,255,255,.72);font-size:.72rem}
@media (max-width:900px){ .av-pkg-cards{grid-template-columns:1fr 1fr} .av-pkg-body{padding-top:70px} }
@media (max-width:520px){ .av-pkg-cards{grid-template-columns:1fr} }

@media (max-width:575.98px){ .av-cards{grid-template-columns:1fr} }

/* ---- split-weight module titles -------------------------------------
   Lato 100 lead word against Lato 700 remainder - the weight contrast
   that reads as this site more than any single colour does.             */
/* line-height and letter-spacing are measured off the live site's own
   module titles: 60px set at 73.8px leading (1.23) with NO tracking.
   1.1 with negative tracking reads noticeably tighter on the two-line
   titles, which is most of them. Matches the base h2 rule deliberately. */
/* The gap below a module title is FLAT in the original, not em-based: 41px
   for every title style except title2, which uses 74px. An em value tracked
   the font-size and drifted (36px at 60px type), so both are pinned here.
   title2 is the class the chrome maps to .av-modtitle--bold-first.        */
.av-modtitle{margin:0 0 41px;text-transform:uppercase;line-height:1.23;
  font-size:clamp(1.7rem,4.75vw,60px);font-weight:700;letter-spacing:normal}
.av-modtitle--bold-first{margin-bottom:74px}
.av-modtitle-lead{font-weight:100}
/* Body copy is 300, so <strong>/<b> need an explicit weight or they read
   as normal - the "What can we Expect" labels (depth:, visibility:...) are
   <strong> and were rendering un-bold. Title spans use their own heavier
   class rules, which out-specify this. */
strong,b{font-weight:700}
.av-modtitle-rest{font-weight:700}
/* title2 flips the contrast: first word bold, remainder thin */
.av-modtitle--bold-first .av-modtitle-lead{font-weight:700}
.av-modtitle--bold-first .av-modtitle-rest{font-weight:100}
/* header_class carries the alignment */
.av-modtitle--right{text-align:right}
.av-modtitle--left{text-align:left}
.av-feature .av-modtitle{color:var(--av-white);
  /* measured on the live site: 75px, right-aligned, two lines. The 41px
     gap below is flat in the original - it does not track the font-size,
     which drops to 50px well before the margin changes. */
  font-size:clamp(2.1rem,5.9vw,75px);line-height:1.04;
  margin:0 0 41px}

/* ---- floating WhatsApp contact (replaces mod_chatallinone) ------------
   A dive centre takes bookings through WhatsApp, so this is a real
   customer-facing control, not decoration. Plain link, no SDK.          */

/* footer legal links (theme3362 rendered these from template params) */
.av-legal{margin:0;display:inline-flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.av-legal a{color:rgba(255,255,255,.65)}
.av-legal a:hover{color:var(--av-brand)}
.av-legal span{opacity:.4}

/* ---- navigation dropdowns -------------------------------------------
   mod_menu emits ul.mod-menu > li.nav-item, with nested ul.mod-menu__sub
   and a toggle <button> for touch. Without dropdown rules every level
   renders inline, which floods the hero.                                */
.av-menu > ul{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 20px;margin:0;padding:0;list-style:none}
.av-menu li{position:relative;list-style:none}
.av-menu .mod-menu__sub{
  position:absolute;top:100%;left:0;min-width:230px;margin:0;padding:6px 0;
  background:var(--av-dark);list-style:none;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.7)}
.av-menu li:hover > .mod-menu__sub,
.av-menu li:focus-within > .mod-menu__sub{opacity:1;visibility:visible;transform:none}
.av-menu .mod-menu__sub a{line-height:1.35;padding:9px 18px;font-size:.78rem;
  white-space:nowrap;display:block;color:var(--av-brand)}
.av-menu .mod-menu__sub a:hover{color:#fff;background:rgba(255,255,255,.06)}
/* third level opens to the side */
.av-menu .mod-menu__sub .mod-menu__sub{top:-6px;left:100%}
.av-menu .mod-menu__toggle-sub{display:none}
/* screen-reader-only text, in case core's stylesheet is absent */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

@media (max-width:767.98px){
  .av-menu > ul{flex-direction:column;justify-content:flex-start;gap:0}
  .av-menu li{position:static}
  .av-menu .mod-menu__sub{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;background:rgba(0,0,0,.25);padding:0 0 0 14px}
  .av-menu .mod-menu__sub .mod-menu__sub{left:0}
}
@media (prefers-reduced-motion:reduce){ .av-menu .mod-menu__sub{transition:none} }

/* nav logo (the original had no logo here at all, leaving no home link;
   the site's own logo is used instead - revert by clearing logoFile) */
.av-brand img{max-height:46px;width:auto;display:block}


/* ---- navigation: measured against the live site ----------------------
   Top level  21px / 700 / uppercase, ACTIVE orange, others white.
   Sub level  13px / 400 / white.
   The bar floats over the hero, inset from the top-left rather than
   pinned to the corner.                                                  */
.av-nav .container{align-items:flex-start;min-height:0;padding-top:67px;
  padding-bottom:14px;gap:0 26px;flex-wrap:wrap}
.av-menu{margin-left:0}
.av-menu > ul{justify-content:flex-start;gap:4px 26px;max-width:820px}
.av-menu > ul > li > a{
  font-size:21px;font-weight:700;line-height:1.32;letter-spacing:0;
  color:#fff;padding:0;display:inline-block}
.av-menu > ul > li > a:hover{color:var(--av-brand)}
.av-menu > ul > li.current > a,
.av-menu > ul > li.active > a{color:var(--av-brand)}
/* dropdowns */
.av-menu .mod-menu__sub{background:rgba(26,26,26,.96);padding:10px 0;min-width:210px}
.av-menu .mod-menu__sub a{font-size:13px;font-weight:400;line-height:1.5;
  padding:7px 20px;color:#fff;letter-spacing:0}
.av-menu .mod-menu__sub a:hover{color:var(--av-brand);background:transparent}
/* highlight the ACTIVE sub-item inside an open dropdown, so the menu shows
   which sub-page you're on (Joomla flags it .current / .active). Without
   this the active sub-item rendered plain white like the rest. */
.av-menu .mod-menu__sub li.current > a,
.av-menu .mod-menu__sub li.active > a{color:var(--av-brand);font-weight:700}
@media (max-width:979.98px){
  .av-menu > ul > li > a{font-size:17px}
}
@media (max-width:767.98px){
  .av-nav .container{padding-top:10px;padding-bottom:10px;align-items:center}
  .av-menu > ul{max-width:none}
  .av-menu > ul > li > a{font-size:16px;line-height:2.4}
}

/* ---- mobile menu: opaque panel + collapsible submenus -----------------
   Desktop reveals the dropdowns on hover; touch has no hover, so the
   whole submenu tree was forced open and rendered over the hero with no
   ground. Instead give the open panel a solid background and collapse
   each parent behind its chevron toggle (the original's slide-out did the
   same). The toggle <button> exists in mod_menu's markup - here it is
   shown, drawn as a chevron, and wired up in the template's JS.          */
@media (max-width:767.98px){
  /* solid ground for the whole bar while the menu is open (no bleed-through) */
  .av-nav:has(.av-menu.is-open){background:var(--av-dark)}
  .av-menu.is-open{background:var(--av-dark);padding-bottom:14px}
  /* top-level row: link fills, chevron sits at the right, submenu wraps below */
  .av-menu > ul > li{display:flex;flex-wrap:wrap;align-items:center;
    border-top:1px solid rgba(255,255,255,.08)}
  .av-menu > ul > li:first-child{border-top:0}
  .av-menu > ul > li > a{flex:1 1 auto;min-width:0}
  /* active/current top item: full-width orange bar, white text (original) */
  .av-menu > ul > li.active,.av-menu > ul > li.current{background:var(--av-brand)}
  .av-menu > ul > li.active > a,.av-menu > ul > li.current > a{color:#fff}
  /* reveal + draw the toggle as a chevron (icon font may be absent) */
  .av-menu .mod-menu__toggle-sub{display:inline-flex;flex:0 0 auto;
    align-self:stretch;align-items:center;justify-content:center;width:54px;
    background:none;border:0;border-left:1px solid rgba(255,255,255,.1);
    color:#fff;cursor:pointer}
  .av-menu > ul > li.active > .mod-menu__toggle-sub,
  .av-menu > ul > li.current > .mod-menu__toggle-sub{border-left-color:rgba(255,255,255,.3)}
  .av-menu .mod-menu__toggle-sub .icon-chevron-down{display:none}
  .av-menu .mod-menu__toggle-sub::before{content:"";width:9px;height:9px;
    margin-top:-3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);transition:transform .2s ease}
  .av-menu li.is-expanded > .mod-menu__toggle-sub::before{margin-top:3px;transform:rotate(-135deg)}
  /* submenus collapsed by default, revealed only when the parent expands */
  .av-menu .mod-menu__sub{flex:0 0 100%;display:none;position:static;
    opacity:1;visibility:visible;transform:none;box-shadow:none;
    background:rgba(0,0,0,.28);padding:4px 0 8px}
  .av-menu li.is-expanded > .mod-menu__sub{display:block}
  .av-menu .mod-menu__sub a{padding-left:38px;font-size:15px;line-height:2.2}
}

/* The original reserved a logo column, indenting the menu ~115px inside
   the container even though no logo was set. Reproduced so the menu
   starts where it did. */
.av-brand-empty{width:69px;flex:0 0 69px;height:1px}
@media (max-width:767.98px){ .av-brand-empty{display:none} }

/* map embed (replaces the {mosmap} shortcode from plugin_googlemap3) */
/* 520px is the height the original map renders at */
.av-map-embed{position:relative;width:100%;height:520px;background:var(--av-dark)}
.av-map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:767.98px){ .av-map-embed{height:300px} }

/* per-module call-to-action (mod_articles_news_adv custom_link) */
/* 56px below, matching the original's .mod-newsflash-adv_custom-link.
   No .btn size override here: the base .btn already carries the original's
   26px / 21px 38px. The override that used to sit here hardcoded
   18px / 10px 20px - the values from the original's max-width:1200px
   block - so every CTA button rendered tablet-sized at every width. */
.av-cta{margin:0 0 56px;padding:0}
/* the module's pull class aligns its title and its CTA together */
.av-pull-right .av-modtitle,.av-pull-right .av-cta{text-align:right}
.av-pull-left .av-modtitle,.av-pull-left .av-cta{text-align:left}


/* ---- hero dark wedge -------------------------------------------------
   A dark triangle tucked into the hero's bottom-left corner, sitting just
   above the orange band's diagonal. Drawn with a percentage clip-path so
   it scales with the hero at every viewport width. The original used a
   fixed 2000x120 skewed bar anchored to px offsets (transform-origin at
   1000px), which drifted badly as the width changed - off-screen pivot on
   phones, oversized triangle on wide desktops.                           */
.av-hero{position:relative;overflow:hidden}
.av-hero::after{
  content:"";position:absolute;inset:0;
  background:rgba(41,41,41,.8);
  clip-path:polygon(0 79%,36% 100%,0 100%);
  z-index:1;pointer-events:none;
}

/* ---- sticky navigation ----------------------------------------------
   The original nav scrolls away (position:relative). Sticky is a
   deliberate improvement: it needs a solid ground once it leaves the
   hero, or the white items sit on white content.                        */
.av-nav{position:absolute;top:0;left:0;right:0;z-index:100;
  transition:background .25s ease,padding .25s ease}
.av-nav.is-stuck{position:fixed}
/* opaque, as on the original - not a translucent bar */
.av-nav.is-stuck{background:var(--av-dark);box-shadow:0 6px 22px -10px rgba(0,0,0,.6)}
/* The original does NOT shrink its menu text when it pins - it keeps
   21px and only tightens the padding, going 140px -> 86px. 12px top and
   bottom against the two menu rows lands on that same 86px. */
.av-nav.is-stuck .container{padding-top:12px;padding-bottom:12px}
@media (prefers-reduced-motion:reduce){ .av-nav{transition:none} }

/* ---- chat widget (replaces mod_chatallinone) -------------------------
   Every measurement here is taken off the original module: a 60px
   #25d366 trigger at 15/25, and a 350px card at 95/30 with a #2750d6
   header. The original needs jQuery 1.12.4 for nothing but this; the
   behaviour is 30 lines of vanilla in index.php instead.

   One deliberate departure: the original's trigger is an EMPTY green
   circle, because the icon it asks for (assets/images/bubbles/dialog.svg)
   404s on the live site. The glyph it meant to show is inlined instead.  */
.av-chat-fab{position:fixed;right:25px;bottom:15px;z-index:99999;
  width:60px;height:60px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:#25d366;color:#fff;
  box-shadow:0 6px 20px -4px rgba(0,0,0,.45);transition:box-shadow .3s ease}
.av-chat-fab:hover{box-shadow:0 8px 25px -5px rgba(45,62,79,.3)}
.av-chat-fab:focus-visible{outline:3px solid var(--av-brand);outline-offset:3px}

.av-chat-panel{position:fixed;right:30px;bottom:95px;z-index:9999999;
  width:350px;background:#fff;border-radius:10px;
  box-shadow:rgba(0,0,0,.3) 0 0 30px;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;
  /* Closed is the resting state, so the panel is inert without JS rather
     than sitting over the copy. */
  visibility:hidden;transform:translateY(115%)}
/* Two animations rather than a transition, which is also how the original
   does it (animate.css bounce / slideOutDown). A transition cannot drive
   the exit here: the entry animation uses fill-mode `both`, so transform
   stays under animation control and dropping the class snapped the card
   down instead of sliding it. */
.av-chat-panel.is-open{visibility:visible;transform:none;
  animation:av-chat-bounce .9s both}
.av-chat-panel.is-shut{animation:av-chat-out .45s ease-in both}
@keyframes av-chat-out{
  from{visibility:visible;transform:translateY(0)}
  to{visibility:hidden;transform:translateY(115%)}}
@keyframes av-chat-bounce{
  0%,20%,53%,100%{transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.215,.61,.355,1)}
  40%,43%{transform:translate3d(0,-30px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}
  70%{transform:translate3d(0,-15px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}
  90%{transform:translate3d(0,-4px,0)}}

.av-chat-head{position:relative;display:flex;align-items:center;
  background:#2750d6;color:#fff;padding:20px 30px 35px;border-radius:10px 10px 0 0}
.av-chat-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;
  margin:0 20px 0 0;flex:0 0 auto}
.av-chat-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.av-chat-name{font-weight:700;line-height:1.2}
.av-chat-role{font-weight:300;line-height:1.2}
.av-chat-close{position:absolute;top:10px;right:10px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;color:rgba(255,255,255,.8);
  border-radius:50%}
.av-chat-close:hover{color:#fff;background:rgba(255,255,255,.14)}
.av-chat-close:focus-visible{outline:2px solid #fff;outline-offset:2px}

.av-chat-body{padding:22px 20px 24px}
.av-chat-msg{display:flex;align-items:flex-start;gap:12px;margin:0 0 26px}
.av-chat-msg img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto}
/* square top-left corner so the bubble points back at the avatar */
.av-chat-msg p{margin:0;background:#efefef;color:#000;
  padding:10px 20px;border-radius:0 10px 10px;line-height:1.45}
.av-chat-cta{margin:0 0 14px;font-size:16px;font-weight:700;color:#000;text-align:center}
.av-chat-links{display:flex;justify-content:center}
.av-chat-ch{display:flex;align-items:center;justify-content:center;
  width:84px;height:48px;margin:3px;border-radius:8px;color:#fff;
  text-decoration:none;transition:filter .2s ease}
.av-chat-ch:hover{filter:brightness(1.08);color:#fff}
.av-chat-ch:focus-visible{outline:3px solid var(--av-brand);outline-offset:2px}
.av-chat-ch--wa{background:#4FCE5D}
.av-chat-ch--tg{background:#0088CC}
.av-chat-ch--tel{background:#685AB0}

/* the original's own breakpoint for this widget */
@media (max-width:480px){
  .av-chat-fab{right:5px}
  .av-chat-panel{width:96%;right:8px}
  .av-chat-head{padding:16px 20px 26px}
  .av-chat-body{padding:18px 16px 20px}
}
@media (prefers-reduced-motion:reduce){
  .av-chat-panel.is-open,.av-chat-panel.is-shut{animation:none}
  .av-chat-panel.is-shut{visibility:hidden}
}

/* ---- footer icon menus ----------------------------------------------
   The original used Font Awesome 4 classes from each menu item's
   menu-anchor_css. Joomla 6 ships FA without brand definitions, so these
   are inline SVG instead - see html/mod_menu/icons.php.                 */
/* measured on the live site: 66px circles, 34px glyph, #888 on transparent */
.av-iconmenu{display:flex;flex-wrap:wrap;gap:0 10px;margin:0;padding:0;list-style:none;align-items:center}
.av-iconmenu li{margin:0;padding:0}
/* the copyright position uses chrome "none", so there is no .moduletable
   wrapper - give the lists themselves the column width the original had */
/* .av-copyright ul (0,1,1) outranks .av-iconmenu (0,1,0), so the gap has to
   be restated at matching specificity or it inherits the 20px list gap. */
.av-copyright .av-iconmenu{min-width:300px;gap:0 10px}
.av-iconmenu a{display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;width:66px;height:66px;border-radius:50%;
  color:#888;background:transparent;
  border:2px solid #515151;
  transition:color .2s ease,background .2s ease,border-color .2s ease}
.av-iconmenu a:hover{color:#fff;background:var(--av-brand);border-color:var(--av-brand)}
.av-iconmenu a:focus-visible{outline:2px solid var(--av-brand);outline-offset:2px}
.av-iconmenu svg{display:block;width:34px;height:34px}

/* The homepage menu item is a category view with no articles, so the
   component area renders nothing but still contributes its padding -
   112px of empty white the original does not have. */
body.is-home .av-main{padding:0}

/* ---- parallax behind content ----------------------------------------
   theme3362 put the parallax image BEHIND the following band, with the
   text reversed out white over it, rather than stacking a separate image
   strip above. Same vertical space for image and text.                  */
.av-band.av-overlay{position:relative;color:#fff}
/* mod_custom wraps its content in div.mod-custom even with chrome "none",
   so height:100% on the image would resolve against a zero-height wrapper.
   Position it against .av-overlay-bg instead - immune to wrapper depth. */
.av-overlay-bg .mod-custom,
.av-overlay-bg .moduletable{margin:0;height:100%}
.av-overlay-content{position:relative;z-index:2}
.av-band.av-overlay .av-modtitle,
.av-band.av-overlay h1,.av-band.av-overlay h2,.av-band.av-overlay h3,
.av-band.av-overlay h4,.av-band.av-overlay h5,
.av-band.av-overlay p,.av-band.av-overlay li{color:#fff}
.av-band.av-overlay .btn{background:var(--av-brand);color:#fff}
.av-band.av-overlay .btn:hover{background:#fff;color:var(--av-ink)}

/* ---- the orange circles: numbered dropcap and icon -------------------
   The original applies ONE set of declarations to both
   `.mod-newsflash-adv i.fa` (the "Why choose us" icons) and
   `.mod-newsflash-adv.list .dropcap` (the About "01, 02..." numbers),
   and both share the same two breakpoints. Kept together here for the
   same reason - they are one component at two contents.

   145 / 120 / 80 are the original's three steps. The dropcap was
   previously pinned at 120px, which is the TABLET step being served at
   every width, so it ran a size small on desktop.                       */
.av-dropcap,.av-itemicon{
  float:left;width:145px;height:145px;border-radius:50%;
  background:var(--av-brand);color:#fff;
  font-size:67px;font-weight:700;line-height:145px;text-align:center;
  margin:0 26px 0 0;flex:0 0 auto}
/* the glyph scales off the circle's font-size, as the webfont glyph did */
.av-itemicon{display:flex;align-items:center;justify-content:center}
.av-itemicon svg{display:block;width:1em;height:1em}
@media (max-width:1200px){
  .av-dropcap,.av-itemicon{width:120px;height:120px;line-height:120px;font-size:50px}
}
@media (max-width:979px){
  .av-dropcap,.av-itemicon{width:80px;height:80px;line-height:80px;font-size:40px}
}

/* The numbered variant gives its content a block formatting context so no
   line slips under the circle; the icon variant deliberately does NOT -
   the original lets the copy wrap back underneath once it clears, which
   is what makes it read as a paragraph rather than a pinned column.
   The original closes every article with an explicit <div class="clearfix">;
   this is that, without the extra element - and it also contains the
   floated intro image below.                                             */
.mod-articles-item.av-numbered{overflow:hidden}
.mod-articles-item::after{content:"";display:block;clear:both}

/* ---- floated intro image --------------------------------------------
   Articles carry `float_intro` ("left") and the original floated the
   figure so the copy wraps around it - the home page's Aquaventure logo
   sitting in the orange band is the clearest case.

   Core's joomla.content.intro_image layout emits the RAW float value as
   the class, so the figure arrives as `class="left item-image"` - not the
   old theme's `.img-intro__left`, and not a Bootstrap utility either
   (the template loads bootstrap-grid only, which has no float classes).
   Nothing was styling it, so every intro image rendered as an unfloated
   block and the text sat below it instead of beside it.

   Values are the original's .item_img + .img-intro__left combined.      */
.mod-articles-item .item-image{margin:0 0 21px;position:relative;font-size:0;line-height:0}
.mod-articles-item .item-image img{max-width:100%;height:auto}
.mod-articles-item .item-image.left{float:left;margin-right:30px;max-width:50%}
.mod-articles-item .item-image.right{float:right;margin-left:30px;max-width:50%}
@media (max-width:479px){
  .mod-articles-item .item-image.left,.mod-articles-item .item-image.right{
    float:none;margin:0 0 28px;max-width:100%}
}

/* core's grid needs a gutter that matches the original's column spacing */
/* Every article in the original carries a flat `margin: 0 0 56px`, and that
   single value does three jobs: the row gap in a grid (measured between
   float rows: 56px), the trailing space under the last item, and so the
   gap above a module's CTA button. The horizontal gutter is the Bootstrap
   one - two col-sm-6 at 15px padding a side = 30px between text columns. */
/* Both classes are on the <ul>; the doubled selector is deliberate. Core's
   mod-articles.css sets `grid-gap:2rem` (32px) at the same specificity as a
   single class and loads AFTER this file, so a one-class selector loses and
   every uncovered grid silently fell back to 32px.                        */
/* module article lists never show bullets (mod-list or grid) */
.mod-articles-items{list-style:none;margin:0;padding:0}
.mod-articles-items.mod-articles-grid{display:grid;gap:56px 30px;list-style:none;padding:0}
.mod-articles-items{margin:0 0 56px}
/* ...except in the two parallax bands, which override it: 76px in
   parallax1 - the numbered "About" block, which is how that band is
   identified here - and 33px in parallax2. */
.av-overlay .mod-articles-grid{row-gap:33px}
.av-overlay .mod-articles-items{margin-bottom:33px}
.av-overlay .mod-articles-grid:has(.av-numbered){row-gap:76px}
.av-overlay .mod-articles-items:has(.av-numbered){margin-bottom:76px}
/* grid-cols-1 must be explicit: core mod-articles.css switches any grid to
   1fr 1fr in containers >=768px, so a single-column list otherwise sits in
   the left half and leaves the right half empty. */
.mod-articles-grid.grid-cols-1{grid-template-columns:minmax(0,1fr)}
.mod-articles-grid.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mod-articles-grid.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mod-articles-grid.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:767.98px){
  .mod-articles-grid.grid-cols-2,.mod-articles-grid.grid-cols-3,
  .mod-articles-grid.grid-cols-4{grid-template-columns:1fr}
}

/* ---- numbered item: text sits beside the circle, never under it ------
   The original keeps every line on one left edge to the right of the
   dropcap. A plain float would let lines below the circle run back under
   it, so the content gets its own block formatting context.            */
.mod-articles-item.av-numbered .mod-articles-item-content{overflow:hidden}
.mod-articles-item.av-numbered .mod-articles-item-content p,
.mod-articles-item.av-numbered .mod-articles-item-content .mod-articles-introtext{
  text-align:justify}


/* ---- section backgrounds are skewed, not the sections ----------------
   theme3362 paints each band's background as a full-size ::before that is
   skewed -3.2deg and pulled up by 3%. One shape gives the diagonal at the
   TOP and the BOTTOM, and neighbouring bands share the same edge because
   they use the same angle. Separate top/bottom wedges cannot do this -
   they diverge and leave notches.                                        */
.av-band{position:relative;background:transparent;z-index:1}
.av-band::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:100%;
  margin-top:-3%;
  background:var(--av-band-bg,transparent);
  transform:skewY(-3.2deg);
  z-index:0;pointer-events:none;
}
.av-band > *{position:relative;z-index:2}

/* Image bands: skew the clipping wrapper, then counter-skew the photo so
   the picture itself stays upright while its edges stay diagonal - the
   same trick theme3362 does with nested skew containers. */
/* No overflow:hidden on the band - it would clip the -3% upward overhang,
   which is precisely what draws the diagonal top edge. The clipping that
   shapes the photo happens on .av-overlay-bg, one level in. */
/* The overhang has to be measured in % of WIDTH, not height: the skew
   displaces the edge by (W/2)*tan(3.2deg) = 2.8% of the width, so an
   overhang of 3% of the width always clears it at any viewport.
   margin-top and padding-bottom both resolve against the width - height
   does not, which is why the bottom slack is padding and not height. */
.av-overlay-bg{position:absolute;top:0;left:0;width:100%;height:100%;
  box-sizing:content-box;
  margin-top:-3%;padding-bottom:6%;
  transform:skewY(-3.2deg);overflow:hidden;z-index:0}
/* The photo counter-skews so it reads upright, and overhangs its clip box
   top and bottom so the rotation never exposes a corner. */
/* 30% of overhang, not 12%: the photo travels 0.15*(viewportH + clipH)
   either side of centre, and anything less exposes a clipped edge at the
   extremes of the drift. 30% covers any viewport up to about the clip
   box's own height (~1020px), which is the case that matters. Taller
   windows than that just drift slightly less - the script clamps travel
   to the real slack, so it degrades quietly instead of showing a gap.
   36% rather than 30% because the skew needs its own vertical allowance
   on top of the drift: a 3.2deg shear lifts a corner by tan(3.2deg) *
   width/2, about 40px at 1440. At 30% that showed as a clipped edge.    */
.av-overlay-bg .av-parallax-bg{
  position:absolute;left:0;width:100%;top:-36%;bottom:-36%;height:auto;
  transform:skewY(3.2deg);
  background-size:cover;background-position:center;will-change:transform}


/* ---- menu geometry, measured off theme3362 at 768-1440px -------------
   The original lays the menu on a Bootstrap grid: a one-column offset,
   then an 8-column nav. So the first item always sits 1/12 of the
   container in (+15px gutter) and the list is 2/3 of it wide - which is
   also what decides how the 11 items wrap onto two rows. It stays inline
   down to 768px and only collapses below that.
     768-979   17px, 6px apart, first row 55px down
     980+      21px, 14px apart, first row 67px down
   (100% + 30px) is the container's border-box width, i.e. the grid row. */
@media (min-width:768px){
  .av-brand-empty{width:auto;flex:0 0 calc((100% + 30px) / 12 - 26px)}
  .av-menu{flex:0 0 calc((100% + 30px) * 2 / 3 - 30px)}
  .av-menu > ul{max-width:none;gap:0 14px}
  /* rows exactly 28px: an inline-block link sits on the li's text baseline
     and adds descender space under it (+1.5px per row at 21px) */
  .av-menu > ul > li > a{line-height:28px;display:block}
  /* pinned bar: 20px over two 28px rows, 10px under = the original's 86px */
  .av-nav.is-stuck .container{padding-top:20px;padding-bottom:10px}
}
@media (min-width:768px) and (max-width:979.98px){
  .av-nav .container{padding-top:55px}
  .av-menu > ul{gap:0 6px}
  .av-nav.is-stuck .container{padding-top:16px;padding-bottom:6px}
}
/* 1201px+: the original spreads the items 28px apart (14px up to 1200) */
@media (min-width:1201px){ .av-menu > ul{gap:0 28px} }

/* price list: the two rate sheets share one <p>. As inline images they sat
   on text lines with an 8px gap; as blocks they butt together, no seam. */
.mod-articles-item-content p > img[src*="images/rates/"]{display:block;margin:0}
.mod-articles-item-content p > img[src*="images/rates/"] + br{display:none}

/* ---- form submission feedback (Contact + Book Now -> plg_ajax_avmail) */
.av-hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.av-form-send[disabled],.av-wiz-submit[disabled]{opacity:.65;cursor:progress}
.av-form-status{margin:14px 0 0;font-size:15px;line-height:1.5}
.av-form-status.is-error{color:var(--av-brand-2)}
.av-form-sent{margin:0 0 64px;padding:22px 26px;background:var(--av-white);
  border-left:4px solid var(--av-brand);color:var(--av-ink);font-size:18px;line-height:1.5}
.av-form-sent:focus{outline:none}

/* "10$ Off" line under BOOK NOW - restored from the Go Pricing column it
   was dropped from (fa-bookmark icon + text, same colour as the card copy) */
.av-pkg-offer{margin:14px 0 0;font-weight:700;font-size:15px;line-height:1.3;
  display:flex;align-items:center;justify-content:center;gap:7px;color:inherit}
.av-pkg-offer svg{width:10px;height:13px;fill:currentColor;flex:0 0 auto}

/* Dropdowns: the generic `.av-menu ul` flex rule (justify-content:flex-end)
   also hit the submenus and pushed every item to the right edge. The
   original stacks them as a plain, left-aligned list. */
.av-menu .mod-menu__sub{display:block}
.av-menu .mod-menu__sub > li{display:block}
.av-menu .mod-menu__sub a{text-align:left}
/* Desktop dropdown geometry measured off the original on hover (1280px):
   280px wide, centred under its item, 20px below it, 14px top/bottom
   padding, labels inset 30px on 40px rows, rgba(40,40,40,.9), no shadow. */
@media (min-width:768px){
  .av-menu > ul > li > .mod-menu__sub{
    left:50%;top:calc(100% + 20px);width:280px;min-width:0;
    padding:14px 0;background:rgba(40,40,40,.9);box-shadow:none;
    transform:translate(-50%,6px)}
  .av-menu > ul > li:hover > .mod-menu__sub,
  .av-menu > ul > li:focus-within > .mod-menu__sub{transform:translate(-50%,0)}
  /* invisible bridge over the 20px gap, so the menu stays open while the
     pointer travels from the item down into the list */
  .av-menu > ul > li > .mod-menu__sub::before{
    content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
  .av-menu .mod-menu__sub a{padding:6px 30px;line-height:28px}
}