/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/*====CSS DESIGN STARTS HERE====*/

body {
    background-color: #fff4ea;
    font-family: "forum", sans-serif, Georgia, 'Times New Roman', Times, serif;
    color: #183660;
    line-height: 1.5;
    padding: 60px 40px; 
    max-width: 1400px; 
    margin: 0 auto;
    display: grid; /*decided to use grid because of the layout I chose at the end, I was strugling with flexbox when it came to the footer.*/
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
}

main {
    grid-column: 2; /*this places the content on the second column*/
    grid-row: 1; 
}

header {
    grid-column: 1; /*this places the content on the first column*/
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

header span:first-of-type { 
    font-family: "forum", sans-serif, Georgia, 'Times New Roman', Times, serif;
    font-size: 3.5em;
    font-weight: 700; 
    text-align: right; 
    margin: 0 0 10px 0; 
    color: #183660; 
    white-space: nowrap; /*added this to avoid the text from wrapping*/
}

header span:last-of-type {
    text-align: right; 
    font-family: "Montserrat", sans-serif, Arial, Helvetica, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 1.5em; 
    color: rgb(98, 98, 98);
    margin: 0 0 40px 0; 

}

h1 { 
    font-size: 2.4em; 
    font-weight: 500;
    margin: 0 0 5px 0;
    color: #183660;
    text-align: left; 
    margin-top: 160px;
}

h2{ 
    font-size: 1.4em;
    font-weight: 700; 
    font-family: "Montserrat", sans-serif, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 60px 0; 
    color: #AF3927;
    text-align: left; 
}

p{ 
    font-family: "Montserrat", sans-serif, Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 1.3em;
    line-height: 1.5em;
    text-align: left;
    margin-bottom: 30px;  
}



/*====TEXT STYLES====*/
/*this will only apply to TEXT PAGE, I added a class because this style was applying to all the other pages and I wanted this quote to standout*/
.text-page main p:first-of-type{ 
    font-weight: 500;
    font-size: 1.4em;
    color: #183660;
    margin-bottom: 5px;
}

/*this will only apply to TEXT PAGE I added a class because this style was applying to all the other pages and I wanted this quote to standout*/
.text-page p:nth-of-type(2){
    font-style: italic;
    font-weight: 300;
    font-size: 1.4em;
    color: #79A1BD;
    margin-bottom: 40px;
}


/*this will only apply to OTHER PAGES, to decrease space between h4 and paragraph on these two pages that's why I used a class*/
.other-page h1 + h2 {
    margin-top: 40px;
}
.other-page h2 + p {
    margin-top: 5px;     
}
.other-page h2 {
    margin: 30px 0 10px 0; 
}

blockquote {
    font-family: "Montserrat", sans-serif,Arial, Helvetica, sans-serif;
    font-style: italic;
    color: #c97719;
    line-height: 1.6;
    margin: 40px 0;
    font-size: 1.5em;
    text-align: left;
}

em{
    font-style: italic;
    font-weight: 400;
}

strong{
    font-weight: 500;
    color: #79A1BD;
}

/*====NAVBAR & LINKS====*/
nav ul{ 
    display: flex;
    justify-content: right;
    gap: 20px; 
    list-style: none;
    font-family: "Montserrat", sans-serif, Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #183660;
    text-align: right; 
    text-transform: uppercase;
    letter-spacing: 3px;
}

nav li + li {
    border-left: 2px solid #F1AB2F;
    padding-left: 1.5rem;
}

a {
    color: #183660;
    text-decoration: none;
}

a:hover,
a:focus-visible{
    color: #F1AB2F; 
    text-decoration: underline;
}

a:active{
    color: #79A1BD;
}

a[aria-current="page"] {
  color: #AF3927;
  font-weight: 700;
}

footer{ 
    grid-column: 2 / -1; 
    font-family: "Montserrat", sans-serif,Arial, Helvetica, sans-serif;
    font-weight: 100;
    color: grey;
    font-size: .8em;
    text-align: right;
    margin-bottom: 30px; 
    margin-top: 0; 
    border-top: 1px #F1AB2F solid;
    padding-top: 30px;
}





/* Responsive: single column on smaller screens */
@media (max-width: 1150px) {
    body {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    header {
        grid-column: 1;
        grid-row:1;
    }

    main {
        grid-column: 1;
        grid-row: 2; 
    }

    h1, h2 {
        text-align: left;
    }
    
    footer {
        grid-column: 1;
        grid-row: 3;
    }

    nav ul {
        justify-content: right;
    }
}