/* Advocate Vinay Kadam — the home page, in Material 3 Expressive: black and
   white, in Google Sans Flex. One card (portrait, name, the three ways to
   reach the office), the map, and a floating toolbar with Call beside it. */
:root {
  --font-sans: "Google Sans Flex", "Google Sans", Roboto, "Helvetica Neue", Arial, sans-serif;

  --surface: #ffffff;
  --card: #f3f3f2;
  --row: #ffffff;
  --tonal: #e6e6e4;
  --toolbar: #e8e8e6;
  --on-surface: #111111;
  --on-surface-var: #48484a;
  --primary: #000000;
  --on-primary: #ffffff;
  --hover: rgba(0, 0, 0, .06);
  --press: rgba(0, 0, 0, .10);
  --shadow: 0 8px 24px rgba(0, 0, 0, .14);
  --map-filter: grayscale(1);

  --shape-md: 12px; --shape-full: 999px;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --spring: linear(0, .25 8%, .9 25%, 1.05 38%, 1.01 55%, 1);
  --gutter: 24px;
  --width: 1080px;
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) {
  :root { --spring: var(--ease); }
}
/* Dark: true black for OLED phones, and whites a shade off full. The device's
   setting, unless the round button says otherwise (index.html keeps that). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #000000; --card: #121212; --row: #1e1e1e; --tonal: #2c2c2b; --toolbar: #262626;
    --on-surface: #e6e6e3; --on-surface-var: #b8b8b5;
    --primary: #e6e6e3; --on-primary: #000000;
    --hover: rgba(255, 255, 255, .06); --press: rgba(255, 255, 255, .10);
    --shadow: 0 8px 24px rgba(0, 0, 0, .6);
    --map-filter: grayscale(1) invert(.9) contrast(.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #000000; --card: #121212; --row: #1e1e1e; --tonal: #2c2c2b; --toolbar: #262626;
  --on-surface: #e6e6e3; --on-surface-var: #b8b8b5;
  --primary: #e6e6e3; --on-primary: #000000;
  --hover: rgba(255, 255, 255, .06); --press: rgba(255, 255, 255, .10);
  --shadow: 0 8px 24px rgba(0, 0, 0, .6);
  --map-filter: grayscale(1) invert(.9) contrast(.9);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font: 400 16px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1 { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--on-surface); outline-offset: 2px; }
::selection { background: var(--primary); color: var(--on-primary); }
.container {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right))
    calc(128px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 16px;
}

/* Icons: Material Symbols, rounded. */
.ms {
  font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal;
  font-size: 24px; line-height: 1; letter-spacing: normal; white-space: nowrap;
  display: inline-block; flex: none; width: 1em; height: 1em; overflow: hidden;
  -webkit-font-smoothing: antialiased; user-select: none;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* The card: the portrait beside the name and the three rows. */
.card {
  position: relative;
  display: grid; grid-template-columns: clamp(240px, 28vw, 368px) minmax(0, 1fr);
  gap: 56px; align-items: center; padding: 40px 48px 40px 40px;
  background: var(--card); border-radius: 40px;
}

/* Light or dark, in the card's top corner. */
.theme-button {
  position: absolute; z-index: 1; top: 16px; right: 16px;
  width: 48px; height: 48px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--shape-full); background: transparent;
  color: var(--on-surface-var); cursor: pointer;
  transition: background-color 150ms var(--ease), border-radius 300ms var(--spring);
}
.theme-button:hover { background: var(--hover); color: var(--on-surface); }
.theme-button:active { background: var(--press); border-radius: var(--shape-md); }
.theme-button .ms[hidden] { display: none; }

.portrait {
  position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 28px; background: var(--tonal);
}
.portrait img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 10%; filter: grayscale(1);
}

.contact { display: flex; flex-direction: column; gap: 32px; min-width: 0; }

/* The name: the biggest thing on the page. */
.name { display: flex; flex-direction: column; gap: 4px; }
.name__pre { font-size: 24px; line-height: 32px; font-weight: 500; color: var(--on-surface-var); }
.name__main {
  font-size: 64px; line-height: 68px; font-weight: 600; letter-spacing: -1.2px;
  color: var(--on-surface); text-wrap: balance;
}

/* Telephone, Email, Address: three rows joined into one block, the outer
   corners round and the inner ones tight. */
.details { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.detail {
  display: flex; align-items: center; gap: 16px; min-height: 80px; padding: 14px 20px;
  border-radius: 6px; background: var(--row); color: var(--on-surface); text-decoration: none;
  transition: background-color 150ms var(--ease), border-radius 300ms var(--spring);
}
.details li:first-child .detail { border-radius: 24px 24px 6px 6px; }
.details li:last-child .detail { border-radius: 6px 6px 24px 24px; }
.detail:hover { background: color-mix(in srgb, var(--row), var(--on-surface) 5%); }
.details li .detail:active { background: color-mix(in srgb, var(--row), var(--on-surface) 9%); border-radius: 20px; }
.detail__icon {
  width: 48px; height: 48px; border-radius: var(--shape-full);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--tonal); color: var(--on-surface);
}
.detail__text { display: flex; flex-direction: column; min-width: 0; }
.detail__label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--on-surface-var); }
.detail__value { font-size: 18px; line-height: 26px; color: var(--on-surface); overflow-wrap: anywhere; }
.detail__value--lg { font-size: 26px; line-height: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* The map, in a rounded frame. */
.map { overflow: hidden; border-radius: 40px; background: var(--card); }
.map iframe { display: block; width: 100%; height: 420px; border: 0; filter: var(--map-filter); }

/* WhatsApp, Email, Direction on a grey floating toolbar, and Call beside it
   as the one big black button. */
.dock {
  position: fixed; z-index: 50; left: 50%; transform: translateX(-50%);
  bottom: calc(24px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px;
}
.toolbar {
  display: flex; gap: 4px; padding: 8px;
  background: var(--toolbar); border-radius: var(--shape-full); box-shadow: var(--shadow);
}
.toolbar__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 104px; height: 64px; padding: 0 20px;
  border-radius: var(--shape-full); color: var(--on-surface); text-decoration: none;
  font-size: 13px; line-height: 16px; font-weight: 500; white-space: nowrap;
  transition: background-color 150ms var(--ease), border-radius 300ms var(--spring);
}
.toolbar__logo { display: block; flex: none; margin: 1px 0; }
.toolbar__btn:hover { background: var(--hover); }
.toolbar__btn:active { background: var(--press); border-radius: 20px; }
.call {
  width: 80px; height: 80px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: 24px; background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow);
  text-decoration: none; font-size: 13px; line-height: 16px; font-weight: 600;
  transition: border-radius 300ms var(--spring), opacity 150ms var(--ease);
}
.call .ms { font-size: 28px; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.call:hover { opacity: .9; }
.call:active { border-radius: 40px; }
.toolbar__btn:focus-visible, .call:focus-visible { outline-offset: -3px; }

/* Tablet */
@media (max-width: 1024px) {
  .card { gap: 40px; padding: 32px 32px 32px 32px; }
  .name__main { font-size: 48px; line-height: 52px; letter-spacing: -0.8px; }
  .contact { gap: 24px; }
}

/* Phone: the card stacks - the photo the card's width, the name centred
   under it, the light/dark button on the photo's corner. */
@media (max-width: 767px) {
  :root { --gutter: 16px; }
  .container { padding-top: calc(12px + env(safe-area-inset-top)); padding-bottom: calc(112px + env(safe-area-inset-bottom)); gap: 12px; }
  .card { display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 12px; border-radius: 32px; }
  .theme-button, .theme-button:hover { top: 20px; right: 20px; background: var(--card); color: var(--on-surface); }
  .portrait { aspect-ratio: 4 / 5; border-radius: 24px; }
  .contact { gap: 20px; }
  .name { gap: 2px; align-items: center; text-align: center; }
  .name__pre { font-size: 20px; line-height: 28px; }
  .name__main { font-size: 40px; line-height: 44px; letter-spacing: -0.5px; }
  .detail { min-height: 72px; padding: 12px 16px; }
  .detail__value { font-size: 16px; line-height: 22px; }
  .detail__value--lg { font-size: 22px; line-height: 30px; }
  .map { border-radius: 32px; }
  .map iframe { height: 320px; }
  .dock { left: 12px; right: 12px; transform: none; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .toolbar { flex: 1 1 auto; min-width: 0; }
  .toolbar__btn { flex: 1 1 0; min-width: 0; padding: 0 4px; }
}