/* CSS for menus */

nav a         { color: #AA432C; }
nav a:visited { color: #AA432C; }

/* Use this to debug issues with margins, padding, ... */
/* div { border: 1px solid red; } */

header { 
    background-color: #fff;
    position: relative;
}

header a {
    font-size: 1.1em;
}

header a.logo { 
    background: white url(/img/curlie-logo.png) no-repeat center;
    background-size:  190px 50px;
    position: fixed; 
    z-index: 3;   /* stack this above nav-main-menu (2) which is above others at 1 */
    display: block;
    width: 190px;
    height: 50px;
    top: 8px;
    left: 15px;
    font-size: 3.8em;
    font-family: 'Exo 2', cursive;
}

header a.logo span { display: none; }   /* change to inherit when not using an image file */

header div.hero          { position: absolute; width: calc(100% - 485px); height: 130px; top: 95px; left: 256px; text-align: center; }
header .welcome          { margin-bottom: 0px; font-style: italic; font-family: 'Exo 2', sans-serif; }
header .welcome-sub      { margin-bottom: 18px; font-style: italic; font-family: 'Exo 2', sans-serif; color: hsla( 11, 59%, 42%, 1.0); }
header .learn-more       { float: left; }

header .humansdoitbetter,
header .curlie-hashtag   { font-size: 1.4em; font-weight: 600; font-style: italic;
                            position: absolute; top: 176px; right: 18px; 
                            display: none; }   /* TODO: remove this element from jsp */

header .humansdoitbetter:hover,
header .curlie-hashtag:hover { cursor: pointer; }

header div.curlie {
    height: 292px;
    width: 228px;
    margin-left: 13px;
    background: #fff url(../img/art-curlie.png) no-repeat left bottom;
    background-size: 224px;
    background-color: rgba(0,0,0,0);
}

header div.leaf-art {
    height: 229px;
    width: 128px;
    background: #fff url(../img/art-leaves.png) no-repeat right bottom;
    background-size: 130px;
    background-color: rgba(0,0,0,0);
    position: absolute;
    top: 68px;
    right: 10px;
}

/************** Navigation **************/

nav {
    background-color: #fff;
    padding: 0;
    margin: 0;
    z-index: 2;     /* above group tabs on mypage */
}

nav.main-menu {
    position: fixed;
    width: 100%;
    height: 65px;
    top: 0;
    border-bottom: 1px solid #ccc;
}

nav a {
    font-size: 1.1em;
}

nav i {
    padding-right: 9px;
    width: 1.1em;
}

nav.main-menu i {
    display: none;
}

nav.user-menu {
    display: none;        /* not shown until icon is clicked */
    position: absolute;
    width: auto;
    right: 15px;
    border: 1px solid #ccc;
    padding: 10px 0px 14px 19px;
}

#user-menu-name i {
    padding:  0 12px 0 2px;
}

nav.user-menu.closed {
    visibility: hidden;
}

nav ul {
    margin: 0px;
}

nav.user-menu ul {
    margin-block-start: 0px;
    padding-inline-start: 0px;
}

nav.user-menu ul li {
    top: 0px;
}

#user-menu-name {
    position: fixed;
    z-index: 3;
    right: 15px;
    top: 21px;
    font-weight: 600;
    border: 1px solid #ccc;
    width: 185px;
    padding-left: 19px;
    padding-bottom: 7px;
    border-bottom: 0;
    padding-top: 8px;
    margin-top: 0px;
}

#user-menu-name:hover {
    cursor: pointer;
}

nav::after { content:''; display: block; clear: both; }

nav.main-menu ul { padding-left: 240px; }

nav ul li:hover > ul { display: block; }

nav a {
    padding: 2px 2px;
    display: inline-block;
    text-decoration: none;
}

/* With a black background, set shades of gray here to avoid conflict with colors used elsewhere */
/* With a white background, comment out these settings to use the page's colors */

/*
    nav a         { color: #eee; }
    nav a:visited { color: #999; }
    nav a:hover   { color: #ccc; }
*/

nav:not(.user-menu) a { font-weight: 600; }

nav > ul          { list-style-type: none; }
nav > ul > li     { float: left; position: relative; top: 28px; }
nav > ul > li > a { width: auto; margin: 0px 13px;  }

nav.user-menu           { position: fixed; z-index: 100; top: 57px; border-top: 1px solid white; }
nav.user-menu a         { margin: 0px; text-align: left; }
nav.user-menu > ul > li { float: none; white-space: nowrap; }

#user-menu-name {
  min-width: 10em;      /* start close to bottom width, will later make widths match */
}

#user-menu-top.closed {
  border: none;
  background: inherit;
}

/*************** Large screens ***************/

@media screen and (max-width: 1260px) {

}


/*************** Medium screens ***************/

@media screen and (max-width: 900px) {

    /* Header */

    header a.logo   { width: 152px; height: 51px; top: 8px; left: 12px; background-size: 152px 40px; }
    header div.hero { top: 90px; left: 194px; width: calc(100% - 382px); }
    header div.curlie { width: 191px; height: 268px; margin-left: 5px; background-size: 186px; }
    header div.leaf-art { height: 209px; width: 115px; background-size: 119px; right: 0px; top: 70px; }

    header .welcome-sub { margin-bottom: 10px; padding-right: 10px; }

    /* Navigation */
    nav {
        padding: 0;
        z-index: 1;
        margin:  0px 0 0px 0;
    }

    nav.main-menu ul  { padding-left: 180px; }
    nav > ul > li > a { margin: 0px 10px; }
}


/*************** Medium-Small screens ***************/

@media screen and (max-width: 725px) {

    nav          > ul > li { top: 13px; }
    nav.homepage > ul > li { top: 28px; }

    /* Header */

    #head-wrapper { height: 180px; }

    header div.logo-container {
        position: relative;
        width: calc(100% - 118px);
        height: 54px;
        background-color: white;
        margin: 0 auto;
        text-align: center;
        display: inline-block;
    }

    header div.hero h1 { line-height: inherit; }

    header a.logo {
        position: inherit;
        display: inline-block;
        top: 2px;
        left: inherit;
    }

    header div.curlie {
        height: 133px;
        width: 128px;
        margin-left: 6px;
        background-size: 127px;
    }

    header div.hero    { width: auto; top: 80px; left: 140px; }
    header div.hero h1 { font-size: 1.4em; margin-bottom: 5px; }
    header div.leaf-art { display: none; }

    /* Navigation */

    nav.main-menu, nav.user-menu { 
        display: none;
        position: static; 
        width: auto; 
        height: inherit;
        padding: 6px 10px; 
        background-color: white;
        overflow: hidden;
    }

    nav.main-menu {
        border-bottom: none;
    }
    
    nav ul            { display: block; position: static; }
    nav > ul          { padding: 0; }
    nav > ul > li     { top: 0px; float: none; max-width: none; margin-top: 7px; }
    nav > ul > li > a { width: auto; margin: 10px 13px 0px;  }

    nav.user-menu           { position: inherit; border-top: none; }
    nav.user-menu a         { text-align: left; }
    nav.user-menu > ul > li { top: 0px; float: none; max-width: none; margin-top: 7px; }

    nav.homepage > ul > li { top: 0px; }
    
    nav ul li:hover { background: none; }
    
    nav ul li a, li.social-link { 
        width: auto;
        display: block;
        margin: 6px;
        padding: 8px 15px;
        border: 1px solid rgba(0,0,0,.25);
        font-weight: 600;
    }

    nav ul li a:hover, li.social-link:hover { background-color: hsla(  9, 61%, 50%, 0.1); cursor: pointer; }
    nav ul li a:hover:after { width: 0%; }
    
    nav a[aria-haspopup="true"]::after { display: none; }

    nav.main-menu ul { padding-left: 0; }
    nav.user-menu a  { margin: 6px; }
    nav.main-menu i  { display: inline-block; }
    nav.user-menu    { width: auto !important; border: none; right: 0px; top: 0px; }

    #user-menu-name {
        display: none;  /* on mobile, hide the name, leaving just the icon */
    }
    
    a.menu {
        font-size: 2.0em;
        display: inline-block;
        border-top: 2px solid #fff;
        border-left: 2px solid #fff;
        border-right: 2px solid #fff;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        top: -10px;
        width: 28px;      /* fixed so varied icon widths don't affect alignment */
        padding: 0 11px;
    }

    .header-margin.no-search { margin-top: 0px; }

    /* Hide the social icons that are in the header and footer */
    /* On mobile, sharing and following are in a menu */

    section div.social, div.twitter-follow, div.fb-like { display: none; }
}


/*************** Small screens ***************/

@media screen and (max-width: 625px) {

    header div.hero   { top: 83px; left: 130px; }
}


/*************** Even smaller screens ***************/

@media screen and (max-width: 360px) {

    header .welcome-sub { margin-bottom: 7px; }
}