/* ==========================================================================
   TheHourlyNews
   Base Styles
   Version: 2.0
   ========================================================================== */


/* ==========================================================================
   CSS RESET
   ========================================================================== */

   *,
   *::before,
   *::after{
       box-sizing:border-box;
       margin:0;
       padding:0;
   }
   
   html{
       scroll-behavior:smooth;
       -webkit-text-size-adjust:100%;
   }
   
   body{
       min-height:100vh;
   }
   
   img,
   picture,
   svg,
   canvas,
   video{
       display:block;
       max-width:100%;
   }
   
   button,
   input,
   textarea,
   select{
       font:inherit;
   }
   
   button{
       background:none;
       border:none;
       cursor:pointer;
   }
   
   table{
       border-collapse:collapse;
       border-spacing:0;
   }
   
   ul,
   ol{
       list-style:none;
   }
   
   a{
       text-decoration:none;
       color:inherit;
   }
   
   /* ==========================================================================
      ROOT DOCUMENT
      ========================================================================== */
   
   html{
   
       font-size:16px;
   
       overflow-x:hidden;
   
   }
   
   body{
   
       background:var(--color-background);
   
       color:var(--color-text);
   
       font-family:var(--font-body);
   
       font-size:var(--text-base);
   
       line-height:var(--leading-body);
   
       font-weight:var(--weight-regular);
   
       text-rendering:optimizeLegibility;
   
       -webkit-font-smoothing:antialiased;
   
       -moz-osx-font-smoothing:grayscale;
   
       overflow-x:hidden;
   
   }
   
   /* ==========================================================================
      TYPOGRAPHY
      ========================================================================== */
   
   h1,
   h2,
   h3,
   h4,
   h5,
   h6{
   
       color:var(--color-heading);
   
       font-family:var(--font-heading);
   
       line-height:var(--leading-heading);
   
       letter-spacing:var(--tracking-tight);
   
       font-weight:var(--weight-bold);
   
       text-wrap:balance;
   
   }
   
   h1{
   
       font-size:var(--heading-1);
   
   }
   
   h2{
   
       font-size:var(--heading-2);
   
   }
   
   h3{
   
       font-size:var(--heading-3);
   
   }
   
   h4{
   
       font-size:var(--heading-4);
   
   }
   
   h5{
   
       font-size:var(--heading-5);
   
   }
   
   h6{
   
       font-size:var(--heading-6);
   
   }
   
   p{
   
       max-width:var(--reading-width);
   
       margin-bottom:var(--space-5);
   
   }
   
   small{
   
       font-size:var(--text-sm);
   
   }
   
   strong{
   
       font-weight:var(--weight-semibold);
   
   }
   
   em{
   
       font-style:italic;
   
   }
   
   /* ==========================================================================
      LINKS
      ========================================================================== */
   
   a{
   
       transition:
           color var(--transition-fast),
           opacity var(--transition-fast);
   
   }
   
   a:hover{
   
       color:var(--color-accent);
   
   }
   
   a:focus-visible{
   
       outline:none;
   
       box-shadow:var(--focus-ring);
   
       border-radius:var(--radius-xs);
   
   }
   
   /* ==========================================================================
      MEDIA
      ========================================================================== */
   
   img{
   
       width:100%;
   
       height:auto;
   
   }
   
   figure{
   
       overflow:hidden;
   
   }
   
   figure img{
   
       transition:
           transform .45s ease;
   
   }
   
   figure:hover img{
   
       transform:scale(1.04);
   
   }
   
   /* ==========================================================================
      BUTTONS
      ========================================================================== */
   
   button{
   
       transition:
   
           background var(--transition-base),
   
           color var(--transition-base),
   
           transform var(--transition-fast);
   
   }
   
   button:hover{
   
       transform:translateY(-1px);
   
   }
   
   button:active{
   
       transform:translateY(0);
   
   }
   
   /* ==========================================================================
      FORMS
      ========================================================================== */
   
   input,
   textarea,
   select{
   
       width:100%;
   
       border:1px solid var(--color-border);
   
       border-radius:var(--input-radius);
   
       background:var(--white);
   
   }
   
   input{
   
       min-height:var(--input-height);
   
       padding-inline:var(--space-4);
   
   }
   
   textarea{
   
       min-height:180px;
   
       resize:vertical;
   
       padding:var(--space-4);
   
   }
   
   input:focus,
   textarea:focus,
   select:focus{
   
       outline:none;
   
       border-color:var(--color-accent);
   
       box-shadow:var(--focus-ring);
   
   }
   
   /* ==========================================================================
      TABLES
      ========================================================================== */
   
   table{
   
       width:100%;
   
   }
   
   th{
   
       text-align:left;
   
       font-weight:var(--weight-semibold);
   
   }
   
   th,
   td{
   
       padding:var(--space-3);
   
   }

   /* ==========================================================================
   CONTAINER
   ========================================================================== */

.container{

    width:min(100% - 2rem,var(--container-xl));

    margin-inline:auto;

}

.container--wide{

    width:min(100% - 2rem,var(--container-2xl));

    margin-inline:auto;

}

.container--full{

    width:min(100% - 2rem,var(--container-full));

    margin-inline:auto;

}

.container--reading{

    width:min(100% - 2rem,var(--reading-width));

    margin-inline:auto;

}

/* ==========================================================================
   MAIN
   ========================================================================== */

main{

    display:block;

}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

section{

    padding-block:var(--section-md);

}

/* ==========================================================================
   HORIZONTAL RULE
   ========================================================================== */

hr{

    border:none;

    border-top:1px solid var(--color-border);

}

/* ==========================================================================
   SELECTION
   ========================================================================== */

::selection{

    background:var(--color-accent);

    color:var(--white);

}

/* ==========================================================================
   SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:var(--gray-100);

}

::-webkit-scrollbar-thumb{

    background:var(--gray-400);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--gray-500);

}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.visually-hidden{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}

.skip-link{

    position:absolute;

    left:-9999px;

    top:1rem;

    background:var(--color-primary);

    color:var(--white);

    padding:.9rem 1.2rem;

    border-radius:var(--radius-md);

    z-index:var(--z-toast);

}

.skip-link:focus{

    left:1rem;

}

/* ==========================================================================
   FOCUS
   ========================================================================== */

:focus-visible{

    outline:none;

    box-shadow:var(--focus-ring);

}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.w-100{

    width:100%;

}

.hidden{

    display:none !important;

}

.flex{

    display:flex;

}

.grid{

    display:grid;

}

.block{

    display:block;

}

.inline{

    display:inline;

}

/* ==========================================================================
   SPACING UTILITIES
   ========================================================================== */

.mt-0{margin-top:0;}
.mt-1{margin-top:var(--space-1);}
.mt-2{margin-top:var(--space-2);}
.mt-3{margin-top:var(--space-3);}
.mt-4{margin-top:var(--space-4);}
.mt-5{margin-top:var(--space-5);}
.mt-6{margin-top:var(--space-6);}
.mt-8{margin-top:var(--space-8);}

.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:var(--space-1);}
.mb-2{margin-bottom:var(--space-2);}
.mb-3{margin-bottom:var(--space-3);}
.mb-4{margin-bottom:var(--space-4);}
.mb-5{margin-bottom:var(--space-5);}
.mb-6{margin-bottom:var(--space-6);}
.mb-8{margin-bottom:var(--space-8);}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce){

    html{

        scroll-behavior:auto;

    }

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

    }

}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print{

    body{

        background:#ffffff;

        color:#000000;

    }

    .site-header,
    .site-footer,
    .newsletter-section,
    .mobile-navigation{

        display:none !important;

    }

}