/**
 * Easyrankly — Frontend Multilingual Styles
 *
 * Minimal-modern defaults. Uses :where() for zero-specificity selectors so
 * theme styles always win without !important. CSS custom properties let
 * users override colours, radius, and spacing without touching this file.
 *
 * BEM class reference:
 *  .erml-switcher          — [easyrankly_language_switcher] wrapper <form>
 *  .erml-switcher__label   — screen-reader label
 *  .erml-switcher__select  — <select> element
 *  .erml-switcher__option  — each <option>
 *
 *  .erml-notice            — [easyrankly_translation_notice] <div> wrapper
 *  .erml-notice__close     — dismiss × button
 *  .erml-notice__title     — configurable heading tag
 *  .erml-notice__text      — configurable paragraph tag
 *  .erml-notice__link      — link to the translated article
 *
 * Handle: easyrankly-multilingual-frontend
 *
 * @package Easyrankly
 */

/* =========================================================================
   Custom properties — override in your theme to restyle.
   ========================================================================= */

:where(.erml-switcher),
:where(.erml-notice) {
	--erml-font-family:     inherit;
	--erml-font-size:       0.875rem;
	--erml-color-text:      #1d2327;
	--erml-color-bg:        #ffffff;
	--erml-color-border:    #dcdcde;
	--erml-color-accent:    #b91c1c;
	--erml-color-close:     #646970;
	--erml-color-close-hover: #1d2327;
	--erml-border-radius:   6px;
	--erml-shadow:          0 1px 4px rgba(0, 0, 0, 0.10);
	--erml-padding-x:       1.25rem;
	--erml-padding-y:       1rem;
	--erml-gap:             0.5rem;
}

/* =========================================================================
   Language Switcher — [easyrankly_language_switcher]
   ========================================================================= */

:where(.erml-switcher) {
	display: inline-block;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	font-family: var(--erml-font-family);
	font-size:   var(--erml-font-size);
}

/* WP screen-reader-text pattern */
:where(.erml-switcher__label) {
	position:   absolute;
	width:      1px;
	height:     1px;
	margin:    -1px;
	padding:    0;
	overflow:   hidden;
	clip:       rect(0, 0, 0, 0);
	white-space: nowrap;
	border:     0;
}

:where(.erml-switcher__select) {
	display:          block;
	padding:          0.4em 2em 0.4em 0.75em;
	font-family:      inherit;
	font-size:        inherit;
	color:            var(--erml-color-text);
	background-color: var(--erml-color-bg);
	border:           1px solid var(--erml-color-border);
	border-radius:    var(--erml-border-radius);
	box-shadow:       var(--erml-shadow);
	appearance:       auto;
	cursor:           pointer;
	max-width:        100%;
}

:where(.erml-switcher__select:focus-visible) {
	outline:        2px solid var(--erml-color-accent);
	outline-offset: 2px;
}

/* =========================================================================
   Translation Notice — [easyrankly_translation_notice]
   ========================================================================= */

:where(.erml-notice) {
	position:         relative;
	display:          flex;
	flex-direction:   column;
	gap:              var(--erml-gap);
	padding:          var(--erml-padding-y) var(--erml-padding-x);
	background-color: var(--erml-color-bg);
	border:           1px solid var(--erml-color-border);
	border-radius:    var(--erml-border-radius);
	box-shadow:       var(--erml-shadow);
	font-family:      var(--erml-font-family);
	font-size:        var(--erml-font-size);
	color:            var(--erml-color-text);
	max-width:        420px;
}

/* Keep the [hidden] card (and its empty children) out of the layout entirely. */
:where(.erml-notice[hidden]),
:where(.erml-notice__title[hidden]),
:where(.erml-notice__text[hidden]),
:where(.erml-notice__link[hidden]) {
	display: none;
}

:where(.erml-notice__title) {
	margin:        0;
	padding-right: 1.5rem; /* room for the absolutely-positioned close button */
	font-size:     inherit;
	font-weight:   600;
	line-height:   1.4;
	color:         var(--erml-color-text);
}

:where(.erml-notice__close) {
	position:         absolute;
	top:              var(--erml-padding-y);
	right:            var(--erml-padding-x);
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	width:            1.5rem;
	height:           1.5rem;
	padding:          0;
	background:       none;
	border:           none;
	border-radius:    3px;
	color:            var(--erml-color-close);
	font-size:        1.125rem;
	line-height:      1;
	cursor:           pointer;
	transition:       color 0.15s ease, background-color 0.15s ease;
	/* Restore pointer events even if a parent suppresses them. */
	pointer-events:   auto;
}

:where(.erml-notice__close:hover) {
	color:            var(--erml-color-close-hover);
	background-color: rgba(0, 0, 0, 0.06);
}

:where(.erml-notice__close:focus-visible) {
	outline:        2px solid var(--erml-color-accent);
	outline-offset: 2px;
}

:where(.erml-notice__text) {
	margin:      0;
	line-height: 1.5;
	color:       var(--erml-color-text);
}

:where(.erml-notice__link) {
	display:              inline-block;
	color:                var(--erml-color-accent);
	text-decoration:      underline;
	text-underline-offset: 2px;
	font-weight:          500;
	transition:           opacity 0.15s ease;
}

:where(.erml-notice__link:hover) {
	opacity: 0.8;
}