/* ============================================
   Header Modernization - SFMuseum
   Add to any page: <link rel="stylesheet" href="css/header-modern.css" />
   Remove the link tag to revert.
   ============================================ */

/* Navigation links in header */
td[style*="background: #9e5200"] p {
   font-family: 'Inter', Arial, Helvetica, sans-serif;
   font-size: 12px;
   letter-spacing: 0.3px;
}

td[style*="background: #9e5200"] p a {
   color: #fff;
   text-decoration: none;
   padding: 3px 6px;
   border-radius: 3px;
   transition: background 0.2s ease;
}

td[style*="background: #9e5200"] p a:hover {
   background: rgba(255, 255, 255, 0.15);
   text-decoration: none;
}

/* Search input */
td[style*="background: #9e5200"] input[type="text"] {
   font-family: 'Inter', Arial, sans-serif;
   font-size: 13px;
   padding: 5px 10px;
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 4px;
   background: rgba(255, 255, 255, 0.9);
   color: #333;
   outline: none;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

td[style*="background: #9e5200"] input[type="text"]:focus {
   border-color: #fff;
   background: #fff;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

/* Search button */
td[style*="background: #9e5200"] input[type="submit"] {
   font-family: 'Inter', Arial, sans-serif;
   font-size: 12px;
   font-weight: 600;
   padding: 5px 14px;
   background: linear-gradient(135deg, #ffcc00 0%, #ffaa00 100%);
   color: #333;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   transition: transform 0.15s ease, box-shadow 0.15s ease;
}

td[style*="background: #9e5200"] input[type="submit"]:hover {
   transform: translateY(-1px);
   box-shadow: 0 2px 8px rgba(255, 204, 0, 0.4);
}

/* Exhibit dropdown */
td[style*="background: #9e5200"] select {
   font-family: 'Inter', Arial, sans-serif;
   font-size: 14px;
   border: 1px solid rgba(255, 255, 255, 0.4);
   border-radius: 4px;
   background: rgba(255, 255, 255, 0.95);
   color: #333;
   padding: 5px 8px;
   outline: none;
   cursor: pointer;
   transition: border-color 0.2s ease;
}

td[style*="background: #9e5200"] select:focus {
   border-color: #fff;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

td[style*="background: #9e5200"] select:hover {
   border-color: rgba(255, 255, 255, 0.7);
}