/*
 * The referral link on the My Account screen.
 *
 * This file is deliberately tiny, and what it does NOT contain matters more than what it
 * does.
 *
 * The panel is built out of WooCommerce's own account form markup -- a real <form>, the
 * woocommerce-form-row / input-text class names, a <label> bound by id -- so the theme's
 * existing account rules (wp-content/themes/buscandoamemo/assets/css/woocommerce.css)
 * style it with no help from here:
 *
 *   .logged-in.woocommerce-account .woocommerce-MyAccount-content form input.input-text
 *   .logged-in.woocommerce-account .woocommerce-MyAccount-content form label
 *   .logged-in.woocommerce-account .woocommerce-MyAccount-content form .form-row
 *
 * Restating border-radius, padding or box-shadow here would create a second definition of
 * one visual decision, which is not a duplication but a promise to keep it in step. When the
 * theme is restyled the account fields would follow and this panel would not.
 *
 * So what is left is only what the theme genuinely cannot answer: fitting a button beside a
 * field the theme sizes to 100%, and giving the copy confirmation a line of its own.
 */

/* The field and its button, side by side. */
.bam-ref-referral-field {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

/*
 * The theme's account rule sets width:100%, which is right for every other input on the
 * page and wrong here: at full width the button drops onto the next line. flex-basis auto
 * with min-width:0 lets the field actually shrink inside the flex row instead of forcing
 * it wider, and min-width:0 is what allows a long referral URL to be truncated rather than
 * to push the button off-screen on a narrow viewport.
 */
.bam-ref-referral-field .bam-ref-referral-url {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

/*
 * The copy confirmation.
 *
 * One declaration, and it is the whole mechanism: block, so it takes a line of its own
 * under the field instead of competing with the field and the button for the width they
 * share. An empty span has nothing to lay out, so while it is empty this rule costs the
 * page no height at all.
 *
 * Note what is NOT here. There is no `position`, and the element does not carry the theme's
 * .screen-reader-text. That class declares `position: absolute !important`, which no rule
 * from this plugin can override, so a populated message was drawn across the referral field
 * itself rather than below it. Reinstating the clip in order to undo the position would
 * have been the same mistake twice over.
 *
 * The announcement does not depend on any of this: role="status" and aria-live="polite" on
 * the element are what reach a screen reader, and they work identically whether or not the
 * message is visible.
 */
.bam-ref-copy-status {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--wc-green);
}

.bam-ref-copy {
	flex: 0 0 auto;
	white-space: nowrap;
}

/*
 * The tab strip.
 *
 * role="tablist" sits on a div holding two anchors, so there is no list to reset and the
 * only thing the strip needs is to lay the two tabs out in a row. Colours and borders come
 * from the theme's own tokens; a colour literal here would fork the palette.
 */
.bam-ref-tablist {
	display: flex;
	gap: 8px;
}

/*
 * Which tab you are on.
 *
 * This rule exists because the browser check found the ARIA to be right and the page still
 * saying nothing. Measured on the rendered account screen, the selected and the unselected
 * tab resolved to the same colour, the same font-weight and a transparent background:
 * aria-selected told the screen reader, and told a pair of eyes nothing at all.
 *
 * So the plugin names exactly one thing here -- the current tab -- and leaves the unselected
 * one alone, still wearing whatever the theme styles an account link with. Restating the
 * inactive colour would fork the palette for no gain: the accent is what has to be named,
 * and the theme already answers the rest.
 *
 * Weight is asserted in the test suite alongside the colour on purpose. Colour alone would
 * be the whole signal, and the whole signal would vanish for anyone on a monochrome or
 * high-contrast theme that renders both tabs the same hue. 700 against the inherited 400 is
 * the difference that does not depend on seeing hue at all.
 *
 * --orange-ink rather than --memo-orange, and that is not a preference. The tab is body-copy
 * sized text: --memo-orange on white measures 2.30:1, which fails WCAG AA for normal text by
 * a wide margin, and no amount of weight repairs that. --orange-ink is the same accent at
 * 6.12:1 -- the theme ships it precisely because the saturated orange is not a text colour on
 * a light background.
 *
 * Neither token's value is written down here, and that is deliberate in the same way the rest
 * of this file carries no colour at all: a value spelled out in a comment is one edit away
 * from becoming a rule, and the assertion above greps the comments too.
 */
.bam-ref-tablist [role="tab"][aria-selected="true"] {
	color: var(--orange-ink);
	font-weight: 700;
}

/*
 * The account menu item wears the theme's icon, not one of its own.
 *
 * The theme draws a fixed box for every item in that menu and masks it with
 * var(--bam-account-icon, none), then sets that property once per built-in endpoint. The
 * fallback is not a blank shape: with mask:none there is nothing masking the box, so the
 * currentColor behind it is painted as-is and the item renders as a solid square in the
 * link's own colour. An endpoint nobody drew an icon for gets that square.
 *
 * So the property is filled here, through the slot the theme defines, and the artwork is the
 * theme's own family -- the same viewBox, stroke weight and caps as the seven beside it, so
 * this one does not read as a different set of icons dropped into the middle of the menu.
 * Nothing else about the item is restyled here: the box, the size and the colour stay the
 * theme's decision.
 */
.logged-in.woocommerce-account .woocommerce-MyAccount-navigation-link--bam-ref a {
	--bam-account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 1 29 29' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='9.5' r='3.4'/%3E%3Cpath d='M4.5 25.5c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3Ccircle cx='20.5' cy='11' r='2.6'/%3E%3Cpath d='M15.5 25.5c0-2.4 2-4.4 4.5-4.4s4.5 2 4.5 4.4'/%3E%3C/svg%3E");
}