/* Parchment Background Styling for Shorter Timlin Archivists & Historians */
/* Creates an aged paper texture throughout the site */

/* Main body background with parchment texture */
body {
  background-color: #f5f1e8;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(139, 119, 101, 0.03) 2px,
      rgba(139, 119, 101, 0.03) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(139, 119, 101, 0.03) 2px,
      rgba(139, 119, 101, 0.03) 4px
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(139, 119, 101, 0.05) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(139, 119, 101, 0.05) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 40% 40%,
      rgba(139, 119, 101, 0.03) 0%,
      transparent 50%
    );
  background-blend-mode: multiply;
}

/* Ensure content containers have subtle parchment background */
.container {
  background-color: rgba(248, 244, 236, 0.34);
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 252, 246, 0.2) 0%,
      rgba(248, 244, 236, 0.12) 100%
    );
}

/* Content areas with paper texture */
.content,
.page,
.intro {
  background: rgba(250, 247, 241, 0.42);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(139, 119, 101, 0.02) 1px,
      rgba(139, 119, 101, 0.02) 2px
    );
}

/* Feature boxes with subtle aged paper effect */
.feature {
  background-color: rgba(255, 253, 248, 0.95);
  background-image:
    radial-gradient(
      circle at 10% 20%,
      rgba(139, 119, 101, 0.03) 0%,
      transparent 80%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(139, 119, 101, 0.03) 0%,
      transparent 80%
    );
  box-shadow:
    0 2px 4px rgba(139, 119, 101, 0.1),
    0 1px 2px rgba(139, 119, 101, 0.06);
  border: 1px solid rgba(139, 119, 101, 0.1);
  border-radius: 4px;
}

/* Header with aged paper effect */
.header {
  background-color: rgba(245, 241, 232, 0.95) !important;
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 253, 248, 0.8),
      rgba(245, 241, 232, 0.9)
    ) !important;
  border-bottom: 2px solid rgba(139, 119, 101, 0.2);
  box-shadow: 0 2px 8px rgba(139, 119, 101, 0.1);
}

/* Footer sections keep a parchment texture, but inner wrappers stay transparent */
.footer {
  background-color: rgba(239, 232, 219, 0.72) !important;
  background-image:
    radial-gradient(
      circle at 18% 22%,
      rgba(139, 119, 101, 0.08) 0%,
      transparent 38%
    ),
    radial-gradient(
      circle at 82% 78%,
      rgba(139, 119, 101, 0.06) 0%,
      transparent 34%
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(111, 95, 81, 0.035) 2px,
      rgba(111, 95, 81, 0.035) 4px
    ) !important;
}

.sub-footer {
  background-color: rgba(231, 222, 208, 0.66) !important;
  background-image:
    radial-gradient(
      circle at 24% 28%,
      rgba(139, 119, 101, 0.06) 0%,
      transparent 36%
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(111, 95, 81, 0.03) 2px,
      rgba(111, 95, 81, 0.03) 4px
    ) !important;
}

.footer .footer-title,
.footer ul li,
.footer ul li a,
.sub-footer,
.sub-footer .copyright,
.sub-footer .copyright a,
.sub-footer .social a {
  color: #2f2f41 !important;
}

/* Enhance readability on parchment background */
p, li, td {
  color: #2f2f41;
  line-height: 1.7;
}

.content p a,
.content li a,
.content td a,
.content a {
  color: #4f3d2e;
  text-decoration-line: underline;
  text-decoration-color: rgba(94, 74, 55, 0.85);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  font-weight: 500;
  transition:
    color 0.18s ease,
    text-decoration-color 0.18s ease,
    background-size 0.18s ease;
}

.content p a:hover,
.content p a:focus-visible,
.content li a:hover,
.content li a:focus-visible,
.content td a:hover,
.content td a:focus-visible,
.content a:hover,
.content a:focus-visible {
  color: #2f2f41;
  text-decoration-color: rgba(94, 74, 55, 0.9);
}

h1, h2, h3, h4, h5, h6 {
  color: #2c3e50;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

/* Add subtle texture to buttons while maintaining visibility */
.button,
.btn {
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(0, 0, 0, 0.05) 100%
    );
  border: 1px solid rgba(139, 119, 101, 0.3);
}

.button:hover,
.btn:hover {
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(0, 0, 0, 0.1) 100%
    );
}

/* Form inputs with paper texture */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea,
.form-control {
  background-color: #fffef9;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(139, 119, 101, 0.02) 1px,
      rgba(139, 119, 101, 0.02) 2px
    );
  border: 1px solid rgba(139, 119, 101, 0.3);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus,
.form-control:focus {
  background-color: #ffffff;
  border-color: rgba(139, 119, 101, 0.5);
  box-shadow: 0 0 0 3px rgba(139, 119, 101, 0.1);
  outline: none;
}

/* Logo styling */
.logo img {
  max-height: 70px;
  width: auto;
}

/* Team cards */
.team-summary {
  background: rgba(255, 253, 248, 0.95);
  padding: 2rem;
  margin-bottom: 2rem;
  border-radius: 4px;
  border: 1px solid rgba(139, 119, 101, 0.15);
  box-shadow:
    0 4px 6px rgba(139, 119, 101, 0.1),
    0 1px 3px rgba(139, 119, 101, 0.08);
}

.service-summary {
  background: transparent;
  padding: 0;
  margin-bottom: 2rem;
  border: 0;
  box-shadow: none;
}

.content .case-study-figure {
  margin: 0 0 1.5rem;
}

.content .case-study-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.content .case-study-figure figcaption {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #6b5d4f;
}

@media (min-width: 768px) {
  .content .case-study-figure {
    display: block;
    float: right;
    clear: right;
    width: 48%;
    max-width: 480px;
    margin: 0 0 1.5rem 2rem;
  }
}

/* Wrapper background */
.wrapper {
  background-color: transparent;
}

.header-wrapper .container,
.header .container {
  background-color: transparent;
  background-image: none;
}

.footer .container,
.sub-footer .container,
.footer .footer-inner,
.sub-footer .sub-footer-inner,
.footer .row,
.sub-footer .row,
.footer [class*="col-"],
.sub-footer [class*="col-"] {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Strip sections */
.strip,
.strip-white {
  background-color: rgba(255, 253, 248, 0.8);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(139, 119, 101, 0.01) 1px,
      rgba(139, 119, 101, 0.01) 2px
    );
}

.strip-grey {
  background-color: rgba(245, 241, 232, 0.9);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(139, 119, 101, 0.02) 1px,
      rgba(139, 119, 101, 0.02) 2px
    );
}
