/*****************************************
                  P A G E
******************************************/

html, body {
  height: 100%;          /* allow 100% height layout */
  margin: 2px;
}

.layout {
  display: flex;         /* sidebar + content side by side */
  min-height: 100vh;     /* full viewport height */
}

* {
    font-family: Arial, sans-serif;
}

/*****************************************
                L I N K S
******************************************/

a {
    color: black;
    text-decoration: none;
}

a.blue {
    color: blue;
    text-decoration: underline;
}

/* Links keep their colour when hovering, and are underlined */
a:hover {
    text-decoration: underline;
}

/* All links in the content area blue, e.g. <main class='content blue-links'> */
.content.blue-links a,
.content.blue-links a:hover {
    color: blue;
}

/*****************************************
                  L O G O
******************************************/

.logo {
    margin: 0 -20px;
}

.logo img {
    vertical-align: top;      /* no extra space under the image */
    height: 50px;             /* the native size of white_skate_50x50.png */
    width: auto;
}

/* The skate tilts a little when hovering; does not affect the layout */
.logo a:hover img {
    transform: rotate(-10deg);
}

/*****************************************
                  M E N U
******************************************/

.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #333;
    color: white;
}

.menu a {
    text-decoration: none;
    color: white;
    padding: 10px 20px;
}

.menu-right {
    display: flex;            /* language links to the left of the hamburger */
    align-items: center;
    gap: 15px;
}

.languages {
    display: flex;            /* flags side by side */
    gap: 6px;
}

.menu a.lang {
    padding: 0 3px;
    opacity: 0.4;             /* the flag for the language not in use is dimmed */
}

.menu a.lang.active,
.menu a.lang:hover {
    opacity: 1;
}

.menu a.lang img {
    display: block;           /* no extra space under the image */
    height: 18px;             /* slightly smaller than the 36x22 image */
    width: auto;
}

.menu a.donate {
    padding: 0 3px;
    opacity: 0.8;
}

.menu a.donate:hover {
    opacity: 1;
}

.menu a.donate img {
    display: block;           /* no extra space under the image */
    height: 26px;             /* a bit larger than the flags */
    width: auto;
}

/* The donation heart beats on the start page only (<body class='home'>) */
@keyframes heartbeat {
    0%   { transform: scale(1);   }
    20%  { transform: scale(1.2); }
    40%  { transform: scale(1);   }
    100% { transform: scale(1);   }
}

body.home .menu a.donate img {
    animation: heartbeat 2.5s ease-in-out infinite;
    transform-origin: center;
}

/* Respect visitors who have asked their system for less motion */
@media (prefers-reduced-motion: reduce) {
    body.home .menu a.donate img {
        animation: none;
    }
}

.hamburger {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.hamburger div {
    width: 45px;
    height: 4px;
    background: white;
    margin: 4px;
    margin-right: 10px;
}

/*****************************************
              S I D E B A R
******************************************/

.sidebar {
    width: 134px;
    flex-shrink: 0;
    /* Dark behind the search box and lists (they end at about 716px), then fading
       to light grey. Fixed lengths, since the sidebar is as tall as the page. */
    background: linear-gradient(to bottom, #333 0px, #333 720px, #eee 1220px);
    color: white;
    padding: 15px 8px;       /* less padding at the sides, so the search box gets more room */
    margin: 2px 20px 0 0;    /* top margin 2px, right margin 20px, no bottom margin */
    border-radius: 0px;
    font-size: 14px;         /* smaller base font size */
}

.sidebar.hidden {
    display: none;           /* toggled by the hamburger menu */
}

.content {
    flex: 1;            /* take remaining space */
    min-width: 0;       /* may be narrower than its tables, so they scroll here and not the whole page */
    padding: 5px;
    overflow-x: auto;   /* allows horizontal scroll if table is too wide */
}

.sidebar h3 {
    margin-top: 0;
    margin-bottom: 6px;       /* header close to the search text box or list under it */
    color: white;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar li {
    margin: 8px 0;
}

.sidebar a {
    color: white;          /* links also white */
    text-decoration: none;
}

.sidebar a:hover {
    text-decoration: underline;
}

.search-box {
    margin-bottom: 20px;      /* space between the radio buttons and what follows */
}

.recent-box ul,
.highlights-box ul {
    list-style: disc;         /* bullets (the general .sidebar ul removes them) */
    padding-left: 16px;       /* room for the bullets */
}

.recent-box ul,
.recent-box li:first-child,
.highlights-box ul,
.highlights-box li:first-child {
    margin-top: 0;            /* no extra space between the header and the first list item */
}

.search-form input[type=text] {
    width: 100%;
    box-sizing: border-box;   /* keep the text field inside the sidebar */
    padding: 5px 24px 5px 4px; /* room on the right for the magnifying glass */
    margin-bottom: 6px;
    background: white url('../images/magnifying-glass.png') no-repeat right 5px center;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.search-form label {
    display: block;           /* one radio button per line */
    margin: 2px 0;
}

/*****************************************
           W R A P P I N G   R O W
******************************************/

/* Items side by side, moving to the next line when there is not room */
.wrap-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

/* Buttons kept together in a group under the video or the results table */
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
    max-width: 640px;         /* not wider than the video */
}

.button-group form {
    margin: 0;
}

/*****************************************
           M A I N T E N A N C E
******************************************/

.upgrade-message {
    background-color: #e4fae4;
    color: black;
    padding: 25px;
    text-align: center;
    border-radius: 10px;
    font-size: 18px;
}

/*****************************************
          N O T   F O U N D
******************************************/

.not-found-message {
    background-color: #f0f0f0;
    color: black;
    padding: 25px;
    border-radius: 10px;
    font-size: 18px;
    max-width: 600px;
}

/*****************************************
           F E E D B A C K
******************************************/

.feedback-message {
    background-color: #e4fae4;
    color: black;
    padding: 25px;
    text-align: left;
    border-radius: 10px;
    font-size: 18px;
    max-width: 600px;
}

/*
  Donations page: one box for each way to donate, side by side when there
  is room and below each other on narrow screens
*/
.donate-intro {
    max-width: 640px;
}

.donate-options {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
}

.donate-option {
    flex: 1 1 220px;
    max-width: 300px;
    padding: 12px 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.donate-option h3 {
    margin-top: 0;
}

.donate-number {
    font-size: 20px;
}

.donate-soon {
    color: grey;
    font-style: italic;
}

.donate-qr {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
}