/*
Theme Name: Oaknut RP
Theme URI: https://richardprice.tel/
Author: Richard Price
Description: Child of the Oaknut block theme. Restyles Oaknut's own blocks (cover, image, buttons, social links) into a calm light linktree with pink and blue accents and Helvetica Neue. You manage the photo, links and icons in the Site Editor exactly as Oaknut intends; this child only changes how they look.
Author URI: https://richardprice.tel/
Template: oaknut
Version: 1.1.2
Requires at least: 6.2
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oaknut-rp
*/

/*
  IMPORTANT: the "Template:" line above must exactly match the folder name of the
  Oaknut parent theme (it is "oaknut"). If your Oaknut folder is named differently,
  change that one word or the child theme will not activate.

  Colours, the font and base sizing are set in theme.json. This file handles the
  things theme.json cannot: gradient ring, card hover, the gradient button style,
  and the soft background glow. Everything is scoped to the linktree Cover block
  so the rest of your Oaknut site is untouched.
*/

/* ---- Soft background glow (the Cover sits transparent over the page colour) ---- */
.wp-block-cover.is-style-oaknut-space-between,
.wp-block-cover.rp-linktree {
	background-image:
		radial-gradient(600px 380px at 50% -10%, color-mix(in srgb, var(--wp--preset--color--blue) 10%, transparent), transparent 60%),
		radial-gradient(520px 360px at 85% 6%, color-mix(in srgb, var(--wp--preset--color--pink) 8%, transparent), transparent 55%);
}

/* ---- Avatar: gradient ring around the header image ---- */
.wp-block-cover .wp-block-image {
	background: linear-gradient(100deg, var(--wp--preset--color--blue), var(--wp--preset--color--pink));
	padding: 3px;
	border-radius: 50%;
}
.wp-block-cover .wp-block-image img {
	border-radius: 50% !important;
	display: block;
	background: var(--wp--preset--color--background);
}

/* ---- Link buttons styled as clean cards (scoped to the linktree Cover) ---- */
.wp-block-cover .wp-block-buttons .wp-block-button .wp-block-button__link {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--foreground);
	border: 1px solid #E7E9EE;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	font-weight: 500;
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.wp-block-cover .wp-block-buttons .wp-block-button .wp-block-button__link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(var(--wp--preset--color--blue), var(--wp--preset--color--pink));
	opacity: 0;
	transition: opacity .15s ease;
}
.wp-block-cover .wp-block-buttons .wp-block-button .wp-block-button__link:hover {
	transform: translateX(2px);
	border-color: #D4D8E0;
	box-shadow: 0 4px 14px rgba(16, 24, 40, .07);
}
.wp-block-cover .wp-block-buttons .wp-block-button .wp-block-button__link:hover::before {
	opacity: 1;
}

/* ---- Gradient button style (apply to your main "Discuss a project" button) ---- */
.wp-block-cover .wp-block-button.is-style-rp-gradient .wp-block-button__link {
	background: linear-gradient(100deg, var(--wp--preset--color--blue), var(--wp--preset--color--pink));
	color: #fff;
	border: none;
	box-shadow: 0 6px 20px color-mix(in srgb, var(--wp--preset--color--blue) 22%, transparent);
}
.wp-block-cover .wp-block-button.is-style-rp-gradient .wp-block-button__link::before {
	display: none;
}
.wp-block-cover .wp-block-button.is-style-rp-gradient .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 26px color-mix(in srgb, var(--wp--preset--color--blue) 30%, transparent);
}

/* ---- Availability line with a blue dot ---- */
.rp-availability::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--blue);
	margin-right: 7px;
	vertical-align: middle;
}

/* ---- "Projects and work" section label ---- */
.rp-label {
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-cover .wp-block-button .wp-block-button__link {
		transition: none;
	}
}


/* ---- Sub line under a label in a button ---- */
.wp-block-cover .wp-block-button .wp-block-button__link .rp-sub {
	display: block;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.3;
	opacity: .75;
	margin-top: 3px;
}

/* =====================================================================
   STATIC PAGES (e.g. Contact)
   ---------------------------------------------------------------------
   The block above scopes the linktree look to .wp-block-cover, which is
   why normal pages got none of it. This section reuses the same look on
   any page that renders through page.html, scoped to .rp-page so the
   rest of the Oaknut site is still left alone, same philosophy as above.
   ===================================================================== */

/* Soft background glow to match the homepage Cover */
.rp-page {
	position: relative;
	background-image:
		radial-gradient(700px 420px at 50% -2%, color-mix(in srgb, var(--wp--preset--color--blue) 10%, transparent), transparent 60%),
		radial-gradient(600px 400px at 85% 3%, color-mix(in srgb, var(--wp--preset--color--pink) 8%, transparent), transparent 55%);
	padding-top: var(--wp--preset--spacing--80, 4rem);
	padding-bottom: var(--wp--preset--spacing--50, 2.5rem);
}

/* Avatar: same gradient ring, if the page uses a rounded image */
.rp-page .wp-block-image.is-style-rounded {
	background: linear-gradient(100deg, var(--wp--preset--color--blue), var(--wp--preset--color--pink));
	padding: 3px;
	border-radius: 50%;
	display: inline-block;
}
.rp-page .wp-block-image.is-style-rounded img {
	border-radius: 50% !important;
	display: block;
	background: var(--wp--preset--color--background);
}

/* Link buttons as cards, matching the homepage (for any wp:button on a page) */
.rp-page .wp-block-buttons .wp-block-button .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--foreground);
	border: 1px solid #E7E9EE;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	font-weight: 500;
}

/* ---- FORM (Gutena Forms): legible labels + brand-matched fields ----
   Gutena Forms ships its own stylesheet, so the brand-critical
   properties below use !important to win over it. A stylesheet
   !important also beats any colour set inline through the Gutena block
   editor, which is what makes the white-label bug fixable from here.
   Everything stays inside .rp-page, so only pages are affected. */

/* Sensible dark default for any text the plugin renders inside the form,
   in case a label is output as something other than a real <label>. */
.rp-page form,
.rp-page .wp-block-gutena-forms {
	color: var(--wp--preset--color--foreground);
}

/* The reported bug: labels rendering near-white. Forced dark. */
.rp-page label,
.rp-page legend,
.rp-page .wp-block-gutena-forms label {
	color: var(--wp--preset--color--foreground) !important;
	font-weight: 500;
}

/* Fields styled as cards to match the homepage buttons */
.rp-page input[type="text"],
.rp-page input[type="email"],
.rp-page input[type="url"],
.rp-page input[type="tel"],
.rp-page input[type="number"],
.rp-page input[type="search"],
.rp-page select,
.rp-page textarea {
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--foreground) !important;
	border: 1px solid #E7E9EE !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	padding: .75rem 1rem;
}
.rp-page input::placeholder,
.rp-page textarea::placeholder {
	color: var(--wp--preset--color--muted) !important;
	opacity: 1;
}
.rp-page input:focus,
.rp-page select:focus,
.rp-page textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--blue) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--blue) 18%, transparent) !important;
}

/* Submit button: the homepage gradient. Covers a Gutena <button> (with
   or without an explicit type), a plain submit input, and a core Button
   block carrying the Gradient (RP) style. */
.rp-page form button,
.rp-page button[type="submit"],
.rp-page input[type="submit"],
.rp-page .wp-block-button.is-style-rp-gradient .wp-block-button__link {
	background: linear-gradient(100deg, var(--wp--preset--color--blue), var(--wp--preset--color--pink)) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 12px !important;
	padding: .85rem 1.5rem;
	font-weight: 500;
	box-shadow: 0 6px 20px color-mix(in srgb, var(--wp--preset--color--blue) 22%, transparent);
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}
.rp-page form button:hover,
.rp-page button[type="submit"]:hover,
.rp-page input[type="submit"]:hover,
.rp-page .wp-block-button.is-style-rp-gradient .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 26px color-mix(in srgb, var(--wp--preset--color--blue) 30%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.rp-page form button,
	.rp-page button[type="submit"],
	.rp-page input[type="submit"] {
		transition: none;
	}
}

/* ---- Gutena field labels ----
   Gutena outputs each field label as <h2 class="heading-input-label-gutena">,
   NOT a <label>, and the editor had set them to White (has-white-color, which
   WordPress prints with !important). That is why the earlier label rule never
   reached them. The selectors below carry higher specificity than
   .has-white-color, so the dark brand colour wins. */
.rp-page .heading-input-label-gutena,
.rp-page h2.heading-input-label-gutena.has-white-color {
	color: var(--wp--preset--color--foreground) !important;
}