/* hiltonweb CSS file */

* {
  box-sizing: border-box;
}

main {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* Four columns for larger screens */
  grid-template-rows: auto;
  justify-content: center;
}

/* Three columns for laptops/smaller PCs */
@media screen and (max-width: 1024px) {
    main {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Two columns for tablets */
@media screen and (max-width: 768px) {
    main {
        grid-template-columns: 1fr 1fr;
    }
}

/* One column for S/M/L sized mobile screens */
@media screen and (max-width: 426px) {
    main {
        grid-template-columns: 1fr;
    }
}

section {
  /* To make sizing easier, include borders or padding in width */
  box-sizing: border-box;
  margin-bottom: 1em; /* Created space between entries to aid readability */
  
  /* Set a limit on entry widths? */
  max-width: 100%;
  height: auto;
}

section.entry {
  background-color: #F7CA18; /* Changed background colour from #ffffffa to a yellow with 13:1 contrast ratio */
  border: solid 1px; /* Added border to entry rows */
  padding: 0.5em 0.5em 0.5em 0.5em; /* Added padding to entry rows */
	
  /* This allows us to position each delete button */
  position: relative;
  /* Set a limit on entry height */
  min-height: 5rem;  
  max-height: 100%;
}

/* Style every second entry differently */
section.entry:nth-child(2n) {
	background-color: #34B9DB; /* Changed background colour from #fffafa to a blue with 9:1 contrast ratio */
}

/* Removed this section because every 4th row not required to be singled out for styling (only alternate entries to differentiate them) */
/* Style every fourth entry differently */
/*section.entry:nth-child(4n) {
  background-color: #fafaff;
}*/

section.entry button {
  /* Fix size of delete buttons */
  height: 1.5rem;
  width: 1.5rem;
  /* Position delete buttons to the top-right of their container */
  position: absolute;
  top: 0;
  right: 0;
  /* Fade out delete buttons when not using them */
  opacity: 0;
  transition: opacity 0.3s;
}

section.entry:hover button,
section.entry button:focus {
  /* Fade in delete buttons when you hover over an entry 
     or focus on a button (e.g. tab with keyboard) */
  opacity: 1;
}

section.entry textarea {
  /* Use a variable-width font */
  font-family: Verdana, Arial, sans-serif; /* Changed font family to more readable sans-serif fonts */
  line-height: 1.5; /* Added line height to increase readability */
  /* Make text areas fill their container */
  background-color: transparent;
  border: 0;
  width: 100%;
  height: 100%;
  resize: none;
  /* To make sizing easier, include borders or padding in width */
  box-sizing: border-box;
  /* Allow scrolling using keyboard only */
  overflow: hidden;
}

/* Make image entries responsive */
section.entry img {
  width: 100%;
  height: auto;
}

@media screen and (pointer: coarse) {
  /* Do not fade delete button on touch screen (no hover) */
  section.entry button {
    opacity: 1;
  }

  section.entry textarea {
    /* Stop text area going behind delete button if not faded */
    padding-right: 1.5rem;
    /* Allow scrolling with finger */
    overflow: scroll;
  }
}

section.button button {
  /* Make Add entry and Add photo buttons fill their container */
  width: 100%;
  height: 100%;
  /* Do not add border to width (else it will be over 100%) */
  box-sizing: border-box;
}

/* Hide the image file input (use JavaScript to click it instead) */
section#image input {
  display: none;
}

/* Style page heading */
h1 {
  font-size: 1.4rem;
  /* Reduce gap before/after headings to make things a bit neater */
  margin: 0.25rem 0 1.25rem 0; /* Added 1.25rem margin below heading to create space before diary entries */
}