/*
Sebastian Meza-Torres
Professor Bright
2.4 - 2.5 // Assignment
April 16th, 2025
 */
 
 /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
/* CSS Reset */
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;
}
/* URL for the Molle and Montserrat fonts */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Habibi&family=Irish+Grover&family=Molle&family=Montserrat&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

/* Root */

:root {
    --yellow: #F6D64A;
    --teal: #55BCD5;
    --purple: #9B26B0;
    --blue: #499BD2;
    --dark-gray: #222222;
    --light-gray: #EAEAEA;
    --white: #FFFFFF;
    --black: #000000;
    font-size: 16px;
    box-sizing: border-box;
    font-family: 'Molle', serif;
    font-family: 'Montserrat', sans-serif;
    
}
/* Looking at the HTML file, there is an input and label for the header which wasn't in the previous assignments. Make sure to include the styles for it as you're working. S-r only is a class for the h2 main navigation. There is also a skip link for the body, don't forget to style those. */

/* Global Styles */

/* Mobile First */

/* HTML styles */
html, body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

/* Skip Link */
#skip {
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
    left: -10000px
}
/* skip link pseudo element */
#skip:focus {
    height: auto;
    width: auto;
    position: static;
}

/* Heading styles */
header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    background-image: linear-gradient(to bottom, var(--teal), var(--white));
    height: 220px;
}

h1, h2, h3 {
    font-family: 'Molle', serif;
    padding-left: 21px;
    font-size: 30px;
}

/* Added font sizes to the h1, h2, and h3 to match the preview. */

h4, p,q, small, nav, button, form {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5em;
}


/* header a logo */
header a {
    grid-row: 1/2;
    grid-column: 1/2;
}

h4, label {
    font-weight: bold;
    font-size: 20px;
    text-transform: uppercase;
}

header h1 {
    grid-column: 1/3;
    grid-row: 2/3;
    
}
/* Added a font size of 40 for the header h1. */

header p {
    margin-left: 20px;
    line-height: 35px;
    grid-column: 1/3;
    grid-row: 3/4;
}
/* Needs some sort of pointer when hovering over it. */
header label {
    position: absolute;
    right: 0;
    top: 36px;
    width: 90px;
    padding: 18px 47px;
    background-color: var(--yellow);
    text-align: center;

}

header input {
    display: none;
}

label {
    display: inline-block;
    position: relative;
    cursor: pointer;
}

header input ~ ul {
    overflow: hidden;
    max-height: 0px;
    text-align: center;
    margin-top: 30px;
}

/* Nav Styles */
nav {
    grid-row: 1/2;
    grid-column: 1/2;
}

nav a {
    text-decoration: none;
    color: var(--black);
    margin-top: 15px;
}

.sr-only {
    width: 1px;
    white-space: nowrap;
    height: 1px;
    position: absolute;
    overflow: hidden;
    border: 0px;
    padding: 0px;
    clip: rect(0, 0, 0, 0);
    margin: -1px;
}

li {
    font-weight: bold;
    padding: 30px;
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
    border: 2px solid var(--black);
    margin-bottom: 0px;
    margin-top: -1px;
    background-color: var(--teal);
}

input:checked ~ ul {
    position: absolute;
    overflow: visible;
    width: 100%;
    left: 0px;
    top: 25px;
    min-height: 360px;
}

input:checked ~ label {
    width: 85%;
    top: 0px;
    background-color: var(--dark-gray);
    color: var(--white);
    text-align: center;
}


.active {
    margin-top: -4px;
    background-color: var(--yellow);
}

/* Main content begins here */

#main_content {
    display: grid;
    grid-template-columns: 1fr;
}

#intro {
    margin-top: 3rem;
    padding-bottom: 15px;
    
}

/* Added a font size of 40px for the Majorca (intro) heading. */

#intro p {
    line-height: 2rem;
    margin-bottom: 2rem;
}

#img-grid {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr;
    row-gap: 15px;
    column-gap: 15px;
}

#img-grid img {
    width: 100%;
}
/* Plan section */
#plan {
    padding-bottom: 1rem;
    background-color: var(--yellow);
    padding-top: 1rem;
}

#plan h3 {
    top: 4px;
    position: relative;
    text-align: center;
}

#plan div {
    grid-template-rows: 1fr 1fr 1fr 1fr;
}

#plan div section {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    background-color: var(--teal);
    margin: 15px;
    border-radius: 10px;
    border-style: solid;
    border-width: 4px;
    border-color: var(--white);

}

#plan div section a, #plan section div h4 {
    padding: 1px;
    margin: 0 auto;
}
/* Testimonials section */
#testimonials {
    padding: 90px 0px;
    
}

#testimonials h3 {
    font-size: 30px;

}

#testimonials h4 {
    top: 20px;
    font-weight: bold;
    
}

#testimonials section {
    text-align: center;
}

q {
    font-style: italic;
    position: relative;
    margin-top: 10px;
    quotes: "“" "”";
    
}

q::before {
    content: open-quote;
}

q::after {
    content: close-quote;
}

#testimonials p {
    margin: 2px;
    
}
/* About your destination styles */
#about {
    background-color: var(--blue);
    margin-bottom: 30px;
    padding: 120px 15px;
}

#about div {
    display: grid;
    text-align: center;
    grid-template-columns: 1fr 1fr;
}

#about div p {
    padding-left: 1px;
    margin: 20px;

}

#about div section img {
    width: 100%;
    height: auto;
    max-height: 75px;
    min-height: 15px;
    
}
/* Form styles */
#contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: nowrap;
    max-width: 700px;
}

form {
    margin: 0 auto;
    width: 90%;
}

.required {
    color: var(--purple);
}

.form-required {
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: normal;
}

label, input {
    display: block;
}

input {
    width: 90%;
}

label, legend {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 16px;
}

input[type="radio"] {
    background-color: var(--white);
    appearance: none;
    border: 3px solid var(--purple);
    border-radius: 50%;

}

input[type="radio"]:checked {
    background-image: radial-gradient(var(--purple) 50%, var(--white) 50%);
}

input, select {
    border: 2px solid var(--purple);
    padding: 15px;
    margin-bottom: 15px;

}

input[type="submit"] {
    border: none;
    color: var(--white);
    background-color: var(--purple);
    margin: 0 auto;
    
}

.radio-input {
    display: inline-block;
    margin-right: 20px;
    text-align: center;
    justify-content: center;
}

fieldset {
    margin-bottom: 16px;
}

fieldset label {
    display: flex;
    gap: 3px;
    margin-right: 30px;
}

select, .custom-select:after {
    grid-area: select;
}

select {
    appearance: none;
}

.custom-select {
    width: 100%;
    border-radius: 5px;
    font-size: 18px;
    border: 1px solid var(--select-border);
    line-height: 1px;
    background-color: var(--white);
    display: grid;
    align-items: center;
    grid-template-areas: "select";
    cursor: pointer;
}

.custom-select::after {
    width: 1rem;
    height: 1rem;
    background-color: var(--purple);
    justify-self: end;
    content: "";
    margin-bottom: 18px;
    margin-right: 8px;
    clip-path: polygon(50% 81%, 100% 50%, 50% 100%, 0% 50%);

}
/* Footer styles */
footer {
    display: grid;
    background-color: var(--light-gray);
    text-align: center;
    margin-top: 20px;
    padding-top: 6px;
}

footer p {
    font-size: 15px;
    margin: 8px;
}

footer a {
    color: var(--black);
    text-decoration: none;
    margin: 5px;
    font-size: 15px;
}

/* End of Global Styles */

/* Medium Screen Size */
@media screen and (min-width: 600px) {
    header {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        padding-top: 10px;
        padding-bottom: 25px;
    }
    /* Reminder: instead of changing the font size for the header h1 in the media query, do it in the global styles. */
    header h1 {
        grid-column: 2/5;
        grid-row: 1/2;
        margin-top: 20px;
        margin-left: -20px;
        
    }
    /* Note to myself: Header h1 had a font size of 45px in the medium screen size. */

    header p {
        margin-top: -20px;
        grid-column: 2/5;
        grid-row: 2/3;
        margin-left: -20px;
        
    }

    header input ~ ul {
        text-align: center;
        display: flex;
        overflow: visible;
        flex-direction: row;
        justify-content: center;
        margin-top: 60px;
        gap: 1%;
    }

    li {
        width: 100px;
        border: none;
        background-color: var(--white);
        font-size: 12px;
        padding: 20px 15px 25px 15px;
        
    }

    header nav {
        grid-row: 2/3;
        grid-column: 1/5;
    }

    header input, header label {
        display: none;
    }

    nav {
        width: 100%;
        margin: 0 auto;
    }

    picture {
        grid-column: 1/3;
    }

    #img-grid {
        grid-template-columns: 1fr 1fr;
        
    }

    #plan div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        padding: 60px;
        margin: 0 auto;
    }

    #testimonials div {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    #about div {
        display: flex;
        flex-direction: row;
    }

    fieldset {
        display: flex;
    }

    .radio-input {
        margin-right: 10px;
    }

    input[type="submit"] {
        width: 45%;
        margin-right: 0;
    }

    footer {
        display: flex;
        
    }

    footer a {
        padding-top: 6px;
    }

    footer p {
        padding-top: 1px;
    }
}

/* End of medium screen size styles */

/* Large screen size styles */

@media screen and (min-width: 950px) {
    header {
        margin-bottom: -50px;
    }

    header h1 {
        position: absolute;
        left: 200px;
        top: 25px;
    }

    header p {
        position: absolute;
        top: 130px;
        left: 229px;
    }

    header nav {
        position: absolute;
        top: 0;
        right: 0;
        
    }

    header input ~ ul {
        position: absolute;
        right: 0;
        top: 0;
        margin-top: 0;
        
    }

    li {
        width: 100px;
        padding: 15px 20px 20px 15px;
        font-size: 13px;
        
    }

    /* Added a font size to the li nav to fit. */

    #intro {
        display: grid;
        margin-top: 0px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

    #intro h2, #intro p {
        grid-column: 1/3;
    }

    #img-grid {
        grid-column: 3/6;
    }

    #plan div {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
    }

    #plan div section a img {
        height: auto;
        width: 100%;
    }

    #testimonials div {
        grid-template-columns: 1fr 1fr 1fr 1fr;

    }

    #about div {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    #contact {
        display: block;
        max-width: 1200px;
    }

    form {
        display: grid;
        width: 90%;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 2rem;
    }

    #nums {
        width: 90%;
        grid-column: 2/3;
        margin-left: 10px;
    }

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


}

/* End of the large screen styles */

/* List of things to fix: The navigation font size (all screens), the footer for the large screen, adjust the heading sizes for each section, add quotation marks for the testimonials, fix the padding sizes for the navigation, fix the about section for the large screen, fix footer font size for the medium screen size. */