/*
Theme Name: RTO Exam Blog
Description: Custom classic theme for the RTO Exam blog, reusing the main site's navbar and footer.
Version: 1.0.0
Text Domain: rtoexam-blog
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

:root {
    --rto-dark: #333333;
    --rto-header: #494949;
    --rto-accent: #FFEB3B;
    --rto-text: #444444;
    --rto-muted: #8A8A8A;
    --rto-border: #E6E6E6;
    --rto-light-bg: #F5F5F5;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    overflow-x: hidden;
}

body {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--rto-text);
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

ul {
    list-style: none;
}

/* keeps the footer at the bottom on short pages */
.site-main {
    flex: 1 0 auto;
}

/* Same content width as the main site's materialize ".container" */
.container {
    width: 80%;
    max-width: 1280px;
    margin: 0 auto;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* =============================================
   Responsive Breakpoints
   ============================================= */

/* 992px — tablets landscape */
@media (max-width: 992px) {
    .container {
        width: 90%;
    }
}

/* 600px — phones */
@media (max-width: 600px) {
    .container {
        width: 100%;
        padding: 0 16px;
    }
}