/*
   STYLE NOTES 
   - Using Bootstrap 5 for layouts and basic components.
   - Custom styles (this file) are for colors, fonts, shadows, hover effects, 
     media embeds, and other branding / unique visuals.
   
    - Font: Poppins 
        for every page, include <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet"> in the head

   - MODEL PAGES (restaurants.html, dishes.html, cultural-heritage.html):
      - Layout: Bootstrap grid system
      - Each page should have exactly 3 cards per row on desktop
      - Bootstrap classes to use:
         <div class="container">
           <div class="row">
             <div class="col-md-4 mb-4">
               <div class="card"> ... </div>
             </div>
             <div class="col-md-4 mb-4">
               <div class="card"> ... </div>
             </div>
             <div class="col-md-4 mb-4">
               <div class="card"> ... </div>
             </div>
           </div>
         </div>
      - Each card contains:
         - Unique image (.card-img-top)
         - Card body with 5 attributes
      - Use the same card layout across all models to maintain consistency.

   INSTANCE PAGES (e.g., restaurant1.html, dish2.html, cultural-heritage1.html):
      - Layout may vary depending on media type and number of media embeds just be sure to keep them consistent for each instance
      - For connected items, reuse the **same card style** from the model page (small cards can use a `.related-card` class if needed)
      - Wrap main content in a Bootstrap container
      - Use rows and columns for layout of media and connected cards
      - Keep spacing consistent (Bootstrap gutters and `mb-*` classes)
 */

/* -----------------------------
   GLOBAL STYLES
----------------------------- */
body {
    font-family: 'Poppins', sans-serif; 
    background-color: #DDE6ED;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: 'Poppins', serif;
}

/* -----------------------------
   NAVBAR
----------------------------- */
.navbar {
    background-color: #27374D;
}

.navbar a {
    color: #DDE6ED !important;
    font-weight: bold;
}

.navbar a:hover {
    color: #FCF55F !important;
}

/* -----------------------------
   CARDS (for all models)
----------------------------- */
.card {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.card:hover {
    transform: scale(1.03);
}

.card-img-top {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.team-photo {
    height: 280px;
    object-position: top center;
}

.amanda-photo {
    object-position: center 50%;
}

.card-title {
    font-size: 1.2 rem;
    font-weight: 600;
}

.card-text {
    font-size: 0.9rem;
    margin-bottom: 5px;
}

/* -----------------------------
   BUTTONS
----------------------------- */
.btn-primary {
    background-color: #27374D;
    border: none;
}

.btn-primary:hover {
    background-color: #FCF55F;
}

/* -----------------------------
   MEDIA EMBEDS (videos, maps, embedded articles, etc)
----------------------------- */
.media-embed {
    width: 100%;
    max-width: 500px;
    border-radius: 10px;
    margin-bottom: 15px;
}