/* Pharmia Theme v2 for LinkStack
–––––––––––––––––––––––––––––––––––––––––––––––––– */

:root {
  --font-family: 'Afacad', sans-serif;
  --font-size: 16px;
  --delay: 0.3s;

  --background-color: #F6FCF3;
  --surface-color: #F0FAEB;
  --border-color: #D7E8C9;

  --image-border-color: #BBD8A3;
  --image-border-px: 3px;
  --image-width: 140px;
  --image-height: 140px;

  --title-color: #1D241C;
  --description-color: #6F826A;
  --svg-color: #1D241C;

  --menu-background-color: #EAF3E3;
  --menu-text-color: #1D241C;
  --menu-active-text-color: #BF9264;

  --button-background-color: #E7F7DE;
  --button-text-color: #1D241C;
  --button-text-hover-color: #1D241C;
  --button-radius: 30px;
  --button-shadow: 0 2px 6px rgba(187, 216, 163, 0.5);
  --button-shadow-hover: 0 4px 16px rgba(187, 216, 163, 0.7);

  --textarea-background-color: #F0FAEB;
  --textarea-text-color: #1D241C;
  --textarea-link-text-color: #2C7326;

  --footer-background-color: #EAF3E3;
  --footer-text-color: #1D241C;
  --footer-link-text-color: #2C7326;

  --ring-color: rgba(187, 216, 163, 0.5);
  --ring-offset: 2px;
  --ring-width: 3px;
}

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 600px;
  text-align: center;
  margin: 0 auto;
  box-sizing: border-box;
}

.column {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 400px) {
  .container { width: 85%; padding: 0; }
}

@media (min-width: 550px) {
  .container { width: 80%; }
  .column, .columns { margin-left: 0; }
  .column:first-child, .columns:first-child { margin-left: 0; }
}

/* Base
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html { font-size: 100%; }

body {
  min-height: 100vh;
  font-family: var(--font-family) !important;
  background-color: var(--background-color);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(187, 216, 163, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(191, 146, 100, 0.06) 0%, transparent 50%);
  color: var(--title-color);
  font-size: var(--font-size);
  line-height: 1.5;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0;
  animation: fadeIn 0.6s ease-out var(--delay) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.background {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
}

::selection { background: #BBD8A3; }
::-moz-selection { background: #BBD8A3; }

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1 {
  color: var(--title-color);
  font-size: 2.2em;
  font-weight: 700;
  letter-spacing: 0.05rem;
}

p {
  color: var(--description-color);
  font-size: 1.1em;
  line-height: 1.5em;
  font-weight: 400;
  margin-bottom: 10px;
  letter-spacing: 0.01rem;
}

a { color: var(--title-color); text-decoration: none; }

@media (hover: hover) {
  a:hover { color: var(--button-text-hover-color); }
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button, .button {
  margin-bottom: 1rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: 1px solid #BBD8A3;
  border-radius: var(--button-radius);
  box-shadow: var(--button-shadow);
  font-family: var(--font-family) !important;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
  button:hover, .button:hover {
    background-color: #DFF4D9;
    border-color: #53A329;
    box-shadow: var(--button-shadow-hover);
  }
}

button:focus-visible, .button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--ring-offset) var(--background-color),
              0 0 0 calc(var(--ring-offset) + var(--ring-width)) var(--ring-color);
}

/* Button icons — flex handles alignment, no vertical-align needed */
.button .icon,
.button img.icon,
.button i.icon {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

/* Button entrance animation — applied to .button-entrance wrapper, not .button */
.button-entrance {
  animation: buttonPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  animation-delay: 0.4s !important;
  margin-bottom: 0;
}

@keyframes buttonPop {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Hover scale — only on pointer devices */
.button-hover {
  transform: perspective(1px) translateZ(0);
  transition: transform 0.15s ease;
}

@media (hover: hover) {
  .button-hover:hover { transform: scale(1.015); }
}

/* Avatar
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.rounded-avatar {
  border-radius: 50%;
  box-shadow: 0 0 0 var(--image-border-px) var(--image-border-color);
  background-color: var(--background-color);
  width: var(--image-width);
  height: var(--image-height);
}

/* Badge
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.badge { padding-bottom: 7px; }
.badge-body { fill: #BF9264; }

/* Layout spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.spacing {
  padding: 0 10px;
  padding-top: 28px;
}

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre;
}

/* Form elements
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input, textarea, select, fieldset { margin-bottom: 1.5rem; }
pre, blockquote, dl, figure, p, ol { margin-bottom: 2.5rem; }

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width { width: 100%; box-sizing: border-box; }
.u-max-full-width { max-width: 100%; box-sizing: border-box; }
.u-pull-right { float: right; }
.u-pull-left { float: left; }

hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid var(--border-color);
}

/* Hide scrollbar */
* { -ms-overflow-style: none; scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.credit-txt {
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

.credit-icon { display: none; }

.credit-footer {
  position: relative;
  right: 15px;
}

@media (hover: hover) {
  .credit-footer:hover {
    text-shadow: rgba(187, 216, 163, 0.6) 0 0 6px;
  }
}

.credit-txt-clr { color: var(--title-color) !important; }

/* Social icons section */
.social-icon-div { margin-top: 8px; }
.social-icon { transition: opacity 0.2s ease; }

@media (hover: hover) {
  .social-icon:hover { opacity: 0.7; }
}