/* properties that may need customizing */

.details { font-weight:bold; margin-block-end:0; }
.field--name-field-date-s, .field--name-field-length, .field--name-field-course-location, .field--name-field-time-s { margin-block-end:1rem; }

a.orange-button { background-color:#F09B5B; border-radius:5px; color:#000; padding:8px 12px; text-decoration:none; display:inline-block; text-align:center; }
a.orange-button:hover { background-color:#D86433; }

.webform-submission-request-consultation-form .js-form-item, .fieldset-wrapper { margin-block-end:1rem; }
.webform-submission-request-consultation-form .js-webform-checkboxes .js-form-item { margin-bottom:0; }
legend { margin-bottom:.5rem; }
.webform-element-description, .description { font-style:italic; }
.checkboxes--wrapper legend, .webform-entity-checkboxes--wrapper legend { margin:1rem 0; font-weight:bold; font-size:1.3rem; }
#webform-entity-checkboxes--wrapper { margin-block-end:2rem; }
.webform-button--submit { margin-block-start:1rem; }

ul.plain li { margin-block-end:.5rem; }

ul.sf-menu .sf-sub-indicator { right: 0.5rem!important; }

table { width:100%; }

blockquote{
  font-size: 1.1rem;
  width:80%;
  margin:50px auto;
  font-style:italic;
  color: #555;
  padding:1.2em 30px 1.2em 75px;
  border-left:8px solid #F09B5B ;
  line-height:1.6;
  position: relative;
  background:#EDEDED;
}

blockquote::before{
  font-family:Arial;
  content: "\201C";
  color:#F09B5B;
  font-size:5rem;
  position: absolute;
  left: 10px;
  top:-10px;
}

blockquote::after{
  content: '';
}

.highlight { background-color:#F09B5B; border-radius:10px; padding:1rem 1rem 1px; }

.field--name-field-regular-body-field { display:flex; flex-direction:row; gap:4rem; margin-block-start:4rem; flex-wrap:wrap; }
.field--name-field-regular-body-field .field__item { flex:1 1 40%; }
.field--name-field-regular-body-field .field__item img { height:100px!important; width:auto; margin:0 auto; display:block; }
.field--name-field-icon { height:135px; }
@media screen and (max-width:650px) {
    .field--name-field-regular-body-field  { flex-direction:column; }
}

.hero-paragraph { height:400px; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; margin-block-start:-1rem; }
@media screen and (max-width:651px) {
    .hero-paragraph { height:260px; }
}
.hero-paragraph .container { width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }
@media screen and (max-width:651px) {
    .hero-paragraph .container { padding-top:20px; }
}
.hero-paragraph .hero-content { width:50%; bottom:60px; background-color:rgba(0,0,0,.7); color:#fff; border-radius:0 5px 5px 0; }
@media screen and (max-width:651px) {
    .hero-paragraph .hero-content { width:90%; bottom:auto; margin:0 auto; padding:10px; }
}
.hero-paragraph .hero-content h1 { color:#fff; }
.hero-paragraph .hero-content p { font-size:1.2rem; }
@media screen and (max-width:651px) {
    .hero-paragraph .hero-content p { font-size:.9rem; }
}
.home-list ul { padding-left:0; list-style:none; }
.home-boxes { display:flex; flex-direction:row; gap:2rem; margin-block-end:2rem; }
@media screen and (max-width:651px){
    .home-boxes { flex-direction:column; }
}
.field--name-field-upcoming-classes { flex:3; }
.field--name-field-paragraphs2 { flex:2; }
.field--name-field-safety-tips { flex:3; text-align:center; padding-top: 100px;
  background-image: url(https://safetyworksmaine.gov/sites/safetyworksmaine.gov/files/2025-09/noun-safety-1930823-D86433.svg); background-size: 85px; background-repeat: no-repeat; background-position: center top; }
.field--name-field-safety-tips .more-link a { background-color:#F09B5B; border-radius:5px; color:#000; padding:8px 12px; text-decoration:none; display:inline-block; text-align:center; }
.field--name-field-safety-tips .more-link a:hover { background-color:#D86433; }
.home-boxes .field--name-field-icon { height:100px!important; }
.home-boxes img { width:100px; display: block; margin: 0 auto;}

/* News Card on the homepage */
.card-group { display:flex; column-gap:4rem; flex-wrap:wrap; padding:0; }
@media screen and (max-width:800px) {
    .card-group { gap:1rem; }
}
.card-group div { flex:1; }
@media screen and (max-width:800px) {
    .card-group div { flex:auto; }
}
.card-group .more-link { flex-basis:100%; text-align:right; font-style:italic; margin-block-start:1rem; }
.card-group img { display:block; width:100%; height:auto; }
.card-group .card { flex:1; border:1px solid #ccc; }
.card-group .card { text-align:left; }
.card-group .card p, .card-group .card h3 { margin-inline:10px; }
.card-group .card p { margin-block:10px 5px; font-size:.8rem; }
.card-group .card h3 { margin-block:0 10px; }
.card-group .card a { text-decoration:none; }

/* Linked Card Styles
 * These styles work in conjunction with card.js to create interactive card components
 * that are fully clickable and show focus states.
 */
.card--linked[data-once*='card--linked-init'] {
    a {
      text-decoration: none;
    }
}
  
.card--linked[data-once*='card--linked-init']:hover {
    cursor: pointer;
    box-shadow: -14px 17px 43px rgb(69 75 105 / 25%);
  
    a {
      text-decoration: underline;
    }
}

/* Card Link Styles
 * Makes links appear as h2 headings while maintaining accessibility
 */
.card--linked[data-once*='card--linked-init'] {
    a {
      display: block;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: bold;
      color: var(--darkblue);
    }
}

/* Preserve hover and focus styles but update for new heading-like appearance */
.card--linked[data-once*='card--linked-init']:hover {
    cursor: pointer;
    box-shadow: 0 0 25px rgb(69 75 105 / 50%);
  
    a {
      text-decoration: underline;
    }
}
  
.card--linked[data-once*='card--linked-init'].is-focused {
    border: 1px dashed black;
  
    a {
      outline: 0;
      text-decoration: underline;
    }
}


.mini-card {
    border-top:none;
}
.node-id-51 .field--name-field-linked-image-card {
    gap:1rem;
}
.node-id-51 .card--linked[data-once*='card--linked-init'] {
    a {
      font-size: 1rem;
    }
}
@media only screen and (max-width:1000px) {
    .node-id-51 .field--name-field-linked-image-card {
        flex-wrap:wrap;
    }
    .field--name-field-linked-image-card > .field__item {
    flex:0 1 46%;
}
    .paragraph--type--linked-image-cards img {
        width:100%; 
        max-width:none;
    }
}
.node-id-68 ul li ul {
    margin-bottom:0!important;
}

#views-exposed-form-vide-block-1, #views-exposed-form-scheduled-classes-block-1 { display:flex; gap:1rem; align-items:end; }
#views-exposed-form-vide-block-1 label, #views-exposed-form-scheduled-classes-block-1 label { display:block; font-weight:bold; }
@media screen and (max-width:890px) {
    #views-exposed-form-vide-block-1 { flex-direction:column; align-items:center; }
}

form {
  accent-color: var(--color-sf-main);
}

/* Scope styles to the Register for Scheduled Classes webform */

form.webform-submission-register-for-scheduled-classes-form legend .fieldset-legend {
  font-size: 1.3rem;
  font-weight: bold;
  margin-block: 1rem;
  display: block;
}

form.webform-submission-register-for-scheduled-classes-form #edit-classes {
  display: table;
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 1rem;
}

/* Header row */
form.webform-submission-register-for-scheduled-classes-form .webform-class-header {
  display: table-row;
  font-weight: bold;
  background: #f8f8f8;
}

form.webform-submission-register-for-scheduled-classes-form .webform-class-header span {
  display: table-cell;
  padding: 0.75rem;
  border-bottom: 2px solid #333;
  text-align: left;
}

/* Course rows */
form.webform-submission-register-for-scheduled-classes-form #edit-classes .js-form-type-checkbox {
  display: table-row;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Hover state */
form.webform-submission-register-for-scheduled-classes-form 
  #edit-classes .js-form-type-checkbox:hover {
  background: #f0f8ff;
  border-color: var(--color-sf-main)
}

/* Checkbox cell */
form.webform-submission-register-for-scheduled-classes-form 
  #edit-classes .js-form-type-checkbox input[type="checkbox"] {
  display: table-cell;
  padding: 0.75rem;
}

/* Label cell */
form.webform-submission-register-for-scheduled-classes-form 
  #edit-classes .js-form-type-checkbox label.option {
  display: table-cell;
  padding: 0.75rem;
  cursor: pointer;
}

/* Inside the label: course name, date/time, location */
form.webform-submission-register-for-scheduled-classes-form 
  #edit-classes .js-form-type-checkbox label.option .views-field {
  display: inline-block;
  margin-right: 2rem;
}

/* Course name */
form.webform-submission-register-for-scheduled-classes-form 
  #edit-classes .views-field-title {
  /*min-width: 220px;*/
  font-weight: 600;
}

/* Date/Time */
form.webform-submission-register-for-scheduled-classes-form 
  #edit-classes .views-field-field-date-s {
  /*min-width: 240px;*/
  color: #555;
}

/* Location */
form.webform-submission-register-for-scheduled-classes-form 
  #edit-classes .views-field-field-course-location {
  /*min-width: 180px;*/
  color: #333;
}

/* Zebra striping for readability */
form.webform-submission-register-for-scheduled-classes-form 
  #edit-classes .js-form-type-checkbox:nth-child(even) {
  background: #fafafa;
}

/* News page */
ul.news-list { list-style:none; padding:0; }
ul.news-list li { padding:1rem; border-bottom:1px solid #ccc; }
ul.news-list li .views-field-field-date-posted { font-weight:bold; color:#cd4e27; margin-inline-end:10px; }

#block-safetyworks-content img { max-width:100%; height:auto; }

@media only screen and (max-width: 670px) {
  header img {
    height: 65px;
  }
}