/*
* Amazium (http://www.amazium.co.uk)
* Copyright 2010 - 2025, Mike Ballan
* Licensed under MIT (https://github.com/OwlyStuff/Amazium/blob/master/LICENSE)
*/

body                                            { padding:0; background-color:var(--color-brand-100); background-position:top; background-size:200%; background-repeat:no-repeat; display:flex; flex-direction:column; gap:0; color:var(--color-brand-900); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  &.about                                       { background-image:url(../images/bg-01.png); }
  &.services                                    { background-image:url(../images/bg-04.png); }
  &.policies                                    { background-image:url(../images/bg-01.png); }
  &.safeguarding                                { background-image:url(../images/bg-04.png); }
  &.support                                     { background-image:url(../images/bg-01.png); }
  &.contact                                     { background-image:url(../images/bg-04.png); }
  &.thankyou                                    { background-image:url(../images/bg-04.png); }
}

.txt--orange                                    { color:var(--color-accent-500); }
.txt--green                                     { color:var(--color-positive-500); }
.txt--blue                                      { color:var(--color-accent-800); }

/***** Banner *****/
.banner                                         { padding:20px 82px 20px 20px; display:flex; align-items:center; justify-content:center; font-size:var(--text-sm); min-height:82px; background-color:var(--color-brand-600); background-image:url(../images/bg-03.png); background-position:center; background-size:cover; background-repeat:no-repeat; color:var(--color-ui-0); font-weight:bold; position:relative; }

/***** Header *****/
.header                                         { padding:80px 20px; display:flex; align-items:center; justify-content:center; gap:16px; text-align:center; background-color:var(--color-brand-200); background-image:url(../images/bg-01.png); background-position:bottom; background-size:cover; background-repeat:no-repeat; position:relative;
  .grid__item                                   { gap:20px; }
  .txt--center,
  h1                                            { text-align:center; justify-content:center; align-items:center; }
  h1                                            { max-width:800px; }
  p                                             { font-size:var(--text-md); line-height:var(--leading-md); letter-spacing:2px; }
  .icon--down                                   { position:absolute; top:auto; bottom:0; left:50%; transform:translateX(-50%); animation-duration:3s; animation-iteration-count:infinite; animation-name:animateDown; }
  .logo                                         { width:100%; max-width:280px; height:auto; }
}

/***** Sections *****/
.section                                        { padding:20px; display:flex; flex-direction:column; gap:80px; overflow:hidden;
   .grid                                        { position:relative; }
}

.section--prelude                               { margin:40px 0; background-color:var(--color-brand-300); color:var(--color-brand-700);
  h4,
  strong                                        { color:var(--color-brand-600); }
  
  .list--bullet > li:before                     { background-color:var(--color-brand-500); }
  
  .card                                         { background-color:var(--color-brand-600); color:var(--color-ui-0); 
    h4                                          { color:var(--color-brand-200); }
  }
}

.section--chambray                              { background-color:var(--color-brand-600); color:var(--color-brand-100); }

.bg--right                                      { position:absolute; top:50%; transform:translateY(-50%); right:-120px; }
.bg--left                                       { position:absolute; top:50%; transform:translateY(-50%); left:-120px; }

.section--bgLeft                                { justify-content:center; background-position:calc(50% - 430px) center; background-repeat:no-repeat; }
.section--bgRight                               { justify-content:center; background-position:calc(50% - -430px) center; background-repeat:no-repeat; }
.section--bgCenter                              { background-size:cover; background-position:center;  }

.section--full .grid 														{ min-height:calc(100vh - 340px); }

.grid--card                                     { padding:30px; background-color:var(--color-brand-300); border-radius:30px; background-image:url(../images/bg-02.png); background-position:center; background-size:200%; background-repeat:no-repeat;
  .bg--left                                     { top:30%; transform:translateY(-50%); left:-90px; }
}

.img--sm                                        { width:100%; max-width:120px; height:auto; }
.img--md                                        { width:100%; max-width:300px; height:auto; }
.img--max-250                                   { max-width:180px; }

/***** Footer *****/
.footer                                         { padding:0; display:flex; flex-direction:column; align-items:center; background-color:var(--color-brand-600); background-image:url(../images/bg-03.png); background-position:0px -300px; background-size:cover; background-repeat:no-repeat; font-size:font-size:var(--text-xs); color:var(--color-brand-200);
  .grid__item                                   { padding:20px; flex-direction:row; align-items:center; }
  
  .footer--sub                                  { background-color:rgba(0, 0, 0, .4); font-size:var(--text-xs);
    .grid__item                                 { padding:16px 20px; }
    a:hover                                     { padding:10px 10px; text-decoration:none; background-color:transparent; color:var(--color-brand-500); }
  }

  .logo                                         { width:auto; height:60px;
  	&.logo--sm 																	{ height:30px; }
	}
  
  h5                                            { color:inherit; font-size:var(--text-xs); line-height:var(--leading-xs); letter-spacing:2px; }
  
  ol                                            { margin:0 0 0 auto; padding:0; list-style:none; display:none; gap:16px; flex-direction:row; align-items:center;
    li                                          { font-weight:bold;
      a                                         { padding:10px 10px; text-decoration:none; border-radius:var(--radius-sm);
        &:hover,
        &.btn                                   { background-color:var(--color-ui-0); color:var(--color-brand-900); }
      }
    }
  }
}


/***********************************************
Tablet - This applies from 750px onwards
***********************************************/
@media (min-width:750px)                        {
  .section                                      { padding:40px;
    &--fullHeight                               { min-height:98vh; }
  }
  .section--bgLeft                              { min-height:570px; }
  .section--bgRight                             { min-height:570px; }
}

/***********************************************
Desktop - This applies from 1000px onwards
***********************************************/
@media (min-width:1000px)                       {
  [id]::before                                  { content:''; display:block; height:75px; margin-top:-75px; visibility:hidden; }

  /***** Banner *****/
  .banner                                       { padding:0 20px; min-height:inherit; height:60px; font-size:var(--text-md); position:fixed; top:0; left:0; right:0; z-index:10;
  	&+.navigation 															{ top:60px;
  		&+.header 																{ padding-top:200px; }
  	}
  }

  /***** Header *****/
  .header                                       { padding:100px 20px; min-height:90vh; 
    &+.section                                  { margin-top:100px; }
    .logo                                       { max-width:400px; }
  }

  .section                                      { padding:50px 40px; }
  .section--header                              { margin-top:100px; justify-content:center; }
  .section--prelude                             { padding:100px 40px; }
  .section--last                                { padding-bottom:130px; }

  .grid--card                                   { margin:40px auto; padding:50px 0; }

  .img--max-250                                 { max-width:250px; }

  .footer                                       {
    .grid__item                                 { padding:20px 40px; }
    ol                                          { display:flex; }
    .footer--sub .grid__item                    { padding:12px 40px; }
  }
}

/***********************************************
Desktop HD - This applies from 1200px onwards
***********************************************/
@media (min-width:1200px)                       {
	
}

/***********************************************
Mobile ONLY - This applies from 0px to 749px
***********************************************/
@media only screen and (max-width:749px)        {
  .section--bgLeft,
  .section--bgRight                             { background-image:none!important; }
}

/***********************************************
Scroll animation
***********************************************/
@-webkit-keyframes animateDown {
  0%                                            { bottom:50px; }
  50%                                           { bottom:60px; }
  100%                                          { bottom:50px; }
}
@-moz-keyframes animateDown {
  0%                                            { bottom:50px; }
  50%                                           { bottom:60px; }
  100%                                          { bottom:50px; }
}
@-ms-keyframes animateDown {
  0%                                            { bottom:50px; }
  50%                                           { bottom:60px; }
  100%                                          { bottom:50px; }
}
@-o-keyframes animateDown {
  0%                                            { bottom:50px; }
  50%                                           { bottom:60px; }
  100%                                          { bottom:50px; }
}
@keyframes animateDown {
  0%                                            { bottom:50px; }
  50%                                           { bottom:60px; }
  100%                                          { bottom:50px; }
}