/* ==========================================================================
   DSU Menu - Custom CSS (replaces cdn.tailwindcss.com)
   Inter font loaded via <link> in <head>, not @import (non-blocking)
   ========================================================================== */

/* --- Reset / Base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; }
img, video { max-width: 100%; display: block; }
button, select, input { font: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

/* --- Direction ------------------------------------------------------------ */
.rtl { direction: rtl; }
.ltr { direction: ltr; }

/* --- Colors --------------------------------------------------------------- */
.bg-black   { background-color: #000; }
.bg-white   { background-color: #fff; }
.text-white { color: #fff; }
.text-gray-400  { color: #9ca3af; }
.text-gray-300  { color: #d1d5db; }
.text-red-500   { color: #ef4444; }
.text-red-400   { color: #f87171; }
.text-yellow-200 { color: #fef08a; }
.text-blue-400  { color: #60a5fa; }
.bg-red-600  { background-color: #dc2626; }
.bg-red-700  { background-color: #b91c1c; }
.bg-red-900  { background-color: #7f1d1d; }
.bg-blue-600 { background-color: #2563eb; }
.bg-red-400  { background-color: #f87171; }
.bg-zinc-900 { background-color: #18181b; }
.bg-red-900\/80  { background-color: rgba(127,29,29,0.80); }
.bg-red-900\/90  { background-color: rgba(127,29,29,0.90); }
.bg-red-950\/80  { background-color: rgba(69,10,10,0.80); }
.bg-zinc-900\/50 { background-color: rgba(24,24,27,0.50); }
.bg-zinc-800\/70 { background-color: rgba(39,39,42,0.70); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }
.from-red-600  { --tw-gradient-from: #dc2626; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(220,38,38,0)); }
.to-red-700    { --tw-gradient-to: #b91c1c; }
.from-black\/80 { --tw-gradient-from: rgba(0,0,0,0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }
.via-black\/40  { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.4), var(--tw-gradient-to, rgba(0,0,0,0)); }
.to-transparent { --tw-gradient-to: transparent; }
.border-zinc-800 { border-color: #27272a; }
.border-zinc-900 { border-color: #18181b; }
.border-red-600  { border-color: #dc2626; }

/* --- Typography ----------------------------------------------------------- */
.text-xs  { font-size: 0.75rem;  line-height: 1rem; }
.text-sm  { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;   line-height: 1.5rem; }
.text-lg  { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl  { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.font-medium { font-weight: 500; }
.font-bold   { font-weight: 700; }
.tracking-wide { letter-spacing: 0.025em; }
.uppercase { text-transform: uppercase; }
.truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Spacing -------------------------------------------------------------- */
.p-2  { padding: 0.5rem; }
.p-4  { padding: 1rem; }
.p-6  { padding: 1.5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-1   { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2   { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3   { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4   { padding-top: 1rem; padding-bottom: 1rem; }
.py-6   { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8   { padding-top: 2rem; padding-bottom: 2rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-4 { margin-top: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.mr-4 { margin-right: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* --- Sizing --------------------------------------------------------------- */
.w-full  { width: 100%; }
.w-5     { width: 1.25rem; }
.w-6     { width: 1.5rem; }
.w-10    { width: 2.5rem; }
.w-12    { width: 3rem; }
.w-px    { width: 1px; }
.h-1     { height: 0.25rem; }
.h-4     { height: 1rem; }
.h-5     { height: 1.25rem; }
.h-6     { height: 1.5rem; }
.h-px    { height: 1px; }
.h-12    { height: 3rem; }
.h-48    { height: 12rem; }
.h-52    { height: 13rem; }
.h-56    { height: 14rem; }
.h-full  { height: 100%; }
.max-w-\[70\%\] { max-width: 70%; }
.max-w-4xl  { max-width: 56rem; }
.max-w-5xl  { max-width: 64rem; }
.max-w-6xl  { max-width: 72rem; }
.min-h-\[calc\(100vh-300px\)\] { min-height: calc(100vh - 300px); }
.w-fit { width: fit-content; }

/* --- Layout --------------------------------------------------------------- */
.block  { display: block; }
.flex   { display: flex; }
.grid   { display: grid; }
.hidden { display: none; }
.inline-block { display: inline-block; }
.flex-1     { flex: 1 1 0%; }
.flex-col   { flex-direction: column; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.text-center { text-align: center; }

/* --- Position ------------------------------------------------------------- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }
.top-0    { top: 0; }
.left-0   { left: 0; }
.right-0  { right: 0; }
.bottom-0 { bottom: 0; }
.z-50     { z-index: 50; }

/* --- Overflow / Object / Opacity ------------------------------------------ */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }
.opacity-55  { opacity: 0.55; }
.opacity-80  { opacity: 0.80; }
.cursor-pointer { cursor: pointer; }

/* --- Borders -------------------------------------------------------------- */
.border   { border-width: 1px; border-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-2 { border-width: 2px; border-style: solid; }
.border-0 { border-width: 0; }
.rounded    { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }

/* --- Shadows -------------------------------------------------------------- */
.shadow-md   { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06); }
.shadow-xl   { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04); }
.shadow-lg   { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05); }

/* --- Transitions ---------------------------------------------------------- */
.transition-all    { transition: all 0.15s cubic-bezier(0.4,0,0.2,1); }
.transition-colors { transition: color,background-color,border-color 0.15s cubic-bezier(0.4,0,0.2,1); }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }

/* --- Hover / Group -------------------------------------------------------- */
.hover\:scale-\[1\.02\]:hover { transform: scale(1.02); }
.hover\:text-red-400:hover    { color: #f87171; }
.hover\:bg-black:hover        { background-color: #000; }
.hover\:bg-zinc-800\/70:hover { background-color: rgba(39,39,42,0.70); }
.hover\:shadow-2xl:hover      { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
.group:hover .group-hover\:brightness-110 { filter: brightness(1.1); }

/* --- Focus ---------------------------------------------------------------- */
.focus\:outline-none:focus { outline: none; }
select:focus { outline: 2px solid #dc2626; outline-offset: 2px; }

/* ==========================================================================
   Components
   ========================================================================== */

/* Menu card */
.menu-card { transition: all 0.3s ease; }
.menu-card:hover { transform: translateY(-5px); }
.menu-card:hover .card-image { filter: brightness(1.1); }
.menu-card:hover .opacity-55 { opacity: 1; }

/* Announcement Popup */
.popup-modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.85); z-index:9999; justify-content:center; align-items:center; animation:fadeIn 0.3s ease-in-out; }
.popup-modal.active { display:flex; }
.popup-content { position:relative; max-width:90%; max-height:90vh; animation:slideIn 0.4s ease-out; }
.popup-content img { width:100%; height:auto; max-height:90vh; object-fit:contain; border-radius:12px; box-shadow:0 25px 50px -12px rgba(0,0,0,0.5); }
.popup-close { position:absolute; top:-15px; right:-15px; background:#ef4444; color:#fff; width:40px; height:40px; border-radius:50%; border:3px solid #fff; cursor:pointer; font-size:24px; display:flex; align-items:center; justify-content:center; transition:all 0.3s ease; box-shadow:0 4px 6px rgba(0,0,0,0.3); z-index:10000; }
.popup-close:hover { background:#dc2626; transform:rotate(90deg) scale(1.1); }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideIn { from{transform:scale(0.7) translateY(-50px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
@media (max-width:640px) { .popup-content{max-width:95%} .popup-close{width:35px;height:35px;font-size:20px;top:-12px;right:-12px} }

/* Image modal */
.modal { display:none; position:fixed; z-index:100; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.75); }
.modal-content { position:relative; margin:auto; display:flex; align-items:center; justify-content:center; height:100%; }
.modal-img { max-width:90%; max-height:90%; object-fit:contain; border-radius:0.5rem; }
.close-btn { position:absolute; top:1rem; right:1rem; color:#fff; background-color:rgba(0,0,0,0.5); border-radius:9999px; padding:0.5rem; cursor:pointer; transition:background-color 0.3s; }
.close-btn:hover { background-color:rgba(0,0,0,0.75); }

/* Contact card */
.contact-card { transition:all 0.3s ease; }
.contact-card:hover { transform:translateY(-5px); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width:640px) {
  .sm\:py-3  { padding-top:0.75rem; padding-bottom:0.75rem; }
  .sm\:px-4  { padding-left:1rem; padding-right:1rem; }
  .sm\:flex-row { flex-direction:row; }
  .sm\:gap-3 { gap:0.75rem; }
  .sm\:text-sm { font-size:0.875rem; line-height:1.25rem; }
  .sm\:ml-2  { margin-left:0.5rem; }
  .sm\:w-px  { width:1px; }
  .sm\:h-4   { height:1rem; }
  .sm\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sm\:h-52  { height:13rem; }
}
@media (min-width:768px) {
  .md\:flex  { display:flex; }
  .md\:text-3xl { font-size:1.875rem; line-height:2.25rem; }
  .md\:text-lg  { font-size:1.125rem; line-height:1.75rem; }
  .md\:gap-6    { gap:1.5rem; }
  .md\:gap-4    { gap:1rem; }
  .md\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .md\:h-56     { height:14rem; }
}
@media (min-width:1024px) {
  .lg\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1280px) {
  .xl\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
}