html,
body {
  max-inline-size: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

button,
input,
select,
textarea,
a {
  touch-action: manipulation;
}

.primary-nav a,
.footer-nav a,
.tool-card a,
.section-link a {
  min-block-size: var(--touch-target);
}

.ad-placeholder {
  inline-size: 100%;
  min-inline-size: 0;
}

.hero-card,
.tool-card,
.category-card,
.feature-card,
.search-box,
.faq-list details {
  min-inline-size: 0;
}

@media (max-width: 22.5rem) {
  :root {
    --container-padding: 0.875rem;
  }

  .brand-text {
    max-inline-size: 11rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .button {
    inline-size: 100%;
  }

  .search-box button {
    inline-size: 100%;
  }
}

@media (max-width: 47.9375rem) {
  .primary-nav {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .primary-nav a {
    inline-size: auto;
  }
}

@media (min-width: 48rem) {
  .brand-text {
    white-space: nowrap;
  }

  .ad-placeholder {
    margin-block: var(--space-8);
  }
}

@media (min-width: 80rem) {
  .hero-grid {
    gap: var(--space-16);
  }
}
@media (min-width: 48rem) {
  .ingredient-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1.2fr 1fr 1fr 1.2fr auto;
    gap: 0.75rem;
    align-items: end;
  }
}
@media print {
  .site-header,
  .nav-toggle,
  .primary-nav,
  .ad-placeholder,
  .hero-actions,
  .site-footer {
    display: none;
  }

  body {
    overflow: visible;
  }

  .section {
    padding-block: var(--space-6);
  }
}
/* Recipe Cost Calculator — ingredient grid */
@media (min-width: 48rem) {
  .ingredient-row {
    grid-template-columns: 2fr 1fr 1.2fr 1fr 1fr 1.2fr auto;
    gap: 0.75rem;
    align-items: end;
  }
}
/* Mobile header and tool page navigation fix */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--color-text, #0f172a);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.site-logo::before {
  content: "";
  inline-size: 1.75rem;
  block-size: 1.75rem;
  flex: 0 0 auto;
  border: 2px solid var(--color-primary, #0f766e);
  border-radius: 0.5rem;
  background:
    linear-gradient(var(--color-primary, #0f766e), var(--color-primary, #0f766e)) 50% 34% / 55% 2px no-repeat,
    linear-gradient(var(--color-primary, #0f766e), var(--color-primary, #0f766e)) 50% 50% / 55% 2px no-repeat,
    linear-gradient(var(--color-primary, #0f766e), var(--color-primary, #0f766e)) 42% 66% / 38% 2px no-repeat;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--color-border, #dbe4e2);
  border-radius: 999px;
  background: var(--color-surface, #ffffff);
  color: var(--color-text, #0f172a);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--color-primary, #0f766e);
  border-color: var(--color-primary, #0f766e);
}

.content-section {
  padding: clamp(2rem, 5vw, 4rem) 0;
}

.narrow-container {
  width: min(100% - 2rem, 62rem);
  margin-inline: auto;
}

.content-section h2 {
  margin: 1.25rem 0 0.5rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-text, #0f172a);
}

.content-section p {
  max-width: 75ch;
  margin: 0 0 0.875rem;
  color: var(--color-muted, #475569);
  line-height: 1.7;
}

.content-section a {
  color: var(--color-primary, #0f766e);
  font-weight: 600;
}

.footer-inner {
  width: min(100% - 2rem, 75rem);
  margin-inline: auto;
}

@media (max-width: 47.9375rem) {
  .site-header,
  .site-header .header-inner,
  .site-header .primary-nav,
  .site-header .site-nav {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: auto !important;
  }

  .site-header .header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
  }

  .site-header .brand,
  .site-header .site-logo {
    max-inline-size: 100%;
  }

  .site-header .primary-nav,
  .site-header .site-nav {
    inline-size: 100%;
    max-inline-size: 100%;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-start: 0;
    scrollbar-width: none;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .site-header .primary-nav::-webkit-scrollbar,
  .site-header .site-nav::-webkit-scrollbar {
    display: none;
  }

  .site-header .primary-nav ul {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    inline-size: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-header .primary-nav li {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-header .primary-nav a,
  .site-header .site-nav a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 3rem;
    padding: 0.625rem 1.125rem;
    border: 1px solid var(--color-border, #dbe4e2);
    border-radius: 999px;
    background: var(--color-surface, #ffffff);
    color: var(--color-text, #0f172a);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
  }

  .hero-section {
    padding-block-start: var(--space-8);
  }

  .narrow-container {
    width: min(100% - 1.5rem, 62rem);
  }
}

@media print {
  /* Step 1: Print ke waqt header, footer aur baaki sabhi sections ko gayab kar do */
  .site-header,
  .site-footer,
  .content-section > *:not(#recipeCostCalculatorContainer),
  .hero-section,
  nav,
  footer {
    display: none !important;
  }

  /* Step 2: Sirf Recipe Cost Calculator container ko dikhao */
  #recipeCostCalculatorContainer {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  /* Step 3: Print ke waqt buttons ko chhupa do taaki PDF mein print button na aaye */
  #printRecipeBtn, 
  #downloadTxtBtn, 
  .form-actions,
  button {
    display: none !important;
  }
}
/* Recipe Cost Calculator — breakdown table wrapping */
#breakdownContainer table {
  word-break: break-word;
  overflow-wrap: break-word;
}
/* Recipe Cost Calculator — responsive ingredient rows */
@media (min-width: 48rem) {
  .ingredient-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1.2fr 1fr 1fr 1.2fr auto;
    gap: 0.75rem;
    align-items: end;
  }
}

@media (max-width: 47.9375rem) {
  .ingredient-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    align-items: stretch;
  }

  .calculator-results-grid {
    grid-template-columns: 1fr;
  }
}