/**
 * Theme Name: Carson Clicks
 * Template:   frost
 * 
 */

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
  border: none;
}

@media screen and (max-width: 600px) {
.header-logo {
    max-width:260px;
}
  }

/**
 * Single case study template.
 *
 * The case study blocks render nothing when their ACF field is empty, but the
 * card and heading that frame them are ordinary blocks in the template, so they
 * would otherwise leave an empty box on a case study that has not been filled
 * in yet. Any container marked `cs-hide-if-empty` collapses when it holds no
 * case study content.
 */
.cs-hide-if-empty:not(:has(.cs-field, .cs-services, .cs-quote)) {
  display: none;
}
/**
 * Contact form.
 *
 * Sits in a white card against the page's off-white base, so the card colour is
 * set explicitly rather than taken from the `base` preset. Fields reuse the
 * site's pale blue and the Space Grotesk labelling used elsewhere.
 */
.cc-contact-card {
  /* Hug the form rather than stretching to the height of the grid row. */
  align-self: start;
  background: #ffffff;
  border-radius: 20px;
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 18px 44px rgba(10, 16, 84, 0.08);
}

.cc-form-title {
  margin: 0 0 1.25rem;
  font-size: var(--wp--preset--font-size--large);
  letter-spacing: -0.5px;
}

.cc-form .cc-field {
  margin: 0 0 1rem;
}

/* First and last name share a row, and stack on narrow screens. */
.cc-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 1rem;
}

.cc-label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--wp--preset--color--secondary);
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.cc-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: var(--wp--preset--color--custom-bg-blue);
  color: var(--wp--preset--color--contrast);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--x-small);
  line-height: 1.4;
  transition: border-color 0.2s, background-color 0.2s;
}

.cc-input::placeholder {
  color: #6b6f8d;
}

.cc-input:focus {
  border-color: var(--wp--preset--color--primary);
  background-color: #ffffff;
  outline: 2px solid rgba(0, 91, 191, 0.18);
  outline-offset: 1px;
}

.cc-textarea {
  min-height: 130px;
  resize: vertical;
}

/* Native select arrow varies by platform; draw our own to match the design. */
.cc-select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1054' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

.cc-field--error .cc-input {
  border-color: var(--wp--preset--color--custom-text-red);
  background-color: var(--wp--preset--color--custom-bg-red);
}

.cc-error {
  display: block;
  margin-top: 0.35rem;
  color: var(--wp--preset--color--custom-text-red);
  font-size: 14px;
}

.cc-submit {
  width: 100%;
  margin-top: 0.5rem;
  padding: 16px 30px;
  border: 0;
  border-radius: 10px;
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.cc-submit:hover {
  background-color: #3181ea;
}

.cc-notice {
  margin: 0 0 1.25rem;
  padding: 16px 18px;
  border-radius: 10px;
  font-size: var(--wp--preset--font-size--x-small);
}

.cc-notice p {
  margin: 0;
}

.cc-notice--error {
  background-color: var(--wp--preset--color--custom-bg-red);
  color: var(--wp--preset--color--custom-text-red);
}

.cc-notice--success {
  background-color: var(--wp--preset--color--custom-bg-blue);
  color: var(--wp--preset--color--secondary);
}

.cc-notice--success .cc-form-title {
  margin-bottom: 0.5rem;
}

/* Reachable by bots, not by people or assistive tech. */
.cc-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/**
 * Contact details: an icon chip beside a stacked label and value.
 */
.cc-contact-item .wp-block-icon {
  flex-shrink: 0;
}

/* Global styles paint links black; the contact details read better in brand blue. */
.cc-contact-item a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.cc-contact-item a:hover,
.cc-contact-item a:focus {
  text-decoration: underline;
}

.cc-contact-label {
  margin: 0;
  color: var(--wp--preset--color--secondary);
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}