/*
Theme Name: IFAS Mercury Child
Theme URI: https://branding.ifas.ufl.edu/
Template: ufl-main-uni
Author: UF/IFAS
Author URI: https://branding.ifas.ufl.edu/
Description: A UF/IFAS Branded WordPress Theme.
Tags: featured-images,threaded-comments,translation-ready
Version: 1.0.2
Updated: 2024-06-11

*/
@import '../ufl-main-uni/style.css';
/* @import url('fontawesome/webfonts/fa-solid-900.woff2'); invalid. loads via solid.css */
@import url('fontawesome/css/fontawesome.min.css');
@import url('fontawesome/css/solid.min.css');
@import url('fontawesome/css/brands.min.css');


:root {
  --core-orange: #FA4616;
  --core-blue: #0021A5;

  --bottlebrush: #D32737;
  --alachua: #F2A900;
  --gator: #22884C;
  --dark-blue: #002657;
  --perennial: #6A2A60;

  --white: #fff;
  --cool-gray-11: #343741;
  --cool-gray-3: #C7C9C8;
  --warm-grey-1: #D8D4D7;
  --black: #000;

  --social-media-icons-background: #3350a5;
  --social-media-icons-background-hover: #ffffff;
  --social-media-icons-hover: #0021a5;
  --header-gradient-1: #0021a5;
  --header-gradient-2: #011877;
  --header-gradient-3: #00d4ff;
}

.breadcrumb .breadcrumb-item:first-child a {
  text-decoration: none;
}


/* 
.breadcrumb .breadcrumb-item:first-child a::before {
    font-family: Font Awesome 6 Solid;
    content: '\f4d8';
} */

.bg-grey {
  background-color: #D8D4D7;
}

/*Event Page Styling*/

.event-item {
  padding: 20px;
  transition: transform 0.3s, box-shadow 0.3s;
  font-size: clamp(1rem, 0.6875rem + 1vw, 1.25rem);
  background-color: var(--cool-gray-3);
}


.event-item:hover {
  box-shadow: 10px 10px var(--core-orange);
  transform: translate(-5px, -5px);
}

/* Coordinator Page Styling */

.coordinator-frame {
  padding: 20px;
  margin: 1rem;
  transition: transform 0.3s, box-shadow 0.3s;
}

.coordinator-frame:hover {
  box-shadow: 10px, 10px var(--core-orange) !important;
  transform: translate(-5px, -5px);
}

/* Fix gray text in Copyright section */
.widget_block.widget_text p {
color: white;
}

/* Override default WP block styling - no "break-word" */
.wp-block-column {
  flex-grow: 1;
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

/* Feedback Container */
.mf_feedback-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
/* override when “vertical” is present */
/* vertical mode: switch to a 2-column grid */
.mf_feedback-widget.vertical {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "title title"
    "positive negative";
  justify-content: center;
  align-items: center;
  row-gap: 10px;       /* space between question and buttons */
  column-gap: 10px;    /* space between the two buttons */
}

/* Title text */
.mf_feedback-title {
  display: inline-block;
  vertical-align: middle;
  font-size: 1.2em;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* horizontal title alignment */
.mf_feedback-title.horizontal {
  display: inline-flex;
  align-items: center;
  margin: 0 10px 0 0;
  align-self: center;
}

/* question spans both columns, centered */
.mf_feedback-widget.vertical .mf_feedback-title {
  grid-area: title;
  width: 100%;
  text-align: center;
  font-size: 1.2em;
  line-height: 1.5;
}

/* button positioning in the grid */
.mf_feedback-widget.vertical .mf_feedback-button.positive {
  grid-area: positive;
}
.mf_feedback-widget.vertical .mf_feedback-button.negative {
  grid-area: negative;
}

/* Buttons common styles */
.mf_feedback-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
  padding: 6px 16px;
  text-decoration: none;
  font-size: 1.2em;
  border: 2px solid #ccc;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  line-height: 1.5;
}
.amf_feedback-button {
  display: inline-block;
  margin: 0 10px;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 1.2em;
  border: 2px solid #ccc;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  line-height: 1.5;
}
/* Focus effect */
.mf_feedback-button:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Hover effect */
.mf_feedback-button.positive:hover {
  background-color: rgba(34, 136, 76, 0.2);
  /* Hover effect for positive button */
}

.mf_feedback-button.negative:hover {
  background-color: rgba(211, 39, 55, 0.2);
  /* Hover effect for negative button */
}

/* Optional: different colors for positive and negative */
.mf_feedback-button.positive {
  color: var(--gator);
  border-color: var(--gator);
}

.mf_feedback-button.negative {
  color: var(--bottlebrush);
  border-color: var(--bottlebrush);
}