@import url('https://fonts.googleapis.com/css2?family=Protest+Riot&display=swap');
/* 🌸 Pet & Owners */
:root {
    --bg-color: #121016;
    --bg-alt: #1b1823;
    --text-color: #f3e9f7;
    --accent: #f195c3;
    --accent-hover: #f8add1;
    --shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    --radius: 1rem;
    --transition: 0.3s ease;
    --max-width: 900px;
    --font-main: "Inter", "Segoe UI", sans-serif;
    --font-accent: "Protest Riot", serif;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: var(--transition);
}

html, body {
    background: var(--bg-alt);
    color: var(--text-color);
    font-family: var(--font-main);
    line-height: 1.6;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}


/*
 ====================================
 ============== Header ==============
 ====================================
*/
header {
    width: 100%;
    background: var(--bg-alt);
    padding: 1rem 2rem;
    border-bottom: 2px solid var(--accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    top:-67pt;
    position: sticky;
    z-index: 10;
}

header h1 {
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: 3rem;
    color: var(--accent);
}

nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
}

nav a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius);
}

nav a:hover {
    background: var(--accent);
    color: var(--bg-color);
}


/*
 ===========================================
 ============== General Pages ==============
 ===========================================
*/
main {
    flex: 1;
    width: 100%;
    max-width: var(--max-width);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

ul li {
    margin-left: 30pt;
}

ul {
    margin-bottom: 1rem;
}

/* 🌸 Mobile optimization general layout */
@media (max-width: 700px) {
    main {
        gap:0.5rem;
        padding: 1rem;
    }
    header h1 {
        font-size: 1.6rem;
    }
    nav {
        gap: 0.8rem;
    }
    header {
        top: -42pt;
        padding: 0.5rem 1rem;
    }
    
}

img.full {
    width:100%;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

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

/* Reusable content blocks */
section {
    background: var(--bg-alt);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem 2rem;
}

section:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
}

section h1, section h2, section h3 {
    color: var(--accent);
    margin-bottom: 0.5rem;
}

p {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* links that are buttons */
a.button {
    background: var(--accent);
    color: var(--bg-color);
    text-decoration: none;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius);
    border: 2pt solid var(--accent);
}

a.button:hover {
    background: var(--bg-alt);
    color: var(--accent);
}

/* colums-aligned stuff */
.row {
    align-items: center;
    width: 100%;
    gap: 1rem;
    text-align: center;
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}


@media (max-width: 700px) {
    .row {
         grid-template-columns: 1fr;
    }
}
/*
 ===========================================
 ============== Kinklist Page ==============
 ===========================================
*/
.kinklist {
    columns: 4;
}

/*
 =========================================
 ============== Member Page ==============
 =========================================
*/
.profile {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    position: relative;
}

.profile img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--accent);
}

.profile .description {
    flex: 1;
}

/* Subtle offset effect */
.profile:nth-child(odd) {
    transform: translateX(-40px);
}
.profile:nth-child(even) {
    transform: translateX(40px);
    flex-direction: row-reverse;
}
.profile:nth-child(odd):hover {
    transform: translateX(-30px);
}
.profile:nth-child(even):hover {
    transform: translateX(30px);
    flex-direction: row-reverse;
}

/* 🌸 Mobile optimization for team/staff layout */
@media (max-width: 700px) {

    .profile, .profile:nth-child(even) {
        transform: none !important;
        flex-direction: column !important;
        text-align: center;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0;
    }

    .profile img {
        height: 100px;
        width: 100px;
    }
}
/*
 ===================================
 ============== FORMS ==============
 ===================================
*/
form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

label {
    color: var(--accent);
    margin-bottom: 0.5rem;
}

input, textarea, select, button {
    font-family: inherit;
    padding: 0.7rem 1rem;
    border: none;
    border-radius: var(--radius);
    outline: none;
    background: var(--bg-alt);
    color: var(--text-color);
    transition: var(--transition);
}

input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 2px var(--accent);
}

button {
    background: var(--accent);
    color: var(--bg-color);
    font-weight: 600;
    cursor: pointer;
}

button:hover {
    background: var(--accent-hover);
}

/*
 ======================================
 ============== Kinklist ==============
 ======================================
*/

.kinklist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin: 2rem auto;
  max-width: 1200px;
}

.kinklist table {
  border-collapse: collapse;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 280px;
  flex: 1 1 300px;
  color: var(--text-color);
}

.kinklist caption {
  background: var(--accent);
  color: var(--bg-color);
  font-weight: bold;
  padding: 0.8rem;
  text-align: center;
  font-size: 1.1rem;
}

.kinklist th, .kinklist td {
  text-align: center;
  padding: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kinklist thead th {
  background: var(--bg-alt);
  font-weight: 600;
}

.kinklist tr:last-child th {
  border-bottom: none;
}

.kinklist button {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  margin: 0 0.15rem;
  transition: transform 0.2s, background 0.2s;
  border-radius: 50%;
  padding: 0.3rem;
}

.kinklist button:hover {
  transform: scale(1.2);
  background: rgba(255,255,255,0.05);
}

/* When selected */
.kinklist button.clicked {
  background: var(--accent);
  color: var(--bg-color);
  transform: scale(1.1);
}

/* Responsive stacking */
@media (max-width: 800px) {
  .kinklist {
    flex-direction: column;
    align-items: center;
  }
}

/*
 ====================================
 ============== Footer ==============
 ====================================
*/

footer {
    margin-top: auto;
    width: 100%;
    text-align: center;
    padding: 0.5rem;
    background: var(--bg-alt);
    border-top: 2px solid var(--accent);
    color: #ccc;
}


/*
 ========================================
 ============== Responsive ==============
 ========================================
*/
@media (max-width: 700px) {

    /* member page */
    .member, .member.reverse {
        flex-direction: column;
        text-align: center;
        transform: none !important;
    }

    .member img {
        width: 140px;
        height: 140px;
    }
}