/*
Theme Name: sekyere
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.4
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sekyere
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

sekyere is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/**************************\
  Basic Modal Styles
\**************************/
.modal {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__container {
  background-color: #fff;
  padding: 30px;
  max-width: 500px;
  max-height: 100vh;
  border-radius: 4px;
  overflow-y: auto;
  box-sizing: border-box;
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #00449e;
  box-sizing: border-box;
}

.modal__close {
  background: transparent;
  border: 0;
  right: 30px;
  position: absolute;
}

.modal__header .modal__close:before {
  content: "\2715";
}

.modal__content {
  margin-top: 2rem;
  margin-bottom: 2rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, .8);
}

.modal__btn {
  font-size: .875rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  background-color: #e6e6e6;
  color: rgba(0, 0, 0, .8);
  border-radius: .25rem;
  border-style: none;
  border-width: 0;
  cursor: pointer;
  -webkit-appearance: button;
  text-transform: none;
  overflow: visible;
  line-height: 1.15;
  margin: 0;
  will-change: transform;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: -webkit-transform .25s ease-out;
  transition: transform .25s ease-out;
  transition: transform .25s ease-out, -webkit-transform .25s ease-out;
}

.modal__btn:focus,
.modal__btn:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.modal__btn-primary {
  background-color: #00449e;
  color: #fff;
}



/**************************\
  Demo Animation Style
\**************************/
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes mmfadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-10%);
  }
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

/* Contact Form 7 — modern card style */
:root {
  --primary: #0a386c;
  /* change to your brand color */
  --muted: #6b7280;
  --radius: 8px;
  --input-bg: #ffffff;
  --input-border: #e6e7ea;
  --shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
  --success-bg: #ecfdf5;
  --error-bg: #fff1f2;
}

/* Form wrapper */
.wpcf7 {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #0f172a;
}

/* Form layout */
.wpcf7-form {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

/* Example two-column layout - fields with .cf-col will sit side-by-side on wide screens */
.wpcf7 .cf-row {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .wpcf7 .cf-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Labels */
.wpcf7 label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 600;
}

/* Inputs & textarea */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select,
.wpcf7 .wpcf7-form-control.wpcf7-text {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  box-sizing: border-box;
  font-size: 0.95rem;
  color: #0f172a;
  transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Textarea sizing */
.wpcf7 textarea {
  min-height: 140px;
  resize: vertical;
}

/* Focus state */
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 4px 18px rgba(14, 165, 233, 0.12);
  transform: translateY(-1px);
}

/* Placeholder color */
.wpcf7 ::placeholder {
  color: #9ca3af;
  opacity: 1;
}

/* Small helper text */
.wpcf7 .help {
  font-size: 0.8rem;
  color: #9aa3ad;
  margin-top: 0.25rem;
}

/* Submit button */
.wpcf7 button[type="submit"],
.wpcf7 input[type="submit"].wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 90%, black 8%));
  color: #fff;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  transition: transform .08s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.18);
}

/* Button hover/focus/active */
.wpcf7 button[type="submit"]:hover,
.wpcf7 input[type="submit"].wpcf7-submit:hover {
  transform: translateY(-2px);
}

.wpcf7 button[type="submit"]:active,
.wpcf7 input[type="submit"].wpcf7-submit:active {
  transform: translateY(0);
  opacity: 0.95;
}

.wpcf7 button[type="submit"]:focus,
.wpcf7 input[type="submit"].wpcf7-submit:focus {
  outline: none;
  box-shadow: 0 6px 22px rgba(14, 165, 233, 0.28);
}

/* Disabled state */
.wpcf7 .wpcf7-submit[disabled],
.wpcf7 input[type="submit"].wpcf7-submit[disabled] {
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Response messages */
.wpcf7 .wpcf7-response-output {
  margin-top: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  /* display: none; */
  /* CF7 toggles this */
  background: var(--success-bg);
    color: #065f46;
    border: 1px solid color-mix(in srgb, #065f46 8%, transparent);
}

.wpcf7 .wpcf7-mail-sent-ok {
  display: block !important;
  background: var(--success-bg);
  color: #065f46;
  border: 1px solid color-mix(in srgb, #065f46 8%, transparent);
}

.wpcf7 .wpcf7-validation-errors {
  display: block !important;
  background: var(--error-bg);
  color: #7f1d1d;
  border: 1px solid color-mix(in srgb, #7f1d1d 8%, transparent);
}

/* Field-level error (CF7 adds wpcf7-not-valid to invalid inputs) */
.wpcf7 .wpcf7-not-valid {
  border-color: #ef4444 !important;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.08);
}

/* Checkbox / radio styled */
.wpcf7 .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

/* Make the form responsive */
@media (max-width: 720px) {
  .wpcf7 {
    padding: 1rem;
  }

  .wpcf7 .cf-row {
    grid-template-columns: 1fr;
  }
}

/* Utility: inline small label with field */
.wpcf7 .inline-label {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
}

/* Optional: icon sizing inside buttons or labels */
.wpcf7 svg {
  width: 1.1rem;
  height: 1.1rem;
  display: inline-block;
  vertical-align: middle;
}