/* =========================================================================
   Alliance — Elementor page layer
   Container CSS classes do not reach the DOM on this stack, so every
   container hook here is an #id set via Elementor's Advanced > CSS ID.
   Widget hooks are normal classes.
   ========================================================================= */

/* ---------- the Alliance button, applied to Elementor's button widget ----- */
.agw-el-btn .elementor-button,
.agw-el-btn-outline .elementor-button{
  position:relative;display:inline-flex;align-items:center;
  min-height:56px;border-radius:0!important;
  font-family:'Lato',Arial,Helvetica,sans-serif;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  transition:background-color .2s ease,color .2s ease}

.agw-el-btn .elementor-button{
  padding:0 70px 0 26px;
  background-color:#1187BB;
  background-image:linear-gradient(270deg,#015189 0%,rgba(1,81,137,0) 100%);
  color:#fff!important;border:0}
.agw-el-btn .elementor-button::before{
  content:'';position:absolute;right:0;top:0;bottom:0;width:56px;
  background:linear-gradient(225deg,#1187BB 0%,#015189 100%);
  -webkit-clip-path:polygon(100% 0,0% 100%,100% 100%);
  clip-path:polygon(100% 0,0% 100%,100% 100%)}
.agw-el-btn .elementor-button::after{
  content:'';position:absolute;top:50%;right:24px;width:9px;height:9px;
  border-right:2px solid #fff;border-top:2px solid #fff;
  transform:translateY(-50%) rotate(45deg)}
.agw-el-btn .elementor-button:hover,
.agw-el-btn .elementor-button:focus{background-color:#015189;color:#fff!important}

.agw-el-btn-outline .elementor-button{
  padding:0 26px;background:transparent;border:2px solid #fff;color:#fff!important}
.agw-el-btn-outline .elementor-button:hover{background:#fff;color:#015189!important}
/* outline on a light ground */
.agw-el-btn-outline.agw-on-light .elementor-button{border-color:#1187BB;color:#1187BB!important}
.agw-el-btn-outline.agw-on-light .elementor-button:hover{background:#1187BB;color:#fff!important}

/* Elementor hides its own icon span; make sure no stray padding remains */
.agw-el-btn .elementor-button-content-wrapper,
.agw-el-btn-outline .elementor-button-content-wrapper{gap:0}

/* ---------- hero ---------- */
#agw-hero{position:relative;overflow:hidden}
#agw-hero::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:72px;z-index:2;
  background:#fff;pointer-events:none;
  -webkit-clip-path:polygon(0 100%,0 58%,46% 100%,100% 26%,100% 100%);
  clip-path:polygon(0 100%,0 58%,46% 100%,100% 26%,100% 100%)}
.agw-hero-h1 .elementor-heading-title{letter-spacing:-.015em}
.agw-hero-lead{max-width:62ch}
#agw-hero-cta{margin-top:6px}

/* ---------- step numerals ---------- */
.agw-stepnum .elementor-heading-title{
  position:relative;display:inline-block;padding-bottom:14px;line-height:1}
.agw-stepnum .elementor-heading-title::after{
  content:'';position:absolute;left:0;bottom:0;width:46px;height:4px;
  background:linear-gradient(270deg,#015189 0%,#1187BB 100%)}

/* ---------- centred / narrowed helpers ---------- */
.agw-center .elementor-heading-title,
.agw-center .elementor-widget-container{text-align:center}
.agw-narrow .elementor-widget-container{max-width:70ch;margin-left:auto;margin-right:auto}

/* ---------- image with the brand corner cut ---------- */
.agw-cut-img img{
  display:block;width:100%;height:auto;border-radius:0!important;
  -webkit-clip-path:polygon(0 0,100% 0,100% 86%,88% 100%,0 100%);
  clip-path:polygon(0 0,100% 0,100% 86%,88% 100%,0 100%)}

/* ---------- gate band ---------- */
#agw-gate{position:relative;overflow:hidden}
#agw-gate::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:60px;z-index:2;
  background:#fff;pointer-events:none;
  -webkit-clip-path:polygon(0 100%,0 62%,52% 100%,100% 34%,100% 100%);
  clip-path:polygon(0 100%,0 62%,52% 100%,100% 34%,100% 100%)}

/* ---------- tick list ---------- */
.agw-ticks .elementor-icon-list-icon{margin-top:2px}

/* ---------- login / learning / help page shells ---------- */
#agw-auth{position:relative;overflow:hidden}
.agw-authcard .elementor-widget-container{background:#fff}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  #agw-hero::after,#agw-gate::after{height:44px}
}
@media (max-width:767px){
  #agw-hero::after,#agw-gate::after{height:28px}
  .agw-el-btn .elementor-button,
  .agw-el-btn-outline .elementor-button{width:100%;justify-content:flex-start}
  .agw-cut-img img{-webkit-clip-path:none;clip-path:none}
}

/* =========================================================================
   HEADER / FOOTER (Elementor Pro theme-builder templates)
   ========================================================================= */

#agw-header{position:relative;z-index:20}
#agw-hdr-row{align-items:stretch}

/* The white logo slab, wedged into the gradient bar.
   One element, one clip-path: the right edge slopes outward towards the
   bottom, exactly as on alliancegc.co.uk. No off-canvas pseudo-elements -
   those depend on a containing block that Elementor does not guarantee. */
#agw-logo-slab{
  position:relative;z-index:2;
  flex:0 0 auto!important;
  width:290px!important;
  padding:10px 78px 10px 8px!important;
  align-items:center;justify-content:center;
  background:#fff!important;
  -webkit-clip-path:polygon(0 0,calc(100% - 64px) 0,100% 100%,0 100%);
  clip-path:polygon(0 0,calc(100% - 64px) 0,100% 100%,0 100%)}
.agw-hdr-logo img{display:block;max-height:52px;width:auto}
.agw-hdr-logo .elementor-widget-container{line-height:0}

/* nav */
#agw-nav{min-width:0;flex:1 1 auto!important;width:auto!important}
#agw-nav-row{padding:14px 0}
.agw-navlink .elementor-button{
  background:transparent!important;border:0!important;padding:8px 14px!important;
  color:#fff!important;border-radius:0!important;
  font-family:'Lato',Arial,sans-serif;letter-spacing:.01em;
  transition:opacity .2s ease}
.agw-navlink .elementor-button:hover{opacity:.72;color:#fff!important;text-decoration:none}
.agw-navlink .elementor-button::after{                 /* underline on hover */
  content:'';position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  background:#fff;transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease}
.agw-navlink .elementor-button{position:relative}
.agw-navlink .elementor-button:hover::after{transform:scaleX(1)}

.agw-navbtn .elementor-button{
  background:rgba(255,255,255,.14)!important;border:2px solid rgba(255,255,255,.75)!important;
  color:#fff!important;border-radius:0!important;padding:9px 20px!important;
  transition:background .2s ease,color .2s ease}
.agw-navbtn .elementor-button:hover{background:#fff!important;color:#015189!important;text-decoration:none}

/* auth-aware nav — body classes come from Alliance_LMS_Access::body_class() */
body.agw-out .agw-nav-in{display:none!important}
body.agw-in  .agw-nav-out{display:none!important}

/* footer */
#agw-footer a{color:#9A9A9A;text-decoration:none;transition:color .2s ease}
#agw-footer a:hover{color:#fff;text-decoration:none}
/* Size the footer logo from ONE axis only. It previously carried max-height:78px
   here while the Elementor widget also set width:62%; Elementor's generated rule
   (.elementor-48 .elementor-element-985c2987 img, 0-3-1) beat the width:auto in
   this rule (0-1-1), so the image was pinned to 225x78 against a natural 708x455
   and rendered nearly twice as wide as it should be. The width control has been
   removed from the widget; height:auto here keeps the aspect honest whatever the
   widget does next. 140px tall lands at ~218px wide, close to the 236x151 the
   client's own site footer uses. */
.agw-foot-logo img{display:block;width:auto;height:auto;max-height:140px;max-width:100%}
.agw-footlist{list-style:none;margin:0;padding:0}
.agw-footlist li{margin:0 0 7px}
.agw-foot-h .elementor-heading-title{letter-spacing:.01em}
.agw-foot-legal .elementor-widget-container{text-align:right}

/* ---------- header responsive ---------- */
@media (max-width:1024px){
  .agw-hdr-logo img{max-height:44px}
  #agw-logo-slab{width:236px!important;padding:10px 62px 10px 6px!important;
    -webkit-clip-path:polygon(0 0,calc(100% - 52px) 0,100% 100%,0 100%);
    clip-path:polygon(0 0,calc(100% - 52px) 0,100% 100%,0 100%)}
  .agw-navlink .elementor-button{padding:8px 10px!important;font-size:14px!important}
}
@media (max-width:880px){
  #agw-hdr-row{flex-wrap:wrap!important}
  #agw-logo-slab{width:auto!important;flex:0 0 auto}
  #agw-nav{flex:1 1 100%;width:100%!important;padding:0!important}
  #agw-nav-row{justify-content:center!important;flex-wrap:wrap!important;
    padding:4px 8px 12px;gap:2px!important}
  .agw-navlink .elementor-button{padding:7px 9px!important;font-size:13.5px!important}
  .agw-navbtn .elementor-button{padding:7px 14px!important;font-size:12.5px!important}
  .agw-foot-legal .elementor-widget-container{text-align:left}
}
@media (max-width:767px){
  .agw-hdr-logo img{max-height:38px}
  #agw-logo-slab{width:184px!important;padding:8px 46px 8px 4px!important;
    -webkit-clip-path:polygon(0 0,calc(100% - 38px) 0,100% 100%,0 100%);
    clip-path:polygon(0 0,calc(100% - 38px) 0,100% 100%,0 100%)}
  /* the nav buttons must not inherit the full-width page-button rule */
  .agw-navlink .elementor-button,
  .agw-navbtn .elementor-button{width:auto!important}
}


/* The theme prints the page title above Elementor content; our pages carry
   their own mastheads, so suppress it. Paired with hide_title on each doc. */
body.elementor-page .page-header,
body.elementor-page .entry-title,
body.elementor-page h1.entry-title{display:none!important}

/* ---------- page shell defences ----------
   Something in the stack leaves an 8px inset and lets wide children create a
   horizontal scroll; both make the full-bleed bands stop short of the edge. */
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}
#agw-auth{padding:0!important;width:100%!important;max-width:100%!important}
#agw-auth-row{gap:0!important;--gap:0px!important;--row-gap:0px!important;--column-gap:0px!important}
#agw-auth-row>.e-con{margin:0!important}

/* full-bleed bands must not be constrained by a theme content wrapper */
#agw-hero,#agw-gate,#agw-header,#agw-footer,
#agw-mast-learn,#agw-mast-help,#agw-course-mast{
  width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}

/* ---------- inner-page mastheads: same angled base as the hero ---------- */
#agw-mast-learn,#agw-mast-help,#agw-course-mast{position:relative;overflow:hidden}
#agw-mast-learn::after,#agw-mast-help::after,#agw-course-mast::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:54px;z-index:2;
  background:#fff;pointer-events:none;
  -webkit-clip-path:polygon(0 100%,0 64%,48% 100%,100% 36%,100% 100%);
  clip-path:polygon(0 100%,0 64%,48% 100%,100% 36%,100% 100%)}
@media (max-width:1024px){
  #agw-mast-learn::after,#agw-mast-help::after,#agw-course-mast::after{height:34px}
}
@media (max-width:767px){
  #agw-mast-learn::after,#agw-mast-help::after,#agw-course-mast::after{height:22px}
}

/* ---------- course template ---------- */
#agw-course-side>*+*{margin-top:22px}
.agw-course-thumb img{display:block;width:100%;height:auto;
  -webkit-clip-path:polygon(0 0,100% 0,100% 88%,88% 100%,0 100%);
  clip-path:polygon(0 0,100% 0,100% 88%,88% 100%,0 100%)}
.agw-course-steps .learndash-wrapper{margin-top:0}
@media (max-width:767px){
  .agw-course-thumb img{-webkit-clip-path:none;clip-path:none}
}

/* ---------- My Learning ---------- */
#agw-learn .agw-profileblock{margin-bottom:0}