/* Common fixes + responsive layer for the Joseph Hurley Architects website.
   This file is linked LAST on every page, so its rules win ties. */

/* ----- Base ----- */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

/* Let the fixed 1003px main layout table shrink on narrow viewports */
body > table[align="center"] {
    max-width: 100%;
}

/* ----- Navigation -----
   Each page has two navs:
     .header-menu  -> the original in-header text menu (desktop)
     .navigation   -> a dark bar reused as the mobile menu
   Show the header menu on desktop and keep the dark bar hidden until mobile. */
.navigation {
    display: none;
    background-color: #333;
    padding: 12px 0;
    margin-bottom: 20px;
}
.navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.navigation li { margin: 0 12px; }
.navigation a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.9em;
}
.navigation a:hover { color: #ccc; }

/* ----- Home page (index.html): text above, full-bleed elevation below ----- */
.home-notice {
    text-align: center;
    color: #cc0000;
    font-weight: bold;
    font-family: Arial, sans-serif;
    letter-spacing: 0.5px;
    margin: 24px 16px 0;
}
.home-intro {
    text-align: center;
    max-width: 640px;
    margin: 12px auto 28px;
    padding: 0 16px;
}
.home-tagline {
    color: #808080;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 8px;
}
.home-enter { margin: 0; }
.home-enter a { font-weight: bold; font-size: 14px; }
/* Full-width elevation band — spans edge to edge (body has no margin) */
.home-elev img {
    display: block;
    width: 100%;
    height: auto;
}
.home-footer {
    text-align: right;
    padding: 8px 12px 4px;
    font-size: 9px;
    color: #999;
}

/* ----- Fonts ----- */
.font_head { font-family: Arial, sans-serif; font-size: 24px; font-weight: bold; color: #333; }
.font_menu { font-family: Arial, sans-serif; font-size: 12px; color: #666; }
.font_group { font-family: Arial, sans-serif; font-size: 12px; color: #808080; }
.font_groupBold { font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; color: #808080; }
.content, .content11, .content12 { font-family: Arial, sans-serif; font-size: 12px; color: #808080; }

/* ----- Gallery: don't clip the slideshow image ----- */
.slideshow-container {
    height: auto;
    min-height: 300px;
    overflow: visible;
}
.slideshow img {
    max-width: 100%;
    height: auto;
}

/* ----- Responsive: stack the fixed table layout below the desktop width ----- */
@media (max-width: 1000px) {
    .navigation { display: block; }   /* dark bar becomes the mobile nav */
    .header-menu { display: none; }   /* hide the desktop in-header menu */

    table { width: 100% !important; max-width: 100%; }
    td {
        display: block;
        width: 100% !important;
        height: auto !important;
    }

    /* center the branding + keep stacked thumbnails tidy */
    .font_head { display: block; text-align: center; }
    #thumbs ul.thumbs { text-align: center; }
    #thumbs ul.thumbs li { display: inline-block; float: none; }
}