/* ============================================
   BUSINESS CARD - AXBOM INNOVATION AB
   Custom styles on top of Pico CSS v2
   Author: Per Axbom
   Brand Color: #c6316f
   ============================================ */

/* ============================================
   CUSTOM FONTS
   ============================================ */

@font-face {
  font-family: 'Eacologica';
  src: url('eacologica-round-slab-regular-wfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   TABLE OF CONTENTS
   1. CSS Variables
   2. Base Layout
   3. Toaster Notifications
   4. Navigation
   5. Profile Header
   6. Heart Divider
   7. Newsletter Section
   8. Footer
   9. Modal
   10. Utilities
   11. Responsive
   ============================================ */


/* ============================================
   1. CSS VARIABLES
   ============================================ */

:root {
  --brand-pink: #c6316f;
  --brand-pink-light: #e85d9a;
  
  /* To override Pico's primary color, uncomment and set your color:
     --pico-primary: #your-color-here;
     --pico-primary-hover: #your-hover-color-here;
     --pico-primary-focus: #your-focus-color-here;
  */
}


/* ============================================
   MOBILE LINE BREAK UTILITY
   ============================================ */

/* Hide line breaks on desktop, show on mobile */
br.mobile-break {
  display: none;
}

@media (max-width: 576px) {
  br.mobile-break {
    display: block;
  }
}


/* ============================================
   2. BASE LAYOUT
   ============================================ */

html,
body {
  overflow-x: hidden;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 0;
}

body > main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

main,
article {
  padding: 0 !important;
  margin: 0;
}

.container {
  max-width: 600px;
  width: 100%;
  padding: 0;
}

.business-card {
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}


/* ============================================
   3. TOASTER NOTIFICATIONS
   ============================================ */

.toaster {
  width: 100%;
  background: var(--pico-primary);
  color: #ffffff;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  animation: slideDown 0.3s ease;
}

.toaster-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 3rem 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.toaster-text {
  flex: 1;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.4;
}

.toaster-text a {
  color: #ffffff;
  text-decoration: underline;
  font-weight: 600;
}

.toaster-text a:hover,
.toaster-text a:focus {
  text-decoration: none;
}

.toaster-close {
  position: absolute;
  right: 1rem;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.toaster-close:hover,
.toaster-close:focus {
  background: rgba(255, 255, 255, 0.2);
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


/* ============================================
   4. NAVIGATION (Language Switcher)
   ============================================ */

.lang-switcher {
  display: block !important;
  text-align: center !important;
  background-color: #2a2a2a;
  padding: 0.75rem 1rem;
  margin: 0;
}

.lang-switcher nav {
  display: inline !important;
  text-align: center !important;
}

.lang-switcher nav > * {
  display: inline !important;
}

.lang-switcher a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  padding: 0.25rem 0.75rem;
  transition: color 0.2s ease;
  pointer-events: auto !important;
  tabindex: 0;
}

.lang-switcher a:hover,
.lang-switcher a:focus {
  color: #ffffff;
  z-index: 1;
}

.lang-switcher a[aria-current="page"] {
  color: #ffffff;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .lang-switcher {
    background-color: #1a1a1a;
  }
}


/* ============================================
   5. PROFILE HEADER
   ============================================ */

.profile {
  background: var(--pico-card-background-color);
  background-image: linear-gradient(
    135deg,
    var(--pico-card-background-color) 0%,
    color-mix(in srgb, var(--brand-pink) 8%, var(--pico-card-background-color)) 100%
  );
  border: none;
  border-radius: 0;
  padding: 1.5rem 1rem;
  margin: 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index:1000;
}

.avatar-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin: 0 auto 1.25rem;
  display: block;
  position: relative;
}

.profile-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 6px solid #ffffff;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.avatar-button::after {
  content: '🔍';
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--pico-primary);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.avatar-button:hover::after,
.avatar-button:focus::after {
  opacity: 1;
  transform: scale(1);
}

.avatar-button:hover .profile-photo,
.avatar-button:focus .profile-photo {
  transform: scale(1.05);
}

.avatar-button:focus {
  outline: 2px solid var(--pico-primary);
  outline-offset: 4px;
  border-radius: 50%;
}

.profile h1 {
  margin-bottom: 0.25rem;
  font-size: 2.25rem;
  font-family: 'Eacologica', var(--pico-font-family), sans-serif;
  font-weight: normal;
  position: relative;
  display: inline-block;
}

.profile h1::after {
  content: '';
  position: absolute;
  bottom: -0.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, 
    transparent, 
    #c6316f 20%, 
    #c6316f 80%, 
    transparent);
  border-radius: 2px;
  opacity: 0.6;
}

.tagline {
  font-size: 1.1rem;
  opacity: 0.8;
  margin-bottom: 0;
  margin-top: 0.75rem;
  font-weight: 500;
}

.tagline2 {
  font-size: 0.95rem;
  opacity: 0.7;
  margin-top: 0.25rem;
  margin-bottom: 0;
  font-weight: 400;
}

/* Social icons */
.social-icons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid currentColor;
  color: var(--pico-primary);
  transition: all 0.2s ease;
  text-decoration: none;
}

/* Button-specific resets */
button.social-icon {
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.social-icon:hover,
.social-icon:focus {
  background: var(--pico-primary);
  color: var(--pico-primary-inverse);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.social-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
  pointer-events: none;
}

.social-icon-text {
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1;
}

.social-icon-text span {
  display: block;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .profile {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    background-image: linear-gradient(
      135deg,
      var(--pico-card-background-color) 0%,
      color-mix(in srgb, var(--pico-primary) 12%, var(--pico-card-background-color)) 100%
    );
  }

  .profile-photo {
    border-color: #ffffff;
    box-shadow: 
      0 4px 16px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.1);
  }
}


/* ============================================
   6. HEART DIVIDER
   ============================================ */

.section-divider {
  text-align: center;
  padding: 2.5rem 1rem 0.5rem 1rem;
  margin: 0;
}

/* When heart is positioned below newsletter */
.section-divider.divider-below {
  padding: 2rem 1rem 1rem 1rem;
}

.divider-heart-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-block;
  transition: transform 0.2s ease;
}

.divider-heart-button:hover {
  transform: scale(1.05);
}

.divider-heart-button:focus-visible {
  outline: 3px solid var(--pico-primary);
  outline-offset: 5px;
  border-radius: 50%;
}

.divider-heart {
  width: 48px;
  height: auto;
  opacity: 0.7;
  display: inline-block;
  animation: heartPulse 2.5s ease-in-out infinite;
  pointer-events: none; /* Let button handle clicks */
}

@keyframes heartPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.9;
  }
}

/* Easter Egg - Falling Hearts */
.falling-heart {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 2rem;
  opacity: 0;
  animation: heartFall 4s ease-in forwards;
}

.falling-heart.small {
  font-size: 1.5rem;
}

.falling-heart.large {
  font-size: 2.5rem;
}

.falling-heart.sparkle {
  animation: heartFall 4s ease-in forwards, heartSparkle 0.5s ease-in-out infinite;
}

@keyframes heartFall {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateY(100vh);
  }
}

@keyframes heartSparkle {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 2px rgba(198, 49, 111, 0.5));
  }
  50% {
    filter: brightness(1.5) drop-shadow(0 0 8px rgba(198, 49, 111, 0.8));
  }
}

@media (prefers-reduced-motion: reduce) {
  .divider-heart {
    animation: none;
  }
  
  .falling-heart {
    display: none; /* Hide easter egg for users who prefer reduced motion */
  }
}


/* ============================================
   9. NEWSLETTER SECTION
   ============================================ */

.newsletter {
  margin: 0;
  padding: 2rem 1rem 2rem 1rem;
  background: var(--pico-card-background-color);
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.newsletter h2 {
  margin-bottom: 0.25rem;
  font-size: 1.35rem;
  background: linear-gradient(135deg, var(--brand-pink) 0%, var(--pico-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.newsletter > p {
  margin-bottom: 1rem;
  opacity: 0.8;
}

/* Newsletter form */
.newsletter-form {
  max-width: 450px;
  margin: 0 auto;
  text-align: left;
}

.newsletter-form label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
}

/* Grouped input and button */
.newsletter-form [role="group"] {
  margin-bottom: 0;
  display: flex;
  gap: 0;
}

.newsletter-form [role="group"] input[type="email"] {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  flex: 1;
  margin-bottom: 0;
  border: 4px solid var(--pico-primary) !important;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  background-color: rgba(198, 49, 111, 0.04);
}

.newsletter-form [role="group"] input[type="email"]:focus {
  border-color: var(--pico-primary) !important;
  background-color: rgba(198, 49, 111, 0.06);
  box-shadow: 0 0 0 4px rgba(198, 49, 111, 0.35);
  outline: none;
}

.newsletter-form [role="group"] button {
  margin: 0;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background-color: var(--pico-primary);
  border-color: var(--pico-primary);
  white-space: nowrap;
  flex: 0 0 auto;
  width: auto;
  transition: all 0.2s ease, box-shadow 0.2s ease;
}

.newsletter-form [role="group"] button:focus {
  box-shadow: 0 0 0 4px rgba(198, 49, 111, 0.35);
  outline: none;
}

.newsletter-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Language checkboxes */
.newsletter-options {
  border: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
  display: flex;
  gap: 2rem;
  justify-content: flex-start;
}

.newsletter-options legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0;
}

.checkbox-label input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  margin: 0;
}

.checkbox-label span {
  user-select: none;
}

.checkbox-label .info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  font-size: 0.85rem;
  color: var(--pico-primary);
  opacity: 0.85;
  cursor: help;
  margin-left: 0.25rem;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.checkbox-label .info-icon:hover,
.checkbox-label .info-icon:focus {
  opacity: 1;
}

/* Custom tooltips (viewport-aware) */
/* Disable Pico CSS tooltips */
[data-tooltip]:not(a):not(button):not(input)::before,
[data-tooltip]:not(a):not(button):not(input)::after {
  display: none !important;
}

.custom-tooltip {
  position: fixed;
  background: var(--pico-card-background-color);
  color: var(--pico-color);
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.85rem;
  line-height: 1.4;
  max-width: 280px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--pico-muted-border-color);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.custom-tooltip.visible {
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  .custom-tooltip {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  }
}

/* Privacy notice and messages */
.newsletter-privacy {
  display: block;
  margin-top: 0.75rem;
  opacity: 0.7;
  font-size: 0.875rem;
}

.message {
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 1rem;
}

/* Hide when empty to prevent taking up space */
.message:empty {
  display: none;
  margin: 0;
  padding: 0;
}

.message.success {
  background: color-mix(in srgb, var(--pico-primary) 15%, transparent);
  color: var(--pico-primary);
  border: 1px solid var(--pico-primary);
}

.message.error {
  background: color-mix(in srgb, #dc3545 15%, transparent);
  color: #dc3545;
  border: 1px solid #dc3545;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {

  .newsletter {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }

  .newsletter h2 {
    background: linear-gradient(135deg, var(--brand-pink-light) 0%, var(--pico-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .newsletter-form [role="group"] input[type="email"] {
    border-color: var(--pico-primary) !important;
    border-width: 4px !important;
    background-color: rgba(198, 49, 111, 0.12);
  }

  .newsletter-form [role="group"] input[type="email"]:focus {
    border-color: var(--pico-primary) !important;
    background-color: rgba(198, 49, 111, 0.18);
    box-shadow: 0 0 0 4px rgba(198, 49, 111, 0.5);
  }

  .newsletter-form [role="group"] button:focus {
    box-shadow: 0 0 0 4px rgba(198, 49, 111, 0.5);
  }

  .newsletter-form [role="group"] button {
    background-color: var(--pico-primary);
    border-color: var(--pico-primary);
  }

  /* Better contrast for info icons in dark mode */
  .checkbox-label .info-icon {
    opacity: 0.95;
  }

  .checkbox-label .info-icon:hover,
  .checkbox-label .info-icon:focus {
    opacity: 1;
    filter: brightness(1.2);
  }
}


/* ============================================
   10. FOOTER
   ============================================ */

.site-footer {
  padding: 2rem 1rem;
  margin: 0;
  text-align: center;
}

.site-footer a {
  display: inline-block;
}

.footer-logo {
  max-width: 140px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.footer-logo:hover {
  opacity: 1;
}

.footer-logo-light {
  display: block;
}

.footer-logo-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .footer-logo-light {
    display: none;
  }

  .footer-logo-dark {
    display: block;
  }
}

/* Footer contact details */
.footer-contact {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.footer-contact p {
  margin: 0.1rem 0;
}

.footer-contact .company {
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.footer-contact a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-contact a:hover,
.footer-contact a:focus {
  color: var(--pico-primary);
}

/* Footer social icons */
.footer-social-icons {
  margin-top: 1.5rem;
}

.footer-social-icons .social-icon {
  display: flex !important;
}


/* ============================================
   9. MODAL
   ============================================ */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.2s ease;
  pointer-events: auto;
}

.modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: -1;
}

.modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  background: var(--pico-card-background-color);
  border-radius: 0.5rem;
  padding: 2rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  z-index: 1;
  animation: modalSlideUp 0.3s ease;
  overflow: auto;
}

.modal-close {
  position: absolute;
  top: 0.5rem;        /* Was: 1rem - now closer to corner */
  right: 0.5rem;      /* Was: 1rem - now closer to corner */
  width: 36px;        /* Was: 32px - slightly larger for easier clicking */
  height: 36px;       /* Was: 32px */
  padding: 0;
  background: var(--pico-primary);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;  /* Was: 1.25rem - larger X */
  line-height: 1;
  transition: all 0.2s ease;
  z-index: 10;        /* NEW - ensures it's always on top */
}

.modal-close:hover,
.modal-close:focus {
  transform: scale(1.1);
  background: color-mix(in srgb, var(--pico-primary) 80%, black);
}

.modal img {
  max-width: 100%;
  max-height: calc(90vh - 4rem);
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 0.25rem;
  object-fit: contain;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================
   CONFIRMATION MODAL (Simple)
   ============================================ */

.confirmation-modal {
  max-width: 500px;
  text-align: center;
  padding: 2rem;
}

.confirmation-modal h2 {
  color: var(--pico-primary);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.confirmation-modal p {
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.confirmation-close-btn {
  width: 100%;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  background: var(--pico-primary);
  color: white;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.confirmation-close-btn:hover {
  transform: translateY(-1px);
}

.confirmation-close-btn:focus-visible {
  outline: 3px solid var(--pico-primary);
  outline-offset: 3px;
}

/* Mobile adjustments */
@media (max-width: 576px) {
  .confirmation-modal {
    padding: 1.5rem;
  }
  
  .confirmation-modal h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
}


/* ============================================
   SOCIAL MODALS
   ============================================ */

/* Ensure button social icons maintain original styling */
button.social-icon {
  /* Inherit all the existing .social-icon styles */
  /* Just ensure button-specific resets */
  font-family: inherit;
  cursor: pointer;
}

.social-modal {
  max-width: 400px;
  text-align: center;
  padding: 2rem;
}

.social-modal h2 {
  color: var(--pico-primary);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.social-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.social-action-btn {
  width: 100%;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  /* Use default Pico button styling (blue) - remove background/color overrides */
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  text-decoration: none;
  display: block;
  text-align: center;
  font-weight: 500;
}

.social-action-btn:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

.social-action-btn:focus-visible {
  outline: 3px solid var(--pico-primary);
  outline-offset: 3px;
}

.social-action-btn:active {
  transform: translateY(0);
}

/* Mobile adjustments */
@media (max-width: 576px) {
  .social-modal {
    padding: 1.5rem;
  }
  
  .social-modal h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
}

/* ============================================
   TOASTER (Enhanced)
   ============================================ */

.toaster {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10000;
  max-width: 400px;
  animation: slideInRight 0.3s ease;
}

.toaster-content {
  background: var(--pico-primary);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.toaster-text {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 500;
}

.toaster-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  transition: opacity 0.2s ease;
  line-height: 1;
}

.toaster-close:hover {
  opacity: 1;
}

.toaster-close:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
  border-radius: 4px;
}

@keyframes slideInRight {
  from {
    transform: translateX(120%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (max-width: 576px) {
  .toaster {
    right: 0.5rem;
    left: 0.5rem;
    max-width: none;
  }
  
  .toaster-content {
    padding: 0.875rem 1.25rem;
  }
}



/* ============================================
   10. UTILITIES
   ============================================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Keyboard accessibility fixes */
a[href] {
  pointer-events: auto !important;
}

/* Better contrast for keyboard navigation focus */
*:focus-visible {
  outline: 3px solid var(--pico-primary);
  outline-offset: 2px;
}

/* Keep pink glow for input and button */
.newsletter-form [role="group"] input[type="email"]:focus-visible,
.newsletter-form [role="group"] button:focus-visible {
  outline: none;
}

/* Keep existing focus style for social icons */
.social-icon:focus-visible {
  outline: none;
}

a[href]:focus {
  z-index: 1;
}


/* ============================================
   11. RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 576px) {
  body > main {
    align-items: flex-start;
  }

  /* Navigation */
  .lang-switcher {
    padding: 0.625rem 1rem;
  }

  /* Profile */
  .profile {
    padding: 1.25rem 1rem;
  }

  .profile-photo {
    width: 100px;
    height: 100px;
    border-width: 5px;
  }

  .avatar-button {
    margin-bottom: 1rem;
  }

  .avatar-button::after {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .profile h1 {
    font-size: 2rem;
  }

  .tagline {
    font-size: 1rem;
  }

  .tagline2 {
    font-size: 0.875rem;
    margin-top: 0.2rem;
  }

  /* Heart divider */
  .section-divider {
    padding: 2rem 1rem 0.5rem 1rem;
  }

  .section-divider.divider-below {
    padding: 2.5rem 1rem 2.5rem 1rem;
  }

  .divider-heart {
    width: 40px;
  }

  /* Newsletter */
  .newsletter {
    padding: 2rem 1rem 2rem 1rem;
  }

  .newsletter h2 {
    font-size:1.5rem;
  }

  .newsletter-options {
    gap: 1.5rem;
    flex-wrap: wrap;
  }

  /* Footer */
  .footer-logo {
    max-width: 110px;
  }
}

/* ============================================
   12. DARK MODE BUTTON CONTRAST
   ============================================ */


@media (prefers-color-scheme: dark) {
  /* Make blue modal buttons darker for better contrast in dark mode */
  .social-action-btn {
    background: #1e3a5f;  /* Darker blue for better contrast */
    border-color: #1e3a5f;
    color: white;  /* Ensure consistent white text */
  }
  
  .social-action-btn:hover {
    background: #16324d;  /* Even darker on hover */
    border-color: #16324d;
    color: white;
  }
  
  /* Modal close button - keep pink but make darker */
  .modal-close {
    background: #9d1f58;  /* Darker pink for better contrast */
    color: white;
  }
  
  .modal-close:hover {
    background: #881a4d;
    color: white;
  }
  
  /* Confirmation modal button - same as social action buttons */
  .confirmation-close-btn {
    background: #1e3a5f;
    border-color: #1e3a5f;
    color: white;
  }
  
  .confirmation-close-btn:hover {
    background: #16324d;
    border-color: #16324d;
    color: white;
  }
  
  /* Newsletter form - keep pink but ensure integrated border matches */
  .newsletter-form [role="group"] input[type="email"] {
    border-color: var(--pico-primary);
  }
  
  .newsletter-form [role="group"] button {
    background-color: var(--pico-primary);
    border-color: var(--pico-primary);
    color: white;
  }
}