/* Polished Pear & Company
   Implemented from the Claude Design source "Polished Pear Website.dc.html".

   The design expresses layout as inline styles; those are preserved verbatim in
   index.html. This sheet carries only what inline styles cannot express:
   base/reset rules from the design's <helmet>, interactive states (the design's
   style-hover / style-focus attributes), and the responsive nav rule that the
   design drove from a matchMedia("(min-width: 700px)") flag.

   Interactive elements keep their colour/background/border-color here rather
   than inline, so :hover and :focus rules win the cascade without !important. */

/* ---------- Base (from the design's <helmet> block) ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #FAF7EE;
  color: #2C3A26;
  font-family: 'Lato', 'Jost', sans-serif;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: #7C8B5A;
  text-decoration: none;
}

a:hover {
  color: #3F5233;
}

input,
select,
textarea,
button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

::placeholder {
  color: #A9AC9C;
}

@keyframes ppfade {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Anchor nav clears the sticky header. */
html {
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [style*='ppfade'] {
    animation: none !important;
  }
}

/* Keyboard focus stays visible everywhere the design didn't specify a state. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #7C8B5A;
  outline-offset: 3px;
}

/* ---------- Services rows ---------- */
/* Base state of the price rail. These four properties live here rather than
   inline so the narrow-viewport rule below can override them. */

.svc-rail {
  width: 150px;
  text-align: right;
  border-left: 1px solid #EAE5D5;
  padding-left: 20px;
}

/* ---------- Narrow viewport ---------- */
/* The design gated the nav links and the services row layout behind a `wide`
   flag set from matchMedia("(min-width: 700px)"). Same breakpoint, expressed
   in CSS: below it the nav collapses, and each services row stacks with the
   icon and text centred and the price rail becoming a full-width footer
   separated by a top border instead of a left one. */

@media (max-width: 699px) {
  .nav-links {
    display: none;
  }

  .svc-icon {
    margin: 0 auto 4px;
  }

  .svc-text {
    text-align: center;
  }

  .svc-rail {
    width: 100%;
    text-align: center;
    align-items: center;
    border-left: none;
    border-top: 1px solid #EAE5D5;
    padding-left: 0;
    padding-top: 16px;
    margin-top: 4px;
  }
}

/* ---------- Links ---------- */

.nav-link {
  color: #54604A;
}

.nav-link:hover {
  color: #3F5233;
}

.link-muted {
  color: #8B9377;
}

.link-muted:hover {
  color: #3F5233;
}

.link-strong {
  color: #3F5233;
}

.link-strong:hover {
  color: #7C8B5A;
}

.link-soft {
  color: #7C8B5A;
}

.link-soft:hover {
  color: #3F5233;
}

.footer-link {
  color: #EDEEE1;
}

.footer-link:hover {
  color: #B9C79F;
}

/* ---------- Buttons ---------- */

.btn-primary {
  background: #3F5233;
  color: #FFFFFF;
  border: none;
}

.btn-primary:hover {
  background: #2C3A26;
  color: #FFFFFF;
}

.btn-outline {
  background: none;
  border: 1px solid #CBD0B9;
  color: #3F5233;
}

.btn-outline:hover {
  border-color: #7C8B5A;
  color: #3F5233;
}

/* ---------- Form fields ---------- */

.field {
  border: 1px solid #E0DBC9;
  background: #FDFBF4;
}

.field:focus {
  outline: none;
  border-color: #7C8B5A;
}

/* ---------- Calendly embed ---------- */
/* Replaces the design's booking form in #book. The widget carries
   data-resize="true", so Calendly posts its content height to the parent and
   widget.js sets the iframe height itself — no fixed height, no inner
   scrollbar, no dead space when a short view (e.g. the time list) is showing.
   min-height is only a placeholder to stop the card collapsing before
   widget.js has loaded. */

.calendly-embed {
  min-width: 320px;
  min-height: 480px;
}

/* ---------- State panels ---------- */

[hidden] {
  display: none !important;
}