/* DogOcean theme — refined */

/* ===============================
   Root variables
   =============================== */
:root {
  /* spacing & radii */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 16px;
  --space-4: 20px;
  /* extra spacing for controls to prevent overlap */
  --space-5: 26px;
  --radius-1: 4px;

  /* sizing */
  --thumb: 200px;          /* gallery thumb min width */
  --container-w: 82vw;     /* main content width */

  /* light theme */
  --bg: #f4f7ff;
  --bg-2: #eaf1ff;
  --text: #1a2335;
  --muted: #4b5b7a;
  --panel: #ffffff;
  --panel-line: #c7d6f5;
  --accent: #2f6fff;
  --accent-2: #7aa5ff;
  --link: #1f51cc;

  /* buttons */
  --btn-bg: #e7eeff;
  --btn-edge: #97aee3;
  --btn-text: #123;
  --btn-bg-hover: #dbe6ff;

  /* frames */
  --frame: #b9c8e8;
  --frame-dark: #8295bd;
}

/* dark theme overrides */
:root.dark {
  --bg: #0f213a;
  --bg-2: #10233e;
  --text: #eaf1ff;
  --muted: #adc4ff;
  --panel: #102744;
  --panel-line: #3c5b89;
  --accent: #8fb0ff;
  --accent-2: #4d7fff;
  --link: #b7cbff;

  --btn-bg: #153055;
  --btn-edge: #40639b;
  --btn-text: #eaf1ff;
  --btn-bg-hover: #1b3963;

  --frame: #3b5a86;
  --frame-dark: #274368;
}

/* ===============================
   Base
   =============================== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
  color: var(--text);
  /* Use Times New Roman across the entire site for a cohesive retro vibe */
  font: 16px/1.5 "Times New Roman", Times, serif;
}
h1, h2, h3, .serif { font-family: "Times New Roman", Times, serif; }

/* ===============================
   Buttons
   =============================== */
a.button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px;
  background: linear-gradient(180deg, var(--btn-bg), var(--panel));
  border: 2px solid var(--btn-edge);
  color: var(--btn-text);
  text-decoration: none;
  border-radius: var(--radius-1);
  box-shadow: 0 1px 0 var(--panel-line), 2px 2px 0 rgba(0,0,0,.15);
  cursor: pointer;
  font-family: "Times New Roman", Times, serif;
  /* Consistent font size and line height for all buttons */
  font-size: 1rem;
  line-height: 1.2;
  /* Ensure minimum height for consistent sizing */
  min-height: 2.4em;
  /* prevent width from collapsing when page numbers grow */
  min-width: 2.5em;
}
a.button:hover, .button:hover { background: var(--btn-bg-hover); }
a.button:active, .button:active { transform: translateY(1px); }

/* Custom button colour utilities */
/* Green gradient used for primary actions like opening the gallery */
.button.button-green {
  background: linear-gradient(180deg, #7be495, #4caf50);
  border-color: #3e8e41;
  color: #ffffff;
}
.button.button-green:hover {
  background: linear-gradient(180deg, #6cd88b, #449d48);
}

/* Magenta gradient used for actions such as "Random Image" */
.button.button-magenta {
  background: linear-gradient(180deg, #f385db, #d23ca6);
  border-color: #a22d7d;
  color: #ffffff;
}
.button.button-magenta:hover {
  background: linear-gradient(180deg, #e073c6, #c03295);
}

/* Yellow gradient for navigation actions (prev/next) */
.button.button-yellow {
  background: linear-gradient(180deg, #ffd860, #f0a500);
  border-color: #c08c00;
  color: #1a2335;
}
.button.button-yellow:hover {
  background: linear-gradient(180deg, #ffd040, #e19600);
}


@keyframes rainbowShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* A smooth colour cycle used for random buttons. Each step smoothly
   transitions from one solid colour to the next.  This keeps the
   button uniformly coloured while hovering, without stripes. */
@keyframes colorCycle {
  0%   { background-color: #e150a6; }
  17%  { background-color: #ff5b5b; }
  34%  { background-color: #ffb64d; }
  51%  { background-color: #64dd17; }
  68%  { background-color: #40c4ff; }
  85%  { background-color: #9575cd; }
  100% { background-color: #e150a6; }
}

/* Theme toggle variants.  These classes are applied via JS to reflect the
   opposite of the current mode.  .button-theme-light prompts switching to
   light mode when the page is dark.  .button-theme-dark prompts switching
   to dark mode when the page is light. */
.button.button-theme-light {
  background: linear-gradient(180deg, #e7eeff, #ccd8fa);
  border-color: #97aee3;
  color: #1a2335;
}
.button.button-theme-light:hover {
  background: linear-gradient(180deg, #dbe6ff, #b7c6f0);
}
.button.button-theme-dark {
  background: linear-gradient(180deg, #384a7d, #223260);
  border-color: #1b2451;
  color: #eaf1ff;
}
.button.button-theme-dark:hover {
  background: linear-gradient(180deg, #4a5f97, #2e3f74);
}

/* button bars (home page)
   Use a responsive grid so the number of columns automatically
   matches the number of buttons.  Each button stretches to fill
   its cell, so they align neatly beneath the random images. On
   small screens the grid will wrap, keeping the buttons inline
   with the images above. */
.btnbar {
  display: grid;
  /* auto-fit will create as many columns as there are items, but
     minmax(0,1fr) allows them to shrink evenly on narrow screens */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--space-2);
  justify-items: stretch;
  /* add space above the button bar on the home page */
  /* add extra breathing room above the button bar on the home page */
  margin-top: var(--space-4);
}
.btnbar .button {
  width: 100%;
  min-width: 0;
  text-align: center;
  /* Arrange image and caption vertically to maintain consistent heights */
  display: flex;
  flex-direction: column;
}

/* ===============================
   Header / Toolbar
   =============================== */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border-bottom: 2px solid var(--frame);
}
.toolbar {
  width: var(--container-w);
  margin: 0 auto;
  padding: var(--space-2);
  display: flex;
  align-items: center;
  /* increase space between groups in the toolbar */
  gap: var(--space-3);
  /* Keep all toolbar items on a single row and allow horizontal scrolling on narrow screens */
  flex-wrap: nowrap;
  overflow-x: auto;
}

/* On small screens, wrap toolbar items onto multiple rows so that all
   controls remain visible without horizontal scrolling. */
@media (max-width: 700px) {
  .toolbar {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  /* Controls should wrap and occupy the full width on small screens */
  .toolbar .controls {
    flex-wrap: wrap;
    overflow-x: visible;
    width: 100%;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }
  .toolbar .controls > * {
    margin-bottom: var(--space-2);
  }
}

/* Push the theme toggle button to the far right on toolbars */
.toolbar > .button.mode-toggle {
  margin-left: auto;
}
/* Controls container aligns label and select horizontally */
.controls {
  display: flex;
  align-items: center;
  /* generous spacing between control elements on gallery page */
  gap: var(--space-5);
  /* Keep labels and controls on a single line; allow horizontal scroll if needed */
  flex-wrap: nowrap;
  overflow-x: auto;
}

.controls select {
  background: var(--panel);
  border: 2px solid var(--frame);
  padding: 6px 8px;
  color: var(--text);
  /* Use Times New Roman for dropdowns to match rest of site */
  font-family: "Times New Roman", Times, serif;
}

/* Style text inputs (e.g., search box) to match selects and
   buttons.  Use the panel background and frame border, and adopt
   Times New Roman to maintain consistency. */
input[type="text"] {
  background: var(--panel);
  border: 2px solid var(--frame);
  padding: 6px 8px;
  color: var(--text);
  border-radius: var(--radius-1);
  font-family: "Times New Roman", Times, serif;
}
input[type="text"]::placeholder {
  color: var(--muted);
}

/* When a checkbox is placed inside a button (e.g., for Crazy Dog,
   Reverse, Slideshow), add a small margin to the right so the text
   doesn’t overlap the checkbox. */
.button input[type="checkbox"] {
  margin-right: 6px;
}

/* Ensure checkboxes align with theme colours.  Use the accent colour for the check mark.
   The size and shape of checkboxes are unified across browsers. */
input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
  margin-right: 4px;
}

/* Ensure labels in controls also use Times New Roman */
.controls label {
  font-family: "Times New Roman", Times, serif;
}

/* spacing between label and subsequent element */
/* spacing only for labels associated with selects (those with a for attribute) */
.controls label[for] {
  /* margin handled by .controls gap; no extra margin needed */
  margin-right: 0;
}

/* ===============================
   Home
   =============================== */
.home-wrap { position: fixed; inset: 0; display: grid; place-items: center; }
.home { text-align: center; width: min(1000px, 94vw); padding: var(--space-3); }
.logoimg {
  width: 500px;
  height: auto;
  display: block;
  margin: 0 auto var(--space-2);
  /* Add a soft drop shadow to the logo for depth */
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.3));
  /* Prepare logo for pulsing animation by setting the transform origin */
  transform-origin: center;
}

/* Animate the logo on hover so that it pulses horizontally.  The
   animation scales the width between its normal size and a slightly
   narrower size.  This runs continuously while hovering. */
@keyframes logoWidthPulse {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.9); }
}
.logoimg:hover {
  animation: logoWidthPulse 2s ease-in-out infinite;
}
.tagline { color: var(--muted); margin-bottom: var(--space-3); }

.grid3 {
  display: grid;
  /* Allow the home thumbnails to shrink a bit on wider screens by using auto-fit with a minimum size */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2);
}

/* Container for the random examples on the home page.  It matches the
   width of the button bar and provides a panel with a caption. */
.examples {
  border: 2px solid var(--frame);
  background: var(--panel);
  box-shadow: 0 1px 0 var(--panel-line), 2px 2px 0 rgba(0, 0, 0, 0.1);
  padding: var(--space-3);
  margin-top: var(--space-3);
}

/* Title for the examples container */
.examples-title {
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  margin-bottom: var(--space-2);
  text-align: left;
}

/* Mobile-only warning displayed when the viewport is narrow.  Hidden by
   default and shown via a media query to mimic noscript warnings. */
.mobile-note {
  display: none;
  background: #fff3cd;
  color: #5c4700;
  border: 1px solid #ffe69c;
  padding: 8px;
  margin: 10px auto;
  width: var(--container-w);
  text-align: center;
  font-family: "Times New Roman", Times, serif;
}
@media (max-width: 700px) {
  .mobile-note {
    display: block;
  }
}
/* shared box style for home and gallery thumbnails */
.square,
.thumb {
  display: block;
  width: 100%;
  text-decoration: none;
  border: 2px solid var(--frame);
  background: var(--panel);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* subtle shadow like the buttons for depth */
  box-shadow: 0 1px 0 var(--panel-line), 2px 2px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.square img,
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hover effect for thumbs: lift slightly and intensify shadow */
.square:hover,
.thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  border-color: var(--accent);
}

/* ===============================
   Gallery
   =============================== */
.gallery { width: var(--container-w); margin: 16px auto 40px; }
/*
   Gallery grid: use a fixed column width so that thumbnails remain the same
   size even when there are only a few results.  Each cell is exactly
   `--thumb` wide and will wrap onto new lines as needed.  Align items
   to the top to keep captions consistent.  Use `justify-content: center`
   so the grid remains centred when there are not enough items to fill
   the row.
*/
.grid {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(var(--thumb), var(--thumb)));
  justify-content: center;
  gap: var(--space-3);
}
.cell {
  text-align: center;
  /* Arrange image and caption vertically to maintain consistent heights */
  display: flex;
  flex-direction: column;
}
.caption {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  /* reserve space for one or two lines of caption to prevent the pager from jumping around */
  /* reserve space for longer titles to prevent pagination from jumping */
  min-height: 3.2em;
}

.pager { display: flex; gap: 6px; justify-content: center; padding: 16px 0; }

/* Ensure pagination buttons have consistent width (up to two digits) */
.pager .button {
  min-width: 2.8em;
}

/* Shrink pagination controls on narrow screens so they fit comfortably. */
@media (max-width: 700px) {
  .pager .button {
    padding: 4px 6px;
    font-size: 0.8rem;
    min-width: 1.8em;
  }
}

/* ===============================
   Viewer (View page)
   =============================== */
.viewer { width: var(--container-w); margin: 20px auto 40px; }
.window {
  background: var(--panel);
  border: 2px solid var(--frame);
  box-shadow: 0 2px 0 var(--panel-line), 6px 6px 0 rgba(0,0,0,.12);
}
.win-title {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #fff;
  padding: 8px 12px;
  text-align: center;
}
.inner {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  background: radial-gradient(800px 300px at 50% 0%, rgba(255,255,255,0.35), transparent 70%);
}
.frame {
  width: 100%;
  max-width: 900px;              /* smaller default so it fits on most devices */
  padding: var(--space-2);
  border: 6px double var(--frame);
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;              /* no scroll in fit mode */
}

/* Allow scrolling when viewing images at actual size */
body.actual .frame {
  overflow: auto;
}

/* Fit-to-screen default */
body.fit .frame img {
  display: block;
  margin: 0 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80vh;              /* prevent overflow vertically */
}

/* Actual-size toggle */
body.actual .frame img {
  display: block;
  margin: 0 auto;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
}

.viewer-meta {
  text-align: center;
  max-width: 90%;
}
.viewer-title { font-family: "Times New Roman", Times, serif; font-size: 1.5rem; }
.viewer-date { color: var(--muted); margin-top: 4px; }
.viewer-desc { margin-top: 10px; line-height: 1.6; }

.viewer-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

/* Navigation and action groups for the view page toolbar */
.nav-group {
  display: flex;
  gap: var(--space-2);
  /* separate the navigation buttons from the back button */
  margin-left: var(--space-3);
}
.action-group {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

/* ===============================
   Noscript
   =============================== */
.noscript-note {
  background: #fff3cd;
  color: #5c4700;
  border: 1px solid #ffe69c;
  padding: 8px;
  margin: 10px auto;
  width: var(--container-w);
}
.noscript-grid {
  width: var(--container-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.noscript-grid img { width: 100%; height: auto; border: 1px solid var(--frame); }

/* ===============================
   Responsive adjustments
   =============================== */
/* On small screens, show two items per row in home and gallery grids */
@media (max-width: 700px) {
  .grid3 {
    /* on very small screens, show two images per row on the home page */
    grid-template-columns: repeat(2, 1fr);
  }
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* match the button grid to the image layout: two buttons per row on mobile */
  .btnbar {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===============================
   Custom button colour variants
   =============================== */
/* Green gradient for primary actions like "Open Gallery" */
.button.button-green {
  background: linear-gradient(180deg, #b1e685, #7dc348);
  border-color: #5d9934;
  color: #0a2600;
}
.button.button-green:hover {
  background: linear-gradient(180deg, #a2d479, #6bb130);
}

/* Magenta gradient for random actions */
.button.button-magenta {
  background: linear-gradient(180deg, #f7a5d2, #e150a6);
  border-color: #a63677;
  color: #33021c;
}
.button.button-magenta:hover {
  background: linear-gradient(180deg, #eda0cb, #d84798);
}

/*
   Rainbow button: default to a magenta gradient like our magenta buttons.
   On hover, animate a colourful rainbow sweep.  This ensures that
   Random buttons match the magenta palette until the user hovers over
   them, at which point they animate more quickly.  The animation
   duration is shortened on hover to make the colour transitions more
   lively without being overwhelming.
*/
@keyframes rainbow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/*
   Rainbow button: default to a magenta gradient similar to the magenta buttons.
   When hovered, cycle through a palette of solid colours uniformly across
   the entire button.  The duration can be customised via the CSS
   variable --rainbow-duration (see 404 page for slower cycles).
*/
.button.button-rainbow {
  /* Default background uses a magenta gradient */
  background: linear-gradient(180deg, #f7a5d2, #e150a6);
  border-color: #a63677;
  color: #33021c;
  /* Prepare for animation but do not animate until hover */
  animation: none;
}
.button.button-rainbow:hover {
  /* Use the colour cycle keyframes on hover.  Allow overriding of the
     animation duration via the --rainbow-duration variable.  If not
     defined, fall back to 2s for a lively effect. */
  animation: colorCycle var(--rainbow-duration, 2s) linear infinite;
  background: none;
  /* Maintain border and text colour consistency */
  border-color: #a63677;
  color: #33021c;
}

/* Theme toggle buttons: light variant (shown when dark mode is active) */
.button.button-theme-light {
  background: linear-gradient(180deg, var(--btn-bg), var(--panel));
  border-color: var(--btn-edge);
  color: var(--btn-text);
}

/* Theme toggle buttons: dark variant (shown when light mode is active) */
.button.button-theme-dark {
  background: linear-gradient(180deg, #21406d, #0f2a4a);
  border-color: #102744;
  color: #eaf1ff;
}

/* Crazy dog image style */
/*
   Crazy Dog size and positioning.  Double the default size to make
   the dog more visible.  The actual image is scaled via CSS and
   not by changing the underlying file.  The position is fixed so
   it remains on screen regardless of scrolling.
*/
.crazydog {
  position: fixed;
  /* Increase the default size of the Crazy Dog so that it matches
     the larger sizing used on the view page. */
  width: 150px;
  height: 150px;
  pointer-events: none;
  z-index: 1000;
}

/* Reduce the Crazy Dog size on small screens to save space.  On
   handheld devices the dog occupies half its desktop footprint. */
@media (max-width: 700px) {
  .crazydog {
    width: 100px;
    height: 100px;
  }
}

/* Spin animation for 404 container when spinny checkbox is checked */
@keyframes spinnyRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinny-animate {
  animation: spinnyRotate 6s linear infinite;
}

/* Drop shadow for logo on homepage */
.logoimg {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

/* Hide the fullscreen toggle on small screens where it doesn’t make sense */
@media (max-width: 700px) {
  #btn-fullscreen {
    display: none !important;
  }
}