/* This CSS page is used exclusively for Page 4 (Technology), 
as it doesn't share the same style to the rest of the pages. 
Most of the class names from style.css are reused here which makes it easier for JS coding, 
hence why we opted for 2 stylesheets instead of 1 */

/* universal box styling */
*,
*:before,
*:after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} 

/* This removes any default margin that may be applied by the browser. */
body {
    margin: 0; 
}

body {
    padding: 20px;
    background: #000064;
}

/* Navbar */

/* flexbox is used to arrange the navbar items/links horizontally with even space between them */
.navbar {
    width: 100%;
    display: flex; 
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #8b92c3;
    ;
}

.logo {
    width: 280px;
    cursor: pointer; /* makes the cursor change to pointer when hovering over the logo */
    padding-bottom: 5px;
}

/* used to remove default bullet points from the navigation list. */
.nav-list {
    list-style-type: none; 
}

/* displays list items horizontally with padding of 30px left and right */
.nav-list .list-item {
    display: inline-block; 
    padding: 0 30px;
}

.navbar a {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color:  #fff;
    text-decoration: none;
    text-transform: uppercase;
}

/* upon hovering over the links or when active, a yellow line will appear underneath the text*/
.nav-list li a:hover,
.nav-list li a.active { 
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: #FFDC00;
}

/* this menu bar will only be used in smaller screen size, hence why it's set to invisible on desktop version */
.menu {
    display: none; 
    cursor: pointer;
}

.menu-line {
    width: 25px;
    height: 2px;
    background-color:  #fff;
    margin-bottom: 5px;
}

/* this is for responsive media query only, hence making it invisible on wider screens */
.nav-list2 {
    display: none; 
}

/* Sticky navbar */
/** Code developed from: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp **/
/** The sticky class is added to the navbar with JS when it reaches its scroll position **/
.sticky {
    position: fixed; /* Fixes the navbar position at the top of the viewport. */
    top: 0;
    width: 100%;
    background: #000064;
    border-bottom: none;
    padding-top: 10px;
}

/** Navbar; media query for responsive design on smaller screens **/

@media all and (max-width: 992px) {
    .navbar {
        flex-direction: column;
        padding: 0;
        align-items: normal;
    }

    .menu {
        display: block;
        position: absolute;
        right: 40px;
        top: 40px;
    }

    .sticky .menu {
        top: 40px;
        right: 60px;
    }

    .sticky .logo {
        padding-top: 20px;
    }

    .logo {
        margin-left: 20px;
        width: 260px;
        padding-bottom: 10px;
    }

    .navbar.logo {
        align-items: flex-start;
    }

    .nav-list {
        display: none;
    }

    .nav-list2 {
        list-style-type: none;
        width: 100%;
        text-align: center;
        padding-top: 10px;
    }

    .nav-list2 .list-item2 {
        display: block;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #8b92c3;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .nav-list2 li a:hover,
    .nav-list2 li a.active { 
        border-bottom: 0;
        color: #FFDC00;
    }
    .active {
        display: block;
    }
}

/* Content */
.content {
    background-color: #fff;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-right: 60px;
    padding-left: 60px;
}

/* container used to create a two-column layout for the page. */
.column {
    display: flex;
    flex-wrap: wrap;
} 

.left {
    flex: 20%;
    padding-right: 20px;
}

.right {
    flex: 80%;
}

/** Content; headings & subheadings **/

.heading-container {
    padding-bottom: 40px;
}

.h1 {
    font-size: 42px;
    font-family:'Work Sans', sans-serif;
    font-weight: 700;
    color: #131212;
}

.h2 {
    font-size: 26px;
    font-family:'Work Sans', sans-serif;
    font-weight: 700;
    color: #131212;
}

.subheading {
    font-size: 22px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    margin-top: 15px;
    color: #131212;
}

/** Content; body-text, links & buttons **/
/* The body text container is given a margin on the left and right to create some space around the text. 
   The align-items property is set to flex-start to align the items to the start of the cross axis. */
.body-text-container {
    margin-right: 15%;
    margin-left: 15%;
    align-items: flex-start;
}

/* The body text is displayed as a block to place it on a new line. 
   The font size, line height, font family, and font weight are set to style the text. */
.body-text {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    font-size: 18px;
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    color: #131212;
}

.content a {
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #FFDC00;
    text-decoration: none;
    color: #131212;
}

.topic {
    color:#fff;
    background-color: #131212;
    display: table;
    text-align: center;
    padding: 5px 10px;
    font-size: 13px;
    font-family:'Poppins', sans-serif;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.topic a {
    text-decoration: none;
    color: #fff;
    border-bottom: 0;
}

/** Content; images & captions **/
.main-img {
    width: 100%;
}

/* The figcaption tag is used to add captions to images in the content area. */
figcaption {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    text-decoration: none;
    font-size: 13px;
    padding-bottom: 18px;
    color: #131212;
    text-indent: -12px;
} 

/* The caption is given a border at the bottom to separate it from the rest of the content. 
   Padding is added to create some space around the text. */
.caption {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #ccc;
    padding: 15px;
    display: table;
}

/** Content; left column **/
.name {
    text-transform: uppercase;
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    color:#67686c;
    letter-spacing: 1px;
    font-weight: 800;
}

.text {
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    color: #131212;
    font-weight: 600;
    padding-top: 4px;
}

/* The list class is designed as a flex container to allow for easy alignment and distribution of child elements. 
   The direction is set to column to stack the child elements vertically. */
.list {
    display: flex;
    flex-direction: column;
}

.title {
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    color: #131212;
    font-weight: 400;
    padding-top: 4px;
}

.article-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.share-icons {
    cursor: pointer;
    padding-top: 4px;
}

.share-icons i {
    padding-right: 15px;
    color: #131212;
    font-weight: 500;
    font-size: 15px;
}

.share-icons a {
    border-bottom: none;
}

/** Content; media query for responsive design on smaller screens **/
@media screen and (max-width: 992px) {

    .column {
        flex-direction: column;
    }

    /* The order of the left column is changed to 1 to display it before the other columns in smaller screens. */
    .left {
        order: 1;
    }

    .article-details {
        width: 100%;
        padding-top: 20px;
    }

    /* The margin of the body text container is reduced to create a more compact layout. */
    .body-text-container {
        margin-left: 5px;
        margin-right: 5px;
    }

    .article-details-section dl {
        display: flex;
        flex-direction: row;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #8b92c3;
        padding-bottom: 20px;
        align-items: first baseline;
    }

    /* The dt and dd elements are given a flex value of 20% and 40% respectively to control their sizes within the flex container. */
    .article-details-section dt {
        flex: 20%;
    }

    .article-details-section dd {
        flex: 40%;
    }

    .writer {
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #8b92c3;
        padding-top: 20px;
    }

    .article-details dd {
        text-align: left;
    }

}

@media screen and (max-width: 768px) {
    /* This removes the blue border at the sides of the page when the screen size is smaller */
    body {
        padding: 0;
    }
}

/* Footer */
.footer {
    background:  #000064;
    color: #fff;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #8b92c3;
}

.footer-row {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: flex-start;
    padding: 40px;
    gap: 90px;
}

.footer-column.about {
    flex: 40%;
}

.footer-column.contact {
    flex: 35%;
}

.footer-logo {
    width: 90px;
    margin-bottom: 20px;
}

/** Footer; header **/
.footerheader {
    color:#FFDC00;
    margin-bottom: 15px;
    font-size: 13px;
    font-family:'Poppins', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
}

.footer-heading {
    display: flex;
    gap: 10px;
}

.footerheader a {
    text-decoration: none;
    color: #FFDC00;
    padding-bottom: 2px;
}

/* dropdown menu is hidden in desktop display,
    will be made visible in responsive media query for small screen sizes */
.footer-dropdown {
    display: none; 
}

/** Footer; list items **/
.footer ul {
    list-style: none;
    padding-left: 0;
    padding-bottom: 20px;
}

.footer ul li a {
    color: #fff;
    text-decoration: none;
    font-family:'Work Sans', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.8;
}

.footer ul li {
    color: #fff;
    text-decoration: none;
    font-family:'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.8;
}

.emails li {
    display: flex;
    flex-direction: row;
    gap: 3px;
}

.emails a {
    color: #fff;
}

.emails li a:hover,
.emails li a.active { 
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #fff;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.footer-text {
    font-family:'Work Sans', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.5;
    padding-bottom: 20px;
    color: #fff;
}

.footer-text2 {
    font-family:'Work Sans', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 1.5;
}

hr {
    margin-top: 20px;
}

/** Footer; Social Media icons **/
.icons {
    cursor: pointer;
}

.icons a {
    font-weight: 500;
    font-size: 15px;
    color: #fff;
}

.icons i{
    padding: 4px;
}

/** Footer; input form **/
.inputSubmit {
    background-color: #FFDC00;
    color: #131212;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-color: #FFDC00;
    border-style: solid;
}

.inputEmail {
    font-size: 11px;
    padding: 3px 5px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    border-radius: 0;
    border-style: solid;
    border-color: #fff;
}

/** Footer; media query for responsive design on smaller screens **/
@media screen and (max-width: 992px) {
    .footer-row {
        flex-direction: column;
        gap: 0;
        align-items: normal;
    }

    .footer-column {
        margin-top: 30px;
    }

    .footer ul {
        padding-bottom: 0;
    }

    .footer-dropdown {
        display: contents;
    }

    .footer-dropdown a {
        cursor: pointer;
    }

    .footer-drop-content {
        display: none;
    }

    .active-footer {
        display: block;
    }
}