body {
  font-family: 'Nunito', 'Segoe UI', 'Helvetica Neue', sans-serif;
  background-color: #fefefe;
  color: #333;
  line-height: 1.7;
  margin: 0;
  padding: 0;
  padding-top: 60px; /*adjust if your nav height changes*/
}

header {
  background: linear-gradient(135deg, #c2e9fb, #a1c4fd);
  color: #1e3a8a;
  padding: 18px 10px;
  text-align: center;
}
header h1 {
  font-size: clamp(1rem, 2.2vw + 0.6rem, 1rem); /* was 1.8em */
  margin-bottom: 6px;            /* was 10px */
  line-height: 1.2;
}



nav {
  background-color: #e0f0ff;
  padding: 12px 20px;
  text-align: center;

  position: fixed; /*make it stick to the top*/
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /*keep it above images and annotations*/
  
}

.lang-switch {
  margin-left: 15px;
  font-size: 0.95em;
  white-space: nowrap;
}

nav a {
  text-decoration: none;
  color: #2563eb;
  font-weight: 500;
  margin: 0 10px;
}

main {
  max-width: 1100px;
  margin: 30px auto;
  padding: 0 16px;
}

section {
  margin-bottom: 50px;
}

h2 {
  border-left: 4px solid #3b82f6;
  padding-left: 10px;
  color: #1e40af;
  font-size: 1.4em;
  margin-top: 40px;
}

.step {
  margin-top: 20px;
  background-color: #f9fafb;
  padding: 16px;
  border-left: 3px solid #93c5fd;
  border-radius: 6px;
}

.step img {
  width: 100%;
  max-width: 100%;
  border-radius: 6px;
  margin-top: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.caption {
  font-size: 0.95em;
  color: #555;
  margin-top: 5px;
}

ul {
  padding-left: 20px;
}

ul li {
  margin-bottom: 8px;
}

details summary {
  cursor: pointer;
  font-weight: 500;
  color: #2563eb;
}

footer {
  text-align: center;
  font-size: 0.9em;
  padding: 30px 10px;
  margin-top: 50px;
  background-color: #f3f4f6;
  color: #555;
  border-top: 1px solid #ddd;
}

.image-wrapper {
  position: relative;
  display: inline-block;
  margin-top: 20px;
}

.screenshot {
  max-width: 100%;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}


.annot {
  position: absolute;     /* Positions it on top of the screenshot container */
  inset: 0;               /* Equivalent to top:0; right:0; bottom:0; left:0; fills the container */
  pointer-events: none;   /* Makes clicks pass through to the image below */
  z-index: 5;             /* Places above the screenshot but below the bubble text (z-index:6) */
}

/* line anchored to a fixed point on the image */
.annot .line{
  position: absolute;        /* Allows placement anywhere inside the .annot layer */
  top: var(--s-top);         /* Vertical start point (percentage of image height) */
  left: var(--s-left);       /* Horizontal start point (percentage of image width) */
  width: calc(var(--b-left) - var(--s-left)); /* Length of line = bubble's horizontal position minus start point */  
  height: var(--thickness, 3px); /* Line thickness (fallback 3px if --thickness not set) */
  background: #e60000;         /* Line color (bright red) */
  transform: translateY(-50%);   /* Vertically centers the line on the start point */
  z-index: 5;                /* Above image, below bubble */
}

/* the bubble */
.annot .bubble{
  position: absolute;        /* Allows placement anywhere inside .annot */
  top: var(--b-top);         /* Vertical position of bubble (percentage of image height) */
  left: var(--b-left);       /* Horizontal position of bubble (percentage of image width) */
  transform: translate(0, -50%);
                           /* Vertically centers bubble on its Y coordinate */
  background: #fff;          /* White background for readability */
  color: #000;               /* Black text */
  padding: 8px 16px;         /* Space inside bubble (top/bottom, left/right) */
  border: 3px solid #cc0000; /* Dark red border */
  border-radius: 18px;       /* Rounded corners */
  font-weight: 700;          /* Bold text */
  font-size: .95em;          /* Slightly smaller than base text size */
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
                           /* Soft shadow for depth */
  z-index: 6;                /* Above everything else */
  pointer-events: auto;      /* Bubble text is clickable/selectable */

}

/* mobile: override the properties to use the -sm variables */
@media (max-width:600px) {
  .annot .line {
    top: var(--s-top-sm, var(--s-top));       /* Mobile vertical start point */
    left: var(--s-left-sm, var(--s-left));    /* Mobile horizontal start point */
    width: calc(var(--b-left-sm, var(--b-left))
                - var(--s-left-sm, var(--s-left)));
                                              /* Mobile line length */
    height: var(--thickness-sm, var(--thickness, 3px));
                                              /* Mobile thickness */
  }
  .annot .bubble {
    top: var(--b-top-sm, var(--b-top));       /* Mobile vertical bubble position */
    left: var(--b-left-sm, var(--b-left));    /* Mobile horizontal bubble position */
    font-size: .45em;                         /* Smaller bubble text for mobile */
    padding: 1px 5px;                         /* Less padding for mobile */
    border-width: 2px;                        /* Slightly thinner border */
  }
}

/* Reduce base font sizes on mobile */
@media (max-width:600px) {
  body {
    font-size: 0.9em;
    line-height: 1.55;
  }

  header h1 {
    font-size: 1.35em;
  }

  nav a {
    font-size: 0.85em;
  }

  .caption {
    font-size: 0.8em;
  }
}



/* ====== TOP BANNER (AdSense/Ezoic) ====== */
.top-banner.ad-slot {
  background: #fafafa;
  border-bottom: 1px solid #ddd;
  text-align: center;
  padding: 10px;
  min-height: 90px;           /* reserve space to prevent layout shift */
  display: grid;
  place-items: center;
}

/* ====== LAYOUT: side rail + main ====== */
.layout {
  display: flex;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
}

/* main flexes; you already have main styles */
.layout main { flex: 1 1 auto; }

/* ====== SIDE RAIL (AdSense/Ezoic skyscraper) ====== */
.ad-rail {
  flex: 0 0 160px;          /* 160x600 standard */
  display: flex;
  justify-content: center;
}
.ad-rail .ad-slot {
  width: 160px;
  min-height: 600px;        /* reserve space for skyscraper */
  background: #fafafa;
  border: 1px dashed #ccc;
  border-radius: 8px;
  text-align: center;
  font-size: .85rem;
  color: #666;
  position: sticky;
  top: 80px;                /* below your fixed nav */
}

/* Hide side rails on smaller screens */
@media (max-width: 1100px) {
  .ad-rail { display: none; }
}

/* ====== INLINE AFFILIATE “Sponsored Tip” ====== */
.ad-inline {
  margin: 32px 0;
  padding: 16px 18px;
  border-left: 3px solid #f59e0b;
  background: #fff8e6;
  border-radius: 10px;
}
.ad-inline h3 { margin: 0 0 6px; font-size: 1.05rem; }
.ad-inline p  { margin: 4px 0 0; font-size: .95rem; }

/* Hide all ads on print */
@media print {
  .top-banner, .ad-rail, .ad-inline, .ad-slot { display: none !important; }
}


/* put this in styles.css */
:root { --nav-h: 60px; }          /* match your actual nav height */
html { scroll-padding-top: var(--nav-h); scroll-behavior: smooth; }

/* If your nav is a bit shorter on phones, tweak it: */
@media (max-width:600px){
  :root { --nav-h: 56px; }
}


/* fallback offset for hash targets */
[id]:target::before {
  content: "";
  display: block;
  height: 60px;        /* same as nav height */
  margin-top: -60px;   /* negate the height to push content down */
}