/* Global stylesheet — consolidated and accessible
   - variables, layout primitives
   - imports component styles for modularity
*/

:root{
    --bg-1: #000014;
    --bg-2: #0f1840;
    --panel-bg: #ffffff;
    --panel-weak: rgba(255,255,255,0.28);
    --text: #ffffff; /* all site text: white */
    --muted: #4b5563;
    --accent: #0b66ff; /* accessible accent */
    --radius: 12px;
    --gap: 16px;
    --max-width: 1200px;
    --font-base: 16px;
    --line-height: 1.45;

    /* sakura pink glow (RGB separated so it can be used in rgba()) */
    --sakura-rgb: 255,182,193;
    --sakura-glow: rgba(var(--sakura-rgb), 0.14);
}

/* Ensure the first page wrapper sits below the fixed navbar with a ~20px gap */
.wrapper:first-of-type {
    margin-top: calc(var(--navbar-height, 48px) + 20px);
}

@media (max-width:780px) {
    /* mobile: navbar inner height is larger (56px) — keep ~20px gap */
    .wrapper:first-of-type { margin-top: calc(56px + 20px); }
}

/* responsive font sizing */
html{font-size:var(--font-base)}
@media (max-width:900px){html{font-size:15px}}
@media (max-width:420px){html{font-size:14px}}
@media (min-width:1400px){html{font-size:17px}}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
    font-family: Inter, Dosis, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: var(--bg-1);
    color:var(--text);
    line-height:var(--line-height);
    min-height:100vh;
    padding-top:16px;
    display:flex;align-items:flex-start;justify-content:center;
    /* subtle sakura pink glow on all text */
    text-shadow: 0 1px 0 rgba(255,255,255,0.02), 0 0 8px var(--sakura-glow);
}

/* Vertical floating frame lines at left/right of the centered content */
/* Disabled to prevent overlapping the background canvas */
body::before, body::after{
    display: none;
}

.container{width:100%;max-width:var(--max-width);padding:16px}

/* Small helpers kept here — larger utilities live in components/utilities.css */
.visually-hidden {
    position:absolute!important;
    height:1px;
    width:1px;
    overflow:hidden;
    clip:rect(1px,1px,1px,1px);
    white-space:nowrap}

/* Layout primitives */

.wrapper {
  /* keep your layout styles */
  border-radius: var(--radius);
  padding: 20px;
  width: 100%;
  max-width: var(--max-width);
  margin: var(--gap) 40px;
  z-index: 1250;
  margin-top: 100px;

  /* GLASS effect */
  background: rgba(255, 255, 255, 0.10); /* transparent glass */
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%); /* Safari */

  /* glass edge + depth */
  border: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow: 0 8px 30px rgba(2, 6, 23, 0.24);

  /* optional: slightly reduce text washout on bright backgrounds */
  color: rgba(255, 255, 255, 0.92);
}

.screen {
    padding:16px;
    border-radius:12px;
    overflow:auto;
     /* GLASS effect */
    background: rgba(255, 255, 255, 0.10); /* transparent glass */
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%); /* Safari */

    /* glass edge + depth */
    border: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow: 0 8px 30px rgba(2, 6, 23, 0.24);

    /* optional: slightly reduce text washout on bright backgrounds */
    color: rgba(255, 255, 255, 0.92);
    margin: 5px;
}

/* Repo card */
.repo-card {
    background:#fff;
    border-radius:14px;
    padding:16px;
    margin:10px 0;
    box-shadow:0 8px 20px rgba(2,6,23,0.06)
}

/* Responsive layout */
@media (min-width: 900px){
    body{align-items:flex-start}
    .container{display:flex;gap:24px}
}

@media (max-width: 600px){
    .wrapper{padding:12px}
}

/* Hide the floating frame on smaller viewports to avoid awkward placement */
@media (max-width: 900px){
    body::before, body::after{ display:none }
}

/* Minesweeper root-level variables (used by ms-css component) */
:root{ --ms-gap:0.4%; --ms-max-size:92vmin; }

/* Import component styles (keep imports relative to this file's directory) */
@import url("components/typography.css?v=3");
@import url("components/buttons.css?v=3");
@import url("components/navbar.css?v=3");
@import url("components/projects.css?v=3");
@import url("components/calculator.css?v=3");
@import url("components/footer.css?v=3");
@import url("components/utilities.css?v=3");
@import url("minesweeper.css?v=3");
@import url("components/minesweeper-overrides.css?v=3");


/* Ensure images inside wrappers scale and don't overflow their containers */
.wrapper img,
.wrapper > img {
    max-width: 100%;
    max-height: 60vmin; /* avoid enormous full-bleed images */
    height: auto;
    display: block;
    object-fit: cover;
}

/* CV profile picture */
.profile{
    width:120px;
    height:120px;
    border-radius:50%;
    object-fit:cover;
    display:block;
    margin-bottom:16px;
}

@media (max-width:600px){
    .profile{width:88px;height:88px}
}

/* Small logos used in CV and links */
.logos{
    width:40px;
    height:40px;
    object-fit:contain;
    display:inline-block;
    vertical-align:middle;
    margin-right:8px;
}

@media (max-width:600px){
    .logos{width:32px;height:32px}
}

/* Small utility: ensure images used as icons in flexible layouts don't stretch */
.img-fit {
    max-width: 100%;
    height: auto;
    display: inline-block;
    object-fit: contain;
}