/*
Theme Name: Topp-Jensen
Theme URI: https://topp-jensen.dk
Author: Familien Topp-Jensen
Description: Lyst, roligt blok-tema til familien Topp-Jensens hjemmeside med Odense-illustration. Farver, skrifter og layout kan ændres under Udseende → Editor.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: topp-jensen
*/

/* Kort-stil til grupper (vælg "Kort" under Stilarter i editoren) */
.wp-block-group.is-style-tj-kort {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	transition: border-color .15s;
}
.wp-block-group.is-style-tj-kort:hover { border-color: var(--wp--preset--color--accent); }
.wp-block-group.is-style-tj-kort a { text-decoration: none; }
.wp-block-group.is-style-tj-kort a::after { content: ""; position: absolute; inset: 0; }
.wp-block-group.is-style-tj-kort { position: relative; }

/* Afrundet hero-billede */
.wp-block-image.is-style-tj-hero img { border-radius: 16px; width: 100%; height: auto; }

/* Navigation som "piller" */
.tj-header .wp-block-navigation-item__content { padding: 6px 12px; border-radius: 999px; color: var(--wp--preset--color--muted); }
.tj-header .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
.tj-header .current-menu-item > .wp-block-navigation-item__content,
.tj-header .wp-block-navigation-item__content[aria-current="page"] { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-ink); }

/* Lille overskrift over titel */
.is-style-tj-kicker { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }

/* Billedgalleri: ens beskæring */
.wp-block-gallery.has-nested-images figure.wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }

/* Kontaktformular (plugin) */
.tj-form { display: grid; gap: 16px; max-width: 560px; }
.tj-form label { display: grid; gap: 6px; font-weight: 600; }
.tj-form .opt { font-weight: 400; color: var(--wp--preset--color--muted); }
.tj-form input[type=text], .tj-form input[type=email], .tj-form textarea {
	font: inherit; color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line); border-radius: 8px; padding: 10px 12px; width: 100%; box-sizing: border-box;
}
.tj-form input:focus, .tj-form textarea:focus { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 1px; }
.tj-form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--wp--preset--color--muted); font-size: .95rem; }
.tj-form .check input { margin-top: 5px; }
.tj-form button { justify-self: start; font: inherit; font-weight: 600; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-ink); border: 0; border-radius: 8px; padding: 10px 20px; cursor: pointer; }
.tj-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tj-notice { border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; max-width: 560px; }
.tj-notice ul { margin: 0; padding-left: 18px; }
.tj-notice.ok { background: #e3f1e6; color: #1f2a28; }
.tj-notice.err { background: #f8e3e1; color: #1f2a28; }

/* Runde portrætter (stilen "Afrundet" på billeder) */
.wp-block-image.is-style-rounded img { border-radius: 9999px !important; }

/* Galleri: billeder vokser ikke ud over kolonnebredden */
.wp-block-gallery.has-nested-images figure.wp-block-image { flex-grow: 0 !important; }