/* BODY TEXT */
body,
p,
li,
button,
input,
textarea,
select,
.main-navigation {
	font-family: 'Nunito Sans', sans-serif !important;
}

/* MAIN HEADINGS */
h1,
.site-title,
.entry-title,
.page-title {
	font-family: 'Griffy', cursive !important;
	font-weight: 400 !important;
}

/* SUBHEADINGS */
h2,
h3,
h4,
h5,
h6,
.site-description {
	font-family: 'Love Ya Like A Sister', cursive !important;
	font-weight: 400 !important;
}

/* GENERAL TEXT */
body,
p,
li,
.widget,
.widget-title {
	color: #B0B0B0;
}

/* MAIN HEADINGS */
h1,
.entry-title,
.page-title {
	color: #E26EFF;
}

/* LINKS */
a {
	color: #E26EFF;
}

a:hover,
a:focus {
	color: #B0B0B0;
}

/* NAVIGATION */
.main-navigation a {
	color: #B0B0B0 !important;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
	color: #E26EFF !important;
}

/* FORM BUTTONS */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: #E26EFF;
	color: #000000;
	border: none;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background-color: #B0B0B0;
	color: #000000;
}

/* HOME INTRO BOX */
.home-intro-box {
	background-color: #E26EFF !important;
	color: #000000 !important;
	padding: 28px 32px !important;
	margin-top: 0 !important;
}

.home-intro-box p {
	color: #000000 !important;
	margin: 0;
}

/* REMOVE EMPTY RIGHT SIDEBAR */
@media screen and (min-width: 1008px) {
	.content-sidebar {
		display: none !important;
	}
	
	.site-content {
		margin-right: 0 !important;
	}
}

/* ORVIS: REMOVE RESERVED SIDEBAR SPACE */
@media screen and (min-width: 768px) {
	body.page #secondary {
		display: none !important;
	}
	
	body.page #primary,
	  body.page .content-area {
		width: 100% !important;
		max-width: none !important;
		float: none !important;
		margin: 0 auto !important;
	}
	
	body.page #main {
		width: 100% !important;
		max-width: none !important;
	}
	
	body.page .entry-header,
	  body.page .entry-content {
		width: calc(100% - 40px) !important;
		max-width: 900px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* WIDEN ALL ORVIS PAGES */
@media screen and (min-width: 768px) {
	body.page #content.site-content {
		width: calc(100% - 40px) !important;
		max-width: 1000px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	
	body.page #primary.content-area,
	    body.page #main.site-main,
	    body.page article.hentry {
		width: 100% !important;
		max-width: none !important;
	}
	
	body.page #main .entry-content,
	    body.page #main .entry-header {
		width: calc(100% - 40px) !important;
		max-width: none !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box;
	}
}



/* DREAMWOVEN DESKTOP SPIDERWEB BACKGROUND */
body {
    background-color: #000000 !important;

    background-image:
        url('https://dreamwovenbycoley.com/wp-content/uploads/2026/10/Web-top-left.png'),
        url('https://dreamwovenbycoley.com/wp-content/uploads/2026/10/Web-top-right.png'),
        url('https://dreamwovenbycoley.com/wp-content/uploads/2026/10/Web-bottom-left.png'),
        url('https://dreamwovenbycoley.com/wp-content/uploads/2026/10/Web-bottom-right.png') !important;

    background-repeat: no-repeat !important;

    background-size:
        600px auto,
        570px auto,
        600px auto,
        630px auto !important;

    background-position:
        left -25px top 0px,
        right top,
        left bottom,
        right bottom !important;

    background-attachment: scroll !important;
}


/* DESKTOP SIDE WEBS - MIDDLE OF PAGE ONLY */

@media screen and (min-width: 1280px) {

    #page.site {
        position: relative;
    }

    #page.site::before {
        content: "";
        display: block;
        position: absolute;

        /* Keep webs away from top and bottom corners */
        top: 400px;
        bottom: 500px;
       left: calc(50% - 50vw);
right: calc(50% - 50vw);

        background-image:
            url('https://dreamwovenbycoley.com/wp-content/uploads/2026/10/Web-left-side.png'),
            url('https://dreamwovenbycoley.com/wp-content/uploads/2026/10/Web-righ-side.png');

       background-repeat: no-repeat space, no-repeat space;

        
background-size:
    auto min(100%, 650px),
    auto min(100%, 650px);


        background-position:
            left top,
            right top;

        pointer-events: none;
        z-index: 3;
    }
}



/* DREAMWOVEN MOBILE SPIDERWEB BACKGROUND */

@media screen and (max-width: 767px) {
    body {
        background-image:
            url('https://dreamwovenbycoley.com/wp-content/uploads/2026/10/Web-top-right.png'),
            url('https://dreamwovenbycoley.com/wp-content/uploads/2026/10/Web-bottom-left.png'),
            url('https://dreamwovenbycoley.com/wp-content/uploads/2026/10/Web-bottom-right.png') !important;

        background-size: 650px auto, 380px auto, 380px auto !important;

background-position: right -10px top 10px, left bottom, right bottom !important;

        background-repeat: no-repeat !important;

        background-attachment:
            scroll,
            scroll,
            scroll !important;
    }
}

/* DREAMWOVEN BUTTONS */
.wp-block-button .wp-block-button__link,
.with_frm_style .frm_submit button,
.with_frm_style .frm_submit input[type="submit"] {
	background: #1effb4 !important;
	color: #000000 !important;
	border: 3px solid #ffeb15 !important;
	border-radius: 50px !important;
	padding: 12px 28px !important;
	font-family: 'Nunito Sans', sans-serif !important;
	box-shadow: 0 3px 5px rgba(0,0,0,0.3) !important;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease !important;
}

/* HOVER: SWITCH TO BUTTON 2 */
.wp-block-button .wp-block-button__link:hover,
.with_frm_style .frm_submit button:hover,
.with_frm_style .frm_submit input[type="submit"]:hover {
	background: #b0b0b0 !important;
	color: #000000 !important;
	border-color: #e26eff !important;
	transform: translateY(-1px);
}

.contact-table,
.contact-table table,
.contact-table tr,
.contact-table td,
.contact-table th {
	border: none !important;
}
/* CONTACT TABLE: FIX DESKTOP WIDTH ONLY */
@media screen and (min-width: 783px) {
	max-width: 100% !important;
	table-layout: auto !important;
}

.contact-table td,
    .contact-table th {
	width: auto !important;
	padding-left: 0 !important;
	padding-right: 15px !important;
}	
}

/* CONTACT TABLE: DESKTOP WIDTH */
@media screen and (min-width: 783px) {
	.wp-block-table.contact-table {
		width: 360px !important;
		max-width: 100% !important;
		margin-left: 0 !important;
	}
	
	.wp-block-table.contact-table table {
		width: 100% !important;
		table-layout: auto !important;
	}
	
	.wp-block-table.contact-table td:first-child {
    width: 85px !important;
}
	}
}
/* DREAMWOVEN SITE TITLE COLOR */
.site-title,
.site-title a,
.site-title a:visited {
    color: #E26EFF !important;
}
/* ALIGN DESIGN SERVICES WITH CONTACT IMAGE */
@media screen and (min-width: 601px) {
    .wp-block-media-text.dreamwoven-services-row > .wp-block-media-text__content {
        padding-left: 0 !important;
    }
}

/* DREAMWOVEN SERVICES: MOBILE LAYOUT */
@media screen and (max-width: 600px) {

    /* Show services before spiderweb */
    .dreamwoven-services-row.is-stacked-on-mobile > .wp-block-media-text__content {
        grid-column: 1;
        grid-row: 1;
    }

    /* Move spiderweb beneath services */
    .dreamwoven-services-row.is-stacked-on-mobile > .wp-block-media-text__media {
        grid-column: 1;
        grid-row: 2;
        width: 75%;
        margin: 20px auto !important;
    }
}

/* DREAMWOVEN CONTACT: MOBILE STACKING ORDER */
@media screen and (max-width: 781px) {
    .dreamwoven-contact-row > .wp-block-column:nth-child(2) {
        order: -1 !important;
    }
}

.dw-shop-hover a img {
    transition: transform 0.25s ease,
                filter 0.25s ease;
}

.dw-shop-hover a:hover img,
.dw-shop-hover a:focus-visible img {
    transform: scale(1.03);
    filter: brightness(1.08)
            drop-shadow(0 0 10px rgba(226, 110, 255, 0.8));
}

/* Remove lines beneath clickable shop images */
.dw-shop-hover a,
.dw-shop-hover a:hover,
.dw-shop-hover a:focus-visible {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* DREAMWOVEN PRODUCT SPECIFICATIONS BOX */
.dw-product-specs {
    width: 100% !important;
    max-width: 650px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* Tighten spacing inside product details box */
.dw-product-specs .wp-block-columns {
    margin-bottom: 0 !important;
}

.dw-product-specs .wp-block-columns + p {
    margin-top: 8px !important;
}

/* DREAMWOVEN PRODUCT LISTING SPACING */

.dw-product-title {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
}

.dw-product-description {
    margin-top: 6px !important;
}

/* CENTER DREAMWOVEN PRODUCT PHOTO DROPDOWN */
.dw-product-photos > summary {
    text-align: center !important;
    cursor: pointer;
}

/* FLEXIBLE DREAMWOVEN PRODUCT DETAILS */
.dw-product-specs .wp-block-columns {
    display: grid !important;
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, 250px), 1fr)
    ) !important;
    gap: 16px !important;
    align-items: start;
}

.dw-product-specs .wp-block-columns > .wp-block-column {
    flex-basis: auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* MUGS: BRING SECOND COLUMN CLOSER ON MOBILE */
@media screen and (max-width: 781px) {
    body.page-id-677 .dw-product-specs
    .wp-block-columns > .wp-block-column:nth-child(2) {
        margin-top: -30px !important;
    }
}

/* CANDLE FRAGRANCES: MOBILE SPACING */
@media screen and (max-width: 781px) {
    .dw-candle-specs .wp-block-columns > .wp-block-column:nth-child(2) {
        margin-top: -30px !important;
    }
}

/* REMOVE UNDERLINES FROM BACK TO SHOP LINKS */
.dw-back-to-shop a,
.dw-back-to-shop a:hover,
.dw-back-to-shop a:focus {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* Contact table: desktop column spacing */
@media screen and (min-width: 783px) {
  .wp-block-table.contact-table {
    width: 100% !important;
    max-width: 100% !important;
  }

  .wp-block-table.contact-table table {
    width: 100% !important;
    table-layout: auto !important;
  }

  .wp-block-table.contact-table table td:first-child {
    width: 1% !important;
    white-space: nowrap !important;
    padding-right: 12px !important;
  }
}

/* CONTACT TABLE: MOBILE SPACING FIX */
@media screen and (max-width: 782px) {
  .wp-block-table.contact-table table {
    table-layout: auto !important;
    width: 100% !important;
  }

  .wp-block-table.contact-table td:first-child {
    width: 1% !important;
    white-space: nowrap !important;
    padding-right: 12px !important;
  }

  .wp-block-table.contact-table td:last-child {
    width: auto !important;
    overflow-wrap: anywhere;
  }
}

/* DREAMWOVEN CONTACT LINKS */

/* Normal and visited */
.dw-social-links a,
.dw-social-links a:link,
.dw-social-links a:visited {
    color: #000000 !important;
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background-image: none !important;
    transition: color 0.2s ease;
}

/* Hover and keyboard focus */
.dw-social-links a:hover,
.dw-social-links a:focus-visible {
    color: #1EFFB4 !important;
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background-image: none !important;
}
/* Dreamwoven PNG social icon hover effect */

/* Smooth transition */
.dw-social-links a img {
    transition: filter 0.2s ease;
}

/* Change black PNG icons to Dreamwoven mint on hover */
.dw-social-links a:hover img,
.dw-social-links a:focus-visible img {
    filter: brightness(0) saturate(100%)
        invert(83.13%) sepia(35.92%)
        saturate(1451.6%) hue-rotate(72.27deg)
        brightness(174.23%) contrast(114.28%);
}


@media (max-width: 600px) {
  .dw-home-stars .wp-block-media-text__media img {
    width: 180px !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 600px) {
  .dw-about-stars > .wp-block-column:first-child img,
  .dw-about-stars > .wp-block-column:last-child img {
    width: 80px !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 600px) {
  .dw-about-stars > .wp-block-column:nth-child(2) img {
   
width: clamp(180px, 55vw, 260px) !important;

    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 600px) {
  .dw-about-stars {
    gap: 12px !important;
    row-gap: 12px !important;
  }
}


@media (min-width: 782px) {
  .dw-social-bottom-row {
    margin-top: -37px !important;
    margin-block-start: -37px !important;
  }
}

@media (max-width: 781px) {
  .dw-social-bottom-row {
    margin-top: -35px !important;
    margin-block-start: -35px !important;
  }
}

/* Compact portfolio jump navigation */
.portfolio-jump-columns {
    width: 100%;
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
    gap: 32px;
}

/* Remove extra gap between stacked mobile navigation columns */
@media (max-width: 781px) {
    .portfolio-jump-columns {
        gap: 0 !important;
    }
}

/* DREAMWOVEN HEADER BANNER SOFT EDGES */

#masthead a.header-image img {
    -webkit-mask-image:
        linear-gradient(to right,
            transparent 0%,
            black 8%,
            black 92%,
            transparent 100%),
        linear-gradient(to bottom,
            transparent 0%,
            black 12%,
            black 88%,
            transparent 100%);

    -webkit-mask-composite: source-in;

    mask-image:
        linear-gradient(to right,
            transparent 0%,
            black 8%,
            black 92%,
            transparent 100%),
        linear-gradient(to bottom,
            transparent 0%,
            black 12%,
            black 88%,
            transparent 100%);

    mask-composite: intersect;
}


/* Keep contact labels readable on narrow phones */
@media screen and (max-width: 429px) {
    .dw-social-links .wp-block-column p {
        font-size: clamp(12px, 3.7vw, 15px) !important;
        line-height: 1.35 !important;
    }
}



/* ABOUT ME: Smaller text on narrow phones */
@media screen and (max-width: 400px) {
    body.page-id-476 .entry-content > p {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
}


/* PORTFOLIO: Responsive text on small phones */
@media screen and (max-width: 400px) {

  /* Regular paragraphs and lists */
  body:has(.portfolio-jump-columns) .entry-content p,
  body:has(.portfolio-jump-columns) .entry-content li {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* Project headings and large text */
  body:has(.portfolio-jump-columns) .entry-content h2,
  body:has(.portfolio-jump-columns) .entry-content h3,
  body:has(.portfolio-jump-columns) .entry-content h4,
  body:has(.portfolio-jump-columns) .entry-content .has-large-font-size {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  /* Medium-sized text */
  body:has(.portfolio-jump-columns) .entry-content .has-medium-font-size {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* Expandable project descriptions */
  body:has(.portfolio-jump-columns) .entry-content .wp-block-details summary {
    font-size: 18px !important;
  }
}



/* SHOP PAGE: Responsive text on narrow phones */
@media screen and (max-width: 400px) {

  body:has(.dw-shop-hover) .entry-content p,
  body:has(.dw-shop-hover) .entry-content li {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

}

/* DREAMWOVEN: CONSISTENT TYPOGRAPHY ON NARROW PHONES */
/* Covers standard WordPress headings and font-size presets on all pages.
   Existing page-specific rules and social/product details remain in place. */
@media screen and (max-width: 400px) {

  /* WordPress headings, but not the H1 page title */
  body.page .entry-content :where(h2) {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  body.page .entry-content :where(h3) {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
  body.page .entry-content :where(h4, h5, h6) {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  /* WordPress Medium preset: ordinary paragraphs and lists */
  body.page .entry-content :where(
    p.has-medium-font-size:not(.dw-social-links *):not(.dw-product-specs *):not(.dw-product-title),
    li.has-medium-font-size:not(.dw-product-specs *)
  ) {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* WordPress Large preset: keep it visually larger than body text */
  body.page .entry-content :where(
    p.has-large-font-size:not(.dw-social-links *):not(.dw-product-specs *):not(.dw-product-title),
    li.has-large-font-size:not(.dw-product-specs *)
  ) {
    font-size: 18px !important;
    line-height: 1.4 !important;
  }

  /* WordPress extra-large / huge presets */
  body.page .entry-content :where(
    p.has-x-large-font-size:not(.dw-social-links *):not(.dw-product-specs *):not(.dw-product-title),
    p.has-huge-font-size:not(.dw-social-links *):not(.dw-product-specs *):not(.dw-product-title),
    li.has-x-large-font-size:not(.dw-product-specs *),
    li.has-huge-font-size:not(.dw-product-specs *)
  ) {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }
}

/* DREAMWOVEN: Responsive page titles */
@media screen and (max-width: 480px) {
    body.page .entry-header .entry-title,
    body.page .entry-header .page-title {
        font-size: clamp(28px, 7.5vw, 34px) !important;
        line-height: 1.2 !important;
    }
}


/* HOME: Mission statement mobile line spacing */
@media screen and (max-width: 400px) {
    .dw-mission-spacing {
        line-height: 1.5 !important;
    }
}




/* DREAMWOVEN MOBILE PRODUCT GRID */

@media (max-width: 781px) {

  .dreamwoven-product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px !important;
    align-items: start;
  }

  .dreamwoven-product-grid > .wp-block-group__inner-container {
    display: contents !important;
  }

  /* Let products flow across original rows */
  .dreamwoven-product-grid > .wp-block-columns,
  .dreamwoven-product-grid > .wp-block-group__inner-container > .wp-block-columns {
    display: contents !important;
  }

  /* Hide spacers on mobile */
  .dreamwoven-product-grid > .wp-block-spacer,
  .dreamwoven-product-grid > .wp-block-group__inner-container > .wp-block-spacer {
    display: none !important;
  }

  /* Product columns */
  .dreamwoven-product-grid .wp-block-columns > .wp-block-column {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-basis: auto !important;
    margin: 0 !important;
  }

  /* Final row: occupy both grid columns */
  .dreamwoven-product-grid .wp-block-columns:has(> .dreamwoven-final-product) {
    display: flex !important;
    grid-column: 1 / -1 !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  /* Remove empty side columns from final row */
  .dreamwoven-product-grid .wp-block-columns:has(> .dreamwoven-final-product) > .wp-block-column:not(.dreamwoven-final-product) {
    display: none !important;
  }

  /* Center Canvas Prints at one product's width */
  .dreamwoven-product-grid .wp-block-columns > .dreamwoven-final-product {
    width: calc((100% - 12px) / 2) !important;
    max-width: calc((100% - 12px) / 2) !important;
    flex: 0 0 calc((100% - 12px) / 2) !important;
    transform: none !important;
  }

  /* Responsive images */
  .dreamwoven-product-grid .wp-block-image img {
    max-width: 100%;
    height: auto;
  }

  /* Responsive buttons */
  .dreamwoven-product-grid .wp-block-button {
    width: 100%;
  }

  .dreamwoven-product-grid .wp-block-button__link {
    box-sizing: border-box;
    width: 100%;
    font-size: 12px !important;
    line-height: 1.25;
    padding: 9px 5px !important;
    white-space: normal;
    word-break: normal !important;
    hyphens: none !important;
  }
}

/* EXTRA SMALL PHONES */

@media (max-width: 359px) {

  .dreamwoven-product-grid {
    gap: 16px 8px !important;
  }

  .dreamwoven-product-grid .wp-block-button__link {
    font-size: 11px !important;
    padding: 8px 3px !important;
  }

  .dreamwoven-product-grid .wp-block-columns > .dreamwoven-final-product {
    width: calc((100% - 8px) / 2) !important;
    max-width: calc((100% - 8px) / 2) !important;
    flex-basis: calc((100% - 8px) / 2) !important;
  }
}



/* Canvas Prints - mobile image size only */
@media (max-width: 781px) {
  .wp-block-column.dreamwoven-final-product .wp-block-image img {
    width: 135px !important;
    max-width: 100% !important;
    height: auto !important;
  }
}


/* MATCH CANVAS PRINTS BUTTON TO MOBILE GRID */

@media (max-width: 781px) {
  .dreamwoven-final-product .wp-block-button__link {
    font-size: 12px !important;
    line-height: 1.25 !important;
    padding: 9px 5px !important;
  }
}

@media (max-width: 359px) {
  .dreamwoven-final-product .wp-block-button__link {
    font-size: 11px !important;
    padding: 8px 3px !important;
  }
}