/*
 * Full Moon Express site styles.
 *
 * Ported from the former main.less (client-side LESS compilation has been
 * dropped). Only the rules used by the live pages (home, restaurant,
 * catering, delivery) are kept; dead selectors (#info-4-steps, #menu,
 * #hours-and-map, .white, #coming-soon-overlay, parking, photoswipe) were
 * removed. Loaded after Bootstrap 5 so these overrides win.
 *
 * The "museo" / "museo-slab" brand faces were served by Typekit; that
 * (JavaScript) loader has been removed, so they fall back to a serif stack.
 */

body {
    font-family: "museo", Georgia, serif;
    font-weight: 300;
    margin: auto;
    background: url('/static/images/pw_maze_white.png') repeat;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "museo-slab", Georgia, serif;
}

h2 {
    font-size: 22px;
    padding-bottom: 0.4em;
}

p, dl, dt, dd {
    font-size: 18px;
}

/* Bootstrap 5 underlines links and uses its own blue; the old site (BS3) did
   neither. Restore plain links with the brand-red hover. The #navbar selector
   is needed so it out-specifies "#navbar a". */
a {
    color: #337ab7;
    text-decoration: none;
}

#navbar a:hover,
a:hover {
    color: rgb(214, 8, 8);
}

/* Header */
#header-wrapper {
    background-color: #fff;
}

#languages {
    text-align: right;
}

#languages a {
    display: inline-block;
    padding: 1em 0.5em;
    color: #d60808;
    font-size: 14px;
    font-weight: 700;
}

#logo {
    text-align: center;
    color: transparent;
}

/* Navigation: a flex row that wraps to centered rows on narrow screens
   (no JS, so no collapse/hamburger). */
#navbar {
    padding: 1em 0 2em;
    background-color: #fff;
}

.main-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.25em 1.5em;
}

#navbar a {
    color: #000;
    font-family: "museo", Georgia, serif;
    font-size: 22px;
    font-weight: 100;
    text-decoration: none;
}

/* Hero photo (one per page) */
#main-photo {
    height: 400px;
    margin-bottom: 30px;
    background-position: 80% center;
    background-repeat: no-repeat;
    background-size: cover;
}

#main-photo.homepage     { background-image: url('/static/images/main-photo-2560.jpg'); }
#main-photo.restaurant   { background-image: url('/static/images/restaurant-banner.jpg'); }
#main-photo.loyalty-card { background-image: url('/static/images/loyalty-card-banner.jpg'); }

/* Translucent content panels inside .my-container columns */
.my-container [class^="col-"] .my-inner {
    padding: 1em;
    border: 1px solid #ddd;
    background-color: rgba(255, 255, 255, 0.70);
}

/* Home: opening hours + static map */
div.wrap {
    position: relative;
}

dl.hours dd {
    padding-bottom: 0.3em;
}

#address a.map {
    display: block;
    width: auto;
    height: 300px;
    background: center no-repeat url('//maps.googleapis.com/maps/api/staticmap?key=AIzaSyDE7p7bXKwJdVmmgZBIdQdHSR8I0gD5rsU&center=Gedempte%20Burgwal%2041,Den%20Haag,Netherlands&zoom=15&size=640x300&maptype=roadmap&sensor=false&style=feature:landscape|element:geometry|saturation:+100&markers=color:red|Gedempte%20Burgwal%2041,Den%20Haag,Netherlands');
}

/* Home: review/brand logos in a fixed-aspect box */
.brand-image {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding: 20% 0 0 0;
    overflow: hidden;
}

.brand-image-sm {
    padding: 25% 0 0 0;
}

.brand-image img {
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

/* Restaurant photo grid */
#restaurant .restaurant-photo {
    width: 100%;
    border-radius: 15px;
    object-fit: cover;
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.15);
}

/* Footer */
#footer {
    min-height: 5em;
}