/*
 * Amazium CSS Framework
 * https://amazium.co.uk
 *
 * A lightweight, modern CSS framework built with Grid & Flexbox.
 * Designed and maintained by Mike Ballan.
 *
 * Licensed under MIT (https://opensource.org/licenses/MIT)
 */

/***********************************************
Mobile First - This applies from 0px to 749px
***********************************************/

body                                            { padding:0; background-color:var(--color-ui-0); display:flex; flex-direction:column; min-height:100vh; }

hr                                              { margin:0; width:50px; border-width:3px; border-radius:5px; }
*+hr, hr+*                                      { margin-top:20px; }

.mike                                           { width:200px; height:auto; }

/***** Aside *****/
.aside                                          { padding:0; display:none; flex-direction:column; width:260px; height:100vh; background-color:var(--color-brand-900); font-size:14px; color:var(--color-ui-0); position:fixed; top:0; left:0; z-index:10; transition:all 0.2s ease; }
.aside a                                        { display:flex; gap:8px; align-items:center; text-decoration:none; }

.icon--amazium                                  { margin-right:40px; width:40px; height:40px; }

.aside--header                                  { padding:20px 20px 20px 20px; }
.aside--body                                    { padding:0 20px; height:100%; overflow-y:auto; }
.aside--footer                                  { padding:20px 20px 20px 20px; }

.nav--aside                                     { margin:0; padding:0; list-style:none; }
.nav--aside li                                  { margin:0; padding:0; transition:box-shadow 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s; -moz-transition:box-shadow 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s; -webkit-transition:box-shadow 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s; -o-transition:box-shadow 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s; }
.nav--aside li.label:first-of-type              { padding-top:20px; }
.nav--aside li.label                            { padding-top:30px; flex-direction:row; align-items:center; gap:var(--space-2); box-shadow:none; color:var(--color-ui-600); font-weight:normal; text-transform:uppercase; }
.nav--aside li a                                { padding:3px 0; width:100%; min-height:auto; color:var(--color-ui-0); background-color:transparent; }

.nav--aside li.active,
.nav--aside li.active a,
.nav--aside li.active a:hover,
.nav--aside li a:hover                          { color:var(--color-accent-300); }

.nav--aside .child                              { margin:0; padding:0; font-size:1.4rem; list-style:none; display:flex; flex-direction:column; transition:all 0.2s ease; }
.nav--aside .child                              { max-height:0; overflow:hidden; transition:max-height 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s; }

.nav--aside .child li                           { margin:0; padding:0 0 0 26px; box-shadow:none; text-transform:none; position:relative; }
.nav--aside .child li:first-of-type a           { padding-top:5px; }

.nav--aside .child li:before                    { content:''; background-color:var(--color-ui-700); width:3px; height:3px; border-radius:3px; position:absolute; top:50%; transform:translateY(-50%); left:12px; }
.nav--aside .child li a                         { padding:5px 0; color:var(--color-ui-0); }
.nav--aside .child li a:hover                   { color:var(--color-brand-500); }

.nav--aside .child li.active:before             { background-color:var(--color-brand-500); }
.nav--aside .child li.active a,
.nav--aside .child li.active a:hover            { color:var(--color-brand-500); }

/***** Sections *****/
.section                                        { padding:20px; overflow:hidden; background-color:var(--color-ui-0); display:flex; flex-direction:column; gap:60px; position:relative; top:0; left:0; }

.section--homepage                              { padding:40px; background-image:url(../images/bg-01.png); background-repeat:no-repeat; background-size:cover; background-attachment:fixed; gap:200px; justify-content:center; background-color:transparent; font-size:var(--text-md); color:var(--color-ui-0);
  .icon--amazium                                { margin:0; width:150px; height:150px; }
  h1                                            { color:var(--color-ui-0);
    small                                       { font-size:var(--text-lg); position:absolute; }
  }
  .txt--l                                       { font-family:'txt-title', sans-serif; }
  .icon-scroll                                  { margin:20px auto 2px; display:none; width:26px; height:40px; box-shadow:inset 0 0 0 2px var(--color-ui-0); border-radius:25px; position:absolute; left:50%; bottom:40px; transform:translateX(-50%); }
  .icon-scroll:before                           { margin-left:-2px; content:''; width:5px; height:5px; background-color:var(--color-ui-0); border-radius:50%; position:absolute; left:50%; top:5px; animation-duration:1.5s; animation-iteration-count:infinite; animation-name:scroll; }
}

.section--body                                  { padding:120px 40px; position:relative; z-index:90;
  .cards                                        { grid-template-columns:repeat( auto-fit, minmax(280px, 1fr) ); }
}

.section--hobo                                  { padding:0 40px 120px 40px; position:relative; z-index:90; }

.section--bg                                    { background-image:url(../images/bg-00.png); background-repeat:no-repeat; background-size:cover; }

/***** Breadcrumb *****/
.breadcrumb                                     { margin:0; padding:0; list-style:none; display:flex; gap:12px; font-size:var(--text-xs); }
.breadcrumb li                                  { margin:0; padding:0; display:flex; gap:8px; align-items:center; color:var(--color-ui-700); position:relative; }
.breadcrumb li+*                                { padding-left:16px; color:var(--color-ui-700); }
.breadcrumb li+*:before                         { content:''; width:4px;  display:inline-block; height:4px; border-style:solid; border-width:1px 1px 0 0; left:-2px; position:absolute; top:50%; vertical-align:top; transform:translateY(-50%) rotate(45deg); }

.breadcrumb a                                   { display:flex; justify-content:center; align-items:center; text-decoration:none; color:var(--color-ui-900); }
.breadcrumb a:hover                             { color:var(--color-brand-500); }

/***** Pagination *****/
.pagination                                     { margin:0; padding:0; list-style:none; display:none; flex-direction:row; justify-content:space-between; width:calc(100vw - 336px); background-color:var(--color-ui-0); box-shadow:0px -1px 0px 0px var(--color-ui-400); position:fixed; bottom:0; right:38px; z-index:99; }
.pagination a                                   { padding:20px 0; text-decoration:none; font-weight:bold; display:flex; gap:8px; align-items:center; justify-content:flex-start; }
.pagination li:last-child a                     { justify-content:flex-end; }

/***** Thumbs *****/
.thumb--image                                   { padding:20px; aspect-ratio:16 / 9; display:flex; align-items:center; justify-content:center; background-color:var(--color-ui-400); border-radius:var(--radius-sm); }
.thumb--image .icon                             { width:60%; height:auto; aspect-ratio:2 / 1; }
.thumb--image .icon--s                          { width:auto; max-height:50px; }
.thumb--image .icon--spinner                    { animation:spinner 3s linear 0.2s infinite; }

/***** Cards override *****/
.cards                                          { color:var(--color-ui-900); }
.card.card--width-half                          { width:50%; }

.card.card--design-hobo                         { padding:var(--space-4); background-color:var(--color-brand-800); color:var(--color-ui-0); }
.icon--hobo                                     { width:230px; height:140px; }

/***** Home page footer *****/
.footer                                         { padding:20px; background-color:var(--color-brand-900); color:var(--color-ui-500);
  .txt--amazium                                 { font-family:'txt-title', sans-serif; font-size:var(--text-md); line-height:var(--leading-lg); color:var(--color-ui-0); align-items:center; display:flex; gap:6px; text-decoration:none; }
  p                                             { font-size:var(--text-xs); line-height:var(--leading-xs); }
  a                                             { color:var(--color-ui-0); }
}


/***********************************************
Demo styling overrides
***********************************************/
pre.demo                                        { line-height:22px; }
*+pre.demo                                      { margin-top:28px; }
pre.demo code                                   { background-color:var(--color-ui-400); border:none; color:var(--color-ui-900); }

.card__demo                                     { margin-top:auto; padding:var(--space-4); border-radius:0 0 var(--radius-md) var(--radius-md);
  pre.demo                                      { margin:0;
    code                                 { background-color:var(--color-ui-400); border:none; color:var(--color-ui-900);  }
  }
}

.wrapper                                        { display:flex; flex-direction:column; width:100%; box-shadow:0px 0px 0px 1px var(--color-ui-500); border-radius:var(--radius-md); }
.wrapper+.wrapper                               { margin-top:40px; }
.example                                        { padding:20px; display:flex; flex-direction:column; gap:20px; }
.example + pre.demo                             { margin:0; }
.example + pre.demo code                        { border-radius:0 0 var(--radius-sm) var(--radius-sm); }

.grid__item--demo                               { padding:var(--space-2); background:var(--color-ui-400); align-items:center; text-align:center; font-size:var(--text-xs); color:var(--color-ui-800); text-transform:uppercase; border-radius:var(--space-1); overflow:hidden; }
.grid__item--demo .grid__item--demo             { margin-top:var(--space-2); border:1px dashed var(--color-ui-800); }

.btn-container                                  { display:flex; gap:var(--space-2); }

/***** Color examples *****/
.colors                                         { padding-inline-start:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-4); font-size:var(--text-xs);
  &+*                                           { margin-top:var(--space-4); }
  li                                            { padding:var(--space-4); height:80px; line-height:var(--leading-xs); display:flex; flex-direction:column; justify-content:flex-end; border-radius:var(--radius-md); }
}

.color-brand-100                                { background-color:var(--color-brand-100); }
.color-brand-200                                { background-color:var(--color-brand-200); }
.color-brand-300                                { background-color:var(--color-brand-300); }
.color-brand-400                                { background-color:var(--color-brand-400); }
.color-brand-500                                { background-color:var(--color-brand-500); color:var(--color-ui-0); }
.color-brand-600                                { background-color:var(--color-brand-600); color:var(--color-ui-0); }
.color-brand-700                                { background-color:var(--color-brand-700); color:var(--color-ui-0); }
.color-brand-800                                { background-color:var(--color-brand-800); color:var(--color-ui-0); }
.color-brand-900                                { background-color:var(--color-brand-900); color:var(--color-ui-0); }

.color-accent-100                               { background-color:var(--color-accent-100); }
.color-accent-300                               { background-color:var(--color-accent-300); }
.color-accent-500                               { background-color:var(--color-accent-500); color:var(--color-ui-0); }
.color-accent-700                               { background-color:var(--color-accent-700); color:var(--color-ui-0); }
.color-accent-800                               { background-color:var(--color-accent-800); color:var(--color-ui-0); }

.color-positive-100                             { background-color:var(--color-positive-100); box-shadow:0 0 0 1px var(--color-positive-300); }
.color-positive-300                             { background-color:var(--color-positive-300); }
.color-positive-500                             { background-color:var(--color-positive-700); color:var(--color-ui-0); }
.color-positive-700                             { background-color:var(--color-positive-500); color:var(--color-ui-0); }
.color-positive-800                             { background-color:var(--color-positive-800); color:var(--color-ui-0); }

.color-negative-100                             { background-color:var(--color-negative-100); box-shadow:0 0 0 1px var(--color-negative-300); }
.color-negative-300                             { background-color:var(--color-negative-300); }
.color-negative-500                             { background-color:var(--color-negative-700); color:var(--color-ui-0); }
.color-negative-700                             { background-color:var(--color-negative-500); color:var(--color-ui-0); }
.color-negative-800                             { background-color:var(--color-negative-800); color:var(--color-ui-0); }

.color-warning-100                              { background-color:var(--color-warning-100); box-shadow:0 0 0 1px var(--color-warning-300); }
.color-warning-300                              { background-color:var(--color-warning-300); }
.color-warning-500                              { background-color:var(--color-warning-700); color:var(--color-ui-0); }
.color-warning-700                              { background-color:var(--color-warning-500); color:var(--color-ui-0); }
.color-warning-800                              { background-color:var(--color-warning-800); color:var(--color-ui-0); }

.color-info-100                                 { background-color:var(--color-info-100); box-shadow:0 0 0 1px var(--color-info-300); }
.color-info-300                                 { background-color:var(--color-info-300); }
.color-info-500                                 { background-color:var(--color-info-500); color:var(--color-ui-0); }
.color-info-700                                 { background-color:var(--color-info-700); color:var(--color-ui-0); }
.color-info-800                                 { background-color:var(--color-info-800); color:var(--color-ui-0); }

.color-ui-0                                     { background-color:var(--color-ui-0); box-shadow:0 0 0 1px var(--color-ui-500); }
.color-ui-100                                   { background-color:var(--color-ui-100); box-shadow:0 0 0 1px var(--color-ui-500); }
.color-ui-200                                   { background-color:var(--color-ui-200); box-shadow:0 0 0 1px var(--color-ui-500); }
.color-ui-300                                   { background-color:var(--color-ui-300); box-shadow:0 0 0 1px var(--color-ui-500); }
.color-ui-400                                   { background-color:var(--color-ui-400); }
.color-ui-500                                   { background-color:var(--color-ui-500); }
.color-ui-600                                   { background-color:var(--color-ui-600); }
.color-ui-700                                   { background-color:var(--color-ui-700); color:var(--color-ui-0); }
.color-ui-800                                   { background-color:var(--color-ui-800); color:var(--color-ui-0); }
.color-ui-900                                   { background-color:var(--color-ui-900); color:var(--color-ui-0); }

.demo-box                                       { width:50px; height:50px; background-color:var(--color-brand-800); }

.table--demo p                                  { width:100%; }


/***********************************************
Tablet - This applies from 750px onwards
***********************************************/
@media (min-width:750px)                        {
  .section--homepage                            { min-height:96vh; }
  .section--body                                { padding:120px 40px; }
  .section--hobo                                { padding:0 40px 120px 40px; }
  .pagination                                   { display:flex; }
}

/***********************************************
Desktop - This applies from 1000px onwards
***********************************************/
@media (min-width:1000px)                       {
  .homepage .header                               { display:flex; }

  .aside                                        { display:flex; }

  .mobile                                       { display:none; }
  .section                                      { padding:40px 40px 100px 300px; }
  .section--homepage                            { padding:0;
    h1                                          { font-size:5.8rem; line-height:7.8rem; }
    .icon-scroll                                { display:inline-flex; }
  }
  .section--body                                { padding:120px 40px; }
  .section--hobo                                { padding:0 40px 120px 40px; }
}

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


/***********************************************
Scroll animation
***********************************************/
@-webkit-keyframes scroll {
  0%                                            { opacity:1; }
  100%                                          { opacity:0; transform:translateY(18px); }
}
@-moz-keyframes scroll {
  0%                                            { opacity:1; }
  100%                                          { opacity:0; transform:translateY(18px); }
}
@-ms-keyframes scroll {
  0%                                            { opacity:1; }
  100%                                          { opacity:0; transform:translateY(18px); }
}
@-o-keyframes scroll {
  0%                                            { opacity:1; }
  100%                                          { opacity:0; transform:translateY(18px); }
}
@keyframes scroll {
  0%                                            { opacity:1; }
  100%                                          { opacity:0; transform:translateY(18px); }
}