/* ================================
   Base Typography & Variables
================================ */
:root {
    font-size: 16px;

    /* Typography scale */
    --scale-0: 1rem;       /* 16px */
    --scale-1: 1.25rem;    /* 20px */
    --scale-2: 1.563rem;   /* 25px */
    --scale-3: 1.953rem;   /* 31px */
    --scale-4: 2.441rem;   /* 39px */
    --scale-5: 3.052rem;   /* 49px */

    /* Spacing units */
    --spacing-xs: 0.5rem;
    --spacing-s: 1rem;
    --spacing-m: 1.5rem;
    --spacing-l: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;

    /* Colours */
    --link-color: #C8A2FF;      /* lilac */
    --link-hover-color: #B57EDC; /* darker lilac */
    --bg-color: #121212;
    --text-color: #FFFFFF;
    --button-border: 1px solid #FFFFFF;
}

/* ================================
   Body / Fonts
================================ */
body {
    margin: 0;
    padding: 0;
	padding-bottom: 120px!important; /* adjust until the footer clears nicely */
    background-color: var(--bg-color);
    color: var(--text-color);
   font-family: 'Lexend', 'Open Sans', system-ui, sans-serif;
    font-size: var(--scale-1);
    line-height: 1.6;
    font-weight: 200;
}

/* Headings */
h1 {
    margin: 0 0 var(--spacing-m) 0;
    font-family: 'Lexend', 'Open Sans', sans-serif;
    font-size: var(--scale-5);
    font-weight: 800;
    line-height: 1.1;
}

/* Reset smaller heading margins */
h2, h3, h4, h5, h6 {
    margin: 0; /* removes default top/bottom/side spacing */
    font-family: 'Lexend', 'Open Sans', sans-serif;
    font-weight: 600; /* lighter than h1 but still heading-like */
}


/* Paragraphs */
.container p {
    margin: 0 0 var(--spacing-xl) 0;
    font-size: var(--scale-1);
    line-height: 1.6;
}

/* ================================
   Containers
================================ */
.container {
    max-width: 37.5rem;  /* 600px */
    width: 100%;
    padding: var(--spacing-xl) var(--spacing-m) 0 var(--spacing-m);
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
}

/* Button stack */
.button-stack {
    border: none !important;  /* Remove border around the group */
    padding: 0;
    margin: 0;
}

/* ================================
   Buttons
================================ */
.button,button {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:18.75rem;             	/* 300px */
 	min-height:3rem;                /* 48px */
  	padding:0.75rem 1rem;         	/* 12px ; 16px */
  	font-size:1.125rem;           	/* 18px */
  	font-weight:700;
	text-decoration:none;
	white-space:normal;
    background-color: transparent !important;
    color: var(--text-color) !important;
    border: var(--button-border);
    border-radius: 0.5rem;
    cursor: pointer;
    box-sizing: border-box;
    margin-bottom: 1rem;           /* space between buttons */
    text-align: center;
    line-height: 1.3;
}

/* Button hover effect */

.button:hover,
button:hover,
a.button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-color);
}

/* ================================
   Links
================================ */
a {
    color: var(--link-color);
    text-decoration: underline;
}

a:hover {
    color: var(--link-hover-color);
}

/* ================================
   Avatar
================================ */
.avatar {
    width: 12rem;   /* 192px */
    height: 12rem;  /* keeps it square */
    object-fit: cover;
    background-position: center;
    display: block;
    margin: 0 auto var(--spacing-l);
    border-radius: 0 !important;
}

.avatar-container {
    border-radius: 0 !important;
    overflow: visible !important;
}

/* ================================
   Icons
================================ */
.icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* ================================
   Footer
================================ */
footer {
    margin: var(--spacing-s) 0;  /* smaller vertical spacing */
    font-size: 0.6rem;          /* smaller text */
}

/* ================================
   Responsive
================================ */
@media (max-width: 34.375rem) {  /* 550px */
    h1 { font-size: var(--scale-4); }
    body { font-size: var(--scale-0); }
    .container p { font-size: var(--scale-0); }
    .avatar { margin-bottom: var(--spacing-m); }
}
/* Shared widget styles */
.widget {
  position: fixed;
  bottom: 20px;
	 display: block!important;
  text-align: center;
  font-family: inherit;   /* match site font */
  color: var(--text-color);
  z-index: 1000;
	  width: 80px;            /* small fixed width */
}

.widget-icon {
  width: f0px;
  height: auto;
  display: block;
	 max-width: 80px!important;   /* keeps both QR and share icons small */
  margin: 0 auto 5px auto; /* centre and space below */
}

.widget-text,
.widget-button {
  font-size: 0.75rem;
  font-family: inherit;   /* keep site font */
  text-align: center;
  display: block!important;
  margin: 0;
  line-height: 1.1;
	font-weight: 700;
}

/* Position share bottom-left */
.share-widget {
  left: 20px;
	bottom: 20px;
position: fixed!important;
	cursor: pointer;         /* shows hand cursor */
  display: flex;
  flex-direction: column;  /* image above text */
  align-items: center;     /* center text with image */
  z-index: 1000;
}

/* Position QR bottom-right */
.qr-widget {
  right: 20px;
		bottom: 20px;
	  position: fixed!important;
}
.widget-button {
  background: #000;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
}