/*
Note: I've decided my practice is going to be to construct HTML pages using semantic elements as much as possible: <header>, <nav>, <main>, <article>, <section>, <footer>. And that I will only use <div> tags within one of these elements when unique formatting of some or more content is needed -- the same way that <span> is used within a block element just to treat a string of text. That is, I'll use <div> as a block-level <span>.
*/

/****
  Import fonts
****/

@import "fonts.css";

/****
  Declare variables for fonts, colors, and measurements
****/

:root{
	/* Fonts */
	--serif: 'Bitter', Georgia, Times, serif;
	--sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	
	/* Colors */
	--strong-color: #022E51; /* Dark blue */
	/* Change the --links-strong-color variable to a slightly less dark blue, but keep the same general hue, AI! */
	--links-strong-color: #034A7F; /* Less dark blue for unvisited links */
	--complement-color: #ff9900; /* Websafe orange */
	--darker-complement-color: #cc7a00; /* For <h1> text at top of pages */
	--white: #fff; /* White */
	--black: #000; /* Black */
	
	/* Unused, to delete after design finished */
	--pale-text-color: #c0ccd8; /* Light blue grey */
	--pale-color: #eff2f5; /* Very light blue grey */
	--alt-complement-color: #e4c83a; /* Yellowish */
	--pale-complement-color: #ffb366; /* Soft pale orange */
	--grey: #808c99; /* Grey, with subtle blue tone */
	--very-light-grey: #fafafa;
	--c2: #eee; /* Off-white */
	--linkedin-blue: rgb(40, 103, 178);
	
	/* Measurements -- not being used */
	--main-width: 30rem;
	--header-height: 49px;
	--logo-height: 3.8rem;
	--m1: 8px;
	--rc: 6px;
}

/****
  Margins for main page elements
****/

/* No margins for background sections so that backgrounds go edge to edge */
body, .background { margin: 0; }

/* The key content elements have fixed widths, so margins are "auto" */
main, section, header, footer { margin: auto; }

/****
  Fixed widths for main page elements
****/

main, section { max-width: 32em; }
/*
    On the landing page, the header has no background so it doesn't go edge 
    to edge, and hence gets a max-width. However, shouldn't I just wrap the 
    header in a <div class="background"> the way I do the <sections> on the 
    landing page? Hmmmm.
*/
#landing-page header { max-width: 60em; } 

/****
  Padding for main page elements, to give margins for content
****/

header { padding: 1em 2em 7pt; }
footer { padding: 1em 1em 7pt; }
/*
    On the home/landing page, the header is larger, with more space, and on 
    a white background so that visualy it becomes part of the top panel and
    not a separate nav bar.
*/
#landing-page header {
    padding: 3em 4em 7pt;
}

main { padding: 0em 2em 2em; }
section { padding: 3em 2em; }

/* Adjust padding for Contact sections */
#contact section { padding: 1em 2em; }

/****
  Backgrounds
****/

/*
    The "dark" class is applied to alternating <section> elements to give
    them a background image. Font styles for "dark" sections are set below.
    
    The "none" class is not necessary and does nothing, but I've included 
    it so that the HTML can be class="background dark" for the dark divs 
    class="background none" for the divs with a white background.
*/
.none {}
.dark {
    /* Fallback for when the background image doesn't load */
    background-color: var(--strong-color);
    /* Position settings for background image */
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
}
.dark#bkgd_1 {
    background-image: 
        url('../images/bkgds/sky-reflected-in-skyscraper_bkgd_1.jpg');
}
.dark#bkgd_2, #header {
    background-image: 
        url('../images/bkgds/sky-reflected-in-skyscraper_bkgd_2.jpg');
}

#header, #dropdown {
    background-color: var(--strong-color);
}

#landing-page #header, #landing-page #dropdown {
    background-image: none;
    background-color: var(--white);
} 

#contact {
    background-image: linear-gradient(to top left, #0059b3, var(--strong-color));
}

/****
  Navigation menu and button
****/

nav a, #nav_btn {
    color: var(--white);
    font-weight: 600;
}
#landing-page nav a, #landing-page #nav_btn, #contact_btn {
    color: var(--strong-color);
}

/* The button in the header to show the navigation menu */
#nav_btn {
    float: right;
    margin-top: 1pt;
    padding: 5pt 8pt; /* Padding to make click/tap target bigger */
    border: none; /* To hide browser-style button border */
    background: none;
}
#nav_btn:hover, nav a:hover { cursor: pointer; }

/* Reposition button on landing page to match larger logo-type */
#landing-page #nav_btn {
    margin-top: 1.6em;
}

nav#horizontal { 
    display: none; /* Not shown on smaller screens */
    margin-top: 3pt;
}
nav a {
    text-decoration: none; /* Don't underline links */
    padding: 4pt 9pt 5pt;
}
nav a:visited { color: var(--white); }
.button#contact_btn { margin-left: 1em; }

#landing-page nav#horizontal { margin-top: 1.5em; }
#landing-page a#contact_btn, #landing-page a#home_lnk { display: none; }

/* The dropdown menu is hidden until shown by Javascript */
nav#dropdown {
    overflow: hidden; /* Needed for menu animation, sliding in and out */
}
nav#dropdown.hide { 
    max-height: 0; /* Menu is hidden */
    transition: max-height 0.5s ease-out;    
}
nav#dropdown.show {
    border-top: 1pt solid var(--white);
    border-bottom: 1pt solid var(--strong-color);
    box-sizing: border-box;
    max-height: 300px; /* Matches menu height */
    transition: max-height 0.5s ease-in;
}
#landing-page nav#dropdown.show {
    border-top: 1pt solid var(--strong-color);
}
 
/* Link items in the navigation menu */
nav#dropdown a {
    display: block; /* Display as block element, not inline */
    font-weight: normal;
    margin: 0em 5em;
    border-bottom: 1pt solid var(--white); /* Separator line between items */
}
nav#dropdown a:hover { opacity: .8; }

nav#dropdown a:last-of-type {
    border-bottom: 1pt solid var(--strong-color);
}
#landing-page nav#dropdown a {
    border-bottom: 1pt solid var(--strong-color);
}
#landing-page nav#dropdown a:last-of-type {
    border-bottom: 1pt solid var(--white);
}

/****
  Text formatting
****/

body { /* Site defaults */
    font-family: var(--serif);
    font-size: 10pt; /* All sizes are specified as a percentage of this. */
    line-height: 1.4;
}

/* Sans-serif elements */
h1, .section-title, h2, footer, nav, .tagline, .button {
    font-family: var(--sans);
}

/* Colors */
h1, .section-title { color: var(--darker-complement-color); }
h2, footer, .tagline, .button { color: var(--strong-color); }
/* Colors for "dark" sections */
.dark, .dark h2, .dark .tagline { color: var(--white); }

/* Font sizes and weights */
h1, .section-title {
    font-size: 110%;
    font-weight: normal;
}

h2, h3 {
    font-weight: 600;
}

.tagline { font-size: 130%; }
.lede { font-size: 120%; }
nav a { font-size: 110%; }

/* Positioning and spacing */
h1, .section-title {
    width: 100%;
    margin-top: 0.67em; /* Needed for .section-title */
    margin-bottom: 2em;
}
h2, p { margin: 4pt auto; }
.cta { margin: 2.4em 1em 1.4em; }
h1, .section-title, footer { text-align: center; }

/****
  Button elements
****/

/* The "button" class is applied to both <a> and <button> elements. */
.button {
    background-color: var(--complement-color);
    text-decoration: none;
    border: 1pt solid var(--strong-color);
    border-radius: 4px;
    box-shadow: 2px 2px 2px 1px lightgrey;
    padding: 3pt 6pt;
}
.button[disabled] { background-color: var(--white); }

.dark .button, #header .button { box-shadow: none; }

/****
  Form elements
****/

#msg_form { margin-top: 5pt; }

input, textarea {
    width: 95%; /* Don't know why, but at 100% it exceeds the right margin. */
    margin: 2pt 0pt;
    border: none;
    border-radius: 4px;
    padding: 3pt 6pt;
    font-size: 10pt;
    font-family: var(--sans);
}
textarea { resize: vertical; }

/****
  Photos, images, and logos
****/

/* Profile photo for bio */
#profile_photo { 
    text-align: center;
    position: relative;
    left: -1em;
}

/* Client logos for "Clients" page. */
#client_logos {
    text-align: center;
    margin: 4em 0em 2em;
}
#client_logos img {
    margin: 6pt;
    width: 6em;
    height: auto;
    vertical-align: middle;   
}

/* Company name and logo for site header. */
.logo-type {
	display: inline-block;
	font-size: 14pt;
	color: black;
}
div#logo {
    display: inline-block;
    vertical-align: middle; 
    height: 2rem;
    width: 1.2rem;
    background-image: url('../assets/scribble_final-01_color_with_white.png');
    background-repeat: no-repeat;
    background-size: contain;
}
#word1 { font-family: "Bitter", Georgia, Times, serif; }
#word2 {
	font-family: "Open Sans", Helvetica, sans-serif;
	font-weight: 300;
	opacity: .75;
}
.logo-type { color: var(--white); }
#landing-page .logo-type { color: var(--black); }

#landing-page .logo-type div#logo {
    background-image: url('../assets/scribble_final-01_color.png');
}

/* Logo-type is larger on the landing page */
#landing-page .logo-type {
	font-size: 18pt;
}
#landing-page div#logo {
    height: 4rem;
    width: 2.4rem;
}

/* Logotype for Schedule Us */
#scheduleus_logotype {
    font-size: 24pt;
    font-weight: 500;
    font-family: Raleway;
    color: darkgreen;
    text-decoration: none;
}

/****
 404 and 405 Error pages
****/
/*
  Error pages are (or will be) served from the /shared/
  directory, but they assume the same basic web page
  structure that all my sites use. As such, they have a
  <main> tag, with the class of "error-page" to allow
  custom styles for these pages.
*/
.error-page { text-align: center; }
.error-page h1, .error-page p {
    margin: 2em 0em;
}
.error-page h1 {
    font-size: x-large;
}

/****
 Break points for responsive design
****/

/* Extra small devices (phones, 700px and down) */
@media only screen and (max-width: 700px) {
    #landing-page header {
        padding: 3em 4em 7pt;
    }
} 

/* Small devices and up (portrait tablets and phones, 700px and up) */
@media only screen and (min-width: 700px) {
    #landing-page header {
        padding: 3em 2em 7pt;
    }
    #nav_btn { display: none; } /* Hide the menu button */
    nav#horizontal { display: block; } /* Show the horizontal menu */
    nav#dropdown { display: none; } /* Hide the dropdown menu */
} 

/* Medium devices and up (landscape tablets, 800px and up) */
@media only screen and (min-width: 800px) {
    /* Add the "Contact" item to the horizontal menu */
    #landing-page a#contact_btn { display: inline; }
    p { font-size: 12pt; }
    footer p { font-size: 10pt; }
    section, main { max-width: 60em; }
    .flex-left-right {
        padding-left: 0em; /* visual fix, looks better shifted to the left */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    /* To correctly center the H1, it needs its left-padding restored to 
    compensate for removing the left-padding in .flex-left-right container */
    .flex-left-right h1, .flex-left-right .section-title { padding-left: 2em; }
    .left, .right {
        margin: 1em;
    }
    #landing-page .left, #landing-page .right {
        margin: 3em 1em;
    }
    #contact .left, #contact .right {
        margin: 1em 1em;
    }
    .left { width: 19.5em; }
    .right { width: 29.5em; }
    h2, .tagline { font-size: 180%; }
    .lede { font-size: 130%; }
    .tagline, h3, #profile_photo { text-align: right; }
    .tagline {
        width: 78%;
        padding-left: 1.7em;
    }
    #landing-page h2 {
        margin-top: 0pt;
        text-align: right;
    }
    #contact h2 { text-align: right; }
    #landing-page .tagline {
        text-align: left;
        width: 100%;
        margin-top: 1.44em;
    }
    h3 {
        margin-top: 4pt;
    }
    #client_logos img {
        margin: 1em;
        width: 8em;
    }
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	header {
	    max-width: 72em;
	}
    div#logo {
        height: 3rem;
        width: 1.83rem;
    }
    nav#horizontal { margin-top: 1em; }
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	/* CSS code */
}