/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
    --alpha: #060606;
    --bravo: #283239;
    --charlie: #7A8289;
    --delta: #E52429;
    --echo: #FFF;
}
body.bricks-is-frontend :focus {
    outline: none;
}
.main-btn {
    background-color: var(--delta);
    color: #fff;
    padding: .8rem 3rem;
    border-radius: .3rem;
}
header nav {
    width: max-content;
}
.header-acc-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 2rem;
    width: 2rem;
    font-size: 1.4rem;
    font-weight: 600;
    margin-left: 1rem;
    background: rgb(255, 0, 0);
    border-radius: 5rem;
}

.mac-dots {
    display: flex;
    gap: 0.8rem;
}

.mac-dots .dot {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
}

.dot.red {
    background-color: #ff5f56;
}
.dot.yellow {
    background-color: #ffbd2e;
}
.dot.green {
    background-color: #27c93f;
}

.nerd,
.pro-tip,
.info,
.warning,
.note,
.important,
.mistake,
.remember {
    position: relative;
    background-color: var(--surface-container-low);
    border-radius: 1.6rem;
    padding: 3.2rem;
    border-left-width: 4px;
    border-left-style: solid;
    margin-top: 1.6rem;
    color: #e2e8f0;
    font-size: 1.6rem;
    line-height: 1.7;
	margin-block-start: 2em !important;
    margin-block-end: 2em !important;
	font-style: italic;
	font-size: clamp(1.6rem, 0.357vw + 1.486rem, 2rem);
}

/* Common icon box styling */
.nerd::before,
.pro-tip::before,
.info::before,
.warning::before,
.note::before,
.important::before,
.mistake::before,
.remember::before {
    content: "";
    position: absolute;
    top: -2.4rem;
    right: -1.6rem;
    width: 6rem;
    height: 6rem;
    background-color: var(--background-dark);
    border-radius: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-glass);
    transform: rotate(-6deg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2.4rem 2.4rem;
}

/* Color and icon variants */
.nerd {
    border-left-color: var(--nerd-container);
}
.nerd::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23f59e0b'%3E%3Cpath d='M262-320q-61 0-93-16.5T110-398q-15-25-25.5-59.5T65-520q-11 0-18-7t-7-18v-49q0-9 6-15.5t15-8.5q56-11 101.5-16t87.5-5q61 0 110.5 10t77.5 29h85q24-18 76-28.5T711-639q42 0 87 5t101 16q9 2 15 8.5t6 15.5v49q0 11-7 18t-18 7q-9 28-19.5 62.5T850-398q-26 44-58.5 61T698-320q-63 0-107-27t-61-87q-5-16-8.5-32t-8.5-32q-4-12-12-17.5t-21-5.5q-12 0-20 6t-13 17q-5 16-8.5 32t-8.5 32q-17 60-61 87t-107 27Zm0-58q71 0 97-42t26-108q0-17-12-26.5T326-572q-26-7-63-8.5t-72 3.5q-26 4-38.5 13T140-538q0 27 4.5 52t13.5 46q16 35 37.5 48.5T262-378Zm436 0q45 0 66.5-13.5T801-440q9-21 14-46t5-53q0-17-12.5-26.5T768-578q-35-5-71.5-3t-62.5 9q-35 8-47 17t-12 26q0 66 26 108.5t97 42.5Z'/%3E%3C/svg%3E");
}

.pro-tip {
    border-left-color: var(--primary-container);
}
.pro-tip::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2300f0ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 14c.2-1 .7-1.7 1.5-2.5c1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5c.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4'/%3E%3C/svg%3E");
}

.info {
    border-left-color: var(--secondary-container);
}
.info::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%2316ff9e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4m0-4h.01'/%3E%3C/g%3E%3C/svg%3E");
}

.warning {
    border-left-color: var(--error);
}
.warning::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffb4ab' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01'/%3E%3C/svg%3E");
}

.note {
    border-left-color: var(--note-container);
}
.note::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23d0d9ee' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M21 9a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 15 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2z'/%3E%3Cpath d='M15 3v5a1 1 0 0 0 1 1h5'/%3E%3C/g%3E%3C/svg%3E");
}

.important {
    border-left-color: var(--important-container);
}
.important::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%233b82f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.12 2.12 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.12 2.12 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.12 2.12 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
}

.mistake {
    border-left-color: var(--mistake-container);
}
.mistake::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23f97316' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 16h.01M12 8v4m3.312-10a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z'/%3E%3C/svg%3E");
}

.remember {
    border-left-color: var(--remember-container);
}
.remember::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%238b5cf6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}

/* Style blockquote inside callouts */
.nerd blockquote,
.pro-tip blockquote,
.info blockquote,
.warning blockquote,
.note blockquote,
.important blockquote,
.mistake blockquote,
.remember blockquote {
    border-left: 2px solid var(--border-glass);
    padding-left: 1.6rem;
    margin: 1.6rem 0;
    color: var(--on-surface-variant);
    font-style: italic;
}

/* Style inline code inside callouts */
.nerd code,
.pro-tip code,
.info code,
.warning code,
.note code,
.important code,
.mistake code,
.remember code {
    font-family: "Fira Code", monospace;
    background-color: rgba(0, 240, 255, 0.1);
    color: var(--primary);
    padding: 0.2rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.9em;
}

.wp-block-group.nerd,
.wp-block-group.pro-tip,
.wp-block-group.info,
.wp-block-group.important,
.wp-block-group.remember {
    margin-top: 1.6rem;
}

.wp-block-group.nerd p,
.wp-block-group.pro-tip p,
.wp-block-group.info p,
.wp-block-group.important p,
.wp-block-group.remember p {
    margin-bottom: 1.2rem;
}

.wp-block-group.nerd p:last-child,
.wp-block-group.pro-tip p:last-child,
.wp-block-group.info p:last-child,
.wp-block-group.important p:last-child,
.wp-block-group.remember p:last-child {
    margin-bottom: 0;
}

.wp-block-code {
    position: relative;
    background-color: var(--surface);
    backdrop-filter: blur(2.4rem);
    -webkit-backdrop-filter: blur(2.4rem);
    border: 1px solid var(--border-glass);
    border-radius: 1.6rem;
    padding: 7.2rem 3.2rem 3.2rem 3.2rem;
    margin-top: 3rem;
	margin-bottom: 3rem;
    overflow-x: auto;
    transition: all 0.3s ease;
}

.wp-block-code:hover {
    transform: translateY(-0.4rem);
    border-color: rgba(0, 240, 255, 0.3);
    box-shadow: var(--shadow-glow);
    background-color: var(--surface-hover);
}

.wp-block-code::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4.4rem;
    background-color: rgba(50, 53, 60, 0.4);
    border-bottom: 1px solid var(--border-glass);
    border-radius: 1.6rem 1.6rem 0 0;
		background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='52'%20height='12'%20viewBox='0%200%2052%2012'%3E%3Ccircle%20cx='6'%20cy='6'%20r='6'%20fill='%23FF5F56'/%3E%3Ccircle%20cx='26'%20cy='6'%20r='6'%20fill='%23FFBD2E'/%3E%3Ccircle%20cx='46'%20cy='6'%20r='6'%20fill='%2327C93F'/%3E%3C/svg%3E");
    background-position: 2.4rem center;
    background-size: 5.2rem 1.2rem;
    background-repeat: no-repeat;
}

.wp-block-code::after {
    content: "HERE BE CODE";
    position: absolute;
    color: var(--on-tertiary-container);
    font-size: 1.2rem;
    top: 1.4rem;
    right: 2.4rem;
}

.wp-block-code code {
    font-family: "Fira Code", monospace;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #e2e8f0;
    white-space: pre-wrap;
    display: block;
}

.wp-block-code code.is-numbered {
    counter-reset: line;
    display: block;
}

.wp-block-code code.is-numbered .code-line {
    counter-increment: line;
    display: block;
    padding-left: 4.8rem;
    position: relative;
    white-space: pre;
}

.wp-block-code code.is-numbered .code-line::before {
    color: #2f3545;
    content: counter(line, decimal-leading-zero);
    font-size: 0.95em;
    font-variant-numeric: tabular-nums;
    left: 1.2rem;
    opacity: 0.9;
    position: absolute;
    text-align: right;
    width: 2.2rem;
}

.wp-block-cover {
    position: relative;
    border-radius: 1.6rem;
    overflow: hidden;
    margin: 3.2rem 0;
    border: 1px solid var(--border-glass);
    transition: all 0.3s ease;
    background-color: var(--surface);
}

.wp-block-cover:hover {
    transform: translateY(-0.4rem);
    border-color: rgba(0, 240, 255, 0.3);
    box-shadow: var(--shadow-glow);
}

.wp-block-cover__image-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.wp-block-cover__background {
    background-color: rgba(11, 14, 20, 0.7);
    position: absolute;
    inset: 0;
}

.wp-block-cover__inner-container {
    position: relative;
    z-index: 10;
    padding: 6.4rem 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20rem;
}

.wp-block-cover__inner-container p {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.02em;
}

/* WordPress Image Block */
.wp-block-image {
    margin: 3.2rem 0;
    transition: all 0.3s ease;
}

.wp-block-image.size-large {
    max-width: 80rem;
    width: 100%;
}

.wp-block-image img {
    width: 100%;
    height: auto;
    border-radius: 1.6rem;
    border: 1px solid var(--border-glass);
    transition: all 0.3s ease;
}

.wp-block-image:hover {
    transform: translateY(-0.4rem);
}

.wp-block-image:hover img {
    border-color: rgba(0, 240, 255, 0.3);
    box-shadow: var(--shadow-glow);
}

/* Image Caption */
.wp-element-caption {
    font-size: 1.2rem;
    color: var(--muted);
    text-align: center;
    margin-top: 1.2rem;
    font-style: italic;
    line-height: 1.5;
}