/* =====================================================================
   Onsite iPhone Repair - "iPad" home page (alternative design)
   Recreates the old thebrokeniphone.com look: a big white iPad on a
   colorful broken-glass background, home screen of app icons + a dock.

   Layout by screen size:
   - Desktop / tablet (wider than 640px): full iPad frame.
   - Phone (640px and narrower), look chosen by the class on <body> in index.html:
       <body class="phone-fullscreen"> screen fills the whole display (current choice)
       <body class="phone-bezel">      slim iPad bezel stays around the screen (optional alternative)
   EDIT colors/sizes in the :root block below.
   ===================================================================== */
:root {
  --bezel: #f5f6f8;          /* white iPad bezel (from old tablet-*.jpg slices) */
  --bezel-edge: #c9cbcf;     /* silver outer edge */
  --accent: #e0201b;         /* red word in the name, like the old site */
  --ink: #111;
  --icon: 96px;              /* app icon size on desktop */
}
/* Colorful broken-glass wallpaper (old site's bg3.jpg), tiled like the original.
   EDIT: to change it, replace images/wallpaper.jpg (keep it under ~150 KB). */
body, .screen {
  background-image: url("../images/wallpaper.jpg");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background-color: #222; background-repeat: repeat; background-size: 640px auto;  /* page background = broken glass */
  overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; background: #fff; padding: 10px 14px; border-radius: 8px; z-index: 10; }
.skip-link:focus { left: 8px; }

/* ---------------- The iPad ---------------- */
.ipad {
  position: relative;
  width: min(900px, calc(100% - 32px));
  margin: 40px auto;
  padding: 120px 48px 130px;              /* top/bottom bezels hold the name and home button */
  background: linear-gradient(#fbfbfc, var(--bezel) 8%, var(--bezel) 92%, #e9eaec);
  border-radius: 64px;
  box-shadow:
    0 0 0 3px #fff inset,
    0 0 0 7px var(--bezel-edge),          /* silver rim */
    0 0 0 9px #8d8f93,
    0 30px 60px rgba(0, 0, 0, .55);
}
.ipad::before {                            /* front camera */
  content: ""; position: absolute; top: 30px; left: 50%;
  width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #3b4a7a, #0d0f16 60%);
}
.home-button {                             /* round home button; links back to the top of the page */
  position: absolute; bottom: 34px; left: 50%;
  width: 66px; height: 66px; margin-left: -33px; border-radius: 50%;
  border: 3px solid #d2d4d8; background: linear-gradient(#f7f7f8, #e6e7ea);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.12);
}
.home-button::after { content: ""; position: absolute; inset: 20px; border: 2px solid #c3c5c9; border-radius: 6px; }

/* Business name + phone in the top bezel (old: "iPhone Repair Service  (251) ...") */
.ipad-header {
  position: absolute; top: 48px; left: 64px; right: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.ipad-header .site-name, .ipad-header .phone-number {
  margin: 0; font-size: clamp(22px, 3.4vw, 38px); font-weight: bold; text-shadow: 2px 1px #c7c7cc; line-height: 1.1;
  text-decoration: none; display: inline-flex; align-items: center; gap: .25em; min-height: 44px;
}
.ipad-header .site-name span { color: var(--accent); }
.ipad-header a:hover { color: var(--accent); }

/* ---------------- The screen ----------------
   On computers the screen has a fixed iPad shape; anything taller scrolls INSIDE it (.app-body). */
.screen {
  position: relative;
  display: flex; flex-direction: column;
  aspect-ratio: 847 / 1000;               /* old screen was 847px wide */
  min-height: 560px;
  background-color: #111; background-repeat: repeat; background-size: 640px auto; background-position: center top;
  border: 3px solid #0b0b0b;             /* thin black edge around the glass */
  border-radius: 6px;
  overflow: hidden;
  color: #fff;
}
.statusbar {
  /* The old home screen's status bar image (images/statusbar.png, 849x22: see-through dark bar,
     white wifi on the left, white battery on the right). border-image keeps the wifi and battery
     ends at their real size (crisp) and stretches only the plain middle, so it fits any width. */
  height: 22px; flex: none;
  border-style: solid; border-width: 0 52px;
  border-image: url("../images/statusbar.png") 0 52 / 0 52px stretch;
  /* The plain middle of the image is black at ~60% opacity; painting it as a background colour
     (instead of border-image "fill") looks identical but lets contrast checkers see the dark bar
     behind the white clock. */
  background: rgba(0,0,0,.6) padding-box;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; line-height: 22px; color: #fff;   /* white, like the old clock */
  font-variant-numeric: tabular-nums;
}

/* Home page intro "widget" under the status bar (holds the page's H1) */
.tagline {
  margin: 18px auto 0; padding: 12px 20px; max-width: 90%;
  background: rgba(0,0,0,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 18px; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.tagline h1 { margin: 0 0 4px; font-size: 22px; line-height: 1.2; }
.tagline p { margin: 0; font-size: 15px; line-height: 1.4; }

/* App icon grid. EDIT: add/remove <li> items in index.html; the grid wraps by itself. */
.apps {
  list-style: none; margin: 0; padding: 36px 40px 20px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 20px; align-content: start;
}
.app a, .dock a {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-height: 44px; text-decoration: none; text-align: center;
  font-size: 15px; color: #fff; text-shadow: #000 1px 1px 2px; border-radius: 22px;
}
.app img, .dock img {
  width: var(--icon); height: var(--icon); border-radius: 22%;
  box-shadow: 0 4px 10px rgba(0,0,0,.35); transition: transform .15s;
}
.app a:hover img, .dock a:hover img { transform: scale(1.06); }
.app a:active img, .dock a:active img { filter: brightness(.7); }
a:focus-visible, .app-body:focus-visible { outline: 3px solid #0b5cff; outline-offset: 2px; }

/* Dock (frosted bar at the bottom of the screen) */
.dock-wrap { margin-top: auto; flex: none; }
.dock {
  list-style: none; margin: 0 24px 14px; padding: 16px 24px 12px;
  display: flex; justify-content: space-around; gap: 12px;
  background: rgba(255,255,255,.28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 32px; border: 1px solid rgba(255,255,255,.35);
}
.dock a { font-size: 14px; }

/* Tiny footer line at the bottom of the screen */
.screen-footer { flex: none; padding: 0 16px 10px; text-align: center; font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.9); text-shadow: 0 1px 2px #000; }
.screen-footer p { margin: 0; }

/* ======================= INSIDE PAGES ("apps") =======================
   <body class="... app-page">: light iOS background, app header with "< Home",
   white grouped lists (old site's text-box / page-link look). */
.app-page .screen { background: #efeff4; color: var(--ink); }
.app-header {                              /* gray bar like the old banner.jpg */
  flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 48px; padding: 0 8px;
  background: linear-gradient(#f7f7f8, #e3e3e8); border-bottom: 1px solid #c8c7cc;
}
.app-header .back {
  justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px;
  color: #007aff; text-decoration: none; font-size: 17px;
}
.app-header .back span { font-size: 34px; line-height: 0; margin-top: -4px; }
.app-title { margin: 0; font-size: 17px; font-weight: 600; }
.app-body {                                /* scrolls inside the iPad screen on computers */
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px 28px 10px;
}
.text-box {                                /* white rounded box (old text-box-*.png) */
  margin: 16px 0; padding: 16px 18px; background: #fff;
  border: 1px solid #c8c7cc; border-radius: 10px; font-size: 16px; line-height: 1.5;
}
.text-box h1 { margin: 0 0 8px; font-size: 26px; line-height: 1.2; }
.text-box p { margin: 0 0 10px; }
.text-box h2 { margin: 0 0 8px; font-size: 19px; line-height: 1.25; }
.cta { display: flex; flex-wrap: wrap; gap: 8px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
  border-radius: 12px; font-weight: bold; text-decoration: none;
}
.btn-call { background: #088526; color: #fff; }   /* slightly deeper green: white text passes 4.5:1 contrast */
.btn-text { background: #0b5cff; color: #fff; }

/* Grouped price lists (iOS "Settings" style) */
.group { margin: 22px 0; }
.group h2 { margin: 0 0 6px 14px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #6b6b70; }
.list {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border: 1px solid #c8c7cc; border-radius: 10px; overflow: hidden; font-size: 17px;
}
.list th, .list td { padding: 13px 16px; border-bottom: 1px solid #e0e0e5; }
.list tr:last-child th, .list tr:last-child td { border-bottom: 0; }
.list th { text-align: left; font-weight: normal; }
.list td { text-align: right; color: #6b6b70; white-space: nowrap; }
.list caption { caption-side: bottom; text-align: left; padding: 6px 14px 0; font-size: 13px; color: #6b6b70; }
.app-page .screen-footer { color: #6b6b70; text-shadow: none; padding: 6px 0 14px; }

/* ---------------- Medium screens: shrink icons ---------------- */
@media (max-width: 860px) {
  :root { --icon: 76px; }
  .ipad { padding: 110px 34px 120px; border-radius: 52px; }
  .apps { padding: 30px 20px 16px; gap: 28px 12px; }
  .app-body { padding: 4px 16px 10px; }
}

/* ---------------- PHONES (640px and narrower) ---------------- */
@media (max-width: 640px) {
  :root { --icon: 60px; }
  .apps { padding: 18px 14px 12px; gap: 22px 6px; }
  .app a, .dock a { font-size: 12px; gap: 5px; }
  .dock { margin: 0 10px 10px; padding: 10px 8px 8px; border-radius: 26px; }
  .dock a span { display: none; }          /* real iPhones show no labels in the dock */
  .tagline { margin-top: 14px; max-width: calc(100% - 24px); padding: 10px 14px; }
  .tagline h1 { font-size: 19px; }
  .tagline p { font-size: 14px; }
  .text-box h1 { font-size: 23px; }

  /* Optional alternative (body class "phone-bezel"): slim iPad bezel stays around the screen */
  .phone-bezel .ipad {
    width: calc(100% - 16px); margin: 8px auto;
    padding: 64px 12px 74px; border-radius: 34px;
    box-shadow: 0 0 0 2px #fff inset, 0 0 0 4px var(--bezel-edge), 0 0 0 5px #8d8f93, 0 14px 30px rgba(0,0,0,.5);
  }
  .phone-bezel .ipad::before { top: 10px; width: 9px; height: 9px; margin-left: -4.5px; }
  .phone-bezel .ipad-header { top: 16px; left: 18px; right: 18px; gap: 4px 10px; justify-content: center; }
  .phone-bezel .ipad-header .site-name, .phone-bezel .ipad-header .phone-number { font-size: 18px; text-shadow: 1px 1px #c7c7cc; }
  .phone-bezel .home-button { bottom: 13px; width: 48px; height: 48px; margin-left: -24px; }
  .phone-bezel .home-button::after { inset: 14px; }
  .phone-bezel .screen { aspect-ratio: auto; min-height: calc(100svh - 170px); }

  /* Current look (body class "phone-fullscreen"): screen fills the whole display like a real home screen.
     Inside pages scroll with the page (no inner scroll box) and the dock sticks to the bottom. */
  .phone-fullscreen .ipad { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; width: 100%; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .phone-fullscreen .ipad::before, .phone-fullscreen .home-button { display: none; }
  .phone-fullscreen .ipad-header {          /* name becomes a frosted banner at the top */
    position: relative; inset: auto; z-index: 1; margin: 0; padding: calc(env(safe-area-inset-top) + 14px) 16px 12px;
    flex-direction: column; gap: 0; justify-content: center; text-align: center;
    background: rgba(255,255,255,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .phone-fullscreen .ipad-header .site-name { font-size: 24px; }
  .phone-fullscreen .ipad-header .phone-number { font-size: 20px; }
  /* Status bar = first row of the screen, right under the name banner (same as desktop). */
  .phone-fullscreen .screen {
    aspect-ratio: auto; border: 0; border-radius: 0; background-image: none; background-color: transparent;
    overflow: visible; flex: 1; min-height: 0; padding-bottom: env(safe-area-inset-bottom);
  }
  .phone-fullscreen .app-body { overflow: visible; padding: 2px 12px 8px; }
  .phone-fullscreen .dock-wrap { position: sticky; bottom: 0; z-index: 2; padding-bottom: env(safe-area-inset-bottom); }
  .phone-fullscreen.app-page .screen { background-color: #efeff4; }
  .phone-fullscreen.app-page .app-header { position: sticky; top: 0; z-index: 2; }
  .phone-fullscreen.app-page .statusbar { position: relative; z-index: 3; }
}
@media (prefers-reduced-motion: reduce) { .app img, .dock img { transition: none; } }