/* Umbraco Block Grid Layout customizations */
.umb-block-grid__area-container {
  --umb-block-grid--areas-column-gap: 2rem;
  --umb-block-grid--areas-row-gap: 1.5rem;
}

:root {
  --sticky-header-height: 170px;
}

[id] {
  scroll-margin-top: var(--sticky-header-height);
}

a {
  text-decoration: inherit;
}

@media (min-width: 768px) {
  .md\:bg-west-coast {
    --tw-bg-opacity: 1;
    background-color: rgb(0 48 80 / var(--tw-bg-opacity, 1));
  }
}
.border-l-tile {
  --tw-border-opacity: 1;
  border-left-color: #785bf7;
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}

/* Our custom styles */
body {
  background-color: rgb(251, 251, 251);
}

footer {
  background-color: #222222;
  padding-left: 5rem;
  padding-left: 3rem;
  padding-right: 3rem;
  font-size: 0.9rem;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - 300px),
    calc(100% - 180px) 100%,
    0% 100%
  );
}

footer h2,
footer h3 {
  color: white;
}

footer a,
footer a:visited {
  color: #fff;
  text-decoration: none;
}

footer a:hover,
footer a:focus {
  text-decoration: underline;
}

nav a:hover {
  text-decoration: underline;
}

.breadcrumbs {
}
.breadcrumb-item {
}
.breadcrumb-item a {
  text-decoration: none;
}
.breadcrumb-item a:hover {
  text-decoration: underline;
}
.breadcrumb-separator {
  color: #999;
}

p.intro {
  font-size: 1.6rem;
  line-height: 2.2rem;
  margin-bottom: 1.5rem;
  color: #4e4e4e;
}

.search-form {
  margin-bottom: 20px;
  border: 0px solid #661985;
  padding: 0px;
}
.search-form label {
  font-size: 0.8rem;
  text-transform: uppercase;
}
.search-form input[type="text"] {
  padding: 5px;
  font-size: 1rem;
  width: 80%;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.search-form input[type="submit"] {
  padding: 5px 15px;
  font-size: 1.1rem;
  background-color: #661985;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.search-results p {
  margin-bottom: 20px;
}

/* Chalmers styles */
img.cut-off {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - 80px),
    calc(100% - 50px) 100%,
    0% 100%
  );
}

/* Umbraco Forms */
/* Note that these styles are needed now because only one form theme is loaded at a time, */
/* and we always have the Feedback form on every page. Even Feedback form relies on these selectors. */

.umbraco-forms-page {
  border: 1px solid #ddd;
  background-color: #f0ede6;
  padding: 15px;
}
.umbraco-forms-field > label,
.umbraco-forms-field > legend {
  font-weight: bold;
}
.umbraco-forms-field .umbraco-forms-tooltip {
  font-weight: normal;
}
.umbraco-forms-page input[type="text"],
.umbraco-forms-page input[type="email"],
.umbraco-forms-page input[type="phone"] {
  padding: 5px;
  font-size: 1rem;
  background-color: #ffffff;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 0px;
  margin-bottom: 2px;
}
.umbraco-forms-page textarea {
  padding: 5px;
  background-color: #ffffff;
  font-size: 1rem;
  width: 100%;
  height: 150px;
  border: 1px solid #ccc;
  border-radius: 0px;
  margin-bottom: 2px;
}
.umbraco-forms-page input[type="submit"] {
  margin-top: 16px;
  padding: 10px 20px;
  font-size: 1.1rem;
  font-weight: bold;
  background-color: #ed7122;
  color: #222222;
  border: none;
  cursor: pointer;
}
/* TrustSig readiness gate: while the bot-detection token is still being fetched, the
   submit button is held disabled and gets the .trustsig-checking class (toggled by
   FieldType.TrustSig.cshtml). Dim it so it visibly reads as "not ready yet". */
.umbraco-forms-page input[type="submit"].trustsig-checking,
.umbraco-forms-page button[type="submit"].trustsig-checking,
.umbraco-forms-page button.trustsig-checking {
  opacity: 0.5;
  filter: grayscale(70%);
  cursor: not-allowed;
}
.umbraco-forms-caption {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
}
.umbraco-forms-hidden {
  display: none;
}

.umbraco-forms-submitmessage-html {
  background-color: #f0ede6;
  font-size: 1.6rem;
  padding: 20px;
  border-radius: 4px;
  color: #222222;
}

/* When a label/legend is hidden, append the mandatory indicator after the tooltip text */
.umbraco-forms-field.mandatory
  .umbraco-forms-label.umbraco-forms-hidden
  ~ .umbraco-forms-tooltip::after,
.umbraco-forms-field.mandatory
  .umbraco-forms-legend.umbraco-forms-hidden
  ~ .umbraco-forms-tooltip::after {
  content: " *";
  color: #dc2626;
}

.umbraco-forms-legend .umbraco-forms-indicator,
.umbraco-forms-label .umbraco-forms-indicator {
  color: #dc2626 !important;
}

.umbraco-forms-field {
  margin-bottom: 16px;
}

/* Make video iframes responsive */
.umb-embed-holder iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  overflow: hidden;
  height: auto;
}

/* Rich text tables — override Tailwind Preflight reset */
article table,
div table,
section table,
main table,
[class*="content"] table,
[class*="text"] table,
[class*="rich"] table {
  border-collapse: collapse !important;
  border: 1px solid #f0ede6 !important;
  width: 100% !important;
  margin-bottom: 1.5rem !important;
  font-size: 0.95rem !important;
  display: block !important;
  overflow-x: auto !important;
}

article table th,
div table th,
section table th,
main table th,
[class*="content"] table th,
[class*="text"] table th,
[class*="rich"] table th,
article table tr:first-child td,
div table tr:first-child td,
section table tr:first-child td,
main table tr:first-child td,
[class*="content"] table tr:first-child td,
[class*="text"] table tr:first-child td,
[class*="rich"] table tr:first-child td {
  background-color: #f3f0ff !important;
  text-align: left !important;
  padding: 0.6rem 0.8rem !important;
  border-top: 1px solid #f3f0ff !important;
  border-bottom: 1px solid #f3f0ff !important;
  border-left: none !important;
  border-right: none !important;
  color: #222 !important;
}

article table td,
div table td,
section table td,
main table td,
[class*="content"] table td,
[class*="text"] table td,
[class*="rich"] table td {
  padding: 0.6rem 0.8rem !important;
  border-top: 1px solid #f0ede6 !important;
  border-bottom: 1px solid #f0ede6 !important;
  border-left: none !important;
  border-right: none !important;
  vertical-align: top !important;
  color: #333 !important;
}

table.open-hours-table {
  display: table !important;
  overflow-x: visible !important;
  border: none !important;
}

table.open-hours-table tr:first-child td {
  background-color: transparent !important;
}