/* ==========================================================================
   LIFTED BY SOOF — Premium Redesign Layer
   Branch: redesign/premium-upgrade

   Priority order (per audit):
   1. Font swap
   2. Color palette warmth
   3. Hover & active states
   4. Layout & card grid
   5. Typography polish
   6. Entry animations
   ========================================================================== */


/* ==========================================================================
   1. FONT SWAP
   Open Sans → Quicksand (body): modern, friendly, legible
   Roboto Slab → Playfair Display (headings): editorial, elegant, premium
   Both fonts already loaded via Google Fonts import in main.css.
   ========================================================================== */

body,
input,
select,
textarea {
  font-family: 'Quicksand', sans-serif;
  font-weight: 500;          /* Quicksand 400 is too light at small sizes */
  letter-spacing: 0.01em;
  color: #7a7570;            /* warm gray replaces cold #7f888f */
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  color: #2a201c;            /* warm dark brown replaces cold #3d4449 */
}

/* Buttons use Quicksand — serif uppercase is illegible */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
}

strong, b {
  color: #2a201c;
  font-weight: 600;
}


/* ==========================================================================
   2. COLOR PALETTE — warm neutrals
   ========================================================================== */

/* Warm off-white page background */
body {
  background-color: #faf8f6;
}

/* Main content wrapper background */
#main {
  background-color: #faf8f6;
}

/* Sidebar — warm sand instead of cold #f5f6f7 */
#sidebar {
  background-color: #f3ede7 !important;
}

#sidebar > .inner {
  background-color: #f3ede7 !important;
}

/* Override the sticky #sidebar #menu background set in main.css */
#sidebar #menu {
  background-color: #f3ede7 !important;
}

/* Override the sticky .contact-bottom background set in main.css */
#sidebar > .inner > .contact-bottom {
  background-color: #f3ede7 !important;
}

/* Sidebar alternate/highlighted sections */
#sidebar > .inner > .alt {
  background-color: #e9e2db !important;
}

/* Warm the wrapper background (prevents cold flash between sidebar and content) */
#wrapper {
  background-color: #faf8f6;
}


/* ==========================================================================
   3. GLOBAL QUALITY
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

p {
  text-wrap: pretty;           /* prevent orphaned words in paragraphs */
}

/* Visible focus rings for keyboard accessibility */
a:focus-visible,
.button:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #f56a6a;
  outline-offset: 3px;
  border-radius: 3px;
}


/* ==========================================================================
   4. HEADER
   ========================================================================== */

/* Refined accent border — 3px feels more considered than 5px */
#header {
  border-bottom-width: 3px;
  border-bottom-color: #f0baa4;
}

/* Italic wordmark for editorial character */
#header .logo {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.35em;
  letter-spacing: 0.01em;
  color: #2a201c;
}

/* The bold "Lifted" part is not italic */
#header .logo strong {
  font-style: normal;
  color: #f0baa4;
  font-weight: 700;
}


/* ==========================================================================
   5. BANNER — visual weight and depth
   ========================================================================== */

#banner {
  align-items: center;
  gap: 4em;
}

#banner h1 {
  font-size: 4.5em;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}

#banner .content header p {
  font-size: 1.05em;
  color: #9a9490;
  max-width: 38ch;
  text-wrap: pretty;
  line-height: 1.8;
  text-transform: none;   /* override uppercase from main.css */
  letter-spacing: 0.01em;
}

/* Organic asymmetric border-radius on hero photo */
#banner .image.object {
  border-radius: 2em 0.5em 2em 0.5em;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(42, 32, 28, 0.12),
    0 4px 16px rgba(42, 32, 28, 0.08);
}

#banner .image.object img,
#banner .image.object video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.8s ease;
}

#banner:hover .image.object img,
#banner:hover .image.object video {
  transform: scale(1.02);
}


/* ==========================================================================
   6. TYPOGRAPHY — scale and tracking
   ========================================================================== */

h1 {
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-wrap: balance;
}

h2 {
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h3 {
  letter-spacing: -0.01em;
}

/* Section headers */
.major h2 {
  font-size: 2em;
  letter-spacing: -0.025em;
}

/* Accent underline on section headers — more refined than the default */
.major > :first-child::after {
  background-color: #f0baa4;
}


/* ==========================================================================
   7. BUTTONS — lift, spring, and depth
   ========================================================================== */

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
  letter-spacing: 0.1em;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease;
  box-shadow: inset 0 0 0 2px #f0baa4;
  color: #f0baa4 !important;
}

.button:hover,
button:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 2px #f0baa4,
    0 6px 20px rgba(200, 112, 90, 0.22);
  background-color: rgba(200, 112, 90, 0.06) !important;
}

.button:active,
button:active {
  transform: scale(0.97) translateY(0);
  box-shadow: inset 0 0 0 2px #f0baa4;
}

/* Primary (filled) button */
.button.primary,
input[type="submit"].primary {
  background-color: #f0baa4 !important;
  box-shadow: none !important;
  color: #fff !important;
}

.button.primary:hover {
  background-color: #b8604a !important;
  box-shadow: 0 8px 24px rgba(200, 112, 90, 0.35) !important;
  transform: translateY(-2px);
}

.button.primary:active {
  background-color: #a85040 !important;
  transform: scale(0.97) translateY(0);
}

/* Big button variant (main CTA) */
.button.big {
  background-color: #f0baa4 !important;
  box-shadow: none !important;
  color: #fff !important;
}

.button.big:hover {
  background-color: #b8604a !important;
  box-shadow: 0 8px 24px rgba(200, 112, 90, 0.35) !important;
  transform: translateY(-2px);
}

.button.big:active {
  background-color: #a85040 !important;
  transform: scale(0.97) translateY(0);
  box-shadow: none !important;
}


/* ==========================================================================
   8. TREATMENT CARDS — replace flat editorial grid with elevated cards
   ========================================================================== */

/* Replace flexbox with CSS grid for clean, equal columns */
.posts {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.75em !important;
  margin: 0 0 2em 0 !important;
  width: 100% !important;
}

/* Card styling */
.posts article {
  width: auto !important;
  margin: 0 !important;
  background: #ffffff;
  border-radius: 1em;
  overflow: hidden;
  box-shadow: 0 2px 24px rgba(42, 32, 28, 0.07);
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* Card lift on hover */
.posts article:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(42, 32, 28, 0.14);
}

/* Remove the decorative Editorial cross-lines */
.posts article::before,
.posts article::after {
  display: none !important;
}

/* Full-bleed image at top of card */
.posts article .image {
  margin: 0;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 0;
  aspect-ratio: 16 / 10;
}

.posts article .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: block;
}

.posts article:hover .image img {
  transform: scale(1.07);
}

/* Card text content — consistent inner padding */
.posts article h3 {
  padding: 1.25em 1.4em 0.25em;
  margin-bottom: 0.25em;
  font-size: 1.15em;
}

.posts article > p {
  padding: 0 1.4em;
  flex-grow: 1;
  font-size: 0.9em;
  line-height: 1.7;
  color: #9a9490;
}

.posts article .actions {
  padding: 1em 1.4em 1.4em;
  margin-bottom: 0;
  margin-top: auto;
}

/* Smaller button inside cards */
.posts article .actions .button {
  font-size: 0.75em;
}


/* ==========================================================================
   9. ABOUT PAGE — constrain full-width image so it doesn't fill the viewport
   ========================================================================== */

.image.main {
  border-radius: 0.875em;
  overflow: visible;
  max-width: 65%;
  margin: 0 auto var(--img-bottom-gap, 2em) !important;
  display: block;
  box-shadow: 0 6px 24px rgba(42, 32, 28, 0.1);
}

.image.main img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.875em;
}

@media (max-width: 980px) {
  .image.main {
    max-width: 100%;
  }
}


/* ==========================================================================
   10. SUBTLE GRAIN TEXTURE — breaks digital flatness
   Pointer-events none, z-index above content but below interactive elements
   ========================================================================== */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: multiply;
}


/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {

  .posts article:hover,
  .posts article:hover .image img,
  #banner:hover .image.object img,
  .button:hover,
  button:hover {
    transform: none;
  }
}


/* ==========================================================================
   12. RESPONSIVE — posts grid
   ========================================================================== */

@media (max-width: 1280px) {
  .posts {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 736px) {
  .posts {
    grid-template-columns: 1fr !important;
    gap: 1.25em !important;
  }

  #banner h1 {
    font-size: 2.75em;
  }
}

@media (max-width: 480px) {
  #banner h1 {
    font-size: 2.25em;
  }
}