/* =========================
   SKIP LINK
========================= */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.6rem 1.2rem;
  background: var(--color-primary, #001b44);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 0 0 0.5rem 0.5rem;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* =========================
   TYPOGRAPHY
========================= */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.05;
}

h1 { margin-bottom: 1.5rem; font-size: 60px; }
@media (max-width: 991px) { h1 { font-size: 40px; } }

h2 { margin: 10px 0; font-weight: 900; font-size: 32px; }

p, li, blockquote, input, textarea, button, a {
  font-family: var(--font-body);
}

p { line-height: 1.6; margin: 10px 0; font-size: 16px; }
ul { padding: 0 15px; list-style: none; }

strong, b { color: var(--color-secondary-on-light); font-weight: 700; }

.section-label {
  margin: 0; padding: 0;
  color: var(--color-secondary-on-light);
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 0.95vw, 0.95rem);
  font-weight: 700; line-height: 1.15;
  letter-spacing: 0.03em; text-transform: uppercase;
}

/* =========================
   BLOCKQUOTE
========================= */
blockquote {
  position: relative;
  margin: 2rem 0;
  padding: 0.5rem 1.5rem 0.5rem 4.5rem;
  font-size: 1.2rem; color: var(--color-text); line-height: 1.6;
}
blockquote::before {
  content: "\201C";
  position: absolute; left: 0.4rem; top: -0.4rem;
  font-family: Georgia, serif; font-size: 8rem; line-height: 1;
  color: var(--color-accent-on-light); opacity: 0.25;
}

/* =========================
   CTA — strong em a pattern
========================= */
strong em a, em strong a, a strong em, a em strong {
  margin-top: 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  padding: var(--cta-padding-y) var(--cta-padding-x);
  border: 2px solid var(--color-secondary); border-radius: var(--cta-radius);
  background-color: var(--color-secondary); color: var(--color-on-secondary) !important;
  font-family: var(--font-body); font-weight: var(--cta-font-weight);
  font-size: 1rem; line-height: 1; text-decoration: none !important; font-style: normal;
  cursor: pointer; box-shadow: var(--cta-shadow); transition: var(--cta-transition);
  position: relative; z-index: 0;
}
strong em a:hover, em strong a:hover, a strong em:hover, a em strong:hover,
strong em a:focus, em strong a:focus {
  background-color: var(--color-secondary-hover); border-color: var(--color-secondary-hover);
  color: var(--color-on-secondary) !important;
  transform: translateY(-2px); box-shadow: var(--cta-shadow-hover);
}
strong em a:active, em strong a:active, a strong em:active, a em strong:active {
  background-color: var(--color-secondary-active); border-color: var(--color-secondary-active);
  transform: translateY(0); box-shadow: var(--cta-shadow-active);
}

/* =========================
   LINK ARROW
========================= */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: 500; font-size: 1rem; color: var(--color-primary);
  text-decoration: none; transition: color 0.3s ease;
}
.link-arrow .arrow { display: inline-block; transition: transform 0.3s ease; }
.link-arrow:hover { color: var(--color-accent-on-light); }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* =========================
   PROJECT CTA
========================= */
.header-cta, .project-cta {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font-family: var(--font-body); font-weight: var(--cta-font-weight);
  line-height: 1; text-decoration: none !important; cursor: pointer;
  transition: background-color 0.22s ease, border-color 0.22s ease,
              color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.header-cta {
  padding: 10px 15px;
  border: 2px solid var(--color-secondary); border-radius: var(--cta-radius);
  background: transparent; color: var(--color-on-primary) !important; font-size: 13px;
}
.header-cta:hover, .header-cta:focus {
  background: var(--color-secondary); border-color: var(--color-secondary);
  color: var(--color-on-secondary) !important; transform: translateY(-1px);
}
.header-cta:active { transform: translateY(0); }

.project-cta {
  padding: var(--cta-padding-y) var(--cta-padding-x);
  border: 2px solid var(--color-secondary); border-radius: var(--cta-radius);
  background: var(--color-secondary); color: var(--color-on-secondary) !important;
  font-size: 0.9rem; box-shadow: var(--cta-shadow);
}
.project-cta:hover, .project-cta:focus {
  background: var(--color-secondary-hover); border-color: var(--color-secondary-hover);
  color: var(--color-on-secondary) !important;
  transform: translateY(-2px); box-shadow: var(--cta-shadow-hover);
}
.project-cta:active {
  background: var(--color-secondary-active); border-color: var(--color-secondary-active);
  transform: translateY(0); box-shadow: var(--cta-shadow-active);
}

@media (max-width: 767px) {
  .header-cta { display: none; }
  .project-cta { width: 100%; max-width: 420px; padding-inline: 1.4rem; font-size: 1.15rem; }
}

/* =========================
   WP IMAGES
========================= */
.wp-block-image.size-large { padding: 0; margin: 0; }
.wp-block-image.size-large img { max-width: 80%; height: auto; }
.wp-block-image.size-medium img { max-width: 50%; height: auto; }
@media (max-width: 991px) {
  .wp-block-image.size-large img, .wp-block-image.size-medium img { max-width: 100%; }
}

/* =========================
   BREADCRUMB
========================= */
.breadcrumb {
  font-size: 0.9rem; margin-bottom: 1.5rem;
  color: var(--color-muted);
}
.breadcrumb a { color: var(--color-primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* =========================
   ANIMATIONS
========================= */
@keyframes project-hero-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-scroll-indicator {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.65; background-position: center 8px; }
  50%       { transform: translateX(-50%) translateY(7px); opacity: 1; background-position: center 18px; }
}

/* =========================
   POSTS PAGINATION
========================= */
.nav-links {
  display: flex; justify-content: center; gap: 0.5rem; margin-top: 3rem;
}
.nav-links a, .nav-links span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding: 0 0.5rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: 0.9rem; text-decoration: none; color: var(--color-text);
}
.nav-links .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.nav-links a:hover { border-color: var(--color-primary); color: var(--color-primary); }