/*
Theme Name: PlusPort Theme
*/

:root {
  --border-radius-small: 12px;
}

* {
  box-sizing: border-box;
}

*[hidden] {
  display: none;
}

html {
  interpolate-size: allow-keywords;
}

body {
  overflow-wrap: break-word;
}

a:link,
a:active {
  color: var(--wp--preset--color--primary);
}

button:disabled,
button[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed;
}

button:focus,
button:focus-visible {
  outline-color: var(--wp--preset--color--dark-grey);
}

.wp-element-button {
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.3s ease;
}

/* Phone button icon */
a.phone-button,
button.phone-button,
.phone-button.wp-element-button,
.phone-button .wp-element-button,
.phone-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

a.phone-button::before,
button.phone-button::before,
.phone-button.wp-element-button::before,
.phone-button .wp-element-button::before,
.phone-button .wp-block-button__link::before {
  content: "";
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5207 15.4046C19.886 14.9078 18.8667 14.2444 18.4448 14.0274C17.5467 13.5603 16.2962 13.6234 15.4712 14.1782L15.4617 14.1846C14.9388 14.5491 14.4542 14.9656 14.0153 15.4278L14.0037 15.4398C13.9181 15.5308 13.8029 15.5883 13.6787 15.602C13.5545 15.6157 13.4295 15.5847 13.3261 15.5146C12.3771 14.868 11.4916 14.1328 10.6817 13.3188C9.86771 12.509 9.13261 11.6237 8.48628 10.6748C8.41614 10.5717 8.38506 10.447 8.3986 10.323C8.41215 10.199 8.46944 10.084 8.56019 9.99843L8.57308 9.98554C9.03532 9.5467 9.45184 9.06209 9.81622 8.53914L9.82267 8.52969C10.3774 7.70465 10.4406 6.45419 9.97436 5.55825C9.75521 5.13456 9.09303 4.11529 8.59628 3.48061C8.10942 2.83605 7.30372 1.94569 6.96038 1.63845C6.19937 0.952637 4.95966 0.797942 4.07618 1.27879L4.06544 1.2848C3.51857 1.59634 3.00585 1.96432 2.53567 2.38271L2.48755 2.42568C1.5727 3.21892 1.06006 4.4191 1.00505 5.89858C0.944465 7.52675 1.42961 9.44067 2.41106 11.4332C3.41572 13.4752 4.89821 15.5047 6.69826 17.3018C8.49831 19.0988 10.5257 20.5852 12.5676 21.5898C14.4498 22.5158 16.2614 23.001 17.829 23.001C17.921 23.001 18.0121 22.9993 18.1023 22.9958C19.5818 22.9408 20.782 22.4286 21.5743 21.5133L21.6173 21.4652C22.0358 20.9951 22.4037 20.4823 22.7152 19.9354L22.7212 19.9247C23.2016 19.0421 23.0478 17.8032 22.3633 17.0422C22.0556 16.6972 21.1657 15.8914 20.5207 15.4046ZM21.2899 19.1392C21.0368 19.5833 20.7372 19.9992 20.3961 20.3798L20.3449 20.4365C19.8495 21.0123 19.0747 21.3234 18.0417 21.3621C16.7032 21.4111 15.0144 20.9732 13.2896 20.1241C11.407 19.1981 9.52789 17.823 7.85418 16.1467C6.18046 14.4704 4.80282 12.5947 3.87894 10.7113C3.02769 8.98647 2.58982 7.29857 2.63709 5.95917C2.67576 4.92787 2.98687 4.15139 3.56268 3.65593L3.62112 3.6048C4.00234 3.26365 4.41878 2.96403 4.86341 2.711C5.1483 2.55932 5.61625 2.62506 5.87064 2.85324C6.12503 3.08141 6.85038 3.87895 7.29641 4.4698L7.3063 4.48183C7.76437 5.06624 8.36037 5.99269 8.52452 6.31024C8.71488 6.67592 8.6891 7.28396 8.46995 7.61398C8.16953 8.04597 7.82522 8.44573 7.44251 8.80685L7.4365 8.81286C7.06419 9.16451 6.82941 9.63734 6.77428 10.1465C6.71915 10.6556 6.84729 11.1677 7.1357 11.5909C7.84054 12.6254 8.64195 13.5907 9.52918 14.4738C10.4122 15.3612 11.3775 16.1626 12.4121 16.8673C12.8355 17.1555 13.3478 17.2832 13.8569 17.2277C14.3661 17.1722 14.8388 16.937 15.1902 16.5644L15.197 16.5575C15.558 16.1752 15.9575 15.8312 16.389 15.5309C16.7191 15.3118 17.3271 15.286 17.6949 15.4776C18.0103 15.6405 18.9368 16.2369 19.5212 16.695L19.5332 16.7045C20.1258 17.1509 20.9225 17.878 21.1498 18.132V18.1341C21.3767 18.3863 21.4416 18.8543 21.2899 19.1392Z' fill='white'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
}

/* Button style variations - base styles */
.wp-block-button.is-style-primary-blue .wp-block-button__link {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  border: 2px solid var(--wp--preset--color--primary);
}

.wp-block-button.is-style-primary-green .wp-block-button__link {
  background-color: var(--wp--preset--color--green);
  color: var(--wp--preset--color--white);
  border: 2px solid var(--wp--preset--color--green);
}

.wp-block-button.is-style-secondary-blue .wp-block-button__link {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--dark-blue);
  border: 2px solid var(--wp--preset--color--dark-blue);
}

.wp-block-button.is-style-secondary-green .wp-block-button__link {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--dark-blue);
  border: 2px solid var(--wp--preset--color--dark-blue);
}

/* Button style variations - hover states */
.wp-block-button.is-style-primary-blue .wp-block-button__link:hover,
.wp-element-button.has-primary-background-color:hover {
  background-color: #1a3ba3 !important;
  border-color: #1a3ba3 !important;
}

.wp-block-button.is-style-primary-green .wp-block-button__link:hover,
.plusport-quick-enroll__enroll:hover {
  background-color: var(--wp--preset--color--dark-green);
  border-color: var(--wp--preset--color--dark-green);
}

.wp-block-button.is-style-secondary-blue .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-secondary-green .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--green);
  color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--green);
}

select,
input,
textarea {
  font-family: inherit;
  font-size: inherit;
  padding: var(--wp--preset--spacing--2-x-small)
    var(--wp--preset--spacing--x-small);
  border-radius: 12px;
  border: 2px solid var(--wp--preset--color--cool-grey);
  background: var(--wp--preset--color--white);
  line-height: 1.5;
}

select:open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

select:focus,
input:focus,
textarea:focus,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: none;
}

html.has-focus select:focus-visible,
html.has-focus input:focus-visible,
html.has-focus textarea:focus-visible {
  outline: 2px dashed;
  outline-offset: 4px;
}

@media screen and (max-width: 60rem) {
  .full-width-mb {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Ensure form elements look the same in the block editor */
.editor-styles-wrapper select,
.editor-styles-wrapper input:not([type="radio"]):not([type="checkbox"]) {
  font-family: inherit;
  font-size: inherit;
  padding: var(--wp--preset--spacing--20);
  border: 1px solid #ddd;
  border-radius: 4px;
}

.editor-styles-wrapper button:disabled,
.editor-styles-wrapper button[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed;
}

.wp-site-blocks > * {
  margin-top: 0 !important;
}

.wp-block-post-content > * {
  margin-top: 0;
}

.wp-block-site-logo.is-default-size img {
  width: 160px;
  height: auto;
}

.main-navigation {
  box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.07);
  z-index: 200;

  & > div {
    padding: var(--wp--preset--spacing--small) 0;
  }

  .wp-block-navigation {
    gap: var(--wp--preset--spacing--3-x-small);
  }

  .wp-block-site-logo {
    margin-right: var(--wp--preset--spacing--large);
  }

  .wp-block-navigation-item__content {
    padding: var(--wp--preset--spacing--3-x-small)
      var(--wp--preset--spacing--2-x-small);
  }

  .wp-block-navigation__submenu-container {
    min-width: 250px;
    width: max-content;
    max-width: 400px;
  }

  .wp-block-navigation-item.has-child
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    white-space: nowrap;
  }

  .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
  }

  .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:hover {
    background-color: var(--wp--preset--color--light-grey);
  }
}

.overflow-visible {
  overflow: visible !important;
}

*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px dashed;
  outline-offset: 4px;
}

@media screen and (max-width: 60rem) {
  .phone {
    display: none;
  }
}

.phone a {
  text-decoration: none;
  color: inherit;
  font-size: 1.275rem;
}

.phone a:hover {
  text-decoration: underline;
}

.hbspt-form form {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--small);
}

.hbspt-form label {
  font-weight: 500;
}

.hbspt-form .form-columns-1 {
  max-width: 100%;
}

.hbspt-form .form-columns-2 {
  display: flex;
  gap: var(--wp--preset--spacing--small);
  max-width: 100%;
}

.hbspt-form .input {
  margin-right: 0 !important;
}

.hbspt-form input,
.hbspt-form textarea {
  width: 100% !important;
}

.hbspt-form .legal-consent-container {
  font-size: 0.9rem;
}

.hbspt-form .legal-consent-container p {
  margin: 0;
}

.hbspt-form input[type="submit"] {
  width: auto !important;
  background-color: var(--wp--preset--color--green);
  border-radius: 8px;
  border-width: 0;
  color: var(--wp--preset--color--white);
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: 600;
  letter-spacing: inherit;
  line-height: 1.3;
  padding-top: var(--wp--preset--spacing--2-x-small);
  padding-right: var(--wp--preset--spacing--small);
  padding-bottom: var(--wp--preset--spacing--2-x-small);
  padding-left: var(--wp--preset--spacing--small);
  text-decoration: none;
  text-transform: inherit;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.3s ease;
}

.hbspt-form input[type="submit"]:hover {
  background-color: var(--wp--preset--color--dark-green);
  border-color: var(--wp--preset--color--dark-green);
}

.hbspt-form .actions {
  text-align: right;
}

@media screen and (max-width: 60rem) {
  .hbspt-form .form-columns-2 {
    flex-direction: column;
  }
}

.wp-block-navigation-submenu,
.wp-block-navigation .wp-block-navigation-item {
  position: unset;
}

.wp-block-navigation
  .has-child:not(.open-on-click):hover
  > .wp-block-navigation__submenu-container {
  display: grid;
  width: 100vw;
  max-width: 1440px;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 782px) {
  .hide-on-mobile {
    display: none !important;
  }
}

.hide-on-desktop {
  display: none !important;
}

@media (max-width: 782px) {
  .hide-on-desktop {
    display: flex !important;
  }
}

@media (min-width: 782px) {
  .align-left-desktop {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

@media (max-width: 782px) {
  .main-navigation .wp-block-navigation__responsive-container-open svg,
  .main-navigation .wp-block-navigation__responsive-container-close svg {
    width: 32px;
    height: 32px;
  }

  .main-navigation .wp-block-navigation__responsive-container-open,
  .main-navigation .wp-block-navigation__responsive-container-close {
    min-width: 32px;
    min-height: 32px;
    padding: 0;
  }

  .main-navigation .wp-block-navigation__responsive-container-close {
    position: fixed;
    top: var(--plusport-mobile-nav-toggle-top, 16px);
    left: var(--plusport-mobile-nav-toggle-left, auto);
    right: auto;
    bottom: auto;
    margin: 0;
    z-index: 1001;
  }

  .main-navigation .wp-block-navigation__responsive-container.is-menu-open {
    padding-top: var(--plusport-mobile-nav-content-top, 72px) !important;
  }
}

.button-style-outline a {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--dark-blue);
  border: 2px solid var(--wp--preset--color--dark-blue);
  border-radius: 8px;
  font-weight: 600;
  line-height: 1.3;
  padding-top: var(--wp--preset--spacing--2-x-small) !important;
  padding-right: var(--wp--preset--spacing--small) !important;
  padding-bottom: var(--wp--preset--spacing--2-x-small) !important;
  padding-left: var(--wp--preset--spacing--small) !important;
  display: block;
  width: fit-content;
  margin-top: var(--wp--preset--spacing--large);
}

footer a,
footer a:link,
footer a:active {
  color: var(--wp--preset--color--white);
}
