/* ============================================================
   Kirkson Realty Group — Global Site CSS
   File: /assets/includes/site.css
   Timestamp: 2025-12-07 06:45 PT
   ============================================================ */

/* ------------------------------
   Base
------------------------------ */

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Questrial", sans-serif;
  background: #ffffff;
  color: #1f2937; /* slate-800 */
}

/* Generic links (nav/footer/etc.) */
a {
  color: inherit;
  text-decoration: none;
}

/* Phone / email links — always white, hover blue + bold */
.contact-link {
  color: #ffffff !important;
  font-weight: normal;
  text-decoration: none;
}

.contact-link:hover,
.contact-link:focus {
  font-weight: 700;
  color: #bcdcff !important; /* light blue */
}

/* ------------------------------
   White Frame (index.php only)
------------------------------ */

/* The border element you have in index.php */
.frame-border {
  position: fixed;
  inset: 0;
  border: 18px solid #ffffff; /* white frame */
  pointer-events: none;
  z-index: 10;
  box-sizing: border-box;
}

/* Inner wrapper for hero so it respects the frame */
.frame-inner {
  position: relative;
  margin: 18px;     /* match border thickness */
  margin-top: 0;    /* nav sits above hero inside frame */
  margin-bottom: 0;
  box-sizing: border-box;
}

/* ------------------------------
   Global Navigation (all pages)
------------------------------ */

.top-nav-wrapper {
  position: relative;
  z-index: 20;
  text-align: center;
  background: #ffffff;  /* white behind nav */
  padding-top: 16px;
  padding-bottom: 6px;
  border-bottom: none;  /* no horizontal line under nav */
}

.top-nav-inner {
  display: inline-flex;
  gap: 32px;
  align-items: center;
  justify-content: center;
}

.nav-item {
  font-size: 16px;
  color: #1f2937;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.nav-item:hover {
  color: #111827;
  font-weight: 600;
}

/* ACTIVE NAV: subtle bold, NO underline */
.nav-item.active {
  color: #111827;
  font-weight: 700;
  border-bottom: none;
}

/* ------------------------------
   HERO (index.php)
------------------------------ */

.hero-wrapper {
  position: relative;
  width: 100%;
  min-height: 420px;
  height: calc(100vh - 210px); /* tweak if needed */
  max-height: 900px;
  overflow: hidden;
  background: #000000; /* fallback behind image */
}

/* Full-color hero image: no tint, no opacity */
.hero-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none !important;
  opacity: 1 !important;
}

/* No overlay — keep it transparent */
.hero-overlay {
  display: none !important;
}

/* Hero text position (you tuned this to ~40% in the file) */
.hero-content {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -40%);
  text-align: center;
  color: #ffffff;
  z-index: 3;
}

.hero-content h1 {
  font-size: 48px;
  margin: 0 0 12px 0;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Optional tagline class if you choose to use it */
.hero-tagline {
  font-size: 22px;
  margin: 0;
  line-height: 1.4;
}

.hero-tagline span {
  display: block;
  white-space: nowrap; /* keep each line intact */
}

/* ------------------------------
   Footer (all pages)
------------------------------ */

footer.site-footer {
  background: #ffffff;
  padding: 6px 0;
  text-align: center;
  font-size: 12px;
  color: #4b5563;
  border-top: none;        /* no line above footer */
  margin-top: 10px;        /* small buffer from hero/content */
}

.footer-inner {
  display: inline-block;
  text-align: center;
}

.footer-link {
  color: #4b5563;
  text-decoration: none;
}

.footer-link:hover {
  color: #111827;
  font-weight: 600;
}

/* ------------------------------
   Agents grid (agents.php)
------------------------------ */

main.agents-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 20px 40px;
}

h1.page-title {
  text-align: center;
  letter-spacing: 0.15em;
  margin-bottom: 40px;
  font-size: 32px;
  text-transform: uppercase;
  color: #111827;
}

/* Row 1: single centered card (Marc) */
.row-1 {
  display: flex;
  justify-content: center;
  margin-bottom: 36px;
}

/* Row 2: 4 cards; center cards in each grid cell,
   and keep them centered on mobile (single column). */
.row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  justify-items: center;    /* centers cards inside each grid cell */
}

/* Agent cards; black with thin white outline */
.agent-card {
  background: #000000;
  color: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.48);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  text-decoration: none;
  width: 100%;
  max-width: 260px;
  border: 1px solid #ffffff; /* thin white border */
}

.agent-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.65);
  border-color: #93c5fd;  /* subtle blue highlight on hover */
}

.agent-photo {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.agent-info {
  padding: 8px;
  text-align: center;
}

.agent-name {
  margin: 0 0 6px;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.agent-role {
  margin: 0;
  font-size: 12px;
  color: #e5e7eb;
  letter-spacing: 0.05em;
}

/* ------------------------------
   Location cards (About > Where We Work)
------------------------------ */

.location-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.location-card .about-photo {
  height: 160px;          /* slightly shorter than core services */
}

.location-card .agent-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;     /* ensure ALL locations (incl. East Bay) are centered */
}

.location-name {
  margin: 0 0 4px;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.location-name2 {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* CTA pinned to bottom */
.location-cta {
  margin-top: auto;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Links: white default/visited, light blue + bold on hover */
.location-cta a {
  color: #ffffff;
  text-decoration: none;
}

.location-cta a:visited {
  color: #ffffff;
}

.location-cta a:hover,
.location-cta a:focus {
  color: #93c5fd;
  font-weight: 600;
}

/* Responsive rows */
@media (max-width: 900px) {
  .row-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .row-4 {
    grid-template-columns: 1fr;
  }
}