/* Homepage-specific styles for Rabeekit Redesign */
@import url('utilities.css');

/* ------------------------- */
/* --- General & Layout --- */
/* ------------------------- */

body.homepage {
  background: var(--card); /* Use white for a more premium, app-like feel */
  color: var(--ink);
  font-family: 'Work Sans', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hp-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.hp-section {
  padding: 100px 0;
}

@media (max-width: 768px) {
  .hp-section {
    padding: 80px 0;
  }
}

/* ------------------------- */
/* --- Sticky Header --- */
/* ------------------------- */

.hp-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.hp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.hp-header-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.hp-header-nav a {
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}

.hp-header-nav a:hover {
  color: var(--ink);
}

.hp-header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hp-icon-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}

.hp-icon-btn:hover {
  color: var(--ink);
}

.hp-icon-btn svg {
  display: block;
  width: 20px;
  height: 20px;
}

@media (max-width: 992px) {
  .hp-header-nav { display: none; } /* Simplified for mobile */
}

/* ------------------------- */
/* --- Hero Section --- */
/* ------------------------- */

.hp-hero {
  text-align: center;
  padding: 120px 0 80px;
}

.hp-hero-content {
  max-width: 700px;
  margin: 0 auto;
}

.hp-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 8vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  text-transform: uppercase;
  color: var(--ink);
}

.hp-hero p {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .hp-hero { padding: 80px 0 60px; }
  .hp-hero h1 { font-size: clamp(40px, 10vw, 48px); }
  .hp-hero p { font-size: 16px; }
}

/* ------------------------- */
/* --- Global Search --- */
/* ------------------------- */

.hp-search-wrap {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
}

.hp-search-input {
  width: 100%;
  height: 60px;
  padding: 0 24px 0 56px;
  font-family: 'Work Sans', sans-serif;
  font-size: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background-color: var(--card);
  color: var(--ink);
  outline: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.hp-search-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(47, 93, 80, 0.2), 0 4px 12px rgba(0,0,0,0.04);
}

.hp-search-icon {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  pointer-events: none;
}

/* ------------------------- */
/* --- Calculator Grid --- */
/* ------------------------- */

.hp-grid-title {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 60px;
}

.hp-grid-title h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

.hp-grid-title p {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0;
}

.hp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.hp-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 24px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  transition: all 0.2s ease;
}

.hp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.07);
  border-color: var(--line);
}

.hp-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background-color: var(--teal);
  color: white;
}

.hp-card-icon svg {
  width: 22px;
  height: 22px;
}

.hp-card h3 {
  font-family: 'Work Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
}

.hp-card p {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}

.hp-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal-dark);
}

@media (max-width: 1024px) {
  .hp-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .hp-grid { grid-template-columns: 1fr; }
}

/* ------------------------- */
/* --- Category Sections --- */
/* ------------------------- */

.hp-category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 640px) {
  .hp-category-grid { grid-template-columns: 1fr; }
}

/* ------------------------- */
/* --- Why RabeeKit --- */
/* ------------------------- */

.hp-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 768px) {
  .hp-features-grid { grid-template-columns: 1fr; }
}

/* ------------------------- */
/* --- FAQ Section --- */
/* ------------------------- */

.hp-faq-wrap {
  max-width: 960px;
  margin: 0 auto;
}

.hp-faq-wrap .hp-grid-title {
  text-align: center;
  margin-bottom: 28px;
}

.hp-faq-wrap .faq-heading {
  margin: 0;
}

.hp-faq-subtitle {
  max-width: 600px;
  margin: 10px auto 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
}

.hp-faq-wrap .faq-list {
  gap: 0;
  border-radius: 14px;
}

.hp-faq-wrap .faq-item {
  transition: background-color .2s ease;
}

.hp-faq-wrap .faq-item + .faq-item {
  border-top: 1px solid var(--line-soft);
}

.hp-faq-wrap .faq-item summary {
  padding: 20px 24px;
  transition: color .2s ease, background-color .2s ease;
}

.hp-faq-wrap .faq-item summary:hover {
  background: rgba(36, 104, 95, .035);
  color: var(--teal-dark);
}

.hp-faq-wrap .faq-item p {
  padding: 0 24px 22px;
  line-height: 1.65;
}

.hp-faq-wrap .faq-item[open] p {
  animation: hp-faq-reveal .22s ease-out both;
}

@keyframes hp-faq-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.hp-faq-cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 24px;
  color: var(--ink-soft);
  font-size: 14px;
}

.hp-faq-cta a {
  color: var(--teal-dark);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.hp-faq-cta a:hover {
  color: var(--teal);
  border-color: currentColor;
}

@media (max-width: 640px) {
  .hp-faq-wrap .faq-item summary { padding: 18px; }
  .hp-faq-wrap .faq-item p { padding: 0 18px 18px; }
}

/* ------------------------- */
/* --- Footer --- */
/* ------------------------- */

.hp-footer {
  background: #F7F8F5; /* A slightly off-white bg for footer */
  padding: 80px 0;
  border-top: 1px solid var(--line-soft);
}

.hp-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: 40px;
}


/* Footer column 1: brand info, features, suggest button, social */
.hp-footer-col-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hp-footer-tagline {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}

.hp-footer-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hp-footer-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-soft);
}

.hp-footer-features li i,
.hp-footer-feature-icon {
  width: 16px;
  height: 16px;
  color: var(--teal);
  flex-shrink: 0;
}

.hp-footer-suggest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
  width: fit-content;
}

.hp-footer-suggest:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.hp-footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.hp-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}

.hp-footer-social a:hover {
  color: var(--teal);
  border-color: var(--teal);
}

.hp-footer-social i {
  width: 14px;
  height: 14px;
}

.hp-footer-col h3 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
}

.hp-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hp-footer-col a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
  overflow-wrap: anywhere;
  min-width: 0;
}

.hp-footer-col a:hover {
  color: var(--ink);
}

/* Grid columns must be allowed to shrink below content size (long
   calculator names like "Filament Spool Weight Calculator" would
   otherwise force the grid track wider than the viewport). */
.hp-footer-col,
.hp-footer-col-brand,
.hp-footer-grid > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hp-footer-col h3 {
  overflow-wrap: anywhere;
}

.hp-footer-bottom {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  color: var(--ink-soft);
  flex-wrap: wrap;
}

.hp-footer-bottom > span:first-child {
  line-height: 1.4;
}

.hp-footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 12px;
  margin-left: auto;
  min-width: 0;
  max-width: 100%;
}

.hp-footer-bottom > span:first-child {
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.hp-footer-bottom-links a {
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 11px;
  line-height: 1.6;
  /* WCAG 2.5.8 target size: these links render 17.6px tall (11px x 1.6) and
     Lighthouse measured "Privacy Policy" at 72.2x17.6 and "Cookie
     preferences" at 103.8x17.6, both under the 24x24 minimum. Vertical padding
     grows the hit box to 29.6px without changing the text position or the
     horizontal layout. The row gap stays 4px, so wrapped rows now read as
     16px apart instead of touching. */
  padding: 6px 0;
}

.hp-footer-bottom-links a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .hp-footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 16px; }
  .hp-footer-bottom { flex-direction: column; gap: 16px; align-items: stretch; }
  .hp-footer-bottom-links {
    margin-left: 0;
    justify-content: center;
    text-align: center;
  }
}

/* Narrow phones: single column footer avoids any squeeze/overflow */
@media (max-width: 420px) {
  .hp-footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Footer column heading with inline icon */
.hp-footer-col h3 {
  display: flex;
  align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
}

.hp-footer-col h3 svg {
  flex-shrink: 0;
}

/* "View all" link inside footer lists */
.footer-view-all {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
}

.footer-view-all:hover {
  text-decoration: underline;
}

/* Search results container */
#hp-search-results {
  padding-top: 60px;
}

/* Hide sections when searching */
.searching .hp-hide-on-search {
  display: none;
}

/* ------------------------- */
/* --- CLS Prevention --- */
/* ------------------------- */

/* Reserve space for dynamically injected calculator cards */
.hp-grid {
  min-height: 220px;
}

/* Popular grid has many more cards — reserve more space */
#popular-calculators-grid {
  min-height: 1200px;
}

@media (max-width: 1024px) {
  #popular-calculators-grid { min-height: 2420px; }
}

@media (max-width: 640px) {
  #popular-calculators-grid { min-height: 4620px; }
}

/* Reserve space for dynamically injected FAQ items */
#homepage-faq-list {
  min-height: 200px;
}

/* Reserve space for dynamically injected footer links */
[data-footer-category] {
  min-height: 120px;
}