@font-face {
    font-family: 'Rubik';
    src: url('static/fonts/Rubik-VariableFont_wght.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

:root {
    --clr-accent: #7f66c5;
    --clr-secondary: #565656;
    --clr-offwhite: #F9F4EA;
    --clr-background: #1F1F21;
    --clr-bento-background: #323235;
    --clr-bento-border: #454549;
    --clr-text: var(--clr-offwhite);
    --border-radius: 0.75rem; /* This could also be in em for full scaling if desired at component level */
    --clr-background-alt: #3A393B;
    --clr-pill-background: #242424;
    --clr-pill-border: #58585e;
    --clr-pill-button: #454549;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--clr-background);
    color: var(--clr-text);
    font-family: 'Rubik', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    min-height: 100vh;
    line-height: 1.5;
    overflow-x: hidden;
}

.hero {
    text-align: center;
}

.hero h1 {
    font-size: clamp(1.5rem, 6vw, 3rem);
}

.hero h1 b {
    color: var(--clr-accent);
}

.hero .description {
    font-style: italic;
    opacity: 0.75;
    font-size: clamp(0.78rem, 3vw, 1.33rem);
    max-width: 47ch;
    margin: 1rem auto 0;
}

.top-section {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    flex-direction: column;
}

.handles-list {
    list-style: none;
    padding: 0;
}

.social-handle { /* This is the <li> item */
    display: flex;
    align-items: center;
    /* MODIFIED: Master responsive font-size for the handle and em-based margin */
    font-size: clamp(0.7rem, calc(0.5rem + 1vw), 1rem); /* Scales from ~11.2px to 16px */
    margin-bottom: 1em; /* Scales with this handle's font-size */
}
.social-handle:last-child {
    margin-bottom: 0;
}

.social-handle .handle-icon {
    filter: brightness(0) invert(1);
    flex-shrink: 0;
    /* MODIFIED: Icon size scales with handle's font-size */
    width: 1.5em; /* e.g., 24px when font-size is 1rem (16px) */
    height: 1.5em;
}

.social-handle .handle-pill { /* This is the <span> */
    display: flex;
    align-items: center;
    background-color: var(--clr-pill-background);
    border: 1px dashed var(--clr-pill-border); /* Border width remains fixed, could be 0.0625em for ~1px scaling */
    border-radius: var(--border-radius); /* Uses global rem, could be 0.5em for local scaling */
    min-width: 0;
    /* MODIFIED: Inherits responsive font-size from .social-handle. Padding and margin scale. */
    padding: 0.5em 0.75em; /* Scales with inherited font-size */
    margin-left: 0.75em; /* Scales with inherited font-size */
    position: relative; /* For tooltip */
}

.social-handle .value { /* This is an <a> tag */
    font-family: monospace;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    flex-grow: 1;
    min-width: 0;
    /* MODIFIED: Ensure no wrapping, enable ellipsis. Font is inherited. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Styling for a potential copy button inside the pill */
.social-handle button {
    border: none;
    background-color: var(--clr-pill-button);
    color: var(--clr-text);
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
    /* MODIFIED: Button scales with inherited font-size from .social-handle via .handle-pill */
    font-size: 1em; /* Inherits the responsive font size */
    padding: 0.3em 0.6em; /* Scales with its font size */
    margin-left: 0.5em; /* Scales with its font size */
    border-radius: 0.3em; /* Scales with its font size */
    display: flex; /* To align icon inside if needed */
    align-items: center;
}
.social-handle button:hover {
    background-color: var(--clr-pill-border);
}
.copy-icon { /* Icon inside the button */
    filter: brightness(0) invert(1);
    display: block;
    /* MODIFIED: Icon scales with button's font size */
    width: 1em;
    height: 1em;
}

.copied-tooltip {
    position: absolute;
    bottom: 100%; /* Adjust if padding/font changes significantly, or use em */
    left: 50%;
    transform: translateX(-50%) translateY(-0.5em); /* Use em for scaling offset */
    background-color: var(--clr-text);
    color: var(--clr-background);
    font-size: 0.75em; /* Relative to pill's font-size for tooltip scaling */
    padding: 0.25em 0.5em;
    border-radius: 0.25em;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    z-index: 10;
}

/* --- Other styles from previous version --- */
.socials {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}
.socials a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--clr-text);
    background-color: var(--clr-offwhite);
    padding: 0.5rem;
    border-radius: var(--border-radius);
    transition: transform 0.2s;
}
.socials a:hover {
    transform: scale(1.05);
}
.socials img {
    width: 40px;
    height: 40px;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    width: 100%;
    max-width: 1200px;
}
.bento-item {
    background-color: var(--clr-bento-background);
    border: 1px solid var(--clr-bento-border);
    border-radius: var(--border-radius);
    padding: 1rem; /* Main padding for bento items, can stay fixed */
    min-width: 0;
}
.bento-item h2 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: var(--clr-accent);
}

/* Generic .bento-item.handles styles (if used elsewhere, distinct from .top-section .handles) */
.bento-item.handles ul { list-style: none; }
.bento-item.handles li { display: flex; align-items: center; }
.bento-item.handles .handle-value { font-family: monospace; margin-right: 0.5rem; }
.bento-item.handles button {
    background-color: var(--clr-secondary); border: none; color: var(--clr-background);
    padding: 0.25rem 0.5rem; border-radius: 0.25rem; cursor: pointer; transition: background-color 0.2s;
}
.bento-item.handles button:hover { background-color: var(--clr-accent); }

.bento-item.webrings p { margin-bottom: 0.5rem; }
.bento-item.webrings a { color: var(--clr-text); text-decoration: underline; }
.bento-item.buttons { display: flex; flex-direction: column; gap: 1rem; }
.bento-item.buttons a {
    font-family: 'Rubik', sans-serif; color: var(--clr-text); flex: 1; display: flex;
    justify-content: center; align-items: center; border: none; padding: 7px 12px;
    border-radius: var(--border-radius); background-color: var(--clr-background-alt);
    width: 100%; text-decoration: none; cursor: pointer; transition: filter 0.2s;
}

@media (min-width: 800px) {
  .top-section {
    flex-direction: row;
  }
  .hero {
    min-width: 40ch;
  }
  .bento-item.handles { /* This is div.bento-item.handles in .top-section */
    flex-shrink: 0;
    /* On desktop, individual social-handles will use the max font-size from clamp (1rem) */
  }

  /* Styles for a separate .bento-grid layout */
  .bento-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); gap: 1rem; }
  .bento-item.handles.in-grid { grid-column: 1; grid-row: 1 / span 2; }
  .bento-item.webrings { grid-column: 2 / span 2; grid-row: 1; }
  .bento-item.buttons { grid-column: 3; grid-row: 2; align-self: start; }
}

.webrings-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    max-width: 1200px;
    margin-top: auto;
    margin-bottom: 1rem;
    padding-top: 1rem;
}
.webrings-footer a {
    color: var(--clr-text);
    text-decoration: none;
    font-weight: 500;
    overflow-wrap: break-word;
}