/*
  Hiba Foods - Custom overrides
  Loaded AFTER style.min.css so these rules win.
  !important is required because every compiled Tailwind utility
  in style.min.css already carries !important.

  Path note: image URLs here are relative to THIS css file, so
  ../images/  =  assets/images/
*/


/* =========================================================
   1. FONTS - Fraunces (display) + Work Sans (text)
   The <link> in index.html loads them. The @import below is a
   fallback in case this CSS is ever used without that link.

   Weights available from that link:
     Fraunces  - 300, 500, 600, 600 italic, 700   (NO 400)
     Work Sans - 300, 400, 500, 600               (NO 700)
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,ital@9..144,300,0;9..144,500,0;9..144,600,0;9..144,600,1;9..144,700,0&family=Work+Sans:wght@300;400;500;600&display=swap");

:root {
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Fraunces", Georgia, "Times New Roman", serif;
}

/* ---------- Body text: Work Sans ---------- */
html,
body,
p, a, span, div, li, ul, ol,
small, strong, em, b, blockquote,
label, button, input, textarea, select,
section, footer, header, nav {
  font-family: var(--font-body) !important;
}

/* ---------- Headings + countdown digits: Fraunces ---------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
#days, #hours, #minutes, #seconds {
  font-family: var(--font-display) !important;
}

/* Countdown digits - tabular figures stop the numbers
   from jittering sideways as each second ticks over. */
#days, #hours, #minutes, #seconds {
  font-variant-numeric: tabular-nums !important;
  -webkit-font-feature-settings: "tnum" !important;
          font-feature-settings: "tnum" !important;
}

/* Keep icon fonts intact - these must NOT be re-fonted */
.mdi,
.mdi::before,
[class^="mdi-"],
[class*=" mdi-"],
[class^="mdi-"]::before,
[class*=" mdi-"]::before {
  font-family: "Material Design Icons" !important;
}

/* ---------- WANT FRAUNCES ON EVERYTHING INSTEAD? ----------
   Uncomment this one block and it overrides the split above.
   Heads up: Fraunces has no 400 weight in the link, so normal
   body text will snap to 300 or 500.
--------------------------------------------------------------
html, body, p, a, span, div, li, ul, ol, small, strong, em, b,
blockquote, label, button, input, textarea, select,
section, footer, header, nav {
  font-family: var(--font-display) !important;
}
-------------------------------------------------------------- */


/* =========================================================
   2. HERO BACKGROUND
   ========================================================= */

/* ---------- Desktop / tablet (default) ---------- */
#home {
  background-image: url(../images/bg-7.jpg) !important;
}


h3.added-text {
    color: white !important;
    font-size: 26px !important;
    margin-bottom: 3rem !important;
}

img.h-12 {
    height: 7rem !important;
}

.text-red-600{
    
        color: #ffb900 !important;
}

.bg-primary{
 
  background-color: #b1081e !important;
}

.bg-dark\/50 {
    background-color: rgb(0 0 0 / 52%) !important;
}


/* ---------- Mobile (768px and below) ----------
   Swap in the portrait-friendly banner.
   Browsers only download the image that wins the cascade,
   so desktop never fetches the mobile file and vice versa.
   Change 767px to 1023px if you want tablets on the mobile banner too. */
@media (max-width: 767px) {
  #home {
    background-image: url(../images/mobile_size_banner.jpg) !important;

    /* bg-fixed causes a known jitter/zoom bug on iOS Safari
       and often crops badly on small screens. */
    background-attachment: scroll !important;
    background-position: center top !important;
  }
}


/* =========================================================
   3. EMAIL SIGNUP FORM
   The template's compiled Tailwind has no flex-1 / shrink-0
   utilities, so the layout lives here instead.
   ========================================================= */

.hiba-signup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .hiba-signup {
    justify-content: flex-start;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Input grows, button keeps its natural width */
.hiba-signup__input {
  flex: 1 1 16rem;
  min-width: 0;          /* lets it shrink below content width */
  -webkit-appearance: none;
          appearance: none;
}

.hiba-signup__btn {
  flex: 0 0 auto;
  white-space: nowrap;
  cursor: pointer;
}

/* Visible focus ring - the template's focus:ring-0 removes it entirely,
   which is an accessibility problem for keyboard users */
.hiba-signup__input:focus-visible,
.hiba-signup__btn:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
}

/* Chrome autofill otherwise paints the input solid yellow/white */
.hiba-signup__input:-webkit-autofill,
.hiba-signup__input:-webkit-autofill:hover,
.hiba-signup__input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.2) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.hiba-signup__input::-webkit-input-placeholder { opacity: 0.8; }
.hiba-signup__input::-moz-placeholder          { opacity: 0.8; }
.hiba-signup__input::placeholder               { opacity: 0.8; }

/* Status message - reserves its height so nothing jumps when it appears */
.hiba-signup__msg {
  min-height: 1.25rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hiba-signup__msg.is-visible { opacity: 1; }
.hiba-signup__msg.is-ok      { color: #86efac !important; }  /* green  */
.hiba-signup__msg.is-error   { color: #fca5a5 !important; }  /* red    */

/* Disabled state while submitting */
.hiba-signup__btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Screen-reader-only label */
.hiba-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}