/* Win97 desktop landing with icons and windows */

:root{
  --grey-1:#c0c0c0;
  --grey-2:#dfdfdf;
  --grey-3:#e9e9e9;
  --grey-4:#9a9a9a;
  --btn:#dcdcdc;
  --btn-dark:#8d8d8d;
  --blue:#000080;
  --shadow:#00000040;
  --white:#fff;
  --black:#111;
}

*{ box-sizing:border-box }

html, body{ height:100%; }

body{ margin:0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; background:var(--grey-3); color:var(--black); }

/* Wallpaper variations */
body.light{ background:#c0c0c0; }
body.teal{ background:#008080; }

/* Desktop area */
.desktop{ position:relative; height:100vh; padding:16px 12px 64px; }

/* Icons grid */
.icons{ list-style:none; margin:0; padding:0; display:grid; grid-auto-rows:min-content; gap:16px; }
.icon{ width:92px; text-align:center; color:#000; cursor:default; user-select:none; }
.icon-img{ width:42px; height:42px; margin:0 auto 6px; border:2px solid var(--btn-dark); border-right-color:#fff; border-bottom-color:#fff; background:var(--grey-2); position:relative; }
.icon-img.app::after{ content:""; position:absolute; left:8px; top:8px; width:26px; height:26px; background:linear-gradient(#3a7bfa,#244b95); }
.icon-img.folder::after{ content:""; position:absolute; left:6px; top:12px; width:30px; height:18px; background:#f2e7b9; border:2px solid #b0933b; }
.icon-img.gears::after{ content:"⚙️"; position:absolute; left:8px; top:6px; font-size:22px; }
.icon-img.note::after{ content:""; position:absolute; left:10px; top:8px; width:22px; height:26px; background:#fff; border:2px solid #999; }
.icon-img.mail::after{ content:"✉️"; position:absolute; left:8px; top:6px; font-size:22px; }
.icon-img.bin::after{ content:"🗑️"; position:absolute; left:8px; top:6px; font-size:22px; }

/* Walkman icon (CD with musical note)
 * Use a generated pixel art CD/music icon as the background. The ::after
 * pseudo-element ensures the image stays within the 42×42 container. */
.icon-img.walkman::after{
  content:"";
  position:absolute;
  left:8px;
  top:8px;
  width:26px;
  height:26px;
  background-image:url('assets/icons/walkman.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.icon span{ display:block; font-size:12px; line-height:1.2; }

/*
 * Custom desktop icons
 *
 * The default icon styles above relied on pseudo‑elements (::after) to
 * draw simple shapes, emojis or colour blocks for the Windows‑style
 * shortcuts. To integrate high fidelity icons provided by the user, we
 * suppress the pseudo‑element content and instead set a background
 * image for each icon class. The png assets live in
 * `website/assets/icons` and are downloaded from the React95 icon
 * library. The `background` shorthand centres and scales the image
 * to fit within the 42×42 pixel container defined in `.icon-img`.
 */
.icon-img.app::after,
.icon-img.folder::after,
.icon-img.gears::after,
.icon-img.note::after,
.icon-img.mail::after,
.icon-img.bin::after {
  content: none;
}
.icon-img.app {
  background: url("assets/icons/msnstart_100.png") center/contain no-repeat;
}
.icon-img.folder {
  background: url("assets/icons/progman_21.png") center/contain no-repeat;
}
.icon-img.gears {
  background: url("assets/icons/qfecheck_111.png") center/contain no-repeat;
}
.icon-img.note {
  background: url("assets/icons/notepad.png") center/contain no-repeat;
}
.icon-img.mail {
  background: url("assets/icons/mail.png") center/contain no-repeat;
}
.icon-img.bin {
  background: url("assets/icons/recycle_full.png") center/contain no-repeat;
}

/* Custom icon for the MomoAdvisors logo shortcut. This displays the company
 * logo in the same 42×42 pixel container used by other desktop icons. */
.icon-img.logo-icon::after {
  content: none;
}
.icon-img.logo-icon {
  background: url("assets/momoadvisors_logo.png") center/contain no-repeat;
}

/* Windows */
.win{ position:absolute; min-width:340px; background:var(--grey-1); border:2px solid var(--btn-dark); border-right-color:#fff; border-bottom-color:#fff; box-shadow:6px 6px 0 var(--shadow); }
.win.hidden{ display:none; }

.title-bar{ height:30px; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(#2c2c9a,#000080); color:#fff; padding:0 6px; font-weight:700; }
.controls{ display:flex; gap:4px; }
.control-btn{ width:18px; height:18px; border:2px solid #fff; background:#c0c0c0; }
.control-btn.close{ background:linear-gradient(#f66,#c22); }

.window-body{ padding:12px; background:var(--grey-2); border-top:2px solid #fff; }
.status-bar{ display:flex; justify-content:space-between; padding:4px 8px; background:var(--grey-1); border-top:2px solid var(--btn-dark); }

/* Hero */
.hero-body{ display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:18px; }
.hero-copy h1{ font-size:36px; margin:0 0 8px; font-weight:800; }
.hero-logo{ width:100%; max-width:320px; filter:grayscale(100%) contrast(110%); }

/* Buttons */
.btn{ display:inline-block; padding:8px 14px; border:2px solid var(--btn-dark); border-right-color:#fff; border-bottom-color:#fff; background:var(--btn); text-decoration:none; color:inherit; cursor:pointer; }
.btn-primary{ background:#3a7bfa; color:#fff; border-color:#274c98; border-right-color:#8fb3ff; border-bottom-color:#8fb3ff; }

/* Clients badges */
.brand-banner{ display:flex; flex-wrap:wrap; gap:10px; }
.badge{ padding:6px 10px; background:var(--grey-3); border:2px solid var(--btn-dark); border-right-color:#fff; border-bottom-color:#fff; font-weight:700; }

/* Services grid */
.grid{ display:grid; gap:12px; grid-template-columns:repeat(2,1fr); }
.card{ padding:12px; background:var(--grey-3); border:2px solid var(--btn-dark); border-right-color:#fff; border-bottom-color:#fff; }
.card-title{ font-weight:800; margin-bottom:6px; text-transform:uppercase; letter-spacing:.02em; }

/* Journal cards */
.cards{ display:grid; gap:12px; grid-template-columns:repeat(3,1fr); }
.article{ padding:12px; background:var(--grey-3); border:2px solid var(--btn-dark); border-right-color:#fff; border-bottom-color:#fff; }
.article h3{ margin:0 0 6px; }
.article .link{ text-decoration:none; color:#000080; font-weight:700; }

/* Contact form */
.form label{ display:block; font-weight:700; margin:10px 0 2px; }
.form input, .form textarea{ width:100%; padding:8px; background:#fff; border:2px solid var(--btn-dark); border-right-color:#fff; border-bottom-color:#fff; }
.form-actions{ margin-top:12px; text-align:right; }

/* Recycle Bin */
.bin-list{ margin:6px 0 10px 16px; }
.bin-list li{ cursor:pointer; }
.bin-actions{ display:flex; gap:8px; }

/* Taskbar & Start */
.taskbar{ position:fixed; left:0; right:0; bottom:0; height:44px; background:var(--grey-1); display:flex; align-items:center; gap:8px; padding:4px 6px; border-top:2px solid #fff; box-shadow:inset 0 2px 0 #fff, inset 0 -2px 0 var(--btn-dark); z-index:9999; }
.start{ display:flex; align-items:center; gap:8px; background:linear-gradient(#e7e7e7,#cfcfcf); border:2px solid var(--btn-dark); border-right-color:#fff; border-bottom-color:#fff; padding:4px 10px; font-weight:700; }
.start-text{}
.start-icon{ width:16px; height:16px; margin-right:8px; image-rendering:pixelated; filter:grayscale(100%) contrast(2); }

/* Taskbar windows list */
.taskbar-windows{ display:flex; gap:6px; flex:1; overflow:auto; }
.task-item{ background:linear-gradient(#e7e7e7,#cfcfcf); padding:5px 10px; border:2px solid var(--btn-dark); border-right-color:#fff; border-bottom-color:#fff; white-space:nowrap; }
.task-item.active{ outline:2px solid var(--blue); color:var(--blue); font-weight:700; }

/* Tray clock */
.tray{ display:flex; align-items:center; gap:10px; }
.clock{ font-variant-numeric:tabular-nums; }

/* Start menu */
.start-menu{ position:fixed; left:4px; bottom:48px; width:300px; background:var(--grey-1); border:2px solid var(--btn-dark); border-right-color:#fff; border-bottom-color:#fff; display:none; grid-template-columns:56px 1fr; box-shadow:0 8px 20px var(--shadow); }
.start-menu.active{ display:grid; }
.start-menu__brand{ background:var(--blue); color:#fff; display:flex; align-items:flex-end; justify-content:center; padding:8px 0; }
.brand-vertical{ writing-mode:vertical-rl; transform: rotate(180deg); letter-spacing:2px; font-weight:800; }
.start-menu__list{ list-style:none; margin:0; padding:8px; background:var(--grey-1); }
.start-menu__list a{ display:block; padding:8px; border:2px solid transparent; color:inherit; text-decoration:none; }
.start-menu__list a:hover{ border-color:var(--blue); background:#f1f1f1; }

/* Responsive adjustments */
@media (max-width:1000px){
  .hero-body{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:1fr; }
}

/*
 * Mobile layout optimizations
 *
 * When the viewport is narrow (e.g. phones), adjust the layout so that
 * desktop icons wrap nicely and windows occupy most of the screen width.
 */
@media (max-width:600px){
  .desktop{
    padding-bottom: 80px; /* extra space for taskbar on mobile */
  }
  .icons{
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    justify-items: center;
  }
  /* Make windows full width and align them near the top on mobile */
  .win{
    width: calc(100% - 20px) !important;
    left: 10px !important;
    top: 40px !important;
    min-width: unset;
  }
}