/*
 * Kindi component styles — site header, navigation, footer and other parts
 * that appear on every view. Faithful port of the Lovable Header/Footer.
 */

/* ============================ Header shell ============================ */
.kindi-header { position: sticky; top: 0; z-index: 50; }

.kindi-topbar { background: linear-gradient(to left, var(--brand-red), var(--brand-red-dark) 55%, var(--brand-navy)); color: #fff; overflow: hidden; }
.kindi-topbar__track { display: flex; white-space: nowrap; padding-block: 0.5rem; width: max-content; }
.kindi-topbar__item { display: inline-flex; align-items: center; gap: 0.5rem; padding-inline: 2rem; font-size: 13px; font-weight: 600; }

.kindi-shipbar { background: var(--brand-navy); color: #fff; font-size: 0.875rem; padding: 0.5rem 1rem; text-align: center; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }

.kindi-bar {
  background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
  max-width: 1440px; margin-inline: auto; height: 5rem; display: flex; align-items: center;
  gap: 1rem; padding-inline: 1rem;
}
@media (min-width: 640px) { .kindi-bar { gap: 2rem; padding-inline: 1.5rem; } }
.kindi-bar__burger { display: inline-flex; background: none; border: 0; color: var(--brand-navy); cursor: pointer; padding: 0.5rem; }
@media (min-width: 1024px) { .kindi-bar__burger { display: none; } }
.kindi-bar__logo { flex-shrink: 0; display: flex; align-items: center; }
.kindi-bar__logo img { height: 3.25rem; width: auto; }

.kindi-search { position: relative; flex: 1; max-width: 42rem; display: none; align-items: center; }
@media (min-width: 768px) { .kindi-search { display: flex; } }
.kindi-search__ic { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); }
.kindi-search input {
  width: 100%; height: 3rem; padding-inline: 3rem 8rem; background: #fff;
  border: 2px solid color-mix(in oklab, var(--brand-navy) 10%, transparent); border-radius: 1rem;
  font-size: 0.875rem; font-weight: 600; box-shadow: var(--shadow-card); transition: border-color 0.2s, box-shadow 0.2s;
}
.kindi-search input::placeholder { color: color-mix(in oklab, var(--brand-navy) 50%, transparent); font-weight: 500; }
.kindi-search input:hover { border-color: color-mix(in oklab, var(--brand-red) 40%, transparent); }
.kindi-search input:focus { outline: none; border-color: var(--brand-red); box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand-red) 15%, transparent); }
.kindi-search__btn { position: absolute; left: 0.375rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 0.375rem; background: var(--brand-red); color: #fff; height: 2.25rem; padding-inline: 1.25rem; border: 0; border-radius: 0.75rem; font-weight: 800; font-size: 0.875rem; cursor: pointer; transition: background 0.2s; }
.kindi-search__btn:hover { background: var(--brand-red-dark); }

.kindi-bar__actions { display: flex; align-items: center; gap: 0.25rem; margin-inline-start: auto; }
@media (min-width: 640px) { .kindi-bar__actions { gap: 0.5rem; } }
.kindi-bar__util { display: none; flex-direction: column; align-items: center; gap: 2px; padding-inline: 0.5rem; height: 3rem; justify-content: center; color: var(--muted-foreground); text-decoration: none; transition: color 0.2s; }
.kindi-bar__util span { font-size: 10px; font-weight: 500; }
.kindi-bar__util:hover { color: var(--brand-navy); }
@media (min-width: 640px) { .kindi-bar__util { display: flex; } }

.kindi-cart { display: flex; align-items: center; gap: 0.75rem; height: 3rem; padding-inline-start: 1rem; padding-inline-end: 0.5rem; border-radius: 1rem; background: #fff; border: 1px solid color-mix(in oklab, var(--brand-navy) 10%, transparent); text-decoration: none; transition: all 0.2s; }
.kindi-cart:hover { border-color: color-mix(in oklab, var(--brand-red) 40%, transparent); box-shadow: var(--shadow-card); }
.kindi-cart__txt { text-align: right; line-height: 1.1; display: none; }
@media (min-width: 640px) { .kindi-cart__txt { display: block; } }
.kindi-cart__txt small { font-size: 10px; color: var(--muted-foreground); }
.kindi-cart__txt b { display: block; font-size: 0.75rem; font-weight: 800; color: var(--brand-navy); }
.kindi-cart__ic { position: relative; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--brand-red); display: grid; place-items: center; transition: background 0.2s; }
.kindi-cart:hover .kindi-cart__ic { background: var(--brand-red-dark); }
.kindi-cart__badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding-inline: 4px; background: var(--brand-navy); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; border-radius: 999px; box-shadow: 0 0 0 2px #fff; }

/* ============================ Category nav + mega ============================ */
.kindi-nav { background: var(--brand-navy); color: #fff; display: none; }
@media (min-width: 1024px) { .kindi-nav { display: block; } }
.kindi-nav__inner { max-width: 1440px; margin-inline: auto; display: flex; align-items: center; gap: 0.25rem; height: 3rem; padding-inline: 1.5rem; }
.kindi-nav__item { position: relative; height: 100%; display: flex; align-items: center; }
.kindi-nav__item--hl { margin-inline-start: auto; }
.kindi-nav__link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; white-space: nowrap; padding: 0.375rem 0.75rem; border-radius: 0.5rem; color: rgba(255,255,255,0.85); text-decoration: none; transition: all 0.15s; }
.kindi-nav__link:hover { background: rgba(255,255,255,0.1); color: #fff; }
.kindi-nav__item--hl .kindi-nav__link { background: var(--brand-red); color: #fff; }
.kindi-nav__item--hl .kindi-nav__link:hover { background: var(--brand-red-dark); }
.kindi-nav__ic { width: 1.5rem; height: 1.5rem; border-radius: 0.375rem; background: #fff; display: grid; place-items: center; }
.kindi-nav__item--hl .kindi-nav__ic { background: rgba(255,255,255,0.2); }

.kindi-mega { position: absolute; top: 100%; right: 0; min-width: 720px; background: var(--background); color: var(--foreground); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); border-top: 4px solid var(--brand-red); border-radius: 0 0 1rem 1rem; padding: 2rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.2s; z-index: 60; }
.kindi-nav__item:hover .kindi-mega, .kindi-nav__item:focus-within .kindi-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.kindi-mega__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.kindi-mega__title { display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-red); font-weight: 800; margin: 0 0 0.75rem; }
.kindi-mega__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.kindi-mega__col a { font-size: 0.875rem; color: color-mix(in oklab, var(--foreground) 80%, transparent); text-decoration: none; transition: color 0.15s; }
.kindi-mega__col a:hover { color: var(--brand-red); font-weight: 600; }

/* Mobile drawer */
.kindi-drawer { position: fixed; inset: 0; z-index: 60; }
.kindi-drawer[hidden] { display: none; }
.kindi-drawer__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.kindi-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: 85%; max-width: 24rem; background: var(--background); display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(0,0,0,0.2); }
.kindi-drawer__head { background: var(--brand-navy); color: #fff; padding: 1rem; display: flex; align-items: center; justify-content: space-between; }
.kindi-drawer__title { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; }
.kindi-drawer__title img { width: 2.5rem; height: 2.5rem; object-fit: contain; }
.kindi-drawer__close { background: none; border: 0; color: #fff; cursor: pointer; }
.kindi-drawer__body { flex: 1; overflow-y: auto; padding: 0.5rem; }
.kindi-drawer__link { display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem; font-weight: 600; font-size: 0.875rem; color: var(--foreground); text-decoration: none; border-bottom: 1px solid var(--border); }
.kindi-drawer__link--hl { margin-top: 0.5rem; background: var(--brand-red); color: #fff; border-radius: 0.75rem; justify-content: center; border: 0; }

/* ============================ Footer ============================ */
.kindi-footer { background: var(--brand-navy); color: #fff; margin-top: 4rem; }
.kindi-footer__inner { max-width: 1440px; margin-inline: auto; padding: 3rem 1.5rem; }
.kindi-footer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
@media (min-width: 768px) { .kindi-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr; } }
.kindi-footer__brand { grid-column: span 2; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) { .kindi-footer__brand { grid-column: span 1; } }
.kindi-footer__logo { height: 5rem; width: auto; background: #fff; border-radius: 1rem; padding: 0.5rem; align-self: flex-start; }
.kindi-footer__brand p { font-size: 0.875rem; color: rgba(255,255,255,0.75); line-height: 1.7; max-width: 24rem; }
.kindi-footer__social { display: flex; gap: 0.5rem; }
.kindi-footer__soc { width: 2.5rem; height: 2.5rem; border-radius: 999px; background: rgba(255,255,255,0.1); display: grid; place-items: center; color: #fff; text-decoration: none; transition: background 0.2s; font-weight: 700; }
.kindi-footer__soc:hover { background: var(--brand-red); }
.kindi-footer__col h4 { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: 1rem; margin: 0 0 1rem; color: #fff; }
.kindi-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.kindi-footer__col a, .kindi-footer__col li { font-size: 0.875rem; color: rgba(255,255,255,0.75); text-decoration: none; display: inline-flex; align-items: center; gap: 0.375rem; }
.kindi-footer__col a:hover { color: #fff; text-decoration: underline; }
.kindi-footer__hours { font-size: 0.75rem; color: rgba(255,255,255,0.6); padding-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.1); }
.kindi-footer__bottom { display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: space-between; padding-top: 2rem; margin-top: 2.5rem; border-top: 1px solid rgba(255,255,255,0.1); }
@media (min-width: 640px) { .kindi-footer__bottom { flex-direction: row; } }
.kindi-footer__copy { font-size: 0.75rem; color: rgba(255,255,255,0.6); }
.kindi-footer__copy a { color: rgba(255,255,255,0.85); }
.kindi-footer__pay { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.kindi-footer__pay > span:first-child { font-size: 0.75rem; color: rgba(255,255,255,0.6); }
.kindi-footer__paychip { font-size: 10px; font-weight: 700; background: #fff; color: var(--brand-navy); padding: 0.25rem 0.5rem; border-radius: 0.25rem; }

/* ============================ Section title (legacy block helper) ============================ */
.kindi-section-title { font-family: var(--wp--preset--font-family--display); color: var(--brand-navy); }