/* Font Declaration */
@font-face {
  font-family: 'Preston-Regular';
  src: url('https://fwdemo.fotoware.com.au/font/Preston-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Apply Preston-Regular font to all elements */
* {
  font-family: 'Preston-Regular', sans-serif;
}


.preview-title .metadataField.inputField .viewMarkup, .preview-title .metadataField.bagField .viewMarkup {
  font-size: 18px;
  line-height: 1;
}


.breadcrumb .breadcrumb-name {
    max-width: 300px !important;
}


.preview-title .metadataField.inputField .editMarkup,.preview-title .metadataField.bagField .editMarkup {
  font-size: 18px;
  line-height: 1
}

/* Common properties: */

html {
  font-size: 14px;
  height: 100%;
  width: 98%
}

#sidebar {
  padding-bottom: 140px;
  width: 290px;
}

.navbar-inner {
  background-color: #000; /* header color */
}
.intranetextra-link {
  color: #aaa !important; /* header icon color */
}
.content-title {
  color: #FFF !important; /* title color */
  background-color: var(--ImageGallery-black) !important;
  font-size: 48px; /* title size */
  font-family: 'Preston-Regular', sans-serif !important;
  padding: 30px;
}

.media-sets {
  background: #fff; /* body background */
  margin: 1% 4% 4%; /* body content alignment */
}

/* Search button: */
.navbar-search .main-search-btn {
  background-color: rgb(206, 49, 3) !important; /* search button color */
  color: #fff; /* button text color */
  padding: 6px 12px; /* button padding */
  font-size: 14px; /* button text size */
  font-weight: normal; /* button text style */
  text-transform: uppercase; /* button text in ALL CAPS */
  line-height: 1; /* button text lineheight */
  text-align: center; /* button text alignment */
  border: 0; /* button border */
  border-top-right-radius: 4px; /* button rounded corner */
  border-bottom-right-radius: 4px; /* button rounded corner */
}

/* Upload button and register button - darkmode: */
.fotoweb-dark .btn-primary {
  color: #ffffff; /* button text color */
  background-color: rgb(206, 49, 3); /* upload button color */
  border-color: #fff; /* button border color */
  border-radius: 4px; /* button rounded corner */
  border: 2px solid; /* button border */
  text-transform: uppercase; /* button text in ALL CAPS */
}

.fotoweb-dark .btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #b4b3b3; /* button on hover text color */
  background-color: #000; /* button on hover color */
  border-color: #b4b3b3; /* button on hover border color */
}

/* Upload button and register button - lightmode: */
.btn-primary {
  color: #ffffff; /* button text color */
  background-color: rgb(206, 49, 3); /* upload button color */
  border-color: #fff; /* button border color */
  border-radius: 4px; /* button rounded corner */
  border: 2px solid; /* button border */
  text-transform: uppercase; /* button text in ALL CAPS */
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #000; /* button on hover text color */
  background-color: #fff; /* button on hover color */
  border-color: #b4b3b3; /* button on hover border color */
}

.navbar-fixed-top .btn-upload {
  padding: 3px 14px; /* top bar button spacing */
  height: 30px; /* top bar button height */
}

/* Disabled button: */
.btn-primary:disabled {
  color: #b4b3b3 !important; /* button text color */
  background-color: #666 !important; /* button color */
  border-radius: 4px !important; /* button rounded corner */
  border: 2px solid #7a7a7a !important; /* button border */
  text-transform: uppercase !important; /* button text in ALL CAPS */
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  color: #b4b3b3 !important; /* button text color */
  background-color: #666 !important; /* button color */
  border-radius: 4px !important; /* button rounded corner */
  border: 2px solid #7a7a7a !important; /* button border */
  text-transform: uppercase !important; /* button text in ALL CAPS */
}

/* Archive box styles */
.media-set-elem {
  margin: 14px; /* box margin */
  background: #184179 !important; /* box color */
}
.media-set-elem-in .title {
  background-color: rgba(0, 0, 0, 0.7); /* title field background */
  color: #999; /* title color */
  font-size: 16px; /* title size */
  padding: 14px 16px; /* title field padding */
  text-transform: uppercase; /* title in ALL CAPS */
}
.media-set-elem-in {
  background-size: 350px 200px;
  height: 200px; /* box height */
  width: 350px; /* width */
}

#footer {
  overflow: visible;
}

#pageContentTitle::after {
  content: "AGNSW DAMS 2025.";
  display: block;
  margin-top: 10px; /* Adjust as needed */
  margin-bottom: 10px; /* Adjust as needed */
  font-size: 16px; /* Adjust as needed */
  color: white; /* Adjust as needed */
}
/*Hide default description*/
/*.js-metadata[data-id="120"] {*/
/*    display:none;*/
/*}*/

/*Make embed field look like pre*/
.metadata-field[data-id="808"] .inputFieldView {
  display: block;
  padding: 10px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #333;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: 'Preston-Regular', "Courier New", monospace; /* Using Preston-Regular with monospace fallback */
  white-space: pre-wrap; /* Preserve whitespace and line breaks */
  overflow-x: auto; /* Enable horizontal scrolling for long lines */
  cursor: text; /* Change cursor to indicate text selection */
  user-select: text; /* Ensure text is selectable */
}


/*

Flip sidebar tags and descriptions as test

*/
/*
#headerCaptionWrapper > div {
    display: flex;
    flex-direction: column;
}


#headerCaptionWrapper > div > .js-metadata[data-label="Description"] {
    order: 3;
}

#headerCaptionWrapper > .metadataRegion__field__label {
    order: 1;
}

#headerCaptionWrapper > div > .js-metadata[data-label="Keywords"] {
    order: 2;
}*/

/*.preview-markers-container .marker::after {
  content: attr(title);
  margin-left: 8px;
  font-size: 14px;
  color: inherit;
}*/

.sidebarBox .js-metadata[data-id="120"] .textAreaView {
  max-height: 200px; /* Adjust as needed */
  overflow-y: auto;
  position: relative; /* Necessary for absolute positioning */
}

/*
 * ImageGallery - Custom CSS Override
 *
 * This CSS file transforms the ImageGallery (Fotoware)
 * to match the design aesthetic of the ImageGallery.
 *
 * June 2025
 */

/* ====================================
   1. CORE VARIABLES
   ==================================== */
:root {
  /* ImageGallery Brand Colors */
  --ImageGallery-red: #e61e2a;
  --ImageGallery-blue: #0a279c;
  --ImageGallery-dark-blue: #000033;
  --ImageGallery-black: #000000;
  --ImageGallery-white: #ffffff;

  /* UI Colors */
  --ImageGallery-light-blue: #eef5ff;
  --ImageGallery-gray-100: #f8f9fa;
  --ImageGallery-gray-200: #e9ecef;
  --ImageGallery-gray-300: #dee2e6;
  --ImageGallery-gray-400: #ced4da;
  --ImageGallery-gray-500: #adb5bd;
  --ImageGallery-gray-600: #6c757d;
  --ImageGallery-gray-700: #495057;
  --ImageGallery-gray-800: #343a40;
  --ImageGallery-gray-900: #212529;

  --ImageGallery-dark-gray: #333333;
  --ImageGallery-interface-gray: #bfbfbf;
}

/* ====================================
   1. ADMIN PAGE INCLUSION
   ==================================== */

/* Custom styles now apply to all pages, including admin pages */
/* No exclusions based on body classes */

/* ====================================
   3. HEADER STYLING
   ==================================== */

/* Main header */
#header,
.navbar-custom,
.navbar-custom-fixed-top {
  background-color: var(--ImageGallery-black) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  border-bottom: none !important;
}


.clear-icon{
 color: var(--ImageGallery-black) !important;
}


/* Header inner */
.navbar-inner {
  display: flex !important;
  align-items: center !important;
  background-color: transparent !important;
  width: 100%;
}

#navbarContainer {
  width: 100%;
}



/* "ARCHIVES", "ALBUMS", "PINS" links */
#header a[href*="archives"],
#header a[href*="albums"],
#header a[href*="pins"] {
  color: var(--ImageGallery-white) !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

/* Icons in navigation */
#header .fa,
#header .fas,
#header .icon-itself {
  /*color: var(--ImageGallery-white) !important;*/
  margin-right: 6px !important;
}

.navbar-custom-fixed-top .btn-upload {
  height: auto;
  line-height: normal;
  padding: 6px 12px;
}

#navbarSearchForm {
  position: relative;
}

/*
#searchHomePage {
  background-color: var(--ImageGallery-white) !important;
  background-image: none !important;
}
*/

.home-page-search {
  height: auto !important;
  padding-bottom: 2rem;
}

.content-title {
  background-color: transparent !important;
}

/* Set a max width for the container and center it */
.collections-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Default to 4 columns */
  grid-auto-rows: 1fr; /* Automatically adjust row heights */
  gap: 16px; /* Add spacing between items */
  justify-content: center; /* Center the grid horizontally */
  max-width: 1200px; /* Set a maximum width for the container */
  margin: 0 auto; /* Center the container horizontally */
  /* padding: 0 16px; Add padding for smaller screens */
}

/* Default size for all items */
.collections-list-item {
  aspect-ratio: 4 / 3; /* Maintain a 4:3 aspect ratio */
  box-sizing: border-box; /* Ensure padding and border are included in the width */
  margin: 0; /* Remove default margin */
  overflow: hidden;
}

/* Make the "Featured Learning Objects" item span two columns and two rows */
.collections-list-item:first-child {
  grid-column: span 2; /* Span 2 columns */
  grid-row: span 2; /* Span 2 rows */
  position: relative; /* Ensure the banner is positioned relative to the item */
  overflow: visible;
}

/* Make the 2nd and 3rd items span 2 columns but keep 1 row height */
.collections-list-item:nth-child(2),
.collections-list-item:nth-child(3) {
  grid-column: span 2; /* Span 2 columns */
  grid-row: span 1; /* Keep the height as 1 row */
  aspect-ratio: 8/2.88;
}

/* First item: Collection Assets */
.collections-list-item:nth-child(1)::before {
  content: "Collection Assets";
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--ImageGallery-red); /* Solid RMIT red */
  color: var(--ImageGallery-white);
  font-size: 14px; /* Slightly larger font */
  font-weight: bold;
  padding: 8px 12px; /* Larger padding for a square look */
  border-radius: 4px; /* Slight rounding for a modern look */
  z-index: 10;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Soft drop shadow */
}

/* Second item: Top Picks */
.collections-list-item:nth-child(2)::before {
  content: "Top Picks";
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--ImageGallery-red); /* Solid RMIT red */
  color: var(--ImageGallery-white);
  font-size: 14px; /* Slightly larger font */
  font-weight: bold;
  padding: 8px 12px; /* Larger padding for a square look */
  border-radius: 4px; /* Slight rounding for a modern look */
  z-index: 10;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Soft drop shadow */
}

/* Third item: Exhibitions */
.collections-list-item:nth-child(3)::before {
  content: "Exhibitions";
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--ImageGallery-red); /* Solid RMIT red */
  color: var(--ImageGallery-white);
  font-size: 14px; /* Slightly larger font */
  font-weight: bold;
  padding: 8px 12px; /* Larger padding for a square look */
  border-radius: 4px; /* Slight rounding for a modern look */
  z-index: 10;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Soft drop shadow */
}

/* Ensure images or content inside items scale properly */
.collections-list-item img,
.collections-list-item .content {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure content scales without distortion */
}

.collections-list-item .collections-list-item-in {
  height: 100%; /* Match the height of the parent item */
  width: 100%;
  display: flex; /* Use flexbox for alignment */
  align-items: center; /* Vertically center the text */
  justify-content: center; /* Horizontally center the text */
  text-align: center; /* Ensure text is centered */
  padding: 0 10px; /* Optional: Add padding for spacing */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  box-sizing: border-box; /* Include padding in the height calculation */
}

/* Responsive layout adjustments for layout-specific elements */

/* Adjust .home-page-search for mobile responsiveness */
.home-page-search,
#wrapper {
  min-width: 0; /* Remove hardcoded min-width */
  width: 100%; /* Allow it to scale to the viewport */
}

/* Responsive styles */
@media (max-width: 1024px) {
  .collections-list {
    grid-template-columns: repeat(3, 1fr); /* 3 columns for medium screens */
  }

  /* Make the 2nd and 3rd items span 2 columns but keep 1 row height */
  .collections-list-item:nth-child(2),
  .collections-list-item:nth-child(3) {
    grid-column: span 1; /* Span 2 columns */
    grid-row: span 1; /* Keep the height as 1 row */
    aspect-ratio: 4 / 3;
  }
}

@media screen and (max-width: 934px) {
  .home-page-search .navbar-search {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .collections-list {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for small screens */
  }
}

/* Add responsive styles for smaller screens */
@media (max-width: 480px) {
  .collections-list {
    grid-template-columns: 1fr; /* 1 column for very small screens */
  }

  .container {
    padding: 0 8px; /* Add padding for smaller screens */
  }

  .home-page-search {
    margin: 0 auto; /* Center the search bar */
  }
}