/*
* CSS modifications for the Revista Fotonou articles for block editor and front-end.
* These are modifications in relation to the Blocksy theme CSS.
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* 
* Set font family and size at earliest possible HTML element: 
* - div.editor-styles-wrapper for block editor
* - body.single-f9_article for front-end
* The size is calulated by using the --fontSize variable from the Blocksy theme.
* This will ensure different font sizes for mobile, tablet and desktop.
* This font size is later used as a reference for all em sizes in this CSS file.
*/

/* BASE TEXT */
body.post-type-f9_article div.editor-styles-wrapper,
body.single-f9_article {
    font-family: 'Montserrat';
    font-size: calc( var(--fontSize) - 1px );
    font-weight: 300;
    line-height: 1.3em;
    --f9-color: #98311E;
}

/*
* Use ".post-type-f9_article .editor-styles-wrapper" selectors to target the content within the block editor.
* Use ".f9_article .entry-content (or .entry-header)" selectors to target the content on the front-end.
*/

/* ARTICLE TITLE */
.post-type-f9_article .editor-styles-wrapper .editor-post-title, 
.f9_article .entry-header .page-title {
    margin-top: 0em;
    margin-bottom: 0.6em;
    font-family: 'Times New Roman';
    font-size: 2.4em;
    font-weight: 800;
    line-height: 1.2em;
    letter-spacing: 0.02em;
    font-style: italic;
    color: var(--f9-color);
}

/* HEADINGS */
.post-type-f9_article .editor-styles-wrapper h1,
.f9_article .entry-content h1 {
    font-family: 'Times New Roman';
    font-size: 2.4em;
    font-weight: 600;
    color: var(--f9-color);
    margin-top: 2.2em;
    margin-bottom: 0.8em;
}
.post-type-f9_article .editor-styles-wrapper h2,
.f9_article .entry-content h2 {
    font-family: 'Montserrat';
    font-size: 1.2em;
    font-weight: 600;
    margin-top: 2.0em;
    margin-bottom: 0.2em;
    clear:both;
} 
.post-type-f9_article .editor-styles-wrapper h3,
.f9_article .entry-content h3 {
    font-family: 'Montserrat';
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 1.6em;
    margin-bottom: 0.2em;
    clear:both;
}
.post-type-f9_article .editor-styles-wrapper h4,
.f9_article .entry-content h4 {
    font-family: 'Montserrat';
    font-size: 1.0em;
    font-weight: 600;
    margin-top: 0.8em;
    margin-bottom: 0.0em;
    clear:both;
}
.post-type-f9_article .editor-styles-wrapper h5,
.f9_article .entry-content h5 {
    font-family: 'Montserrat';
    font-size: 1.0em;
    font-weight: 500;
    line-height: 1.3em;
    margin-top: 1.2em;
    margin-bottom: 0.2em;
}
.post-type-f9_article .editor-styles-wrapper h6,
.f9_article .entry-content h6 {
    font-family: 'Montserrat';
    font-size: 1.0em;
    font-weight: 500;
    line-height: 1.3em;
    margin-top: 1.2em;
    margin-bottom: 0.2em;
}

/* PARAGRAPH */
.post-type-f9_article div.editor-styles-wrapper p,
.f9_article p {
    line-height: 1.3em;
}

.post-type-f9_article div.editor-styles-wrapper strong,
.f9_article strong {
    font-weight: 500;
}

/* LINK */
.post-type-f9_article div.editor-styles-wrapper a, 
.f9_article a {
	text-decoration: none;
    font-weight: 400;
}

/* DROP CAP */
.post-type-f9_article .editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter,
.f9_article .entry-content .has-drop-cap:not(:focus)::first-letter {
    font-size: 2.9em;
    font-weight: 400;
    margin: 0.1em 0.1em 0 0;
}

/* LIST ITEM */
/* BUGFIX 2nd level list item is same type as 1st level in frontend */
.f9_article .entry-content ul ul {
    list-style-type: circle;
}

/* MEDIA SPACING */
.post-type-f9_article, 
.f9_article { 
    --f9-media-margin-horizontal: 2em;
    --f9-media-margin-vertical: 2em;
}

/* IMAGE MARGINS */
.post-type-f9_article .editor-styles-wrapper .wp-block-image,
.f9_article .entry-content .wp-block-image {
    margin-top: var(--f9-media-margin-vertical);
    margin-bottom: var(--f9-media-margin-vertical);
}

/* Different margins for floating images */ 
.post-type-f9_article .editor-styles-wrapper [data-align="left"] .wp-block-image,
.f9_article .entry-content .wp-block-image .alignleft,   /* For articles written with WordPress 5.9 and before */
.f9_article .entry-content .wp-block-image.alignleft {   /* For articles written with WordPress 6.0 and after */
    margin-top: calc( var(--f9-media-margin-vertical) / 2 );
    margin-bottom: calc( var(--f9-media-margin-vertical) / 2 );
    margin-right: var(--f9-media-margin-horizontal);
}

.post-type-f9_article .editor-styles-wrapper [data-align="right"] .wp-block-image,
.f9_article .entry-content .wp-block-image .alignright,   /* For articles written with WordPress 5.9 and before */
.f9_article .entry-content .wp-block-image.alignright {   /* For articles written with WordPress 6.0 and after */
    margin-top: calc( var(--f9-media-margin-vertical) / 2 );
    margin-bottom: calc( var(--f9-media-margin-vertical) / 2 );
    margin-left: var(--f9-media-margin-horizontal);
}



.f9_article .entry-content div[class^="wp-container"] > .wp-block-image {
    margin-top: calc( var(--f9-media-margin-vertical) / 2 );
    margin-bottom: calc( var(--f9-media-margin-vertical) / 2 );
}



/* BUGFIX Cancel left and right floating images within groups or rows on mobile screens */
/* Needed as we use containers to avoid misalignment of images introduced in WordPress 6.0 */
@media (max-width: 689.98px) {
	.f9_article .entry-content div[class^="wp-container"] > .alignleft,
    .f9_article .entry-content div[class^="wp-container"] > .alignright {
	    float: none;
	    max-width: 100%;
        margin-top: var(--f9-media-margin-vertical);
        margin-bottom: var(--f9-media-margin-vertical);
        margin-left: auto;
        margin-right: auto;
	}
}

/* BUGFIX for group and row vertical alignment not working in frontend */
/* Still not working in WordPress 6.0.1 */
/*
.f9_article .entry-content div[class^="wp-container"] {
	align-items: flex-start;
}
*/

/* IMAGE FIGCAPTION */
.post-type-f9_article .editor-styles-wrapper .wp-block-image figcaption {
    /* Fix block editor not displaying figcation as in frontend */
    font-family: var(--fontFamily);
    font-size: 14px;
    font-weight: var(--fontWeight);
    line-height: var(--lineHeight);
}

.post-type-f9_article .editor-styles-wrapper .wp-block-image figcaption,
.f9_article .entry-content .wp-block-image figcaption {
    padding: 0;
    margin-top: 0.2em;
}

/* Different text alignment for Desktop mode */ 
@media (min-width: 690px) {
    .post-type-f9_article .editor-styles-wrapper [data-align="left"] .wp-block-image figcaption,
    .f9_article .entry-content .wp-block-image .alignleft figcaption,   /* For articles written with WordPress 5.9 and before */
    .f9_article .entry-content .wp-block-image.alignleft figcaption {   /* For articles written with WordPress 6.0 and after */
        text-align: left;
    }
    .post-type-f9_article .editor-styles-wrapper [data-align="right"] .wp-block-image figcaption,
    .f9_article .entry-content .wp-block-image .alignright figcaption,   /* For articles written with WordPress 5.9 and before */
    .f9_article .entry-content .wp-block-image.alignright figcaption {   /* For articles written with WordPress 6.0 and after */
        text-align: right;
    }
}

/* IMAGE GALLERY */
.f9_article .entry-content .wp-block-gallery {
    /* Fix for problem introduced with the upgrade to WordPress 6.0.
    For some unknown reason the display proprerty was set to block.
    This resulted in gallery images to be displayed one below the other.
    Error was visible in article 2022/04 "El muntatge d’un estudi fotogràfic al Fotoclub". */
    display: flex;
}

.post-type-f9_article .editor-styles-wrapper .wp-block-gallery,
.f9_article .entry-content .wp-block-gallery {
	margin-top: var(--f9-media-margin-vertical);
	margin-bottom: var(--f9-media-margin-vertical);
}

/* IMAGE GALLERY FIGCAPTION */
.post-type-f9_article .editor-styles-wrapper figcaption.blocks-gallery-caption {
    /* Fix block editor not displaying figcation as in frontend */
    font-family: var(--fontFamily);
    font-size: 14px;
    font-weight: var(--fontWeight);
    line-height: var(--lineHeight);
}

.post-type-f9_article .editor-styles-wrapper figcaption.blocks-gallery-caption,
.f9_article .entry-content figcaption.blocks-gallery-caption {
    margin-top: -0.5em;   /* Negative margin to reduce the gap between the last row of images and the gallery caption */
}

/* MEOW IMAGE GALLERY */
.post-type-f9_article .editor-styles-wrapper .mgl-tiles-container,
.post-type-f9_article .editor-styles-wrapper .mgl-masonry-container,
.post-type-f9_article .editor-styles-wrapper .mgl-justified-container,
.post-type-f9_article .editor-styles-wrapper .mgl-square-container,
.post-type-f9_article .editor-styles-wrapper .mgl-cascade-container,
.f9_article .entry-content .mgl-tiles-container,
.f9_article .entry-content .mgl-masonry-container,
.f9_article .entry-content .mgl-justified-container,
.f9_article .entry-content .mgl-square-container,
.f9_article .entry-content .mgl-cascade-container {
	margin-top: var(--f9-media-margin-vertical);
	margin-bottom: var(--f9-media-margin-vertical);
}

/* GALLERY CAPTION custom paragraph style  */
.post-type-f9_article .editor-styles-wrapper .is-style-gallery-caption,
.f9_article .entry-content .is-style-gallery-caption {
	text-align: center;
    font-family: var(--fontFamily);
    font-size: 14px ;
    font-weight: var(--fontWeight);
    line-height: var(--lineHeight);
}

.f9_article .entry-content .is-style-gallery-caption {
    margin-top: calc( 0px - var(--f9-media-margin-vertical) * 3 / 2 );
    margin-bottom: var(--f9-media-margin-vertical); 
}

@media (max-width: 689.98px) {  
    .f9_article .entry-content .is-style-gallery-caption {
        margin-top: calc( 7px - var(--f9-media-margin-vertical) * 3 / 2 );
    }
}

.post-type-f9_article .editor-styles-wrapper .is-style-gallery-caption {
    margin-top: -20px;
}

/* IMAGE COMPARISON */
.post-type-f9_article .editor-styles-wrapper .wp-block-ideabox-image-comparison,
.f9_article .entry-content .wp-block-ideabox-image-comparison {
    margin-top: var(--f9-media-margin-vertical);
    margin-bottom: var(--f9-media-margin-vertical);
}

/* EMBEDS */
.post-type-f9_article .editor-styles-wrapper .wp-block-embed,
.f9_article .entry-content .wp-block-embed {
    margin-top: var(--f9-media-margin-vertical);
    margin-bottom: var(--f9-media-margin-vertical);
}

.post-type-f9_article .editor-styles-wrapper h6 + .wp-block-embed,
.f9_article .entry-content h6 + .wp-block-embed {
    margin-top: 10px;
}

/* PULLQUOTE */
.post-type-f9_article .editor-styles-wrapper .wp-block-pullquote blockquote:before,
.f9_article .entry-content .wp-block-pullquote blockquote:before {
    display:none;    /* Hide quote symbol */
}

.post-type-f9_article .editor-styles-wrapper .wp-block-pullquote,
.f9_article .entry-content .wp-block-pullquote {
    border: none;
    padding-top: 0.75em;
    padding-bottom: 0.75em;   
    padding-left: 1em;
    padding-right: 1.5em;
}

.post-type-f9_article .editor-styles-wrapper [data-align="left"] .wp-block-pullquote, 
.f9_article .entry-content .wp-block-pullquote.alignleft {
    text-align: right;
    padding-left: 0;
    margin: 0;
  	max-width: 400px;
}

.post-type-f9_article .editor-styles-wrapper [data-align="right"] .wp-block-pullquote, 
.f9_article .entry-content .wp-block-pullquote.alignright  {
    text-align: left;
    padding-right: 0;
    margin:0;
    max-width: 400px;
}

.post-type-f9_article .editor-styles-wrapper .wp-block-pullquote blockquote,
.f9_article .entry-content .wp-block-pullquote blockquote {
	color: var(--paletteColor1);
}

.post-type-f9_article .editor-styles-wrapper .wp-block-pullquote blockquote p,
.f9_article .entry-content .wp-block-pullquote blockquote p {
	font-family: 'Montserrat';
	font-size: 1.0em !important;
	line-height: 1.3em !important;
	font-weight: 500;
}

.post-type-f9_article .editor-styles-wrapper .wp-block-pullquote:after,
.f9_article .entry-content .wp-block-pullquote:after {
	border: none;
}

@media (max-width: 689.98px) {
    .f9_article .entry-content .wp-block-pullquote {
        display: none;      /* Hide pullquotes on mobiles */
    }
} 

/* QUOTE */
.f9_article .entry-content blockquote.wp-block-quote.is-style-intro-quote {
    max-width: calc( var(--narrow-container-max-width) + var(--f9-hero-offset) * 2);
    padding-top: 0em !important;
}

.f9_article .entry-content blockquote.wp-block-quote.is-style-intro-quote cite {
    max-width: calc( var(--narrow-container-max-width) + var(--f9-hero-offset) * 2);
}


.post-type-f9_article .editor-styles-wrapper blockquote.wp-block-quote,
.f9_article .entry-content blockquote.wp-block-quote {
    border: none;
}

.post-type-f9_article .editor-styles-wrapper blockquote.wp-block-quote p,
.f9_article .entry-content blockquote.wp-block-quote p {
    font-family: 'Montserrat';
    font-size: 1.1em;
    font-weight: 500;
}

.post-type-f9_article .editor-styles-wrapper blockquote.wp-block-quote,
.f9_article .entry-content blockquote.wp-block-quote {
    padding: 1.5em 5% !important;
}

.post-type-f9_article .editor-styles-wrapper blockquote.wp-block-quote.has-text-align-left,
.f9_article .entry-content blockquote.wp-block-quote.has-text-align-left {
    padding-left: 0 !important;
    padding-right: 10% !important;
}

.post-type-f9_article .editor-styles-wrapper blockquote.wp-block-quote.has-text-align-right,
.f9_article .entry-content blockquote.wp-block-quote.has-text-align-right {
    padding-left: 10% !important;
    padding-right: 0 !important;
}

.post-type-f9_article .editor-styles-wrapper blockquote.wp-block-quote cite,
.f9_article .entry-content blockquote.wp-block-quote cite {
    margin-top: 0;
    font-family: 'Montserrat';
    font-size: 0.7em !important;
}

.post-type-f9_article .editor-styles-wrapper blockquote.wp-block-quote.has-text-align-left cite,
.f9_article .entry-content blockquote.wp-block-quote.has-text-align-left cite {
    text-align: right;
}

.post-type-f9_article .editor-styles-wrapper blockquote.wp-block-quote.has-text-align-right cite,
.f9_article .entry-content blockquote.wp-block-quote.has-text-align-right cite {
    text-align: left;
}

/* COVER PAGE */
.f9_article_archive .pt-cv-content p,
.f9_article .pt-cv-content p {
    margin-bottom: 0px;
}

[data-prefix="f9_article_archive"]  .pt-cv-thumbnail.pull-left,
.f9_article .pt-cv-thumbnail.pull-left {
    margin-right: 20px !important;
}

[data-prefix=f9_article_archive] .pt-cv-meta-fields,
.f9_article .pt-cv-meta-fields {
    margin-right: 50px !important;
}

@media (max-width: 690px) {
    .f9_article div.staff-col-1>*,
	.f9_article div.staff-col-2>* {
        text-align: left;
        margin-left: auto;
    }
}