/* ==========================================================================
   Grid Aware WordPress Frontend Styles
   ========================================================================== */

   :root {
	/* Info Bar Background Colors */
	--info-bar-bg-low: #ECF3DC;
	--info-bar-bg-medium: #DBD6C0;
	--info-bar-bg-high: #D3D3D3;

	/* Toggle Button Active Colors */
	--toggle-active-low: #364D00;    
	--toggle-active-medium: #3D2E13;
	--toggle-active-high: #161616;

	/* Image Placeholder Colors */
	--placeholder-bg: #D2D2D2;   
	--placeholder-border: #e3e3e3;

    --color-white: #fff;
    --color-black: #222;
}

/* ==========================================================================
   Grid Info Bar
   ========================================================================== */

.grid-intensity-info-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--info-bar-bg-low);
	padding: 1.125rem 2rem 1.125rem 1.5rem;
	font-family: inherit;
	font-size: 1rem;
	z-index: 1001;
}

.grid-intensity-medium .grid-intensity-info-bar {
    background-color: var(--info-bar-bg-medium);
}

.grid-intensity-high .grid-intensity-info-bar {
    background-color: var(--info-bar-bg-high);
}

.grid-info-left {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.grid-info-title {
	margin-right: 0.5rem;
}

.grid-info-country {
	padding: 0.125rem 0.5rem;
	font-weight: 700;
}

.grid-info-intensity-label {
	font-weight: 700;
}

.grid-info-carbon {
	padding: 0.125rem 0.5rem;
}

.grid-info-right {
	display: flex;
	align-items: center;
	gap: 1.2rem;
}

/* ==========================================================================
   Toggle Controls
   ========================================================================== */

.grid-intensity-toggle-group {
	display: flex;
	gap: 1.5rem;
	align-items: center;
}

.grid-intensity-toggle {
	position: relative;
	display: flex;
	align-items: center;
	font-family: inherit;
	font-weight: 500;
	cursor: pointer;
	padding: 0.25rem 0.75rem;
	border-radius: 6px;
	transition: background 0.2s, color 0.2s;
	color: inherit;
	user-select: none;
}

.grid-intensity-toggle input[type="checkbox"] {
	display: none;
}

.grid-intensity-toggle span {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

/* Active state */
.grid-intensity-toggle.active:has(input[value="low"]),
.grid-intensity-toggle input[value="low"]:checked + span {
    background: var(--toggle-active-low);
    color: var(--color-white);
}
.grid-intensity-toggle.active:has(input[value="medium"]),
.grid-intensity-toggle input[value="medium"]:checked + span {
    background: var(--toggle-active-medium);
    color: var(--color-white);
}
.grid-intensity-toggle.active:has(input[value="high"]),
.grid-intensity-toggle input[value="high"]:checked + span {
    background: var(--toggle-active-high);
    color: var(--color-white);
}

/* Hover state - apply to label, not span */
.grid-intensity-toggle:has(input[value="low"]:hover),
.grid-intensity-toggle:hover:has(input[value="low"]) {
    background: var(--toggle-active-low);
    color: var(--color-white);
}
.grid-intensity-toggle:has(input[value="medium"]:hover),
.grid-intensity-toggle:hover:has(input[value="medium"]) {
    background: var(--toggle-active-medium);
    color: var(--color-white);
}
.grid-intensity-toggle:has(input[value="high"]:hover),
.grid-intensity-toggle:hover:has(input[value="high"]) {
    background: var(--toggle-active-high);
    color: var(--color-white);
}

/* ==========================================================================
   Image Placeholders
   ========================================================================== */

.grid-aware-image-placeholder {
    background: var(--placeholder-bg);  
    color: var(--color-black);
    border: 20px solid var(--placeholder-border);
    padding: 2.5rem 1.5rem;
    text-align: center;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    box-sizing: border-box;
    width: var(--image-width, 100%);
    aspect-ratio: var(--aspect-ratio, auto);
    max-width: 100%;
    font-family: Helvetica, Arial, sans-serif !important;
}

.placeholder-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.placeholder-icon {
    margin-bottom: 1.125rem;
}

.placeholder-alt {
    font-size: 1.2em;
	font-style: italic;
    text-align: center;
}

.placeholder-description {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.placeholder-load-btn {
    padding: 0.625rem 1.5rem;
    background: #444;
    color: #fff;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    font-size: 1rem;
    font-family: inherit;
    margin-top: 0.5rem;
}

.placeholder-load-btn:hover,
.placeholder-load-btn:focus {
    background: var(--color-black);
}

/* Loaded image state */
.grid-aware-image-loaded {
	cursor: default;
}

.grid-aware-image-loaded:hover {
	background: #f8f9fa;
	border-color: #dee2e6;
	transform: none;
}

/* Medium overlay for hover effects */
.medium-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
    background: rgba(0,0,0,0.65);
    z-index: 2;
    text-align: center;
    pointer-events: none;
    padding: 3.25rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show overlay on hover of the parent container */
.grid-aware-image-blurred:hover .medium-overlay,
.grid-aware-video-thumbnail:hover .medium-overlay {
    opacity: 1;
}

.grid-aware-image-blurred:hover,
.grid-aware-video-thumbnail:hover {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

.grid-aware-image-blurred,
.grid-aware-video-thumbnail {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.medium-overlay .placeholder-alt {
    color: #fff;
    font-size: 1.2rem;
    font-family: Helvetica, Arial, sans-serif;
    font-style: italic;
}

.medium-overlay .placeholder-description {
    color: #fff;
}

.medium-overlay .placeholder-load-btn {
    background: #49432A;
    color: #fff;
    text-transform: uppercase;
    border-radius: 100px;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.7em 2em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border: none;
    margin-top: 0.5em;
    transition: background 0.2s;
    pointer-events: auto;
}

.medium-overlay .placeholder-load-btn:hover,
.medium-overlay .placeholder-load-btn:focus {
    background: var(--color-black);
    outline: none;
}

.grid-intensity-medium .wp-block-image img {
    filter: blur(1px);
}

/* ==========================================================================
   Video Placeholders
   ========================================================================== */

.grid-aware-video-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: var(--placeholder-bg);
    border: 20px solid var(--placeholder-border);
    min-height: 260px;
    padding: 1.875rem;
    box-sizing: border-box;
    aspect-ratio: 16/9 !important;
    font-family: Helvetica, Arial, sans-serif !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.grid-aware-video-placeholder .placeholder-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.grid-aware-video-placeholder .placeholder-title {
    font-weight: 500;
    color: var(--color-black);
    margin-bottom: 0.5rem;
}

.grid-aware-video-placeholder .placeholder-message {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-black);
}

/* Loaded video state */
.grid-aware-video-loaded {
    cursor: default;
}

.grid-aware-video-loaded:hover {
    background: var(--placeholder-bg);
    border-color: var(--placeholder-border);
    transform: none;
}

/* YouTube Thumbnail */
.grid-aware-video-thumbnail {
	view-transition-name: video;
	position: relative;
	background: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 4px;
	overflow: hidden;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	transform-origin: center;
	cursor: pointer;
	display: block;
	width: var(--video-width, 100%);
	aspect-ratio: 16/9;
	box-sizing: border-box;
}

.grid-aware-video-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.grid-aware-video-thumbnail .thumbnail-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.grid-aware-video-thumbnail:hover .thumbnail-overlay {
	opacity: 1;
}

.grid-aware-video-thumbnail .thumbnail-title {
	color: var(--color-white);
	font-weight: 500;
	font-size: 1.2rem;
	text-align: center;
	margin: 0 0 0.5rem 0;
	padding: 0 1rem;
	line-height: 1.3;
}

.grid-aware-video-thumbnail .thumbnail-message {
	color: rgba(255, 255, 255, 0.9);
	font-size: 1rem;
	text-align: center;
	margin: 0;
	padding: 0 1rem;
}

/* Loaded thumbnail state */
.grid-aware-video-thumbnail.grid-aware-video-loaded {
	cursor: default;
}

.grid-aware-video-thumbnail.grid-aware-video-loaded:hover {
	border-color: var(--placeholder-border);
	transform: none;
}

.grid-aware-video-thumbnail .medium-overlay {
    background: rgba(0,0,0,0.8);
}

/* ==========================================================================
   Tooltips
   ========================================================================== */

.info-tooltip {
  display: inline-flex;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  font-size: 1.1em;
  font-family: inherit;
  background: var(--color-black);
  color: var(--color-white);
  border-radius: 50%;
  margin-left: 0.4em;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  text-align: center;
  line-height: 1.2em;
  vertical-align: middle;
  box-sizing: border-box;
}

.info-tooltip::after {
    content: attr(data-tooltip);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: calc(100% + 0.5rem);
    transform: translateX(-50%);
    background: var(--color-black);   
    color: var(--color-white);
    padding: 0.5em 1em;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: pre-line;
    z-index: 1002;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: opacity 0.2s;
    width: 250px;
}

.info-tooltip:focus:after,
.info-tooltip:hover:after {
  opacity: 1;
}