/*
Theme Name: The Pepper Agency
Description: Custom theme converted from a Claude Design prototype for The Pepper Agency.
Author: The Pepper Agency
Version: 1.0
Text Domain: pepper-agency
*/

/* ---- Global reset & accessibility ---- */
html { scroll-behavior: smooth; }
body { margin: 0; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #c13a1b;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Homepage hero blob animation ---- */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-22px); }
}

/* ---- Contact form field styling ---- */
.pa-field {
  width: 100%;
  box-sizing: border-box;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  color: #23262f;
  background: #fff;
  border: 1px solid rgba(35,38,47,0.16);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color .2s;
}
.pa-field::placeholder { color: rgba(35,38,47,0.4); }
.pa-field:hover { border-color: rgba(35,38,47,0.32); }
.pa-field:focus { border-color: #9e2f15; outline: none; }
select.pa-field {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23101212' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

/* ---- Responsive: stack multi-column layouts on small screens ---- */
@media (max-width: 780px) {
  body [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  body [style*="max-width:1240px"],
  body [style*="max-width:1000px"],
  body [style*="max-width:900px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ---- Mobile nav menu (checkbox-driven, no JS needed) ---- */
.pa-nav-toggle { display: none; }
.pa-nav-burger {
  display: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

@media (max-width: 780px) {
  header nav { flex-wrap: wrap; }
  header nav > ul {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px !important;
    padding: 22px 0 6px;
    order: 3;
  }
  header nav > a.pa-nav-cta {
    display: none;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin: 4px 0 22px;
    order: 4;
  }
  .pa-nav-burger { display: flex; order: 2; }
  .pa-nav-toggle:checked ~ ul,
  .pa-nav-toggle:checked ~ a.pa-nav-cta {
    display: flex;
  }
}

/* ---- Gutenberg content helper classes (used by block-editor pages) ---- */
.wp-block-heading { font-family: 'Space Grotesk', sans-serif; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 0.5em; }
.pa-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 16px; }
.pa-stat-text { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: clamp(20px,2.2vw,27px); line-height: 1.3; }
.pa-photo img { border-radius: 24px; aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.wp-block-group p:not(.pa-eyebrow):not(.pa-stat-text) { line-height: 1.7; }

/* ---- Hover states (converted from the original design's hover styling) ---- */
.dc-hov-nav:hover { color: #23262f; }
.dc-hov-nav-cta:hover { box-shadow: 0 12px 26px -8px rgba(158,47,21,0.75); }
.dc-hov-1:hover{color:#23262f}
.dc-hov-2:hover{color:#23262f}
.dc-hov-3:hover{color:#23262f}
.dc-hov-4:hover{color:#23262f}
.dc-hov-5:hover{color:#23262f}
.dc-hov-6:hover{color:#23262f}
.dc-hov-7:hover{box-shadow:0 12px 26px -8px rgba(158,47,21,0.75)}
.dc-hov-8:hover{transform:translateY(-2px)}
.dc-hov-9:hover{border-color:#f7f3ec}
.dc-hov-10:hover{border-color:rgba(193,58,27,0.5)}
.dc-hov-11:hover{border-color:rgba(193,58,27,0.5)}
.dc-hov-12:hover{border-color:rgba(193,58,27,0.5)}
.dc-hov-13:hover{border-color:rgba(193,58,27,0.5)}
.dc-hov-14:hover{border-color:rgba(193,58,27,0.5)}
.dc-hov-15:hover{border-color:rgba(193,58,27,0.5)}
.dc-hov-16:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-17:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-18:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-19:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-20:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-21:hover{transform:translateY(-2px)}
.dc-hov-22:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-23:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-24:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-25:hover{color:#f7f3ec}
.dc-hov-26:hover{color:#f7f3ec}
.dc-hov-27:hover{color:#f7f3ec}
.dc-hov-28:hover{color:#f7f3ec}
.dc-hov-29:hover{color:#f7f3ec}
.dc-hov-30:hover{color:#f7f3ec}
.dc-hov-31:hover{color:#f7f3ec}
.dc-hov-32:hover{color:#f7f3ec}
.dc-hov-33:hover{color:#23262f}
.dc-hov-34:hover{color:#23262f}
.dc-hov-35:hover{color:#23262f}
.dc-hov-36:hover{color:#23262f}
.dc-hov-37:hover{color:#23262f}
.dc-hov-38:hover{color:#23262f}
.dc-hov-39:hover{box-shadow:0 12px 26px -8px rgba(158,47,21,0.75)}
.dc-hov-40:hover{transform:translateY(-2px)}
.dc-hov-41:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-42:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-43:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-44:hover{color:#f7f3ec}
.dc-hov-45:hover{color:#f7f3ec}
.dc-hov-46:hover{color:#f7f3ec}
.dc-hov-47:hover{color:#f7f3ec}
.dc-hov-48:hover{color:#f7f3ec}
.dc-hov-49:hover{color:#f7f3ec}
.dc-hov-50:hover{color:#f7f3ec}
.dc-hov-51:hover{color:#f7f3ec}
.dc-hov-52:hover{color:#23262f}
.dc-hov-53:hover{color:#23262f}
.dc-hov-54:hover{color:#23262f}
.dc-hov-55:hover{color:#23262f}
.dc-hov-56:hover{color:#23262f}
.dc-hov-57:hover{color:#23262f}
.dc-hov-58:hover{box-shadow:0 12px 26px -8px rgba(158,47,21,0.75)}
.dc-hov-59:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-60:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-61:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-62:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-63:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-64:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-65:hover{transform:translateY(-2px)}
.dc-hov-66:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-67:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-68:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-69:hover{color:#f7f3ec}
.dc-hov-70:hover{color:#f7f3ec}
.dc-hov-71:hover{color:#f7f3ec}
.dc-hov-72:hover{color:#f7f3ec}
.dc-hov-73:hover{color:#f7f3ec}
.dc-hov-74:hover{color:#f7f3ec}
.dc-hov-75:hover{color:#f7f3ec}
.dc-hov-76:hover{color:#f7f3ec}
.dc-hov-77:hover{color:#23262f}
.dc-hov-78:hover{color:#23262f}
.dc-hov-79:hover{color:#23262f}
.dc-hov-80:hover{color:#23262f}
.dc-hov-81:hover{color:#23262f}
.dc-hov-82:hover{color:#23262f}
.dc-hov-83:hover{box-shadow:0 12px 26px -8px rgba(158,47,21,0.75)}
.dc-hov-84:hover{transform:translateY(-2px)}
.dc-hov-85:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-86:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-87:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-88:hover{color:#f7f3ec}
.dc-hov-89:hover{color:#f7f3ec}
.dc-hov-90:hover{color:#f7f3ec}
.dc-hov-91:hover{color:#f7f3ec}
.dc-hov-92:hover{color:#f7f3ec}
.dc-hov-93:hover{color:#f7f3ec}
.dc-hov-94:hover{color:#f7f3ec}
.dc-hov-95:hover{color:#f7f3ec}
.dc-hov-96:hover{color:#23262f}
.dc-hov-97:hover{color:#23262f}
.dc-hov-98:hover{color:#23262f}
.dc-hov-99:hover{color:#23262f}
.dc-hov-100:hover{color:#23262f}
.dc-hov-101:hover{color:#23262f}
.dc-hov-102:hover{box-shadow:0 12px 26px -8px rgba(158,47,21,0.75)}
.dc-hov-103:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-104:hover{color:#9e2f15}
.dc-hov-105:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-106:hover{color:#9e2f15}
.dc-hov-107:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-108:hover{color:#9e2f15}
.dc-hov-109:hover{transform:translateY(-2px)}
.dc-hov-110:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-111:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-112:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-113:hover{color:#f7f3ec}
.dc-hov-114:hover{color:#f7f3ec}
.dc-hov-115:hover{color:#f7f3ec}
.dc-hov-116:hover{color:#f7f3ec}
.dc-hov-117:hover{color:#f7f3ec}
.dc-hov-118:hover{color:#f7f3ec}
.dc-hov-119:hover{color:#f7f3ec}
.dc-hov-120:hover{color:#f7f3ec}
.dc-hov-121:hover{color:#23262f}
.dc-hov-122:hover{color:#23262f}
.dc-hov-123:hover{color:#23262f}
.dc-hov-124:hover{color:#23262f}
.dc-hov-125:hover{color:#23262f}
.dc-hov-126:hover{color:#23262f}
.dc-hov-127:hover{box-shadow:0 12px 26px -8px rgba(158,47,21,0.75)}
.dc-hov-128:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-129:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-130:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-131:hover{color:#f7f3ec}
.dc-hov-132:hover{color:#f7f3ec}
.dc-hov-133:hover{color:#f7f3ec}
.dc-hov-134:hover{color:#f7f3ec}
.dc-hov-135:hover{color:#f7f3ec}
.dc-hov-136:hover{color:#f7f3ec}
.dc-hov-137:hover{color:#f7f3ec}
.dc-hov-138:hover{color:#f7f3ec}
.dc-hov-139:hover{color:#23262f}
.dc-hov-140:hover{color:#23262f}
.dc-hov-141:hover{color:#23262f}
.dc-hov-142:hover{color:#23262f}
.dc-hov-143:hover{color:#23262f}
.dc-hov-144:hover{color:#23262f}
.dc-hov-145:hover{box-shadow:0 12px 26px -8px rgba(158,47,21,0.75)}
.dc-hov-146:hover{transform:translateY(-2px)}
.dc-hov-147:hover{color:#c13a1b}
.dc-hov-148:hover{color:#c13a1b}
.dc-hov-149:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-150:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-151:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-152:hover{color:#f7f3ec}
.dc-hov-153:hover{color:#f7f3ec}
.dc-hov-154:hover{color:#f7f3ec}
.dc-hov-155:hover{color:#f7f3ec}
.dc-hov-156:hover{color:#f7f3ec}
.dc-hov-157:hover{color:#f7f3ec}
.dc-hov-158:hover{color:#f7f3ec}
.dc-hov-159:hover{color:#f7f3ec}
.dc-hov-160:hover{transform:translateY(-2px)}
.dc-hov-161:hover{border-color:#f7f3ec}
.dc-hov-162:hover{border-color:rgba(193,58,27,0.5)}
.dc-hov-163:hover{border-color:rgba(193,58,27,0.5)}
.dc-hov-164:hover{border-color:rgba(193,58,27,0.5)}
.dc-hov-165:hover{border-color:rgba(193,58,27,0.5)}
.dc-hov-166:hover{border-color:rgba(193,58,27,0.5)}
.dc-hov-167:hover{border-color:rgba(193,58,27,0.5)}
.dc-hov-168:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-169:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-170:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-171:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-172:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-173:hover{transform:translateY(-2px)}
.dc-hov-174:hover{transform:translateY(-2px)}
.dc-hov-175:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-176:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-177:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-178:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-179:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-180:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-181:hover{transform:translateY(-2px)}
.dc-hov-182:hover{transform:translateY(-2px)}
.dc-hov-183:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-184:hover{color:#9e2f15}
.dc-hov-185:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-186:hover{color:#9e2f15}
.dc-hov-187:hover{border-color:rgba(193,58,27,0.4)}
.dc-hov-188:hover{color:#9e2f15}
.dc-hov-189:hover{transform:translateY(-2px)}
.dc-hov-190:hover{transform:translateY(-2px)}
.dc-hov-191:hover{color:#c13a1b}
.dc-hov-192:hover{color:#c13a1b}
.dc-hov-193:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-194:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-195:hover{border-color:#c13a1b;color:#c13a1b}
.dc-hov-196:hover{color:#f7f3ec}
.dc-hov-197:hover{color:#f7f3ec}
.dc-hov-198:hover{color:#f7f3ec}
.dc-hov-199:hover{color:#f7f3ec}
.dc-hov-200:hover{color:#f7f3ec}
.dc-hov-201:hover{color:#f7f3ec}
.dc-hov-202:hover{color:#f7f3ec}
.dc-hov-203:hover{color:#f7f3ec}