/* Use custom font and smooth scroll */
:root {
  --pico-font-family: 'Shantell Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  scroll-behavior: smooth;
}

/* Support system theme in browsers before JS runs */
html {
  color-scheme: light dark;
}

/* Accessibility: Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Accessibility: Screen reader only content */
.visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.visually-hidden small {
  font-size: 0.5rem;
}

/* Group: Nav styling */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 2px solid var(--pico-muted-border-color);
  z-index: 100;
  background-color: var(--pico-background-color);
}
nav a {
  border: 0 !important;
  /* box-shadow: none !important; */
}
nav svg {
  border-radius: 28%;
  overflow: hidden;
}
nav .active {
  color: #ff7a00;
}

/* Group: Theme toggle */
.theme-toggle {
  --theme-toggle__simple--duration: 1s;
}
.theme-toggle__simple :first-child path {
  transition-property: transform, d;
  transition-duration: var(--theme-toggle__simple--duration);
  transition-timing-function: cubic-bezier(0, 0, 0.15, 1.25);
}
.theme-toggle--toggled .theme-toggle__simple :first-child path {
  d: path("M-18-1h55v37h-55zm32 12a1 1 0 0025 0 1 1 0 00-25 0");
}

/* Group: Hero styling */
@keyframes fade-in {
  from { opacity: 0; } to { opacity: 1; }
}
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 4rem 1rem;
}
.center-v {
  justify-content: center; /* vertical */
}
.center-h {
  text-align: center; /* horizontal */
}
.fadein {
  opacity: 0;
  animation: fade-in 1.0s ease-in forwards !important;
}

/* Group: Apps styling */
.apps {
  scroll-margin-top: 100px;
}

/* Group: Grid styling, centre items, break at different cards */
.apps .grid {
  /* use flex so incomplete rows can be centered */
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  /* centers items (and the last row) */
  justify-content: center;
  /* makes cards in the same row stretch to equal height */
  align-items: stretch;
}
/* Card sizing per breakpoint */
.apps .grid > .card {
  /* mobile: single column (full width of the container) */
  flex: 1 1 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Tablet breakpoint: 640px - 2 columns */
@media (min-width: 640px) {
  .apps .grid > .card {
    flex: 1 1 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
  }
}
/* Desktop breakpoint: 1024px - 3 columns */
@media (min-width: 1024px) {
  .apps .grid > .card {
    flex: 1 1 calc(33.333% - 1rem);
    max-width: calc(33.333% - 1rem);
  }
}
/* Widescreen breakpoint: 1280px - 4 columns */
@media (min-width: 1280px) {
  .apps .grid > .card {
    flex: 1 1 calc(25% - 1rem);
    max-width: calc(25% - 1rem);
  }
}
/* Card internals (keeps header/main/footer aligned) */
.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: var(--pico-background-color);
  transition: transform 0.3s ease;
  box-shadow: 0px 0px 5px 2px #ff7a00;;
}
/* Hover scale with smooth back animation */
.card:hover {
  transform: scale(1.05);
}
.card header {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
/* add some margin to the icon to seperate the title */
.card header svg {
  margin-right: 1rem;
}
/* make the icon orange on hover */
.card:hover header svg {
  color: #ff7a00;
}
.card main {
  flex: 1;                 /* this expands so all cards in a row match the tallest */
  margin-bottom: 0.5rem;
}
.card footer {
  display: flex;
  justify-content: flex-end; /* right align */
  font-size: 0.9rem;
}

/* Group: Form message styling */
p.invalid {
  color: var(--pico-del-color);

}
p.valid {
  color: var(--pico-ins-color);
}

/* Group: Style icons */
* {
  --onesolodev-reason-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='rgb(136, 145, 164)' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm3.496 6.033a.237.237 0 0 1-.24-.247C5.35 4.091 6.737 3.5 8.005 3.5c1.396 0 2.672.73 2.672 2.24 0 1.08-.635 1.594-1.244 2.057-.737.559-1.01.768-1.01 1.486v.105a.25.25 0 0 1-.25.25h-.81a.25.25 0 0 1-.25-.246l-.004-.217c-.038-.927.495-1.498 1.168-1.987.59-.444.965-.736.965-1.371 0-.825-.628-1.168-1.314-1.168-.803 0-1.253.478-1.342 1.134-.018.137-.128.25-.266.25h-.825zm2.325 6.443c-.584 0-1.009-.394-1.009-.927 0-.552.425-.94 1.01-.94.609 0 1.028.388 1.028.94 0 .533-.42.927-1.029.927'/%3E%3C/svg%3E");
  --onesolodev-message-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='rgb(136, 145, 164)' viewBox='0 0 16 16'%3E%3Cpath d='M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4.414a1 1 0 0 0-.707.293L.854 15.146A.5.5 0 0 1 0 14.793zm5 4a1 1 0 1 0-2 0 1 1 0 0 0 2 0m4 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0m3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E");
}
/* remove transition so matches rest of page switch */
input, select, textarea {
  transition: none !important;
}
/* helper - style leading reason icon */
select.leading-reason-icon {
  padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
  background-image: var(--onesolodev-reason-icon);
  background-position: center left calc(var(--pico-form-element-spacing-horizontal) + 0.125rem);
  background-size: 1rem auto;
  background-repeat: no-repeat;
}
select.leading-reason-icon[aria-invalid] {
  padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important;
  background-position: center left 1.125rem, center right 0.75rem;
}
select.leading-reason-icon[aria-invalid=false] {
  background-image: var(--onesolodev-reason-icon), var(--pico-icon-valid);
}
select.leading-reason-icon[aria-invalid=true] {
  background-image: var(--onesolodev-reason-icon), var(--pico-icon-invalid);
}
[dir=rtl] :where(select).leading-reason-icon {
  background-position: center right 1.125rem !important;
}
[dir=rtl] :where(select).leading-reason-icon[aria-invalid] {
  background-position: center right 1.125rem, center left 0.75rem !important;
}
/* helper - style leading message icon */
textarea.leading-message-icon {
  padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
  background-image: var(--onesolodev-message-icon);
  background-position: top 1.125rem left calc(var(--pico-form-element-spacing-horizontal) + 0.125rem);
  background-size: 1rem auto;
  background-repeat: no-repeat;
}
textarea.leading-message-icon[aria-invalid] {
  padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important;
  background-position: top left 1.125rem, top right 0.75rem !important;
}
textarea.leading-message-icon[aria-invalid=false] {
  background-image: var(--onesolodev-message-icon), var(--pico-icon-valid);
}
textarea.leading-message-icon[aria-invalid=true] {
  background-image: var(--onesolodev-message-icon), var(--pico-icon-invalid);
}
[dir=rtl] :where(textarea).leading-message-icon {
  background-position: top 0.75rem right 1.125rem;
}
[dir=rtl] :where(textarea).leading-message-icon[aria-invalid] {
  background-position: top right 1.125rem, top left 0.75rem !important;
}

button {
  background-color: #ff7a00 !important;
  border-color: #ff7a00 !important;
}

/* Group: Footer styling */
.page-footer {
  border-top: 2px solid var(--pico-muted-border-color);
  /* add some padding to make mobile devices easier to navigate */
  padding-bottom: 5rem !important;
}
/* centre items in grid */
.page-footer div div {
  text-align: center;
  flex-wrap: nowrap;
}
/* do not pad links */
.page-footer div div a {
  padding: 0 !important;
  border: 0 !important;
  /* box-shadow: none !important; */
}
/* make text even smaller */
.page-footer a small {
  font-size: 0.75rem;
}