/**
 * Campaign Block – Stylesheet
 *
 * Applies to both the block editor (via editor_style) and the front end (via style).
 *
 * Layout overview
 * ───────────────
 * #campaign_container  : max-width 1130 px, width 100% (fluid). min-height 500 px.
 *                        Uses CSS position to allow the image to sit behind
 *                        .campaign-box-description without using background-image.
 *
 * .campaign-image-wrapper : absolutely positioned, z-index 1.
 *                           Fixed size: 700 × 500 px. Does NOT resize.
 *
 * .campaign-image         : 700 × 500 px. Fixed. Does NOT resize.
 *
 * #boxDescription         : 590 px wide (fixed), min 360 px tall, green background,
 *                           white text, margin-top: 70 px, z-index 2.
 *                           As the container narrows below 1130 px the box slides
 *                           toward the left edge of the container while keeping its
 *                           fixed dimensions. It never resizes until mobile breakpoint.
 *
 * Alignment variants (> 460 px)
 * ─────────────────────────────
 * .campaign-image-left   : image pinned to left  → boxDescription aligned to right.
 *                          When container shrinks, box slides left (margin-right: 0,
 *                          margin-left: auto collapses).
 * .campaign-image-right  : image pinned to right → boxDescription aligned to left.
 *                          When container shrinks, box stays left (margin-left: 0).
 *
 * Shrink behaviour (461 px – 1130 px)
 * ─────────────────────────────────────
 * The container becomes narrower than 1130 px naturally (width: 100%).
 * The image stays absolutely positioned at its fixed size (may overflow / clip).
 * boxDescription keeps its fixed 590 px width and slides toward the left because
 * margin-left collapses first (auto → 0) while margin-right stays 0.
 *
 * Mobile (≤ 460 px)
 * ─────────────────
 * Image and description revert to normal flow, stack vertically, image 100 % wide.
 *
 * Accessibility
 * ─────────────
 * Focus outlines are preserved. High-contrast colour pairs meet WCAG AA.
 *
 * @package CampaignBlock
 */

/* =========================================================================
   CSS Custom Properties
   ========================================================================= */
:root {
	--campaign-container-max-w  : 1130px;  /* Maximum container width (fluid below) */
	--campaign-container-min-h  : 500px;

	--campaign-image-width      : 700px;
	--campaign-image-height     : 500px;

	--campaign-box-width        : 590px;
	--campaign-box-min-h        : 360px;
	--campaign-box-margin-top   : 70px;
	--campaign-box-padding      : 32px 36px;
	--campaign-box-bg           : #2d7a4f;   /* Accessible green */
	--campaign-box-color        : #ffffff;

	--campaign-title-font-size  : 1.5rem;
	--campaign-title-font-weight: 700;
	--campaign-desc-font-size   : 1rem;
	--campaign-desc-line-height : 1.6;

	--campaign-image-z          : 1;   /* Image layer  */
	--campaign-box-z            : 2;   /* Description above image */
}

/* =========================================================================
   Container  (#campaign_container)
   =========================================================================
   width: 100%        → fluid, adapts to its parent column.
   max-width: 1130px  → never exceeds 1130 px.
   overflow: hidden   → clips the fixed-size image when container is narrower.
   ========================================================================= */

.campaign-container {
	position   : relative;
	width      : 100%;
	max-width  : var( --campaign-container-max-w );
	min-height : var( --campaign-container-min-h );
	overflow   : hidden;
	box-sizing : border-box;

	/* Centre the block within its parent column */
	margin-left  : auto;
	margin-right : auto;
}

div.campaign-container.dark {
    background-color: #0C2629;
}

/* =========================================================================
   Image wrapper & image
   =========================================================================
   Absolutely positioned so the image floats behind the description box.
   The image is NOT a background-image; it is a real <img> element.
   Its fixed dimensions never change between 461 px and 1130 px.
   When the container is narrower than 700 px the image overflows and is
   clipped by the container's overflow: hidden.
   ========================================================================= */
.campaign-image-wrapper {
	position : absolute;
	top      : 0;
	z-index  : var( --campaign-image-z );
	width    : var( --campaign-image-width );
	height   : var( --campaign-image-height );
	border-radius: 5px;
}

/* Left-aligned variant: image pinned to the left edge */
.campaign-image-left .campaign-image-wrapper {
	left  : 0;
	right : auto;
}

/* Right-aligned variant: image pinned to the right edge */
.campaign-image-right .campaign-image-wrapper {
	right : 0;
	left  : auto;
}

.campaign-image {
	display    : block;
	width      : var( --campaign-image-width );
	height     : var( --campaign-image-height );
	object-fit : cover;
	max-width  : none;   /* Prevent theme resets from capping the image width */
	/*
	 * outline is set via inline style (computed from boxBgColor at 30 % opacity).
	 * We declare outline here only to prevent theme resets (e.g. img { outline: 0 })
	 * from wiping the inline value. The actual color and width come from JS / PHP.
	 */
	border-radius: 5px;
}

/* =========================================================================
   Description box  (#boxDescription / .campaign-box-description)
   =========================================================================
   position: relative  → sits above the absolutely-placed image (z-index 2).
   width: 590 px       → fixed, never resizes between 461 px and 1130 px.
   margin auto logic   → as the container shrinks, margin-left collapses first
                         (auto becomes 0), pushing the box toward the left edge.
   ========================================================================= */
#boxDescription,
.campaign-box-description {
	position   : relative;
	z-index    : var( --campaign-box-z );

	width      : var( --campaign-box-width );
	margin-top : var( --campaign-box-margin-top );
	padding    : var( --campaign-box-padding );
	box-sizing : border-box;

	background-color : var( --campaign-box-bg );
	color            : var( --campaign-box-color );
	height:fit-content;
}

/* ─── Image LEFT → description pushed to the right ───────────────────────
   At full width (1130 px): margin-left: auto fills the gap and the box
   sits on the right side, overlapping the right portion of the image.
   As the container narrows: margin-left reduces (auto collapses),
   the box slides progressively toward the left.
   margin-right: 0 ensures the box hugs the right edge of available space
   and only the left margin absorbs the shrinkage.
   ─────────────────────────────────────────────────────────────────────── */
.campaign-image-left #boxDescription,
.campaign-image-left .campaign-box-description {
	margin-left  : auto;
	margin-right : 0;
}

/* ─── Image RIGHT → description stays on the left ────────────────────────
   margin-left: 0 keeps the box anchored to the left edge at all widths.
   As the container narrows the box stays at the left, and the image
   (pinned to the right) scrolls out of view under overflow: hidden.
   ─────────────────────────────────────────────────────────────────────── */
.campaign-image-right #boxDescription,
.campaign-image-right .campaign-box-description {
	margin-left  : 0;
	margin-right : auto;
}

/* =========================================================================
   Typography inside the description box
   =========================================================================
   The !important overrides are intentional: Gutenberg's editor stylesheet
   injects margin-block-start / margin-block-end on heading elements and
   wraps RichText fields in extra divs that also carry default margins.
   Without these resets, a large gap appears above the title in the editor.
   Resets are scoped tightly to .campaign-box-description so they never
   affect other blocks or the surrounding theme.
   ========================================================================= */

/* Neutralise the top margin on any direct child wrapper Gutenberg adds
   around a RichText (the div.rich-text or the placeholder wrapper)       */
.campaign-box-description > *:first-child {
	margin-top         : 0 !important;
	margin-block-start : 0 !important;
	padding-top        : 0 !important;
}

.campaign-title,
h2.campaign-title {
	margin             : 0 0 16px !important;
	margin-block-start : 0 !important;
	margin-block-end   : 16px !important;
	padding-top        : 0 !important;
	font-size          : var( --campaign-title-font-size );
	font-weight        : var( --campaign-title-font-weight );
	color              : var( --campaign-box-color );
	line-height        : 1.25;
}

.campaign-description {
	margin             : 0;
	margin-block-start : 0 !important;
	padding-top        : 0 !important;
	font-size          : var( --campaign-desc-font-size );
	line-height        : var( --campaign-desc-line-height );
	color              : var( --campaign-box-color );
	margin-bottom:46px!important;
}

/* =========================================================================
   Mobile layout  (viewport width ≤ 460 px)
   =========================================================================
   Both elements revert to normal document flow and stack vertically.
   The image takes 100 % of the container width.
   boxDescription is displayed below the image, also full-width.
   ========================================================================= */
@media screen and ( max-width: 460px ) {

	/* Container: full-width, no fixed height, content visible */
	#campaign_container,
	.campaign-container {
		width      : 100%;
		max-width  : none;
		min-height : 0;
		overflow   : visible;
	}

	/* Image wrapper: back in normal flow, no absolute positioning */
	.campaign-image-wrapper {
		position : relative;
		top      : auto;
		left     : auto;
		right    : auto;
		width    : 100%;
		height   : auto;
	}

	/* Image: full container width, height scales proportionally */
	.campaign-image {
		width      : 100%;
		height     : auto;
		max-width  : 100%;
		object-fit : cover;
	}

	/* Description box: full width, stacked below the image */
	#boxDescription,
	.campaign-box-description {
		width      : 100%;
		min-height : 0;
		margin-top : 0;
		margin-left : 0;
		margin-right: 0;
	}

	/* Override alignment margins so both variants behave identically */
	.campaign-image-left  #boxDescription,
	.campaign-image-right #boxDescription,
	.campaign-image-left  .campaign-box-description,
	.campaign-image-right .campaign-box-description {
		margin-left  : 0;
		margin-right : 0;
	}

	#global-campaign-container .dark{
		display:block; /* in dark mode, the display:flex generate visual bug on mobile version*/
	}

	.campaign-description {
		margin-bottom:15px!important;
	}

}

/* =========================================================================
   Accessibility – focus visible
   ========================================================================= */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {

}

/* =========================================================================
   Editor-only styles
   (scoped with .campaign-editor-preview so they don't leak to the front end)
   ========================================================================= */

/* Image placeholder shown when no image has been selected yet */
.campaign-image-placeholder {
	display          : flex;
	align-items      : center;
	justify-content  : center;
	width            : var( --campaign-image-width );
	height           : var( --campaign-image-height );
	background-color : #e8e8e8;
	border           : 2px dashed #b0b0b0;
	color            : #606060;
	font-size        : 0.875rem;
}

/* Inspector panel – character counter */
.campaign-char-count {
	font-size  : 0.75rem;
	color      : #606060;
	margin-top : 4px;
}

/* Character counter in warning state (limit reached) */
.campaign-char-count--limit {
	color      : #cc1818;
	font-weight: 600;
}

/*
 * Inline character counters – displayed inside the green boxDescription
 * in the editor canvas, below each RichText field.
 * display:block ensures they sit on their own line.
 * They are editor-only (not output in the server-side render).
 */
.campaign-char-count--inline {
	display      : block;
	font-size    : 0.7rem;
	/*
	 * Color is now driven by inline style set in block.js (hexToRgba of the
	 * chosen text color at 70% opacity). The CSS value below is only a
	 * fallback in case JS has not yet run or the style attribute is absent.
	 */
	color        : rgba( 255, 255, 255, 0.7 );
	margin-top   : 2px;
	margin-bottom: 8px;
	font-style   : italic;
}

.campaign-char-count--inline.campaign-char-count--limit {
	/*
	 * When the limit is reached the inline style from JS is still present,
	 * but we override with a bright warning tone via !important so it is
	 * always clearly visible regardless of the chosen palette color.
	 */
	color      : #ff6b6b !important;
	font-weight: 600;
	font-style : normal;
}

/* Media panel – image thumbnail preview */
.campaign-image-thumb-wrapper {
	margin-top     : 12px;
	display        : flex;
	flex-direction : column;
	gap            : 8px;
}

.campaign-image-thumb {
	width      : 100%;
	height     : auto;
	display    : block;
	border     : 1px solid #ddd;
	border-radius: 3px;
}

/* Media upload button */
.campaign-media-button {
	width      : 100%;
	text-align : center;
	margin-top : 4px;
}

/* Remove image link */
.campaign-remove-image {
	font-size : 0.8rem;
}

/* =========================================================================
   Color palette – Appearance panel
   ========================================================================= */

/* Label above the swatches */
.campaign-palette-label {
	font-size      : 0.75rem;
	font-weight    : 600;
	color          : #1e1e1e;
	margin         : 0 0 8px;
	text-transform : uppercase;
	letter-spacing : 0.04em;
}

/* Swatch grid */
.campaign-palette {
	display               : grid;
	grid-template-columns : repeat( 6, 1fr );
	gap                   : 6px;
	margin-bottom         : 12px;
}

/* Individual swatch button */
.campaign-palette__swatch {
	display      : block;
	width        : 100%;
	aspect-ratio : 1;
	border-radius: 4px;
	border       : 2px solid transparent;
	cursor       : pointer;
	padding      : 0;
	transition   : transform 0.1s ease, border-color 0.1s ease;
	outline      : none;
}

.campaign-palette__swatch:hover {
	transform    : scale( 1.12 );
	border-color : #555;
}

.campaign-palette__swatch:focus-visible {

}

/* Selected state – white ring + dark outer border */
.campaign-palette__swatch.is-selected {
	border-color : #1e1e1e;
	box-shadow   : inset 0 0 0 2px #ffffff;
	transform    : scale( 1.1 );
}

/* Small live preview chip below the swatches */
.campaign-palette-preview {
	padding       : 8px 12px;
	border-radius : 4px;
	font-size     : 0.8rem;
	font-weight   : 600;
	margin-top    : 4px;
	transition    : background-color 0.15s ease, color 0.15s ease;
}

/* =========================================================================
   Image click – hover overlay hint (editor canvas only)
   ========================================================================= */

/* Make the clickable wrapper a positioning context */
.campaign-image-wrapper--clickable {
	cursor : pointer;
}

/* The hint label that fades in on hover */
.campaign-image-edit-hint {
	position         : absolute;
	top              : 50%;
	left             : 50%;
	transform        : translate( -50%, -50% );
	background-color : rgba( 0, 0, 0, 0.55 );
	color            : #ffffff;
	font-size        : 0.85rem;
	font-weight      : 600;
	padding          : 8px 14px;
	border-radius    : 4px;
	white-space      : nowrap;
	opacity          : 0;
	transition       : opacity 0.2s ease;
	pointer-events   : none;
}

.campaign-image-wrapper--clickable:hover  .campaign-image-edit-hint,
.campaign-image-wrapper--clickable:focus  .campaign-image-edit-hint {
	opacity : 1;
}

/* Subtle tint overlay on hover */
.campaign-image-wrapper--clickable::after {
	content          : '';
	position         : absolute;
	inset            : 0;
	background-color : rgba( 0, 0, 0, 0 );
	transition       : background-color 0.2s ease;
	pointer-events   : none;
}

.campaign-image-wrapper--clickable:hover::after {
	background-color : rgba( 0, 0, 0, 0.18 );
}

/* =========================================================================
   Editor-only – button placeholder and inspector preview
   ========================================================================= */

/* Placeholder shown in the canvas when no button is configured yet */
.campaign-button-placeholder {
	display          : inline-block;
	margin-top       : 16px;
	padding          : 8px 16px;
	border           : 2px dashed rgba( 255, 255, 255, 0.5 );
	border-radius    : 4px;
	font-size        : 0.8rem;
	color            : rgba( 255, 255, 255, 0.7 );
	cursor           : pointer;
	transition       : border-color 0.15s ease, color 0.15s ease;
}

.campaign-button-placeholder:hover {
	border-color : rgba( 255, 255, 255, 0.9 );
	color        : #ffffff;
}

/* Button preview in the editor canvas */
a.campaign-button-preview {
	pointer-events : auto;  /* allow click to open panel */
}

/* Preview area inside the Inspector Button panel */
.campaign-button-inspector-preview {
	margin-top : 12px;
}

/* =========================================================================
   Inspector – Toggle button groups (Open in / Button style)
   ========================================================================= */

.campaign-toggle-group-wrap {
	margin-bottom : 16px;
}

.campaign-toggle-group-label {
	font-size      : 0.75rem;
	font-weight    : 600;
	color          : #1e1e1e;
	margin         : 0 0 8px;
	text-transform : uppercase;
	letter-spacing : 0.04em;
}

.campaign-toggle-group {
	display   : flex;
	flex-wrap : wrap;
	gap       : 6px;
}

.campaign-toggle-btn {
	flex            : 1 1 auto;
	padding         : 7px 12px;
	font-size       : 0.8rem;
	font-weight     : 500;
	border          : 1.5px solid #949494;
	border-radius   : 4px;
	background      : #ffffff;
	color           : #3c3c3c;
	cursor          : pointer;
	text-align      : center;
	transition      : background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
	white-space     : nowrap;
}

.campaign-toggle-btn:hover {
	border-color : #1e1e1e;
	color        : #1e1e1e;
}

.campaign-toggle-btn.is-active {
	background   : #1e1e1e;
	color        : #ffffff;
	border-color : #1e1e1e;
	font-weight  : 600;
}

.campaign-toggle-btn:focus-visible {

}

/* START STYLE FOR AUCTOCOMPLETION IN RIGHT PANEL */
.block-editor-link-control{
	min-width:unset!important;
	/*width:100%!important;*/
	margin-left: 0px !important;
	margin-top:0px;
}

.block-editor-link-control__search-item-action ~ .block-editor-link-control__search-input-wrapper,
.block-editor-link-control__search-popover,
.block-editor-link-control__search-input {
	min-width: unset !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0px !important;
	margin-top:0px;
}

.block-editor-link-control__search-input-wrapper {
	min-width: unset !important;
	width: 100% !important;
	margin-left: 0px !important;
	margin-top:0px;
}

.block-editor-link-control__search-input-container{
	margin-left: 0px !important;
	margin-top:0px
}

div.block-editor-link-control__search-input-wrapper.has-actions > div > div{
  margin-left:0px;
   margin-top:0px;
}
/* END STYLE FOR AUCTOCOMPLETION IN RIGHT PANEL */

#boxDescription {
    border-radius:5px;
    padding:30px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
	display:block!important;
}

#global-campaign-container{
	padding:30px;
}

.campaign-container{
	overflow:visible;            /* needed for shadow on the image */ 
	border:1px solid #ffffff; /* needed for shadow on the image */ 
}

h2.campaign-title{
    font-family: "BNPP Sans Condensed";
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: 60px; /* 93.75% */
    padding:0px;
}

p.campaign-description{
    font-family: "BNPP Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    margin:16px 0px 0px 0px;
    padding:0px;
}

#boxDescription a {
 
   padding: 10px 24px 10px 24px!important;
    
    height: 40px;
    padding: 10px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius:3px;
    text-align: center;
    font-family: "BNPP Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.5px;
}

@media only screen and (max-width: 466px){
    .campaign-image-wrapper{
		box-shadow: none!important;
	}

    #global-campaign-container{
        padding:14px 26px 14px 26px;
    }

    .campaign-image{
        border-radius:5px 5px 0px 0px;
		border-bottom:0;
    }

    #boxDescription{
        border-radius: 0px 0px 5px 5px;
        padding:33px;
		box-shadow: none!important;
    }

    h2.campaign-title{
        font-family: "BNPP Sans Condensed";
        font-size: 30px;
        font-style: normal;
        font-weight: 400;
        line-height: 36px; /* 120% */
    }

    p.campaign-description{
        font-family: "BNPP Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; 
        margin-bottom:30px;
    }
	#boxDescription{ 
		a {
       		width:100%!important;
		}
	}
}

.borderBlack{
	border-color:#0C2728;
}


.labelWithicon{
	margin-top:5px!important;
}

.darkBackground{
	background: #0C2728;
}

#global-campaign-container  span.button-icon {
	position:relative!important;
	display: inline-block;
	top:-2px;
	--iconSizeCampaign: 15px!important;
	width: var(--iconSizeCampaign);
	background-color: currentColor;
	height: 2.3px;
	border-radius: 50px;
	transition: 300ms;

	&::before,
	&::after {
		content: "";
		position: absolute;
		width: calc(var(--iconSizeCampaign) / 1.4);
		height: 3px;
		background: currentColor;
		border-radius: 50px;
		transform-origin: right;
	}

}
/****/