/*
* Prophetic Ilm Theme for LinkStack
* A dark, elegant Islamic knowledge theme
* Colors: Deep Green, Gold, Blue Accent, Black
* 
* Built using Skeleton CSS (MIT License)
* https://github.com/dhg/Skeleton
*/

/* ========================================
   CSS Variables
   ======================================== */
:root {
  --pi-black: #0a0a0a;
  --pi-dark: #111111;
  --pi-dark-card: #1a1a1a;
  --pi-dark-hover: #222222;
  --pi-green-deep: #1a3a28;
  --pi-green: #2d5a3d;
  --pi-green-light: #3d7a52;
  --pi-green-text: #6aab7d;
  --pi-gold: #c9a84c;
  --pi-gold-light: #dfc06a;
  --pi-gold-dark: #a8892e;
  --pi-blue: #1a8fbf;
  --pi-blue-light: #3bb5e6;
  --pi-text: #e8e4dc;
  --pi-text-muted: #9a9488;
  --pi-border: #2a2a2a;
  --pi-gradient-gold: linear-gradient(135deg, #a8892e 0%, #dfc06a 50%, #c9a84c 100%);
  --pi-gradient-green: linear-gradient(135deg, #1a3a28 0%, #2d5a3d 50%, #3d7a52 100%);
}

/* ========================================
   Base / Reset
   ======================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-size: 1.5em;
  line-height: 1.6;
  font-weight: 400;
  font-family: 'Nunito Sans', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--pi-text);
  background: var(--pi-black);
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* ========================================
   Background - Subtle geometric pattern
   ======================================== */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: 
    radial-gradient(ellipse at 20% 50%, rgba(29, 90, 61, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(201, 168, 76, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 80%, rgba(26, 143, 191, 0.06) 0%, transparent 40%),
    var(--pi-black);
}

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.03;
  background-image: 
    repeating-linear-gradient(0deg, transparent, transparent 49px, rgba(201, 168, 76, 0.5) 49px, rgba(201, 168, 76, 0.5) 50px),
    repeating-linear-gradient(90deg, transparent, transparent 49px, rgba(201, 168, 76, 0.5) 49px, rgba(201, 168, 76, 0.5) 50px);
}

/* ========================================
   Grid
   ======================================== */
.container {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 20px;
}

.column, .columns {
  width: 100%;
  float: left;
}

.row { 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 0;
}

/* ========================================
   Typography
   ======================================== */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--pi-text);
}

h1 { font-size: 3.0rem; line-height: 1.2; letter-spacing: -.05rem; }
h2 { font-size: 2.6rem; line-height: 1.25; letter-spacing: -.04rem; }
h3 { font-size: 2.2rem; line-height: 1.3; letter-spacing: -.03rem; }
h4 { font-size: 1.8rem; line-height: 1.35; letter-spacing: -.02rem; }
h5 { font-size: 1.5rem; line-height: 1.5; letter-spacing: -.01rem; }
h6 { font-size: 1.3rem; line-height: 1.6; letter-spacing: 0; }

p { margin-top: 0; }

a {
  color: var(--pi-gold);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--pi-gold-light);
}

/* ========================================
   Profile Section
   ======================================== */
#avatar-url {
  display: block;
  margin: 0 auto 1.5rem auto;
  border-radius: 50%;
  width: 128px;
  height: 128px;
  object-fit: cover;
  border: 3px solid var(--pi-gold);
  box-shadow: 
    0 0 0 4px var(--pi-dark),
    0 0 20px rgba(201, 168, 76, 0.25),
    0 0 40px rgba(29, 90, 61, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#avatar-url:hover {
  transform: scale(1.05);
  box-shadow: 
    0 0 0 4px var(--pi-dark),
    0 0 30px rgba(201, 168, 76, 0.4),
    0 0 60px rgba(29, 90, 61, 0.2);
}

/* Profile name */
#profile-title,
.profile-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--pi-text);
  text-align: center;
  margin-bottom: 0.3rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Bio / description */
#profile-description,
.profile-description {
  font-size: 1.4rem;
  color: var(--pi-text-muted);
  text-align: center;
  margin-bottom: 2rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Verified checkmark */
.verified-checkmark {
  color: var(--pi-blue);
}

/* ========================================
   Link Buttons (Main links)
   ======================================== */
.button,
.button-hover,
a.button,
#button-default {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto 1rem auto;
  padding: 1.4rem 2rem;
  background: var(--pi-dark-card);
  color: var(--pi-text) !important;
  border: 1px solid var(--pi-border);
  border-radius: 12px;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.02rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.button::before,
a.button::before,
#button-default::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 168, 76, 0.05),
    transparent
  );
  transition: left 0.5s ease;
}

.button:hover,
.button-hover:hover,
a.button:hover,
#button-default:hover {
  background: var(--pi-dark-hover);
  border-color: var(--pi-gold);
  color: var(--pi-gold-light) !important;
  transform: translateY(-2px);
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(201, 168, 76, 0.1);
}

.button:hover::before,
a.button:hover::before,
#button-default:hover::before {
  left: 100%;
}

.button:active,
a.button:active,
#button-default:active {
  transform: translateY(0);
}

/* Button icons */
.button img,
a.button img,
#button-default img {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  filter: brightness(0) invert(0.85);
}

.button:hover img,
a.button:hover img,
#button-default:hover img {
  filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(10deg);
}

/* ========================================
   Social Icons Row
   ======================================== */
.social-icons,
#social-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 1.5rem 0;
}

.social-icons a,
#social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pi-dark-card);
  border: 1px solid var(--pi-border);
  transition: all 0.3s ease;
}

.social-icons a:hover,
#social-icons a:hover {
  background: var(--pi-green-deep);
  border-color: var(--pi-gold);
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(201, 168, 76, 0.2);
}

.social-icons a img,
#social-icons a img,
.social-icons a svg,
#social-icons a svg {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(0.8);
  transition: filter 0.3s ease;
}

.social-icons a:hover img,
#social-icons a:hover img,
.social-icons a:hover svg,
#social-icons a:hover svg {
  filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(15deg);
}

/* ========================================
   Share Button
   ======================================== */
#share-button,
.share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.6rem;
  margin-top: 1rem;
  background: transparent;
  color: var(--pi-text-muted);
  border: 1px solid var(--pi-border);
  border-radius: 8px;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

#share-button:hover,
.share-button:hover {
  color: var(--pi-gold);
  border-color: var(--pi-gold-dark);
  background: rgba(201, 168, 76, 0.05);
}

/* ========================================
   Footer
   ======================================== */
footer,
.footer {
  text-align: center;
  padding: 2rem 0;
  margin-top: 2rem;
}

footer a,
.footer a {
  color: var(--pi-text-muted);
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

footer a:hover,
.footer a:hover {
  color: var(--pi-gold);
}

footer img,
.footer img {
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

footer img:hover,
.footer img:hover {
  opacity: 0.7;
}

/* ========================================
   Admin Bar (when logged in)
   ======================================== */
.admin-bar,
#admin-bar {
  background: var(--pi-dark) !important;
  border-bottom: 1px solid var(--pi-border) !important;
}

.admin-bar a,
#admin-bar a {
  color: var(--pi-gold) !important;
}

/* ========================================
   Heading Block
   ======================================== */
.heading-block {
  color: var(--pi-gold);
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  margin: 1.5rem 0 0.5rem 0;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

/* ========================================
   Text Block
   ======================================== */
.text-block {
  color: var(--pi-text-muted);
  font-size: 1.4rem;
  text-align: center;
  margin: 0.5rem 0 1rem 0;
  line-height: 1.6;
}

/* ========================================
   Spacer Block
   ======================================== */
.spacer-block {
  height: 1rem;
}

/* ========================================
   VCard Block
   ======================================== */
.vcard-block {
  background: var(--pi-dark-card);
  border: 1px solid var(--pi-border);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1rem 0;
  text-align: center;
}

/* ========================================
   Ornamental Divider (Islamic geometric inspired)
   ======================================== */
.divider,
hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--pi-gold-dark),
    var(--pi-gold),
    var(--pi-gold-dark),
    transparent
  );
  margin: 2rem auto;
  max-width: 200px;
}

/* ========================================
   Scrollbar
   ======================================== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--pi-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--pi-green-deep);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--pi-green);
}

/* ========================================
   Selection
   ======================================== */
::selection {
  background: var(--pi-gold);
  color: var(--pi-black);
}

::-moz-selection {
  background: var(--pi-gold);
  color: var(--pi-black);
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 550px) {
  .row {
    padding: 1rem 0;
  }
  
  #avatar-url {
    width: 100px;
    height: 100px;
  }
  
  #profile-title,
  .profile-title {
    font-size: 2rem;
  }

  .button,
  a.button,
  #button-default {
    padding: 1.2rem 1.5rem;
    font-size: 1.4rem;
  }
}

/* ========================================
   Utility Classes
   ======================================== */
.u-full-width { width: 100%; }
.u-max-full-width { max-width: 100%; }
.u-pull-right { float: right; }
.u-pull-left { float: left; }
.u-cf { content: ""; display: table; clear: both; }

/* ========================================
   Dark mode override (force dark always)
   ======================================== */
@media (prefers-color-scheme: light) {
  body {
    background: var(--pi-black);
    color: var(--pi-text);
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background: var(--pi-black);
    color: var(--pi-text);
  }
}